/* =========================================================
   SSI UI UNIFICADA — Opción A (cards mismo ancho global)
   - No toca lógica PHP
   - Unifica layout, cards, responsive
   ========================================================= */

/* Variables base */
:root{
  --ssi-bg: #ECE5DD;
  --ssi-text: #111;
  --ssi-muted: #6c757d;

  /* Contenedor adaptativo (se ajusta al monitor) */
  --ssi-container-max: 1320px;
  --ssi-container-pad: 16px;

  /* Ancho UNICO de tarjetas (Opción A) */
  --ssi-card-width: 1100px;

  --ssi-radius: 18px;
  --ssi-shadow: 0 6px 18px rgba(0,0,0,.08);
  --ssi-shadow-soft: 0 2px 10px rgba(0,0,0,.06);
  --ssi-border: 1px solid rgba(0,0,0,.06);

  /* ✅ Gris claro para “tarjetas” (cards y wizard) */
  --ssi-card-bg: #f2f3f5;
}

/* Fondo general (sin afectar login si usan otra clase) */
body{
  color: var(--ssi-text);
}

body:not(.login-page){
  background: var(--ssi-bg);
}

/* =========================================================
   CONTENEDOR “SE ADAPTA AL MONITOR”
   - Mantiene el contenido centrado
   - En pantallas grandes usa más ancho (hasta --ssi-container-max)
   ========================================================= */

