/* ================= Login =================
   R-login-simple: maqueta aprobada por el cliente -- pantalla de inicio
   de un sistema interno, no una landing page. Una sola columna
   centrada, sin copy comercial, sin textura ni resplandores
   decorativos.
   R-login-v3: fondo = MISMO degradado lineal que .sidebar (174deg,
   joal-green-700 -> joal-green-900 90%, ver layout.css) -- mismo
   lenguaje visual en toda la app.
   R-login-v4: .login-page centra con CSS GRID (place-items: center)
   en vez de flex -- una sola celda que centra a su único hijo en
   ambos ejes sin depender de ningún margen manual. Tarjeta compacta
   (~370px), coherente con "sistema interno".
   R-login-v5 (una sola pantalla, sin scroll): height (no min-height)
   fijo a 100vh/100dvh + overflow:hidden en .login-page -- el bloque
   NUNCA puede exceder el alto visible. Espaciado vertical (padding de
   página/tarjeta, márgenes entre marca/tarjeta/campos/botón) recortado
   al mínimo cómodo para que el conjunto quepa holgado incluso en
   768px de alto (1366x768, tablet en horizontal) sin depender de que
   el navegador ceda toda la pantalla -- mismos colores/tamaños de
   tarjeta y logo que v4, solo se ajustó espaciado y mecánica de
   altura. */
.login-page {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 20px;
  /* Auditoría visual (ronda de pulido): degradado acortado a dos tonos
     vecinos (antes 700->900, igual al de .sidebar en layout.css) para
     que el logo sea el protagonista sin un fondo tan contrastado --
     esto desalinea a propósito el fondo del login respecto al sidebar,
     que comparten desde R-login-v3; ver reporte de esta ronda. */
  background: linear-gradient(174deg, var(--joal-green-800) 0%, var(--joal-green-900) 90%);
}

.login-shell {
  width: 100%;
  max-width: 370px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 22px;
  text-align: center;
}

/* R-logo-composicion: el logo se ve directamente sobre el fondo del
   login, sin tarjeta/fondo/sombra propia. Pequeño y proporcionado a
   propósito (R-login-simple) -- es una marca, no el protagonista. */
.login-brand__mark {
  width: 100%;
  max-width: 178px;
  margin-bottom: 8px;
}

.login-brand__mark img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.login-brand__mark-fallback {
  display: none;
  width: 100%;
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--joal-green-50);
}

.login-brand__tagline {
  font-size: 14px;
  color: var(--joal-green-300);
  letter-spacing: var(--tracking-wide);
}

.login-card {
  width: 100%;
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.32);
  padding: 24px 28px;
}

.login-card form .field + .field {
  margin-top: 14px;
}

.login-card form button[type="submit"] {
  margin-top: 18px;
}

/* Acceso de demostración: colapsado por defecto (<details> nativo, sin
   JS) -- casi invisible a propósito, nunca compite con el formulario
   real. */
.login-card__demo-hint {
  margin-top: 14px;
  text-align: center;
}

.login-card__demo-hint summary {
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.32);
  letter-spacing: var(--tracking-wide);
}

.login-card__demo-hint summary::-webkit-details-marker {
  display: none;
}

.login-card__demo-hint-accounts {
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

/* ================= Charts / cards used across pages ================= */
.chart-card {
  background: var(--paper);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

/* ================= Recepción · home del rol Recepción =================
   Pantalla de arranque para el rol Recepción: identidad JOAL con
   presencia real + 4 acciones grandes (2x2 en escritorio) + dos bloques
   de consulta rápida abajo. Ancho de contenido acotado a propósito (ver
   .recep-home) para que en monitores anchos no quede un 2x2 estirado con
   mucho vacío alrededor -- una composición más sólida y centrada. */
.recep-home {
  max-width: 980px;
}

.recep-home-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 2px solid var(--joal-green-100);
}

/* R-logo-composicion: el logo ya se muestra en el sidebar -- estas
   páginas (home de Recepción/Piso) ya NO repiten el logo, para no
   duplicar la marca dentro del contenido principal. Las reglas
   .recep-home-header__mark* se retiraron por quedar sin uso. */
.recep-home-header__module {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--joal-green-ink);
  font-weight: 700;
  margin-top: 1px;
}

.recep-home-header__welcome {
  font-size: var(--text-xl);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}

