/* HP Casa — sistema de diseño
   Tokens primero; componentes después. Un solo acento (azul de marca) + colores de estado. */

:root {
  /* Colores */
  --fondo: #f3f5f8;
  --superficie: #ffffff;
  --superficie-2: #f6f8fb;
  --superficie-3: #eaeef4;
  --borde: #dfe4ec;
  --borde-fuerte: #c9d1dd;
  --texto: #142033;
  --texto-2: #536177;
  --texto-3: #7d8899;
  --primario: #2f62a8;
  --primario-hover: #275591;
  --primario-suave: #e6eefa;
  --sobre-primario: #ffffff;
  --ok: #17804a;
  --ok-suave: #e3f4ea;
  --aviso: #a35f00;
  --aviso-suave: #fdf0d9;
  --problema: #c0352b;
  --problema-suave: #fbe6e4;
  --info: #2f62a8;
  --info-suave: #e6eefa;

  /* Forma y profundidad */
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;
  --sombra-1: 0 1px 2px rgb(20 32 51 / 6%);
  --sombra-2: 0 1px 2px rgb(20 32 51 / 5%), 0 6px 18px rgb(20 32 51 / 7%);
  --sombra-3: 0 12px 40px rgb(20 32 51 / 18%);

  /* Espacios (escala de 4 px) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px;

  /* Tipografía */
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  --t-xs: .8125rem; --t-s: .9rem; --t-m: 1rem; --t-l: 1.125rem; --t-xl: 1.375rem; --t-2xl: 1.75rem;

  --barra-inferior: 68px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f141b;
    --superficie: #171d26;
    --superficie-2: #1c232e;
    --superficie-3: #252e3b;
    --borde: #2a3441;
    --borde-fuerte: #3a4757;
    --texto: #e9eef5;
    --texto-2: #a3afc0;
    --texto-3: #7c889a;
    --primario: #7aa7ec;
    --primario-hover: #93b8f0;
    --primario-suave: #1d2b40;
    --sobre-primario: #0c1626;
    --ok: #4fc485;
    --ok-suave: #15291f;
    --aviso: #e6a645;
    --aviso-suave: #2e2413;
    --problema: #f07a70;
    --problema-suave: #321a19;
    --info: #7aa7ec;
    --info-suave: #1d2b40;
    --sombra-1: none;
    --sombra-2: 0 0 0 1px rgb(255 255 255 / 2%);
    --sombra-3: 0 12px 40px rgb(0 0 0 / 55%);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fondo); }
html, body { margin: 0; }
body {
  background: var(--fondo);
  color: var(--texto);
  font: var(--t-m)/1.5 var(--fuente);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { line-height: 1.25; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--primario); }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primario) 55%, transparent); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.icono { width: 20px; height: 20px; flex: none; }
.icono-s { width: 16px; height: 16px; }
.icono-l { width: 26px; height: 26px; }
.icono-xl { width: 34px; height: 34px; }
.girando { animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Estructura ---------- */
.envoltura { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 var(--e-4); }
main.envoltura { padding-top: var(--e-6); padding-bottom: calc(var(--barra-inferior) + var(--e-8) + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { main.envoltura { padding-bottom: var(--e-10); } }

.cabecera {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--fondo) 85%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--borde) 70%, transparent);
}
.cabecera .envoltura { display: flex; align-items: center; gap: var(--e-3); min-height: 60px; }
.marca { display: flex; align-items: center; gap: var(--e-2); font-weight: 750; font-size: var(--t-l); text-decoration: none; color: var(--texto); letter-spacing: -.02em; }
.marca img { width: 32px; height: 32px; border-radius: 9px; }
.espacio { flex: 1; }

/* Navegación: pestañas arriba en escritorio, barra inferior en el celular */
.nav-superior { display: none; gap: var(--e-1); margin-left: var(--e-6); }
.nav-superior a, .nav-inferior a {
  display: flex; align-items: center; gap: var(--e-2); text-decoration: none; color: var(--texto-2); font-weight: 600;
}
.nav-superior a { padding: 8px 14px; border-radius: 999px; font-size: var(--t-s); }
.nav-superior a:hover { background: var(--superficie-3); color: var(--texto); }
.nav-superior a[aria-current="page"] { background: var(--primario-suave); color: var(--primario); }
.nav-inferior {
  position: fixed; inset: auto 0 0 0; z-index: 10;
  display: flex; justify-content: space-around;
  height: calc(var(--barra-inferior) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--borde);
}
.nav-inferior a { flex: 1; flex-direction: column; justify-content: center; gap: 3px; font-size: 12px; position: relative; }
.nav-inferior a .pastilla { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px; transition: background .15s; }
.nav-inferior a[aria-current="page"] { color: var(--primario); }
.nav-inferior a[aria-current="page"] .pastilla { background: var(--primario-suave); }
@media (min-width: 900px) {
  .nav-superior { display: flex; }
  .nav-inferior { display: none; }
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 44px; padding: 0 18px; border-radius: 12px;
  border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto);
  font-weight: 600; font-size: var(--t-s); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .05s;
}
.boton:hover { background: var(--superficie-2); }
.boton:active { transform: scale(.98); }
.boton:disabled { opacity: .55; cursor: default; transform: none; }
.boton.primario { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); }
.boton.primario:hover { background: var(--primario-hover); }
.boton.peligro { color: var(--problema); border-color: color-mix(in srgb, var(--problema) 40%, var(--borde)); }
.boton.peligro:hover { background: var(--problema-suave); }
.boton.peligro-lleno { background: var(--problema); border-color: var(--problema); color: #fff; }
.boton.fantasma { background: transparent; border-color: transparent; }
.boton.fantasma:hover { background: var(--superficie-3); }
.boton.chico { min-height: 36px; padding: 0 12px; font-size: var(--t-xs); border-radius: 10px; }
.boton.ancho { width: 100%; }
.boton-icono { width: 44px; padding: 0; }
.boton[aria-busy="true"] { pointer-events: none; }
.boton[aria-busy="true"] .icono { animation: girar 1s linear infinite; }

/* ---------- Tarjetas y textos ---------- */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-l);
  box-shadow: var(--sombra-1); padding: var(--e-5);
}
.tarjeta-titulo { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-l); font-weight: 700; margin-bottom: var(--e-3); }
.tarjeta-titulo .icono { color: var(--texto-2); }
/* minmax(0, 1fr): una columna nunca se ensancha por el contenido (p. ej. una fila de miniaturas con scroll propio). */
.pila { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
.pila-8 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-8); }
.grilla-2 { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.suave { color: var(--texto-2); }
.tenue { color: var(--texto-3); }
.chico { font-size: var(--t-s); }
.mini { font-size: var(--t-xs); }
.seccion-titulo { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); margin: var(--e-2) 0 calc(-1 * var(--e-1)); }

