/* ===== css/core-overrides.css — overrides globales (responsive móvil, bloats, contención, legibilidad light). SE CARGA AL FINAL, después de los módulos ===== */
/* ───── Responsive: teléfonos (móviles) ─────────────────────────── */

@media (max-width: 640px) {
  .contenido { padding: 0.9rem; }

  #inicio-usuario {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }
  .acciones-vales-lista {
    max-height: 38vh;
    flex: none;
  }
  #inicio-usuario .historial-vales-lista {
    max-height: 38vh;
  }

  .modal-fondo {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--modal-oscurecer);
  }

  .vista-app {
    grid-template-columns: 1fr;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  /* La barra de navegación queda en la parte inferior (móvil) */
  .panel-lateral {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    padding: 0;
    justify-content: stretch;
    border: none;
    background: transparent;
    overflow: visible;
    z-index: 400;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: none;
  }
  .card {
    max-width: none;
    align-self: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--borde);
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
      var(--superficie);
    box-shadow: 0 -10px 24px rgba(2, 6, 16, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .card .separator { display: none; }
  .card .list {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 4px;
    padding: 0 4px;
  }
  .card .list:first-child { flex: 1; }
  .card .list:last-child { flex: 0 0 auto; }
  .card .list .element {
    justify-content: center;
    padding: 0;
    text-align: center;
  }
  .card .list .element .label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .marca-lateral {
    flex-direction: row;
    gap: 8px;
    padding: 2px 6px;
  }
  .marca-lateral strong,
  .marca-lateral .usuario-rol { display: none; }
  .marca-lateral .logo-icono { width: 38px; height: 38px; border-radius: 10px; }

  .contenido .tarjeta { padding: 1.1rem; }

  .fab-zona { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 480px) {
  .modal-fondo { padding: 10px; }

  .sv-caja {
    --radio-sv: 24px;
    padding: 22px 18px 20px;
  }
  .sv-cabecera h2 { font-size: 1.2rem; }

  .fab-zona .fab-item { min-width: 0; width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .u-anillo::before,
  .fab-blob .spin::before,
  .modal-fondo .sv-caja {
    animation: none;
  }

  .modal-fondo,
  .notificaciones-panel,
  .fab-menu,
  .toast {
    animation: none;
  }
}
/* ---- bloats/hallazgos diseño (sep 2026) ---- */

/* Estados vacíos y listas sin datos */
.viaje-vacio:not(td),
.historial-vales-vacio {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  padding: 30px 16px;
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.85rem;
  line-height: 1.5;
}

.viaje-vacio:not(td)::before,
.historial-vales-vacio::before {
  content: "🗂️";
  font-size: 1.7rem;
  line-height: 1;
  opacity: 0.75;
}

.historial-vales-error::before {
  content: "⚠️";
}

/* Skeleton shimmer para carga (las filas de lista) */
.esqueleto {
  position: relative;
  overflow: hidden;
  color: transparent;
  border-radius: var(--radio-md);
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent),
    linear-gradient(var(--superficie-suave), var(--superficie-suave));
  background-size: 200% 100%, 100% 100%;
  background-position: 200% 0, 0 0;
  animation: esqueleto-brillo 1.2s ease-in-out infinite;
  min-height: 56px;
  pointer-events: none;
}

@media (prefers-color-scheme: light) {
  .esqueleto {
    background:
      linear-gradient(90deg, transparent, rgba(11, 18, 32, 0.08), transparent),
      linear-gradient(var(--superficie-suave), var(--superficie-suave));
    background-size: 200% 100%, 100% 100%;
    background-position: 200% 0, 0 0;
  }
}

@keyframes esqueleto-brillo {
  0% { background-position: 200% 0, 0 0; }
  100% { background-position: -200% 0, 0 0; }
}

/* Rever render rendimiento: reduce el blur en móvil */
@media (max-width: 640px) {
  :root {
    --blur: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .esqueleto {
    animation: none;
    background-position: 0 0, 0 0;
  }
}

/* ── Contención móvil: la gráfica de viáticos y la tabla de usuarios nunca crecen el layout ── */
.contenido > * {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.panel-admin-tabs {
  flex-wrap: wrap;
  justify-content: center;
}
.heatmap-scroll,
.tabla-responsiva {
  -webkit-overflow-scrolling: touch;
}

/* ── Legibilidad en modo claro: mismo vidrio que los dashboards, con más contraste ── */
@media (prefers-color-scheme: light) {
  .sv-caja::before {
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4)),
      rgba(255, 255, 255, 0.72);
  }
  .sv-caja {
    box-shadow:
      0 2px 3px rgba(11, 18, 32, 0.08),
      0 12px 28px -6px rgba(11, 18, 32, 0.18),
      0 30px 70px -10px rgba(11, 18, 32, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  .sv-campo > span,
  .campo-360 > span,
  .accion-campos label {
    color: var(--texto);
  }
  .accion-row {
    background: var(--superficie-hover);
  }
  .accion-row::before {
    opacity: 0.16;
  }
  .accion-fecha,
  .accion-caret {
    color: var(--texto-suave);
  }
}

.kpi-card[role='button'] {
  cursor: pointer;
  text-align: left;
}
.kpi-card[role='button']:hover {
  filter: brightness(1.04);
}
.kpi-card[role='button']:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.por-reembolsar-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 55vh;
  overflow-y: auto;
}

.rem-boton {
  padding: 8px 12px !important;
  font-size: 13px;
  white-space: nowrap;
}

.visor-doc-caja {
  width: min(980px, calc(100vw - 2rem));
}
.visor-doc-cuerpo {
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: calc(var(--radio-sv) - 6px);
  overflow: hidden;
}
.visor-doc-marco {
  width: 100%;
  height: 68vh;
  border: 0;
  background: #fff;
}
.visor-doc-acciones {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.visor-doc-acciones .sv-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  border: 1.5px solid transparent;
  text-decoration: none;
}
.visor-doc-acciones .sv-boton-negro {
  border: 1.5px solid transparent;
}

/* ===== Auditoría móvil (oct 2026): fluididad gama baja + targets >= 40px ===== */

@media (max-width: 640px) {
  /* Pestañas del panel administrativo: 30px -> ~41px de alto */
  .panel-admin-tabs button {
    padding-block: 0.7rem;
  }
  /* Celdas del mapa de calor: 30-32px -> 40px mínimo */
  button.celda-mapa {
    min-height: 40px;
  }
  /* Tipografía 11.2px (0.7rem) -> 12px en fechas/badges de vales */
  #modal-vales-historial .vale-badge,
  #modal-vales-historial .vale-fecha,
  .vale-badge,
  .vale-fecha {
    font-size: 0.75rem !important;
  }
  /* Carrusel de acciones: el swipe horizontal no encadena el scroll vertical */
  .acciones-vales-lista {
    overscroll-behavior-x: contain;
  }
}