/* La página del celular del socio (26-oct-2026, vuelta I2b): la misma guía de diseño que la app (ARQUITECTURA, «Guía de diseño»):
   formal y al estilo Apple; nada flotando (lo que se toca, como botón; el texto suelto, en su caja); lo principal relleno en el azul
   de Cotejo y lo secundario, píldora con contorno; los colores dicen lo mismo que en la app (verde terminado, azul te toca, amarillo
   espera, rojo falló); íconos de línea, en vector. Hecha para 390 px de ancho, de día y de noche. */
:root { --ink:#0A0B0E; --ink2:rgba(10,11,14,.7); --ink3:rgba(10,11,14,.56); --fondo:#EEF3FB; --hoja:#FFFFFF; --hoja2:#F6F9FE; --hair:rgba(10,11,14,.12);
  --chip:rgba(10,11,14,.05); --acento:#3563F0; --acento-vidrio:linear-gradient(150deg, rgba(41,77,187,.96), rgba(41,77,187,.86)); --acento-texto:#1D4ED8;
  --verde:#2BB673; --azul:#3563F0; --amarillo:#F0B90B; --rojo:#A8201A; --rojo-punto:#E5484D; --gris:rgba(10,11,14,.42); --okbg:rgba(43,182,115,.16);
  --azulbg:rgba(53,99,240,.1); --azularo:rgba(53,99,240,.28); --warnchip:rgba(255,204,51,.55); --warnaro:rgba(214,150,0,.55); --rojobg:rgba(232,72,60,.13);
  --sombra:0 8px 26px rgba(20,40,80,.1); --ok-texto:#0E6A3A; --okaro:rgba(43,182,115,.4); color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="dia"]) { --ink:#FFFFFF; --ink2:rgba(255,255,255,.76); --ink3:rgba(255,255,255,.6); --fondo:#050B1E;
  --hoja:#111829; --hoja2:#0C1222; --hair:rgba(255,255,255,.16); --chip:rgba(255,255,255,.08); --acento-texto:#A9C1FF; --verde:#30D158; --azul:#7C9BFF;
  --amarillo:#FFD43B; --rojo:#FFB4AB; --rojo-punto:#FF6B6B; --gris:rgba(255,255,255,.45); --okbg:rgba(124,240,180,.14); --azulbg:rgba(150,175,255,.14);
  --azularo:rgba(150,175,255,.3); --warnchip:rgba(255,212,59,.24); --warnaro:rgba(255,212,59,.5); --rojobg:rgba(255,120,110,.16); --sombra:0 10px 30px rgba(0,0,0,.45); --ok-texto:#7CF0B4; --okaro:rgba(124,240,180,.35); color-scheme: dark; } }
:root[data-tema="noche"] { --ink:#FFFFFF; --ink2:rgba(255,255,255,.76); --ink3:rgba(255,255,255,.6); --fondo:#050B1E; --hoja:#111829; --hoja2:#0C1222;
  --hair:rgba(255,255,255,.16); --chip:rgba(255,255,255,.08); --acento-texto:#A9C1FF; --verde:#30D158; --azul:#7C9BFF; --amarillo:#FFD43B; --rojo:#FFB4AB;
  --rojo-punto:#FF6B6B; --gris:rgba(255,255,255,.45); --okbg:rgba(124,240,180,.14); --azulbg:rgba(150,175,255,.14); --azularo:rgba(150,175,255,.3);
  --warnchip:rgba(255,212,59,.24); --warnaro:rgba(255,212,59,.5); --rojobg:rgba(255,120,110,.16); --sombra:0 10px 30px rgba(0,0,0,.45); --ok-texto:#7CF0B4;
  --okaro:rgba(124,240,180,.35); color-scheme: dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--fondo); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif; font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; min-height: 100vh; }
.app { max-width: 560px; margin: 0 auto; min-height: 100vh; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* La barra de arriba: regresar, la marca y lo de la derecha */
.barra { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  background: var(--fondo); border-bottom: 1px solid var(--hair); }
.marca { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.logo-fondo { fill: var(--acento); }
.logo-frente { stroke: #FFFFFF; }
.barra-derecha { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); }
.atras { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 6px 12px 6px 8px; border: none; border-radius: 999px; background: var(--chip);
  color: var(--acento-texto); font: inherit; font-size: 15px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--hair); }
.atras:not([hidden]) + .marca { display: none; }
.flecha-izq { width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--flecha-izq) center / contain no-repeat; mask: var(--flecha-izq) center / contain no-repeat; flex: none; }
:root { --flecha-izq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }

