/* Garaje Soler · cabina de gama alta (propuesta A, elegida el 22-oct-2026)
   Clash Display (titulares y ABRIR/CERRAR) + Switzer (lectura y datos). */

@font-face{font-family:"Clash Display";src:url("/assets/fonts/clash-display-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Clash Display";src:url("/assets/fonts/clash-display-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Switzer";src:url("/assets/fonts/switzer-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Switzer";src:url("/assets/fonts/switzer-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Switzer";src:url("/assets/fonts/switzer-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Switzer";src:url("/assets/fonts/switzer-700.woff2") format("woff2");font-weight:700;font-display:swap}

/* ---------- Tokens: tema oscuro (cabina de noche) ---------- */
:root{
  color-scheme:dark;
  --bg:#0F0E0C;
  --bg-2:#181613;
  --bg-3:#221F1B;
  --shell:rgba(255,240,220,.045);
  --hair:rgba(255,236,210,.10);
  --hair-2:rgba(255,236,210,.20);
  --text:#F5F0E8;
  --soft:#DDD5C9;
  --muted:#B5AB9C;
  --amber:#F3BE72;
  --amber-hi:#F8CE92;
  --amber-ink:#1A1207;
  --amber-txt:#F3BE72;
  --amber-tint:rgba(243,190,114,.12);
  --inv:#EEE7DB;
  --inv-hi:#FAF5EC;
  --inv-ink:#15120E;
  --ok:#93D9A8;
  --ok-tint:rgba(147,217,168,.10);
  --err:#FF9C8C;
  --err-tint:rgba(255,156,140,.10);
  --focus:#F3BE72;
  --glass:rgba(24,22,19,.62);
  --scrim:rgba(15,14,12,.0);
  --photo-op:.5;
  --photo-filter:saturate(.95);
  --sh-float:0 24px 60px -24px rgba(0,0,0,.85);
  --sh-deep:0 40px 80px -40px rgba(0,0,0,.9);
  --inset:inset 0 1px 1px rgba(255,255,255,.07);
  --sel:rgba(243,190,114,.85);
  --sel-ink:#1A1207;

  --ease:cubic-bezier(.32,.72,0,1);
  --out:cubic-bezier(.16,1,.3,1);
  --trace:cubic-bezier(.65,.05,.36,1);
  --spring:cubic-bezier(.22,1.12,.36,1);
  --r-out:30px;
  --bezel:7px;
  --r-in:23px;
  --pad:16px;
  --z-isla:20;
  --z-flot:30;
  --z-vista:60;
}
@supports (transition-timing-function:linear(0,1)){
  :root{--spring:linear(0,.0154,.0586 2.6%,.2174 5.4%,.6005 10.9%,.8185 15%,.9481 19.6%,1.0039 23.6%,1.0336 28.2%,1.0416 32.4%,1.0347 38.1%,1.0063 52.6%,.9985 66%,1)}
}

/* ---------- Tokens: tema claro (hormigón de día) ---------- */
@media (prefers-color-scheme:light){
  :root:not([data-theme="oscuro"]){
    color-scheme:light;
    --bg:#E6E6E3;--bg-2:#FAFAF8;--bg-3:#EFEFEC;
    --shell:rgba(70,50,25,.05);--hair:rgba(50,36,18,.11);--hair-2:rgba(50,36,18,.22);
    --text:#1C1915;--soft:#3A342D;--muted:#5C544A;
    --amber:#EDB05C;--amber-hi:#F2BE74;--amber-ink:#1A1207;--amber-txt:#8A5410;--amber-tint:rgba(237,176,92,.18);
    --inv:#1F1B17;--inv-hi:#2C2722;--inv-ink:#F7F2EA;
    --ok:#1B6B3C;--ok-tint:rgba(27,107,60,.08);--err:#B3261E;--err-tint:rgba(179,38,30,.07);
    --focus:#8A5410;--glass:rgba(251,249,246,.72);
    --photo-op:.18;--photo-filter:none;
    --sh-float:0 24px 50px -28px rgba(70,45,15,.38);--sh-deep:0 40px 70px -40px rgba(70,45,15,.4);
    --inset:inset 0 1px 1px rgba(255,255,255,.95);
    --sel:rgba(237,176,92,.55);--sel-ink:#1C1915;
    --thumb-w:2px;--thumb-c:#8A5410;
  }
}
:root[data-theme="claro"]{
  color-scheme:light;
  --bg:#E6E6E3;--bg-2:#FAFAF8;--bg-3:#EFEFEC;
  --shell:rgba(70,50,25,.05);--hair:rgba(50,36,18,.11);--hair-2:rgba(50,36,18,.22);
  --text:#1C1915;--soft:#3A342D;--muted:#5C544A;
  --amber:#EDB05C;--amber-hi:#F2BE74;--amber-ink:#1A1207;--amber-txt:#8A5410;--amber-tint:rgba(237,176,92,.18);
  --inv:#1F1B17;--inv-hi:#2C2722;--inv-ink:#F7F2EA;
  --ok:#1B6B3C;--ok-tint:rgba(27,107,60,.08);--err:#B3261E;--err-tint:rgba(179,38,30,.07);
  --focus:#8A5410;--glass:rgba(251,249,246,.72);
  --photo-op:.18;--photo-filter:none;
  --sh-float:0 24px 50px -28px rgba(70,45,15,.38);--sh-deep:0 40px 70px -40px rgba(70,45,15,.4);
  --inset:inset 0 1px 1px rgba(255,255,255,.95);
  --sel:rgba(237,176,92,.55);--sel-ink:#1C1915;
  --thumb-w:2px;--thumb-c:#8A5410;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:var(--hair-2) transparent;scrollbar-width:thin}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--text);font-family:"Switzer",system-ui,sans-serif;font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased;caret-color:var(--amber-txt)}
::selection{background:var(--sel);color:var(--sel-ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--hair-2);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}
h1,h2,h3{font-family:"Clash Display","Switzer",system-ui,sans-serif;font-weight:600;letter-spacing:-.015em;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tab{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.saltar{position:fixed;left:12px;top:-80px;z-index:100;background:var(--amber);color:var(--amber-ink);padding:12px 18px;border-radius:999px;font-weight:600;text-decoration:none}
.saltar:focus{top:12px}
[hidden]{display:none!important}

/* Foto real del portón como luz ambiental fija (capa fija, nunca en scroll) */
.fondo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fondo::before{content:"";position:absolute;inset:0;background:url("/assets/garage-hero.jpg") center 18%/cover no-repeat;opacity:var(--photo-op);filter:var(--photo-filter);-webkit-mask-image:linear-gradient(180deg,#000 0 15%,transparent 50%);mask-image:linear-gradient(180deg,#000 0 15%,transparent 50%);transition:opacity .8s var(--ease)}
.fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 30%,transparent) 0%,color-mix(in srgb,var(--bg) 45%,transparent) 24%,color-mix(in srgb,var(--bg) 82%,transparent) 44%,var(--bg) 62%,var(--bg) 100%)}
/* El inicio del admin no tenía scroll (medía justo la pantalla) y en la app instalada de iOS la barra de abajo
   quedaba más arriba que en las demás secciones, que sí hacen scroll. Con 1 px de más se comportan igual. */
body.es-admin{min-height:calc(100dvh + 1px)}
body.es-admin .fondo::before{opacity:calc(var(--photo-op)*.35)}
body.es-admin .fondo::after{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 40%,transparent) 0%,var(--bg) 34%)}
body.es-acceso .fondo::after{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 10%,transparent) 0%,color-mix(in srgb,var(--bg) 40%,transparent) 26%,var(--bg) 60%)}

/* ---------- Doble bisel ---------- */
.bz{position:relative;padding:var(--bezel);border-radius:var(--r-out);background:var(--shell);border:1px solid var(--hair)}
.bz>.core{position:relative;border-radius:var(--r-in);background:var(--bg-2);box-shadow:var(--inset)}
.bz.flota{box-shadow:var(--sh-deep)}

/* ---------- Isla de navegación de cristal ---------- */
.isla{position:fixed;z-index:var(--z-isla);top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(calc(100% - 24px),1180px);display:flex;align-items:center;gap:8px;padding:6px;border-radius:999px;background:var(--glass);border:1px solid var(--hair);box-shadow:var(--sh-float);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4)}
.isla.estrecha{width:min(calc(100% - 24px),520px)}
.marca{display:flex;align-items:center;gap:10px;padding:0 14px 0 6px;min-height:56px;text-decoration:none;border-radius:999px}
.marca-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--amber);color:var(--amber-ink)}
.marca-ico .ic{width:26px;height:26px;stroke-width:1.75}
.marca b{font-family:"Clash Display",sans-serif;font-weight:600;font-size:19px;letter-spacing:-.01em;white-space:nowrap}
.isla .sp{flex:1}

