/* SERVICIOS GANADEROS · SG Campo (app del ganadero) · estilos
   Sale del prototipo aprobado el 2026-11-10 (docs/prototipo_app_ganadero.html), opción A «Blanco»:
   fondo blanco, logo negro, recuadros con borde negro y sombra negra, ámbar solo en Parto y Guardar.
   El archivo conserva las capas del prototipo (base → casillas con dibujo → aspecto blanco); manda la última.
   Al final: lo añadido para la app real (entrada, avisos, estado de los envíos). */
@font-face{font-family:'Archivo';src:url('fuentes/archivo-latin-wdth-normal.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Inter';src:url('fuentes/inter-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-display:swap}
body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout: una columna de móvil (máx. 480px), cabecera azul petróleo, dos pestañas fijas abajo, botones grandes para una mano. */
:root{
  --bg:#EEF3F4; --surface:#FFFFFF; --surface2:#F6F9FA;
  --ink:#0F2A33; --ink2:#47606A; --ink3:#71878F; --line:#D5E0E4;
  --petrol:#0E4D5E; --petrol-deep:#0A3643; --petrol-soft:#DDECEF; --on-petrol:#FFFFFF; --on-petrol2:#B9D6DD;
  --amber:#F5A623; --amber-deep:#D98A06; --amber-soft:#FFF1D6; --on-amber:#2E1E00;
  --ok:#1B7A4B; --ok-soft:#DFF3E8; --warn:#9A5B00; --warn-soft:#FFEFD2; --bad:#B3261E; --bad-soft:#FBE4E2;
  --chart:#0E4D5E; --shadow:0 1px 2px rgba(15,42,51,.06),0 6px 18px rgba(15,42,51,.06);
  --f-display:'Archivo','Arial Narrow',system-ui,sans-serif; --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:16px; --r-sm:12px;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.app{max-width:480px;margin:0 auto;min-height:100vh;padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* cabecera */
.top{background:linear-gradient(160deg,var(--petrol),var(--petrol-deep));color:var(--on-petrol);padding-block:14px 18px;border-radius:0 0 22px 22px}
.top-row{display:flex;align-items:center;gap:12px}
.logo{height:34px;width:auto;filter:brightness(0) invert(1);flex:none}
.marca{font-family:var(--f-display);font-stretch:85%;font-weight:700;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-petrol2);line-height:1.1}
.marca b{display:block;color:var(--on-petrol);font-size:20px;letter-spacing:.01em;text-transform:none;font-weight:800}
.red{margin-left:auto;display:flex;align-items:center;gap:7px;min-height:40px;padding:0 12px;border-radius:99px;background:rgba(255,255,255,.12);color:var(--on-petrol);font-size:13px;font-weight:600}
.red i{width:9px;height:9px;border-radius:50%;background:#6FE3A5}
.red.off i{background:var(--amber)}
.hola{margin-top:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.hola h1{margin:0;font-family:var(--f-display);font-stretch:88%;font-weight:800;font-size:26px;line-height:1.1;text-wrap:balance}
.hola p{margin:4px 0 0;color:var(--on-petrol2);font-size:14px}
.cola{flex:none;background:var(--amber);color:var(--on-amber);border-radius:12px;padding:8px 12px;font-weight:700;font-size:13px;text-align:center;line-height:1.15}
.cola b{display:block;font-family:var(--f-display);font-size:22px}

/* barra de pantalla interior */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--petrol);color:var(--on-petrol);padding-block:10px}
.bar .in{display:flex;align-items:center;gap:8px}
.bar h2{margin:0;font-family:var(--f-display);font-stretch:88%;font-weight:800;font-size:21px;flex:1;min-width:0}
.back{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--on-petrol);background:rgba(255,255,255,.12)}
.bar small{font-size:12px;color:var(--on-petrol2);font-weight:600}

h3.sec{margin:22px 0 10px;font-family:var(--f-display);font-stretch:88%;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
.demo{margin-top:14px;font-size:12.5px;color:var(--ink2);background:var(--amber-soft);border-radius:10px;padding:8px 12px}

/* casillas */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:104px;text-align:center;box-shadow:var(--shadow);transition:transform .12s}
.tile:active{transform:scale(.97)}
.tile .ic{width:44px;height:44px;border-radius:13px;background:var(--petrol-soft);color:var(--petrol);display:grid;place-items:center}
.tile span{font-weight:600;font-size:14px;line-height:1.2}
.tile em{font-style:normal;font-family:var(--f-display);font-weight:800;font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.tile.main{grid-column:span 3;flex-direction:row;justify-content:flex-start;padding:16px;gap:14px;background:var(--amber);border-color:var(--amber);color:var(--on-amber);min-height:76px;text-align:left}
.tile.main .ic{background:rgba(46,30,0,.14);color:var(--on-amber)}
.tile.main span{font-family:var(--f-display);font-stretch:88%;font-size:22px;font-weight:800}
.tile.main small{display:block;font-family:var(--f-body);font-size:13px;font-weight:500;opacity:.8}
.tile.wide{grid-column:span 3;flex-direction:row;justify-content:flex-start;padding:12px 16px;gap:14px;min-height:68px;text-align:left}
.tile.wide small{display:block;font-weight:400;font-size:13px;color:var(--ink2)}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.tri span{background:var(--surface2);border-radius:8px;padding:5px 8px;font-family:var(--f-display);font-weight:800;font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.tri i{display:block;font-family:var(--f-body);font-style:normal;font-weight:600;font-size:11px;color:var(--ink3)}
.leg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--ink2);margin-bottom:6px}
.leg span{display:flex;align-items:center;gap:6px}
.leg i{width:18px;height:0;border-top:2px solid var(--chart)}
.leg i.l2{border-top:2px dashed var(--ink3)}
svg.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* listas */
.list{display:flex;flex-direction:column;gap:8px}
.row{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;display:flex;align-items:center;gap:12px;text-align:left;width:100%}
.row .tx{flex:1;min-width:0}
.row b{display:block;font-weight:600;font-size:15px}
.row small{color:var(--ink2);font-size:13px;display:block;overflow-wrap:anywhere}
.num{font-family:var(--f-display);font-weight:800;font-size:19px;font-variant-numeric:tabular-nums}
.rank{width:30px;height:30px;border-radius:50%;background:var(--petrol-soft);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:3px 10px;font-size:12px;font-weight:700;white-space:nowrap;flex:none}
.p-cola{background:var(--warn-soft);color:var(--warn)} .p-env{background:var(--petrol-soft);color:var(--ink)}
.p-ok{background:var(--ok-soft);color:var(--ok)} .p-bad{background:var(--bad-soft);color:var(--bad)}
.meter{height:6px;border-radius:3px;background:var(--petrol-soft);margin-top:6px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--chart);border-radius:3px}
.acts{display:flex;gap:8px;margin-top:8px}
.mini{min-height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface2);font-weight:600;font-size:13px}
.mini.danger{color:var(--bad)}
.motivo{margin-top:6px;font-size:13px;color:var(--bad)}

/* formularios */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-top:12px;box-shadow:var(--shadow)}
.lab{display:block;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
.inp{width:100%;min-height:52px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface2);padding:0 14px;font-size:18px;font-weight:600}
textarea.inp{padding:12px 14px;min-height:76px;font-size:16px;font-weight:400;resize:vertical}
.inp:focus{border-color:var(--petrol);outline:0;box-shadow:0 0 0 4px var(--petrol-soft)}
.inline{display:flex;gap:8px;align-items:stretch}
.inline>*{min-width:0}
.sq{flex:none;width:52px;min-height:52px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--surface2);display:grid;place-items:center;font-weight:700;font-size:20px}
.btn-read{flex:none;min-height:52px;padding:0 14px;border-radius:var(--r-sm);background:var(--petrol);color:var(--on-petrol);font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.seg.wrap{grid-auto-flow:row;grid-template-columns:repeat(2,1fr)}
.seg button,.chips button{min-height:50px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--surface2);font-weight:600;font-size:15px;padding:4px 8px}
.seg button[aria-pressed="true"],.chips button[aria-pressed="true"]{background:var(--petrol);border-color:var(--petrol);color:var(--on-petrol)}
.chips{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.sel{display:flex;align-items:center;gap:12px;background:var(--ok-soft);border-radius:var(--r-sm);padding:12px 14px}
.sel .tx{flex:1;min-width:0}
.sel b{font-family:var(--f-display);font-size:20px;font-weight:800;display:block}
.sel small{font-size:13px;color:var(--ink2)}
.hint{font-size:13px;color:var(--ink2);margin-top:8px}
.hint.warn{color:var(--warn);font-weight:600}
.cria{border-top:1px dashed var(--line);margin-top:14px;padding-top:14px;display:flex;flex-direction:column;gap:8px}
.cria h4{margin:0;font-family:var(--f-display);font-size:17px;font-weight:800}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.save{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;background:linear-gradient(to top,var(--bg) 70%,transparent);padding-block:14px calc(14px + env(safe-area-inset-bottom,0px));z-index:6}
.save button{width:100%;min-height:58px;border-radius:16px;background:var(--amber);color:var(--on-amber);font-family:var(--f-display);font-stretch:88%;font-weight:800;font-size:20px;box-shadow:0 6px 18px rgba(217,138,6,.35)}
.err{color:var(--bad);font-weight:600;font-size:14px;margin-top:10px}

/* pestañas abajo */
.tabs{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;background:var(--surface);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;padding-bottom:env(safe-area-inset-bottom,0px);z-index:6}
.tabs button{min-height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-weight:700;font-size:13px;color:var(--ink3)}
.tabs button[aria-current="true"]{color:var(--ink)}
.tabs button[aria-current="true"] .dot{background:var(--amber)}
.tabs .dot{width:56px;height:30px;border-radius:15px;display:grid;place-items:center}

/* gráfica */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.kpi small{font-size:12px;color:var(--ink2);font-weight:600}
.kpi b{display:block;font-family:var(--f-display);font-weight:800;font-size:26px;font-variant-numeric:tabular-nums;line-height:1.15}
.kpi span{font-size:12px;font-weight:700}
.up{color:var(--ok)} .down{color:var(--bad)}
.vars{display:flex;gap:6px;overflow-x:auto;margin:12px 0 0;padding-bottom:2px}
.vars button{flex:none;min-height:40px;padding:0 14px;border-radius:99px;border:1.5px solid var(--line);background:var(--surface);font-weight:600;font-size:14px}
.vars button[aria-pressed="true"]{background:var(--petrol);border-color:var(--petrol);color:var(--on-petrol)}
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto;touch-action:pan-y}
.chart text{font-family:var(--f-body);font-size:11px;fill:var(--ink3)}
.tip{position:absolute;top:0;pointer-events:none;background:var(--ink);color:var(--bg);border-radius:8px;padding:5px 9px;font-size:12px;font-weight:600;white-space:nowrap;transform:translateX(-50%)}
table.t{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
table.t th,table.t td{padding:8px 4px;border-bottom:1px solid var(--line);text-align:right}
table.t th:first-child,table.t td:first-child{text-align:left}
table.t th{font-size:12px;color:var(--ink3);font-weight:600}

.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:14px;font-weight:600;font-size:15px;z-index:20;max-width:calc(100% - 32px);text-align:center}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* ── versión 3: inicio oscuro, casillas de color con ilustraciones ── */
:root{--night:#062029;--glow:#17748C;--sticker:#FFFFFF;--on-color:#FFFFFF;--glass:rgba(255,255,255,.09);--glass-line:rgba(255,255,255,.17);--ok-on-dark:#7BE0A8;--amber-hi:#FFC657}
.app.dark{background:radial-gradient(130% 55% at 100% 0%,var(--glow) 0%,transparent 62%),linear-gradient(180deg,var(--petrol-deep),var(--night))}
.app.dark .top{background:none;border-radius:0}
.app.dark h3.sec{color:var(--on-petrol2)}
.app.dark .demo{background:var(--glass);color:var(--on-petrol2)}
.app.dark .row,.app.dark .kpi{background:var(--glass);border-color:var(--glass-line);color:var(--on-petrol)}
.app.dark .row small,.app.dark .kpi small{color:var(--on-petrol2)}
.app.dark .kpi .up{color:var(--ok-on-dark)}
.tile{background:linear-gradient(155deg,var(--c1,var(--petrol)),var(--c2,var(--petrol-deep)));border:0;color:var(--on-color);padding:14px 6px 12px;min-height:130px;box-shadow:0 8px 18px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.28);animation:pop .42s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(var(--i,0)*32ms)}
.tile span{font-weight:700;text-shadow:0 1px 1px rgba(0,0,0,.22)}
.tile .ic{width:62px;height:62px;border-radius:50%;background:var(--sticker);box-shadow:0 3px 0 rgba(0,0,0,.17);transition:transform .15s}
.tile:active .ic{transform:rotate(-8deg) scale(1.08)}
.tile .ic svg{width:46px;height:46px}
.tile em{color:var(--on-color);background:rgba(255,255,255,.22);border-radius:99px;padding:3px 12px;font-size:17px}
.tile.main{background:linear-gradient(155deg,var(--amber-hi),var(--amber) 55%,var(--amber-deep));color:var(--on-amber);min-height:96px}
.tile.main span{text-shadow:none}
.tile.main .ic{background:var(--sticker);width:70px;height:70px;flex:none}
.tile.main .ic svg{width:56px;height:56px}
.tile.wide{background:var(--glass);box-shadow:none;border:1px solid var(--glass-line);color:var(--on-petrol);min-height:68px}
.tile.wide span{text-shadow:none}
.tile.wide small{color:var(--on-petrol2)}
.tile.wide .ic{width:46px;height:46px;flex:none}
.tile.wide .ic svg{width:34px;height:34px}
.bar .stk{width:42px;height:42px;border-radius:50%;background:var(--sticker);display:grid;place-items:center;flex:none;box-shadow:0 2px 0 rgba(0,0,0,.17)}
.bar .stk svg{width:32px;height:32px}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.92)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.tile{animation:none}}