main { padding: 16px; }
.pantalla { display: flex; flex-direction: column; gap: 14px; }
.titulo-pantalla { margin: 2px 2px 0; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
h1 { margin: 0; font-size: 30px; line-height: 1.1; letter-spacing: -0.03em; }
h2 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.entrada { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink2); }
.nota { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink2); }
.nota.centrada, .centrada { text-align: center; }
.tarjeta, .caja { background: var(--hoja); border-radius: 22px; padding: 18px; box-shadow: var(--sombra), inset 0 0 0 1px var(--hair); display: flex; flex-direction: column; gap: 12px; }
.tarjeta.centrada { align-items: center; padding: 28px 20px; }
.caja.confirmar { background: var(--azulbg); box-shadow: inset 0 0 0 1px var(--azularo); }
.mensaje { margin: 0; min-height: 0; font-size: 14px; color: var(--ink2); }
.mensaje:empty { display: none; }
.mensaje.es-error { color: var(--rojo); }
.pasos { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }

/* Botones: lo principal relleno en azul; lo secundario, píldora con contorno; ningún control del sistema a la vista */
.press { transition: transform .4s cubic-bezier(.34,1.56,.64,1), filter .2s; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.press:active { transform: scale(.95); }
.boton-principal { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 13px 24px; border: none; border-radius: 999px;
  background: var(--acento-vidrio); color: #FFFFFF; font: inherit; font-size: 17px; font-weight: 600; box-shadow: 0 10px 26px rgba(53,99,240,.3), inset 0 1px 1px rgba(255,255,255,.5); }
.boton-principal:disabled { opacity: .45; }
.boton-vidrio { min-height: 44px; padding: 10px 18px; border: none; border-radius: 999px; background: var(--chip); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--hair); }
.boton-texto { min-height: 40px; padding: 8px 16px; border: none; border-radius: 999px; background: transparent; color: var(--acento-texto); font: inherit; font-size: 15px;
  font-weight: 600; box-shadow: inset 0 0 0 1px var(--azularo); }
.boton-texto.peligro { color: var(--rojo); box-shadow: inset 0 0 0 1px var(--rojo-punto); }
.acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; }
.acciones.columna { flex-direction: column; align-items: stretch; }
.acciones.columna > * { width: 100%; }
.tarjeta > .boton-principal { width: 100%; }

/* Las pastillas de color: el punto con su aro, y el texto */
.pastillas { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--chip);
  color: var(--ink2); box-shadow: inset 0 0 0 1px var(--hair); white-space: nowrap; }
.chip > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gris); box-shadow: 0 0 0 3px var(--chip); }
.chip.ok { background: var(--okbg); color: var(--ok-texto); box-shadow: inset 0 0 0 1px var(--okaro); }
.chip.ok > i { background: var(--verde); box-shadow: 0 0 0 3px var(--okbg); }
.chip.azul { background: var(--azulbg); color: var(--acento-texto); box-shadow: inset 0 0 0 1px var(--azularo); }
.chip.azul > i { background: var(--azul); box-shadow: 0 0 0 3px var(--azularo); }
.chip.warn { background: var(--warnchip); color: var(--ink); box-shadow: inset 0 0 0 1px var(--warnaro); }
.chip.warn > i { background: var(--amarillo); box-shadow: 0 0 0 3px var(--warnaro); }
.chip.rojo { background: var(--rojobg); color: var(--rojo); box-shadow: inset 0 0 0 1px var(--rojo-punto); }
.chip.rojo > i { background: var(--rojo-punto); box-shadow: 0 0 0 3px var(--rojobg); }

/* Las listas: cada renglón en su caja, lo que se toca con su flecha */
.lista { display: flex; flex-direction: column; gap: 10px; }
.fila { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 18px; background: var(--hoja); box-shadow: var(--sombra), inset 0 0 0 1px var(--hair);
  border: none; color: inherit; font: inherit; text-align: left; width: 100%; }
.fila.tocable { position: relative; padding-right: 38px; }
.fila.tocable::after { content: ""; position: absolute; right: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: var(--ink3);
  -webkit-mask: var(--flecha) center / contain no-repeat; mask: var(--flecha) center / contain no-repeat; }
.fila strong { font-size: 16px; line-height: 1.35; }
.fila .detalle { font-size: 14px; color: var(--ink2); line-height: 1.45; }
.fila .acciones { justify-content: flex-start; }
.encabezado-lista { margin: 8px 2px 0; font-size: 13px; font-weight: 650; color: var(--ink3); text-transform: none; }
.punto-vivo { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--gris); box-shadow: 0 0 0 3px var(--chip); }
.punto-vivo.si { background: var(--verde); box-shadow: 0 0 0 3px var(--okbg); }
.linea-quien { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink2); }
.letrero { flex-direction: row; align-items: center; gap: 10px; padding: 12px 16px; font-size: 14px; color: var(--ink2); }