.isla-tabs{display:flex;gap:2px;padding:0;margin:0 auto;list-style:none}
.isla-tabs a{display:flex;align-items:center;gap:8px;min-height:52px;padding:0 18px;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:500;font-size:16px;transition:color .4s var(--ease),background .4s var(--ease)}
.isla-tabs a:hover{color:var(--text);background:var(--shell)}
.isla-tabs a[aria-current="page"]{color:var(--text);background:var(--bg-3);box-shadow:var(--inset),0 0 0 1px var(--hair)}
.isla-tabs a[aria-current="page"] .ic{color:var(--amber-txt)}
.quien{display:flex;align-items:center;gap:10px;padding:0 6px 0 4px;color:var(--muted);font-size:15px;white-space:nowrap}
.quien b{color:var(--text);font-weight:600}

/* ---------- Píldoras con icono anidado ---------- */
.pill{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:6px 6px 6px 24px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:17px;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;background:var(--bg-3);color:var(--text);transition:transform .5s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),opacity .3s}
.pill .in{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--shell);transition:transform .5s var(--spring),background .4s var(--ease)}
.pill .in .ic{width:22px;height:22px}
.pill:hover .in{transform:translate(2px,-1px) scale(1.06)}
.pill:active{transform:scale(.97)}
.pill.amb{background:var(--amber);color:var(--amber-ink)}
.pill.amb .in{background:rgba(26,18,7,.12)}
.pill.amb:hover{background:var(--amber-hi)}
.pill.inv{background:var(--inv);color:var(--inv-ink)}
.pill.inv .in{background:color-mix(in srgb,var(--inv-ink) 12%,transparent)}
.pill.inv:hover{background:var(--inv-hi)}
.pill.fant{background:transparent;border-color:var(--hair-2);color:var(--text)}
.pill.fant:hover{background:var(--shell)}
.pill.peligro{background:transparent;border-color:color-mix(in srgb,var(--err) 45%,transparent);color:var(--err)}
.pill.peligro .in{background:var(--err-tint)}
.pill.peligro:hover{background:var(--err-tint)}
.pill.ancha{width:100%}
.pill.sm{min-height:48px;padding:4px 4px 4px 18px;font-size:15.5px}
.pill.sm .in{width:38px;height:38px}
.pill.sm .in .ic{width:20px;height:20px}
.pill[disabled],.pill[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.pill[disabled] .in{transform:none}
.redondo{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1px solid var(--hair);background:var(--shell);transition:background .4s var(--ease),transform .5s var(--ease)}
.redondo:hover{background:var(--bg-3)}
.redondo:active{transform:scale(.94)}
.salir{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 8px 0 18px;border-radius:999px;border:0;background:transparent;color:var(--muted);font-size:17px;font-weight:500;text-decoration:none;transition:color .4s var(--ease),background .4s var(--ease)}
.salir .in{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--shell);border:1px solid var(--hair)}
.salir .ic{width:20px;height:20px}
.salir:hover{color:var(--text);background:var(--shell)}