.recep-home-header__prompt {
  color: var(--gray-600);
  font-size: var(--text-base);
  margin: 2px 0 0;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* Corrección auditoría responsive (hallazgo A3): antes esto se fijaba con
   style="grid-template-columns: repeat(4, 1fr);" en línea, lo que ganaba
   SIEMPRE sobre la media query de abajo (un estilo en línea nunca pierde
   contra una regla de hoja de estilo, tenga o no @media) y dejaba las
   tarjetas angostas/rotas en un teléfono real. Misma regla, ahora como
   clase modificadora para que el colapso a 1 columna en móvil sí pueda
   aplicar. */
.action-grid--4up {
  grid-template-columns: repeat(4, 1fr);
}

.action-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 116px;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--joal-green-50);
  border: 1.5px solid var(--joal-green-100);
  color: var(--joal-green-ink);
  text-align: left;
  transition: transform var(--transition-fast), border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.action-card:hover {
  text-decoration: none;
  border-color: var(--joal-green-400);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.action-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--joal-green-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.action-card__body {
  flex: 1;
  min-width: 0;
}

.action-card__title {
  display: block;
  font-size: 17px;
  font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  line-height: 1.2;
}

.action-card__subtitle {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--joal-green-ink);
  margin-top: 3px;
}

.action-card--primary {
  background: var(--joal-green-700);
  border-color: var(--joal-green-700);
  color: var(--white);
}

.action-card--primary .action-card__icon {
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
}

.action-card--primary .action-card__subtitle {
  color: var(--joal-green-200);
}

.action-card--primary:hover {
  background: var(--joal-green-800);
  border-color: var(--joal-green-800);
}

.action-card--strong {
  background: var(--joal-green-600);
  border-color: var(--joal-green-600);
  color: var(--white);
}

.action-card--strong .action-card__icon {
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
}

.action-card--strong .action-card__subtitle {
  color: var(--joal-green-200);
}

.action-card--strong:hover {
  background: var(--joal-green-700);
  border-color: var(--joal-green-700);
}

.action-card--pending {
  border-color: var(--amber-500);
  box-shadow: 0 0 0 1px var(--amber-500);
}

.action-card__flag {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amber-500);
}

.recep-home-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  border-color: var(--amber-500);
  background: var(--amber-100);
  margin-bottom: var(--space-6);
}

.recep-home-alert .alert-item__title {
  color: var(--gray-900);
}

.recep-home-alert .alert-item__detail {
  color: var(--gray-700);
}

.recep-home-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-5);
}

.recep-home-section-title {
  font-size: var(--text-md);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 var(--space-3);
}

.recep-home-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recep-home-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 4px;
  border-bottom: 1px solid var(--gray-100);
}

.recep-home-list li:last-child {
  border-bottom: none;
}

.recep-home-list__folio {
  font-weight: 700;
  color: var(--joal-green-ink);
}

.recep-home-list__meta {
  font-size: var(--text-sm);
  color: var(--gray-500);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .action-grid,
  .action-grid--4up {
    grid-template-columns: 1fr;
  }
  .action-card {
    min-height: 96px;
    padding: var(--space-4);
  }
}

/* ================= Piso · escáner de QR (R-piso-qr) =================
   Pensado primero para tablet: visor grande, recuadro central de alto
   contraste, botones táctiles grandes, texto de estado legible a
   distancia. La cámara en sí (getUserMedia/jsQR) vive en scan.html --
   aquí solo el visual. */
.scan-card {
  max-width: 640px;
  margin: 0 auto;
}

.scan-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--joal-green-950);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scan-viewport video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scan-viewport__target {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62%;
  aspect-ratio: 1 / 1;
  max-width: 320px;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.scan-viewport--active .scan-viewport__target {
  border-color: var(--joal-gold-500);
}

.scan-status {
  text-align: center;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--gray-700);
  margin: var(--space-4) 0 0;
  min-height: 22px;
}

.scan-status--error {
  color: var(--red-600);
}

.scan-status--success {
  color: var(--joal-green-ink);
}

.scan-result {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin: 4px 0 0;
  min-height: 18px;
}

.scan-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--space-4);
}

.scan-actions .btn {
  min-height: var(--btn-height-touch, 48px);
  font-size: var(--text-md);
}