.saludo h1 { font-size: var(--t-2xl); font-weight: 750; letter-spacing: -.025em; }
.saludo p { color: var(--texto-2); margin-top: 2px; }

/* Insignias */
.insignia { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: var(--t-xs); font-weight: 650; background: var(--superficie-3); color: var(--texto-2); white-space: nowrap; }
.insignia.estado { background: var(--color-suave); color: var(--color-estado); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--color-estado, var(--texto-3)); flex: none; }
.punto.vivo { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-estado) 60%, transparent); animation: vivo 2s infinite; }
@keyframes vivo { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

[data-estado="ok"] { --color-estado: var(--ok); --color-suave: var(--ok-suave); }
[data-estado="aviso"] { --color-estado: var(--aviso); --color-suave: var(--aviso-suave); }
[data-estado="problema"] { --color-estado: var(--problema); --color-suave: var(--problema-suave); }
[data-estado="arrancando"] { --color-estado: var(--info); --color-suave: var(--info-suave); }

/* ---------- Estado principal (héroe) ---------- */
.heroe {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e-4); align-items: center;
  background: linear-gradient(135deg, var(--color-suave) 0%, var(--superficie) 70%);
  border-color: color-mix(in srgb, var(--color-estado) 25%, var(--borde));
}
.heroe .sello { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--color-estado); color: #fff; }
.heroe h2 { font-size: var(--t-xl); font-weight: 750; }
.heroe .accion { margin-top: 4px; color: var(--texto-2); }
.heroe .vivo-linea { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-xs); color: var(--texto-3); border-top: 1px solid color-mix(in srgb, var(--color-estado) 15%, var(--borde)); padding-top: var(--e-3); }
@media (min-width: 640px) {
  .heroe { grid-template-columns: auto 1fr auto; }
  .heroe .vivo-linea { grid-column: auto; border: 0; padding: 0; align-self: start; }
}

/* ---------- Mosaicos de servicios ---------- */
.mosaicos { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.mosaico {
  display: flex; flex-direction: column; gap: var(--e-3); text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.mosaico:hover { border-color: color-mix(in srgb, var(--primario) 40%, var(--borde)); box-shadow: var(--sombra-2); transform: translateY(-1px); }
.mosaico .cabeza { display: flex; align-items: center; gap: var(--e-3); }
.mosaico .cuadro { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--primario-suave); color: var(--primario); }
.mosaico h3 { font-size: var(--t-l); font-weight: 700; }
.mosaico .estado-linea { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-s); }
.mosaico .pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; color: var(--texto-3); font-size: var(--t-xs); }

/* Fila de lista con flecha (accesos secundarios) */
.fila-enlace { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4) var(--e-5); text-decoration: none; color: inherit; }
.fila-enlace:hover { background: var(--superficie-2); }
.fila-enlace .cuadro { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--superficie-3); color: var(--texto-2); }
.fila-enlace .texto { flex: 1; min-width: 0; }
.fila-enlace .texto strong { display: block; }
.lista-tarjeta { padding: 0; overflow: hidden; }
.lista-tarjeta > * + * { border-top: 1px solid var(--borde); }

