/* SSI UI System (v7.28.0) */
/* Base visual compartida: tipografia, color, iconos, layout, tablas y formularios. */

:root{
  --ssi-font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ssi-bg: #f4f6f5;
  --ssi-bg-soft: #f7fbf8;
  --ssi-card: #ffffff;
  --ssi-card-bg: var(--ssi-card);
  --ssi-text: #1f2937;
  --ssi-heading: #075E54;
  --ssi-muted: #6c757d;
  --ssi-primary: #25D366;
  --ssi-primary-dark: #1ebe5d;
  --ssi-primary-ink: #075E54;
  --ssi-green: var(--ssi-primary);
  --ssi-green-dark: #128C7E;
  --ssi-soft: #f7f7f7;
  --ssi-border: rgba(7,94,84,.12);
  --ssi-card-border: #dfe7e2;
  --ssi-soft-border: 1px solid rgba(7,94,84,.10);
  --ssi-danger: #dc3545;
  --ssi-warning: #ffc107;
  --ssi-info: #0d6efd;
  --ssi-radius: 8px;
  --ssi-radius-lg: 8px;
  --ssi-radius-xl: 8px;
  --ssi-button-radius: 8px;
  --ssi-card-radius: var(--ssi-radius);
  --ssi-shadow: 0 6px 18px rgba(0,0,0,.12);
  --ssi-shadow-soft: 0 4px 12px rgba(0,0,0,.06);
  --ssi-shadow-hover: 0 10px 24px rgba(0,0,0,.14);
  --ssi-icon-color: var(--ssi-primary-ink);
  --ssi-icon-accent: var(--ssi-primary);
  --ssi-instagram: #E1306C;
  --ssi-max-width: min(1500px, calc(100vw - 32px));
  --ssi-card-width: min(920px, 100%);
  --ssi-calendar-width: min(1500px, calc(100vw - 24px));
  --ssi-gutter: clamp(10px, 2vw, 18px);
  --ssi-nav-height: 54px;
  --wa-primary: var(--ssi-primary);
  --wa-primary-dark: var(--ssi-primary-dark);
  --wa-primary-ink: var(--ssi-primary-ink);
  --wa-bg: var(--ssi-bg);
  --wa-card: var(--ssi-card);
  --wa-border: var(--ssi-card-border);
  --wa-soft: var(--ssi-bg-soft);
  --wa-muted: #7b8a86;
  --wa-shadow: var(--ssi-shadow);
  --wa-shadow-soft: var(--ssi-shadow-soft);
  --wa-radius-xl: var(--ssi-radius-xl);
  --wa-radius-lg: var(--ssi-radius-lg);
}

/* Base */
html, body{ height:100%; }
body{
  font-family: var(--ssi-font-family);
  color: var(--ssi-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a{
  color: var(--ssi-primary-ink);
}

a:hover{
  color: var(--ssi-primary-dark);
}

.bi{
  line-height: 1;
  vertical-align: -.125em;
  color: inherit;
}

.ssi-title .bi,
.ssi-block-title .bi,
.card-title .bi,
.form-label .bi:not([class*="text-"]),
.input-group-text .bi:not([class*="text-"]),
h4 .bi:not([class*="text-"]),
h5 .bi:not([class*="text-"]),
h6 .bi:not([class*="text-"]),
.search-group-title .bi:not([class*="text-"]){
  color: var(--ssi-icon-color);
}

.bi.text-success,
.bi.text-primary{
  color: var(--ssi-icon-color) !important;
}

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

.bi.text-danger{
  color: var(--ssi-danger) !important;
}

.bi.text-warning{
  color: var(--ssi-warning) !important;
}

.btn .bi,
.alert .bi,
.badge .bi,
.nav-link .bi,
.dropdown-item .bi,
.navbar .bi{
  color: currentColor !important;
}

.ssi-icon,
.ssi-footer-icon{
  color: var(--ssi-icon-color) !important;
}

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

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

.ssi-max-600{ max-width:600px; }
.ssi-max-700{ max-width:700px; }
.ssi-max-1100{ max-width:1100px; }
.ssi-mt-10{ margin-top:10px; }
.ssi-w-auto{ width:auto; }
.ssi-scroll-150,
.ssi-scroll-200,
.ssi-scroll-220{ max-height:none; overflow:visible; }
.ssi-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.ssi-pre-wrap{ white-space:pre-wrap; }
.ssi-progress-zero{ width:0%; }
.day-color-pill-fill.is-empty{ background:rgba(0,0,0,.06); }
.ssi-col-time{ width:60px; }
.ssi-col-user{ width:180px; }
.ssi-col-actions{ width:120px; }
.ssi-col-min-220{ min-width:220px; }

.ssi-error-wrap{
  max-width:760px;
  margin:24px auto;
}

.ssi-error-card{
  background:var(--ssi-card);
  border:1px solid var(--ssi-card-border);
  border-radius:var(--ssi-radius-xl);
  box-shadow:var(--ssi-shadow);
  padding:24px;
}

.ssi-error-card h4{
  color:#842029;
  font-weight:700;
  margin-bottom:10px;
}

.ssi-error-card .alert{
  border-radius:var(--ssi-radius-lg);
  box-shadow:var(--ssi-shadow-soft);
}

.ssi-error-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.content{
  /* Your header already offsets the fixed navbar. This keeps it comfy on mobile. */
  padding: clamp(.65rem, 1.6vw, 1.25rem);
  margin-top: calc(var(--ssi-nav-height) + .85rem);
  margin-bottom: 1.5rem;
  max-width: var(--ssi-max-width);
}

/* On large screens, add breathing room */
@media (min-width: 992px){
  .content{ padding: clamp(1rem, 1.7vw, 1.5rem); margin-top: calc(var(--ssi-nav-height) + 1rem); }
}

/* 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{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-weight: 600;
}

.btn-primary,
.btn-success{
  --bs-btn-bg: var(--ssi-primary);
  --bs-btn-border-color: var(--ssi-primary);
  --bs-btn-hover-bg: var(--ssi-primary-dark);
  --bs-btn-hover-border-color: var(--ssi-primary-dark);
  --bs-btn-active-bg: var(--ssi-primary-dark);
  --bs-btn-active-border-color: var(--ssi-primary-dark);
}

.btn-outline-primary,
.btn-outline-success{
  --bs-btn-color: var(--ssi-primary-ink);
  --bs-btn-border-color: var(--ssi-primary);
  --bs-btn-hover-bg: var(--ssi-primary);
  --bs-btn-hover-border-color: var(--ssi-primary);
  --bs-btn-active-bg: var(--ssi-primary-dark);
  --bs-btn-active-border-color: var(--ssi-primary-dark);
}

.btn, .form-control, .form-select, .input-group-text{
  border-radius: var(--ssi-radius-lg);
}

.form-control:focus,
.form-select:focus{
  border-color: var(--ssi-primary);
  box-shadow: 0 0 0 .2rem rgba(37,211,102,.16);
}

.input-group-text{
  color: var(--ssi-primary-ink);
  background: var(--ssi-bg-soft);
  border-color: var(--ssi-card-border);
}
@media (max-width: 576px){
  .btn, .form-control, .form-select, .input-group-text{ border-radius: var(--ssi-radius); }
  .btn{ padding: .55rem .75rem; }
}

/* Navbar tweaks */
.navbar.ssi-glassbar{
  min-height:var(--ssi-nav-height);
  padding-top:.22rem !important;
  padding-bottom:.22rem !important;
}

.navbar.ssi-glassbar .container-fluid{
  gap:.45rem;
}

.navbar .navbar-brand{
  font-weight: 700;
  letter-spacing: .2px;
}

.navbar.ssi-glassbar .navbar-brand{
  font-size:1rem;
  line-height:1.1;
  padding-top:.16rem;
  padding-bottom:.16rem;
}

.navbar.ssi-glassbar .navbar-toggler{
  min-height:34px;
  padding:.22rem .45rem;
  border-radius:var(--ssi-button-radius);
}

@media (max-width: 576px){
  :root{ --ssi-nav-height: 48px; }

  .navbar .navbar-brand{
    font-size: .92rem;
    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; }

.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: se ajustan al ancho de la tarjeta */
  .table-responsive{
    overflow: visible !important;
  }
  table{
    max-width: 100% !important;
  }
  /* Si alguna tabla no está dentro de .table-responsive */
  .card table{
    display: table;
    width: 100% !important;
    overflow: visible !important;
    white-space: normal;
  }

  /* 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; }
}

/* Header / navegacion */
.notif-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  background:var(--ssi-danger);
  color:#fff;
  font-size:.7rem;
  padding:2px 6px;
  border-radius:999px;
  line-height:1;
  min-width:18px;
  text-align:center;
  display:none;
}

.notif-badge.is-visible{
  display:inline-block;
}

.bell-alert{ animation: bellshake .9s ease-in-out infinite; }

.navbar.ssi-glassbar .navbar-nav .nav-link.ssi-chat-alert,
.navbar.ssi-glassbar .btn.ssi-chat-alert{
  background:linear-gradient(135deg, rgba(37,211,102,.92) 0%, rgba(18,140,126,.92) 100%) !important;
  border-color:rgba(37,211,102,.95) !important;
  color:#fff !important;
  border-radius:999px;
  box-shadow:0 0 0 0 rgba(37,211,102,.00);
  animation:ssiChatNavBlink 1s ease-in-out infinite;
}

.navbar.ssi-glassbar .navbar-nav .nav-link.ssi-chat-alert:hover,
.navbar.ssi-glassbar .btn.ssi-chat-alert:hover{
  color:#fff !important;
}

.navbar.ssi-glassbar .navbar-nav .nav-link.ssi-chat-alert i,
.navbar.ssi-glassbar .btn.ssi-chat-alert i{
  color:#fff !important;
}

@keyframes bellshake{
  0%{ transform: rotate(0deg); }
  25%{ transform: rotate(-10deg); }
  50%{ transform: rotate(10deg); }
  75%{ transform: rotate(-10deg); }
  100%{ transform: rotate(0deg); }
}

@keyframes ssiChatNavBlink{
  0%, 100%{
    transform:translateY(0) scale(1);
    box-shadow:0 0 0 0 rgba(37,211,102,.00);
    filter:saturate(1);
  }
  50%{
    transform:translateY(-1px) scale(1.04);
    box-shadow:0 0 0 8px rgba(37,211,102,.22);
    filter:saturate(1.14);
  }
}

.mini-search-wrap{
  width:300px;
  max-width:300px;
  gap:2px;
}

.ssi-mini-search-label{
  font-size:.7rem;
  opacity:.75;
}

.mini-search-input{
  height:30px;
  padding:.15rem .55rem;
  font-size:.82rem;
  border-radius:999px 0 0 999px !important;
  border-right:0 !important;
}

.mini-search-btn{
  height:30px;
  border-radius:0 999px 999px 0 !important;
  padding:.15rem .55rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
}

.navbar.ssi-glassbar{
  background:rgba(18,18,20,.62) !important;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}

.navbar.ssi-glassbar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,.06) 35%, rgba(0,0,0,0) 75%);
  opacity:.9;
}

.navbar.ssi-glassbar .container-fluid{ position:relative; z-index:1; }

.navbar.ssi-glassbar .navbar-brand{
  font-weight:700;
  letter-spacing:.2px;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}

.navbar.ssi-glassbar .navbar-brand i{
  margin-right:.4rem;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.35));
}

.navbar.ssi-glassbar .btn{
  border-radius:999px !important;
  box-shadow:0 6px 16px rgba(0,0,0,.20);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  position:relative;
  z-index:1;
}

.navbar.ssi-glassbar .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.26);
}

.navbar.ssi-glassbar .btn:active{
  transform:translateY(0);
  box-shadow:0 6px 16px rgba(0,0,0,.20);
}

.navbar.ssi-glassbar .btn.btn-outline-light,
.navbar.ssi-glassbar .btn.btn-outline-warning{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.20) !important;
}