/* ---------- Columna del cliente ---------- */
.col{width:min(100%,480px);margin:0 auto;padding:104px var(--pad) 112px}
.saludo{padding:28px 6px 26px}
.saludo h1{font-size:38px;letter-spacing:-.02em}
.saludo p{margin-top:8px;color:var(--soft);font-size:19px;display:flex;align-items:center;gap:8px}
.saludo p .ic{color:var(--amber-txt)}
.gap{display:grid;gap:16px}

/* Selector de puerta */
.selector{margin-bottom:16px}
.selector .core{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:5px;position:relative;isolation:isolate}
.sel-thumb{position:absolute;z-index:-1;top:5px;bottom:5px;left:5px;width:calc(50% - 7px);border-radius:calc(var(--r-in) - 5px);background:var(--bg-3);box-shadow:var(--inset),0 0 0 var(--thumb-w,1.5px) var(--thumb-c,var(--amber)),0 10px 24px -14px rgba(0,0,0,.6);transition:transform .7s var(--spring)}
.selector[data-sel="1"] .sel-thumb{transform:translateX(calc(100% + 4px))}
.puerta-op{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:76px;padding:0 12px 0 16px;border:0;border-radius:calc(var(--r-in) - 5px);background:transparent;color:var(--muted);text-align:left;transition:color .4s var(--ease)}
.puerta-op .nom{font-family:"Clash Display",sans-serif;font-weight:500;font-size:23px;white-space:nowrap;letter-spacing:-.01em;line-height:1.05}
.puerta-op .marcador{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--muted);flex:none;transition:background .4s var(--ease),border-color .4s var(--ease),transform .6s var(--spring)}
.puerta-op .marcador .ic{width:18px;height:18px;stroke-width:2.25;opacity:0;transform:scale(.4);transition:opacity .3s var(--ease),transform .6s var(--spring)}
.puerta-op[aria-checked="true"]{color:var(--text)}
.puerta-op[aria-checked="true"] .nom{font-weight:600}
.puerta-op[aria-checked="true"] .marcador{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
.puerta-op[aria-checked="true"] .marcador .ic{opacity:1;transform:none}
.puerta-op:hover:not([aria-checked="true"]){color:var(--soft)}
.puerta-op:focus-visible{outline-offset:-3px}

/* Mando principal */
.mando .core{padding:22px 18px 20px;overflow:hidden}
.mando::after{content:"";position:absolute;z-index:-1;left:6%;right:6%;top:-46px;height:120px;pointer-events:none;background:radial-gradient(ellipse 50% 45% at 50% 62%,color-mix(in srgb,var(--amber) var(--led,26%),transparent),transparent 72%);transition:opacity .8s var(--ease)}
.mando.luz::after{--led:40%}
.mando .core::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,var(--amber),transparent);opacity:.45;transition:opacity .6s var(--ease),left .9s var(--ease),right .9s var(--ease)}
.mando.luz .core::before{opacity:1;left:0;right:0}
.mando-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 6px 18px}
.mando-cab h2{font-size:30px}
.mando-cab span{color:var(--muted);font-size:17px}
.mb-wrap{position:relative}
.mb{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:108px;padding:12px 12px 12px 32px;border:0;border-radius:999px;background:var(--amber);color:var(--amber-ink);box-shadow:0 18px 40px -22px color-mix(in srgb,var(--amber) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .45s var(--ease),background .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease)}
.mb:hover{background:var(--amber-hi)}
.mb:active{transform:scale(.975)}
.mb[data-accion="close"]{background:var(--inv);color:var(--inv-ink);box-shadow:0 18px 40px -24px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.mb[data-accion="close"]:hover{background:var(--inv-hi)}
.mb-txt{position:relative;display:grid;font-family:"Clash Display",sans-serif;font-weight:600;font-size:36px;letter-spacing:.04em;line-height:1}
.mb-txt>span{grid-area:1/1;transition:transform .55s var(--spring),opacity .35s var(--ease),filter .35s var(--ease)}
.mb-txt>span.fuera{opacity:0;transform:translateY(-60%);filter:blur(4px)}
.mb-txt>span.llega{opacity:0;transform:translateY(60%);filter:blur(4px)}
.mb-txt .peq{font-size:26px;letter-spacing:.01em}
.mb-ico{position:relative;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:rgba(26,18,7,.12);transition:transform .6s var(--spring),background .4s var(--ease)}
.mb[data-accion="close"] .mb-ico{background:color-mix(in srgb,var(--inv-ink) 12%,transparent)}
.mb:hover .mb-ico{transform:translate(2px,-1px) scale(1.04)}
.mb-ico .ic{position:absolute;width:38px;height:38px;stroke-width:1.6;transition:opacity .3s var(--ease),transform .6s var(--spring)}
.mb-ico .chk{opacity:0;transform:scale(.3) rotate(-20deg);stroke-width:2}
.mb.ok-ico .mb-ico .base{opacity:0;transform:scale(.4)}
.mb.ok-ico .mb-ico .chk{opacity:1;transform:none}
.mb[aria-busy="true"]{cursor:progress}
.mb[aria-busy="true"] .mb-ico{animation:latido 1s var(--ease) infinite}
@keyframes latido{50%{transform:scale(.92)}}
.mb[disabled]{background:var(--bg-3);color:var(--muted);box-shadow:var(--inset),0 0 0 1px var(--hair);cursor:not-allowed}
.mb[disabled] .mb-ico{background:var(--shell)}
.mb[disabled]:active{transform:none}

/* Firma: anillo de luz que recorre el botón durante el envío */
.anillo{position:absolute;inset:-7px;pointer-events:none;overflow:visible}
.anillo svg{width:100%;height:100%;overflow:visible;display:block}
.anillo rect{fill:none;stroke:var(--amber);stroke-width:3;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:100;opacity:0}
.mb[data-accion="close"]~.anillo rect{stroke:var(--inv)}
.mb-wrap.enviando .anillo rect{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--trace),opacity .15s}
.mb-wrap.hecho .anillo{animation:halo .9s var(--out) forwards}
.mb-wrap.hecho .anillo rect{opacity:1;stroke-dashoffset:0}
@keyframes halo{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.06,1.25)}}
.mb-wrap.fallo .anillo rect{stroke:var(--err);opacity:0;stroke-dashoffset:30;transition:opacity .6s var(--ease) .1s}

