/*
  SALCHI FRONTEND SANITIZE V1

  Capa final para:
  - hacer prevalecer el tema manual sobre prefers-color-scheme;
  - mantener contraste consistente;
  - compartir geometría móvil segura;
  - no modificar estilos de impresión.
*/

/* =========================================================
   BASE RESPONSIVE SEGURA
   ========================================================= */

html,
body {
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

.layout,
.card,
.admin-card,
.informes-card,
.booking-modal-card,
.form,
.slots,
.slot {
  min-width: 0;
}

input,
select,
textarea,
button {
  max-width: 100%;
}


/* =========================================================
   CLARO MANUAL
   ========================================================= */

@media screen {

html[data-theme="light"] {
  color-scheme: light;

  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --line: #dbe3ec;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
}

html[data-theme="light"] body {
  background: #f8fafc !important;
  color: #0f172a !important;
}

html[data-theme="light"] .hero {
  background: #ffffff !important;
  border-bottom-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .hero h1,
html[data-theme="light"] .hero h2 {
  color: #0f172a !important;
}

html[data-theme="light"] .hero p,
html[data-theme="light"] .hero .eyebrow {
  color: #475569 !important;
}

html[data-theme="light"] .card,
html[data-theme="light"] .admin-card,
html[data-theme="light"] .informes-card,
html[data-theme="light"] .booking-modal-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] strong {
  color: inherit;
}

html[data-theme="light"] label {
  color: #334155 !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

html[data-theme="light"] .admin-help,
html[data-theme="light"] .pin-help,
html[data-theme="light"] .detalle-count {
  color: #64748b !important;
  opacity: 1 !important;
}


/* ---------- navegación ---------- */

html[data-theme="light"] .admin-top-nav .back-link,
html[data-theme="light"] .informes-nav .back-link {
  background: #f0fdfa !important;
  border-color: #99f6e4 !important;
  color: #115e59 !important;
}

html[data-theme="light"] .admin-top-nav .back-link:hover,
html[data-theme="light"] .informes-nav .back-link:hover {
  background: #ccfbf1 !important;
  color: #134e4a !important;
}

html[data-theme="light"] .back-link,
html[data-theme="light"] .admin-link {
  color: #475569 !important;
}


/* ---------- avisos normales ---------- */

html[data-theme="light"] .admin-warning:not(.danger-warning) {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #1e3a8a !important;
  opacity: 1 !important;
}

html[data-theme="light"] .rule-banner {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1e3a8a !important;
}


/* ---------- peligro admin ---------- */

html[data-theme="light"] .danger-card {
  background: #ffffff !important;
  border-color: #fecaca !important;
}

html[data-theme="light"] .danger-card h2 {
  color: #991b1b !important;
}

html[data-theme="light"] .danger-card .danger-help {
  color: #475569 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .danger-warning {
  background: #fff7ed !important;
  border-color: #fdba74 !important;
  color: #9a3412 !important;
}

html[data-theme="light"] .danger-button,
html[data-theme="light"] .button-danger {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
}


/* ---------- informes ---------- */

html[data-theme="light"] .kpi-card,
html[data-theme="light"] .resumen-panel,
html[data-theme="light"] .detalle-card {
  background: #f8fafc !important;
  border-color: #dce8e5 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .kpi-title,
html[data-theme="light"] .resumen-panel h4,
html[data-theme="light"] .detalle-card span,
html[data-theme="light"] th {
  color: #14534a !important;
}

html[data-theme="light"] .kpi-value,
html[data-theme="light"] .resumen-list,
html[data-theme="light"] .detalle-card p,
html[data-theme="light"] td {
  color: #0f172a !important;
}

html[data-theme="light"] .detalle-filter {
  color: #475569 !important;
}

html[data-theme="light"] #informesMessage:not(:empty) {
  background: #ecfdf5 !important;
  border-color: #86efac !important;
  color: #166534 !important;
}

html[data-theme="light"] .secondary-action {
  background: #f0fdfa !important;
  border-color: #99f6e4 !important;
  color: #115e59 !important;
}


/* ---------- confirmación ---------- */

html[data-theme="light"] .confirmation-cancel-button,
html[data-theme="light"] .cancel-danger-button {
  background: #ffffff !important;
  border-color: #fda4af !important;
  color: #9f1239 !important;
}

html[data-theme="light"] .confirmation-cancel-button:hover,
html[data-theme="light"] .cancel-danger-button:hover {
  background: #fff1f2 !important;
  color: #881337 !important;
}

html[data-theme="light"] #confirmationMessage.message-info,
html[data-theme="light"] #confirmationMessage.message-success {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1e3a8a !important;
}

html[data-theme="light"] #confirmationMessage.message-error {
  background: #fff1f2 !important;
  border-color: #fda4af !important;
  color: #9f1239 !important;
}


/* ---------- reserva ---------- */

html[data-theme="light"] .booking-confirm-visual-card,
html[data-theme="light"] .booking-card .selected-turno {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .slot.is-free {
  background: #f4fbf8 !important;
  border-color: #b7dfd3 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .slot.is-selected {
  background: #eff6ff !important;
  border-color: #60a5fa !important;
  color: #0f172a !important;
}

html[data-theme="light"] .slot.is-booked {
  background: #fff7ed !important;
  border-color: #fdba74 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .slot-home {
  color: #475569 !important;
}

}


/* =========================================================
   OSCURO MANUAL
   ========================================================= */

@media screen {

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b1220;
  --card: #111827;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --line: #334155;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
}

html[data-theme="dark"] body {
  background: #0b1220 !important;
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .hero {
  background: #0f172a !important;
  border-bottom-color: #1e293b !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .hero p,
html[data-theme="dark"] .hero .eyebrow {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .informes-card,
html[data-theme="dark"] .booking-modal-card {
  background: #111827 !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

html[data-theme="dark"] label {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .admin-help,
html[data-theme="dark"] .pin-help,
html[data-theme="dark"] .detalle-count {
  color: #94a3b8 !important;
  opacity: 1 !important;
}


/* ---------- navegación ---------- */

html[data-theme="dark"] .admin-top-nav .back-link,
html[data-theme="dark"] .informes-nav .back-link {
  background: #0f2928 !important;
  border-color: #286a64 !important;
  color: #ccfbf1 !important;
}


/* ---------- avisos ---------- */

html[data-theme="dark"] .admin-warning:not(.danger-warning),
html[data-theme="dark"] .rule-banner {
  background: #172554 !important;
  border-color: #3b82f6 !important;
  color: #dbeafe !important;
}

html[data-theme="dark"] .danger-card {
  background: #181116 !important;
  border-color: #7f1d1d !important;
}

html[data-theme="dark"] .danger-card h2 {
  color: #fecaca !important;
}

html[data-theme="dark"] .danger-card .danger-help {
  color: #cbd5e1 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .danger-warning {
  background: #431407 !important;
  border-color: #c2410c !important;
  color: #fed7aa !important;
}


/* ---------- informes ---------- */

html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .resumen-panel,
html[data-theme="dark"] .detalle-card {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .kpi-title,
html[data-theme="dark"] .resumen-panel h4,
html[data-theme="dark"] .detalle-card span,
html[data-theme="dark"] th {
  color: #99f6e4 !important;
}

html[data-theme="dark"] .kpi-value,
html[data-theme="dark"] .resumen-list,
html[data-theme="dark"] .detalle-card p,
html[data-theme="dark"] td {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .detalle-filter {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] #informesMessage:not(:empty) {
  background: #12352e !important;
  border-color: #2f7d69 !important;
  color: #bbf7d0 !important;
}


/* ---------- confirmación ---------- */

html[data-theme="dark"] .confirmation-cancel-button,
html[data-theme="dark"] .cancel-danger-button {
  background: transparent !important;
  border-color: #f87171 !important;
  color: #fecaca !important;
}

html[data-theme="dark"] #confirmationMessage.message-info,
html[data-theme="dark"] #confirmationMessage.message-success {
  background: #172554 !important;
  border-color: #3b82f6 !important;
  color: #dbeafe !important;
}

html[data-theme="dark"] #confirmationMessage.message-error {
  background: #3f151c !important;
  border-color: #be123c !important;
  color: #fecdd3 !important;
}


/* ---------- reserva ---------- */

html[data-theme="dark"] .booking-confirm-visual-card,
html[data-theme="dark"] .booking-card .selected-turno {
  background: #182235 !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .slot.is-free {
  background: #10251f !important;
  border-color: #28594a !important;
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .slot.is-selected {
  background: #1e376d !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .slot.is-booked {
  background: #2a1d10 !important;
  border-color: #925d28 !important;
  color: #ffffff !important;
}

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media screen and (max-width: 760px) {

  .hero > div,
  .layout,
  .app-footer {
    width: calc(100% - 20px);
    max-width: 100%;
    margin-inline: auto;
  }

  .admin-layout {
    width: min(calc(100% - 20px), 560px) !important;
    margin-inline: auto !important;
  }

  .admin-card,
  .informes-card {
    width: 100% !important;
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
  }

  .admin-card h2,
  .informes-card h2 {
    overflow-wrap: anywhere;
  }

  .admin-warning,
  .danger-warning {
    opacity: 1 !important;
  }

  .informes-nav,
  .admin-top-nav {
    min-width: 0;
  }

  .kpi-grid,
  .resumen-columns {
    min-width: 0;
  }

  .kpi-card,
  .resumen-panel,
  .detalle-card {
    min-width: 0;
  }

  .booking-modal-card {
    width: 100%;
    max-width: 100%;
  }
}


/* 360px: referencia principal */
@media screen and (max-width: 390px) {

  .admin-card,
  .informes-card {
    padding: 18px;
  }

  .admin-card h2,
  .informes-card h2 {
    font-size: clamp(1.35rem, 6vw, 1.65rem) !important;
    line-height: 1.12;
  }

  .admin-help {
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .admin-warning,
  .danger-warning {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
}