/* ============================================================
   INTERVELOZ — PORTAL DE CLIENTE
   portal.css — estilos propios de /cliente/*.html
   Se carga DESPUÉS de ../css/style.css: reutiliza los tokens
   (:root), el reset, la tipografía, los botones .btn y las
   reglas de accesibilidad (focus-visible, reduced-motion) del
   sitio público. Acá solo van los componentes nuevos del portal.

   Decisión de diseño (reportada a Claudius III): este portal
   prioriza la heurística de usabilidad para un público con baja
   alfabetización digital por encima de los efectos de marketing
   del sitio público (parallax, cursor custom, botones magnéticos,
   scroll reveals). Sigue siendo "Fibra Viva": dark-dominant,
   glow, profundidad — pero sin movimiento que un usuario mayor
   en un celular de gama baja, con internet rural, no necesita
   para completar un trámite. Ver 04-principios-rectores: la
   heurística de accesibilidad/usabilidad gana sobre el blueprint
   cuando hay conflicto.
   ============================================================ */

/* ── [hidden] gana siempre ───────────────────────────────────
   El JS del portal muestra y esconde bloques con el atributo
   `hidden` (elCargando.hidden = true, etc.). Cualquier regla de
   este archivo que declare `display: flex/grid/block` sobre esos
   mismos elementos le gana al `[hidden] { display: none }` que
   trae el navegador, y el bloque queda visible aunque el JS lo
   haya ocultado — fue exactamente lo que pasó con el spinner
   "Buscando tu cuenta...", que se quedaba encima del panel ya
   cargado. Esta regla lo corrige de una vez para todo el portal. */
[hidden] {
  display: none !important;
}

/* ── Estructura general ─────────────────────────────────────── */
.portal-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem 3rem;
}

.portal-header {
  width: 100%;
  max-width: 480px;
  display: flex;
  justify-content: center;
  padding: 1rem 0 1.5rem;
}

.portal-logo-link { display: inline-flex; }
.portal-logo-img {
  height: 56px;
  width: auto;
  display: block;
}

.portal-main {
  width: 100%;
  max-width: 480px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Admin es más denso: contenedor más ancho */
.portal-main--admin {
  max-width: 900px;
}

/* ── Tarjeta principal (glass sobre fondo dark, no sobre foto) ── */
.portal-card {
  position: relative;
  background: rgba(17, 30, 58, 0.82); /* deep-blueprint con alpha */
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--c-hairline-yellow);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-lg), var(--glow-fiber-blue);
}

@media (min-width: 480px) {
  .portal-card { padding: 2.5rem 2.25rem; }
}

.portal-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 6vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: 0.6rem;
}

.portal-subtitle {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--c-ink-white-70);
  margin-bottom: 1.75rem;
  max-width: 42ch;
}

/* ── Campo de teléfono (paso 1) ──────────────────────────────── */
.portal-field { margin-bottom: 1.5rem; }

.portal-label {
  display: block;
  font-weight: 700;
  font-size: 1.0625rem;
  margin-bottom: 0.6rem;
}

.telefono-group {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}

.telefono-prefijo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  min-height: 60px;
  background: var(--c-midnight-hull);
  border: 1px solid var(--c-hairline-yellow);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--c-ink-white-70);
  flex-shrink: 0;
}

.telefono-input {
  flex: 1;
  min-width: 0;
  min-height: 60px;
  padding: 0 1.1rem;
  background: var(--c-midnight-hull);
  border: 1px solid var(--c-hairline-yellow);
  border-radius: var(--radius-md);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.telefono-input::placeholder { color: var(--c-ink-white-40); font-weight: 400; }

.telefono-input:focus-visible,
.telefono-input:focus {
  outline: none;
  border-color: var(--c-yellow);
  box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.18);
}

/* ── Mensajes de error/ayuda — nunca solo color ──────────────── */
.portal-mensaje {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  font-size: 1rem;
  line-height: 1.5;
}

.portal-mensaje svg { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; }

.portal-mensaje--error {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: #FFD1D1;
}

.portal-mensaje--error svg { color: #F87171; }

.portal-mensaje--ok {
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.4);
  color: #D5FFE4;
}

