/* SSI UI Responsive Pack (v6.7.x) */
/* Goals: better mobile spacing, readable tables/forms, FullCalendar mobile toolbar, modern cards */

:root{
  --ssi-bg: #ECE5DD;
  --ssi-card: #ffffff;
  --ssi-text: #111;
  --ssi-muted: #6c757d;
  --ssi-radius: 16px;
  --ssi-shadow: 0 6px 18px rgba(0,0,0,.08);
  --ssi-shadow-soft: 0 2px 10px rgba(0,0,0,.06);
}

/* Base */
html, body{ height:100%; }
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.content{
  /* Your header already offsets the fixed navbar. This keeps it comfy on mobile. */
  padding: 1rem;
  margin-top: 4.5rem;
  margin-bottom: 1.5rem;
  max-width: 1320px;
}

/* On large screens, add breathing room */
@media (min-width: 992px){
  .content{ padding: 1.5rem; margin-top: 5rem; }
}

/* Cards */
.card,
.list-group,
.alert,
.table-responsive{
  border-radius: var(--ssi-radius);
}

.card{
  box-shadow: var(--ssi-shadow-soft);
  border: 0;
}

/* Buttons and inputs: slightly more touch friendly */
.btn, .form-control, .form-select, .input-group-text{
  border-radius: 14px;
}
@media (max-width: 576px){
  .btn, .form-control, .form-select, .input-group-text{ border-radius: 16px; }
  .btn{ padding: .55rem .75rem; }
}

/* Navbar tweaks */
.navbar .navbar-brand{
  font-weight: 700;
  letter-spacing: .2px;
}
@media (max-width: 576px){
  .navbar .navbar-brand{
    font-size: .98rem;
    white-space: nowrap;
  }
  .navbar .navbar-brand i{ margin-right: .35rem; }
}

/* Tables */
.table{
  margin-bottom: 0;
}
@media (max-width: 768px){
  .table{ font-size: .85rem; }
  .table td, .table th{ padding: .55rem .6rem; }
}

/* Make badges and small pills friendlier */
.badge{
  border-radius: 999px;
}

/* Modals on small screens: feel like sheets */
@media (max-width: 576px){
  .modal-dialog{
    margin: .5rem;
  }
  .modal-content{
    border-radius: 18px;
  }
}

/* Utility: avoid horizontal scrolling from long content */
img, svg, video, canvas{
  max-width: 100%;
  height: auto;
}

/* === SSI CENTERED LAYOUT OVERRIDES === */
/* Objetivo:
   - PC: contenido centrado y con ancho consistente
   - Móvil: evitar overflow horizontal
   - Cards: mismo tamaño y centradas
*/
html, body{ width:100%; max-width:100%; }
body{ overflow-x:hidden; }

/* Wrapper global */
.ssi-page{ width:100%; min-height:100vh; }
.ssi-main{ width:100%; padding: 16px 0 32px; }

/* Contenedor centrado */
:root{
  --ssi-max-width: 1200px;
  --ssi-card-width: 980px;
  --ssi-gutter: 16px;
}

.ssi-container{
  width:100%;
  max-width: var(--ssi-max-width);
  margin: 0 auto;
  padding-left: var(--ssi-gutter);
  padding-right: var(--ssi-gutter);
}

/* Uniformar cards */
.ssi-container .card,
.ssi-container .reservation-card,
.ssi-container .ticket-card,
.ssi-container .ssi-card{
  width:100%;
  max-width: var(--ssi-card-width);
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Tablas en móvil */
.table-responsive{ -webkit-overflow-scrolling: touch; }
table{ max-width:100%; }

/* FullCalendar */
.fc, .fc .fc-view-harness, .fc .fc-scroller{ max-width:100%; }
@media (max-width: 768px){
  :root{ --ssi-card-width: 100%; --ssi-gutter: 12px; }
  .ssi-main{ padding-top: 10px; }
  .ssi-container{ padding-left: var(--ssi-gutter); padding-right: var(--ssi-gutter); }
  .card .card-body{ padding: 12px; }
  .fc .fc-toolbar{ flex-wrap: wrap; gap: 8px; }
}

/* === FIX Mobile: FullCalendar overflow === */
.fc .fc-scrollgrid,
.fc .fc-scrollgrid table{
  width: 100% !important;
}

@media (max-width: 576px){
  /* Evita que el calendario "empuje" horizontalmente */
  .fc .fc-view-harness{ overflow-x: hidden; }
  .fc .fc-scroller{ overflow-x: hidden; }
  /* Si alguna página todavía usa .content con padding grande, esto lo suaviza */
  .content{ padding-left: 12px !important; padding-right: 12px !important; }
}

/* =========================================
   MARÍN — GLOBAL MOBILE CARD FIX v1.2
   Objetivo: que TODAS las tarjetas del sistema se vean completas en celular
   Pegar al FINAL del CSS
   ========================================= */

/* 0) Corta cualquier overflow horizontal “fantasma” */
html, body{ max-width:100%; overflow-x:hidden; }

/* 1) En móvil: ninguna tarjeta (ni sus hijos) puede empujar el ancho */
@media (max-width: 768px){

  /* Tarjetas + contenedores comunes */
  .card,
  .ssi-card,
  .reservation-card,
  .ticket-card,
  .list-group,
  .alert,
  .table-responsive{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 2) La causa #1: flex sin wrap (acciones, headers, toolbars) */
  .d-flex,
  .btn-toolbar,
  .card-header,
  .card-footer{
    flex-wrap: wrap !important;
    gap: .5rem;
  }

  /* 3) La causa #2: filas/cols que empujan por min-width */
  .row{ margin-left: 0 !important; margin-right: 0 !important; }
  .row > [class^="col"],
  .row > [class*=" col"]{
    min-width: 0 !important;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }

  /* 4) La causa #3: textos largos (emails, ids, links) */
  .card,
  .card *{
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }

  /* 5) Tablas: si están bien envueltas, perfecto; si no, igual no rompen */
  .table-responsive{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  table{
    max-width: 100% !important;
  }
  /* Si alguna tabla no está dentro de .table-responsive */
  .card table{
    display: block;
    width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* 6) Inputs y botones: no desbordan */
  input, select, textarea, .form-control, .form-select{
    max-width: 100% !important;
  }
  .btn, .btn-group{
    max-width: 100%;
  }

  /* 7) Ajuste de padding para que “entre todo” sin apretar */
  .content{ padding-left: 12px !important; padding-right: 12px !important; }
  .card .card-body{ padding: 12px !important; }
}


/* =========================
   SSI STANDARD COMPONENTS
   Unificación visual global
========================= */

.ssi-card{
  background: var(--ssi-card);
  border-radius: var(--ssi-radius);
  box-shadow: var(--ssi-shadow-soft);
  padding: 20px;
  margin-bottom: 20px;
}

.ssi-section{
  margin-bottom: 18px;
}

.ssi-title{
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 12px;
}

.ssi-subtitle{
  font-size: .9rem;
  color: var(--ssi-muted);
  margin-bottom: 16px;
}

.ssi-pill{
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .75rem;
  font-weight: 600;
  display: inline-block;
}

.ssi-pill.open{
  background:#e6f7ee;
  color:#198754;
}

.ssi-pill.process{
  background:#fff3cd;
  color:#856404;
}

.ssi-pill.closed{
  background:#e9ecef;
  color:#495057;
}