/* ---------- Energía ---------- */
.cuenta { font-variant-numeric: tabular-nums; }
.modo-energia { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-4); background: var(--superficie-2); border-radius: var(--r-m); margin-bottom: var(--e-4); }
.modo-energia .icono { color: var(--primario); margin-top: 2px; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.acciones-grilla { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.acciones-grilla .boton { justify-content: flex-start; white-space: normal; text-align: left; min-height: 48px; line-height: 1.25; }

/* ---------- Entrar: perfiles ---------- */
.entrar { max-width: 720px; margin: 0 auto; text-align: center; }
.entrar .logo { width: 64px; height: 64px; border-radius: 18px; margin: var(--e-4) auto var(--e-4); box-shadow: var(--sombra-2); }
.entrar h1 { font-size: var(--t-2xl); font-weight: 750; letter-spacing: -.025em; }
.entrar .sub { color: var(--texto-2); margin-top: var(--e-1); }
.perfiles { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); margin-top: var(--e-6); }
.perfil {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-2); padding: var(--e-5) var(--e-2) var(--e-4);
  border-radius: var(--r-l); border: 1px solid transparent; background: transparent; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.perfil:hover { background: var(--superficie); border-color: var(--borde); box-shadow: var(--sombra-1); }
.perfil:hover .avatar { transform: scale(1.04); }
.perfil .nombre { font-weight: 650; overflow-wrap: anywhere; }
.perfil .rol { font-size: var(--t-xs); color: var(--texto-3); display: flex; align-items: center; gap: 4px; min-height: 1.2em; }
.avatar {
  width: 84px; height: 84px; border-radius: 28px; display: grid; place-items: center; flex: none;
  color: #fff; font-weight: 750; font-size: 2rem; letter-spacing: -.02em;
  background: linear-gradient(145deg, color-mix(in srgb, var(--color, #3b6ea8) 80%, #fff), var(--color, #3b6ea8));
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 12%); transition: transform .15s;
}
.avatar.m { width: 56px; height: 56px; border-radius: 18px; font-size: 1.4rem; }
.avatar.s { width: 34px; height: 34px; border-radius: 11px; font-size: .95rem; }
.estado-mini { display: inline-flex; margin-top: var(--e-4); }

/* Teclado de PIN */
.hoja-pin { text-align: center; }
.hoja-pin .avatar { margin: 0 auto var(--e-3); }
.puntos { display: flex; justify-content: center; gap: 14px; margin: var(--e-5) 0 var(--e-2); min-height: 16px; }
.puntos span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--borde-fuerte); transition: background .1s, border-color .1s; }
.puntos span.lleno { background: var(--texto); border-color: var(--texto); }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3); max-width: 300px; margin: var(--e-4) auto 0; }
.teclado button {
  height: 64px; border-radius: 20px; border: 1px solid var(--borde); background: var(--superficie-2);
  font-size: 1.5rem; font-weight: 600; cursor: pointer; display: grid; place-items: center;
  transition: background .1s, transform .05s;
}
.teclado button:hover { background: var(--superficie-3); }
.teclado button:active { transform: scale(.95); background: var(--superficie-3); }
.teclado .tecla-entrar { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); font-size: var(--t-m); }
.teclado .tecla-suave { background: transparent; border-color: transparent; }
.sacudir { animation: sacudir .35s; }
@keyframes sacudir { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ---------- Formularios ---------- */
.form { display: grid; gap: var(--e-4); text-align: left; }
.campo { display: grid; gap: 6px; }
.campo > label, .campo > legend { font-weight: 600; font-size: var(--t-s); }
.campo .ayuda { font-size: var(--t-xs); color: var(--texto-3); }
.entrada, .campo input[type="text"], .campo input[type="password"], .campo input[type="number"], .campo select {
  width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--borde-fuerte); background: var(--superficie);
  transition: border-color .15s, box-shadow .15s;
}
.entrada:focus, .campo input:focus, .campo select:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 22%, transparent); }
.campo input[type="color"] { width: 64px; height: 40px; border: 1px solid var(--borde-fuerte); border-radius: 10px; padding: 2px; background: var(--superficie); }
.casilla { display: flex; align-items: center; gap: var(--e-3); cursor: pointer; }
.casilla input { width: 20px; height: 20px; accent-color: var(--primario); flex: none; }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); padding: var(--e-3) 0; cursor: pointer; }
.interruptor input { appearance: none; width: 46px; height: 28px; border-radius: 999px; background: var(--borde-fuerte); position: relative; cursor: pointer; flex: none; transition: background .15s; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--sombra-1); transition: transform .15s; }
.interruptor input:checked { background: var(--primario); }
.interruptor input:checked::after { transform: translateX(18px); }
.error { color: var(--problema); font-weight: 600; font-size: var(--t-s); min-height: 1.4em; }
.colores { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.colores label { cursor: pointer; }
.colores input { position: absolute; opacity: 0; pointer-events: none; }
.colores span { display: block; width: 34px; height: 34px; border-radius: 11px; background: var(--c); border: 3px solid transparent; box-shadow: 0 0 0 1px var(--borde); }
.colores input:checked + span { border-color: var(--superficie); box-shadow: 0 0 0 2px var(--texto); }
.colores input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--primario) 55%, transparent); outline-offset: 2px; }

/* ---------- Administración ---------- */
.pestanas { display: flex; gap: var(--e-1); overflow-x: auto; padding: 4px; background: var(--superficie-3); border-radius: 14px; scrollbar-width: none; }
.pestanas button { display: flex; align-items: center; gap: var(--e-2); border: 0; background: none; padding: 9px 14px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: var(--t-s); color: var(--texto-2); white-space: nowrap; }
.pestanas button[aria-selected="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1); }
.metricas { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.metrica { display: grid; gap: var(--e-2); padding: var(--e-4); }
.metrica .cab { display: flex; align-items: center; gap: var(--e-2); color: var(--texto-2); font-size: var(--t-s); font-weight: 600; }
.metrica .valor { font-size: var(--t-xl); font-weight: 750; font-variant-numeric: tabular-nums; }
.metrica .valor small { font-size: var(--t-s); font-weight: 600; color: var(--texto-3); }
.medidor { height: 8px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; }
.medidor span { display: block; height: 100%; border-radius: inherit; background: var(--color-estado, var(--primario)); }
.componentes { display: grid; }
.componente { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--e-3); align-items: center; padding: var(--e-3) 0; border-top: 1px solid var(--borde); }
.componente:first-child { border-top: 0; }
.componente .punto { grid-row: span 2; width: 10px; height: 10px; }
.componente .det { color: var(--texto-2); font-size: var(--t-s); overflow-wrap: anywhere; }
.linea-tiempo { display: grid; gap: 0; }
.linea-tiempo div { display: grid; grid-template-columns: 9.5em 1fr; gap: var(--e-3); padding: var(--e-2) 0; border-top: 1px solid var(--borde); font-size: var(--t-s); }
.linea-tiempo div:first-child { border-top: 0; }
.linea-tiempo time { color: var(--texto-3); font-variant-numeric: tabular-nums; }
.persona { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) 0; border-top: 1px solid var(--borde); }
.persona:first-child { border-top: 0; }
.persona .datos { flex: 1; min-width: 0; }
.persona .datos .mini { color: var(--texto-3); }
.permisos { display: grid; gap: var(--e-2); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tabla td, .tabla th { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla th { font-size: var(--t-xs); color: var(--texto-3); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.desborde { overflow-x: auto; }

/* ---------- Próximamente ---------- */
.titulo-seccion { display: flex; gap: var(--e-4); align-items: center; }
.titulo-seccion .cuadro { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--primario-suave); color: var(--primario); }
.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); }
.lista-check li { display: flex; gap: var(--e-3); align-items: flex-start; }
.lista-check .icono { color: var(--primario); margin-top: 2px; }
.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 32px 1fr; gap: var(--e-3); align-items: start; }
.pasos li::before { content: counter(paso); width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--primario-suave); color: var(--primario); font-weight: 750; }

