/* 1, 2, 3 por mí · interfaz «agua y vidrio»: la misma receta de calma, brillo y vidrio de Turnos y Angy, en azul agua y turquesa.
   Sin estilos en línea (la política de seguridad del sitio no los permite): todo va por clases. */

@font-face {
  font-family: 'Jakarta';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fuentes/plus-jakarta-sans.woff2') format('woff2');
}

/* ------------------------------------------------------------ colores: día */
:root {
  --marca: #0b3c5d;          /* azul profundo (títulos) */
  --marca-2: #0a7ea4;        /* turquesa profundo */
  --marca-3: #19b5c8;        /* turquesa luz */
  --azul: #01458a;           /* azul del monograma (solo detalles) */
  --oro: #e8a23b;
  --tinta: #0d2a3a; --tinta-2: #3e5f73; --tinta-3: #6b8798;
  --acento: #0a7ea4; --acento-fondo: rgba(25, 181, 200, .12);
  --bien: #17704a; --bien-fondo: rgba(40, 170, 110, .15);
  --mal: #b4232f; --mal-fondo: rgba(220, 70, 80, .13);
  --adv: #8a5a06; --adv-fondo: rgba(232, 170, 60, .18);
  --radio: 22px;
  --tarjeta: rgba(255, 255, 255, .62);
  --tarjeta-fuerte: rgba(255, 255, 255, .86);
  --borde: rgba(11, 60, 93, .11);
  --filo: rgba(255, 255, 255, .92);
  --sombra: 0 1px 1px rgba(11, 60, 93, .04), 0 10px 26px -12px rgba(11, 60, 93, .26), 0 28px 64px -34px rgba(11, 60, 93, .32);
  --sombra-alta: 0 2px 4px rgba(11, 60, 93, .06), 0 22px 46px -16px rgba(11, 60, 93, .36), 0 46px 100px -44px rgba(4, 26, 40, .44);
  --desenfoque: blur(20px) saturate(160%);
  --aurora-1: #f4fbfd; --aurora-2: #e1f3f8; --aurora-3: #c9e8f1; --aurora-4: #a9d7e8;
  --luz: rgba(255, 255, 255, .66);
  color-scheme: light;
}