.verdad{display:flex;align-items:center;gap:10px;padding:16px 6px 2px;color:var(--soft);font-size:18px}
.verdad .ic{color:var(--muted);width:22px;height:22px}

/* Avisos (confirmación, error, bloqueo) */
.aviso{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start;margin-top:14px;padding:16px 16px 16px 14px;border-radius:18px;background:var(--shell);border:1px solid var(--hair)}
.aviso .av-ico{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bg-3)}
.aviso strong{font-weight:600;font-size:18px;line-height:1.3;padding-top:2px}
.aviso p{color:var(--soft);font-size:17px}
.aviso.ok{background:var(--ok-tint);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.aviso.ok .av-ico{color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,transparent)}
.aviso.err{background:var(--err-tint);border-color:color-mix(in srgb,var(--err) 40%,transparent)}
.aviso.err .av-ico{color:var(--err);background:color-mix(in srgb,var(--err) 14%,transparent)}
.aviso.err .pill{grid-column:1/-1;margin-top:10px}
.aviso.amb{background:var(--amber-tint);border-color:color-mix(in srgb,var(--amber) 40%,transparent)}
.aviso.amb .av-ico{color:var(--amber-txt);background:color-mix(in srgb,var(--amber) 18%,transparent)}
.aparece{animation:aparece .6s var(--out) both}
@keyframes aparece{from{opacity:0;transform:translateY(10px);filter:blur(4px)}}

.cuenta{font-family:"Switzer",sans-serif;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.bloqueo-cuenta{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:12px;padding:14px 2px 0;border-top:1px solid color-mix(in srgb,var(--amber) 35%,transparent)}
.bloqueo-cuenta span{color:var(--soft);font-size:17px}
.bloqueo-cuenta .cuenta{font-size:44px;color:var(--amber-txt)}

/* Botón de ayuda fijo: cristal, nunca del color de CERRAR */
.ayuda-fija{position:fixed;z-index:var(--z-flot);right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:6px 6px 6px 22px;border-radius:999px;border:1px solid var(--hair-2);background:var(--glass);color:var(--text);font-weight:600;font-size:18px;box-shadow:var(--sh-float);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);transition:transform .5s var(--ease),background .4s var(--ease)}
.ayuda-fija .in{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--shell);border:1px solid var(--hair-2);color:var(--amber-txt);transition:transform .5s var(--spring)}
.ayuda-fija .in .ic{width:22px;height:22px}
.ayuda-fija:hover .in{transform:translate(2px,-1px) scale(1.06)}
.ayuda-fija:active{transform:scale(.96)}

/* Hoja de ayuda */
.hoja{border:0;padding:0;margin:auto auto 0;width:min(100%,520px);max-width:100%;background:transparent;color:var(--text);overflow:visible}
.hoja::backdrop{background:color-mix(in srgb,var(--bg) 55%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hoja[open]{animation:sube .6s var(--out)}
@keyframes sube{from{transform:translateY(40px);opacity:0}}
.hoja-bz{margin:0 10px max(10px,env(safe-area-inset-bottom));box-shadow:var(--sh-deep);background:var(--glass);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.hoja-core{padding:22px 14px 14px}
.hoja-cab{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hoja-cab h2{font-size:28px}
.hoja-txt{color:var(--soft);margin:10px 0 18px;max-width:42ch}

/* Contactos de emergencia */
.contactos{display:grid;gap:12px}
.contacto{padding:14px 12px 12px;border-radius:18px;background:var(--bg-3);box-shadow:var(--inset)}
.contacto-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;padding:0 4px}
.contacto-cab b{font-family:"Clash Display",sans-serif;font-weight:600;font-size:23px}
.contacto-cab span{color:var(--muted);font-size:17px;font-variant-numeric:tabular-nums}
.contacto-acc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);gap:8px}
.contacto-acc .pill{min-width:0;gap:6px;padding:4px 5px 4px 13px;font-size:18px}
.contacto-acc .pill .in{width:36px;height:36px}
#respuesta{scroll-margin-bottom:96px}
/* Con un aviso de error, el panel se compacta para que el aviso entero quepa sobre «Ayuda» */
.col.con-error{padding-top:96px}
.col.con-error .saludo{padding:12px 6px 14px}
.col.con-error .selector{margin-bottom:12px}
.col.con-error .mando .core{padding:18px 18px 14px}
.col.con-error .mando-cab{padding-bottom:12px}
.col.con-error .mb{min-height:100px}
.col.con-error .verdad{padding-top:12px}
.col.con-error .aviso{margin-top:12px;padding:14px 14px 12px 12px}
.col.con-error .aviso.err .pill{margin-top:8px}

/* Estado vacío y pantallas sueltas */
.vacio .core{padding:28px 16px 18px}
.vacio h2,.vacio p,.vacio-ico{margin-left:4px}
.vacio-ico{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--amber-tint);color:var(--amber-txt);margin-bottom:20px}
.vacio-ico .ic{width:34px;height:34px}
.vacio h2{font-size:28px;margin-bottom:10px}
.vacio p{color:var(--soft);max-width:38ch}
.vacio .contactos{margin-top:22px}
.vacio .sub{font-size:17px;color:var(--muted);margin-top:22px;padding:0 4px}