/* ---------- Carga (esqueletos) ---------- */
.esqueleto { border-radius: var(--r-l); background: linear-gradient(90deg, var(--superficie-3) 0%, var(--superficie-2) 50%, var(--superficie-3) 100%); background-size: 200% 100%; animation: brillo 1.4s infinite; }
@keyframes brillo { to { background-position: -200% 0; } }

/* ---------- Diálogos, menú y avisos ---------- */
dialog {
  border: 1px solid var(--borde); border-radius: var(--r-l); background: var(--superficie); color: var(--texto);
  padding: var(--e-6); width: min(440px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); box-shadow: var(--sombra-3);
}
dialog::backdrop { background: rgb(10 16 26 / 50%); backdrop-filter: blur(2px); }
dialog[open] { animation: aparecer .18s ease-out; }
@keyframes aparecer { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (max-width: 560px) {
  dialog.hoja { margin: auto 0 0; width: 100%; max-width: 100%; border-radius: var(--r-l) var(--r-l) 0 0; padding-bottom: calc(var(--e-6) + env(safe-area-inset-bottom)); }
}
.dialogo-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-4); }
.dialogo-cab h2 { font-size: var(--t-xl); }
.dialogo-pie { display: flex; justify-content: flex-end; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-2); }

.menu-usuario { position: relative; }
.menu-usuario > button { display: flex; align-items: center; gap: var(--e-2); border: 0; background: none; cursor: pointer; padding: 4px; border-radius: 14px; }
.menu-usuario > button:hover { background: var(--superficie-3); }
.menu-usuario .nombre-cab { font-weight: 600; font-size: var(--t-s); }
@media (max-width: 480px) { .menu-usuario .nombre-cab { display: none; } }
.desplegable { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-m); box-shadow: var(--sombra-3); padding: var(--e-2); z-index: 20; }
.desplegable .quien { padding: var(--e-2) var(--e-3) var(--e-3); border-bottom: 1px solid var(--borde); margin-bottom: var(--e-2); }
.desplegable a, .desplegable button { display: flex; align-items: center; gap: var(--e-3); width: 100%; padding: 10px var(--e-3); border: 0; background: none; border-radius: 10px; cursor: pointer; text-decoration: none; color: var(--texto); font-size: var(--t-s); font-weight: 550; text-align: left; }
.desplegable a:hover, .desplegable button:hover { background: var(--superficie-3); }

.tostada {
  position: fixed; left: 50%; bottom: calc(var(--barra-inferior) + var(--e-4) + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: var(--e-2);
  background: var(--texto); color: var(--fondo); padding: 12px 18px; border-radius: 14px; box-shadow: var(--sombra-3);
  max-width: calc(100vw - 32px); font-weight: 550; font-size: var(--t-s); animation: aparecer .2s ease-out;
}
@media (min-width: 900px) { .tostada { bottom: var(--e-6); } }

/* ---------- Páginas de espera (apagada / arrancando) ---------- */
.espera { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--e-6) var(--e-4); }
.espera .tarjeta { max-width: 520px; width: 100%; padding: var(--e-8) var(--e-6); }
.espera .sello { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--superficie-3); color: var(--texto-2); margin-bottom: var(--e-4); }
.espera h1 { font-size: var(--t-2xl); font-weight: 750; letter-spacing: -.025em; margin-bottom: var(--e-2); }
.espera .estado-busqueda { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-s); color: var(--texto-2); background: var(--superficie-2); border-radius: 999px; padding: 6px 14px; width: fit-content; margin-bottom: var(--e-5); }
.latido { width: 10px; height: 10px; border-radius: 50%; background: var(--aviso); animation: latido 1.6s infinite; }
@keyframes latido { 50% { opacity: .25; } }
.nota { display: flex; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--r-m); background: var(--aviso-suave); color: var(--texto); font-size: var(--t-s); }
.nota .icono { color: var(--aviso); margin-top: 1px; }

/* ---------- Avisos importantes (globales) ---------- */
dialog.modal-importante { width: min(420px, calc(100vw - 32px)); padding: var(--e-8) var(--e-6) var(--e-6); }
dialog.modal-importante:focus-visible { outline: none; }
dialog.modal-importante::backdrop { background: rgb(10 16 26 / 62%); backdrop-filter: blur(3px); }
.modal-aviso { display: grid; justify-items: center; gap: var(--e-3); text-align: center; }
.modal-aviso .sello { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: var(--color-estado); color: #fff; }
.modal-aviso h2 { font-size: var(--t-xl); font-weight: 750; }
.modal-aviso .dialogo-pie { width: 100%; margin-top: var(--e-3); }
.modal-aviso .dialogo-pie .boton { flex: 1; }
.cuenta-grande { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.modal-aviso .barra { width: 100%; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--color-estado) 18%, transparent); overflow: hidden; }
.modal-aviso .barra span { display: block; height: 100%; background: var(--color-estado); transition: width .25s linear; }
.barra-global {
  position: fixed; z-index: 9; top: 68px; left: 50%; transform: translateX(-50%); width: min(1008px, calc(100vw - 24px));
  display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4);
  background: var(--aviso-suave); border: 1px solid color-mix(in srgb, var(--aviso) 45%, transparent);
  border-radius: var(--r-m); box-shadow: var(--sombra-2); font-size: var(--t-s);
}
.barra-global > .icono { color: var(--aviso); }
.barra-global > span { flex: 1; }

