/* Sanet ID — estilo común (inventario de apple.com, Projects/Sanet/inventario-apple).
   Claro y oscuro: el servidor escribe <html data-theme> desde el primer byte y
   common.js guarda el cambio en /preferences/theme. Cada pantalla suma lo suyo
   (inicio.css). El Asistente (asistente.js) trae sus propios estilos. */
:root {
  --page: #ffffff;
  --alt: #f5f5f7;
  --alt-hover: #efeff2;
  --pie: #f5f5f7;
  --ink: #1d1d1f;
  --ink-fuerte: #000000;
  --ink-80: rgba(0, 0, 0, .8);
  --ink-72: rgba(0, 0, 0, .72);
  --ink-56: rgba(0, 0, 0, .56);
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --menu-ink: #333336;
  --hair: #d2d2d7;
  --neutro: #e8e8ed;
  --neutro-hover: #dcdce1;
  --borde-campo: #86868b;
  --campo: rgba(255, 255, 255, .8);
  --action: #1e6bff;          /* azul Sanet en lugar del #0071e3 de Apple */
  --action-hover: #1a5fe6;
  --link: #1557d6;            /* el mismo azul, más oscuro para leer sobre blanco */
  --ok: #1f9d55;
  --ok-fondo: rgba(31, 157, 85, .12);
  --aviso: #b25e00;
  --aviso-fondo: rgba(255, 149, 0, .14);
  --mal: #d70015;
  --mal-fondo: #fff2f2;
  --barra: rgba(255, 255, 255, .8);
  --vidrio: rgba(255, 255, 255, .92);
  --velo: rgba(232, 232, 237, .4);
  --hoja: #ffffff;
  --sombra: 0 10px 40px rgba(0, 0, 0, .14);
  --logo-filtro: brightness(0);
  --logo-opacidad: .88;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.4, 0, .6, 1);
  --gutter-l: max(22px, env(safe-area-inset-left, 0px));
  --gutter-r: max(22px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
/* oscuro: los valores de apple.com sobre negro */
:root[data-theme="dark"] {
  --page: #000000;
  --alt: #1d1d1f;
  --alt-hover: #242426;
  --pie: #161617;
  --ink: #f5f5f7;
  --ink-fuerte: #ffffff;
  --ink-80: rgba(255, 255, 255, .8);
  --ink-72: rgba(255, 255, 255, .72);
  --ink-56: rgba(255, 255, 255, .56);
  --ink-2: #a1a1a6;
  --ink-3: #86868b;
  --menu-ink: #e8e8ed;
  --hair: #424245;
  --neutro: #333336;
  --neutro-hover: #424245;
  --borde-campo: #6e6e73;
  --campo: rgba(255, 255, 255, .04);
  --action: #1e6bff;
  --action-hover: #3d8bff;
  --link: #2997ff;
  --ok: #30d158;
  --ok-fondo: rgba(48, 209, 88, .14);
  --aviso: #ffb340;
  --aviso-fondo: rgba(255, 159, 10, .16);
  --mal: #ff453a;
  --mal-fondo: rgba(255, 69, 58, .14);
  --barra: rgba(22, 22, 23, .8);
  --vidrio: rgba(29, 29, 31, .94);
  --velo: rgba(0, 0, 0, .5);
  --hoja: #1d1d1f;
  --sombra: 0 10px 40px rgba(0, 0, 0, .5);
  --logo-filtro: none;
  --logo-opacidad: 1;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--page); scroll-padding-top: 60px; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 17px/25px var(--text); letter-spacing: -.022em; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--barra); }