.pasos{list-style:none;margin:0;padding:0;display:grid}
.paso{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:16px 4px;border-top:1px solid var(--hair)}
.paso:first-child{border-top:0}
.paso-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bg-3);box-shadow:var(--inset);font-family:"Clash Display",sans-serif;font-weight:600;font-size:19px}
.paso-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--amber-tint);color:var(--amber-txt)}
.paso p{font-size:18px;line-height:1.35}
.chip-nav{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--bg-3);box-shadow:var(--inset);font-size:16px;font-weight:500;margin-bottom:6px}

.centro{min-height:100dvh;display:flex;flex-direction:column;justify-content:center}
.titulo-pant{padding:8px 6px 24px}
.titulo-pant h1{font-size:36px;letter-spacing:-.02em}
.titulo-pant p{color:var(--soft);margin-top:12px;max-width:36ch}
.reloj .core{padding:22px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.reloj span{color:var(--soft)}
.reloj .cuenta{font-size:52px;color:var(--amber-txt)}

/* ---------- Formularios ---------- */
.campo{display:grid;gap:8px}
.campo>span,.leyenda{font-size:17px;font-weight:500;color:var(--soft)}
.entrada{width:100%;min-height:58px;padding:0 18px;border-radius:16px;border:1px solid var(--hair);background:var(--bg-3);box-shadow:inset 0 1px 2px rgba(0,0,0,.12);font-size:18px;color:var(--text);transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.entrada::placeholder{color:var(--muted);opacity:1}
.entrada:hover{border-color:var(--hair-2)}
.entrada:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 22%,transparent)}
.entrada[aria-invalid="true"]{border-color:var(--err)}
.entrada:disabled{opacity:.5;cursor:not-allowed}
select.entrada{appearance:none;-webkit-appearance:none;padding-right:48px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 25px) 50%,calc(100% - 19px) 50%;background-size:6px 6px;background-repeat:no-repeat;cursor:pointer}
input[type="date"].entrada{padding-right:12px}
input[type="date"]::-webkit-calendar-picker-indicator{opacity:.7;cursor:pointer;filter:var(--cal-filter,invert(.85))}
:root[data-theme="claro"] input[type="date"]::-webkit-calendar-picker-indicator{filter:none}
@media (prefers-color-scheme:light){:root:not([data-theme="oscuro"]) input[type="date"]::-webkit-calendar-picker-indicator{filter:none}}
.pass{position:relative}
.pass .entrada{padding-right:112px}
.pass button{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:46px;padding:0 14px;border:0;border-radius:12px;background:transparent;color:var(--amber-txt);font-weight:600;font-size:17px}
.pass button:hover{background:var(--shell)}

.casilla{display:flex;align-items:center;gap:14px;min-height:56px;padding:6px 4px;cursor:pointer;font-size:18px;line-height:1.3}
.casilla input{appearance:none;-webkit-appearance:none;flex:none;width:30px;height:30px;margin:0;border-radius:9px;border:2px solid var(--hair-2);background:var(--bg-3);display:grid;place-items:center;cursor:pointer;transition:background .3s var(--ease),border-color .3s var(--ease)}
.casilla input::after{content:"";width:16px;height:16px;background:var(--amber-ink);-webkit-mask:var(--chk) center/contain no-repeat;mask:var(--chk) center/contain no-repeat;transform:scale(0);transition:transform .45s var(--spring)}
.casilla input:checked{background:var(--amber);border-color:var(--amber)}
.casilla input:checked::after{transform:scale(1)}
.casilla input:disabled{opacity:.45;cursor:not-allowed}
.casilla:has(input:disabled){cursor:not-allowed;color:var(--muted)}
:root{--chk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E")}

/* Casillas de puertas como piezas */
.piezas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pieza{display:flex;align-items:center;gap:12px;min-height:58px;padding:0 14px;border-radius:16px;background:var(--bg-3);border:1px solid var(--hair);cursor:pointer;font-weight:500;transition:border-color .3s var(--ease),background .3s var(--ease)}
.pieza:has(input:checked){border-color:color-mix(in srgb,var(--amber) 70%,transparent);background:var(--amber-tint)}
.pieza input{appearance:none;-webkit-appearance:none;width:26px;height:26px;margin:0;border-radius:8px;border:2px solid var(--hair-2);display:grid;place-items:center;flex:none;cursor:pointer}
.pieza input::after{content:"";width:14px;height:14px;background:var(--amber-ink);-webkit-mask:var(--chk) center/contain no-repeat;mask:var(--chk) center/contain no-repeat;transform:scale(0);transition:transform .45s var(--spring)}
.pieza input:checked{background:var(--amber);border-color:var(--amber)}
.pieza input:checked::after{transform:scale(1)}
.pieza:has(input:disabled){opacity:.55;cursor:not-allowed}

/* ---------- Acceso ---------- */
.acceso{width:min(100%,1240px);margin:0 auto;min-height:100dvh;display:grid;align-items:center;padding:28px var(--pad) 40px}
.acceso-foto{display:none}
.acceso-marca{display:flex;align-items:center;gap:12px;margin:12px 6px 0}
.acceso-marca .marca-ico{width:52px;height:52px}
.acceso-marca b{font-family:"Clash Display",sans-serif;font-weight:600;font-size:22px}
.acceso-tit{padding:30vh 6px 24px}
.acceso-tit h1{font-size:40px;letter-spacing:-.022em}
.acceso-tit p{color:var(--soft);margin-top:12px;max-width:34ch}
.form-core{padding:22px 18px 18px;display:grid;gap:18px}
.form-core .pill{margin-top:4px}
.acceso-pie{display:flex;justify-content:center;margin-top:18px}
.enlace{display:inline-flex;align-items:center;gap:8px;min-height:56px;padding:0 18px;border-radius:999px;border:0;background:transparent;color:var(--soft);font-size:17px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--hair-2)}
.enlace:hover{color:var(--text);text-decoration-color:var(--amber)}
.enlace .ic{width:20px;height:20px;color:var(--amber-txt)}