/* ------------------------------------------------------------ colores: noche (azul profundo) */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --marca: #dff4fa; --marca-2: #5fd0e6; --marca-3: #2aa8c4; --azul: #6fb4ff;
    --oro: #f0b85a;
    --tinta: #e6f4f8; --tinta-2: #a9c7d3; --tinta-3: #7fa0ae;
    --acento: #6fd8ee; --acento-fondo: rgba(95, 208, 230, .14);
    --bien: #7fe0ae; --bien-fondo: rgba(127, 224, 174, .13);
    --mal: #ff9c9c; --mal-fondo: rgba(255, 110, 110, .13);
    --adv: #f2c66d; --adv-fondo: rgba(242, 198, 109, .14);
    --tarjeta: rgba(10, 38, 56, .6); --tarjeta-fuerte: rgba(10, 38, 56, .9);
    --borde: rgba(150, 220, 235, .15); --filo: rgba(170, 228, 240, .2);
    --sombra: 0 1px 1px rgba(0, 0, 0, .25), 0 12px 30px -12px rgba(0, 0, 0, .65), 0 32px 72px -36px rgba(0, 0, 0, .75);
    --sombra-alta: 0 2px 6px rgba(0, 0, 0, .3), 0 22px 48px -16px rgba(0, 0, 0, .72), 0 48px 104px -44px rgba(0, 0, 0, .85);
    --aurora-1: #0b2a3c; --aurora-2: #08202f; --aurora-3: #051620; --aurora-4: #030d14;
    --luz: rgba(60, 190, 220, .15);
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------ base y fondo de aurora */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--aurora-3); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  font-family: 'Jakarta', system-ui, 'Segoe UI', Roboto, sans-serif; font-size: 16px; line-height: 1.5;
  letter-spacing: -.005em; color: var(--tinta); -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(120% 70% at 50% -10%, var(--luz), transparent 60%),
    linear-gradient(180deg, var(--aurora-1) 0%, var(--aurora-2) 40%, var(--aurora-3) 80%, var(--aurora-4) 100%) fixed;
}
body::before, body::after { content: ''; position: fixed; inset: -25%; z-index: -1; pointer-events: none; }
body::before {
  background:
    radial-gradient(28% 18% at 22% 30%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(22% 14% at 74% 22%, rgba(170, 225, 240, .5), transparent 70%),
    radial-gradient(30% 20% at 60% 68%, rgba(255, 255, 255, .3), transparent 70%),
    radial-gradient(18% 12% at 28% 78%, rgba(150, 220, 240, .3), transparent 70%);
  filter: blur(30px); opacity: .55; animation: luces 42s ease-in-out infinite alternate;
}
body::after {
  inset: 0;
  background:
    linear-gradient(100deg, transparent 0 18%, rgba(255, 255, 255, .16) 22%, transparent 30% 46%, rgba(255, 255, 255, .1) 52%, transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 45%);
  mix-blend-mode: soft-light; animation: rayos 28s ease-in-out infinite alternate;
}
@keyframes luces {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50% { transform: translate3d(3%, -2%, 0) scale(1.06) rotate(2deg); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.02) rotate(-1.5deg); }
}
@keyframes rayos { from { opacity: .7; transform: translateX(-2%); } to { opacity: 1; transform: translateX(2%); } }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) body::before { opacity: .22; }
  :root:not([data-tema="claro"]) body::after { opacity: .4; mix-blend-mode: screen; }
}
::selection { background: rgba(25, 181, 200, .28); }
a { color: var(--acento); text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3 { letter-spacing: -.02em; line-height: 1.2; margin: 0 0 .5em; color: var(--marca); }
h1 { font-weight: 800; font-size: clamp(1.55rem, 3.4vw, 2.2rem); }
h2 { font-weight: 750; font-size: clamp(1.15rem, 2vw, 1.4rem); }
h3 { font-weight: 700; font-size: 1.02rem; }
p { margin: 0 0 .7em; }
:focus-visible { outline: 3px solid rgba(25, 181, 200, .55); outline-offset: 3px; border-radius: 8px; }
button { font: inherit; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sub { color: var(--tinta-3); }
.num { font-variant-numeric: tabular-nums; }
.centro { text-align: center; }
.mt { margin-top: 18px; }
.nov { display: none !important; }
.aparecer { animation: emerger .6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes emerger { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ vidrio */
.vidrio {
  position: relative; isolation: isolate; padding: 18px;
  background: linear-gradient(160deg, var(--tarjeta-fuerte) -20%, var(--tarjeta) 55%);
  -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: inset 0 1px 0 var(--filo), var(--sombra);
}
.vidrio::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(115deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .06) 28%, transparent 46%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .vidrio::before { background: linear-gradient(115deg, rgba(120, 210, 235, .1) 0%, transparent 40%); }
}
.vidrio > h2:first-child, .vidrio > h3:first-child { margin-top: 0; }

/* ------------------------------------------------------------ cabecera y navegación */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--tarjeta-fuerte) 78%, transparent);
  -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  border-bottom: 1px solid var(--borde); box-shadow: inset 0 -1px 0 var(--filo), 0 8px 24px -18px rgba(11, 60, 93, .45);
}
.cabecera-in { max-width: 1120px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 14px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); min-width: 0; }
.marca img { width: 46px; height: auto; flex: none; filter: drop-shadow(0 4px 10px rgba(11, 60, 93, .25)); }
.marca span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marca b { font-weight: 800; font-size: 1.12rem; background: linear-gradient(120deg, var(--marca-2), var(--marca-3) 60%, var(--oro)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca small { font-size: .78rem; color: var(--tinta-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.nav-sup { display: none; margin-left: auto; gap: 2px; }
.nav-sup a, .nav-inf a, .nav-inf button {
  position: relative; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--tinta-2);
  font-weight: 650; font-size: .93rem; padding: 8px 12px; border-radius: 12px; transition: color .25s, background .25s;
}
.nav-sup a:hover { color: var(--marca); background: var(--acento-fondo); }
.nav-sup a[aria-current="page"] { color: var(--marca-2); background: var(--acento-fondo); }
.icono { width: 20px; height: 20px; flex: none; }
.menu-usuario { margin-left: auto; }
.nav-sup + .menu-usuario { margin-left: 8px; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; font-weight: 800; color: #fff;
  background: linear-gradient(160deg, var(--marca-3), var(--marca-2) 55%, #07506f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 14px -6px rgba(7, 80, 111, .6);
}
.nav-inf {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--tarjeta-fuerte) 86%, transparent); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  border-top: 1px solid var(--borde); box-shadow: 0 -10px 30px -18px rgba(11, 60, 93, .45);
}
.nav-inf a, .nav-inf button { flex-direction: column; gap: 2px; font-size: .72rem; padding: 6px 10px; border: 0; background: none; cursor: pointer; min-width: 58px; }
.nav-inf a[aria-current="page"] { color: var(--marca-2); }
.nav-inf a[aria-current="page"] .icono { filter: drop-shadow(0 3px 6px rgba(25, 181, 200, .5)); }
.vender-boton { color: #fff !important; }
.nav-inf .vender-boton .icono-caja {
  display: grid; place-items: center; width: 46px; height: 46px; margin-top: -22px; border-radius: 50%;
  background: linear-gradient(180deg, #34c3d6, #0a7ea4 50%, #07506f); box-shadow: 0 10px 20px -8px rgba(10, 126, 164, .8), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.nav-inf .vender-boton { color: var(--tinta-2) !important; }
main { max-width: 1120px; margin: 0 auto; padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); outline: none; }

/* ------------------------------------------------------------ botones: gotas pulidas */
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font-weight: 700; font-size: .96rem; text-decoration: none; border: 0; border-radius: 14px; padding: 11px 20px; color: #fff; min-height: 44px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .07) 48%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #34c3d6 0%, #0a7ea4 46%, #07506f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -2px 6px rgba(0, 30, 50, .28), 0 10px 22px -10px rgba(10, 126, 164, .75);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, opacity .2s;
}
.btn::after {
  content: ''; position: absolute; top: -50%; bottom: -50%; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-18deg) translateX(-120%); transition: transform .9s cubic-bezier(.2, .7, .2, 1); pointer-events: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:hover::after { transform: skewX(-18deg) translateX(420%); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.sec {
  background: color-mix(in srgb, var(--tarjeta-fuerte) 72%, transparent); color: var(--marca-2);
  border: 1px solid rgba(10, 126, 164, .28); box-shadow: inset 0 1px 0 var(--filo), 0 6px 16px -10px rgba(11, 60, 93, .4);
}
.btn.sec::after { background: linear-gradient(100deg, transparent, rgba(25, 181, 200, .22), transparent); }
.btn.suave { background: var(--acento-fondo); color: var(--marca-2); box-shadow: none; border: 0; }
.btn.suave::after { display: none; }
.btn.peligro { background: linear-gradient(180deg, #e0525f, #b4232f 55%, #7a1520); }
.btn.chico { padding: 7px 14px; min-height: 36px; font-size: .88rem; border-radius: 12px; }
.btn.grande { padding: 15px 26px; font-size: 1.08rem; min-height: 54px; border-radius: 16px; }
.btn.bloque { width: 100%; }
.fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fila.separado { justify-content: space-between; }
.fila.fin { justify-content: flex-end; }

/* ------------------------------------------------------------ formularios */
label.campo { display: grid; gap: 5px; font-size: .84rem; font-weight: 700; color: var(--tinta-3); }
.campo input, .campo select, .campo textarea, input.buscar, select.suelto {
  width: 100%; font: inherit; font-size: 1rem; font-weight: 500; color: var(--tinta); padding: 11px 14px; border-radius: 13px; min-height: 46px;
  background: color-mix(in srgb, var(--tarjeta-fuerte) 90%, transparent); border: 1px solid var(--borde);
  box-shadow: inset 0 1px 2px rgba(11, 60, 93, .07); transition: border-color .25s, box-shadow .25s;
}
.campo textarea { min-height: 76px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, input.buscar:focus {
  outline: none; border-color: rgba(25, 181, 200, .65); box-shadow: inset 0 1px 2px rgba(11, 60, 93, .07), 0 0 0 4px rgba(25, 181, 200, .16);
}
.campo .ayuda { font-weight: 500; font-size: .8rem; color: var(--tinta-3); }
.rejilla-campos { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.rejilla-campos .ancho { grid-column: 1 / -1; }
.casilla { display: flex; align-items: center; gap: 10px; font-weight: 650; color: var(--tinta-2); cursor: pointer; }
.casilla input { width: 20px; height: 20px; accent-color: var(--marca-2); }
.buscador { position: relative; }
.buscador .icono { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
.buscador input { padding-left: 42px; }

/* ------------------------------------------------------------ chips y estados */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--borde); cursor: pointer;
  font-weight: 650; font-size: .87rem; color: var(--tinta-2); background: color-mix(in srgb, var(--tarjeta-fuerte) 70%, transparent);
  transition: all .25s;
}
.chip:hover { border-color: rgba(25, 181, 200, .45); }
.chip[aria-pressed="true"] { color: #fff; border-color: transparent; background: linear-gradient(180deg, #34c3d6, #0a7ea4 55%, #0a6d8f); box-shadow: 0 6px 14px -8px rgba(10, 126, 164, .8); }
.pastilla { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; font-size: .76rem; font-weight: 750; white-space: nowrap; }
.pastilla::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pastilla.disponible { background: var(--bien-fondo); color: var(--bien); }
.pastilla.por_agotar { background: var(--adv-fondo); color: var(--adv); }
.pastilla.agotado { background: var(--mal-fondo); color: var(--mal); }
.pastilla.servicio { background: var(--acento-fondo); color: var(--marca-2); }
.pastilla.anulada { background: var(--mal-fondo); color: var(--mal); }
.pastilla.prueba { background: var(--adv-fondo); color: var(--adv); }

/* ------------------------------------------------------------ tablero */
.saludo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.saludo h1 { margin: 0; }
.aviso-prueba { margin-bottom: 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-color: rgba(232, 162, 59, .5); }
.reponer { margin-bottom: 16px; border-color: rgba(25, 181, 200, .4); box-shadow: inset 0 1px 0 var(--filo), 0 0 0 4px rgba(25, 181, 200, .08), var(--sombra); }
.reponer h2 { display: flex; align-items: center; gap: 8px; }
.reponer.todo-bien { border-color: rgba(40, 170, 110, .4); box-shadow: inset 0 1px 0 var(--filo), var(--sombra); }
.item-fila { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--borde); }
.item-fila:first-of-type { border-top: 0; }
.item-fila .principal { flex: 1; min-width: 0; }
.item-fila .principal b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-fila .principal small { color: var(--tinta-3); font-size: .82rem; }
.item-fila.clic { cursor: pointer; border-radius: 12px; transition: background .25s; }
.item-fila.clic:hover { background: var(--acento-fondo); }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi { padding: 16px; }
.kpi small { display: block; font-size: .76rem; font-weight: 750; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .05em; }
.kpi b { display: block; font-size: 1.55rem; font-weight: 800; line-height: 1.15; margin: 4px 0 2px; color: var(--marca); font-variant-numeric: tabular-nums; }
.kpi b.dest { background: linear-gradient(120deg, var(--marca-2), var(--marca-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi b.neg { color: var(--mal); }
.kpi span { font-size: .84rem; color: var(--tinta-3); }
.dos-col { display: grid; gap: 14px; grid-template-columns: 1fr; }
.barra-fila { margin-bottom: 12px; }
.barra-fila .rotulo { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; margin-bottom: 4px; }
.barra-fila .rotulo span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.barra { height: 10px; border-radius: 99px; background: rgba(11, 60, 93, .09); overflow: hidden; }
.barra i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--marca-3), var(--marca-2)); box-shadow: 0 0 10px rgba(25, 181, 200, .4); transition: width .9s cubic-bezier(.2, .7, .2, 1); }
.barra.verde i { background: linear-gradient(90deg, #35c48b, #17704a); box-shadow: 0 0 10px rgba(40, 170, 110, .4); }
.barra.ambar i { background: linear-gradient(90deg, #f3c26b, #e8a23b); box-shadow: 0 0 10px rgba(232, 162, 59, .4); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .barra { background: rgba(150, 220, 235, .12); } }
.acciones-rapidas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.acciones-rapidas .btn { flex-direction: column; gap: 4px; padding: 12px 8px; font-size: .88rem; }

/* ------------------------------------------------------------ productos */
.cuadro-productos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.prod-tarjeta {
  text-align: left; cursor: pointer; padding: 12px; border-radius: 16px; border: 1px solid var(--borde); color: var(--tinta);
  background: linear-gradient(160deg, var(--tarjeta-fuerte), var(--tarjeta)); box-shadow: inset 0 1px 0 var(--filo), 0 6px 16px -12px rgba(11, 60, 93, .5);
  transition: transform .25s, box-shadow .25s, border-color .25s; display: grid; gap: 4px; align-content: start; min-height: 96px;
}
.prod-tarjeta:hover { transform: translateY(-2px); border-color: rgba(25, 181, 200, .5); }
.prod-tarjeta:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.prod-tarjeta b { font-size: .94rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod-tarjeta .precio { font-weight: 800; color: var(--marca-2); font-variant-numeric: tabular-nums; }
.prod-tarjeta small { color: var(--tinta-3); font-size: .78rem; }
.stock-grande { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--marca); font-variant-numeric: tabular-nums; }
.ficha-cab { display: grid; gap: 14px; }
.datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: .94rem; }
.datos dt { color: var(--tinta-3); font-weight: 650; }
.datos dd { margin: 0; font-weight: 650; }

/* ------------------------------------------------------------ vender */
.vender { display: grid; gap: 14px; }
.carrito { position: relative; }
.carrito-fila { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 0; border-top: 1px solid var(--borde); align-items: center; }
.carrito-fila:first-of-type { border-top: 0; }
.carrito-fila b { overflow: hidden; text-overflow: ellipsis; }
.cantidad { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--borde); border-radius: 99px; padding: 2px; background: color-mix(in srgb, var(--tarjeta-fuerte) 80%, transparent); }
.cantidad button { width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.2rem; font-weight: 800; color: var(--marca-2); background: var(--acento-fondo); }
.cantidad span { min-width: 34px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.total-venta { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 2px dashed var(--borde); margin-top: 6px; }
.total-venta b { font-size: 2rem; font-weight: 800; color: var(--marca-2); font-variant-numeric: tabular-nums; }
.barra-cobrar {
  position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 25; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px 10px 18px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #0b3c5d, #07506f 55%, #0a7ea4);
  box-shadow: 0 18px 36px -14px rgba(11, 60, 93, .8), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.barra-cobrar b { font-size: 1.2rem; }
.barra-cobrar .btn { background: #fff; color: var(--marca-2); box-shadow: none; }
.barra-cobrar .btn::after { display: none; }

/* ------------------------------------------------------------ listas y tablas */
.tabla-env { overflow-x: auto; border-radius: 14px; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #fff; padding: 10px 12px; background: linear-gradient(180deg, #0d5a82, #0b3c5d); white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
th.der, td.der { text-align: right; }
tbody tr { transition: background .2s; }
tbody tr:hover { background: var(--acento-fondo); }
.vacio { border: 1.5px dashed rgba(10, 126, 164, .3); border-radius: 16px; padding: 24px 16px; text-align: center; color: var(--tinta-3); background: color-mix(in srgb, var(--tarjeta-fuerte) 40%, transparent); }
.vacio b { display: block; color: var(--tinta-2); margin-bottom: 4px; }

/* ------------------------------------------------------------ ventanas, avisos */
dialog {
  border: 1px solid var(--filo); border-radius: 24px; padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  color: var(--tinta); background: linear-gradient(160deg, var(--tarjeta-fuerte), var(--tarjeta)); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  box-shadow: var(--sombra-alta); animation: emerger .35s cubic-bezier(.2, .7, .2, 1);
}
dialog::backdrop { background: rgba(4, 26, 40, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dlg-cab { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 6px; }
.dlg-cab h2 { margin: 0; }
.dlg-x { width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.3rem; color: var(--tinta-2); background: var(--acento-fondo); }
.dlg-cuerpo { padding: 8px 20px 12px; overflow: auto; max-height: calc(100dvh - 190px); }
.dlg-pie { display: flex; gap: 10px; justify-content: flex-end; padding: 10px 20px 18px; flex-wrap: wrap; }
.avisos { position: fixed; left: 0; right: 0; top: 12px; z-index: 100; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 12px; }
.aviso { pointer-events: auto; max-width: 520px; padding: 12px 18px; border-radius: 16px; font-weight: 650; color: #fff; background: linear-gradient(135deg, #0b3c5d, #07506f); box-shadow: var(--sombra-alta); animation: emerger .35s both; }
.aviso.mal { background: linear-gradient(135deg, #7a1520, #b4232f); }
.aviso.bien { background: linear-gradient(135deg, #0f5a3a, #17704a); }

/* ------------------------------------------------------------ recibo de caja */
.recibo { background: #fff; color: #0d2a3a; border-radius: 16px; padding: 20px; box-shadow: inset 0 0 0 1px rgba(11, 60, 93, .1); font-size: .92rem; }
.recibo h3 { color: #0b3c5d; margin: 0; font-size: 1.1rem; text-align: center; }
.recibo .centro { color: #3e5f73; font-size: .84rem; }
.recibo .num-recibo { text-align: center; font-weight: 800; color: #0a7ea4; font-size: 1.15rem; margin: 10px 0 2px; }
.recibo hr { border: 0; border-top: 1px dashed #a9c7d3; margin: 12px 0; }
.recibo table { font-size: .88rem; }
.recibo th { background: none; color: #3e5f73; padding: 4px 0; font-size: .72rem; }
.recibo td { padding: 5px 0; border: 0; }
.recibo tbody tr:hover { background: none; }
.recibo .total { display: flex; justify-content: space-between; font-weight: 800; font-size: 1.15rem; }
.recibo .leyenda { font-size: .74rem; color: #6b8798; text-align: center; margin-top: 12px; }
.recibo .pie-angy { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: .72rem; color: #6b8798; }
.recibo .pie-angy img { width: 30px; height: auto; }

/* ------------------------------------------------------------ entrada con Google */
.portada { min-height: 100dvh; display: grid; place-items: center; padding: 20px 16px; }
.portada .vidrio { width: min(460px, 100%); padding: 30px 26px; text-align: center; box-shadow: inset 0 1px 0 var(--filo), var(--sombra-alta); animation: emerger .8s cubic-bezier(.2, .7, .2, 1) both; }
.portada .logo-grande { width: min(220px, 62%); height: auto; margin: 4px auto 6px; display: block; animation: flotar 7s ease-in-out infinite; filter: drop-shadow(0 14px 24px rgba(11, 60, 93, .3)); }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.portada h1 { font-size: 2.2rem; background: linear-gradient(120deg, var(--marca) 10%, var(--marca-2) 60%, var(--marca-3)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 4px; }
.portada .lema { color: var(--tinta-2); font-weight: 650; margin-bottom: 20px; }
.portada .seguro { margin-top: 18px; font-size: .85rem; color: var(--tinta-3); }
.portada .lista-ventajas { text-align: left; margin: 16px 0 22px; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .94rem; color: var(--tinta-2); }
.portada .lista-ventajas li { display: flex; gap: 10px; align-items: flex-start; }
.portada .lista-ventajas li::before { content: '✓'; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; color: #fff; background: linear-gradient(160deg, var(--marca-3), var(--marca-2)); }
.cargando { display: grid; place-items: center; min-height: 60vh; gap: 12px; color: var(--tinta-3); }
.cargando img { width: 90px; animation: respirar 2.4s ease-in-out infinite; }
@keyframes respirar { 0%, 100% { opacity: .55; transform: scale(.97); } 50% { opacity: 1; transform: scale(1); } }
.pie-pagina { text-align: center; font-size: .8rem; color: var(--tinta-3); padding: 8px 16px 0; }

/* ------------------------------------------------------------ pantallas grandes */
@media (min-width: 820px) {
  .nav-sup { display: flex; }
  .nav-inf { display: none; }
  .barra-cobrar { bottom: 18px; left: auto; right: 24px; width: 420px; }
  main { padding-bottom: 60px; }
  .kpis { grid-template-columns: repeat(4, 1fr); }
  .dos-col { grid-template-columns: 1fr 1fr; }
  .vender { grid-template-columns: 1.5fr 1fr; align-items: start; }
  .carrito { position: sticky; top: 84px; }
  .barra-cobrar { display: none; }
  .ficha-cab { grid-template-columns: 1fr 1fr; }
  .marca small { max-width: 30vw; }
}
@media (max-width: 560px) {
  .rejilla-campos { grid-template-columns: 1fr; }
  .cuadro-productos { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------ impresión del recibo */
@media print {
  body { background: #fff; }
  body::before, body::after, .cabecera, .nav-inf, .barra-cobrar, .avisos, .dlg-cab, .dlg-pie, main, .portada { display: none !important; }
  dialog[open] { position: static; width: 100%; max-height: none; border: 0; box-shadow: none; background: #fff; animation: none; }
  dialog::backdrop { display: none; }
  .dlg-cuerpo { max-height: none; padding: 0; overflow: visible; }
  .recibo { box-shadow: none; max-width: 80mm; margin: 0 auto; }
}

/* ------------------------------------------------------------ calma */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------ logo en modo noche: ficha clara para que la J azul se lea */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .marca img,
  :root:not([data-tema="claro"]) .portada .logo-grande,
  :root:not([data-tema="claro"]) .cargando img {
    background: rgba(255, 255, 255, .94); border-radius: 22%; padding: 5px;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .6), inset 0 1px 0 #fff;
  }
  :root:not([data-tema="claro"]) .portada .logo-grande { padding: 12px; border-radius: 28px; }
}

/* En el celular, la barra de cobro flotante no debe tapar el final de la venta. */
main.con-barra { padding-bottom: calc(170px + env(safe-area-inset-bottom)); }
@media (min-width: 820px) { main.con-barra { padding-bottom: 60px; } }
@media print { .dlg-cuerpo .campo { display: none !important; } }

/* ------------------------------------------------------------ fases 2 y 3: compras, informe, escaneo, fotos, IMEI, sin conexión */
.texto-bien { color: var(--bien); font-weight: 700; }
.texto-mal { color: var(--mal); font-weight: 700; }
.grande-total { font-size: 1.6rem; font-weight: 800; color: var(--marca-2); }
.estado-red { border: 0; cursor: pointer; font: inherit; font-size: .76rem; font-weight: 750; padding: 6px 12px; border-radius: 99px; margin-right: 8px; color: var(--adv); background: var(--adv-fondo); }
.estado-red.sin-red { color: var(--mal); background: var(--mal-fondo); }
.pastilla.ped-borrador { background: var(--acento-fondo); color: var(--marca-2); }
.pastilla.ped-enviado { background: rgba(1, 69, 138, .12); color: var(--azul); }
.pastilla.ped-parcial { background: var(--adv-fondo); color: var(--adv); }
.pastilla.ped-recibido { background: var(--bien-fondo); color: var(--bien); }
.pastilla.ped-cancelado { background: var(--mal-fondo); color: var(--mal); }
.ped-fila { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px 10px; align-items: end; padding: 10px 0; border-top: 1px solid var(--borde); }
.ped-fila b { grid-column: 1 / -1; }
.ped-fila:first-child { border-top: 0; }
.precio-prov { width: 130px; flex: none; min-height: 42px; text-align: right; }
.cmp-tarjeta { margin-bottom: 12px; }
.cmp-tarjeta h3 { margin: 0; }
.cmp-fila { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; margin-top: 6px; background: color-mix(in srgb, var(--tarjeta-fuerte) 60%, transparent); }
.cmp-fila.mejor { background: var(--bien-fondo); font-weight: 700; }
.fila-codigo { flex-wrap: nowrap; }
.fila-codigo input { flex: 1; min-width: 0; width: 100%; font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borde); background: color-mix(in srgb, var(--tarjeta-fuerte) 90%, transparent); color: var(--tinta); min-height: 44px; }
.series-venta { grid-column: 1 / -1; display: grid; gap: 6px; padding: 8px 0 2px; }
.recibo .imei { color: #3e5f73; font-size: .78rem; font-variant-numeric: tabular-nums; }
/* visor de la cámara */
.visor { position: relative; border-radius: 18px; overflow: hidden; background: #06202e; aspect-ratio: 4 / 3; }
.visor video { width: 100%; height: 100%; object-fit: cover; display: block; }
.visor-guia { position: absolute; inset: 22% 12%; border: 3px solid rgba(255, 255, 255, .85); border-radius: 16px; box-shadow: 0 0 0 9999px rgba(18, 6, 22, .35); }
/* fotos de referencia y candidatos */
.fotos-fila { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.foto-ref { position: relative; margin: 0; width: 104px; height: 104px; border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); }
.foto-ref img { width: 100%; height: 100%; object-fit: cover; }
.foto-ref .dlg-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; font-size: 1rem; background: rgba(255, 255, 255, .9); }
.foto-nueva { width: 104px; height: 104px; border-radius: 16px; border: 2px dashed rgba(10, 126, 164, .45); background: var(--acento-fondo); color: var(--marca-2); font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 4px; }
.candidatos { display: grid; gap: 10px; }
.candidato { display: flex; gap: 12px; align-items: center; text-align: left; padding: 10px; border-radius: 16px; border: 1px solid var(--borde); background: color-mix(in srgb, var(--tarjeta-fuerte) 80%, transparent); color: var(--tinta); font: inherit; cursor: pointer; }
.candidato:hover { border-color: rgba(25, 181, 200, .55); }
.candidato img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; flex: none; }
.candidato span { display: grid; gap: 2px; }
.candidato small { color: var(--tinta-3); }
.candidato .parecido { color: var(--marca-2); font-weight: 700; }
/* etiquetas */
.etq-fila input { width: 72px; flex: none; text-align: center; min-height: 40px; border-radius: 10px; border: 1px solid var(--borde); font: inherit; background: var(--tarjeta-fuerte); color: var(--tinta); }
#hoja-etiquetas { display: none; }
/* informe */
.inf-cabecera { display: none; align-items: center; gap: 12px; margin-bottom: 12px; }
.inf-bien { border-color: rgba(40, 170, 110, .4); }
.inf-atencion { border-color: rgba(232, 162, 59, .5); }
.inf-hacer { border-color: rgba(25, 181, 200, .4); }
.inf-bien ul, .inf-atencion ul, .inf-hacer ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
@media (max-width: 560px) { .ped-fila { grid-template-columns: 1fr 1fr; } .ped-fila .btn { grid-column: 1 / -1; } }
@media print {
  body.imprimir-informe main { display: block !important; padding: 0; }
  body.imprimir-informe .no-imprimir, body.imprimir-informe .cabecera, body.imprimir-informe .nav-inf { display: none !important; }
  body.imprimir-informe .inf-cabecera { display: flex; }
  body.imprimir-informe .vidrio { box-shadow: none; background: #fff; break-inside: avoid; border-color: #ddd; }
  body.imprimir-informe .kpis { grid-template-columns: repeat(4, 1fr); }
  body.imprimir-informe .dos-col { grid-template-columns: 1fr 1fr; }
  body.imprimir-etiquetas > *:not(#hoja-etiquetas) { display: none !important; }
  body.imprimir-etiquetas #hoja-etiquetas { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 4mm; }
  .etiqueta { border: 1px dashed #999; padding: 3mm; text-align: center; break-inside: avoid; color: #000; font-family: Arial, sans-serif; }
  .etiqueta b { display: block; font-size: 9pt; line-height: 1.15; height: 2.3em; overflow: hidden; }
  .etiqueta .codigo-barras { width: 100%; height: 14mm; display: block; margin: 1mm 0; }
  .etiqueta span { display: block; font-size: 8pt; letter-spacing: .1em; }
  .etiqueta strong { display: block; font-size: 12pt; }
}
.codigo-grande { font-size: 1.8rem; font-weight: 800; letter-spacing: .08em; text-align: center; color: var(--marca-2); padding: 14px; border-radius: 16px; background: var(--acento-fondo); font-variant-numeric: tabular-nums; }
.candidato.probable { border-color: rgba(40, 170, 110, .6); box-shadow: 0 0 0 3px rgba(40, 170, 110, .15); }
.pedidos-tablero { margin-bottom: 16px; border-color: rgba(1, 69, 138, .25); }
td.der, th.der { white-space: nowrap; }
/* importación desde Excel y catálogos grandes */
.imp-paso { padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--tarjeta-fuerte) 60%, transparent); margin-bottom: 8px; }
.imp-resumen { font-size: 1.05rem; margin-bottom: 6px; }
.nota-lista { grid-column: 1 / -1; text-align: center; }
details summary { cursor: pointer; font-weight: 700; color: var(--marca-2); }
.etq-lista { max-height: 46vh; overflow: auto; }
label.btn { cursor: pointer; }

/* ------------------------------------------------------------ equipo, roles, caja por turno, panel de decisiones */
.banner-soporte { position: sticky; top: 0; z-index: 60; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 8px 14px; color: #fff; font-weight: 700; font-size: .9rem; background: linear-gradient(90deg, #01458a, #0b3c5d); }
.pastilla.rol-dueno { background: rgba(232, 162, 59, .2); color: var(--adv); }
.pastilla.rol-administrador { background: rgba(1, 69, 138, .14); color: var(--azul); }
.pastilla.rol-cajero { background: var(--acento-fondo); color: var(--marca-2); }
.avatar.chico-av { width: 42px; height: 42px; flex: none; display: inline-grid; place-items: center; cursor: default; }
.eq-fila.inactivo { opacity: .55; }
.eq-fila small { display: block; }
.meter-eq { flex: 1; min-width: 220px; }
.tabla-permisos td, .tabla-permisos th { vertical-align: middle; }
.tabla-permisos th.centro, .tabla-permisos td.centro { text-align: center; width: 120px; }
.interruptor { position: relative; display: inline-block; width: 46px; height: 26px; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.interruptor::before { content: ''; position: absolute; inset: 0; border-radius: 99px; background: rgba(11, 60, 93, .22); transition: background .25s; }
.interruptor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .25s; }
.interruptor:has(input:checked)::before { background: linear-gradient(90deg, #35c48b, #17704a); }
.interruptor:has(input:checked)::after { transform: translateX(20px); }
.interruptor:has(input:focus-visible) { outline: 3px solid rgba(25, 181, 200, .55); outline-offset: 3px; border-radius: 99px; }
.planes-cmp { display: grid; gap: 14px; grid-template-columns: 1fr; }
.plan-tarjeta h3 { margin-bottom: 4px; }
.plan-tarjeta.actual { border-color: rgba(40, 170, 110, .55); box-shadow: inset 0 1px 0 var(--filo), 0 0 0 3px rgba(40, 170, 110, .12), var(--sombra); }
.precio-plan { margin: 0; font-size: 1.5rem; color: var(--marca-2); }
.beneficios { margin: 8px 0 14px; padding-left: 18px; display: grid; gap: 4px; font-size: .92rem; }
.pin-puntos { display: flex; justify-content: center; gap: 16px; margin: 6px 0 10px; }
.pin-puntos i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--marca-2); transition: background .15s; }
.pin-puntos i.lleno { background: var(--marca-2); }
.pin-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 280px; margin: 10px auto 0; }
.pin-teclado button { min-height: 62px; border-radius: 18px; border: 1px solid var(--borde); font: inherit; font-size: 1.5rem; font-weight: 700; color: var(--marca); cursor: pointer; background: color-mix(in srgb, var(--tarjeta-fuerte) 85%, transparent); box-shadow: inset 0 1px 0 var(--filo); }
.pin-teclado button:active { transform: scale(.96); background: var(--acento-fondo); }
.menu-op { width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--borde); font: inherit; color: inherit; cursor: pointer; }
.turno-form { max-width: 360px; margin: 16px auto 0; text-align: left; }
.precio-linea { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .8rem; font-weight: 700; color: var(--tinta-3); }
.precio-linea input { width: 130px; text-align: right; min-height: 38px; border-radius: 10px; border: 1px solid var(--borde); padding: 4px 10px; font: inherit; background: var(--tarjeta-fuerte); color: var(--tinta); }
/* panel de decisiones */
.grafico { width: 100%; height: auto; display: block; }
.grafico .base { stroke: var(--borde); stroke-width: 1; }
.grafico .eje { fill: var(--tinta-3); font-size: 11px; font-family: inherit; }
.grafico .area { fill: rgba(25, 181, 200, .12); }
.grafico .linea-ventas { fill: none; stroke: var(--marca-2); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.grafico .linea-ganancia { fill: none; stroke: #17a56b; stroke-width: 2.2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.grafico .col { fill: rgba(10, 126, 164, .35); }
.grafico .col.fuerte { fill: var(--marca-2); }
.leyenda-g { display: flex; gap: 14px; align-items: center; font-size: .82rem; color: var(--tinta-3); margin: 2px 0 0; }
.leyenda-g .pt { display: inline-block; width: 14px; height: 4px; border-radius: 3px; }
.leyenda-g .pt.v { background: var(--marca-2); }
.leyenda-g .pt.g { background: #17a56b; }
.panel-decisiones { margin-top: 16px; border-color: rgba(25, 181, 200, .35); }
.decision { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--borde); }
.decision:first-of-type { border-top: 0; }
.decision > div { flex: 1; min-width: 0; }
.decision p { margin: 2px 0 0; color: var(--tinta-2); font-size: .93rem; }
.decision .punto { width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--tinta-3); }
.decision.nivel-alta .punto { background: #e0525f; box-shadow: 0 0 0 4px rgba(224, 82, 95, .18); }
.decision.nivel-media .punto { background: #e8a23b; box-shadow: 0 0 0 4px rgba(232, 162, 59, .2); }
.decision.nivel-ok .punto { background: #17a56b; }
@media (min-width: 820px) { .planes-cmp { grid-template-columns: repeat(3, 1fr); } }
a.item-fila { text-decoration: none; color: inherit; }
/* entrada por escaneo */
.ent-linea { padding: 12px 0; border-top: 1px solid var(--borde); display: grid; gap: 8px; }
.ent-linea:first-child { border-top: 0; }
.ent-linea.nueva { background: linear-gradient(90deg, rgba(232, 162, 59, .1), transparent); border-radius: 14px; padding: 12px; margin-bottom: 6px; }
.ent-cab { display: flex; align-items: center; gap: 10px; }
.ent-cab .principal { flex: 1; min-width: 0; }
.ent-cab .principal small { display: block; color: var(--tinta-3); }
.imei-chip { display: inline-block; padding: 2px 8px; border-radius: 99px; background: var(--acento-fondo); color: var(--marca-2); font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============================================================ 1, 2, 3 por mí: pantallas propias ============================================================ */
main.estrecho, .estrecho { max-width: 560px; margin: 0 auto; }
main.estrecho { padding: 20px 16px 48px; }
.estrecho > .vidrio, .estrecho > section, .estrecho > details { margin-bottom: 14px; }
#principal > .estrecho { padding-bottom: 24px; }
.etq { display: block; font-size: .76rem; font-weight: 750; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .05em; }
.sep { border: 0; border-top: 1px solid var(--borde); margin: 22px 0 16px; }
.formulario { display: grid; gap: 16px; margin-top: 12px; }
.aviso-priv { font-size: .82rem; color: var(--tinta-3); background: var(--acento-fondo); border-radius: 12px; padding: 10px 12px; margin: 0; }
.texto-libre { white-space: pre-line; margin: 0; }
div.campo { display: grid; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--tinta-3); }

/* roles: botones grandes para elegir con el pulgar */
.chips.grande { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chips.grande .chip { justify-content: center; padding: 14px 10px; font-size: 1rem; border-radius: 16px; min-height: 52px; }

/* simulacro programado / en curso en el carnet */
.alerta-sim { border-radius: 22px; padding: 18px; margin-bottom: 14px; box-shadow: var(--sombra); }
.alerta-sim b { display: block; font-size: 1.25rem; margin-bottom: 4px; }
.alerta-sim p { margin: 0 0 10px; }
.alerta-sim.alarma { color: #fff; background: linear-gradient(135deg, #7a1520, #b4232f 55%, #e0525f); animation: latido 1.8s ease-in-out infinite; }
.alerta-sim.alarma .btn { background: #fff; color: #7a1520; box-shadow: none; }
.alerta-sim.alarma .btn::after { display: none; }
.alerta-sim.bien { color: #0f5a3a; background: linear-gradient(135deg, rgba(53, 196, 139, .28), rgba(23, 165, 107, .18)); border: 1px solid rgba(23, 165, 107, .4); }
.alerta-sim.aviso-sim { background: var(--adv-fondo); color: var(--adv); border: 1px solid rgba(232, 162, 59, .45); }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 82, 95, .55), var(--sombra); } 50% { box-shadow: 0 0 0 12px rgba(224, 82, 95, 0), var(--sombra); } }

/* carnet */
.carnet { text-align: center; padding: 22px 20px 20px; border-top: 6px solid var(--marca-2); }
.carnet-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.carnet-ent { font-weight: 750; color: var(--tinta-2); font-size: .9rem; text-align: left; }
.pastilla.rol { background: var(--acento-fondo); color: var(--marca-2); }
.carnet-nombre { font-size: 1.7rem; font-weight: 800; color: var(--marca); line-height: 1.15; }
.carnet-sub { color: var(--tinta-2); font-weight: 650; margin-bottom: 14px; }
.qr-caja { background: #fff; padding: 14px; border-radius: 18px; width: min(260px, 100%); margin: 0 auto 8px; box-shadow: inset 0 0 0 1px rgba(11, 60, 93, .1), 0 8px 22px -14px rgba(11, 60, 93, .5); }
.qr-caja.grande { width: min(340px, 100%); padding: 16px; }
.qr-caja svg { width: 100%; height: auto; display: block; }
.codigo-persona { font-weight: 800; letter-spacing: .18em; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.bloque-info h3 { margin-bottom: 4px; }
.estrecho .bloque-info { margin-bottom: 12px; }

/* llegada al punto de encuentro */
.llegada { text-align: center; padding: 28px 22px; }
.llegada.bien { border-top: 6px solid #17a56b; }
.llegada.mal { border-top: 6px solid #e0525f; }
.gran-ok { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 10px; display: grid; place-items: center; font-size: 3.4rem; font-weight: 800; color: #fff; background: linear-gradient(160deg, #35c48b, #17704a); box-shadow: 0 14px 28px -12px rgba(23, 112, 74, .7); animation: aparece-ok .6s cubic-bezier(.2, .9, .2, 1.2) both; }
.gran-ok.mal { background: linear-gradient(160deg, #e0525f, #b4232f); box-shadow: 0 14px 28px -12px rgba(180, 35, 47, .7); }
@keyframes aparece-ok { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lead { font-size: 1.1rem; }
.tiempo-llegada { font-size: 2.6rem; font-weight: 800; color: var(--marca-2); margin: 6px 0 0; font-variant-numeric: tabular-nums; }

/* jefe: reloj, progreso y conteo a mano */
.jefe-cab h1 { margin: 0; font-size: 1.5rem; }
.reloj-grande { font-size: clamp(3rem, 16vw, 4.6rem); font-weight: 800; text-align: center; letter-spacing: .02em; color: var(--marca-2); font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 10px; }
.cab-sim .reloj-grande { margin: 8px 0; }
.pasos { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 6px; color: var(--tinta-2); }
.llegaron { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 10px; }
.llegaron b { font-size: 2.4rem; font-weight: 800; color: var(--marca); line-height: 1; }
.llegaron span { color: var(--tinta-3); font-weight: 650; }
.paso-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--borde); font-weight: 650; }
.paso-fila:first-of-type { border-top: 0; }
.paso-fila .cantidad button { width: 44px; height: 44px; font-size: 1.5rem; }
.paso-fila .cantidad span { min-width: 54px; font-size: 1.25rem; }
.rejilla-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rejilla-acc .ancho { grid-column: 1 / -1; }
.visor-ult { min-height: 1.6em; font-weight: 700; color: var(--marca-2); margin-top: 6px; }
.qr-cuenta { color: var(--tinta-2); font-variant-numeric: tabular-nums; }

/* panel de Gestión del Riesgo */
.pestanas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 8px; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { flex: none; text-decoration: none; padding: 9px 16px; border-radius: 99px; font-weight: 700; font-size: .92rem; color: var(--tinta-2); border: 1px solid var(--borde); background: color-mix(in srgb, var(--tarjeta-fuerte) 70%, transparent); }
.pestana[aria-current="page"] { color: #fff; border-color: transparent; background: linear-gradient(180deg, #34c3d6, #0a7ea4 55%, #07506f); box-shadow: 0 6px 14px -8px rgba(10, 126, 164, .8); }
.cab-sim { margin-bottom: 14px; }
.cab-sim h1 { margin: 0; }
.edif-rejilla { display: grid; gap: 14px; grid-template-columns: 1fr; }
.edif-card h3 { margin: 0; }
.edif-card.completa { border-left: 6px solid #17a56b; }
.edif-card.evacuando { border-left: 6px solid #e0525f; }
.edif-card.sin_iniciar { border-left: 6px solid rgba(107, 135, 152, .5); }
.mini-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mini-rol { font-size: .8rem; padding: 3px 10px; border-radius: 99px; background: var(--acento-fondo); color: var(--tinta-2); }
.nota { font-style: italic; color: var(--tinta-2); margin: 8px 0 0; font-size: .9rem; }
.edif-fila.inactiva { opacity: .6; }
.edif-fila h3 { margin: 0; }
.jefes { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--borde); }
.enlace-caja { word-break: break-all; padding: 12px 14px; border-radius: 14px; background: var(--acento-fondo); font-weight: 650; color: var(--marca-2); margin: 0 0 12px; }
.estrecho .kpis, .kpis { grid-template-columns: repeat(2, 1fr); }
.kpi b.num.dest { font-size: 1.7rem; }
.pastilla.disponible, .pastilla.agotado, .pastilla.prueba, .pastilla.servicio { white-space: nowrap; }
.saludo { margin-top: 4px; }
.vidrio + .vidrio { margin-top: 14px; }
.edif-rejilla > .vidrio + .vidrio { margin-top: 0; }
.kpis > .vidrio + .vidrio { margin-top: 0; }
.fila .btn.grande { flex: 1; }
@media (min-width: 820px) {
  .edif-rejilla { grid-template-columns: repeat(2, 1fr); }
  .estrecho .kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) { .edif-rejilla { grid-template-columns: repeat(3, 1fr); } }

/* tablas angostas (celular): que quepan sin desplazarse */
.tabla-env th { padding: 10px 8px; font-size: .68rem; letter-spacing: .03em; }
.tabla-env td { padding: 10px 8px; }
.pestana { padding: 8px 13px; font-size: .88rem; }
.pestanas { gap: 5px; }

@media (max-width: 560px) { .tabla-env .oc { display: none; } }
.fila + .kpis { margin-top: 14px; }

@media (max-width: 560px) { .item-fila { flex-wrap: wrap; } .item-fila .principal { flex-basis: 100%; } .item-fila .principal b { white-space: normal; } }