/* Estilos del portal. Solo usa los tokens de tokens.css, así el tema nocturno sale solo. */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }
html {
  -webkit-tap-highlight-color: transparent; /* sin el destello gris/azul al tocar en el celular */
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-sunken);
  min-height: 100vh;
  min-height: 100dvh; /* 100vh en el celular queda más alto que lo visible */
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

a { color: var(--link); text-decoration: none; }

/* Controles: toque inmediato (sin la espera del doble toque) y sin seleccionar el texto al mantener presionado. */
button, .boton, .seccion, .marca {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.contenedor {
  width: 100%; max-width: var(--container-max); margin: 0 auto;
  padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
}

/* Barra superior */
/* Barra superior: blanca, porque el logo es azul y va sobre fondo blanco. En el tema nocturno la
   barra es oscura y el logo va sobre una placa blanca. */
.barra {
  background: var(--surface-card);
  color: var(--text-heading);
  border-bottom: 3px solid var(--accent-primary);
  box-shadow: var(--shadow-sm);
  padding-top: env(safe-area-inset-top, 0px); /* bajo el notch, el fondo llega al borde y el contenido no */
}
.barra .contenedor { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; }
.marca { display: flex; align-items: center; border-radius: var(--radius-md); }
.marca img { display: block; height: 40px; width: auto; }
.barra-derecha { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.barra-nombre { font-size: var(--text-small); color: var(--text-muted); }
.barra-nombre a { color: var(--text-muted); }
@media (max-width: 560px) {
  .barra-nombre { display: none; }
  .marca img { height: 32px; }
}

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: inherit; font-weight: 600; font-size: var(--text-small);
  padding: 10px 18px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer;
  background: var(--accent-primary); color: var(--white);
  transition: background var(--duration-fast) ease, transform 160ms var(--ease-out);
}
.boton:active { transform: scale(0.97); background: var(--accent-primary-hover); }
.boton-fantasma { background: transparent; color: inherit; border-color: var(--border-default); }
.boton-fantasma:active { background: var(--surface-sunken); }
.boton-icono { width: 38px; height: 38px; padding: 0; font-size: 18px; }
.boton-ancho { width: 100%; }

/* Contenido */
main { flex: 1; padding: var(--space-8) 0 var(--space-12); }
.ceja { font-size: var(--text-caption); font-weight: 700; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--accent-primary); margin: 0 0 var(--space-2); }
.titulo-pagina { font-size: var(--text-h3); margin-bottom: var(--space-2); }
.subtitulo { color: var(--text-muted); margin: 0 0 var(--space-8); }

.tarjeta {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}

/* Inicio: secciones del portal */
.secciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); }
.seccion { display: flex; flex-direction: column; gap: var(--space-3); color: var(--text-body); border-top: 4px solid var(--accent-secondary); transition: box-shadow var(--duration-base) var(--ease-out), transform 160ms var(--ease-out); }
a.seccion { text-decoration: none; }
a.seccion:active { transform: scale(0.98); }
.seccion h2 { font-size: var(--text-h5); }
.seccion p { margin: 0; color: var(--text-muted); font-size: var(--text-small); }
.seccion .ir { margin-top: auto; font-weight: 600; font-size: var(--text-small); color: var(--link); }
.seccion-proxima { opacity: 0.7; border-top-color: var(--border-default); }
.etiqueta { align-self: flex-start; font-size: var(--text-caption); font-weight: 600; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-muted); border: 1px solid var(--border-subtle); }

/* Formularios (entrar, cambiar contraseña) */
.centrado { display: grid; place-items: center; padding: var(--space-6) 0; }
.formulario { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--space-4); }
.formulario h1 { font-size: var(--text-h4); }
.campo { display: flex; flex-direction: column; gap: var(--space-1); }
.campo label { font-size: var(--text-small); font-weight: 600; color: var(--text-heading); }
.campo input {
  font: inherit; font-size: 16px; /* menos de 16px hace que el iPhone acerque la página al escribir */
  padding: 10px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border-default); background: var(--surface-page); color: var(--text-body);
}
.campo input:focus { outline: 2px solid var(--focus-ring); outline-offset: 0; border-color: transparent; }
.ayuda { font-size: var(--text-caption); color: var(--text-muted); margin: 0; }
.error { background: var(--danger-surface); color: var(--danger); border: 1px solid var(--danger); border-radius: var(--radius-md); padding: var(--space-3); font-size: var(--text-small); margin: 0; }
.aviso { background: var(--surface-sunken); border-left: 4px solid var(--accent-primary); border-radius: var(--radius-md); padding: var(--space-3); font-size: var(--text-small); margin: 0; }

/* Pie */
.pie { border-top: 1px solid var(--border-subtle); padding: var(--space-4) 0 calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); font-size: var(--text-caption); color: var(--text-muted); }
.pie .contenedor { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.pie strong { color: var(--accent-secondary); }

/* Hover solo con mouse: en el celular el "hover" se queda pegado después de tocar. */
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--link-hover); text-decoration: underline; }
  .marca:hover, .boton:hover, a.seccion:hover { text-decoration: none; }
  .boton:hover { background: var(--accent-primary-hover); color: var(--white); }
  .boton-fantasma:hover { background: var(--surface-sunken); color: inherit; }
  .barra-nombre a:hover { color: var(--text-heading); }
  a.seccion:hover { color: var(--text-body); box-shadow: var(--shadow-md); transform: translateY(-2px); }
}

/* Movimiento reducido: sin desplazamientos ni escalas, solo cambios de color. */
@media (prefers-reduced-motion: reduce) {
  .boton, .seccion { transition-property: background, box-shadow; }
  .boton:active, a.seccion:active, a.seccion:hover { transform: none; }
}

/* Tema nocturno: el logo azul no se lee sobre fondo oscuro; va sobre una placa blanca. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marca { background: var(--white); padding: 4px 10px; }
}
:root[data-theme="dark"] .marca { background: var(--white); padding: 4px 10px; }

/* Mensajes después de guardar */
.mensajes { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.mensaje { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-small); border: 1px solid var(--border-subtle); background: var(--surface-card); border-left: 4px solid var(--accent-secondary); }
.mensaje-success { border-left-color: var(--success); }
.mensaje-warning { border-left-color: var(--warning); }
.mensaje-error { border-left-color: var(--danger); color: var(--danger); }