/* ---------- Administración ---------- */
.admin{width:min(100%,1240px);margin:0 auto;padding:108px var(--pad) 120px;font-size:16px}
.admin-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;padding:24px 6px 26px}
.admin-cab h1{font-size:44px;letter-spacing:-.024em}
.admin-cab p{color:var(--soft);margin-top:10px;font-size:17px;max-width:60ch}
.rej{display:grid;gap:20px}
.panel .core{padding:20px}
.panel-tit{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.panel-tit h2{font-size:22px}
.panel-tit span{color:var(--muted);font-size:15px}
.form-alta{display:grid;gap:16px}
.nota{font-size:14.5px;color:var(--muted);line-height:1.45}
.buscar{position:relative;margin-bottom:12px}
.buscar .ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);width:22px;height:22px}
.buscar .entrada{padding-left:50px;min-height:52px}

.lista{list-style:none;margin:0;padding:0}
.buscar-global{margin-bottom:0}
.cuentas .grupo[hidden]{display:none}
.fila{border-top:1px solid var(--hair)}
.fila:first-child{border-top:0}
.fila-btn{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto auto 20px;gap:14px;align-items:center;padding:14px 8px;border:0;background:transparent;text-align:left;border-radius:16px;transition:background .3s var(--ease)}
.fila-btn:hover{background:var(--shell)}
.fila-btn[aria-expanded="true"]{background:var(--bg-3)}
.ini{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bg-3);box-shadow:var(--inset),0 0 0 1px var(--hair);font-weight:600;font-size:15px;color:var(--soft)}
.fila-btn[aria-expanded="true"] .ini{background:var(--bg-2)}
.fila-nom{min-width:0}
.fila-nom b{display:block;font-weight:600;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila-nom small{display:block;color:var(--muted);font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.fila-chev{width:20px;height:20px;color:var(--muted);transition:transform .5s var(--spring)}
.fila-btn[aria-expanded="true"] .fila-chev{transform:rotate(180deg)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 11px;border-radius:999px;font-size:14px;font-weight:500;background:var(--bg-3);color:var(--soft);box-shadow:inset 0 0 0 1px var(--hair);white-space:nowrap}
.chip .ic{width:16px;height:16px}
.chip.super{background:var(--amber-tint);color:var(--amber-txt);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--amber) 45%,transparent)}
.chip.adm{background:color-mix(in srgb,var(--inv) 14%,transparent);color:var(--text)}
.chip.pu{min-width:30px;justify-content:center;padding:0 9px;font-variant-numeric:tabular-nums}
.chip.pu.no{color:var(--muted);background:transparent;box-shadow:inset 0 0 0 1px var(--hair);text-decoration:line-through;opacity:.7}
.chip.ok{color:var(--ok);background:var(--ok-tint)}
.chip.err{color:var(--err);background:var(--err-tint)}
.puertas-mini{display:inline-flex;gap:4px}

.editor{padding:6px 8px 20px 66px;display:grid;gap:18px}
.editor-campos{display:grid;gap:14px}
.editor h3{font-family:"Switzer",sans-serif;font-weight:600;font-size:15px;color:var(--soft);letter-spacing:0;margin-bottom:8px}
.disp{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.disp li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 10px 10px 14px;border-radius:14px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--hair)}
.disp li b{font-weight:600;font-size:16px}
.disp li small{display:block;color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.disp .ic{color:var(--muted)}
.editor-acc{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding-top:6px}
.confirmar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px;border-radius:16px;background:var(--err-tint);color:var(--text)}
.confirmar p{flex:1 1 220px;font-size:15.5px}
.protegido{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--hair);color:var(--soft);font-size:15.5px}
.protegido .ic{color:var(--amber-txt);margin-top:1px}