/* Las pestañas de una auditoría (opciones en su riel, la elegida rellena en azul) */
.segmento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 999px; background: var(--chip); box-shadow: inset 0 0 0 1px var(--hair); }
.segmento button { min-height: 36px; border: none; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--hair); }
.segmento button[aria-selected="true"] { background: var(--acento-vidrio); color: #FFFFFF; box-shadow: none; }

/* «¿Cómo funciona?»: plegado, con su flecha en vector */
.como-funciona { border-radius: 16px; background: var(--hoja2); box-shadow: inset 0 0 0 1px var(--hair); }
.como-funciona summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 15px; font-weight: 600; color: var(--acento-texto); cursor: pointer; }
.como-funciona summary::-webkit-details-marker { display: none; }
.como-funciona summary::before { content: ""; flex: none; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--flecha) center / contain no-repeat;
  mask: var(--flecha) center / contain no-repeat; transition: transform .2s; }
.como-funciona[open] summary::before { transform: rotate(90deg); }
.como-cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; }

/* La cámara para leer el código */
.camara { position: relative; aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; background: #000000; box-shadow: var(--sombra); }
.camara video { width: 100%; height: 100%; object-fit: cover; }
.marco { position: absolute; inset: 18%; border-radius: 22px; box-shadow: 0 0 0 2000px rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.9); }

/* El papel: sus páginas, una debajo de otra, que se agrandan con dos dedos */
.paginas { display: flex; flex-direction: column; gap: 10px; }
.paginas img { display: block; width: 100%; height: auto; border-radius: 10px; background: #FFFFFF; box-shadow: var(--sombra), inset 0 0 0 1px var(--hair); touch-action: pinch-zoom pan-y; }
.pie-papel { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom)); padding: 10px; border-radius: 999px; background: var(--hoja); box-shadow: var(--sombra), inset 0 0 0 1px var(--hair); justify-content: center; }
.pie-papel:empty { display: none; }

/* Una nota de revisión */
.nota-texto { gap: 10px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.nota-texto h2, .nota-texto h3, .nota-texto h4 { margin: 6px 0 0; font-size: 17px; }
.nota-texto p, .nota-texto ul { margin: 0; }
.nota-texto ul { padding-left: 20px; }
.nota-texto .tabla { overflow-x: auto; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair); }
.nota-texto table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.nota-texto td { padding: 6px 8px; border-bottom: 1px solid var(--hair); vertical-align: top; }

textarea { width: 100%; resize: none; font: inherit; font-size: 16px; line-height: 1.5; padding: 12px 14px; border-radius: 16px; border: none; background: var(--hoja); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair); }
textarea:focus { outline: 2px solid var(--acento); outline-offset: 2px; }

/* El candado y los íconos de línea, en vector */
.candado, .icono, .icono-compartir { display: inline-block; flex: none; background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.candado { width: 48px; height: 48px; color: var(--acento); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.icono-compartir { width: 16px; height: 16px; vertical-align: -2px; color: var(--acento-texto); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M8 7l4-4 4 4'/%3E%3Cpath d='M6 11v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M8 7l4-4 4 4'/%3E%3Cpath d='M6 11v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8'/%3E%3C/svg%3E"); }
.icono { width: 22px; height: 22px; }
.i-lista { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M8 6h12M8 12h12M8 18h12'/%3E%3Ccircle cx='4' cy='6' r='1'/%3E%3Ccircle cx='4' cy='12' r='1'/%3E%3Ccircle cx='4' cy='18' r='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M8 6h12M8 12h12M8 18h12'/%3E%3Ccircle cx='4' cy='6' r='1'/%3E%3Ccircle cx='4' cy='12' r='1'/%3E%3Ccircle cx='4' cy='18' r='1'/%3E%3C/svg%3E"); }
.i-decisiones { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='4'/%3E%3Cpath d='M8.5 12.3l2.4 2.4 4.6-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='4'/%3E%3Cpath d='M8.5 12.3l2.4 2.4 4.6-5'/%3E%3C/svg%3E"); }
.i-celular { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.5'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.5'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E"); }

/* Las pestañas de abajo */
.pestanas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: 560px; margin: 0 auto;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--hoja); border-top: 1px solid var(--hair); }
.pestanas button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; border: none; border-radius: 14px; background: transparent;
  color: var(--ink3); font: inherit; font-size: 12px; font-weight: 600; }
.pestanas button[aria-current="page"] { color: var(--acento-texto); background: var(--azulbg); box-shadow: inset 0 0 0 1px var(--azularo); }
.cuenta { position: absolute; top: 4px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--amarillo); color: #0A0B0E;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--hoja); }
.version { text-align: center; }