.ssi-container,
.content,
.wa-main,
.container.ssi-container-like,
main.container,
main.container-fluid{
  width: min(100% - (var(--ssi-container-pad) * 2), var(--ssi-container-max)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Espaciado general para el área principal (por si hay navbar fixed) */
.content{
  padding-left: var(--ssi-container-pad) !important;
  padding-right: var(--ssi-container-pad) !important;
}

/* En monitores grandes damos un poquito más de “aire” */
@media (min-width: 1600px){
  :root{
    --ssi-container-max: 1560px;
  }
}

/* =========================================================
   TARJETAS — Opción A: TODAS mismo ancho
   ========================================================= */

/* Regla global para todas las tarjetas del sistema */
.card{
  width: 100% !important;
  max-width: var(--ssi-card-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 1rem;

  border-radius: var(--ssi-radius) !important;
  box-shadow: var(--ssi-shadow-soft) !important;
  border: var(--ssi-border) !important;

  /* ✅ Gris claro real (gana a Bootstrap) */
  background-color: var(--ssi-card-bg) !important;
}

/* Evitar que esto rompa componentes chicos */
.modal .card,
.offcanvas .card,
.dropdown-menu .card,
.toast .card,
.popover .card{
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* En mobile la card siempre ocupa el ancho disponible */
@media (max-width: 575.98px){
  :root{
    --ssi-card-width: 100%;
  }
  .card{
    margin-bottom: .9rem;
  }
}

/* =========================================================
   TIPOGRAFÍA / ESPACIADOS UNIFORMES
   ========================================================= */

.card .card-header{
  border-top-left-radius: var(--ssi-radius) !important;
  border-top-right-radius: var(--ssi-radius) !important;

  /* ✅ por si algún header quedaba blanco */
  background-color: var(--ssi-card-bg) !important;
}

.card .card-footer{
  border-bottom-left-radius: var(--ssi-radius) !important;
  border-bottom-right-radius: var(--ssi-radius) !important;

  /* ✅ por si algún footer quedaba blanco */
  background-color: var(--ssi-card-bg) !important;
}

.card .card-body{
  padding: 1rem;

  /* ✅ por si el body quedaba blanco */
  background-color: var(--ssi-card-bg) !important;
}

@media (max-width: 575.98px){
  .card .card-body{
    padding: .9rem;
  }
}

/* Botones: más consistentes */
.btn{
  border-radius: 12px;
}

/* Inputs y selects más cómodos en mobile */
.form-control,
.form-select{
  border-radius: 12px;
}

/* =========================================================
   TABLAS — responsive sin desbordes
   ========================================================= */
.table-responsive{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table{
  margin-bottom: 0;
}

/* =========================================================
   FULLCALENDAR (si lo usás) — toolbar mobile
   ========================================================= */
.fc .fc-toolbar{
  gap: .5rem;
  flex-wrap: wrap;
}
@media (max-width: 575.98px){
  .fc .fc-toolbar{
    flex-direction: column;
    align-items: stretch;
  }
  .fc .fc-toolbar .fc-toolbar-chunk{
    display:flex;
    justify-content:center;
    flex-wrap: wrap;
    gap: .35rem;
  }
  .fc .fc-button{
    padding: .35rem .55rem;
    font-size: .85rem;
  }
}

/* =========================================================
   UTILIDADES — títulos, separadores, etc.
   ========================================================= */
.ssi-title{
  font-weight: 800;
  letter-spacing: .2px;
}

.ssi-muted{
  color: var(--ssi-muted) !important;
}

/* =========================================================
   SSI PATCH GLOBAL — ENCUADRE + ANCHO ÚNICO DE CARDS
   (No requiere tocar header.php)
   ========================================================= */

/* 1) Variables globales */
:root{
  --ssi-navbar-h: 58px;          /* altura estimada del navbar */
  --ssi-gutter: 12px;            /* padding lateral base */
  --ssi-wrap-max: 1320px;        /* ancho máximo del sistema (monitor normal) */
  --ssi-wrap-max-xl: 1560px;     /* ancho máximo en monitores grandes */
  --ssi-card-w: 1100px;          /* ✅ ancho único de tarjetas (Opción A) */
}

/* 2) En monitores grandes, el sistema se adapta más ancho */
@media (min-width: 1600px){
  :root{ --ssi-wrap-max: var(--ssi-wrap-max-xl); }
}

/* 3) ENCUADRE: contenedor adaptativo (sirve para todas las pantallas) */
.content{
  width: min(calc(100% - (var(--ssi-gutter) * 2)), var(--ssi-wrap-max)) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* ✅ Compensación global para navbar fixed-top */
  padding-top: calc(var(--ssi-navbar-h) + 12px) !important;
  padding-left: var(--ssi-gutter) !important;
  padding-right: var(--ssi-gutter) !important;
  padding-bottom: 16px !important;

  /* Evita "corridas" por sombras */
  box-sizing: border-box;
}

/* Mobile: menos padding y el navbar suele ocupar lo mismo */
@media (max-width: 576px){
  :root{
    --ssi-navbar-h: 58px;
    --ssi-gutter: 8px;
    --ssi-card-w: 100%;
  }
  .content{
    padding-top: calc(var(--ssi-navbar-h) + 10px) !important;
  }
}

/* 4) Ajuste fino: si el navbar te queda más alto en desktop, podés subir esto a 62px */
@media (min-width: 992px){
  :root{ --ssi-navbar-h: 60px; }
}

/* 5) ✅ TODAS LAS TARJETAS MISMO ANCHO (Opción A) */
.card{
  width: 100% !important;
  max-width: var(--ssi-card-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 1rem;

  /* ✅ refuerzo (por el bloque duplicado que ya tenías) */
  background-color: var(--ssi-card-bg) !important;
}

/* 6) No romper componentes chicos (modal/dropdown/offcanvas/toast) */
.modal .card,
.offcanvas .card,
.dropdown-menu .card,
.toast .card,
.popover .card{
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 7) Evitar que algunas filas “fuerzen” el ancho raro */
.row > [class*="col-"] > .card{
  max-width: var(--ssi-card-w) !important;
}

/* 8) Si hay cards anidadas (card dentro de card), que no se achiquen de más */
.card .card{
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 9) Pequeño fix visual: evita que el body haga scroll horizontal por sombras */
html, body{ overflow-x: hidden; }

/* ✅ Wizard: muchas pantallas usan .wa-wizard como “tarjeta” (no es .card) */
.wa-wizard{
  background-color: var(--ssi-card-bg) !important;
}

/* =========================================================
   SSI GLOBAL PANEL COLOR — APLICA A TODO EL SISTEMA
   ========================================================= */

:root{
  --ssi-card-bg: #e0e0e0;   /* 🔥 acá cambiás el tono global */
}

/* Todos los paneles principales */
.card,
.card > .card-body,
.card > .card-header,
.card > .card-footer,
.wa-wizard,
.card-auto,
.ticketbox-main-inner,
.panel,
.box,
.widget,
.card-like{
  background-color: var(--ssi-card-bg) !important;
}

/* Evita que Bootstrap vuelva a poner blanco */
.bg-white,
.bg-light,
.bg-body,
.bg-body-tertiary,
.bg-body-secondary{
  background-color: var(--ssi-card-bg) !important;
}