/* ---------- Imprimir ---------- */
.zona-archivo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2); text-align: center;
  min-height: 220px; padding: var(--e-8) var(--e-5); border: 2px dashed var(--borde-fuerte); border-radius: var(--r-l);
  background: var(--superficie); cursor: pointer; transition: border-color .15s, background .15s;
}
.zona-archivo:hover, .zona-archivo.encima { border-color: var(--primario); background: var(--primario-suave); }
.zona-archivo:focus-within { outline: 3px solid color-mix(in srgb, var(--primario) 55%, transparent); outline-offset: 2px; }
.zona-archivo .cuadro { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--primario-suave); color: var(--primario); margin-bottom: var(--e-2); }
.zona-archivo strong { font-size: var(--t-l); }
.barra-archivo { display: flex; align-items: center; gap: var(--e-2); }
.barra-archivo .texto { min-width: 0; display: grid; }
.barra-archivo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imprimir-grilla { display: grid; gap: var(--e-4); align-items: start; }
@media (min-width: 900px) {
  .imprimir-grilla { grid-template-columns: minmax(0, 1fr) 340px; }
  .panel-opciones { position: sticky; top: 76px; }
}
.vista-previa { padding: var(--e-4); }
.miniaturas { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); padding: 2px; }
/* En PC la grilla tiene su propio scroll al lado del panel fijo; en el celular scrollea la página (sin scroll anidado). */
@media (min-width: 900px) { .miniaturas { max-height: 70vh; max-height: 70svh; overflow-y: auto; } }
.miniatura {
  position: relative; display: grid; place-items: center; padding: 6px; aspect-ratio: 1 / 1.35; border-radius: 12px;
  border: 2px solid var(--borde); background: var(--superficie-2); cursor: pointer; transition: border-color .12s, opacity .12s;
}
.miniatura canvas { max-width: 100%; max-height: 100%; background: #fff; box-shadow: var(--sombra-1); filter: grayscale(1); border-radius: 2px; }
.miniatura:not(.lista) canvas { width: 70%; height: 80%; background: var(--superficie-3); }
.miniatura .numero { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-size: var(--t-xs); font-weight: 700; background: var(--superficie); color: var(--texto-2); padding: 0 8px; border-radius: 999px; box-shadow: var(--sombra-1); }
.miniatura .marca { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--primario); color: var(--sobre-primario); }
.miniatura[aria-pressed="true"] { border-color: var(--primario); }
.miniatura[aria-pressed="false"] { opacity: .45; }
.miniatura[aria-pressed="false"] .marca { background: var(--superficie-3); color: transparent; }
.imagen-previa { max-width: 100%; max-height: 70vh; max-height: 70svh; margin: 0 auto; filter: grayscale(1); border-radius: var(--r-s); box-shadow: var(--sombra-2); background: #fff; }
.panel-opciones { display: grid; gap: var(--e-5); }
.etiqueta { font-weight: 650; font-size: var(--t-s); }
.ayuda.error { color: var(--problema); font-weight: 600; }
.segmentado { display: flex; padding: 4px; gap: 4px; background: var(--superficie-3); border-radius: 12px; }
.segmentado button { flex: 1; min-height: 38px; border: 0; border-radius: 9px; background: transparent; font-weight: 600; font-size: var(--t-s); color: var(--texto-2); cursor: pointer; }
.segmentado button[aria-checked="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1); }
.contador { display: flex; align-items: center; gap: var(--e-2); }
.contador button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--borde-fuerte); background: var(--superficie); display: grid; place-items: center; cursor: pointer; }
.contador button:hover { background: var(--superficie-2); }
.contador input { width: 72px; height: 44px; text-align: center; font-size: var(--t-l); font-weight: 700; border-radius: 12px; border: 1px solid var(--borde-fuerte); background: var(--superficie); -moz-appearance: textfield; appearance: textfield; }
.contador input::-webkit-inner-spin-button { -webkit-appearance: none; }
.mas-opciones summary { cursor: pointer; font-weight: 650; font-size: var(--t-s); color: var(--primario); list-style: none; display: flex; align-items: center; gap: 6px; }
.mas-opciones summary::-webkit-details-marker { display: none; }
.mas-opciones summary::before { content: "+"; font-size: 1.1em; }
.mas-opciones[open] summary::before { content: "−"; }
.mas-opciones .segmentado button { font-size: var(--t-xs); }
.pie-imprimir { display: grid; gap: var(--e-2); border-top: 1px solid var(--borde); padding-top: var(--e-4); }
.pie-imprimir .resumen { font-size: var(--t-s); color: var(--texto-2); text-align: center; min-height: 1.4em; }
.boton.grande { min-height: 54px; font-size: var(--t-m); border-radius: 14px; }
@media (max-width: 899px) {
  .pie-imprimir {
    position: sticky; bottom: calc(var(--barra-inferior) + env(safe-area-inset-bottom)); background: var(--superficie);
    margin: 0 calc(-1 * var(--e-5)) calc(-1 * var(--e-5)); padding: var(--e-3) var(--e-5) var(--e-4);
    border-radius: 0 0 var(--r-l) var(--r-l); box-shadow: 0 -8px 16px -12px rgb(0 0 0 / 25%);
  }
}