.navbar.ssi-glassbar .btn.btn-outline-warning{
  background:rgba(255,193,7,.10);
  border-color:rgba(255,193,7,.38) !important;
}

.navbar.ssi-glassbar .navbar-nav .nav-link{
  border-radius:999px;
  padding:.38rem .70rem;
  margin:.18rem .10rem;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  transition:background .14s ease, transform .12s ease;
  color:rgba(255,255,255,.88);
}

.navbar.ssi-glassbar .navbar-nav .nav-link:hover{
  background:rgba(255,255,255,.10);
  transform:translateY(-1px);
  color:rgba(255,255,255,.96);
}

.navbar.ssi-glassbar .btn.ssi-reservas-hoy-alert,
.navbar.ssi-glassbar .navbar-nav .nav-link.ssi-reservas-hoy-alert{
  color:#fff !important;
  background-color:#1ebe5d !important;
  border-color:#1ebe5d !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 0 2px rgba(30,190,93,.18),
    0 8px 22px rgba(30,190,93,.24) !important;
  animation:ssiReservasHoyBlink 0.95s linear infinite !important;
}

.navbar.ssi-glassbar .btn.ssi-reservas-hoy-alert:hover,
.navbar.ssi-glassbar .navbar-nav .nav-link.ssi-reservas-hoy-alert:hover{
  color:#fff;
}

.navbar.ssi-glassbar .btn.ssi-reservas-hoy-alert .badge,
.navbar.ssi-glassbar .navbar-nav .nav-link.ssi-reservas-hoy-alert .badge,
.ssi-reservas-hoy-count-alert{
  color:#fff !important;
  background-color:rgba(7,94,84,.92) !important;
  border:1px solid rgba(255,255,255,.26) !important;
  font-weight:700;
  min-width:1.45rem;
  text-align:center;
}

.navbar.ssi-glassbar .btn.ssi-reservas-hoy-alert.ssi-reservas-hoy-alert-alt,
.navbar.ssi-glassbar .navbar-nav .nav-link.ssi-reservas-hoy-alert.ssi-reservas-hoy-alert-alt,
.navbar.ssi-glassbar .btn.btn-outline-light.ssi-reservas-hoy-alert.ssi-reservas-hoy-alert-alt,
.navbar.ssi-glassbar .btn.btn-outline-light.ssi-reservas-hoy-alert.ssi-reservas-hoy-alert-alt:hover,
.navbar.ssi-glassbar .btn.btn-outline-light.ssi-reservas-hoy-alert.ssi-reservas-hoy-alert-alt:focus{
  background-color:#d6a000 !important;
  border-color:#d6a000 !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 0 0 2px rgba(214,160,0,.20),
    0 8px 24px rgba(214,160,0,.28) !important;
}

.navbar.ssi-glassbar .btn.ssi-reservas-hoy-alert .badge.ssi-reservas-hoy-alert-alt,
.navbar.ssi-glassbar .navbar-nav .nav-link.ssi-reservas-hoy-alert .badge.ssi-reservas-hoy-alert-alt,
.ssi-reservas-hoy-count-alert.ssi-reservas-hoy-alert-alt{
  background-color:#fff1b8 !important;
  color:#6c4b00 !important;
  border-color:rgba(108,75,0,.22) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset !important;
}

@keyframes ssiReservasHoyBlink{
  0%, 100%{
    background-color:#1ebe5d;
    border-color:#1ebe5d;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.10) inset,
      0 0 0 2px rgba(30,190,93,.18),
      0 8px 22px rgba(30,190,93,.24);
  }
  50%{
    background-color:#d6a000;
    border-color:#d6a000;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.12) inset,
      0 0 0 2px rgba(214,160,0,.20),
      0 8px 24px rgba(214,160,0,.28);
  }
}

@keyframes ssiReservasHoyBadgeBlink{
  0%, 100%{
    background-color:rgba(7,94,84,.30);
    box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;
  }
  50%{
    background-color:rgba(255,255,255,.22);
    box-shadow:0 0 0 1px rgba(255,255,255,.24) inset;
  }
}

@media (prefers-reduced-motion: reduce){
  .navbar.ssi-glassbar .btn.ssi-reservas-hoy-alert,
  .navbar.ssi-glassbar .navbar-nav .nav-link.ssi-reservas-hoy-alert,
  .navbar.ssi-glassbar .btn.ssi-reservas-hoy-alert .badge,
  .navbar.ssi-glassbar .navbar-nav .nav-link.ssi-reservas-hoy-alert .badge,
  .ssi-reservas-hoy-count-alert{
    animation:none !important;
  }
}

.navbar.ssi-glassbar .dropdown-menu{
  border-radius:var(--ssi-radius-lg);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 40px rgba(0,0,0,.30);
  overflow:hidden;
}

.navbar.ssi-glassbar .dropdown-item{
  padding:.6rem .85rem;
}

.navbar.ssi-glassbar .dropdown-item i{ margin-right:.45rem; }

.navbar.ssi-glassbar .navbar-text,
.navbar.ssi-glassbar .small.text-light{
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}

.navbar.ssi-glassbar #notifBell{
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}

.navbar.ssi-glassbar #miniSystemSearch .mini-search-input{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}

.navbar.ssi-glassbar #miniSystemSearch .mini-search-input::placeholder{
  color:rgba(255,255,255,.72);
}

.navbar.ssi-glassbar #miniSystemSearch .mini-search-btn{
  background:rgba(37,211,102,.16);
  border:1px solid rgba(255,255,255,.18);
  border-left:0 !important;
  color:#fff;
}

.navbar.ssi-glassbar #miniSystemSearch .mini-search-btn:hover{
  background:rgba(37,211,102,.28);
}

@media (max-width: 1399.98px){
  :root{ --ssi-nav-height: 50px; }

  .navbar.ssi-glassbar{
    padding-top:.18rem !important;
    padding-bottom:.18rem !important;
  }

  .navbar.ssi-glassbar .navbar-collapse{
    max-height:none;
    overflow:visible;
    display:none;
    padding:.65rem 0 .4rem;
    width:100%;
    flex-basis:100%;
  }

  .navbar.ssi-glassbar .navbar-collapse.show,
  .navbar.ssi-glassbar .navbar-collapse.collapsing{
    display:block !important;
  }

  .navbar.ssi-glassbar .navbar-nav .nav-link{
    width:100%;
    justify-content:flex-start;
    padding:.48rem .70rem !important;
    margin:.10rem 0 !important;
    min-height:38px !important;
    font-size:.93rem !important;
  }

  .navbar.ssi-glassbar .btn{
    width:100%;
    justify-content:center;
    min-height:38px !important;
    font-size:.92rem !important;
  }

  .navbar.ssi-glassbar .navbar-text{
    display:block;
    margin:.35rem 0 .75rem;
  }

  .navbar.ssi-glassbar #miniSystemSearch{
    width:100%;
    max-width:none;
    margin:.25rem 0 .75rem;
  }

  .mini-search-wrap{
    width:100%;
    max-width:none;
  }

  .navbar.ssi-glassbar .mini-search-input,
  .navbar.ssi-glassbar .mini-search-btn{
    height:38px !important;
    min-height:38px !important;
  }

  .navbar.ssi-glassbar .position-relative,
  .navbar.ssi-glassbar .navbar-text,
  .navbar.ssi-glassbar a.btn{
    margin-right:0 !important;
    margin-bottom:.45rem;
  }

  .navbar.ssi-glassbar .ssi-current-user-name{
    display:inline;
  }
}

@media (min-width: 1400px) and (max-width: 1599.98px){
  .navbar.ssi-glassbar .mini-search-wrap{
    width:clamp(150px, 14vw, 210px);
    max-width:210px;
  }

  .navbar.ssi-glassbar .btn{
    padding:.20rem .42rem !important;
  }

  .navbar.ssi-glassbar .navbar-nav .nav-link{
    padding:.22rem .45rem !important;
  }

  .ssi-current-user{
    min-width:0;
  }

  .ssi-current-user-name{
    max-width:120px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display:inline-block;
    vertical-align:middle;
  }
}


/* =========================
   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:rgba(37,211,102,.12);
  color:var(--ssi-primary-ink);
}

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

.ssi-pill.closed{
  background:#e9ecef;
  color:var(--ssi-muted);
}

/* =========================================================
   SSI UI AUTHORITY LAYER
   Esta seccion se carga al final del documento desde footer.php.
   Define la UI unica del sistema aunque existan estilos historicos.
========================================================= */

html body{
  font-family:var(--ssi-font-family) !important;
  color:var(--ssi-text) !important;
  background:var(--ssi-bg) !important;
}

h1,h2,h3,h4,h5,h6,
.ssi-title,
.ssi-block-title,
.calendar-main-title,
.reserva-header-title,
.password-header-title,
.users-title h4,
.search-title,
.ticket-title{
  color:var(--ssi-heading) !important;
  font-family:var(--ssi-font-family) !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}

p,
label,
.form-label,
.text-muted,
.ssi-subtitle,
.calendar-subtitle,
.reserva-header-sub,
.password-header-sub,
.users-subtitle,
.search-subtitle,
.small,
small{
  font-family:var(--ssi-font-family) !important;
  letter-spacing:0 !important;
}