/* Registros */
.filtros .core{padding:16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.filtros .campo{min-width:0}
.filtros .campo>span{font-size:14.5px}
.filtros .entrada{min-height:52px;font-size:16.5px;min-width:0;max-width:100%;width:100%}
.filtros .acc{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px}
.cuenta-res{color:var(--muted);font-size:15px}
.tabla{width:100%;border-collapse:collapse}
.tabla th{text-align:left;font-weight:500;font-size:14px;color:var(--muted);padding:14px 14px 10px;border-bottom:1px solid var(--hair)}
.tabla td{padding:14px;border-bottom:1px solid var(--hair);vertical-align:top;font-size:16px}
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr{transition:background .3s var(--ease)}
.tabla tbody tr:hover{background:var(--shell)}
.acc-cel{display:inline-flex;align-items:center;gap:8px}
.acc-cel .ic{width:20px;height:20px;color:var(--amber-txt)}
.acc-cel.cierre .ic{color:var(--soft)}
.res{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px}
.res .ic{width:18px;height:18px}
.res.ok{color:var(--ok)}
.res.err{color:var(--err)}
.err-det{display:block;margin-top:4px;font-size:14px;color:var(--muted);max-width:40ch;font-weight:400}
.version{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:28px;color:var(--muted);font-size:15px}
.version .ic{width:18px;height:18px}
.sin-res{padding:36px 16px;text-align:center;display:grid;gap:14px;justify-items:center}
.sin-res p{color:var(--soft)}

/* Seguridad */
.reglas .core{padding:20px 22px;display:flex;gap:16px;align-items:flex-start}
.reglas .core>.ic{color:var(--amber-txt);width:28px;height:28px;margin-top:2px}
.reglas p{font-size:17px;color:var(--soft);max-width:80ch}
.reglas p b{color:var(--text);font-weight:600}
.segm{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:18px;background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--hair)}
.segm label{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:14px;cursor:pointer;color:var(--muted);font-weight:500;transition:background .3s var(--ease),color .3s var(--ease)}
.segm input{position:absolute;opacity:0;pointer-events:none}
.segm label:has(input:checked){background:var(--bg-2);color:var(--text);box-shadow:var(--inset),0 0 0 1.5px var(--amber)}
.segm label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.bloq{display:grid;gap:10px}
.bloq-it{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:center;padding:16px;border-radius:18px;background:var(--bg-3);box-shadow:var(--inset)}
.bloq-it .t{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.bloq-it .t b{font-weight:600;font-size:17px}
.bloq-it .m{grid-column:1/-1;color:var(--soft);font-size:15px}
.bloq-it .d{grid-column:1/-1;color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.resta{display:inline-flex;align-items:center;gap:6px;color:var(--amber-txt);font-weight:600;font-variant-numeric:tabular-nums;font-size:15px}
.resta .ic{width:18px;height:18px}
.vacio-lista{padding:22px 16px;border-radius:18px;background:var(--bg-3);color:var(--soft);display:flex;gap:12px;align-items:center}
.vacio-lista .ic{color:var(--ok)}

/* Pestañas del admin en móvil: isla flotante abajo */
.tabs-movil{position:fixed;z-index:var(--z-isla);left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:2px;padding:6px;border-radius:999px;background:var(--glass);border:1px solid var(--hair);box-shadow:var(--sh-float);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4)}
/* La barra va anclada por ABAJO y NO se muestra hasta que el tamaño de la pantalla deja de cambiar: al abrir la app
   instalada de iOS desde el icono, la pantalla se ajusta durante un momento y una barra anclada abajo se vería
   "bajar" con ella. El JS la muestra (.lista) en cuanto el tamaño lleva un rato estable; si el JS fallase, un
   respaldo en CSS la muestra a los 2 s. (Anclarla con 100lvh la dejaba recortada en iOS: no usar.) */
.tabs-movil{opacity:0;animation:barra-visible .15s linear 2s forwards}
.tabs-movil.lista{opacity:1;animation:none}
@keyframes barra-visible{to{opacity:1}}
.tabs-movil a{display:grid;justify-items:center;gap:2px;min-width:78px;min-height:58px;padding:7px 8px 6px;border-radius:999px;text-decoration:none;color:var(--muted);font-size:15px;font-weight:500;transition:color .4s var(--ease),background .4s var(--ease)}
.tabs-movil a .ic{width:22px;height:22px}
.tabs-movil a[aria-current="page"]{color:var(--text);background:var(--bg-3);box-shadow:var(--inset),0 0 0 1px var(--hair)}
.tabs-movil a[aria-current="page"] .ic{color:var(--amber-txt)}

/* Aviso flotante */
.toast{position:fixed;z-index:var(--z-flot);left:50%;bottom:96px;transform:translate(-50%,20px);display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:12px 20px 12px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--hair-2);box-shadow:var(--sh-float);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);font-weight:500;font-size:18px;opacity:0;pointer-events:none;transition:opacity .4s var(--ease),transform .6s var(--spring)}
.toast.ver{opacity:1;transform:translate(-50%,0)}
.toast .in{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ok-tint);color:var(--ok)}
.toast .in .ic{width:20px;height:20px}

/* Entrada de vista: un único fundido con desenfoque que se resuelve */
.entra{animation:entra .75s var(--out) both;animation-delay:calc(var(--d,0) * 70ms)}
@keyframes entra{from{opacity:0;transform:translateY(18px);filter:blur(8px)}}

/* ---------- Escritorio ---------- */
@media (min-width:760px){
  :root{--pad:28px}
  .filtros .core{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)) minmax(0,1.1fr) auto;align-items:end}
  .filtros .acc{grid-column:auto;justify-content:flex-end}
  .editor-campos{grid-template-columns:1fr 1fr}
  .editor-campos .ancho{grid-column:1/-1}
}
@media (min-width:1000px){
  .rej.clientes{grid-template-columns:400px minmax(0,1fr);align-items:start}
  .rej.clientes .alta{position:sticky;top:104px}
  .rej.seguridad{grid-template-columns:420px minmax(0,1fr);align-items:start}
  .alta-toggle{display:none}
  .acceso{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;padding:40px var(--pad)}
  .acceso-foto{display:block;height:min(84dvh,820px)}
  .acceso-foto .core{height:100%;overflow:hidden;background:#0F0E0C}
  .acceso-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%}
  .acceso-foto figcaption{position:absolute;left:28px;right:28px;bottom:26px;color:#F5F0E8;display:flex;align-items:center;gap:12px;font-size:17px}
  .acceso-foto figcaption .marca-ico{width:48px;height:48px}
  .acceso-foto .core::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,transparent,rgba(10,9,8,.75))}
  .acceso-foto figcaption{z-index:1}
  .acceso-form{max-width:460px}
  .acceso-marca{display:none}
  .acceso-tit{padding:0 6px 28px}
  .acceso-tit h1{font-size:52px}
  body.es-acceso .fondo::before{opacity:calc(var(--photo-op)*.25)}
  .tabs-movil{display:none!important}
}
@media (max-width:999px){
  .isla-tabs,.isla .quien{display:none}
  .admin{padding-bottom:132px}
  .alta.cerrada{display:none}
  .toast{bottom:100px}
}
@media (max-width:759px){
  .admin-cab h1{font-size:36px}
  .filtros .f-quien{grid-column:1/-1}
  .bloq-it{grid-template-columns:minmax(0,1fr)}
  .bloq-it .pill{order:9;justify-self:start}
  .filtros .f-puerta{order:1}.filtros .f-orden{order:2}.filtros .f-desde{order:3}.filtros .f-hasta{order:4}.filtros .acc{order:5}
  .editor{padding:6px 4px 18px}
  .fila-btn{grid-template-columns:44px minmax(0,1fr) auto 20px;align-items:center;column-gap:10px;row-gap:10px}
  .fila-nom{grid-column:2;grid-row:1}
  .fila-disp{grid-column:3;grid-row:1}
  .fila-meta{grid-column:2/5;grid-row:2;justify-content:flex-start}
  .fila-chev{grid-column:4;grid-row:1}
  .tabla thead{display:none}
  .tabla,.tabla tbody,.tabla tr,.tabla td{display:block}
  .tabla tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px 6px;border-bottom:1px solid var(--hair)}
  .tabla tr:last-child{border-bottom:0}
  .tabla td{padding:0;border:0}
  .tabla td.c-quien{font-weight:600;font-size:17px}
  .tabla td.c-cuando{text-align:right;color:var(--soft)}
  .tabla td.c-res{grid-column:1/-1}
  .tabla td.c-puerta{order:3}
  .tabla td.c-acc{order:4;text-align:right}
  .tabla td.c-res{order:5}
}
@media (max-width:380px){
  .saludo h1{font-size:34px}
  .mb-txt{font-size:32px}
  .mb-ico{width:76px;height:76px}
  .tabs-movil a{min-width:66px;padding-inline:6px}
}