.seguimiento { display: grid; justify-items: center; gap: var(--e-3); text-align: center; padding: var(--e-8) var(--e-5); }
.seguimiento .sello { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: var(--color-suave); color: var(--color-estado); }
.seguimiento h2 { font-size: var(--t-xl); }
.seguimiento .nota { max-width: 460px; }
.pulsando { animation: latido 1.6s infinite; }
.barra-progreso { width: min(360px, 100%); height: 8px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; }
.barra-progreso span { display: block; height: 100%; background: var(--primario); transition: width .2s; }
.etapas { list-style: none; padding: 0; margin: var(--e-2) 0; display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; justify-content: center; }
.etapas li { display: flex; align-items: center; gap: 6px; font-size: var(--t-s); color: var(--texto-3); font-weight: 600; }
.etapas li + li::before { content: ""; width: 24px; height: 2px; background: var(--borde-fuerte); margin-right: 2px; }
.etapas .bolita { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-xs); background: var(--superficie-3); }
.etapas .hecha { color: var(--ok); }
.etapas .hecha .bolita { background: var(--ok); color: #fff; }
.etapas .actual { color: var(--texto); }
.etapas .actual .bolita { background: var(--primario); color: var(--sobre-primario); }

.recomendaciones { display: grid; gap: var(--e-2); }
.recomendaciones:empty { display: none; }
.recomendacion { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; padding: var(--e-3) var(--e-4); border-radius: var(--r-m); font-size: var(--t-s); }
.recomendacion > span { flex: 1; min-width: 180px; }
.recomendacion[data-tipo="aviso"] { background: var(--aviso-suave); }
.recomendacion[data-tipo="aviso"] > .icono { color: var(--aviso); }
.recomendacion[data-tipo="info"] { background: var(--info-suave); }
.recomendacion[data-tipo="info"] > .icono { color: var(--info); }
.recomendacion .boton-icono { width: 32px; min-height: 32px; }
.girar-45 { transform: rotate(45deg); }

/* ---------- Escanear ---------- */
.presets { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.preset { display: grid; grid-template-columns: auto 1fr auto; gap: var(--e-3); align-items: center; text-align: left; cursor: pointer; padding: var(--e-4); }
.preset:hover { border-color: color-mix(in srgb, var(--primario) 40%, var(--borde)); box-shadow: var(--sombra-2); }
.preset .cuadro { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--primario-suave); color: var(--primario); }
.preset span:nth-child(2) { display: grid; }
.preset > .icono { color: var(--texto-3); }
.escanear-grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); align-items: start; }
@media (min-width: 900px) {
  .escanear-grilla { grid-template-columns: minmax(0, 1fr) 340px; }
  .escanear-grilla .panel-opciones { position: sticky; top: 76px; }
}
.cama-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2); margin-bottom: var(--e-3); }
.cama {
  /* El ancho sale del alto disponible para no deformar la proporción del vidrio (211,9 × 297 mm). */
  position: relative; width: min(100%, 420px); width: min(100%, 420px, calc(70svh * 211.9 / 297)); margin: 0 auto; border-radius: 6px; overflow: hidden;
  background: repeating-linear-gradient(45deg, var(--superficie-2) 0 10px, var(--superficie-3) 10px 20px);
  border: 1px solid var(--borde-fuerte); touch-action: none; user-select: none; cursor: crosshair;
}
.cama img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.cama-vacia { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--e-2); text-align: center; padding: var(--e-5); color: var(--texto-2); }
.esquina { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--primario); color: var(--sobre-primario); transform: rotate(45deg); pointer-events: none; z-index: 2; }
.seleccion {
  position: absolute; border: 2px solid var(--primario); background: color-mix(in srgb, var(--primario) 12%, transparent);
  box-shadow: 0 0 0 9999px rgb(0 0 0 / 28%); cursor: move; z-index: 1;
}
.tirador { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--superficie); border: 3px solid var(--primario); }
.tirador[data-tirador="nw"] { left: -12px; top: -12px; cursor: nwse-resize; }
.tirador[data-tirador="ne"] { right: -12px; top: -12px; cursor: nesw-resize; }
.tirador[data-tirador="sw"] { left: -12px; bottom: -12px; cursor: nesw-resize; }
.tirador[data-tirador="se"] { right: -12px; bottom: -12px; cursor: nwse-resize; }
.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); justify-content: center; }
.chip-boton { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: var(--superficie); font-size: var(--t-xs); font-weight: 650; cursor: pointer; }
.chip-boton[aria-pressed="true"] { background: var(--primario-suave); border-color: var(--primario); color: var(--primario); }
.chip-boton:disabled { opacity: .45; cursor: default; }
.progreso-escaneo { display: grid; gap: var(--e-2); justify-items: center; text-align: center; }
@media (max-width: 899px) {
  /* En el celular: vidrio más chico y las acciones de escaneo fijas abajo, siempre a mano. */
  .cama { width: min(100%, 420px, calc(46svh * 211.9 / 297)); }
  .acciones-escaneo {
    position: sticky; bottom: calc(var(--barra-inferior) + env(safe-area-inset-bottom)); z-index: 2; background: var(--superficie);
    margin: 0 calc(-1 * var(--e-5)) calc(-1 * var(--e-5)); padding: var(--e-3) var(--e-5) var(--e-4);
    border-radius: 0 0 var(--r-l) var(--r-l); box-shadow: 0 -8px 16px -12px rgb(0 0 0 / 25%);
  }
}
.guia { background: var(--info-suave); }
.guia .icono { color: var(--info); }
.bandeja { display: flex; gap: var(--e-3); overflow-x: auto; padding: 2px 2px var(--e-2); scroll-snap-type: x proximity; }
.hoja-escaneada { margin: 0; flex: none; width: 132px; display: grid; gap: 6px; justify-items: center; scroll-snap-align: start; }
.hoja-escaneada img { width: 100%; height: 170px; object-fit: contain; background: #fff; border: 1px solid var(--borde); border-radius: 6px; box-shadow: var(--sombra-1); }
.hoja-escaneada figcaption { font-size: var(--t-xs); font-weight: 700; color: var(--texto-2); }
.hoja-escaneada .herramientas { display: flex; gap: 2px; }
.hoja-escaneada .herramientas .boton-icono { width: 32px; min-height: 32px; }
.guardar { display: grid; gap: var(--e-4); margin-top: var(--e-5); padding-top: var(--e-5); border-top: 1px solid var(--borde); }
@media (min-width: 900px) { .guardar { grid-template-columns: 1fr 1fr 1fr; align-items: start; } .guardar > .boton { grid-column: 1 / -1; } }

/* ---------- Mis trabajos ---------- */
.trabajo { display: grid; grid-template-columns: auto 1fr auto; gap: var(--e-2) var(--e-3); align-items: center; padding: var(--e-3) var(--e-4); }
.trabajo .cuadro { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--superficie-3); color: var(--texto-2); }
.trabajo .datos { display: grid; min-width: 0; }
.trabajo .datos strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acciones-trabajo { grid-column: 2 / -1; display: flex; gap: var(--e-1); justify-content: flex-end; }
.acciones-trabajo:empty { display: none; }
.acciones-trabajo .boton-icono { width: 36px; }
@media (min-width: 640px) {
  .trabajo { grid-template-columns: auto 1fr auto auto; }
  .acciones-trabajo { grid-column: auto; }
}
.solo-pc { display: none; }
@media (min-width: 640px) { .solo-pc { display: inline; } }
.vacio { display: grid; justify-items: center; gap: var(--e-3); text-align: center; padding: var(--e-8) var(--e-5); }
.vacio .cuadro { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--superficie-3); color: var(--texto-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Imprimir a medida ---------- */
.opciones-medida { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
.opcion-medida {
  display: grid; gap: 2px; text-align: left; padding: var(--e-3); border-radius: var(--r-m); cursor: pointer;
  border: 1px solid var(--borde-fuerte); background: var(--superficie); color: inherit; font: inherit;
}
.opcion-medida[aria-checked="true"] { border-color: var(--primario); background: var(--primario-suave); box-shadow: inset 0 0 0 1px var(--primario); }
.medida-libre { display: flex; align-items: center; gap: var(--e-2); }
.medida-libre .entrada { width: 6.5em; }
.recorte-marco { display: grid; place-items: center; }
.recorte-lienzo { position: relative; max-width: 100%; line-height: 0; overflow: hidden; border-radius: 4px; touch-action: none; user-select: none; }
.recorte-lienzo img { display: block; max-width: 100%; max-height: 60svh; width: auto; height: auto; }
.recorte-lienzo .seleccion { box-shadow: 0 0 0 9999px rgb(0 0 0 / 45%); }
@media (max-width: 899px) { .recorte-lienzo img { max-height: 46svh; } }
.enlace { background: none; border: 0; padding: 0; color: var(--primario); font: inherit; font-weight: 650; text-decoration: underline; cursor: pointer; }
.hoja-escaneada-marco { position: relative; width: 100%; }
.hoja-escaneada-marco .insignia { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); box-shadow: var(--sombra-1); }

/* ---------- Guía ilustrada del otro lado (doble faz a mano) ---------- */
.gp-figura { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; font-family: inherit; }
.gp-hoja { fill: #fff; stroke: var(--borde-fuerte); stroke-width: 2; }
.gp-pila { fill: var(--superficie-3); }
.gp-renglones path { fill: none; stroke: #9aa6b8; stroke-width: 2; stroke-dasharray: 4 3; }
.gp-marca { fill: var(--primario); }
.gp-imp { fill: var(--superficie-3); stroke: var(--borde-fuerte); stroke-width: 1.5; }
.gp-bandeja { fill: var(--superficie); stroke: var(--borde-fuerte); stroke-width: 1.5; stroke-dasharray: 5 4; }
.gp-texto { fill: var(--texto); font-size: 14px; font-weight: 600; }
.gp-chica { fill: var(--texto-2); font-size: 12px; }
.gp-dentro { fill: #536177; font-size: 10px; }
.gp-fuerte { font-weight: 700; fill: var(--texto); }
.gp-flecha { fill: none; stroke: var(--primario); stroke-width: 3; stroke-linecap: round; }
.gp-punta { fill: var(--primario); }
.guia-pasos { list-style: none; padding: 0; margin: var(--e-4) 0; display: grid; gap: var(--e-4); counter-reset: gp; text-align: left; }
.guia-pasos li { counter-increment: gp; display: grid; grid-template-columns: 32px 1fr; gap: var(--e-3); align-items: start; background: var(--superficie-2); border-radius: var(--r-m); padding: var(--e-3); }
.guia-pasos li::before { content: counter(gp); grid-row: 2; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--primario-suave); color: var(--primario); font-weight: 750; }
.guia-pasos p { margin: 0; grid-row: 2; align-self: center; }
.guia-figura { grid-row: 1; grid-column: 1 / -1; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-s); padding: var(--e-2); }
.guia-previa, .guia-lista { margin: var(--e-2) 0; padding-left: 1.3em; display: grid; gap: var(--e-2); }
.guia-error { text-align: left; }
.confirmar-salida { text-align: left; }
.eta { display: grid; justify-items: center; gap: var(--e-2); width: 100%; }
.eta p { margin: 0; }
.pregunta-salieron { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; }
.ayuda-no-salio { text-align: left; max-width: 460px; }

.envios { padding: 0 var(--e-4) var(--e-3) calc(40px + var(--e-3) + var(--e-4)); }
.envios ul { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; gap: var(--e-2); font-size: var(--t-s); color: var(--texto-2); }
.envios li { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }

/* ---------- Vista ampliada y "así saldrá en el papel" ---------- */
.miniatura-caja { position: relative; }
.miniatura-caja .miniatura { width: 100%; }
.ampliar { position: absolute; top: 6px; left: 6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie); color: var(--texto-2); border: 1px solid var(--borde-fuerte); box-shadow: var(--sombra-1); cursor: zoom-in; padding: 0; }
.ampliar:hover { color: var(--primario); border-color: var(--primario); }
.imagen-previa { cursor: zoom-in; }
.hojas-previa:not(:empty) { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--borde); }
.titulo-previa { font-size: var(--t-m, 1rem); margin: 0 0 var(--e-1); }
.hojas-previa-lista { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-3); }
.hoja-previa { margin: 0; display: grid; gap: 4px; justify-items: center; cursor: zoom-in; border-radius: 6px; }
.hoja-previa canvas { width: 120px; height: auto; background: #fff; box-shadow: var(--sombra-2); filter: grayscale(1); border-radius: 2px; }
.hoja-previa figcaption { font-size: var(--t-xs); font-weight: 700; color: var(--texto-2); }
.hoja-previa:hover canvas, .hoja-previa:focus-visible canvas { outline: 2px solid var(--primario); }
dialog.visor { padding: 0; width: min(960px, calc(100vw - 16px)); height: calc(100vh - 16px); height: calc(100dvh - 16px); max-height: none; overflow: hidden; }
dialog.visor[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.visor-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4); border-bottom: 1px solid var(--borde); }
.visor-lienzo { position: relative; min-height: 0; background: var(--superficie-3); overflow: hidden; }
.visor-lienzo canvas, .visor-lienzo img { position: absolute; inset: var(--e-3); width: calc(100% - 2 * var(--e-3)); height: calc(100% - 2 * var(--e-3)); object-fit: contain; filter: grayscale(1); }
.visor-lienzo[aria-busy="true"] { opacity: .6; }
.visor-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--borde); }