.portal-mensaje--ok svg { color: #4ADE80; }

.portal-mensaje[hidden] { display: none; }

/* ── Botones grandes de portal (mínimo 56px, texto grande) ──── */
.btn-portal {
  width: 100%;
  min-height: 60px;
  font-size: 1.15rem;
  padding: 1rem 1.5rem;
  gap: 0.75rem;
  /* El .btn del sitio público trae white-space: nowrap. En un celular
     angosto "Enviar código por WhatsApp" no entra en una línea, el
     contenido desbordaba y el ícono terminaba pintado FUERA del borde
     izquierdo de la pastilla. Acá el texto puede bajar a dos líneas y
     el botón crece de alto, que para este público es mejor que achicar
     la letra. */
  white-space: normal;
  text-wrap: balance;
  height: auto;
}

.btn-portal svg { width: 26px; height: 26px; flex-shrink: 0; }

/* el texto es el que cede espacio, nunca el ícono */
.btn-portal .btn-texto { min-width: 0; }

.btn-portal[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Spinner de estado de carga dentro del botón */
.btn-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(17, 30, 58, 0.35);
  border-top-color: var(--c-blue-dark);
  border-radius: 50%;
  animation: portal-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes portal-spin {
  to { transform: rotate(360deg); }
}

/* ── Link discreto de ayuda ──────────────────────────────────── */
.portal-ayuda {
  display: block;
  text-align: center;
  margin-top: 1.75rem;
  font-size: 1rem;
  color: var(--c-ink-white-70);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.portal-ayuda:hover { color: var(--c-yellow); }

.portal-ayuda-secundaria {
  display: block;
  text-align: center;
  margin-top: 0.9rem;
  font-size: 0.9375rem;
  color: var(--c-ink-white-70);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.portal-ayuda-secundaria[disabled],
.portal-ayuda-secundaria.deshabilitado {
  color: var(--c-ink-white-40);
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}

/* ── Banner modo demo ─────────────────────────────────────────── */
.banner-demo {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: rgba(255, 193, 7, 0.14);
  border: 1px solid rgba(255, 193, 7, 0.45);
  color: var(--c-paper-bone);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.banner-demo svg { width: 22px; height: 22px; color: var(--c-yellow); flex-shrink: 0; margin-top: 1px; }
.banner-demo strong { color: var(--c-yellow-hot); }

/* ── Paso 2: código ──────────────────────────────────────────── */
.codigo-intro {
  font-size: 1.0625rem;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}

.codigo-intro strong { color: var(--c-white); font-weight: 700; }

.codigo-grupo {
  display: flex;
  justify-content: space-between;
  gap: 0.375rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 400px) {
  .codigo-grupo { gap: 0.6rem; }
}

.codigo-casilla {
  /* flex-basis 0 + grow/shrink parejo entre las 6 casillas; min-width
     garantiza el touch target de 44px incluso en 375px (iPhone SE) sin
     provocar scroll horizontal — ver B.2 Principios Rectores. */
  flex: 1 1 0;
  min-width: 44px;
  max-width: 56px;
  aspect-ratio: 1 / 1;
  min-height: 56px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--c-white);
  background: var(--c-midnight-hull);
  border: 1px solid var(--c-hairline-yellow);
  border-radius: var(--radius-md);
}

.codigo-casilla:focus-visible,
.codigo-casilla:focus {
  outline: none;
  border-color: var(--c-yellow);
  box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.18);
}

.codigo-casilla.casilla-error {
  border-color: #F87171;
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.15);
}

/* ── Panel del cliente ───────────────────────────────────────── */
.panel-saludo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 5.5vw, 2.1rem);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

.panel-grid { display: flex; flex-direction: column; gap: 1.1rem; }

.panel-card {
  background: rgba(17, 30, 58, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--c-hairline-yellow);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem;
  box-shadow: var(--shadow-md);
}

/* Tarjeta de estado — la más grande y prominente */
.card-estado {
  padding: 1.85rem 1.5rem;
  box-shadow: var(--shadow-lg), var(--glow-fiber-blue);
  text-align: center;
}

.estado-icono {
  width: 56px;
  height: 56px;
  margin: 0 auto 0.75rem;
}

.estado-texto {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 6vw, 1.9rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
  text-wrap: balance;
}

.estado-detalle {
  font-size: 1.0625rem;
  color: var(--c-ink-white-70);
}

.card-estado--al_dia .estado-icono,
.card-estado--al_dia .estado-texto { color: #4ADE80; }
.card-estado--al_dia { border-color: rgba(74, 222, 128, 0.35); }

.card-estado--por_vencer .estado-icono,
.card-estado--por_vencer .estado-texto { color: var(--c-yellow); }
.card-estado--por_vencer { border-color: rgba(255, 193, 7, 0.4); }

.card-estado--vencido .estado-icono,
.card-estado--vencido .estado-texto { color: #F87171; }
.card-estado--vencido { border-color: rgba(248, 113, 113, 0.4); }

.panel-dato-label {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-white-70);
  margin-bottom: 0.4rem;
}

.panel-dato-valor {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}

.panel-acciones {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 0.35rem;
}

.btn-secundario-portal {
  width: 100%;
  min-height: 56px;
  font-size: 1.05rem;
}

.panel-salir {
  display: block;
  text-align: center;
  margin-top: 2rem;
  font-size: 1rem;
  color: var(--c-ink-white-70);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.panel-salir:hover { color: var(--c-yellow); }

/* Estado "no encontrado" */
.panel-no-encontrado { text-align: center; }
.panel-no-encontrado .estado-icono { color: var(--c-yellow); }

/* ── Skeleton / carga de página completa ─────────────────────── */
.portal-cargando {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 1rem;
  color: var(--c-ink-white-70);
  font-size: 1.05rem;
}

.portal-cargando .btn-spinner {
  width: 34px;
  height: 34px;
  border-width: 4px;
  border-color: rgba(255,255,255,0.15);
  border-top-color: var(--c-yellow);
}

/* ============================================================
   ADMIN (admin.html) — pantalla interna, más densa
   ============================================================ */
.admin-seccion { margin-bottom: 2rem; }

.admin-titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
}

.admin-ejemplo {
  background: var(--c-midnight-hull);
  border: 1px solid var(--c-hairline-yellow);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
  overflow-x: auto;
  white-space: pre;
  color: var(--c-ink-white-70);
  margin-bottom: 1rem;
}

.admin-textarea {
  width: 100%;
  min-height: 160px;
  background: var(--c-midnight-hull);
  border: 1px solid var(--c-hairline-yellow);
  border-radius: var(--radius-md);
  color: var(--c-white);
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  padding: 1rem;
  resize: vertical;
  line-height: 1.5;
}

.admin-textarea:focus-visible,
.admin-textarea:focus {
  outline: none;
  border-color: var(--c-yellow);
  box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.18);
}

.admin-file-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.75rem 1.5rem;
  border: 1px dashed rgba(255,255,255,0.35);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 600;
}

.admin-file-label:hover { border-color: var(--c-yellow); color: var(--c-yellow); }
.admin-file-label input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.admin-acciones { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.admin-acciones .btn { min-height: 52px; }

.admin-conteo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 1.25rem 0 0.75rem;
}

.admin-conteo strong { color: var(--c-yellow); }

.admin-tabla-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-hairline-yellow);
  border-radius: var(--radius-md);
}

.admin-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 640px;
}

.admin-tabla th,
.admin-tabla td {
  text-align: left;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
}

.admin-tabla th {
  background: var(--c-midnight-hull);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.admin-tabla tr.fila-error td { background: rgba(248, 113, 113, 0.08); }

.admin-tabla tr:last-child td { border-bottom: none; }

.admin-errores {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: var(--radius-md);
}

.admin-errores-titulo {
  font-weight: 700;
  color: #FFD1D1;
  margin-bottom: 0.5rem;
}

.admin-errores ul { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
.admin-errores li { font-size: 0.9rem; color: #FFD1D1; }

/* ── Reduced motion: matar el spinner también ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation: none; border-top-color: inherit; }
}

/* ── Print: por si alguien imprime el estado de cuenta ──────── */
@media print {
  * { opacity: 1 !important; transform: none !important; }
}