.content{
  width:100% !important;
  max-width:var(--ssi-max-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.ssi-container{
  max-width:var(--ssi-max-width) !important;
}

.card,
.ssi-card,
.card-auto,
.wa-main,
.wa-card,
.res-card,
.ticket-card,
.reservation-card,
.password-card-wa,
.reserva-card-wa,
.search-shell,
.search-card,
.result-card,
.summary-grid-card,
.series-box,
.stats-box,
.subcard,
.ticket-stat-card,
.ticket-stats-progress,
.admin-danger-card,
.notif-card,
.install-card,
.modal-content,
.list-group,
.alert,
.table-responsive{
  border-radius:var(--ssi-radius) !important;
  box-shadow:var(--ssi-shadow-soft) !important;
  border:1px solid var(--ssi-card-border) !important;
  background:var(--ssi-card) !important;
}

.card:hover,
.ssi-card:hover,
.card-auto:hover,
.wa-card:hover,
.res-card:hover,
.ticket-card:hover,
.reservation-card:hover,
.result-card:hover,
.summary-grid-card:hover,
.ticket-stat-card:hover{
  box-shadow:var(--ssi-shadow-hover) !important;
}

.card-auto,
.wa-main,
.password-card-wa,
.reserva-card-wa,
.wa-reserva-wrapper,
.search-shell,
.user-wrapper > .card,
.user-wrapper > .card-auto,
.ssi-page-card{
  width:100% !important;
  max-width:var(--ssi-card-width) !important;
  min-width:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.wa-main,
.calendar-card,
.calendar-shell,
.reservas-box,
.stats-box.is-wide,
.ssi-wide-card{
  max-width:var(--ssi-max-width) !important;
}

.card-body{
  border-radius:var(--ssi-radius) !important;
}

.btn,
button.btn,
a.btn,
input.btn,
.btn-wa,
.btn-wa-back,
.btn-wa-primary,
.btn-wa-secondary,
.ssi-btn-primary,
.ssi-btn-secondary,
.mini-search-btn,
.day-add-btn{
  border-radius:var(--ssi-button-radius) !important;
  font-family:var(--ssi-font-family) !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  min-height:36px;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.4rem !important;
  box-shadow:none !important;
  text-decoration:none !important;
}

.btn-sm{
  min-height:32px !important;
}

.btn-lg{
  min-height:42px !important;
}

.btn-primary,
.btn-success,
.btn-wa,
.btn-wa-primary,
.ssi-btn-primary,
.mini-search-btn,
.day-add-btn{
  background:var(--ssi-primary) !important;
  border-color:var(--ssi-primary) !important;
  color:#fff !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-wa:hover,
.btn-wa-primary:hover,
.ssi-btn-primary:hover,
.mini-search-btn:hover,
.day-add-btn:hover{
  background:var(--ssi-primary-dark) !important;
  border-color:var(--ssi-primary-dark) !important;
  color:#fff !important;
}

.btn-volver-arriba{
  position:fixed !important;
  right:18px !important;
  bottom:16px !important;
  z-index:99999 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:36px;
  padding:.62rem .95rem;
  border:1px solid var(--ssi-primary) !important;
  border-radius:var(--ssi-button-radius) !important;
  background:var(--ssi-primary) !important;
  color:#fff !important;
  font-family:var(--ssi-font-family) !important;
  font-size:.82rem;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-decoration:none !important;
  box-shadow:0 8px 22px rgba(0,0,0,.22) !important;
  cursor:pointer;
  user-select:none;
}

.btn-volver-arriba:hover,
.btn-volver-arriba:focus{
  background:var(--ssi-primary-dark) !important;
  border-color:var(--ssi-primary-dark) !important;
  color:#fff !important;
  text-decoration:none !important;
  box-shadow:0 10px 24px rgba(0,0,0,.26) !important;
}

.btn-volver-arriba:focus{
  outline:2px solid rgba(37,211,102,.35) !important;
  outline-offset:2px;
}

.btn-volver-arriba i{
  font-size:.9rem;
  line-height:1;
}

#backTop.btn-volver-arriba{
  display:none;
}

@media (max-width:576px){
  .btn-volver-arriba{
    right:12px !important;
    bottom:12px !important;
    padding:.56rem .78rem;
    font-size:.78rem;
  }
}

.btn-secondary,
.btn-wa-secondary,
.ssi-btn-secondary{
  background:#e9ecef !important;
  border-color:#dfe7e2 !important;
  color:var(--ssi-text) !important;
}

.btn-outline-primary,
.btn-outline-success,
.btn-outline-secondary,
.btn-wa-back{
  background:#fff !important;
  border-color:var(--ssi-primary) !important;
  color:var(--ssi-primary-ink) !important;
}

.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-secondary:hover,
.btn-wa-back:hover{
  background:var(--ssi-bg-soft) !important;
  border-color:var(--ssi-primary-dark) !important;
  color:var(--ssi-primary-ink) !important;
}

.btn-danger,
.btn-outline-danger:hover{
  background:var(--ssi-danger) !important;
  border-color:var(--ssi-danger) !important;
  color:#fff !important;
}

.btn-outline-danger{
  background:#fff !important;
  border-color:var(--ssi-danger) !important;
  color:var(--ssi-danger) !important;
}

.form-control,
.form-select,
.input-group-text,
textarea,
select,
input{
  border-radius:var(--ssi-radius) !important;
  font-family:var(--ssi-font-family) !important;
}

.badge,
.ssi-pill,
.result-badge,
.badge-soft,
.badge-room-enabled,
.badge-room-disabled,
.room-chip,
.mention-chip,
.online-pill,
.event-pill-badge{
  border-radius:var(--ssi-radius) !important;
  font-family:var(--ssi-font-family) !important;
  font-weight:600 !important;
}

.bi,
i.bi,
.ticket-stat-icon,
.users-title-icon,
.reserva-header-icon,
.password-header-icon,
.notif-icon,
.search-type-icon{
  color:var(--ssi-icon-color) !important;
}

.btn .bi,
.navbar .bi,
.dropdown-item .bi,
.alert .bi,
.badge .bi,
.reserva-header-icon .bi,
.password-header-icon .bi,
.users-title-icon .bi{
  color:currentColor !important;
}

.reserva-header-icon,
.password-header-icon,
.users-title-icon,
.ticket-stat-icon,
.stat-icon,
.rank-badge{
  background:rgba(37,211,102,.12) !important;
  color:var(--ssi-icon-color) !important;
  border-radius:var(--ssi-radius) !important;
  box-shadow:none !important;
}

.table{
  color:var(--ssi-text) !important;
  font-family:var(--ssi-font-family) !important;
}

.table thead th,
.table-modern thead th{
  background:#eef1f4 !important;
  color:var(--ssi-heading) !important;
  font-weight:700 !important;
  border-color:var(--ssi-card-border) !important;
}

.table td,
.table th{
  border-color:var(--ssi-card-border) !important;
}

.progress,
.progress-thin,
.mini-bar-track{
  border-radius:var(--ssi-radius) !important;
  background:#e9ecef !important;
}

.progress-bar,
.progress-thin .bar,
.mini-bar-fill{
  background:var(--ssi-primary) !important;
}

.navbar.ssi-glassbar .btn,
.navbar.ssi-glassbar .nav-link{
  border-radius:var(--ssi-button-radius) !important;
}

.navbar.ssi-glassbar .btn{
  min-height:28px !important;
  padding:.22rem .55rem !important;
  font-size:.82rem !important;
  line-height:1.1 !important;
}

.navbar.ssi-glassbar .navbar-nav .nav-link{
  min-height:28px !important;
  padding:.24rem .52rem !important;
  margin:.08rem .06rem !important;
  font-size:.88rem !important;
  line-height:1.1 !important;
}

.navbar.ssi-glassbar .navbar-text,
.navbar.ssi-glassbar .small.text-light{
  font-size:.82rem !important;
  line-height:1.1 !important;
}

.navbar.ssi-glassbar .mini-search-wrap{
  width:clamp(190px, 18vw, 260px);
  max-width:260px;
}

.navbar.ssi-glassbar .ssi-mini-search-label{
  display:none;
}

.navbar.ssi-glassbar .mini-search-input,
.navbar.ssi-glassbar .mini-search-btn{
  height:28px !important;
  min-height:28px !important;
}

.navbar.ssi-glassbar .mini-search-input{
  font-size:.78rem !important;
  padding:.12rem .48rem !important;
}

.navbar.ssi-glassbar #notifBell{
  width:32px !important;
  padding-left:.35rem !important;
  padding-right:.35rem !important;
}

.reservation-color-box{
  border:1px solid var(--ssi-card-border) !important;
  border-radius:var(--ssi-radius) !important;
  background:linear-gradient(180deg, #fbfffc 0%, #ffffff 100%) !important;
  box-shadow:var(--ssi-shadow-soft) !important;
  padding:14px !important;
}

.reservation-color-grid{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}

.reservation-color-input{
  width:46px !important;
  height:38px !important;
  min-height:38px !important;
  padding:4px !important;
  border:1px solid var(--ssi-card-border) !important;
  border-radius:var(--ssi-radius) !important;
  background:#fff !important;
  cursor:pointer !important;
}

.reservation-color-presets{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}

.reservation-color-preset{
  width:34px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 !important;
  border:2px solid rgba(255,255,255,.9) !important;
  border-radius:var(--ssi-radius) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.14) !important;
  background:var(--reservation-color, var(--ssi-primary)) !important;
  cursor:pointer !important;
}

.reservation-color-preset.is-active{
  box-shadow:0 0 0 3px rgba(7,94,84,.22) !important;
  transform:translateY(-1px);
}

.reservation-color-preview{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:36px !important;
  padding:7px 12px !important;
  border-radius:var(--ssi-radius) !important;
  background:var(--reservation-color, var(--ssi-primary)) !important;
  color:var(--reservation-color-text, #fff) !important;
  font-weight:700 !important;
  font-size:.86rem !important;
}

.reservation-color-dot{
  display:inline-block !important;
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
  background:var(--reservation-color, var(--ssi-primary)) !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 0 3px rgba(0,0,0,.12) !important;
  margin-right:6px !important;
  vertical-align:middle !important;
}

.ssi-featured-title-row{
  display:flex !important;
  align-items:flex-start !important;
  gap:.45rem !important;
  min-width:0 !important;
  flex-wrap:wrap !important;
}

.ssi-featured-title-main{
  min-width:0 !important;
  flex:1 1 auto !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

.ssi-featured-chip{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:5px 10px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg, rgba(255,248,222,.98) 0%, rgba(255,239,184,.94) 100%) !important;
  border:1px solid rgba(255,193,7,.58) !important;
  color:#8a6700 !important;
  font-size:.8rem !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  box-shadow:
    0 0 0 1px rgba(255,193,7,.18) inset,
    0 5px 12px rgba(255,193,7,.14) !important;
  white-space:nowrap !important;
  vertical-align:middle !important;
}

.ssi-featured-chip i{
  color:#f0b400 !important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.16)) !important;
}

.ssi-featured-chip--compact{
  padding:4px 9px !important;
  font-size:.75rem !important;
}

.ssi-featured-chip--mini{
  padding:3px 8px !important;
  font-size:.72rem !important;
  border-radius:14px !important;
  gap:5px !important;
}

.ssi-action-confirm-list li.ssi-action-confirm-item-custom{
  display:block !important;
  padding:.72rem .85rem !important;
}

.ssi-action-confirm-list li.ssi-action-confirm-item-custom::before{
  display:none !important;
}

.ssi-action-confirm-detail-label{
  margin-bottom:.34rem !important;
  color:var(--ssi-muted) !important;
  font-size:.76rem !important;
  font-weight:800 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
}

.ssi-action-confirm-detail-value{
  display:flex !important;
  align-items:flex-start !important;
  gap:.45rem !important;
  min-width:0 !important;
  flex-wrap:wrap !important;
}

.auth-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 12px;
  background:var(--ssi-bg);
}

.auth-card{
  width:100%;
  max-width:460px;
  background:var(--ssi-card-bg);
  border:1px solid var(--ssi-card-border);
  border-radius:var(--ssi-radius);
  box-shadow:var(--ssi-shadow);
  padding:24px;
}

.auth-card-title{
  margin:0;
  color:var(--ssi-primary-ink);
  font-size:1.35rem;
  font-weight:800;
}

.auth-card-subtitle{
  margin:.25rem 0 0;
  color:var(--ssi-muted);
  font-size:.92rem;
}

.auth-icon{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--ssi-radius);
  background:rgba(37,211,102,.12);
  color:var(--ssi-primary-ink);
}

.calendar-wrapper,
#calendarContent{
  overscroll-behavior:contain;
}

.calendar-table .event-pill{
  min-height:28px !important;
  margin:.22rem 0 .16rem !important;
  padding:.34rem .46rem !important;
  border-radius:8px !important;
}

.calendar-table .event-pill-head{
  align-items:flex-start !important;
  gap:.42rem !important;
  min-width:0 !important;
}

.calendar-table .event-pill-left{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:.18rem !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}

.calendar-table .event-pill-title{
  flex:1 1 auto !important;
  min-width:0 !important;
  margin:0 !important;
  font-size:.80rem !important;
  line-height:1.16 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}

.calendar-table .event-pill-title-row{
  align-items:flex-start !important;
  min-width:0 !important;
  gap:.22rem !important;
}

.calendar-table .event-pill-title-text{
  display:block !important;
  min-width:0 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}

.calendar-table .event-pill-time{
  order:0 !important;
  flex:0 0 auto !important;
  align-self:flex-start !important;
  font-size:.66rem !important;
  line-height:1.08 !important;
  white-space:nowrap !important;
  opacity:.90 !important;
}

.calendar-table .event-pill-badge{
  display:none !important;
}

.calendar-table .estado-texto{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

@media (max-width:991px){
  .calendar-table .event-pill{
    padding:.30rem .40rem !important;
  }

  .calendar-table .event-pill-title{
    font-size:.68rem !important;
  }

  .calendar-table .event-pill-time{
    font-size:.60rem !important;
  }

  .calendar-table .event-pill-badge{
    display:none !important;
  }
}

@media (max-width:768px){
  .calendar-wrapper,
  #calendarContent{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .calendar-card .card-body,
  #calendarContent .card-body{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .calendar-table{
    min-width:820px !important;
  }

  .calendar-table .day-inner{
    min-height:170px !important;
  }

  .calendar-table .event-pill-title{
    font-size:.74rem !important;
    line-height:1.12 !important;
  }

  .calendar-table .event-pill-time{
    font-size:.63rem !important;
  }

  .card-auto,
  .wa-main,
  .password-card-wa,
  .reserva-card-wa,
  .wa-reserva-wrapper,
  .search-shell,
  .ssi-page-card{
    max-width:100% !important;
  }
}

