/* App de celular: columna de 480px, barra de pestañas inferior, tarjetas sobrias y semáforo (verde, ámbar, rojo) aparte del acento petróleo. */
:root{
  --f-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --f-sign:"Caveat","Segoe Script",cursive;
  --bg:#ECEFF2; --surface:#FFFFFF; --surface2:#F4F6F8; --ink:#14212B; --ink2:#53636F; --line:#D5DCE2;
  --accent:#0B5D7B; --accent-ink:#FFFFFF; --accent-soft:#DAEBF2;
  --ok:#1B7A4B; --ok-soft:#DCF1E5; --warn:#9A5A07; --warn-soft:#FAEBCC; --bad:#B3261E; --bad-soft:#F8DDDA;
  --on-ok:#FFFFFF; --on-bad:#FFFFFF; --scrim:rgba(10,18,24,.55); --shadow:0 6px 24px rgba(10,18,24,.16);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0E161C; --surface:#16222A; --surface2:#1C2B34; --ink:#E6EDF1; --ink2:#9DAFBA; --line:#2A3B46;
  --accent:#5DB9DA; --accent-ink:#04202B; --accent-soft:#12343F;
  --ok:#5FCB94; --ok-soft:#14362A; --warn:#EDB45B; --warn-soft:#3B2C12; --bad:#FF8F86; --bad-soft:#431F1D;
  --on-ok:#04200F; --on-bad:#3A0805; --scrim:rgba(0,0,0,.6); --shadow:0 6px 24px rgba(0,0,0,.5); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E161C; --surface:#16222A; --surface2:#1C2B34; --ink:#E6EDF1; --ink2:#9DAFBA; --line:#2A3B46;
  --accent:#5DB9DA; --accent-ink:#04202B; --accent-soft:#12343F;
  --ok:#5FCB94; --ok-soft:#14362A; --warn:#EDB45B; --warn-soft:#3B2C12; --bad:#FF8F86; --bad-soft:#431F1D;
  --on-ok:#04200F; --on-bad:#3A0805; --scrim:rgba(0,0,0,.6); --shadow:0 6px 24px rgba(0,0,0,.5); color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--f-body);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 100px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:10}
.app{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:14px;min-width:0}
.app>*{min-width:0}
h2{font:700 25px/1.1 var(--f-display);margin:0;text-wrap:balance}
h3{font:700 16px/1.2 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin:0 0 8px}
p{margin:0}
.sub{color:var(--ink2);font-size:14px}
.ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--bg);padding:10px 0 8px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{width:36px;height:36px;border-radius:9px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex:none}
.brand b{font:700 21px/1 var(--f-display);letter-spacing:.01em;display:block}
.brand small{color:var(--ink2);font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


select,input[type=text],input[type=number],textarea{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px}
textarea{min-height:84px;resize:vertical}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
fieldset.field{border:0;padding:0;margin:0}
.lab,.field>label{font-weight:600;font-size:14px}
legend.lab{padding:0 0 6px}
.err{color:var(--bad);font-size:13px;font-weight:500}
.bad-in{border-color:var(--bad)!important}

.btn{min-height:46px;padding:0 16px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 15px var(--f-body);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-align:center}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:var(--on-ok)}
.btn.bad{background:var(--bad);border-color:var(--bad);color:var(--on-bad)}
.btn.sm{min-height:40px;padding:0 12px;font-size:14px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.block{width:100%}
.row2{display:flex;gap:10px;align-items:center}.row2>*{flex:1;min-width:0}

.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card.flat{padding:0;gap:0;overflow:hidden}
.pill{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.info{background:var(--accent-soft);color:var(--accent)}.pill.mute{background:var(--surface2);color:var(--ink2);border:1px solid var(--line)}
.plate{font:600 13px var(--f-mono);letter-spacing:.07em;border:1.5px solid var(--ink);border-radius:4px;padding:1px 6px;background:var(--surface);color:var(--ink);white-space:nowrap}
.alert{border-radius:10px;padding:10px 12px;display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4}
.alert>div{min-width:0}
.alert.bad{background:var(--bad-soft);color:var(--bad)}.alert.warn{background:var(--warn-soft);color:var(--warn)}
.alert.ok{background:var(--ok-soft);color:var(--ok)}.alert.info{background:var(--accent-soft);color:var(--accent)}
.alert b{font-weight:700}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}

.rec{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:12px 14px;border:0;border-top:1px solid var(--line);text-align:left;width:100%;background:none;color:inherit;font:inherit;cursor:pointer}
.rec:first-child{border-top:0}
.l1{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.meta{color:var(--ink2);font-size:13px;min-width:0}
.rec .r,.vr .r{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.empty{padding:18px 14px;color:var(--ink2);text-align:center}

.vr{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:11px 14px 11px 12px;border:0;border-top:1px solid var(--line);border-left:4px solid var(--line);width:100%;background:none;color:inherit;font:inherit;text-align:left}
.vr:first-child{border-top:0}
button.vr{cursor:pointer}
.vr.s-ok{border-left-color:var(--ok)}.vr.s-warn{border-left-color:var(--warn)}.vr.s-bad{border-left-color:var(--bad)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kpi{background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:2px}
.kpi b{font:700 28px/1 var(--f-display)}.kpi span{font-size:12px;color:var(--ink2)}

.seg3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:6px}
.seg3 label,.seg label{position:relative;display:block;min-width:0}
.seg3 input,.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg3 span,.seg span{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-weight:600;font-size:14px;text-align:center;padding:0 6px}
.seg3 input:checked+span.ok,.seg input:checked+span.c-ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.seg3 input:checked+span.no,.seg input:checked+span.c-bad{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.seg3 input:checked+span.na{background:var(--surface2);border-color:var(--ink2);color:var(--ink2)}
.seg input:checked+span.c-warn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.seg input:checked+span:not([class]){background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.seg3 input:focus-visible+span,.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.seg input:disabled+span{opacity:.55}

.steps{display:flex;gap:4px}.steps i{flex:1;height:5px;border-radius:3px;background:var(--line)}.steps i.d{background:var(--accent)}.steps i.c{background:var(--accent);opacity:.5}
.item{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0;padding-top:0}
.ilab{font-weight:500}
.tag{font:600 10px var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--bad);border:1px solid var(--bad);border-radius:4px;padding:0 5px;margin-left:8px;vertical-align:1px;white-space:nowrap}
.nobox{background:var(--bad-soft);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:8px}
.nobox .lab{color:var(--bad)}
.ph{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.thumb{width:64px;height:48px;border-radius:6px;object-fit:cover;border:1px solid var(--line);background:var(--surface2)}
.filebtn{position:relative;overflow:hidden}
.filebtn input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;font-size:0}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.slot{border:1px dashed var(--line);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px;align-items:stretch;background:var(--surface2)}
.slot .thumb{width:100%;height:72px}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:9;background:var(--surface);border-top:1px solid var(--line);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
.tabbar .in{max-width:480px;margin:0 auto;display:flex;gap:2px}
.tabbar button{flex:1;min-width:0;background:none;border:0;color:var(--ink2);display:flex;flex-direction:column;align-items:center;gap:2px;font:600 11px var(--f-body);padding:6px 2px;border-radius:8px;cursor:pointer;position:relative}
.tabbar button[aria-current=page]{color:var(--accent);background:var(--accent-soft)}
.tabbar .ic{width:22px;height:22px}
.badge{position:absolute;top:1px;left:calc(50% + 6px);min-width:17px;height:17px;border-radius:9px;background:var(--bad);color:var(--on-bad);font:600 11px/17px var(--f-mono);text-align:center;padding:0 4px}

.scrim{position:fixed;inset:0;z-index:30;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:520px;max-height:92%;overflow:auto;background:var(--bg);border-radius:16px 16px 0 0;padding:16px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:12px}
.paper{background:#fff;color:#14212B;border-radius:6px;padding:16px 14px;font-size:13px;line-height:1.4;display:flex;flex-direction:column;gap:10px}
.paper h4{font:700 21px/1.1 "Barlow Condensed","Arial Narrow",sans-serif;margin:0}
.paper .tw{overflow-x:auto}
.paper table{border-collapse:collapse;width:100%;font-size:12px}
.paper td,.paper th{border-bottom:1px solid #d8dde1;padding:4px 6px;text-align:left;vertical-align:top}
.paper th{background:#eef1f3}
.paper .g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.csv{font:12px/1.4 var(--f-mono);min-height:150px}

.push{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:40;display:flex;justify-content:center;padding:0 max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));pointer-events:none}
.push .n{pointer-events:auto;max-width:440px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:12px;display:flex;gap:10px;align-items:flex-start;animation:drop .35s ease-out}
.push .n>div:last-child{min-width:0}
@keyframes drop{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}

.sig{position:relative;background:#fff;border:1.5px dashed var(--ink2);border-radius:8px;height:170px;touch-action:none}
.sig canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;border-radius:8px;cursor:crosshair}
.sig .hint{position:absolute;left:0;right:0;bottom:12px;text-align:center;color:#6b7a85;font-size:13px;pointer-events:none}
.sig .base{position:absolute;left:10%;right:10%;bottom:40px;border-bottom:1px solid #b9c3ca;pointer-events:none}
.sigimg{background:#fff;border:1px solid var(--line);border-radius:8px;height:72px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sigimg img{max-height:100%;max-width:100%}
.sigtxt{font:600 30px/1 var(--f-sign);color:#14212B}
.sigpend{height:72px;border:1px dashed var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ink2);font-size:13px;text-align:center;padding:0 8px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.kv div{min-width:0}.kv small{display:block;color:var(--ink2);font-size:12px}.kv span{font-weight:600;overflow-wrap:anywhere}
details.sec{border:1px solid var(--line);border-radius:10px;background:var(--surface)}
details.sec>summary{padding:12px 14px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;list-style:none}
details.sec>summary::-webkit-details-marker{display:none}
.secb{padding:0 14px 8px}
.drow{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.dobs{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink2)}
.dobs span{flex:1;min-width:0}

.chart svg{width:100%;height:auto;display:block}
.grid{stroke:var(--line);stroke-width:1}
.lbl{fill:var(--ink2);font:10px var(--f-mono)}
.val{fill:var(--ink);font:600 10px var(--f-mono)}
.b-on{fill:var(--accent)}.b-late{fill:var(--warn)}
.leg{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink2)}
.leg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.bl{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.bl:first-child{border-top:0}
.meter{grid-column:1/-1;height:6px;border-radius:3px;background:var(--surface2);overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent)}
.meter i.w{background:var(--warn)}.meter i.b{background:var(--bad)}

.tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.sw{position:relative;width:46px;height:28px}
.sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sw span{position:absolute;inset:0;border-radius:14px;background:var(--line);transition:background .15s}
.sw span::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .15s}
.sw input:checked+span{background:var(--bad)}.sw input:checked+span::after{transform:translateX(18px)}
.sw input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.days{display:flex;gap:6px}.days span{flex:1;text-align:center;padding:6px 0;border-radius:6px;font:600 13px var(--f-mono);background:var(--surface2);color:var(--ink2)}
.days span.on{background:var(--accent);color:var(--accent-ink)}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.chk input{width:22px;height:22px;margin:0;flex:none}
.stack{display:flex;flex-direction:column;gap:14px}
.paper .sigpend{color:#5a6873;border-color:#c5ced5}.paper .sigimg{border-color:#c5ced5}.paper .sub{color:#5a6873}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- Pantallas de la app real ---- */
.boot{padding:60px 0;text-align:center;color:var(--ink2)}
.login{margin-top:8vh;display:flex;flex-direction:column;gap:14px}
.login .logo{width:56px;height:56px;border-radius:14px}
.login .logo .ic{width:30px;height:30px}
.offline{background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:8px 12px;font-size:13px;font-weight:600}
.avatar{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:700 15px var(--f-display);display:grid;place-items:center;cursor:pointer;flex:none}
.top .rt{display:flex;align-items:center;gap:8px}
.spin{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:rot .8s linear infinite;vertical-align:-3px}
@keyframes rot{to{transform:rotate(360deg)}}
.prog{font-size:13px;color:var(--ink2);text-align:center}
.mini{font-size:12px;color:var(--ink2)}
.date2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hol{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.hol:first-child{border-top:0}
.tl{display:flex;flex-direction:column;gap:6px;font-size:13px}
.tl div{display:grid;grid-template-columns:auto 1fr;gap:2px 10px}
.tl b{font-weight:600}.tl span{color:var(--ink2)}
.bar-save{position:sticky;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:8;background:var(--surface);border:1px solid var(--accent);border-radius:12px;padding:10px;display:flex;gap:10px;align-items:center;box-shadow:var(--shadow)}
.bar-save span{flex:1;min-width:0;font-size:13px}
.hide{display:none!important}

/* ---- Impresión: el informe de un registro (Guardar como PDF) ---- */
#print{display:none}
@media print{
  html,body{background:#fff!important}
  body>*:not(#print){display:none!important}
  #print{display:block!important;color:#14212B;font:12px/1.4 "Barlow",Arial,sans-serif}
  #print h1{font:700 24px "Barlow Condensed","Arial Narrow",sans-serif;margin:0 0 2px}
  #print .meta2{color:#53636F;margin-bottom:10px}
  #print .g2{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:10px 0}
  #print table{border-collapse:collapse;width:100%;margin:8px 0}
  #print th,#print td{border-bottom:1px solid #cfd6db;padding:4px 6px;text-align:left;vertical-align:top}
  #print th{background:#eef1f3}
  #print .ph{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
  #print .ph img{width:100%;height:120px;object-fit:cover;border:1px solid #cfd6db}
  #print .sigs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:14px}
  #print .sigs img{height:70px;border-bottom:1px solid #14212B}
  #print tr,#print .sigs,#print .ph{break-inside:avoid}
  @page{margin:14mm}
}