/* ── versión 4: un solo aspecto claro, logo negro, recuadros con línea negra; tres estilos a elegir ── */
:root:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface2:#F4F4F1;
  --ink:#111111; --ink2:#444444; --ink3:#6B6B6B; --line:#CFCFCA;
  --petrol:#0E4D5E; --petrol-deep:#0A3643; --petrol-soft:#DDECEF; --on-petrol:#FFFFFF; --on-petrol2:#B9D6DD;
  --amber:#F5A623; --amber-deep:#D98A06; --amber-soft:#FFF1D6; --on-amber:#2E1E00;
  --ok:#1B7A4B; --ok-soft:#DFF3E8; --warn:#9A5B00; --warn-soft:#FFEFD2; --bad:#B3261E; --bad-soft:#FBE4E2;
  --chart:#0E4D5E; --shadow:none;
  --tl:#111111; --on-tl:#FFFFFF; --hbg:#FFFFFF; --bw:1.5px; --tile-sh:none; --stk:#F4F4F1; --em-bg:#111111; --em-fg:#FFFFFF; --main:#F5A623;
  color-scheme:light }
body.s1{--petrol:#111111;--petrol-deep:#000000;--petrol-soft:#ECECE8;--on-petrol2:#D0D0D0;--bw:2px;--tile-sh:3px 3px 0 #111111}
body.s2{--bg:#FAF6EC;--hbg:#FAF6EC;--surface2:#FBF8F1;--line:#DAD3C2;--stk:#FFFFFF;--em-bg:#FFFFFF;--em-fg:#111111;--main:#FFDB8F}
body.s3{--bg:#E7F0F2;--hbg:#D5E6EA;--surface2:#F3F8F9;--line:#C5D6DB;--ink:#0F2A33;--ink2:#47606A;--ink3:#5F7880;--stk:#DDECEF;--em-bg:#DDECEF;--em-fg:#0F2A33}
.top{background:var(--hbg);color:var(--ink);border-radius:0;border-bottom:var(--bw) solid var(--tl)}
.logo{filter:none;height:40px}
.marca{color:var(--ink3)} .marca b{color:var(--ink)}
.red{background:var(--surface);color:var(--ink);border:1.5px solid var(--tl)}
.red i{background:var(--ok)}
.hola p{color:var(--ink2)}
.cola{border:var(--bw) solid var(--tl)}
.bar{background:var(--hbg)!important;color:var(--ink);border-bottom:var(--bw) solid var(--tl)}
.bar small{color:var(--ink2)}
.back{background:var(--surface);color:var(--ink);border:1.5px solid var(--tl)}
.bar .stk{border:1.5px solid var(--tl);box-shadow:none;background:var(--surface)}
.tile{background:var(--surface);color:var(--ink);border:var(--bw) solid var(--tl);box-shadow:var(--tile-sh)}
.tile span{text-shadow:none}
.tile .ic{background:var(--stk);box-shadow:none}
.tile em{background:var(--em-bg);color:var(--em-fg)}
.tile.main{background:var(--main);color:var(--on-amber);border:var(--bw) solid var(--tl)}
.tile.wide{background:var(--surface);border:var(--bw) solid var(--tl);color:var(--ink);box-shadow:var(--tile-sh)}
.tile.wide small{color:var(--ink2)}
.card,.row,.kpi{border:var(--bw) solid var(--tl);box-shadow:none}
.tabs{border-top:var(--bw) solid var(--tl)}
.save button{border:var(--bw) solid var(--tl);box-shadow:var(--tile-sh)}
body.s1 .tile .ic{background:color-mix(in srgb,var(--c1,#F5A623) 16%,#fff)}
body.s2 .tile{background:color-mix(in srgb,var(--c1,#C9B98F) 13%,#fff)}
body.s2 .tile.main{background:var(--main)}
body.s2 .tile.wide{background:var(--surface)}
body.s2 .tile em{border:1.5px solid var(--tl)}
body .tile.main .ic{background:var(--sticker);border:var(--bw) solid var(--tl)}
.estilos{display:flex;align-items:center;gap:6px;margin-top:12px;flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--ink2)}
.estilos button{min-height:40px;padding:0 12px;border-radius:99px;border:1.5px solid var(--tl);background:var(--surface);font-weight:700;font-size:13px;color:var(--ink)}
.estilos button[aria-pressed="true"]{background:var(--tl);color:var(--on-tl)}
.estilos{display:none} /* elegido el estilo A (2026-11-10) */

/* ── vista de ordenador (web): menú a la izquierda y contenido ancho ── */
@media (min-width:900px){
  .app{max-width:none;margin:0 0 0 132px;padding-bottom:48px}
  .top>*,main.gut{max-width:1040px;margin-left:auto;margin-right:auto}
  .bar .in{max-width:720px;margin:0 auto}
  .bar + main.gut{max-width:720px}
  .grid{grid-template-columns:repeat(4,1fr);gap:14px}
  .tile.main{grid-column:span 4}
  .kpis{grid-template-columns:repeat(4,1fr)}
  .tabs{left:0;top:0;bottom:0;transform:none;width:132px;max-width:none;grid-template-columns:1fr;align-content:start;padding-top:96px;border-top:0;border-right:var(--bw) solid var(--tl)}
  .tabs button{min-height:84px}
  .save{left:132px;transform:none;width:calc(100% - 132px);max-width:none;display:flex;justify-content:center}
  .save button{max-width:420px}
  .toast{bottom:32px}
}

/* ══════════ Añadido para la app real (2026-11-11) ══════════ */
button:disabled{opacity:.55;cursor:default}
.p-anu{background:var(--surface2);color:var(--ink3)}
.row.apagada{opacity:.6}
.inp.mes{font-size:15px;min-height:40px;border-radius:8px;padding:0 8px}
.inp.mes + .inp.mes{margin-top:6px}
.inp.arch{padding:12px 14px;font-size:14px;font-weight:400}
ul.lista-err{margin:6px 0 0;padding-left:18px}
.aviso{font-size:13px;color:var(--warn)}
.ses{margin:0;font-size:14px;color:var(--ink2);overflow-wrap:anywhere}
.ses b{color:var(--ink)}
.pie{margin:12px 0 0;font-size:12px;color:var(--ink3)}
.acts{flex-wrap:wrap}
.banda{margin-top:14px;font-size:14px;background:var(--amber-soft);border:var(--bw) solid var(--tl);border-radius:var(--r-sm);padding:10px 12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.banda.mal{background:var(--bad-soft)}
.banda .mini{background:var(--surface);border:1.5px solid var(--tl)}
/* entrada */
.entrada{min-height:100vh;display:grid;place-items:center;padding-block:32px}
.entrada-caja{width:100%;max-width:380px}
.entrada-logo{height:64px;width:auto;display:block;margin-bottom:14px}
.entrada h1{margin:0;font-family:var(--f-display);font-stretch:88%;font-weight:800;font-size:32px;line-height:1.1}
.entrada .sub{margin:6px 0 22px;color:var(--ink2);font-size:15px}
.entrada .list{margin-top:6px}
.save-in{margin-top:20px}
.save-in button{width:100%;min-height:58px;border-radius:16px;background:var(--amber);color:var(--on-amber);font-family:var(--f-display);font-stretch:88%;font-weight:800;font-size:20px;border:var(--bw) solid var(--tl);box-shadow:var(--tile-sh)}
.enlace{margin-top:18px;min-height:44px;font-weight:600;font-size:15px;text-decoration:underline;color:var(--ink)}
/* aviso para instalar la app en el móvil */
#instalar-caja{position:fixed;left:8px;right:8px;bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:15;background:var(--surface);border:var(--bw) solid var(--tl);box-shadow:var(--tile-sh);border-radius:var(--r);padding:12px;display:flex;gap:12px;align-items:center;max-width:464px;margin:0 auto}
#instalar-caja img{width:44px;height:44px;border-radius:10px;border:1.5px solid var(--tl);flex:none}
#instalar-caja .inst-txt{flex:1;min-width:0;font-size:14px}
#instalar-caja .inst-txt b{display:block}
#instalar-caja .inst-txt small{display:block;color:var(--ink2);font-size:13px}
#instalar-caja .inst-btn{margin-top:8px;min-height:44px;padding:0 14px;border-radius:12px;background:var(--amber);color:var(--on-amber);font-weight:700;border:1.5px solid var(--tl)}
#instalar-caja .inst-cerrar{flex:none;min-height:44px;padding:0 8px;font-size:13px;font-weight:600;color:var(--ink2);text-decoration:underline}
@media (min-width:900px){
  body.sin-menu .app{margin-left:0}
  .entrada-caja{max-width:420px}
}