/* =========================================================
   SSI RESPONSIVE ADAPTIVE LAYER v7.12
   Ajuste fluido para escritorio, notebook, tablet y celular.
========================================================= */

*, *::before, *::after{
  box-sizing:border-box;
}

.ssi-page,
.ssi-main,
.ssi-container,
.content{
  min-width:0 !important;
}

.ssi-page .container,
.ssi-page .container-fluid,
.ssi-page .container-sm,
.ssi-page .container-md,
.ssi-page .container-lg,
.ssi-page .container-xl,
.ssi-page .container-xxl{
  max-width:var(--ssi-max-width) !important;
  padding-left:var(--ssi-gutter) !important;
  padding-right:var(--ssi-gutter) !important;
}

.content,
.wa-main,
.calendar-wrapper,
.reserva-wrapper-wa,
.password-wrapper-wa,
.search-wrapper,
.card-center-wrapper{
  width:100% !important;
  max-width:var(--ssi-max-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.card,
.ssi-card,
.card-auto,
.wa-card,
.wa-main,
.reservas-box,
.calendar-card,
.reserva-card-wa,
.password-card-wa,
.search-card,
.search-shell,
.result-card,
.summary-grid-card,
.series-box,
.stat-card,
.stats-box,
.subcard,
.notif-card{
  max-width:100% !important;
}

.table-responsive,
.calendar-wrapper,
.calendar-card,
.chat-container,
.rooms-checklist,
.mentions-dropdown{
  max-width:100%;
}

.table-responsive{
  overflow-x:visible !important;
  overflow-y:visible !important;
  overscroll-behavior-x:auto;
}

.table-responsive > .table,
.table-responsive > table{
  min-width:0;
  width:100%;
}

.row{
  min-width:0;
}

.row > *{
  min-width:0;
}

.form-control,
.form-select,
textarea,
select,
input,
.input-group{
  min-width:0 !important;
}

.btn,
.form-control,
.form-select,
.input-group-text{
  min-height:clamp(34px, 4vw, 38px);
}

.btn-sm,
.input-group-sm > .btn,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text{
  min-height:clamp(30px, 3.8vw, 34px) !important;
}

.card-body,
.ssi-card,
.wa-main,
.reservas-box,
.reserva-card-wa,
.password-card-wa,
.search-card,
.search-shell{
  padding:clamp(12px, 2vw, 22px) !important;
}

.calendar-card .card-body{
  overflow:visible;
}

.calendar-table{
  width:100%;
}

@media (min-width:1400px){
  :root{
    --ssi-max-width:min(1540px, calc(100vw - 48px));
    --ssi-card-width:min(920px, 100%);
    --ssi-calendar-width:min(1540px, calc(100vw - 32px));
  }
}

@media (max-width:1199.98px){
  :root{
    --ssi-max-width:calc(100vw - 24px);
    --ssi-card-width:min(920px, 100%);
    --ssi-calendar-width:calc(100vw - 24px);
  }

  .wa-main,
  .reservas-box,
  .calendar-wrapper{
    margin-top:14px !important;
  }
}

@media (max-width:991.98px){
  .content{
    margin-top:calc(var(--ssi-nav-height) + .55rem) !important;
  }

  .wa-header-bar,
  .reserva-header-wa,
  .password-header-wa{
    align-items:stretch !important;
  }

  .mini-search-wrap{
    width:100% !important;
  }
}

@media (max-width:767.98px){
  :root{
    --ssi-max-width:100vw;
    --ssi-card-width:100%;
    --ssi-gutter:10px;
  }

  body{
    font-size:.94rem;
  }

  .ssi-main{
    padding-top:6px !important;
    padding-bottom:18px !important;
  }

  .content{
    padding:8px !important;
    margin-bottom:.75rem !important;
  }

  .ssi-container,
  .ssi-page .container,
  .ssi-page .container-fluid{
    padding-left:8px !important;
    padding-right:8px !important;
  }

  h1{ font-size:1.45rem !important; }
  h2{ font-size:1.30rem !important; }
  h3{ font-size:1.18rem !important; }
  h4,
  .reserva-header-title,
  .password-header-title,
  .calendar-main-title,
  .ssi-dashboard-title{
    font-size:1.05rem !important;
  }

  .card,
  .ssi-card,
  .card-auto,
  .wa-main,
  .wa-card,
  .reservas-box,
  .calendar-card,
  .reserva-card-wa,
  .password-card-wa,
  .search-card,
  .search-shell,
  .result-card,
  .summary-grid-card,
  .series-box,
  .stats-box,
  .subcard,
  .alert,
  .list-group,
  .modal-content{
    border-radius:var(--ssi-radius) !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .wa-main,
  .reservas-box,
  .calendar-wrapper,
  .reserva-wrapper-wa,
  .password-wrapper-wa{
    margin-top:8px !important;
  }

  .wa-header-bar,
  .reserva-header-wa,
  .password-header-wa,
  .calendar-card .card-body > .mb-3 > .d-flex{
    flex-direction:column !important;
  }

  #clockBox{
    width:100% !important;
    min-width:0 !important;
    text-align:left !important;
  }

  .btn:not(.navbar-toggler):not(.btn-close):not(.day-add-btn):not(.reservation-color-preset),
  a.btn:not(.navbar-toggler):not(.btn-close):not(.day-add-btn):not(.reservation-color-preset){
    width:100%;
  }

  .input-group .btn,
  .mini-search-btn,
  #notifBell{
    width:auto !important;
    flex:0 0 auto;
  }

  .btn-group,
  .input-group,
  .rooms-toolbar{
    width:100%;
  }

  .btn-group{
    display:grid !important;
    grid-template-columns:1fr;
    gap:.45rem;
  }

  .input-group > .form-control{
    min-width:0;
  }

  .table{
    font-size:.82rem !important;
  }

  .table td,
  .table th{
    padding:.48rem .55rem !important;
  }

  .calendar-wrapper{
    overflow:visible;
  }

  .calendar-card .card-body{
    padding:8px !important;
  }

  .calendar-table{
    min-width:0;
  }

  .calendar-table .day-inner{
    min-height:132px !important;
  }

  .calendar-table .event-pill-title{
    font-size:.66rem !important;
    line-height:1.1 !important;
  }

  .calendar-table .event-pill-time{
    font-size:.58rem !important;
  }

  .reserva-modal-global,
  .modal-dialog{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    margin:8px auto !important;
  }

  .reserva-modal-footer,
  .modal-footer{
    flex-direction:column !important;
  }

  .reserva-modal-footer .btn,
  .modal-footer .btn{
    width:100%;
  }

  .rooms-checklist{
    max-height:260px !important;
  }

  .room-check{
    align-items:flex-start !important;
  }

  .room-check .room-name{
    white-space:normal !important;
    max-width:100% !important;
  }
}

@media (max-width:575.98px){
  :root{
    --ssi-nav-height:46px;
    --ssi-gutter:8px;
  }

  .navbar.ssi-glassbar{
    min-height:46px !important;
  }

  .navbar.ssi-glassbar .navbar-brand{
    max-width:calc(100vw - 76px);
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .navbar.ssi-glassbar .navbar-toggler{
    min-height:32px;
    padding:.18rem .42rem;
  }

  .content{
    padding-left:6px !important;
    padding-right:6px !important;
  }

  .card-body,
  .ssi-card,
  .wa-main,
  .reservas-box,
  .reserva-card-wa,
  .password-card-wa,
  .search-card,
  .search-shell{
    padding:10px !important;
  }

  .calendar-table{
    min-width:0;
  }

  .auth-card{
    padding:18px !important;
  }

  footer{
    margin-top:.75rem !important;
    padding-top:.75rem !important;
    padding-bottom:.75rem !important;
  }

  .ssi-footer-card .card-body{
    padding:10px !important;
  }
}

/* =========================================================
   SSI WIDTH AUTHORITY v7.13
   Tarjetas estandar centradas; calendarios a ancho de monitor.
========================================================= */

.card:not(.calendar-card):not(.ssi-footer-card),
.ssi-card,
.card-auto,
.wa-card,
.res-card,
.ticket-card,
.reservation-card,
.password-card-wa,
.reserva-card-wa,
.search-shell,
.search-card,
.result-card,
.summary-grid-card,
.series-box,
.stats-box:not(.is-wide),
.subcard,
.ticket-stat-card,
.admin-danger-card,
.notif-card,
.install-card,
.wa-header-bar,
.reservas-box:not(.ssi-calendar-section),
.ssi-standard-card,
.ssi-standard-section{
  width:100% !important;
  max-width:var(--ssi-card-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

#dashboardTop.ssi-dashboard-shell{
  width:100% !important;
  max-width:var(--ssi-calendar-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

#dashboardTop.ssi-dashboard-shell:hover{
  transform:none !important;
  box-shadow:none !important;
}

.calendar-wrapper,
.calendar-card,
.calendar-wrapper .card,
.ssi-calendar-section,
.ssi-calendar-section .calendar-wrapper,
.ssi-calendar-section .calendar-card,
#calendarHost,
#calendarContent,
.ssi-wide-card{
  width:100% !important;
  max-width:var(--ssi-calendar-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.ssi-calendar-section{
  padding:clamp(12px, 1.8vw, 20px) !important;
}

.ssi-calendar-section .calendar-wrapper{
  margin-top:0 !important;
}

@media (max-width:767.98px){
  .card:not(.calendar-card):not(.ssi-footer-card),
  .ssi-card,
  .card-auto,
  .wa-card,
  .res-card,
  .ticket-card,
  .reservation-card,
  .password-card-wa,
  .reserva-card-wa,
  .search-shell,
  .search-card,
  .result-card,
  .summary-grid-card,
  .series-box,
  .stats-box,
  .subcard,
  .ticket-stat-card,
  .admin-danger-card,
  .notif-card,
  .install-card,
  .wa-header-bar,
  .reservas-box,
  .ssi-standard-card,
  .ssi-standard-section,
  .ssi-calendar-section{
    max-width:100% !important;
  }

  #dashboardTop.ssi-dashboard-shell{
    max-width:100% !important;
  }
}

/* =========================================================
   SSI DESIGN AUTHORITY v7.14
   Tipografia y componentes consistentes en todo el sistema.
========================================================= */

body,
button,
input,
select,
textarea,
.btn,
.form-control,
.form-select,
.dropdown-menu,
.dropdown-item,
.navbar,
.card,
.modal,
.alert,
.badge,
.table{
  font-family:var(--ssi-font-family) !important;
  letter-spacing:0 !important;
}

.card,
.ssi-card,
.card-auto,
.wa-card,
.res-card,
.ticket-card,
.reservation-card,
.password-card-wa,
.reserva-card-wa,
.search-shell,
.search-card,
.result-card,
.summary-grid-card,
.series-box,
.stats-box,
.subcard,
.notif-card,
.install-card,
.wa-header-bar,
.reservas-box,
.calendar-card{
  border-radius:var(--ssi-card-radius) !important;
  border:1px solid var(--ssi-card-border) !important;
  box-shadow:var(--ssi-shadow-soft) !important;
}

.btn,
.form-control,
.form-select,
.input-group-text,
.dropdown-menu,
.dropdown-item,
.badge,
.alert{
  border-radius:var(--ssi-radius) !important;
}

.btn{
  font-weight:600 !important;
}

.table thead th{
  color:var(--ssi-heading) !important;
  font-weight:700 !important;
}

/* =========================================================
   SSI NO INTERNAL SCROLL v7.15
   El contenido se adapta al ancho de su tarjeta sin barras internas.
========================================================= */

.navbar.ssi-glassbar .navbar-collapse,
.calendar-card .card-body,
.calendar-wrapper,
.rooms-checklist,
.mentions-dropdown,
.chat-container{
  overflow:visible !important;
  overflow-x:visible !important;
  overflow-y:visible !important;
  max-height:none !important;
}

.table-responsive{
  overflow-x:visible !important;
  overflow-y:visible !important;
  max-height:none !important;
}

.table-responsive > .table,
.table-responsive > table,
.card table{
  display:table !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  table-layout:auto !important;
  white-space:normal !important;
}

.table{
  font-size:.86rem !important;
}

.table th,
.table td,
.card th,
.card td{
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  max-width:none !important;
  vertical-align:middle !important;
  padding:.44rem .50rem !important;
}

.table thead th,
.card table thead th{
  white-space:nowrap !important;
}

.table td.text-end,
.table th.text-end,
.table td:last-child,
.table th:last-child{
  white-space:nowrap !important;
}

.table td a,
.table td .btn,
.table td .badge,
.table th .badge{
  overflow-wrap:normal !important;
  word-break:normal !important;
}

.ssi-data-table{
  min-width:0 !important;
  table-layout:fixed !important;
  font-size:.84rem !important;
}

.ssi-ticket-table{
  min-width:0 !important;
  table-layout:fixed !important;
  font-size:.82rem !important;
}

.ssi-table-page-card{
  width:100% !important;
  max-width:min(1260px, calc(100vw - 28px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.ssi-table-page-card .table-responsive{
  width:100% !important;
}

.ssi-table-actions{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:.25rem;
  flex-wrap:nowrap;
}

.ssi-table-actions .btn,
.ssi-table-actions form,
.ssi-table-actions button{
  width:auto !important;
  flex:0 0 auto !important;
}

.ssi-data-table th:nth-child(1),
.ssi-data-table td:nth-child(1){
  width:72px;
}

.ssi-data-table th:nth-child(2),
.ssi-data-table td:nth-child(2){
  width:170px;
}

.ssi-data-table th:nth-child(4),
.ssi-data-table td:nth-child(4){
  width:150px;
}

.ssi-data-table th:nth-child(5),
.ssi-data-table td:nth-child(5){
  width:86px;
}

.ssi-data-table th:first-child,
.ssi-data-table td:first-child,
.ssi-data-table th:last-child,
.ssi-data-table td:last-child{
  white-space:nowrap !important;
}

.ssi-data-table th:nth-child(4),
.ssi-data-table td:nth-child(4){
  white-space:nowrap !important;
}

.ssi-ticket-table th:nth-child(1),
.ssi-ticket-table td:nth-child(1){
  width:52px;
  white-space:nowrap !important;
}

.ssi-ticket-table th:nth-child(2),
.ssi-ticket-table td:nth-child(2){
  width:20%;
}

.ssi-ticket-table th:nth-child(3),
.ssi-ticket-table td:nth-child(3){
  width:190px;
}

.ssi-ticket-table th:nth-child(4),
.ssi-ticket-table td:nth-child(4),
.ssi-ticket-table th:nth-child(5),
.ssi-ticket-table td:nth-child(5),
.ssi-ticket-table th:nth-child(6),
.ssi-ticket-table td:nth-child(6){
  width:118px;
}

.ssi-ticket-table th:nth-child(7),
.ssi-ticket-table td:nth-child(7){
  width:138px;
  white-space:nowrap !important;
}

.ssi-ticket-table th:nth-child(8),
.ssi-ticket-table td:nth-child(8){
  width:116px;
  white-space:nowrap !important;
}

.ssi-ticket-table .form-select-sm{
  max-width:112px;
  font-size:.76rem !important;
  padding:.16rem 1.55rem .16rem .42rem !important;
}

.ssi-ticket-table .btn-sm,
.ssi-data-table .btn-sm{
  min-width:30px !important;
  width:30px !important;
  min-height:30px !important;
  padding:.18rem .28rem !important;
}

.reserva-wrapper-wa .rooms-checklist{
  max-height:240px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

.reserva-wrapper-wa .rooms-checklist .room-check{
  min-height:42px;
}

footer{
  padding-left:var(--ssi-gutter) !important;
  padding-right:var(--ssi-gutter) !important;
}

footer .ssi-container{
  max-width:min(820px, calc(100vw - 24px)) !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

.ssi-footer-card{
  width:100% !important;
  max-width:min(820px, 100%) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.ssi-footer-card .card-body{
  padding:.85rem 1rem !important;
}

.ssi-footer-card small{
  font-size:.78rem !important;
  line-height:1.25 !important;
}

.ssi-footer-card .d-flex{
  row-gap:.25rem !important;
}

.calendar-table,
.calendar-card .calendar-table,
.calendar-wrapper .calendar-table{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  table-layout:fixed !important;
}

.calendar-table th,
.calendar-table td{
  max-width:none !important;
  min-width:0 !important;
  vertical-align:top !important;
  overflow-wrap:anywhere;
}

.calendar-table td{
  padding:.18rem !important;
}

.calendar-table .day-inner{
  padding:.38rem .42rem .44rem !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  height:100% !important;
}

.calendar-table .day-header{
  display:grid !important;
  grid-template-columns:2.2ch minmax(0, 1fr) !important;
  align-items:center !important;
  gap:.42rem !important;
  min-height:22px !important;
  margin:0 0 .34rem !important;
}

.calendar-table .day-number{
  width:2.2ch !important;
  min-width:2.2ch !important;
  max-width:2.2ch !important;
  text-align:left !important;
  font-variant-numeric:tabular-nums !important;
  line-height:1 !important;
  display:block !important;
}

.calendar-table .day-header-right{
  min-width:0 !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:.35rem !important;
}

.calendar-table .day-color-pill{
  min-width:0 !important;
  width:100% !important;
  flex:1 1 auto !important;
}

.calendar-table .day-add-btn{
  flex:0 0 24px !important;
}

.calendar-table .day-events{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:.22rem !important;
  margin-top:0 !important;
}

.calendar-table .event-pill{
  flex:0 0 auto !important;
  align-self:stretch !important;
  margin:0 !important;
}

.calendar-table .day-inner,
.calendar-table .day-events,
.calendar-table .event-pill,
.calendar-table .event-pill-head,
.calendar-table .event-pill-left,
.calendar-table .event-pill-title,
.calendar-table .event-pill-title-text{
  min-width:0 !important;
  max-width:100% !important;
}

.ssi-events-shell{
  width:100% !important;
  max-width:var(--ssi-calendar-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.ssi-events-shell > .wa-header-bar{
  width:100% !important;
  max-width:var(--ssi-calendar-width) !important;
}

@media (max-width:767.98px){
  .calendar-table,
  .calendar-card .calendar-table,
  .calendar-wrapper .calendar-table{
    min-width:0 !important;
  }

  .table{
    table-layout:auto !important;
  }
}

@media (max-width:767.98px){
  .ssi-table-page-card{
    max-width:100% !important;
  }

  .table-responsive{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .ssi-data-table,
  .ssi-ticket-table{
    min-width:0 !important;
    font-size:.74rem !important;
  }

  .ssi-data-table th,
  .ssi-data-table td,
  .ssi-ticket-table th,
  .ssi-ticket-table td{
    padding:.32rem .34rem !important;
  }

  .ssi-ticket-table th:nth-child(1),
  .ssi-ticket-table td:nth-child(1),
  .ssi-ticket-table th:nth-child(4),
  .ssi-ticket-table td:nth-child(4),
  .ssi-ticket-table th:nth-child(5),
  .ssi-ticket-table td:nth-child(5),
  .ssi-ticket-table th:nth-child(6),
  .ssi-ticket-table td:nth-child(6),
  .ssi-ticket-table th:nth-child(7),
  .ssi-ticket-table td:nth-child(7){
    display:none !important;
  }

  .ssi-ticket-table th:nth-child(2),
  .ssi-ticket-table td:nth-child(2){
    width:auto !important;
  }

  .ssi-ticket-table th:nth-child(3),
  .ssi-ticket-table td:nth-child(3){
    width:148px !important;
  }

  .ssi-ticket-table th:nth-child(8),
  .ssi-ticket-table td:nth-child(8){
    width:100px !important;
  }

  .ssi-ticket-table .form-select-sm{
    max-width:94px !important;
    font-size:.70rem !important;
  }

  .ssi-data-table th:nth-child(4),
  .ssi-data-table td:nth-child(4){
    display:none !important;
  }

  .ssi-data-table th:nth-child(1),
  .ssi-data-table td:nth-child(1){
    width:56px !important;
  }

  .ssi-data-table th:nth-child(2),
  .ssi-data-table td:nth-child(2){
    width:92px !important;
  }

  .ssi-data-table th:nth-child(5),
  .ssi-data-table td:nth-child(5){
    width:52px !important;
  }
}

/* =========================================================
   SSI CARD SIZE AUTHORITY v7.24
   Tarjetas estandar compactas; solo calendarios usan ancho completo.
========================================================= */

:root{
  --ssi-card-width:min(920px, calc(100vw - 24px));
  --ssi-calendar-width:min(1500px, calc(100vw - 24px));
}

.card-center-wrapper,
.user-wrapper,
.deps-wrapper,
.ticket-wrapper,
.password-wrapper-wa,
.reserva-wrapper-wa,
.wa-reserva-wrapper,
.search-wrapper,
#dashboardTop.ssi-dashboard-shell{
  width:100% !important;
  max-width:var(--ssi-card-width) !important;
  min-width:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

#dashboardTop.ssi-dashboard-shell{
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.card:not(.calendar-card):not(.ssi-footer-card),
.ssi-card,
.card-auto,
.wa-main:not(.ssi-events-shell),
.wa-card,
.res-card,
.ticket-card,
.ticket-main-card,
.reservation-card,
.password-card-wa,
.reserva-card-wa,
.search-shell,
.search-card,
.result-card,
.summary-grid-card,
.series-box,
.stats-box,
.stat-card,
.subcard,
.ticket-stat-card,
.ticket-stats-progress,
.admin-danger-card,
.danger-box,
.notif-box,
.install-card,
.chat-card,
.ssi-table-page-card,
.ssi-standard-card,
.ssi-standard-section,
.wa-header-bar,
.reservas-box:not(.ssi-calendar-section){
  width:100% !important;
  max-width:var(--ssi-card-width) !important;
  min-width:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.card .card,
.card .wa-card,
.card .summary-grid-card,
.card .series-box,
.card .stats-box,
.card .subcard,
.card .ticket-stat-card,
.wa-card .card,
.wa-card .wa-card,
.ticket-main-card .card,
.reserva-card-wa .card,
.password-card-wa .card,
.search-shell .search-card,
.ssi-table-page-card .ticket-stat-card,
.ssi-table-page-card .ticket-stats-progress{
  max-width:100% !important;
}

.ssi-events-shell,
.calendar-wrapper,
.calendar-card,
.calendar-wrapper .card,
.ssi-calendar-section,
.ssi-calendar-section .calendar-wrapper,
.ssi-calendar-section .calendar-card,
#calendarHost,
#calendarContent{
  width:100% !important;
  max-width:var(--ssi-calendar-width) !important;
  min-width:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.ssi-events-shell{
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.ssi-events-shell > .wa-header-bar{
  max-width:var(--ssi-calendar-width) !important;
}

.card:not(.calendar-card),
.card-auto,
.wa-card,
.res-card,
.ticket-card,
.ticket-main-card,
.reservation-card,
.password-card-wa,
.reserva-card-wa,
.search-shell,
.search-card,
.result-card,
.summary-grid-card,
.series-box,
.stats-box,
.stat-card,
.subcard,
.ticket-stat-card,
.ticket-stats-progress,
.admin-danger-card,
.danger-box,
.notif-box,
.install-card,
.chat-card,
.ssi-table-page-card,
.ssi-standard-card,
.ssi-standard-section{
  overflow:visible !important;
  overflow-x:visible !important;
  overflow-y:visible !important;
  max-height:none !important;
}

.table-responsive,
.notif-box,
.deps-box,
.chat-container{
  overflow:visible !important;
  overflow-x:visible !important;
  overflow-y:visible !important;
  max-height:none !important;
}

.card:not(.calendar-card) table:not(.calendar-table),
.ssi-table-page-card table,
.table-responsive > table:not(.calendar-table){
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  table-layout:fixed !important;
  font-size:.80rem !important;
}

.card:not(.calendar-card) table:not(.calendar-table) th,
.card:not(.calendar-card) table:not(.calendar-table) td,
.ssi-table-page-card table th,
.ssi-table-page-card table td{
  padding:.36rem .40rem !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  max-width:100% !important;
}

.card:not(.calendar-card) table:not(.calendar-table) th:last-child,
.card:not(.calendar-card) table:not(.calendar-table) td:last-child,
.ssi-table-actions,
.ssi-table-actions .btn,
.ssi-table-actions form,
.ssi-table-actions button{
  white-space:nowrap !important;
}

.ssi-ticket-table{
  font-size:.74rem !important;
}

.ssi-ticket-table th:nth-child(1),
.ssi-ticket-table td:nth-child(1){
  width:44px !important;
}

.ssi-ticket-table th:nth-child(2),
.ssi-ticket-table td:nth-child(2){
  width:auto !important;
}

.ssi-ticket-table th:nth-child(3),
.ssi-ticket-table td:nth-child(3){
  width:142px !important;
}

.ssi-ticket-table th:nth-child(4),
.ssi-ticket-table td:nth-child(4),
.ssi-ticket-table th:nth-child(5),
.ssi-ticket-table td:nth-child(5),
.ssi-ticket-table th:nth-child(6),
.ssi-ticket-table td:nth-child(6){
  width:92px !important;
}

.ssi-ticket-table th:nth-child(7),
.ssi-ticket-table td:nth-child(7){
  width:98px !important;
}

.ssi-ticket-table th:nth-child(8),
.ssi-ticket-table td:nth-child(8){
  width:96px !important;
}

.ssi-ticket-table .form-select-sm{
  max-width:98px !important;
  font-size:.70rem !important;
}

.stats-grid,
.ticket-stats-grid,
.kpi-strip,
.reserva-detail-grid{
  grid-template-columns:repeat(auto-fit, minmax(min(180px, 100%), 1fr)) !important;
}

.mini-bar-row{
  grid-template-columns:minmax(0, 150px) minmax(0, 1fr) minmax(44px, 62px) !important;
}

.deps-box,
.search-box,
.password-tools-box,
.password-info-box,
.reservation-color-box,
.featured-box,
.first-occurrence-box,
.repeat-box,
.box-wa,
.preview-box{
  max-width:100% !important;
  min-width:0 !important;
}

.reserva-wrapper-wa .rooms-checklist{
  max-height:240px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

@media (max-width:767.98px){
  :root{
    --ssi-card-width:calc(100vw - 20px);
    --ssi-calendar-width:calc(100vw - 16px);
  }

  .mini-bar-row{
    grid-template-columns:1fr !important;
  }

  .card:not(.calendar-card) table:not(.calendar-table),
  .ssi-table-page-card table{
    font-size:.72rem !important;
  }
}

/* =========================================================
   SSI DARK BACKGROUND + ACTION COLORS v7.25
   Fondo gris oscuro; cada color de boton representa una accion.
========================================================= */

:root{
  --ssi-bg:#e3e7eb;
  --ssi-bg-soft:#edf1f4;
  --ssi-page-bg:#dde2e7;
  --ssi-card:#ffffff;
  --ssi-card-bg:#ffffff;
  --ssi-text:#1f2937;
  --ssi-muted:#68717a;
  --ssi-card-border:#dfe3e6;
  --ssi-soft-border:1px solid rgba(255,255,255,.10);
  --ssi-action-create:#16a34a;
  --ssi-action-create-hover:#15803d;
  --ssi-action-open:#2563eb;
  --ssi-action-open-hover:#1d4ed8;
  --ssi-action-edit:#0891b2;
  --ssi-action-edit-hover:#0e7490;
  --ssi-action-search:#0f766e;
  --ssi-action-search-hover:#115e59;
  --ssi-action-nav:#6b7280;
  --ssi-action-nav-hover:#4b5563;
  --ssi-action-share:#25D366;
  --ssi-action-share-hover:#128C7E;
  --ssi-action-warning:#d97706;
  --ssi-action-warning-hover:#b45309;
  --ssi-action-danger:#dc2626;
  --ssi-action-danger-hover:#b91c1c;
  --ssi-action-auth:#be185d;
  --ssi-action-auth-hover:#9d174d;
}

html,
body:not(.login-page):not(.login-bg),
body:not(.login-page):not(.login-bg) .ssi-page,
body:not(.login-page):not(.login-bg) .ssi-main,
body:not(.login-page):not(.login-bg) .content{
  background:var(--ssi-page-bg) !important;
}

body.login-page,
body.login-bg,
body.login-page .ssi-page,
body.login-page .ssi-main,
body.login-page .content{
  background:transparent !important;
}

body.login-bg{
  background:url('../img/login-bg-small.webp') center center fixed no-repeat !important;
  background-size:cover !important;
}

footer{
  background:transparent !important;
}

.card,
.ssi-card,
.card-auto,
.wa-card,
.wa-main:not(.ssi-events-shell),
.res-card,
.ticket-card,
.ticket-main-card,
.reservation-card,
.password-card-wa,
.reserva-card-wa,
.search-shell,
.search-card,
.result-card,
.summary-grid-card,
.series-box,
.stats-box,
.stat-card,
.subcard,
.ticket-stat-card,
.ticket-stats-progress,
.admin-danger-card,
.danger-box,
.notif-box,
.install-card,
.chat-card,
.ssi-table-page-card,
.ssi-standard-card,
.ssi-standard-section,
.wa-header-bar,
.reservas-box:not(.ssi-calendar-section),
.calendar-card,
.modal-content,
.auth-card,
.ssi-footer-card{
  background:var(--ssi-card) !important;
  border-color:var(--ssi-card-border) !important;
}

.btn,
button.btn,
a.btn,
input.btn{
  background:var(--ssi-action-nav) !important;
  border-color:var(--ssi-action-nav) !important;
  color:#fff !important;
}

.btn-primary,
.btn-outline-primary,
.btn-modal-ir,
a.btn[href*="reserva_ver"],
a.btn[href*="ticket_ver"],
a.btn[href*="eventos_marin"]{
  background:var(--ssi-action-open) !important;
  border-color:var(--ssi-action-open) !important;
  color:#fff !important;
}

.btn-primary:hover,
.btn-outline-primary:hover,
.btn-modal-ir:hover,
a.btn[href*="reserva_ver"]:hover,
a.btn[href*="ticket_ver"]:hover,
a.btn[href*="eventos_marin"]:hover{
  background:var(--ssi-action-open-hover) !important;
  border-color:var(--ssi-action-open-hover) !important;
  color:#fff !important;
}

.btn-success,
.btn-outline-success,
.btn-wa,
.btn-wa-main,
.btn-wa-primary,
.ssi-btn-primary,
.day-add-btn,
a.btn[href*="reserva_nueva"],
a.btn[href*="ticket_nuevo"],
button.btn[type="submit"]:not(.mini-search-btn):not(.btn-outline-danger):not(.btn-danger){
  background:var(--ssi-action-create) !important;
  border-color:var(--ssi-action-create) !important;
  color:#fff !important;
}

.btn-success:hover,
.btn-outline-success:hover,
.btn-wa:hover,
.btn-wa-main:hover,
.btn-wa-primary:hover,
.ssi-btn-primary:hover,
.day-add-btn:hover,
a.btn[href*="reserva_nueva"]:hover,
a.btn[href*="ticket_nuevo"]:hover,
button.btn[type="submit"]:not(.mini-search-btn):not(.btn-outline-danger):not(.btn-danger):hover{
  background:var(--ssi-action-create-hover) !important;
  border-color:var(--ssi-action-create-hover) !important;
  color:#fff !important;
}

.btn-info,
.btn-outline-info,
.btn-edit,
a.btn[href*="editar"],
a.btn[href*="admin_reservas_permisos"],
a.btn[href*="usuarios"],
a.btn[href*="salas"]{
  background:var(--ssi-action-edit) !important;
  border-color:var(--ssi-action-edit) !important;
  color:#fff !important;
}

.btn-info:hover,
.btn-outline-info:hover,
.btn-edit:hover,
a.btn[href*="editar"]:hover,
a.btn[href*="admin_reservas_permisos"]:hover,
a.btn[href*="usuarios"]:hover,
a.btn[href*="salas"]:hover{
  background:var(--ssi-action-edit-hover) !important;
  border-color:var(--ssi-action-edit-hover) !important;
  color:#fff !important;
}

.mini-search-btn,
#miniSystemSearch .mini-search-btn,
button.btn[aria-label*="Buscar"],
button.btn[title*="Buscar"]{
  background:var(--ssi-action-search) !important;
  border-color:var(--ssi-action-search) !important;
  color:#fff !important;
}

.mini-search-btn:hover,
#miniSystemSearch .mini-search-btn:hover,
button.btn[aria-label*="Buscar"]:hover,
button.btn[title*="Buscar"]:hover{
  background:var(--ssi-action-search-hover) !important;
  border-color:var(--ssi-action-search-hover) !important;
  color:#fff !important;
}

.btn-secondary,
.btn-outline-secondary,
.btn-wa-back,
.ssi-btn-secondary,
.btn-modal-cerrar,
a.btn[href*="dashboard"],
a.btn[href*="volver"]{
  background:var(--ssi-action-nav) !important;
  border-color:var(--ssi-action-nav) !important;
  color:#fff !important;
}

.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-wa-back:hover,
.ssi-btn-secondary:hover,
.btn-modal-cerrar:hover,
a.btn[href*="dashboard"]:hover,
a.btn[href*="volver"]:hover{
  background:var(--ssi-action-nav-hover) !important;
  border-color:var(--ssi-action-nav-hover) !important;
  color:#fff !important;
}

.btn-modal-whatsapp,
a.btn[href*="wa.me"],
a.btn[href*="whatsapp"],
.btn-whatsapp{
  background:var(--ssi-action-share) !important;
  border-color:var(--ssi-action-share) !important;
  color:#fff !important;
}

.btn-modal-whatsapp:hover,
a.btn[href*="wa.me"]:hover,
a.btn[href*="whatsapp"]:hover,
.btn-whatsapp:hover{
  background:var(--ssi-action-share-hover) !important;
  border-color:var(--ssi-action-share-hover) !important;
  color:#fff !important;
}

.btn-warning,
.btn-outline-warning,
#notifBell{
  background:var(--ssi-action-warning) !important;
  border-color:var(--ssi-action-warning) !important;
  color:#fff !important;
}

.btn-warning:hover,
.btn-outline-warning:hover,
#notifBell:hover{
  background:var(--ssi-action-warning-hover) !important;
  border-color:var(--ssi-action-warning-hover) !important;
  color:#fff !important;
}

a.btn[href*="cambiar_password"],
a.btn[href*="forgot_password"]{
  background:var(--ssi-action-auth) !important;
  border-color:var(--ssi-action-auth) !important;
  color:#fff !important;
}

a.btn[href*="cambiar_password"]:hover,
a.btn[href*="forgot_password"]:hover{
  background:var(--ssi-action-auth-hover) !important;
  border-color:var(--ssi-action-auth-hover) !important;
  color:#fff !important;
}

.btn-danger,
.btn-outline-danger,
a.btn[href*="logout"],
button.btn[onclick*="Eliminar"],
button.btn[title*="Eliminar"],
a.btn[title*="Eliminar"]{
  background:var(--ssi-action-danger) !important;
  border-color:var(--ssi-action-danger) !important;
  color:#fff !important;
}

.btn-danger:hover,
.btn-outline-danger:hover,
a.btn[href*="logout"]:hover,
button.btn[onclick*="Eliminar"]:hover,
button.btn[title*="Eliminar"]:hover,
a.btn[title*="Eliminar"]:hover{
  background:var(--ssi-action-danger-hover) !important;
  border-color:var(--ssi-action-danger-hover) !important;
  color:#fff !important;
}

.navbar.ssi-glassbar{
  background:rgba(28,30,34,.94) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}

.navbar.ssi-glassbar .btn.btn-outline-light{
  background:var(--ssi-action-nav) !important;
  border-color:var(--ssi-action-nav) !important;
  color:#fff !important;
}

.navbar.ssi-glassbar .btn.btn-outline-light:hover{
  background:var(--ssi-action-nav-hover) !important;
  border-color:var(--ssi-action-nav-hover) !important;
  color:#fff !important;
}

.navbar.ssi-glassbar .btn.btn-outline-light.ssi-desktop-shortcut-calendar,
.navbar.ssi-glassbar .navbar-nav .nav-link.ssi-nav-shortcut-calendar{
  color:#fff !important;
  background-color:var(--ssi-action-nav) !important;
  border-color:var(--ssi-action-nav) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset;
}

.navbar.ssi-glassbar .btn.btn-outline-light.ssi-desktop-shortcut-calendar:hover,
.navbar.ssi-glassbar .btn.btn-outline-light.ssi-desktop-shortcut-calendar:focus,
.navbar.ssi-glassbar .navbar-nav .nav-link.ssi-nav-shortcut-calendar:hover,
.navbar.ssi-glassbar .navbar-nav .nav-link.ssi-nav-shortcut-calendar:focus{
  color:#fff !important;
  background-color:var(--ssi-action-nav-hover) !important;
  border-color:var(--ssi-action-nav-hover) !important;
}

.navbar.ssi-glassbar .btn.btn-outline-light.ssi-desktop-shortcut-week,
.navbar.ssi-glassbar .navbar-nav .nav-link.ssi-nav-shortcut-week{
  color:#fff !important;
  background-color:#14a38b !important;
  border-color:#14a38b !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset;
}

.navbar.ssi-glassbar .btn.btn-outline-light.ssi-desktop-shortcut-week:hover,
.navbar.ssi-glassbar .btn.btn-outline-light.ssi-desktop-shortcut-week:focus,
.navbar.ssi-glassbar .navbar-nav .nav-link.ssi-nav-shortcut-week:hover,
.navbar.ssi-glassbar .navbar-nav .nav-link.ssi-nav-shortcut-week:focus{
  color:#fff !important;
  background-color:#0f8a75 !important;
  border-color:#0f8a75 !important;
}

.navbar.ssi-glassbar .btn.btn-outline-light.ssi-reservas-hoy-alert,
.navbar.ssi-glassbar .btn.btn-outline-light.ssi-reservas-hoy-alert:hover,
.navbar.ssi-glassbar .btn.btn-outline-light.ssi-reservas-hoy-alert:focus{
  color:#fff !important;
  background-color:#1ebe5d !important;
  border-color:#1ebe5d !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 0 2px rgba(30,190,93,.18),
    0 8px 22px rgba(30,190,93,.24) !important;
  animation:ssiReservasHoyBlink 0.95s linear infinite !important;
}

.navbar.ssi-glassbar .btn.btn-outline-light.ssi-reservas-hoy-alert .badge{
  animation:ssiReservasHoyBadgeBlink 0.95s linear infinite !important;
}

.navbar.ssi-glassbar a.btn[href*="eventos_marin"]{
  background:var(--ssi-action-open) !important;
  border-color:var(--ssi-action-open) !important;
}

.navbar.ssi-glassbar a.btn[href*="cambiar_password"]{
  background:var(--ssi-action-auth) !important;
  border-color:var(--ssi-action-auth) !important;
}

.navbar.ssi-glassbar a.btn[href*="logout"]{
  background:var(--ssi-action-danger) !important;
  border-color:var(--ssi-action-danger) !important;
}

/* SSI v8 additions */

.navbar.ssi-glassbar{
  background:rgba(44, 66, 89, .36) !important;
  border-bottom:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 14px 34px rgba(15,23,42,.18);
  backdrop-filter:blur(18px) saturate(165%);
  -webkit-backdrop-filter:blur(18px) saturate(165%);
}

.navbar.ssi-glassbar::before{
  background:linear-gradient(to bottom, rgba(255,255,255,.28), rgba(255,255,255,.08) 38%, rgba(255,255,255,0) 82%);
}

.ssi-current-user{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  color:#fff !important;
  font-weight:600;
}

.ssi-profile-dropdown{
  flex:0 0 auto;
  min-width:0;
}

.ssi-profile-toggle{
  min-width:0;
  padding:.12rem .36rem !important;
}

.ssi-profile-toggle::after{
  display:none !important;
}

.ssi-profile-toggle .ssi-current-user{
  min-width:0;
}

.ssi-profile-chevron{
  font-size:.72rem;
  opacity:.8;
  flex:0 0 auto;
}

.ssi-profile-menu{
  min-width:220px;
}

.ssi-profile-menu-header{
  padding:.8rem .9rem .4rem;
  list-style:none;
}

.ssi-profile-menu-user{
  display:flex;
  align-items:center;
  gap:.75rem;
}

.ssi-profile-menu-copy{
  min-width:0;
}

.ssi-profile-menu-name{
  font-weight:700;
  color:var(--ssi-text);
  line-height:1.15;
}

.ssi-profile-menu-meta{
  font-size:.8rem;
  color:var(--ssi-muted);
  margin-top:.15rem;
}

.ssi-profile-menu .dropdown-item{
  font-size:.92rem !important;
}

.ssi-avatar{
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  max-width:42px;
  max-height:42px;
  border-radius:50%;
  overflow:hidden;
  object-fit:cover;
  object-position:center center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(13,110,253,.18), rgba(37,211,102,.18));
  color:var(--ssi-primary-ink);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 8px 20px rgba(15,23,42,.10);
  font-weight:700;
  flex:0 0 auto;
}

.ssi-avatar-sm{
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  max-width:36px;
  max-height:36px;
  font-size:.85rem;
}

.ssi-avatar-xs{
  width:28px;
  height:28px;
  min-width:28px;
  min-height:28px;
  max-width:28px;
  max-height:28px;
  font-size:.75rem;
}

.ssi-avatar-fallback{
  text-transform:uppercase;
}

img.ssi-avatar{
  display:block;
  width:42px;
  height:42px !important;
  min-width:42px;
  min-height:42px;
  max-width:42px;
  max-height:42px;
  border-radius:50% !important;
  object-fit:cover !important;
  object-position:center center !important;
  clip-path:circle(50% at 50% 50%);
  flex:0 0 auto;
}

img.ssi-avatar-sm{
  width:36px;
  height:36px !important;
  min-width:36px;
  min-height:36px;
  max-width:36px;
  max-height:36px;
}

img.ssi-avatar-xs{
  width:28px;
  height:28px !important;
  min-width:28px;
  min-height:28px;
  max-width:28px;
  max-height:28px;
}

.ssi-sector-legend{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:12px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(7,94,84,.07);
  border:1px solid rgba(7,94,84,.10);
  color:var(--ssi-primary-ink);
  font-size:.86rem;
  line-height:1.3;
}

.ssi-sector-legend i{
  color:var(--ssi-primary);
}

#ssiHelpModal{
  overflow:hidden !important;
}

#ssiHelpModal .modal-dialog{
  max-width:min(1200px, calc(100vw - 24px));
  margin:12px auto;
}

.ssi-help-modal{
  border:0;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 28px 56px rgba(15,23,42,.18);
  max-height:calc(100vh - 24px);
  display:flex;
  flex-direction:column;
}

.ssi-action-confirm-modal{
  border:0;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 24px 48px rgba(15,23,42,.18);
}

.ssi-action-confirm-head{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding-right:1rem;
}

.ssi-action-confirm-icon{
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(37,211,102,.14);
  color:var(--ssi-primary);
  box-shadow:0 0 0 4px rgba(37,211,102,.10);
  flex:0 0 auto;
  font-size:1.25rem;
}

.ssi-action-confirm-subtitle{
  color:var(--ssi-muted);
  font-size:.9rem;
}

.ssi-action-confirm-body{
  color:var(--ssi-text);
  font-size:.98rem;
  line-height:1.55;
}

.ssi-action-confirm-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.55rem;
}

.ssi-action-confirm-list:empty{
  display:none;
}

.ssi-action-confirm-list li{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  padding:.72rem .85rem;
  border-radius:14px;
  background:rgba(7,94,84,.05);
  color:var(--ssi-primary-ink);
  border:1px solid rgba(7,94,84,.08);
  line-height:1.45;
}

.ssi-action-confirm-list li::before{
  content:"";
  width:8px;
  height:8px;
  margin-top:.42rem;
  border-radius:50%;
  background:var(--ssi-primary);
  flex:0 0 auto;
}

.ssi-help-page-head{
  padding:6px 0 14px;
  border-bottom:1px solid rgba(7,94,84,.10);
  margin-bottom:16px;
}

.ssi-help-page-title{
  font-size:1.15rem;
  font-weight:700;
  color:var(--ssi-primary-ink);
}

.ssi-help-page-intro{
  color:var(--ssi-muted);
  margin-top:6px;
  line-height:1.55;
}

.ssi-help-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
}

.ssi-help-card{
  border:1px solid rgba(7,94,84,.10);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,248,1));
  padding:16px;
}

.ssi-help-card-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(37,211,102,.12);
  color:var(--ssi-primary-ink);
  font-size:1.05rem;
  margin-bottom:10px;
}

.ssi-help-card-title{
  font-weight:700;
  color:var(--ssi-primary-ink);
  margin-bottom:6px;
}

.ssi-help-card-text{
  color:var(--ssi-text);
  font-size:.92rem;
  line-height:1.5;
}

.ssi-user-option{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:8px 0;
}

.ssi-user-option-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.ssi-user-option-title{
  font-weight:600;
  color:var(--ssi-text);
}

.ssi-user-option-meta{
  color:var(--ssi-muted);
  font-size:.82rem;
}

.ssi-selection-preview{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-top:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px dashed rgba(7,94,84,.16);
  background:rgba(255,255,255,.92);
}

.ssi-selection-preview.is-empty{
  opacity:.82;
}

.ssi-selection-preview-body{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.ssi-selection-preview-name{
  font-weight:700;
  color:var(--ssi-primary-ink);
}

.ssi-selection-preview-meta{
  color:var(--ssi-muted);
  font-size:.82rem;
}

.ssi-toolbar-label{
  display:inline;
}

.ssi-nav-label,
.ssi-shortcut-label{
  display:inline;
}

.navbar.ssi-glassbar .ssi-desktop-shortcut{
  display:none !important;
}

.navbar.ssi-glassbar .ssi-config-icon-toggle{
  font-size:0 !important;
}

.navbar.ssi-glassbar .ssi-config-icon-toggle i{
  font-size:.98rem !important;
  margin-right:0 !important;
}

.navbar.ssi-glassbar .ssi-config-icon-toggle::after{
  display:none !important;
}

#ssiHelpModal .modal-body{
  padding:1.25rem 1.25rem 1.4rem;
  overflow-y:auto;
  overscroll-behavior:contain;
}

.ssi-help-manual-head{
  margin-top:20px;
  padding:18px;
  border-radius:22px;
  background:linear-gradient(135deg, rgba(7,94,84,.08), rgba(255,255,255,.96));
  border:1px solid rgba(7,94,84,.10);
}

.ssi-help-manual-kicker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(37,211,102,.14);
  color:var(--ssi-primary-ink);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.ssi-help-manual-title{
  margin-top:12px;
  font-size:1.2rem;
  font-weight:800;
  color:var(--ssi-primary-ink);
}

.ssi-help-manual-intro{
  margin-top:8px;
  color:var(--ssi-muted);
  line-height:1.6;
}

.ssi-help-manual-current{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  margin-top:14px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(7,94,84,.10);
  color:var(--ssi-primary-ink);
  font-weight:600;
}

.ssi-help-manual-current i{
  color:var(--ssi-primary);
}

.ssi-help-manual-sections{
  display:grid;
  gap:12px;
  margin-top:14px;
}

.ssi-help-manual-item{
  border:1px solid rgba(7,94,84,.10);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,248,1));
  overflow:hidden;
}

.ssi-help-manual-item[open]{
  box-shadow:0 16px 34px rgba(15,23,42,.10);
}

.ssi-help-manual-item.is-related{
  border-color:rgba(37,211,102,.28);
}

.ssi-help-manual-summary{
  list-style:none;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px 18px;
  cursor:pointer;
}

.ssi-help-manual-summary::-webkit-details-marker{
  display:none;
}

.ssi-help-manual-icon{
  width:44px;
  height:44px;
  border-radius:15px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(37,211,102,.12);
  color:var(--ssi-primary-ink);
  font-size:1.08rem;
}

.ssi-help-manual-summary-body{
  flex:1 1 auto;
  min-width:0;
}

.ssi-help-manual-summary-row{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
}

.ssi-help-manual-summary-title{
  font-weight:800;
  color:var(--ssi-primary-ink);
}

.ssi-help-manual-summary-tag{
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(37,211,102,.16);
  color:var(--ssi-primary-ink);
  font-size:.72rem;
  font-weight:700;
}

.ssi-help-manual-summary-text{
  margin-top:6px;
  color:var(--ssi-muted);
  line-height:1.55;
}

.ssi-help-manual-body{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  padding:0 18px 18px;
}

.ssi-help-manual-block{
  border:1px solid rgba(7,94,84,.08);
  border-radius:16px;
  background:rgba(255,255,255,.86);
  padding:14px;
}

.ssi-help-diagram{
  grid-column:1 / -1;
  border:1px solid rgba(7,94,84,.08);
  border-radius:18px;
  background:rgba(255,255,255,.92);
  padding:14px;
}

.ssi-help-diagram-title{
  font-size:.84rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--ssi-primary-ink);
  margin-bottom:10px;
}

.ssi-help-diagram-canvas{
  overflow:auto;
  border:1px solid rgba(7,94,84,.10);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(247,251,248,1));
  padding:12px;
}

.ssi-help-diagram-canvas .ssi-help-mermaid{
  min-width:640px;
}

.ssi-help-diagram-canvas svg{
  display:block;
  height:auto;
}

.ssi-help-diagram-fallback{
  min-width:640px;
  padding:18px 20px;
  border:1px dashed rgba(7,94,84,.18);
  border-radius:14px;
  background:rgba(248,252,250,.92);
  color:var(--ssi-text);
}

.ssi-help-diagram-fallback-title{
  font-weight:800;
  color:var(--ssi-primary-ink);
  margin-bottom:6px;
}

.ssi-help-diagram-fallback-text{
  color:var(--ssi-text-soft);
  line-height:1.5;
}

.ssi-help-manual-block-title{
  font-size:.84rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--ssi-primary-ink);
  margin-bottom:8px;
}

.ssi-help-manual-list{
  margin:0;
  padding-left:1rem;
  color:var(--ssi-text);
  line-height:1.55;
}

.ssi-help-manual-list li + li{
  margin-top:.38rem;
}

@media (max-width: 1365.98px){
  :root{ --ssi-nav-height: 50px; }

  .navbar.navbar-expand-lg.ssi-glassbar{
    padding-top:.18rem !important;
    padding-bottom:.18rem !important;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .container-fluid{
    flex-wrap:wrap !important;
    align-items:center !important;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .navbar-toggler{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    margin-left:auto;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .ssi-desktop-shortcut{
    display:none !important;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .navbar-collapse{
    max-height:none;
    overflow:visible;
    display:none !important;
    padding:.65rem 0 .4rem;
    width:100%;
    flex-basis:100%;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .navbar-collapse.show,
  .navbar.navbar-expand-lg.ssi-glassbar .navbar-collapse.collapsing{
    display:block !important;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .navbar-nav{
    width:100%;
    flex-direction:column !important;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .navbar-nav .nav-link{
    width:100%;
    justify-content:flex-start;
    padding:.48rem .70rem !important;
    margin:.10rem 0 !important;
    min-height:38px !important;
    font-size:.93rem !important;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .dropdown-menu{
    position:static !important;
    transform:none !important;
    width:100%;
    margin-top:.25rem;
    box-shadow:none;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .btn{
    width:100%;
    justify-content:center;
    min-height:38px !important;
    font-size:.92rem !important;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .navbar-text{
    display:flex;
    justify-content:center;
    width:100%;
    margin:.35rem 0 .75rem;
  }

  .navbar.navbar-expand-lg.ssi-glassbar #miniSystemSearch{
    width:100%;
    max-width:none;
    margin:.25rem 0 .75rem;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .mini-search-wrap{
    width:100%;
    max-width:none;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .mini-search-input,
  .navbar.navbar-expand-lg.ssi-glassbar .mini-search-btn{
    height:38px !important;
    min-height:38px !important;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .position-relative,
  .navbar.navbar-expand-lg.ssi-glassbar .navbar-text,
  .navbar.navbar-expand-lg.ssi-glassbar .ssi-profile-dropdown,
  .navbar.navbar-expand-lg.ssi-glassbar a.btn,
  .navbar.navbar-expand-lg.ssi-glassbar button.btn{
    margin-right:0 !important;
    margin-bottom:.45rem;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .ssi-current-user-name{
    display:inline;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .ssi-profile-dropdown{
    width:100%;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .ssi-profile-toggle{
    width:100%;
    justify-content:center;
  }
}

@media (min-width: 1366px){
  :root{ --ssi-nav-height: 58px; }

  .navbar.navbar-expand-lg.ssi-glassbar{
    padding-top:.18rem !important;
    padding-bottom:.18rem !important;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .container-fluid{
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:.32rem;
    min-width:0;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .navbar-toggler{
    display:none !important;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .ssi-desktop-shortcut{
    display:inline-flex !important;
    flex:0 0 auto;
    min-width:0;
    min-height:32px !important;
    padding:.16rem .44rem !important;
    gap:.3rem;
    font-size:.82rem !important;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .navbar-collapse{
    display:flex !important;
    flex:1 1 auto;
    flex-basis:auto;
    width:auto;
    min-width:0;
    align-items:center;
    flex-wrap:nowrap;
    gap:.32rem;
    padding-top:0;
    overflow:visible;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .ssi-nav-shortcut-item{
    display:none !important;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .navbar-nav{
    display:flex;
    flex:1 1 auto;
    flex-direction:row !important;
    flex-wrap:nowrap;
    align-items:center;
    gap:.08rem;
    min-width:0;
    width:auto;
    margin-bottom:0 !important;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .navbar-nav .nav-item{
    flex:0 1 auto;
    min-width:0;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .navbar-nav .nav-link{
    width:auto;
    padding:.18rem .42rem !important;
    min-height:32px !important;
    font-size:.82rem !important;
    white-space:nowrap;
  }

  .navbar.navbar-expand-lg.ssi-glassbar #miniSystemSearch{
    width:clamp(140px, 14vw, 210px);
    max-width:210px;
    margin:0 !important;
    flex:0 1 auto;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .mini-search-wrap{
    flex:0 1 210px;
    width:clamp(140px, 14vw, 210px);
    max-width:210px;
    min-width:120px;
    margin-right:0 !important;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .ssi-mini-search-label{
    display:none;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .mini-search-input,
  .navbar.navbar-expand-lg.ssi-glassbar .mini-search-btn{
    height:32px !important;
    min-height:32px !important;
    font-size:.82rem !important;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .btn{
    width:auto;
    min-height:32px !important;
    padding:.16rem .44rem !important;
    font-size:.82rem !important;
    line-height:1.1 !important;
    white-space:nowrap;
    flex:0 0 auto;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .position-relative,
  .navbar.navbar-expand-lg.ssi-glassbar .navbar-text,
  .navbar.navbar-expand-lg.ssi-glassbar .ssi-profile-dropdown,
  .navbar.navbar-expand-lg.ssi-glassbar a.btn,
  .navbar.navbar-expand-lg.ssi-glassbar button.btn{
    margin-right:0 !important;
    margin-bottom:0 !important;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .navbar-text{
    display:inline-flex;
    width:auto;
    justify-content:flex-start;
    margin:0 !important;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .dropdown-menu{
    position:absolute !important;
    width:max-content;
    margin-top:.35rem;
    box-shadow:0 18px 36px rgba(15,23,42,.16);
  }

  .navbar.navbar-expand-lg.ssi-glassbar .ssi-current-user{
    flex:0 1 auto;
    min-width:0;
    max-width:150px;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .ssi-current-user-name{
    max-width:94px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display:inline-block;
    vertical-align:middle;
  }

  .navbar.navbar-expand-lg.ssi-glassbar #notifBell{
    min-width:32px;
    padding-inline:.45rem !important;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .ssi-profile-dropdown{
    flex:0 0 auto;
    width:auto;
  }

  .navbar.navbar-expand-lg.ssi-glassbar .ssi-profile-toggle{
    width:auto;
    padding-inline:.34rem !important;
  }
}

@media (min-width: 1366px) and (max-width: 1599.98px){
  .navbar.ssi-glassbar .ssi-shortcut-label{
    display:none;
  }

  .navbar.ssi-glassbar .mini-search-wrap{
    width:clamp(120px, 10vw, 170px);
    max-width:170px;
  }

  .navbar.ssi-glassbar #reservasHoyBtn .badge{
    margin-left:.15rem;
  }
}

@media (min-width: 1366px) and (max-width: 1599.98px){
  .navbar.ssi-glassbar #ssiHelpBtn .ssi-toolbar-label{
    display:none;
  }

  .navbar.ssi-glassbar #ssiHelpBtn{
    padding-inline:.48rem !important;
  }

  .navbar.ssi-glassbar #ssiHelpBtn{
    font-size:0 !important;
  }

  .navbar.ssi-glassbar #ssiHelpBtn i{
    font-size:.95rem !important;
    margin-right:0 !important;
  }

  .navbar.ssi-glassbar .ssi-profile-toggle .ssi-current-user-name,
  .navbar.ssi-glassbar .ssi-profile-toggle .ssi-profile-chevron{
    display:none;
  }

  .navbar.ssi-glassbar .ssi-profile-toggle{
    padding-inline:.18rem !important;
  }

  .navbar.ssi-glassbar .ssi-profile-toggle .ssi-current-user{
    max-width:44px;
    gap:0;
  }
}

@media (min-width: 1366px) and (max-width: 1499.98px){
  .navbar.ssi-glassbar .ssi-nav-label{
    display:none;
  }

  .navbar.ssi-glassbar .navbar-nav .nav-link{
    padding-inline:.38rem !important;
  }

  .navbar.ssi-glassbar .navbar-nav .nav-link i{
    margin-right:0 !important;
  }

  .navbar.ssi-glassbar .mini-search-wrap{
    width:clamp(100px, 8vw, 138px);
    max-width:138px;
    min-width:100px;
  }
}

@media (max-width: 576px){
  .ssi-help-grid{
    grid-template-columns:1fr;
  }

  .ssi-help-manual-body{
    grid-template-columns:1fr;
  }

  .ssi-help-manual-summary{
    padding:14px;
  }

  .ssi-help-manual-current{
    width:100%;
    justify-content:flex-start;
  }

  .ssi-help-diagram-canvas .ssi-help-mermaid{
    min-width:520px;
  }

  .ssi-current-user{
    width:100%;
    justify-content:center;
    padding:.25rem 0;
  }
}