/* ---------- Escanear: cama con mangos completos, esquina rotulada, borradores, avisos ---------- */
.cama-caja { position: relative; box-sizing: border-box; margin: 0 auto; padding: 16px; touch-action: none; user-select: none;
  /* Mismo criterio que .cama (la proporción del vidrio sale del alto disponible), más el borde de 16 px de cada lado. */
  width: min(100%, 452px, calc(70svh * 211.9 / 297 + 32px)); }
@media (max-width: 899px) { .cama-caja { width: min(100%, 452px, calc(46svh * 211.9 / 297 + 32px)); } }
.cama-caja .cama { margin: 0; width: 100%; }
.mangos { position: absolute; inset: 16px; pointer-events: none; z-index: 4; }
.mangos-area { position: absolute; }
.mangos .tirador { pointer-events: auto; width: 24px; height: 24px; touch-action: none; }
.mangos .tirador::after { content: ""; position: absolute; inset: -12px; }
.cama-caja.bloqueada .tirador { pointer-events: none; opacity: .45; }
.cama-caja.bloqueada #seleccion { cursor: default; }
.mangos .tirador[data-tirador="nw"] { left: -12px; top: -12px; }
.mangos .tirador[data-tirador="ne"] { right: -12px; top: -12px; }
.mangos .tirador[data-tirador="sw"] { left: -12px; bottom: -12px; }
.mangos .tirador[data-tirador="se"] { right: -12px; bottom: -12px; }
.esquina { position: absolute; top: 0; left: 0; width: auto; height: auto; background: none; transform: none; border-radius: 0; display: block; pointer-events: none; z-index: 3; }
.esquina-l { display: block; width: 30px; height: 30px; border-top: 5px solid var(--primario); border-left: 5px solid var(--primario); }
.esquina-texto { position: absolute; top: 5px; left: 42px; background: var(--primario); color: var(--sobre-primario); font-size: var(--t-xs); font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; box-shadow: var(--sombra-1); }
.leyenda-esquina { text-align: center; margin: var(--e-3) auto 0; max-width: 460px; }
.hoja-escaneada-marco .ampliar { top: 6px; left: 6px; }
.dialogo-opciones { display: grid; gap: var(--e-2); margin-top: var(--e-5); }
.dialogo-opciones .boton { justify-content: center; }
dialog.visor.color .visor-lienzo img { filter: none; }
.tamano-info { margin-top: var(--e-2); }
.tamano-info .recomendacion { text-align: left; }
.borradores { display: grid; gap: var(--e-3); }
.borrador { display: grid; grid-template-columns: 56px 1fr; gap: var(--e-3); align-items: center; }
.borrador img { width: 56px; height: 72px; object-fit: contain; background: #fff; border: 1px solid var(--borde); border-radius: 6px; }
.borrador .acciones { grid-column: 1 / -1; justify-content: flex-end; }
@media (min-width: 640px) { .borrador { grid-template-columns: 56px 1fr auto; } .borrador .acciones { grid-column: auto; } }

.pestanas-trabajos { width: fit-content; max-width: 100%; margin-bottom: var(--e-4); }
.contador-pestana { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--aviso-suave); color: var(--aviso); font-size: var(--t-xs); font-weight: 750; }
.segmentado button[aria-selected="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1); }
.pestanas-trabajos button { padding: 0 var(--e-3); white-space: nowrap; }

/* ---------- Recorte de una página escaneada ---------- */
dialog.recorte .visor-cab .texto { display: grid; gap: 2px; min-width: 0; }
dialog.recorte .visor-lienzo { touch-action: none; user-select: none; }
dialog.recorte .visor-lienzo img { inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); }
.recorte-capa { position: absolute; touch-action: none; cursor: crosshair; }
.recorte-marco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.recorte-zona { position: absolute; border: 2px solid var(--primario); box-shadow: 0 0 0 100vmax rgb(10 16 26 / 55%); cursor: move; }
.recorte-asas { position: absolute; pointer-events: none; }
.recorte-asas .asa { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--superficie); border: 3px solid var(--primario);
  pointer-events: auto; touch-action: none; }
.recorte-asas .asa::after { content: ""; position: absolute; inset: -10px; }
.asa[data-asa="nw"] { left: 0; top: 0; cursor: nwse-resize; }
.asa[data-asa="n"] { left: 50%; top: 0; cursor: ns-resize; }
.asa[data-asa="ne"] { left: 100%; top: 0; cursor: nesw-resize; }
.asa[data-asa="e"] { left: 100%; top: 50%; cursor: ew-resize; }
.asa[data-asa="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
.asa[data-asa="s"] { left: 50%; top: 100%; cursor: ns-resize; }
.asa[data-asa="sw"] { left: 0; top: 100%; cursor: nesw-resize; }
.asa[data-asa="w"] { left: 0; top: 50%; cursor: ew-resize; }
.herramientas .boton-icono[aria-pressed="true"] { color: var(--primario); background: var(--primario-suave); }