a { color: var(--link); text-decoration: none; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2 { text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.envoltura { max-width: 980px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }

/* ---------- barra global: 44 px, vidrio, contenido de 1024 ---------- */
.gnav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--barra); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.gnav-in { max-width: 1024px; height: 44px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); display: flex; align-items: center; gap: 8px; }
.marca { flex: none; display: flex; align-items: center; height: 44px; }
.marca img { display: block; height: 24px; width: auto; filter: var(--logo-filtro); opacity: var(--logo-opacidad); }
.secciones { flex: 1; display: flex; justify-content: center; gap: 2px; min-width: 0; }
.secciones a { font: 400 12px/44px var(--text); letter-spacing: -.01em; color: var(--ink-80); padding: 0 10px; white-space: nowrap; transition: color .32s var(--ease); }
.secciones a:hover, .secciones a.activo { color: var(--ink-fuerte); }
.secciones a.activo { font-weight: 600; }
.secciones a.dev { color: var(--ink-3); }
.acciones { flex: none; display: flex; align-items: center; gap: 4px; }
.icono-btn { width: 36px; height: 36px; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; color: var(--ink-80); cursor: pointer; transition: color .32s var(--ease), background .1s linear; }
.icono-btn:hover { color: var(--ink-fuerte); background: var(--neutro); }
.icono-btn svg { width: 16px; height: 16px; }
.menu-btn { display: none; }
.cuenta { position: relative; margin-left: 4px; }
.yo { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--ink); color: var(--page); font: 600 12px/1 var(--text); cursor: pointer; }
.cuenta-menu { position: absolute; right: 0; top: 40px; width: 250px; padding: 16px; border-radius: 18px; background: var(--vidrio); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--sombra), inset 0 0 0 .5px var(--hair); display: flex; flex-direction: column; gap: 4px; }
.cuenta-menu b { font: 600 17px/21px var(--text); }
.cuenta-menu > span { font: 400 12px/16px var(--text); letter-spacing: -.01em; color: var(--ink-2); margin-bottom: 8px; }
.cuenta-menu a { font: 400 14px/20px var(--text); letter-spacing: -.016em; padding: 9px 0; border-top: 1px solid var(--hair); }
.cuenta-menu a:hover { text-decoration: underline; }

/* buscador: se despliega bajo la barra, como el de apple.com */
.buscar { border-top: 1px solid var(--hair); }
.buscar-in { max-width: 692px; margin: 0 auto; padding: 18px var(--gutter-r) 22px var(--gutter-l); display: flex; align-items: center; gap: 12px; color: var(--ink-2); }
.buscar-in svg { width: 20px; height: 20px; flex: none; }
.buscar input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 600 24px/32px var(--display); letter-spacing: .009em; color: var(--menu-ink); -webkit-appearance: none; appearance: none; }
.buscar input::placeholder { color: var(--ink-3); }

/* menú del teléfono: pantalla completa, enlaces de 28 px */
.menu-tel { position: fixed; inset: calc(48px + env(safe-area-inset-top, 0px)) 0 0; z-index: 45; background: var(--page); padding: 20px max(40px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(40px, env(safe-area-inset-left, 0px)); overflow-y: auto; display: flex; flex-direction: column; gap: 28px; }
.menu-tel nav { display: flex; flex-direction: column; gap: 6px; }
.menu-tel nav a { font: 600 28px/36px var(--display); letter-spacing: .007em; color: var(--menu-ink); }
.menu-tel nav a.dev { color: var(--ink-3); }
.menu-tel nav a.activo { color: var(--link); }
.menu-tel-pie { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.menu-tel-pie a, .menu-tel-pie button { font: 600 17px/21px var(--text); color: var(--menu-ink); border: 0; background: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; }
.menu-tel-pie .nav-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; }
.menu-tel-pie .nav-icon svg { width: 18px; height: 18px; }
.menu-tel-pie > span { font: 400 12px/16px var(--text); color: var(--ink-2); }

@media (max-width: 833px) {
  .gnav-in { height: 48px; }
  .marca { height: 48px; }
  .secciones { display: none; }
  .acciones { margin-left: auto; }
  .menu-btn { display: grid; }
  .cuenta, .acciones .tema-btn { display: none; }
}

/* ---------- franja, avisos y encabezado ---------- */
.franja { text-align: center; font: 400 14px/20px var(--text); letter-spacing: -.016em; color: var(--ink-72); padding: 14px var(--gutter-r) 14px var(--gutter-l); }
.franja i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 8px; vertical-align: 1px; box-shadow: 0 0 0 3px var(--ok-fondo); }
.franja i.revisando { background: var(--ink-3); box-shadow: none; animation: parpadeo 1s var(--ease) infinite alternate; }
.franja i.mal { background: var(--mal); box-shadow: 0 0 0 3px var(--mal-fondo); }
.franja button { border: 0; background: none; padding: 0; color: var(--link); cursor: pointer; font: inherit; }
.franja button::after { content: " ›"; }
.franja button:hover { text-decoration: underline; }
@keyframes parpadeo { to { opacity: .35; } }

.aviso-ok, .aviso-error { max-width: 980px; margin: 8px auto; padding: 12px 16px; border-radius: 12px; font: 400 14px/20px var(--text); letter-spacing: -.016em; text-align: center; }
.aviso-ok { background: var(--ok-fondo); color: var(--ok); }
.aviso-error { background: var(--mal-fondo); color: var(--mal); }