/* ---------- Piezas propias de la app real ---------- */
form.orden,.isla form,.disp form{margin:0}
.isla form{display:flex}
.editor-form{display:grid;gap:18px}
.aviso.arriba{margin:0 0 18px}
.admin .aviso.arriba{margin:0 6px 20px}
.mando-cab .estado{color:var(--muted);font-size:17px}
.estado-reles{margin-top:16px}

/* Aviso de entorno local (solo en el clon de pruebas) */
.env-banner{position:fixed;z-index:70;left:0;right:0;top:0;padding:3px 12px;background:#FFD84D;color:#1A1207;font:600 13px/1.4 system-ui,sans-serif;text-align:center;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.local .isla{top:calc(max(12px,env(safe-area-inset-top)) + 22px)}

/* Aviso de instalar la app (clientes fuera de la app instalada) */
.pwa-lock{position:fixed;inset:0;z-index:40;overflow:auto;background:var(--bg)}
.pwa-lock .col{padding-top:48px}
.pwa-lock .acciones{margin-top:20px;display:grid;gap:10px}
.pwa-lock .acciones .enlace{justify-self:center}
body.con-aviso{overflow:hidden}
body.con-aviso .ayuda-fija{display:none}

/* Publicar (solo en el clon de pruebas) */
.pub-estado .core{padding:20px}
.pub-barra{height:10px;border-radius:99px;background:var(--bg-3);overflow:hidden;margin:12px 0 16px;box-shadow:inset 0 0 0 1px var(--hair)}
.pub-barra i{display:block;height:100%;width:0;background:var(--amber);transition:width .4s var(--ease)}
.pub-barra.err i{background:var(--err)}
.pub-barra.ok i{background:var(--ok)}
.pub-pasos{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pub-pasos li{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:16px}
.pub-pasos li::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--hair-2);flex:none}
.pub-pasos li.ok{color:var(--soft)}
.pub-pasos li.ok::before{background:var(--ok);border-color:var(--ok)}
.pub-pasos li.en-curso{color:var(--text);font-weight:600}
.pub-pasos li.en-curso::before{background:var(--amber);border-color:var(--amber)}
.pub-pasos li.error{color:var(--err);font-weight:600}
.pub-pasos li.error::before{background:var(--err);border-color:var(--err)}
.pub-log{width:100%;min-height:160px;margin:12px 0;padding:12px;border-radius:14px;border:1px solid var(--hair);background:var(--bg-3);color:var(--text);font:13px/1.45 ui-monospace,monospace}
.tabs-movil.cinco a{min-width:66px;font-size:13.5px;padding-inline:4px}
.isla{width:min(calc(100% - 24px),1320px)}
.isla .marca{min-width:0;flex:0 1 auto}
.isla .marca b{min-width:0;overflow:hidden;text-overflow:ellipsis}
.isla form,.isla .salir{flex:none}
.quien b{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.marca-ico{flex:none}
@media (max-width:1599px){.isla .quien b{display:none}.isla-tabs a{padding:0 14px}}

/* Sin color-mix (iPhone con iOS anterior al 16.2): el velo de la foto sigue tapando lo justo */
@supports not (color:color-mix(in srgb,red 50%,transparent)){
  .fondo::after{background:linear-gradient(180deg,rgba(15,14,12,.3) 0%,rgba(15,14,12,.5) 24%,rgba(15,14,12,.85) 44%,#0F0E0C 62%)}
  body.es-admin .fondo::after{background:linear-gradient(180deg,rgba(15,14,12,.45) 0%,#0F0E0C 34%)}
  body.es-acceso .fondo::after{background:linear-gradient(180deg,rgba(15,14,12,.1) 0%,rgba(15,14,12,.45) 26%,#0F0E0C 60%)}
  @media (prefers-color-scheme:light){
    .fondo::after{background:linear-gradient(180deg,rgba(230,230,227,.3) 0%,rgba(230,230,227,.5) 24%,rgba(230,230,227,.85) 44%,#E6E6E3 62%)}
    body.es-admin .fondo::after{background:linear-gradient(180deg,rgba(230,230,227,.45) 0%,#E6E6E3 34%)}
    body.es-acceso .fondo::after{background:linear-gradient(180deg,rgba(230,230,227,.1) 0%,rgba(230,230,227,.45) 26%,#E6E6E3 60%)}
  }
}

/* ---------- Huella / Face ID ---------- */
.huella-acceso{display:grid;gap:16px;margin-top:14px}
.huella-acceso[hidden],.huella-msg[hidden]{display:none}
.huella-msg{color:var(--err);font-size:16px;line-height:1.4;margin:0}
.huella-sep{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;color:var(--soft);font-size:15px}
.huella-sep::before,.huella-sep::after{content:"";height:1px;background:var(--hair-2)}
.acceso.con-huella form .pill.amb{background:transparent;border-color:var(--hair-2);color:var(--text)}
.acceso.con-huella form .pill.amb .in{background:var(--shell)}
.hoja-acc{display:grid;gap:12px;margin-top:18px}
.hoja-acc .pill{min-height:58px}
.hoja-acc[hidden]{display:none}

/* ---------- Movimiento reducido: la firma queda en cambio de estado ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .anillo{display:none}
}