.heroe { text-align: center; padding: 40px var(--gutter-r) 44px var(--gutter-l); }
.heroe h1 { font: 600 56px/60px var(--display); letter-spacing: -.005em; }
.heroe p { font: 400 28px/32px var(--display); letter-spacing: .007em; margin-top: 8px; color: var(--ink-2); }
.heroe p button { border: 0; background: none; padding: 0; font: inherit; letter-spacing: inherit; color: var(--link); cursor: pointer; }
.heroe p button::after { content: " ›"; }
.heroe p button:hover { text-decoration: underline; }
.heroe .botones { margin-top: 24px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ---------- botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 11px 21px; border-radius: 980px; border: 1px solid transparent; background: var(--action); color: #fff; font: 400 17px/1 var(--text); letter-spacing: -.022em; white-space: nowrap; cursor: pointer; transition: background .1s linear, color .1s linear; }
.boton:hover { background: var(--action-hover); text-decoration: none; }
.boton svg { width: 16px; height: 16px; }
.boton--chico { height: 32px; padding: 6px 14px; font-size: 14px; letter-spacing: -.016em; }
.boton--sec { background: transparent; color: var(--link); border-color: var(--link); }
.boton--sec:hover { background: var(--link); color: #fff; }
.boton--gris { background: var(--neutro); color: var(--ink); }
.boton--gris:hover { background: var(--neutro-hover); }
.boton--peligro { background: transparent; color: var(--mal); border-color: var(--hair); }
.boton--peligro:hover { background: var(--mal-fondo); }
.boton--bien { background: transparent; color: var(--ok); border-color: var(--hair); }
.boton--bien:hover { background: var(--ok-fondo); }
.boton--formulario { width: 100%; height: 56px; border-radius: 12px; padding: 17px 30px; }

/* ---------- campos: 56 px, radio 12, como «Estado de pedido» ---------- */
.campo { display: block; position: relative; }
.campo > span { display: block; font: 400 12px/16px var(--text); letter-spacing: -.01em; color: var(--ink-2); margin: 0 0 6px 2px; }
.campo input:not([type=checkbox]), .campo select { width: 100%; height: 56px; border-radius: 12px; border: 1px solid var(--borde-campo); background: var(--campo); padding: 0 16px; font: 400 17px var(--text); letter-spacing: -.022em; color: var(--ink); -webkit-appearance: none; appearance: none; transition: border-color .1s linear, box-shadow .1s linear; }
.campo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; padding-right: 44px; }
.campo input::placeholder { color: var(--ink-3); }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }
.campo small { display: block; font: 400 12px/16px var(--text); letter-spacing: -.01em; color: var(--ink-2); margin: 6px 2px 0; }
.campo .ojo { position: absolute; right: 8px; bottom: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.campo .ojo:hover { background: var(--neutro); }
.campo .ojo svg { width: 18px; height: 18px; }
.marcar { display: inline-flex; align-items: center; gap: 10px; font: 400 14px/20px var(--text); letter-spacing: -.016em; cursor: pointer; }
.marcar input { width: 20px; height: 20px; accent-color: var(--action); margin: 0; }

/* ---------- pastillas ---------- */
.pastilla { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 980px; background: var(--neutro); color: var(--ink); font: 400 12px/1 var(--text); letter-spacing: -.01em; white-space: nowrap; }
.pastilla--azul { background: rgba(30, 107, 255, .12); color: var(--link); }
.pastilla--aviso { background: var(--aviso-fondo); color: var(--aviso); }
.pastilla--ok { background: var(--ok-fondo); color: var(--ok); }
.pastilla--mal { background: var(--mal-fondo); color: var(--mal); }
.pastilla--oscura { background: var(--ink); color: var(--page); }
.pastilla i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- tabla: el patrón del comparador ---------- */
.tabla-caja { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font: 400 14px/20px var(--text); letter-spacing: -.016em; }
.tabla th { text-align: left; font: 600 12px/16px var(--text); letter-spacing: 0; color: var(--ink-2); padding: 0 16px 12px 0; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.tabla td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.tabla td b { font-weight: 600; }
.tabla .tenue { display: block; font-size: 12px; line-height: 16px; color: var(--ink-2); margin-top: 2px; }
.tabla .apps { display: flex; flex-wrap: wrap; gap: 4px; max-width: 360px; }
.tabla .acciones-fila { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.tabla .acciones-fila form { margin: 0; }

/* ---------- hoja (modal) ---------- */
.velo { position: fixed; inset: 0; z-index: 70; background: var(--velo); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: calc(40px + env(safe-area-inset-top, 0px)) 16px calc(40px + env(safe-area-inset-bottom, 0px)); }
.hoja { width: 100%; max-width: 640px; background: var(--hoja); border-radius: 18px; box-shadow: var(--sombra), inset 0 0 0 .5px var(--hair); padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.hoja h2 { font: 600 28px/32px var(--display); letter-spacing: .007em; }
.hoja .fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hoja .pie-hoja { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.hoja .ayuda { font: 400 12px/16px var(--text); letter-spacing: -.01em; color: var(--ink-2); margin: 0 2px; }
.etiqueta { display: block; font: 400 12px/16px var(--text); letter-spacing: -.01em; color: var(--ink-2); margin: 0 0 8px 2px; }

/* casillas de apps */
.casillas-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.casilla-app { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--hair); cursor: pointer; transition: border-color .1s linear, background .1s linear; }
.casilla-app:has(input:checked) { border-color: var(--action); background: rgba(30, 107, 255, .06); }
.casilla-app input { width: 18px; height: 18px; accent-color: var(--action); margin: 0; flex: none; }
.casilla-app .ico { width: 22px; height: 22px; color: var(--c, var(--ink-2)); flex: none; }
.casilla-app .ico svg { width: 22px; height: 22px; }
.casilla-app .nombre { flex: 1; min-width: 0; font: 400 14px/18px var(--text); letter-spacing: -.016em; }
.casilla-app select { height: 28px; border-radius: 980px; border: 1px solid var(--hair); background: var(--page); padding: 0 10px; font: 400 12px var(--text); color: var(--ink); }
.casillas-apps.todo .casilla-app { opacity: .6; pointer-events: none; }

/* ---------- pie ---------- */
.pie { background: var(--pie); margin-top: 72px; }
.pie-in { max-width: 980px; margin: 0 auto; padding: 20px var(--gutter-r) calc(100px + env(safe-area-inset-bottom, 0px)) var(--gutter-l); }
.pie p { font: 400 12px/16px var(--text); letter-spacing: -.01em; color: var(--ink-56); margin-bottom: 6px; }
.pie hr { border: 0; border-top: 1px solid var(--hair); margin: 12px 0; }

/* ---------- login ---------- */
.login { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.login-arriba { display: flex; justify-content: flex-end; padding: calc(12px + env(safe-area-inset-top, 0px)) var(--gutter-r) 0 var(--gutter-l); }
.login-centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px var(--gutter-r) 48px var(--gutter-l); }
.login-logo { height: 30px; width: auto; filter: var(--logo-filtro); opacity: var(--logo-opacidad); margin-bottom: 36px; }
.login h1 { font: 600 40px/44px var(--display); text-align: center; }
.login .lema { font: 400 21px/25px var(--display); letter-spacing: .011em; color: var(--ink-2); text-align: center; margin-top: 8px; }
.login form { width: 100%; max-width: 420px; margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.login .aviso-error { margin: 24px 0 0; width: 100%; max-width: 420px; }
.login-pie { text-align: center; font: 400 12px/16px var(--text); color: var(--ink-56); padding: 0 var(--gutter-r) calc(24px + env(safe-area-inset-bottom, 0px)) var(--gutter-l); }

@media (max-width: 1068px) {
  .heroe h1 { font-size: 48px; line-height: 52px; letter-spacing: -.003em; }
}
@media (max-width: 734px) {
  .heroe { padding-block: 28px 32px; }
  .heroe h1 { font-size: 40px; line-height: 44px; letter-spacing: 0; }
  .heroe p { font-size: 21px; line-height: 25px; }
  .buscar input { font-size: 21px; }
  .hoja { padding: 24px 20px; }
  .hoja .fila, .casillas-apps { grid-template-columns: minmax(0, 1fr); }
  /* la tabla se apila: una persona por bloque, acciones a la derecha */
  .tabla-caja { overflow: visible; }
  .tabla thead { display: none; }
  .tabla, .tabla tbody { display: block; }
  .tabla tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
  .tabla td { display: block; grid-column: 1; padding: 3px 0; border: 0; min-width: 0; }
  .tabla td:last-child { grid-column: 2; grid-row: 1 / span 6; align-self: start; }
  .tabla .acciones-fila { flex-direction: column; align-items: flex-end; }
  .login h1 { font-size: 32px; line-height: 36px; }
  .login .lema { font-size: 19px; line-height: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* oscuro con el fondo azul de los paneles de Sanet (opción A, 2026-10-21):
   exactamente el de TR-069 (tokens.css): negro puro con el brillo azul arriba.
   El brillo va en una capa fija aparte, como en TR-069: con background-attachment
   fixed el navegador repintaba toda la pantalla en cada paso del scroll.
   Solo el fondo: los cuadros, la letra y las medidas no cambian. */
:root[data-theme="dark"] body { background: transparent; }
:root[data-theme="dark"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at top, rgba(30, 107, 255, .18) 0%, transparent 60%); transform: translateZ(0); }