@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;700;800&display=swap');

/* ── Custom fonts loaded via JS (font manager) ── */
/* @font-face for custom-panel, custom-monitor, custom-kiosk injected dynamically */

:root{
  --font-display:'Medicinal','Syne',sans-serif;
  --primary:#1A56DB;
  --primary-light:#3B75F5;
  --primary-soft:#7DA8FF;
  --accent:#60A5FA;
  --glow:rgba(26,86,219,.22);

  --bg:#0A0F1A;
  --surface:#101828;
  --surface2:#182033;
  --surface3:#1d2b3e;
  --border:#1E3458;

  --text:#EDF3FF;
  --text-muted:#6A8CB8;

  --success:#22c55e;
  --danger:#ef4444;
  --warning:#f59e0b;

  --radius:16px;
  --shadow-xl:0 30px 80px rgba(0,0,0,.42);
  --shadow-lg:0 18px 45px rgba(0,0,0,.26);
  --shadow-md:0 10px 24px rgba(0,0,0,.18);
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  min-height:100%;
}

body{
  font-family:'DM Sans',sans-serif;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 12%, transparent), transparent 28%),
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 6%, transparent), transparent 22%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, #000 12%) 100%);
  color:var(--text);
  min-height:100vh;
}

/* ===== PANTALLAS ===== */

.screen{display:none;min-height:100vh}
.screen.active{display:flex}

#loginScreen{
  align-items:center;
  justify-content:center;
  padding:30px;
}

.login-card{
  width:100%;
  max-width:440px;
  background:
    radial-gradient(circle at top right, rgba(61,129,255,.12), transparent 28%),
    linear-gradient(180deg, rgba(17,28,49,.96) 0%, rgba(12,20,35,.98) 100%);
  border:1px solid color-mix(in srgb, var(--border) 84%, white 16%);
  border-radius:28px;
  padding:40px 34px;
  box-shadow:var(--shadow-xl);
  position:relative;
  overflow:hidden;
}

.login-card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--primary-light), var(--accent), transparent);
  opacity:.7;
}

.login-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.brand{
  text-align:center;
  margin-bottom:26px;
}

.brand h1{
  font-family:var(--font-display);
  font-size:32px;
  font-weight:normal;
  margin-bottom:8px;
  letter-spacing:2px;
  text-transform:uppercase;
}

.brand p{
  color:var(--text-muted);
  font-size:14px;
}

.error-msg{
  display:none;
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.28);
  color:#fca5a5;
  padding:12px 14px;
  border-radius:14px;
  margin-bottom:14px;
  font-size:14px;
  white-space:pre-wrap;
  word-break:break-word;
}

/* ===== FORMULARIOS ===== */

.form-group{margin-bottom:16px}

.form-group label{
  display:block;
  font-size:12px;
  font-weight:800;
  color:var(--text-muted);
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface2) 90%, white 10%) 0%, var(--surface2) 100%);
  border:1px solid color-mix(in srgb, var(--border) 84%, white 16%);
  border-radius:16px;
  padding:13px 15px;
  color:var(--text);
  font-size:15px;
  outline:none;
  font-family:'DM Sans',sans-serif;
  transition:.18s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:color-mix(in srgb, var(--primary) 70%, white 30%);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent);
}

/* opciones negras para desplegables */
select option{
  background:#0a0f1a !important;
  color:#EDF3FF !important;
}

[data-theme="light"] select option{
  background:#ffffff !important;
  color:#111111 !important;
}

/* ===== BOTONES ===== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:none;
  cursor:pointer;
  border-radius:16px;
  padding:12px 18px;
  font-family:'DM Sans',sans-serif;
  font-weight:800;
  transition:.18s ease;
  text-decoration:none;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn:disabled{
  opacity:.72;
  cursor:not-allowed;
  transform:none;
}

.btn-primary{
  background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 78%, white 22%) 0%, var(--primary) 100%);
  color:#fff;
  width:100%;
  font-size:16px;
  box-shadow:0 16px 28px color-mix(in srgb, var(--primary) 26%, transparent);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-primary:hover{
  transform:translateY(-2px);
  filter:brightness(1.1);
  box-shadow:0 20px 32px color-mix(in srgb, var(--primary) 36%, transparent);
}

.btn-primary:active{ transform:translateY(0); filter:brightness(.95); }

.btn-primary:hover{
  background:linear-gradient(180deg, color-mix(in srgb, var(--primary-light) 78%, white 22%) 0%, var(--primary-light) 100%);
}

.btn-secondary{
  background:linear-gradient(180deg, rgba(29,44,73,.95) 0%, rgba(21,34,58,.98) 100%);
  color:var(--text);
  border:1px solid color-mix(in srgb, var(--border) 84%, white 16%);
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}

.btn-secondary:hover{
  transform:translateY(-1px);
  border-color:rgba(99,153,255,.5);
  background:linear-gradient(180deg, rgba(35,52,85,.98) 0%, rgba(27,42,68,.98) 100%);
}

.btn-secondary:active{ transform:translateY(0); }

.btn-secondary:hover{
  border-color:color-mix(in srgb, var(--primary) 42%, white 18%);
}

.btn-danger{
  background:linear-gradient(180deg, #ef5350 0%, #dc2626 100%);
  color:#fff;
  box-shadow:0 12px 24px rgba(220,38,38,.2);
  transition:transform .15s ease, filter .15s ease;
}

.btn-danger:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.btn-danger:active{ transform:translateY(0); filter:brightness(.95); }

.btn-success{
  background:linear-gradient(180deg, #34d399 0%, #16a34a 100%);
  color:#fff;
}

.btn-warning{
  background:linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  color:#111827;
  box-shadow:0 12px 24px rgba(245,158,11,.18);
}

.btn-sm{
  padding:8px 12px;
  font-size:13px;
  min-height:38px;
}

.btn-ghost{
  background:transparent;
  color:var(--text-muted);
}

/* ===== APP ===== */

#appScreen{
  flex-direction:column;
}

.navbar{
  min-height:72px;
  background:
    linear-gradient(180deg, rgba(17,27,47,.96) 0%, rgba(13,22,38,.98) 100%);
  border-bottom:1px solid color-mix(in srgb, var(--border) 84%, white 16%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 22px;
  gap:12px;
  flex-wrap:wrap;
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}

.navbar-left{
  display:flex;
  align-items:center;
  gap:12px;
}

.nav-logo{
  height:42px;
  max-width:120px;
  object-fit:contain;
  border-radius:8px;
}

.navbar-title{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:normal;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.navbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Hamburger button — oculto en desktop, visible en móvil */
.btn-hamburger{
  display:none;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface2);
  cursor:pointer;
  color:var(--text);
  font-size:18px;
  flex-shrink:0;
  transition:.15s;
}
.btn-hamburger:hover{
  background:var(--surface3);
}

/* Botón cerrar dentro del menú — oculto en desktop */
.tab-hamburger-close{
  display:none;
  align-items:center;
  justify-content:space-between;
  padding:8px 8px 12px;
  margin-bottom:4px;
  border-bottom:1px solid var(--border);
  color:var(--text-muted);
  font-size:13px;
  font-weight:700;
}

.user-badge{
  background:
    linear-gradient(180deg, rgba(28,43,70,.92) 0%, rgba(19,31,53,.96) 100%);
  border:1px solid color-mix(in srgb, var(--border) 84%, white 16%);
  border-radius:999px;
  padding:8px 14px;
  font-size:13px;
  color:var(--text);
  box-shadow:var(--shadow-md);
}

.main{
  padding:24px;
  max-width:1500px;
  width:100%;
  margin:0 auto;
}

/* ===== TABS ===== */

.tabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:20px;
  background:
    linear-gradient(180deg, rgba(24,38,64,.92) 0%, rgba(17,28,47,.96) 100%);
  border:1px solid color-mix(in srgb, var(--border) 84%, white 16%);
  padding:8px;
  border-radius:20px;
  box-shadow:var(--shadow-lg);
}

.tab{
  background:transparent;
  border:none;
  color:var(--text-muted);
  font-family:'DM Sans',sans-serif;
  font-weight:800;
  padding:11px 16px;
  border-radius:14px;
  cursor:pointer;
  transition:.18s ease;
}

.tab:hover{
  color:var(--text);
  background:rgba(255,255,255,.03);
}

.tab.active{
  background:
    linear-gradient(180deg, rgba(35,53,86,.96) 0%, rgba(25,39,65,.98) 100%);
  color:var(--text);
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  position:relative;
}

.tab.active::after{
  content:'';
  position:absolute;
  bottom:4px;
  left:50%;
  transform:translateX(-50%);
  width:20px;
  height:3px;
  background:var(--primary-light);
  border-radius:2px;
}

.tab-panel{display:none;}
.tab-panel.active{
  display:block;
  animation:fadeInUp .22s ease both;
}

@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(10px); }
  to{   opacity:1; transform:translateY(0); }
}

/* ===== CARDS ===== */

.card{
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 8%, transparent), transparent 24%),
    linear-gradient(180deg, rgba(17,27,47,.95) 0%, rgba(13,22,38,.98) 100%);
  border:1px solid color-mix(in srgb, var(--border) 84%, white 16%);
  border-radius:24px;
  padding:22px;
  margin-bottom:18px;
  box-shadow:var(--shadow-lg);
  position:relative;
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
  position:relative;
  z-index:1;
}

.card-title{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:normal;
  letter-spacing:1px;
}

.card-subtitle{
  font-size:13px;
  color:var(--text-muted);
  margin-top:4px;
  line-height:1.6;
}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.grid-4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

/* ===== EMPTY STATES ===== */

.empty-state{
  text-align:center;
  color:var(--text-muted);
  padding:42px 18px;
  border-radius:22px;
  border:1px dashed rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}

.empty-state .icon{
  font-size:48px;
  margin-bottom:12px;
}

/* ===== LISTS / ITEMS ===== */

.list{
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
  z-index:1;
}

.item{
  background:
    linear-gradient(180deg, rgba(26,39,63,.94) 0%, rgba(19,31,51,.98) 100%);
  border:1px solid color-mix(in srgb, var(--border) 84%, white 16%);
  border-radius:20px;
  padding:16px 18px;
  box-shadow:var(--shadow-md);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.item:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(99,153,255,.3);
}

.item-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.item-title{
  font-weight:800;
  font-size:17px;
  line-height:1.2;
}

.item-meta{
  font-size:13px;
  color:var(--text-muted);
  margin-top:8px;
  line-height:1.7;
}

/* ===== TIMER CHIPS ===== */

.timer-chip{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:normal;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.24);
  background:rgba(34,197,94,.14);
  color:#86efac;
  white-space:nowrap;
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}

.timer-chip.warn{
  background:rgba(245,158,11,.16);
  color:#fcd34d;
  border-color:rgba(245,158,11,.28);
}

.timer-chip.exp{
  background:rgba(239,68,68,.16);
  color:#fca5a5;
  border-color:rgba(239,68,68,.28);
}

/* ===== ACTIONS / FILTERS ===== */

.actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

.filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
  position:relative;
  z-index:1;
}

.filters input,
.filters select{
  background:
    linear-gradient(180deg, rgba(26,39,63,.92) 0%, rgba(18,29,49,.98) 100%);
  border:1px solid color-mix(in srgb, var(--border) 84%, white 16%);
  border-radius:14px;
  color:var(--text);
  padding:11px 13px;
  font-family:'DM Sans',sans-serif;
  outline:none;
  min-height:44px;
}

.filters input:focus,
.filters select:focus{
  border-color:color-mix(in srgb, var(--primary) 70%, white 30%);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent);
}

/* ===== TABLES ===== */

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
  overflow:hidden;
  border-radius:18px;
}

thead tr{
  background:
    linear-gradient(180deg, rgba(28,42,69,.98) 0%, rgba(21,33,55,.98) 100%);
}

th{
  text-align:left;
  padding:12px 14px;
  color:var(--text-muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.8px;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-weight:800;
}

td{
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.01);
}

tbody tr:hover td{
  background:rgba(255,255,255,.025);
}

/* ===== BADGES ===== */

.role-badge{
  display:inline-block;
  padding:4px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.3px;
}

.role-superadmin{background:rgba(168,85,247,.18);color:#e9d5ff}
.role-admin{background:rgba(239,68,68,.15);color:#fecaca}
.role-gerente{background:rgba(124,58,237,.18);color:#c4b5fd}
.role-user{background:rgba(26,86,219,.18);color:#bfdbfe}

/* ── Dashboard KPI grid (desktop) ── */
.dash-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:16px;
}

/* Mobile-only nav actions: hidden on desktop */
.nav-mobile-actions{
  display:none;
}

/* ── Stats boxes ── */
.stat-box{
  background:
    linear-gradient(180deg, rgba(27,40,66,.96) 0%, rgba(20,31,52,.98) 100%);
  border:1px solid color-mix(in srgb, var(--border) 84%, white 16%);
  border-radius:22px;
  padding:20px 22px;
  box-shadow:var(--shadow-md);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor:default;
}

.stat-box:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(99,153,255,.35);
}

.stat-value{
  font-family:var(--font-display);
  font-size:32px;
  font-weight:normal;
  line-height:1.05;
  letter-spacing:1px;
}

.stat-label{
  color:var(--text-muted);
  font-size:11px;
  margin-top:10px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  font-weight:700;
  font-family:'DM Sans',sans-serif;
}

/* ===== BRANCH / COMPANY / PLAN CARDS ===== */

.branch-card,
.company-card,
.plan-card{
  background:
    linear-gradient(180deg, rgba(25,39,64,.96) 0%, rgba(18,29,49,.98) 100%);
  border:1px solid color-mix(in srgb, var(--border) 84%, white 16%);
  border-radius:20px;
  padding:18px;
  box-shadow:var(--shadow-md);
}

.branch-color-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  display:inline-block;
  margin-right:8px;
  border:2px solid rgba(255,255,255,.18);
  vertical-align:middle;
}

.plan-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:4px 6px 0 0;
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:#dbeafe;
  background:rgba(26,86,219,.18);
  border:1px solid rgba(26,86,219,.28);
}

.plans-wrap{
  margin-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:18px;
}

.plans-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.plans-title{
  font-size:14px;
  font-weight:800;
  color:#9fc5ff;
}

.plan-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 280px));
  gap:12px;
  align-items:stretch;
}

.plan-card.compact{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:180px;
  padding:14px;
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(28,42,69,.98) 0%, rgba(21,33,55,.98) 100%);
  box-shadow:var(--shadow-md);
}

.plan-card.compact .item-title{
  font-size:15px;
  line-height:1.25;
}

.plan-card.compact .item-meta{
  margin-top:8px;
  line-height:1.7;
}

.plan-card.compact .actions{
  margin-top:14px;
}

.plan-card.compact .actions .btn{
  flex:1 1 auto;
}

.plan-card-empty{
  padding:18px;
  border:1px dashed rgba(143,182,246,.25);
  border-radius:20px;
  background:rgba(255,255,255,.02);
  color:var(--text-muted);
}

/* ===== WAIVER PREVIEW ===== */

.waiver-preview{
  background:#fff;
  color:#111827;
  border-radius:18px;
  padding:24px;
  max-height:70vh;
  overflow:auto;
  line-height:1.7;
  box-shadow:var(--shadow-md);
}

/* ===== GENERIC MODALS ===== */

.modal-overlay{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at top, rgba(59,130,246,.12), transparent 24%),
    rgba(4,8,20,.72);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:50;
}

.modal-overlay.open{
  display:flex;
  animation:premiumFadeIn .18s ease-out;
}

.modal{
  width:100%;
  max-width:900px;
  background:
    radial-gradient(circle at top right, rgba(61,129,255,.12), transparent 28%),
    linear-gradient(180deg, rgba(16,27,49,.98) 0%, rgba(10,18,34,.98) 100%);
  border:1px solid rgba(112,146,217,.18);
  border-radius:28px;
  padding:26px;
  position:relative;
  max-height:92vh;
  overflow:auto;
  box-shadow:
    0 35px 90px rgba(0,0,0,.48),
    0 10px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05);
  animation:premiumDialogIn .22s ease-out;
}

.modal::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:28px;
  pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.modal-close{
  position:absolute;
  top:16px;
  right:16px;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(140,177,244,.16);
  background:rgba(20,33,61,.88);
  color:#dbeafe;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s ease;
  z-index:2;
}

.modal-close:hover{
  transform:scale(1.04);
  background:rgba(28,45,80,.96);
  border-color:rgba(154,190,255,.32);
  box-shadow:0 10px 22px rgba(0,0,0,.24);
}

/* ===== LOADING / TOAST ===== */

#loadingOverlay{
  position:fixed;
  inset:0;
  background:var(--bg);
  z-index:100;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.spinner{
  width:46px;
  height:46px;
  border:4px solid rgba(255,255,255,.08);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

#toast{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:120;
  background:
    linear-gradient(180deg, rgba(22,34,58,.98) 0%, rgba(16,26,45,.98) 100%);
  border:1px solid color-mix(in srgb, var(--border) 84%, white 16%);
  color:var(--text);
  border-radius:16px;
  padding:13px 16px;
  min-width:240px;
  max-width:360px;
  box-shadow:var(--shadow-lg);
  opacity:0;
  transform:translateY(100px);
  transition:opacity .25s, transform .25s;
  pointer-events:none;
}

/* ===== PREMIUM POPUPS ===== */

#uiDialogModal .modal{
  max-width:580px;
  padding:30px 26px 24px;
  border-radius:28px;
  background:
    radial-gradient(circle at top right, rgba(90,134,255,.18), transparent 28%),
    radial-gradient(circle at top left, rgba(255,255,255,.04), transparent 24%),
    linear-gradient(180deg, rgba(14,25,48,.98) 0%, rgba(9,17,31,.98) 100%);
}

#uiDialogHeader{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:14px;
  padding-right:48px;
  position:relative;
  z-index:1;
}

#uiDialogIcon{
  width:68px;
  min-width:68px;
  height:68px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 30px rgba(0,0,0,.18);
}

#uiDialogIcon svg{
  width:31px;
  height:31px;
}

#uiDialogHeaderText{
  flex:1;
  min-width:0;
}

#uiDialogEyebrow{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1.3px;
  font-weight:800;
  color:#8fb6f6;
  margin-bottom:8px;
}

#uiDialogTitle{
  font-size:24px;
  line-height:1.05;
  margin-bottom:0 !important;
  color:#f8fbff;
  letter-spacing:-.3px;
}

#uiDialogMessage{
  font-size:15px !important;
  line-height:1.8 !important;
  color:#d9e6ff !important;
  margin:8px 0 22px !important;
  position:relative;
  z-index:1;
}

#uiDialogMessage strong{
  color:#ffffff;
  font-weight:800;
}

#uiDialogModal #uiDialogInput{
  min-height:120px;
  border-radius:16px;
  background:rgba(13,25,46,.82);
  border:1px solid rgba(93,131,205,.22);
  color:#ecf4ff;
}

#uiDialogModal #uiDialogInput:focus{
  border-color:rgba(93,131,205,.55);
  box-shadow:0 0 0 3px rgba(63,114,255,.16);
}

#uiDialogModal #uiDialogActions{
  gap:12px !important;
  position:relative;
  z-index:1;
}

#uiDialogCancelBtn,
#uiDialogOkBtn{
  min-width:140px;
  min-height:50px;
  border-radius:18px !important;
  font-size:15px;
  font-weight:800;
  padding:13px 18px !important;
  transition:.22s ease;
}

#uiDialogCancelBtn{
  background:linear-gradient(180deg, rgba(27,42,72,.92) 0%, rgba(20,31,56,.96) 100%);
  border:1px solid rgba(123,159,227,.16);
  color:#eef5ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

#uiDialogCancelBtn:hover{
  background:linear-gradient(180deg, rgba(34,52,88,.96) 0%, rgba(24,38,67,.98) 100%);
  border-color:rgba(141,178,247,.3);
  transform:translateY(-1px);
}

#uiDialogOkBtn{
  background:linear-gradient(180deg, #4381ff 0%, #255fe7 100%);
  border:1px solid rgba(134,171,246,.18);
  color:#fff;
  box-shadow:
    0 14px 28px rgba(37,95,231,.28),
    inset 0 1px 0 rgba(255,255,255,.12);
}

#uiDialogOkBtn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 18px 30px rgba(37,95,231,.34),
    inset 0 1px 0 rgba(255,255,255,.14);
}

#uiDialogModal.ui-dialog-danger #uiDialogEyebrow{color:#fca5a5}
#uiDialogModal.ui-dialog-warning #uiDialogEyebrow{color:#fcd34d}
#uiDialogModal.ui-dialog-success #uiDialogEyebrow{color:#86efac}
#uiDialogModal.ui-dialog-info #uiDialogEyebrow{color:#93c5fd}

#uiDialogModal.ui-dialog-danger #uiDialogIcon{
  background:linear-gradient(180deg, rgba(239,68,68,.13) 0%, rgba(127,29,29,.18) 100%);
  border-color:rgba(239,68,68,.18);
}
#uiDialogModal.ui-dialog-warning #uiDialogIcon{
  background:linear-gradient(180deg, rgba(245,158,11,.14) 0%, rgba(120,53,15,.18) 100%);
  border-color:rgba(245,158,11,.18);
}
#uiDialogModal.ui-dialog-success #uiDialogIcon{
  background:linear-gradient(180deg, rgba(34,197,94,.14) 0%, rgba(20,83,45,.18) 100%);
  border-color:rgba(34,197,94,.18);
}
#uiDialogModal.ui-dialog-info #uiDialogIcon{
  background:linear-gradient(180deg, rgba(59,130,246,.14) 0%, rgba(30,58,138,.18) 100%);
  border-color:rgba(59,130,246,.18);
}

#uiDialogCloseBtn{
  position:absolute;
  top:0;
  right:0;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(140,177,244,.16);
  background:rgba(20,33,61,.88);
  color:#dbeafe;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s ease;
}

#uiDialogCloseBtn:hover{
  transform:scale(1.04);
  background:rgba(28,45,80,.96);
  border-color:rgba(154,190,255,.32);
  box-shadow:0 10px 22px rgba(0,0,0,.24);
}

/* ===== ANIMACIONES ===== */

@keyframes spin{
  to{transform:rotate(360deg)}
}

@keyframes premiumFadeIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes premiumDialogIn{
  from{opacity:0;transform:translateY(12px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ===== RESPONSIVE ===== */

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤1100px)
   ══════════════════════════════════════════════════════════════ */
@media(max-width:1100px){
  .dash-kpi-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤900px)
   ══════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .grid-2,.grid-4{ grid-template-columns:1fr !important; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤760px)
   ══════════════════════════════════════════════════════════════ */
@media(max-width:760px){

  /* Body: prevent horizontal scroll */
  body{ overflow-x:hidden; }

  /* ── Main container ── */
  .main{ padding:10px; overflow-x:hidden; }

  /* ── Navbar ── */
  .navbar{
    padding:8px 12px;
    min-height:54px;
    gap:8px;
    flex-wrap:nowrap;
  }
  .navbar-left{
    flex:1;
    min-width:0;
    gap:8px;
    overflow:hidden;
  }
  .navbar-title{
    font-size:13px;
    letter-spacing:.3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:160px;
  }
  .nav-logo{ height:26px; }
  .navbar-right{ gap:6px; flex-wrap:nowrap; flex-shrink:0; }
  /* Hide desktop-only nav buttons */
  .nav-desktop{ display:none !important; }
  .user-badge{
    font-size:11px;
    padding:5px 10px;
    max-width:120px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* ── Hamburger button ── */
  .btn-hamburger{ display:flex !important; }

  /* ── Mobile drawer ── */
  .tabs{
    position:fixed;
    top:0; left:0; bottom:0;
    width:76vw;
    max-width:300px;
    z-index:200;
    border-radius:0 20px 20px 0;
    padding:60px 10px 16px;
    flex-direction:column;
    gap:3px;
    overflow-y:auto;
    transform:translateX(-110%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    margin-bottom:0;
    justify-content:flex-start !important;
    box-shadow:8px 0 40px rgba(0,0,0,.6);
    background:
      linear-gradient(180deg, rgba(14,22,40,.99) 0%, rgba(10,16,30,.99) 100%) !important;
  }
  .tabs.mobile-open{ transform:translateX(0); }

  /* Backdrop */
  .tabs-backdrop{
    display:none;
    position:fixed;
    inset:0;
    z-index:199;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(3px);
  }
  .tabs-backdrop.active{ display:block; }

  /* Mobile-only actions at bottom of drawer */
  .nav-mobile-actions{
    display:flex;
    flex-direction:column;
    gap:3px;
    margin-top:auto;
    padding-top:12px;
    border-top:1px solid var(--border);
  }

  /* Tab buttons in drawer */
  .tab{
    width:100%;
    text-align:left;
    font-size:14px;
    padding:12px 14px;
    border-radius:10px;
  }

  /* ── Cards ── */
  .card{
    padding:14px;
    border-radius:16px;
    margin-bottom:12px;
  }
  .card-header{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin-bottom:12px;
  }
  .card-header > *:last-child{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .card-title{ font-size:16px; }

  /* ── Dashboard KPI grid ── */
  .dash-kpi-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-bottom:10px !important;
  }
  .stat-box{
    padding:12px 13px !important;
    border-radius:14px !important;
  }
  /* Undo the horizontal flex layout injected inline from JS */
  .dash-kpi-grid .stat-box[style]{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:3px !important;
    padding:12px 13px !important;
  }
  .stat-value{ font-size:20px !important; }
  .stat-label{ font-size:9px !important; margin-top:3px !important; }
  /* Large icon in stat box */
  .dash-kpi-grid .stat-box > div:first-child{ font-size:20px !important; }

  /* ── Grids ── */
  .grid-2,.grid-4{ grid-template-columns:1fr !important; }

  /* ── Filters ── */
  .filters{ gap:6px; margin-bottom:10px; flex-direction:column; }
  .filters input,.filters select{
    width:100% !important;
    min-width:0 !important;
    font-size:14px;
    padding:9px 11px;
  }

  /* ── Lists ── */
  .list{ gap:8px; }
  .list-item{ padding:12px 13px !important; }

  /* ── Modals: bottom sheet ── */
  .modal-overlay{ align-items:flex-end !important; padding:0 !important; }
  .modal{
    max-width:100% !important;
    width:100% !important;
    border-radius:22px 22px 0 0 !important;
    margin:0 !important;
    max-height:92vh;
    overflow-y:auto;
    padding-bottom:env(safe-area-inset-bottom,16px);
  }

  /* ── POS: stacked layout ── */
  #posCobroContent [style*="1fr 360px"],
  #posCobroContent [style*="1fr 380px"]{
    display:flex !important;
    flex-direction:column !important;
    overflow:visible !important;
    height:auto !important;
    min-height:0 !important;
  }
  /* Product panel max-height + scroll */
  #posCobroContent [style*="border-right:1px solid var(--border)"]{
    border-right:none !important;
    border-bottom:1px solid var(--border) !important;
    max-height:260px;
    overflow-y:auto;
  }
  /* Payment panel: no fixed height */
  #posCobroContent [style*="flex:1;overflow-y:auto;padding:16px 18px"]{
    max-height:200px;
  }

  /* Product cards grid */
  #posItemsGrid{ grid-template-columns:repeat(2,1fr) !important; gap:7px !important; }

  /* POS plan buttons */
  #posCobroContent [style*="minmax(110px"]{
    grid-template-columns:repeat(auto-fill,minmax(80px,1fr)) !important;
    gap:5px !important;
  }

  /* POS inventory grid */
  #posInventoryGrid{ grid-template-columns:repeat(2,1fr) !important; }

  /* ── Dialog ── */
  #uiDialogModal .modal{ padding:20px 16px 16px; border-radius:22px 22px 0 0 !important; }
  #uiDialogTitle{ font-size:18px; }
  #uiDialogCancelBtn,#uiDialogOkBtn{ width:100%; }
  #uiDialogModal #uiDialogActions{ flex-direction:column-reverse; align-items:stretch !important; }

  /* ── Sucursales dashboard ── */
  #dashboardTimers [style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }

  /* ── Tables ── */
  table th,table td{ padding:7px 8px; font-size:11px; }

  /* ── Plan cards ── */
  .plan-grid{ grid-template-columns:1fr; }
  .plan-card.compact{ min-height:auto; }
  .plans-grid{ gap:8px; }
  .plan-card-mini{ width:100%; min-width:0; }
}

/* ══════════════════════════════════════════════════════════════
   SMALL PHONES (≤430px)
   ══════════════════════════════════════════════════════════════ */
@media(max-width:430px){
  /* 1 col KPI on tiny screens */
  .dash-kpi-grid{
    grid-template-columns:1fr !important;
  }
  .navbar-title{ max-width:100px; font-size:11px; }
  .user-badge{ display:none; }
}

/* ===== PLAN CARDS GRID ===== */

.plans-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:14px;
}

.plan-card-mini{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 16px;
  width:180px;
  min-width:160px;
  display:flex;
  flex-direction:column;
  gap:4px;
  transition:border-color .18s, background .18s;
}

.plan-card-mini:hover{
  border-color:rgba(99,153,255,.45);
  background:rgba(99,153,255,.06);
}

.plan-card-mini-name{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:normal;
  letter-spacing:.5px;
  color:var(--text);
  margin-bottom:2px;
}

.plan-card-mini-dur{
  font-size:12px;
  color:var(--text-muted);
}

.plan-card-mini-price{
  font-size:18px;
  font-weight:800;
  color:#4ade80;
  margin:4px 0;
}

.plan-card-mini-status{
  font-size:11px;
  font-weight:600;
  border-radius:20px;
  padding:2px 8px;
  display:inline-block;
  width:fit-content;
}

.plan-card-mini-status.active{
  background:rgba(74,222,128,.12);
  color:#4ade80;
  border:1px solid rgba(74,222,128,.25);
}

.plan-card-mini-status.inactive{
  background:rgba(239,68,68,.12);
  color:#f87171;
  border:1px solid rgba(239,68,68,.25);
}

.plan-card-mini-actions{
  display:flex;
  flex-direction:row;
  gap:6px;
  margin-top:10px;
  flex-wrap:nowrap;
}

.plan-card-mini-add{
  border-style:dashed;
  border-color:rgba(99,153,255,.35);
  color:var(--text-muted);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:110px;
  transition:border-color .18s, color .18s, background .18s;
}

.plan-card-mini-add:hover{
  border-color:var(--primary);
  color:var(--text);
  background:rgba(99,153,255,.08);
}

/* ===== DARK / LIGHT MODE ===== */
[data-theme="light"]{
  --primary:#1A56DB;
  --primary-light:#3B75F5;
  --primary-soft:#7DA8FF;
  --accent:#1d4ed8;
  --glow:rgba(26,86,219,.15);

  --bg:#f0f4f8;
  --surface:#ffffff;
  --surface2:#e8edf4;
  --surface3:#dde4ef;
  --border:#c5d0e0;

  --text:#0f172a;
  --text-muted:#475569;

  --success:#15803d;
  --danger:#b91c1c;
  --warning:#b45309;

  --shadow-xl:0 30px 80px rgba(0,0,0,.12);
  --shadow-lg:0 18px 45px rgba(0,0,0,.08);
  --shadow-md:0 10px 24px rgba(0,0,0,.06);
}

[data-theme="light"] body{
  background:var(--bg);
  color:var(--text);
}

[data-theme="light"] .navbar{
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--border);
}

[data-theme="light"] .login-card{
  background:#ffffff;
  box-shadow:0 20px 60px rgba(0,0,0,.12);
}

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea{
  background:var(--surface2) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

[data-theme="light"] .card{
  background:var(--surface);
  border-color:var(--border);
}

[data-theme="light"] #toast{
  background:#ffffff;
  border-color:var(--border);
  color:var(--text);
}

/* Tabs: fondo oscuro → texto claro en ambos temas */
[data-theme="light"] .tabs{
  background:rgba(15,25,48,.88);
}
[data-theme="light"] .tab{
  color:rgba(237,243,255,.7);
}
[data-theme="light"] .tab.active{
  color:#fff;
  background:rgba(35,53,86,.98);
}
[data-theme="light"] .tab:hover{
  color:#fff;
}

/* Tabla headers */
[data-theme="light"] thead tr{
  background:linear-gradient(180deg,rgba(28,42,69,.98) 0%,rgba(21,33,55,.98) 100%);
}
[data-theme="light"] th{
  color:rgba(237,243,255,.85);
}

/* Navbar title */
[data-theme="light"] .navbar-title{
  color:#0f172a;
}
[data-theme="light"] .user-badge{
  background:rgba(15,25,48,.9);
  color:#fff;
}

/* Role badges remain readable */
[data-theme="light"] .role-badge{
  filter: brightness(0.9);
}

/* Modal overlays */
[data-theme="light"] .modal{
  background:#ffffff;
  color:#0f172a;
}
[data-theme="light"] .modal-overlay{
  background:rgba(0,0,0,.5);
}

/* Card titles */
[data-theme="light"] .card-title{
  color:#0f172a;
}
[data-theme="light"] .card-subtitle{
  color:#475569;
}

/* Items */
[data-theme="light"] .item{
  background:#ffffff;
  border-color:var(--border);
}
[data-theme="light"] .item-title{
  color:#0f172a;
}
[data-theme="light"] .item-meta{
  color:#475569;
}

/* Table rows */
[data-theme="light"] td{
  color:#0f172a;
  border-color:var(--border);
}
[data-theme="light"] tr:hover td{
  background:rgba(26,86,219,.05);
}

/* Stat boxes */
[data-theme="light"] .stat-box{
  background:#ffffff;
  border-color:var(--border);
}
[data-theme="light"] .stat-value{
  color:#0f172a;
}
[data-theme="light"] .stat-label{
  color:#475569;
}

/* ===== TIMER EXPIRED PULSE (panel cajero) ===== */
@keyframes expiredPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,0); border-color:rgba(239,68,68,.4); }
  50%{ box-shadow:0 0 0 8px rgba(239,68,68,.2); border-color:rgba(239,68,68,.9); }
}
.timer-expired-pulse{
  animation: expiredPulse 1.4s ease-in-out infinite;
  border-left:4px solid #ef4444 !important;
}


/* ===== TIMERS PANEL — GRID 3 COLUMNAS ===== */

.timers-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

@media(max-width:1100px){
  .timers-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:680px){
  .timers-grid{ grid-template-columns: 1fr; }
}

.timer-panel-card{
  background:
    linear-gradient(180deg, rgba(26,39,63,.94) 0%, rgba(19,31,51,.98) 100%);
  border:1px solid color-mix(in srgb, var(--border) 84%, white 16%);
  border-radius:18px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:border-color .18s, box-shadow .18s;
}

.timer-panel-card:hover{
  border-color:rgba(99,153,255,.4);
  box-shadow:0 6px 20px rgba(0,0,0,.2);
}

.tpc-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.tpc-name{
  font-family:var(--font-display);
  font-weight:normal;
  font-size:15px;
  letter-spacing:.5px;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tpc-meta{
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:12px;
  color:var(--text-muted);
}

.tpc-meta span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tpc-actions{
  display:flex;
  gap:8px;
  margin-top:2px;
}

.tpc-actions .btn{
  flex:1;
}


/* ===== EXTRA TIME BUTTONS ===== */
.extra-time-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  background:linear-gradient(180deg,rgba(26,39,63,.95) 0%,rgba(18,29,49,.98) 100%);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px 12px;
  cursor:pointer;
  transition:transform .15s, border-color .15s, background .15s;
  color:var(--text);
}
.extra-time-btn:hover{
  transform:translateY(-3px);
  border-color:rgba(99,153,255,.5);
  background:linear-gradient(180deg,rgba(35,52,86,.98) 0%,rgba(26,40,68,.98) 100%);
}
.et-label{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  letter-spacing:.5px;
}
.et-price{
  font-size:20px;
  font-weight:800;
  color:#4ade80;
  font-family:var(--font-display);
}


/* ===== TIMER ADDED CELEBRATION ===== */
@keyframes celebPop{
  from{ opacity:0; transform:scale(.6); }
  to{   opacity:1; transform:scale(1); }
}
/* ════════════════════════════════════════════════════════════════
   PRO UPGRADE STYLES
   ════════════════════════════════════════════════════════════════ */

/* Skeleton loader */
@keyframes pulse{
  0%,100%{ opacity:.5; }
  50%{ opacity:.9; }
}

/* Pulse rojo para timers vencidos en dashboard */
@keyframes pulseRed{
  0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,.0); }
  50%{ box-shadow:0 0 0 6px rgba(239,68,68,.2); }
}

/* Transición suave de tab panels */
.tab-panel.active{
  animation:tabFadeIn .2s ease both;
}
@keyframes tabFadeIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Loading spinner global */
.loading-line{
  height:3px;
  background:linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
  background-size:200% 100%;
  animation:loadingSlide 1.2s linear infinite;
  border-radius:2px;
}
@keyframes loadingSlide{
  0%{ background-position:100% 0; }
  100%{ background-position:-100% 0; }
}

/* Stat box mejorado */
.stat-box{
  transition:transform .15s, box-shadow .15s;
}
.stat-box:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,0,0,.28);
}

/* Toast mejorado */
#toast{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}

.toast-item{
  padding:12px 20px;
  border-radius:12px;
  font-size:13px;
  font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  animation:toastIn .25s cubic-bezier(.34,1.56,.64,1) both;
  pointer-events:auto;
  max-width:320px;
  border:1px solid;
}
.toast-item.success{
  background:rgba(22,163,74,.15);
  border-color:rgba(74,222,128,.3);
  color:#4ade80;
}
.toast-item.error{
  background:rgba(239,68,68,.15);
  border-color:rgba(239,68,68,.3);
  color:#fca5a5;
}
.toast-item.info{
  background:rgba(26,86,219,.15);
  border-color:rgba(99,153,255,.3);
  color:#93c5fd;
}
@keyframes toastIn{
  from{ opacity:0; transform:translateX(24px); }
  to{ opacity:1; transform:translateX(0); }
}

/* Badge de notificación en tab */
.tab-badge{
  background:#ef4444;
  color:#fff;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  padding:1px 6px;
  margin-left:4px;
  vertical-align:middle;
}

/* Empty state mejorado */
.empty-state{
  text-align:center;
  padding:40px 20px;
  color:var(--text-muted);
}
.empty-state .empty-icon{
  font-size:48px;
  margin-bottom:12px;
  opacity:.6;
}
.empty-state .empty-title{
  font-size:15px;
  font-weight:700;
  margin-bottom:6px;
  color:var(--text);
}
.empty-state .empty-subtitle{
  font-size:13px;
}

/* Input mejorado — focus ring */
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--primary) !important;
  box-shadow:0 0 0 3px rgba(26,86,219,.18) !important;
  transition:box-shadow .15s;
}

/* Scrollbar personalizado */
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--surface3); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:var(--border); }

/* Mobile: modal full width */
@media(max-width:600px){
  .modal{
    max-width:100% !important;
    width:100% !important;
    border-radius:20px 20px 0 0 !important;
    margin-top:auto !important;
  }
  .modal-overlay{
    align-items:flex-end !important;
    padding:0 !important;
  }
  #toast{
    bottom:16px;
    right:12px;
    left:12px;
  }
  .toast-item{
    max-width:100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SMALL PHONES (≤480px)
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:480px){
  /* KPI cards: 1 col on tiny screens */
  #dashboardContent > div:first-child{
    grid-template-columns:1fr !important;
  }

  /* Stat value smaller */
  .stat-value{ font-size:18px !important; }

  /* Card header buttons stack */
  .card-header .btn{
    min-width:100%;
  }

  /* POS items: 1 col on tiny */
  #posItemsGrid{
    grid-template-columns:1fr 1fr !important;
  }

  /* Navbar title even smaller */
  .navbar-title{
    font-size:11px !important;
  }

  /* User badge hidden on tiny to save space */
  .user-badge{
    display:none;
  }

  /* Modals: taller */
  .modal{
    max-height:96vh !important;
  }
}

/* Dashboard KPI grid override for mobile */
@media(max-width:760px){
  .dash-kpi-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:8px !important;
  }
  .dash-kpi-grid .stat-box{
    flex-direction:column !important;
    align-items:flex-start !important;
    padding:12px !important;
  }
  .dash-kpi-grid .stat-box > div[style*="font-size:26px"],
  .dash-kpi-grid .stat-box > div[style*="font-size:28px"]{
    font-size:20px !important;
  }
  .dash-kpi-grid .stat-box > div[style*="font-size:30px"],
  .dash-kpi-grid .stat-box > div[style*="font-size:32px"]{
    font-size:22px !important;
  }
}
@media(max-width:480px){
  .dash-kpi-grid{
    grid-template-columns:1fr !important;
  }
}

/* ── Login particle canvas ── */
#loginParticles{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}

#loginScreen .login-card{
  position:relative;
  z-index:1;
}

/* ══════════════════════════════════════════════════════════════
   SUB-TABS (second navigation level)
   ══════════════════════════════════════════════════════════════ */

.sub-tabs{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:8px 16px;
  background:var(--surface2);
  border-radius:0 0 16px 16px;
  border:1px solid var(--border);
  border-top:none;
  margin-bottom:16px;
  flex-wrap:wrap;
}

.sub-tab{
  padding:7px 16px;
  border-radius:10px;
  border:none;
  background:transparent;
  color:var(--text-muted);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:.15s;
  white-space:nowrap;
}

.sub-tab:hover{
  background:var(--surface3);
  color:var(--text);
}

.sub-tab.active{
  background:var(--primary);
  color:#fff;
  font-weight:700;
}

/* On mobile: sub-tabs scroll horizontally */
@media(max-width:760px){
  .sub-tabs{
    border-radius:0;
    padding:6px 10px;
    gap:4px;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-bottom:10px;
  }
  .sub-tabs::-webkit-scrollbar{ display:none; }
  .sub-tab{
    padding:7px 14px;
    font-size:12px;
    flex-shrink:0;
  }
}

[data-theme="light"] .sub-tabs{
  background:rgba(248,250,252,.95);
  border-color:rgba(0,0,0,.08);
}
[data-theme="light"] .sub-tab:hover{ background:rgba(0,0,0,.05); }
[data-theme="light"] .sub-tab.active{ background:var(--primary); }

/* ══════════════════════════════════════════════════════════════════════
   LIGHT MODE — FIXES para contenedores que quedan oscuros
══════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .filters input,
[data-theme="light"] .filters select{
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

[data-theme="light"] .filters input:focus,
[data-theme="light"] .filters select:focus{
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(26,86,219,.10) !important;
}

[data-theme="light"] .timer-panel-card{
  background: #ffffff !important;
  border-color: var(--border) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}

[data-theme="light"] .timer-panel-card:hover{
  border-color: rgba(26,86,219,.35) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
}

[data-theme="light"] .tpc-name{
  color: #0f172a !important;
}

[data-theme="light"] .tpc-meta span{
  color: #475569 !important;
}

[data-theme="light"] .timer-chip{
  background: rgba(22,163,74,.12) !important;
  color: #15803d !important;
  border-color: rgba(22,163,74,.25) !important;
}

[data-theme="light"] .timer-chip.warn{
  background: rgba(234,179,8,.12) !important;
  color: #a16207 !important;
  border-color: rgba(234,179,8,.25) !important;
}

[data-theme="light"] .timer-chip.exp{
  background: rgba(239,68,68,.12) !important;
  color: #b91c1c !important;
  border-color: rgba(239,68,68,.25) !important;
}

[data-theme="light"] .btn-secondary{
  background: #e5e7eb !important;
  color: #1f2937 !important;
  border: 1px solid #d1d5db !important;
}

[data-theme="light"] .btn-ghost{
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #d1d5db !important;
}

[data-theme="light"] .sub-tabs{
  background: #ffffff !important;
  border-color: var(--border) !important;
}

[data-theme="light"] .sub-tab:hover{
  background: #f1f5f9 !important;
}

[data-theme="light"] .extra-time-btn{
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: #0f172a !important;
}

[data-theme="light"] .extra-time-btn:hover{
  border-color: var(--primary) !important;
  background: rgba(26,86,219,.04) !important;
}

/* List items (POS transactions, etc) */
[data-theme="light"] .list-item,
[data-theme="light"] .list .list-item{
  background: #ffffff;
  border-color: var(--border);
}

[data-theme="light"] .list-item:hover{
  background: #f8fafc;
}

/* Empty states */
[data-theme="light"] .empty-state{
  color: #475569;
}

/* Modal card inside modal */
[data-theme="light"] .modal .card{
  background: #f8fafc !important;
  border-color: var(--border) !important;
}

/* Kiosk links & nav icons */
[data-theme="light"] .navbar-actions a,
[data-theme="light"] .navbar-actions button{
  color: #334155;
}

/* bg-card variable for inline styles (POS items) */
[data-theme="light"]{
  --bg-card: #ffffff;
}

/* ══════════════════════════════════════════════════════════════
   POS — acomodo premium de caja y cobro de tiempo extra
   ══════════════════════════════════════════════════════════════ */
#tab-pos{
  width:100%;
}

#tab-pos .pos-shell-card{
  max-width:1450px;
  margin:0 auto 18px auto;
  padding:24px;
}

.pos-hero{
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(360px,42%);
  gap:24px;
  align-items:center;
  margin-bottom:22px;
}

.pos-title-block{
  min-height:116px;
  display:flex;
  align-items:center;
}

.pos-title-row{
  display:flex;
  align-items:center;
  gap:14px;
}

.pos-title-icon{
  width:54px;
  height:54px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  background:linear-gradient(180deg,rgba(59,130,246,.20),rgba(26,86,219,.10));
  border:1px solid rgba(125,168,255,.20);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}

.pos-actions-panel{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
  justify-content:center;
  padding:0 2px;
}

.pos-turno-actions,
.pos-secondary-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.pos-turno-status{
  font-size:12px;
  padding:8px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  border:1px solid rgba(34,197,94,.35);
  background:rgba(34,197,94,.14);
  color:#86efac;
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}

.pos-new-sale-btn{
  min-height:54px;
  height:54px;
  border-radius:18px;
  font-size:16px;
  letter-spacing:.2px;
}

.pos-secondary-actions .btn,
.pos-turno-actions .btn{
  min-height:40px;
}

.pos-filters-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap;
  padding:14px 0 4px 0;
  border-top:1px solid rgba(125,168,255,.10);
  position:relative;
  z-index:1;
}

.pos-filters-row input,
.pos-filters-row select,
.pos-search-input{
  background:linear-gradient(180deg,rgba(26,39,63,.92) 0%,rgba(18,29,49,.98) 100%);
  border:1px solid color-mix(in srgb, var(--border) 84%, white 16%);
  border-radius:14px;
  color:var(--text);
  padding:11px 14px;
  font-family:'DM Sans',sans-serif;
  outline:none;
  min-height:46px;
}

.pos-search-input{
  min-width:260px;
  flex:0 1 320px;
}

.pos-filters-row input:focus,
.pos-filters-row select:focus,
.pos-search-input:focus{
  border-color:color-mix(in srgb, var(--primary) 70%, white 30%);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent);
}

.pos-transactions-list{
  margin-top:10px;
}

/* Modal de tiempo extra */
.extra-time-pay-modal{
  max-width:500px !important;
  padding:28px !important;
}

.extra-time-pay-head{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding-right:48px;
  margin-bottom:18px;
}

.extra-time-pay-icon{
  width:48px;
  height:48px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  background:linear-gradient(180deg,rgba(34,197,94,.18),rgba(21,128,61,.10));
  border:1px solid rgba(74,222,128,.22);
}

.extra-time-total-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  margin-bottom:18px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(34,197,94,.16),rgba(34,197,94,.07));
  border:1px solid rgba(74,222,128,.25);
}

.extra-time-total-card span{
  color:#86efac;
  font-weight:800;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.extra-time-total-card strong{
  color:#fff;
  font-size:28px;
  font-family:var(--font-display);
  font-weight:normal;
  letter-spacing:1px;
}

.extra-time-quick-cash{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.extra-time-cash-chip{
  border:1px solid rgba(125,168,255,.22);
  background:rgba(125,168,255,.10);
  color:#dbeafe;
  border-radius:999px;
  padding:8px 11px;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
  transition:.16s ease;
}

.extra-time-cash-chip:hover{
  transform:translateY(-1px);
  border-color:rgba(125,168,255,.42);
  background:rgba(125,168,255,.16);
}

.extra-time-change-box{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:18px;
  margin:-2px 0 16px 0;
  border:1px solid rgba(125,168,255,.18);
  background:rgba(125,168,255,.08);
}

.extra-time-change-box span{
  color:var(--text-muted);
  font-weight:800;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.75px;
}

.extra-time-change-box strong{
  font-size:24px;
  color:#fff;
  font-family:var(--font-display);
  font-weight:normal;
  letter-spacing:1px;
}

.extra-time-change-box.success{
  border-color:rgba(34,197,94,.35);
  background:rgba(34,197,94,.13);
}

.extra-time-change-box.success span,
.extra-time-change-box.success strong{
  color:#86efac;
}

.extra-time-change-box.danger{
  border-color:rgba(239,68,68,.36);
  background:rgba(239,68,68,.13);
}

.extra-time-change-box.danger span,
.extra-time-change-box.danger strong{
  color:#fca5a5;
}

.extra-time-change-box.warn{
  border-color:rgba(245,158,11,.34);
  background:rgba(245,158,11,.12);
}

.extra-time-change-box.warn span,
.extra-time-change-box.warn strong{
  color:#fcd34d;
}

.extra-time-change-box.muted{
  border-color:rgba(125,168,255,.18);
  background:rgba(125,168,255,.08);
}

.extra-time-pay-error{
  display:none;
  color:#fca5a5;
  background:rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.24);
  border-radius:14px;
  padding:10px 12px;
  font-size:13px;
  font-weight:700;
  margin-bottom:12px;
}

.extra-time-pay-actions{
  display:flex;
  gap:10px;
  margin-top:16px;
}

.extra-time-pay-actions .btn{
  flex:1;
}

.extra-time-pay-actions .btn-primary{
  background:linear-gradient(135deg,#16a34a,#15803d);
  border:1px solid #16a34a;
  box-shadow:0 16px 28px rgba(34,197,94,.18);
}

.extra-time-pay-actions .btn-primary:hover{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  box-shadow:0 20px 34px rgba(34,197,94,.24);
}

[data-theme="light"] .pos-turno-status{
  color:#15803d;
  background:#dcfce7;
  border-color:#86efac;
}

[data-theme="light"] .extra-time-change-box strong,
[data-theme="light"] .extra-time-total-card strong{
  color:#0f172a;
}

@media(max-width:900px){
  .pos-hero{
    grid-template-columns:1fr;
    gap:16px;
  }

  .pos-title-block{
    min-height:auto;
  }

  .pos-actions-panel{
    max-width:100%;
  }

  .pos-filters-row input,
  .pos-filters-row select,
  .pos-search-input,
  #posFilterBranchWrap{
    width:100%;
    flex:1 1 100%;
  }
}

@media(max-width:560px){
  #tab-pos .pos-shell-card{
    padding:18px;
  }

  .pos-title-row{
    align-items:flex-start;
  }

  .pos-title-icon{
    width:46px;
    height:46px;
    border-radius:15px;
    font-size:22px;
  }

  .pos-turno-actions,
  .pos-secondary-actions,
  .extra-time-pay-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .pos-turno-actions .btn,
  .pos-secondary-actions .btn,
  .pos-turno-status{
    width:100%;
  }

  .extra-time-pay-modal{
    padding:22px 18px !important;
  }

  .extra-time-pay-head{
    padding-right:42px;
  }

  .extra-time-total-card,
  .extra-time-change-box{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }

  .extra-time-total-card strong,
  .extra-time-change-box strong{
    font-size:24px;
  }
}


/* ══════════════════════════════════════════════════════════════
   CAJA / CORTE / INVENTARIO INTELIGENTE
   ══════════════════════════════════════════════════════════════ */
.pos-corte-card{
  max-width:1450px;
  margin:0 auto 18px auto;
  padding:24px;
}

.corte-filter-bar,
.inventory-smart-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin:14px 0 18px;
}

.corte-filter-bar input,
.corte-filter-bar select{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text);
  min-height:42px;
}

.corte-kpi-grid,
.inventory-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;
  margin-bottom:16px;
}

.corte-kpi,
.inventory-kpi{
  background:linear-gradient(180deg,rgba(24,39,66,.78),rgba(15,28,49,.92));
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  box-shadow:0 16px 36px rgba(0,0,0,.14);
}

.corte-kpi .lbl,
.inventory-kpi .lbl{
  font-size:10px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:8px;
}

.corte-kpi .val,
.inventory-kpi .val{
  font-size:26px;
  font-weight:950;
  color:var(--text);
}

.corte-kpi .hint,
.inventory-kpi .hint{
  font-size:12px;
  color:var(--text-muted);
  margin-top:4px;
}

.corte-section,
.inventory-smart-section{
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  margin-top:14px;
}

.corte-section-title,
.inventory-smart-title{
  font-size:11px;
  font-weight:850;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:12px;
}

.corte-row,
.inventory-smart-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}

.corte-row:last-child,
.inventory-smart-row:last-child{ border-bottom:none; }

.corte-row-main,
.inventory-smart-row-main{
  min-width:0;
}

.corte-row-title,
.inventory-smart-row-title{
  font-weight:750;
  font-size:14px;
  color:var(--text);
}

.corte-row-meta,
.inventory-smart-row-meta{
  font-size:12px;
  color:var(--text-muted);
  margin-top:2px;
}

.corte-row-value,
.inventory-smart-row-value{
  font-weight:900;
  color:var(--primary);
  white-space:nowrap;
}

.inventory-alert-empty{ color:#ef4444 !important; }
.inventory-alert-low{ color:#f59e0b !important; }
.inventory-alert-ok{ color:#22c55e !important; }

.promo-days-wrap{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.promo-days-wrap label{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text-muted);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.promo-days-wrap input{ width:auto; accent-color:var(--primary); }

[data-theme="light"] .corte-kpi,
[data-theme="light"] .inventory-kpi{
  background:#ffffff;
}

/* ══════════════════════════════════════════════════════════════
   Turno visible junto al cajero en la barra superior
   ══════════════════════════════════════════════════════════════ */
.nav-turno-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.nav-turno-status{
  min-height:36px;
  padding:8px 14px;
  white-space:nowrap;
}
.nav-turno-close{
  min-height:36px;
  white-space:nowrap;
}
#tab-pos .pos-actions-panel{
  align-items:stretch;
  justify-content:center;
}
#tab-pos .pos-new-sale-btn{
  min-height:60px;
  height:60px;
}
@media(max-width:900px){
  .nav-turno-actions{
    order:10;
    width:100%;
    justify-content:flex-end;
  }
}
@media(max-width:560px){
  .nav-turno-actions{
    justify-content:stretch;
  }
  .nav-turno-actions .btn,
  .nav-turno-status{
    width:100%;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Pulseras por paquete
   ════════════════════════════════════════════════════════════════════ */
.bracelet-toolbar{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.bracelet-toolbar select,
.bracelet-link-row select,
.bracelet-link-row input{
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text);
  border-radius:10px;
  padding:9px 12px;
  font-size:13px;
}
.bracelet-info-box{
  margin:0 0 16px;
  padding:12px 14px;
  border:1px solid rgba(59,130,246,.28);
  background:rgba(59,130,246,.10);
  color:var(--text-muted);
  border-radius:14px;
  font-size:13px;
  line-height:1.45;
}
.bracelet-grid{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:16px;
}
.bracelet-section{
  border:1px solid var(--border);
  background:rgba(255,255,255,.025);
  border-radius:18px;
  padding:16px;
}
.bracelet-section-title{
  font-weight:900;
  font-size:17px;
  color:var(--text);
  margin-bottom:4px;
}
.bracelet-section-subtitle{
  color:var(--text-muted);
  font-size:12px;
  margin-bottom:14px;
}
.bracelet-cards{
  display:grid;
  gap:10px;
}
.bracelet-card{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:16px;
  padding:12px;
}
.bracelet-swatch{
  width:42px;
  height:42px;
  border-radius:999px;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.22), 0 8px 20px rgba(0,0,0,.25);
  flex:0 0 auto;
}
.bracelet-card-body{
  flex:1;
  min-width:0;
}
.bracelet-card-title{
  font-weight:900;
  font-size:15px;
  color:var(--text);
}
.bracelet-card-meta{
  font-size:12px;
  color:var(--text-muted);
  margin-top:2px;
}
.bracelet-status{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:3px 8px;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.bracelet-status-ok{ background:rgba(34,197,94,.14); color:#4ade80; }
.bracelet-status-low{ background:rgba(245,158,11,.16); color:#fbbf24; }
.bracelet-status-empty{ background:rgba(239,68,68,.16); color:#f87171; }
.bracelet-status-off{ background:rgba(148,163,184,.14); color:#94a3b8; margin-left:4px; }
.bracelet-link-list{
  display:grid;
  gap:10px;
}
.bracelet-link-row{
  display:grid;
  grid-template-columns:1.15fr 1fr 90px 105px auto;
  gap:8px;
  align-items:center;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:16px;
  padding:12px;
}
.bracelet-link-title{
  font-weight:900;
  color:var(--text);
  font-size:14px;
}
.bracelet-movements{
  display:grid;
  gap:8px;
}
.bracelet-movement-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:14px;
  color:var(--text-muted);
  font-size:12px;
}
.bracelet-movement-row strong{ color:var(--text); }
.bracelet-alert-modal{
  max-width:560px;
  text-align:center;
  border-color:rgba(239,68,68,.5) !important;
  box-shadow:0 30px 120px rgba(239,68,68,.22), 0 30px 100px rgba(0,0,0,.65) !important;
}
.bracelet-alert-icon{
  width:76px;
  height:76px;
  margin:4px auto 12px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:38px;
  background:rgba(239,68,68,.15);
  border:1px solid rgba(239,68,68,.35);
}
.bracelet-alert-title{
  font-size:25px;
  font-weight:950;
  color:#f87171;
  margin-bottom:8px;
}
.bracelet-alert-message{
  white-space:pre-line;
  font-size:18px;
  line-height:1.35;
  font-weight:900;
  color:var(--text);
  text-transform:uppercase;
}
@media (max-width:900px){
  .bracelet-grid{ grid-template-columns:1fr; }
  .bracelet-link-row{ grid-template-columns:1fr; }
  .bracelet-toolbar{ justify-content:flex-start; }
}

/* ══════════════════════════════════════════════════════════════
   V8 — Fondo estilo registro-cliente + mejoras pulseras
   ══════════════════════════════════════════════════════════════ */
body{
  background:
    radial-gradient(circle at 10% 10%, rgba(26,86,219,.28), transparent 34%),
    radial-gradient(circle at 95% 95%, rgba(34,197,94,.20), transparent 34%),
    linear-gradient(180deg, #07111f 0%, #0b1728 48%, #070d18 100%) !important;
  background-attachment:fixed;
}

/* Mantiene la animación del login por encima del fondo, sin tapar la tarjeta */
#loginParticles{
  z-index:0;
}
#loginScreen .login-card{
  z-index:1;
}

.bracelet-card-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.bracelet-card-actions .btn{
  white-space:nowrap;
}

@media(max-width:720px){
  .bracelet-card{
    align-items:flex-start;
    flex-direction:column;
  }
  .bracelet-card-actions{
    justify-content:flex-start;
    width:100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   FIESTAS Y RESERVAS
   ══════════════════════════════════════════════════════════════════════ */
.parties-shell{max-width:1320px;margin:0 auto;display:flex;flex-direction:column;gap:18px;}
.parties-hero-card{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(20,46,90,.92),rgba(8,18,36,.96));}
.parties-hero-card:before{content:"";position:absolute;inset:-80px -80px auto auto;width:260px;height:260px;background:radial-gradient(circle,rgba(59,130,246,.45),transparent 65%);filter:blur(8px);}
.parties-hero-card:after{content:"";position:absolute;left:-80px;bottom:-110px;width:320px;height:240px;background:radial-gradient(circle,rgba(34,197,94,.35),transparent 70%);filter:blur(12px);}
.parties-hero-card .card-title{font-size:30px;line-height:1.05;position:relative;z-index:1;}
.party-kicker{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.12);color:#fde68a;font-weight:900;text-transform:uppercase;letter-spacing:.18em;font-size:11px;padding:8px 12px;border-radius:999px;margin-bottom:10px;position:relative;z-index:1;}
.parties-hero-copy,.parties-hero-actions{position:relative;z-index:1;}
.parties-hero-card{display:flex;align-items:center;justify-content:space-between;gap:18px;}
.parties-hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.parties-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);gap:18px;align-items:start;}
.party-filters{grid-template-columns:minmax(180px,.7fr) 160px 180px;}
.party-packages-list,.party-reservations-list{display:flex;flex-direction:column;gap:12px;}
.party-package-card,.party-reservation-card{border:1px solid var(--border);background:rgba(15,31,58,.72);border-radius:18px;padding:16px;box-shadow:0 14px 36px rgba(0,0,0,.18);}
.party-package-card.is-disabled{opacity:.55;}
.party-package-top,.party-reservation-main{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.party-package-name,.party-reservation-title{font-size:16px;font-weight:950;color:var(--text);}
.party-package-meta,.party-reservation-meta{font-size:12px;color:var(--text-muted);margin-top:3px;}
.party-package-price,.party-total-strong{font-size:24px;font-weight:950;color:#22c55e;white-space:nowrap;}
.party-package-pills{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;}
.party-package-pills span,.party-status-chip,.party-folio{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:900;background:rgba(37,99,235,.14);border:1px solid rgba(96,165,250,.25);color:#bfdbfe;}
.party-status-chip{background:rgba(34,197,94,.13);border-color:rgba(34,197,94,.35);color:#86efac;margin-bottom:7px;}
.status-cancelada .party-status-chip{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:#fca5a5;}
.status-pendiente .party-status-chip{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35);color:#fde68a;}
.party-includes-list{display:grid;gap:5px;font-size:12px;color:var(--text-muted);line-height:1.35;}
.party-actions{justify-content:flex-end;margin-top:12px;}
.party-modal textarea{resize:vertical;}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.party-total-box,.party-availability{border:1px solid var(--border);background:rgba(10,24,44,.76);border-radius:16px;padding:14px;margin:8px 0 16px;color:var(--text-muted);font-size:13px;line-height:1.55;}
.party-availability.ok{border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.1);color:#bbf7d0;}
.party-availability.bad{border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.1);color:#fecaca;}
.party-contract-print{background:#fff;color:#111;border-radius:14px;padding:28px;max-height:70vh;overflow:auto;font-family:Arial, sans-serif;line-height:1.45;}
.party-contract-print h1,.party-contract-print h2{text-align:center;margin:0 0 10px;color:#111;}
.party-contract-print table{width:100%;border-collapse:collapse;margin:14px 0;}
.party-contract-print td,.party-contract-print th{border:1px solid #999;padding:8px;color:#111;vertical-align:top;}
.party-contract-print .muted{color:#555;}
.party-contract-print .sign{display:flex;gap:60px;margin-top:60px;}
.party-contract-print .sign>div{flex:1;text-align:center;border-top:1px solid #111;padding-top:8px;}
@media(max-width:980px){.parties-hero-card{flex-direction:column;align-items:flex-start}.parties-hero-actions{justify-content:flex-start}.parties-grid{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.party-filters{grid-template-columns:1fr}.party-package-top,.party-reservation-main{flex-direction:column}.party-package-price,.party-total-strong{text-align:left}}
@media print{body *{visibility:hidden}.party-contract-print,.party-contract-print *{visibility:visible}.party-contract-print{position:absolute;left:0;top:0;width:100%;max-height:none;overflow:visible;border-radius:0;}}

/* ══════════════════════════════════════════════════════════════
   V12 — Fiestas: calendario, firmas, paquetes horizontales
   ══════════════════════════════════════════════════════════════ */
.party-calendar-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(15,35,70,.94),rgba(5,15,30,.96));
}
.party-calendar-controls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}
.party-calendar-controls input[type="month"],
.party-calendar-controls select{
  width:auto;
  min-width:160px;
}
.party-calendar-weekdays{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;
  margin-top:14px;
  color:var(--text-muted);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.party-calendar-weekdays div{ text-align:center; }
.party-calendar-days{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;
  margin-top:8px;
}
.party-calendar-day{
  min-height:116px;
  text-align:left;
  border:1px solid var(--border);
  background:rgba(10,24,44,.62);
  color:var(--text);
  border-radius:16px;
  padding:10px;
  cursor:pointer;
  transition:.18s ease;
  overflow:hidden;
}
.party-calendar-day:hover{ transform:translateY(-2px); border-color:rgba(96,165,250,.55); box-shadow:0 12px 28px rgba(0,0,0,.22); }
.party-calendar-day.muted{ opacity:.25; cursor:default; pointer-events:none; }
.party-calendar-day.today{ border-color:rgba(59,130,246,.85); box-shadow:inset 0 0 0 1px rgba(59,130,246,.35); }
.party-calendar-day.has-events{ background:linear-gradient(180deg,rgba(25,55,105,.78),rgba(10,24,44,.7)); }
.party-calendar-daynum{ font-weight:950; font-size:14px; margin-bottom:7px; }
.party-calendar-events{ display:grid; gap:5px; }
.party-cal-event{
  display:block;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border-radius:9px;
  padding:4px 6px;
  background:rgba(34,197,94,.14);
  border:1px solid rgba(34,197,94,.28);
  color:#bbf7d0;
}
.party-cal-event.status-pendiente{ background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.32); color:#fde68a; }
.party-cal-event.status-cancelada{ background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.32); color:#fecaca; }
.party-cal-more{ color:var(--text-muted); font-size:11px; font-weight:900; padding-left:4px; }
.parties-packages-card{ overflow:hidden; }
.party-packages-list{
  display:grid !important;
  grid-auto-flow:column;
  grid-auto-columns:minmax(310px, 360px);
  overflow-x:auto;
  padding-bottom:8px;
  scroll-snap-type:x proximity;
}
.party-package-card{ scroll-snap-align:start; }
.party-signature-panel{
  margin-top:16px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(10,24,44,.76);
  padding:16px;
}
#partySignatureCanvas{
  width:100%;
  height:190px;
  display:block;
  border:1px dashed rgba(148,163,184,.55);
  border-radius:16px;
  background:#fff;
  touch-action:none;
}
.party-saved-signature{
  border:1px solid #999;
  border-radius:8px;
  text-align:center;
  padding:12px;
  margin-top:18px;
  background:#fafafa;
}
.party-saved-signature img{ max-height:110px; max-width:360px; display:block; margin:0 auto 8px; }
.party-saved-signature span{ color:#555; font-size:12px; }
body.role-party-only .main-nav,
body.role-party-only .sub-tabs,
body.role-party-only #dashboardTabBtn,
body.role-party-only #waiversTabBtn,
body.role-party-only #toolsGroupTabBtn,
body.role-party-only #posGroupTabBtn,
body.role-party-only #timersTabBtn,
body.role-party-only #inboxTabBtn,
body.role-party-only #statsTabBtn,
body.role-party-only #configGroupTabBtn,
body.role-party-only #sistemaGroupTabBtn{
  display:none !important;
}
body.role-party-only #tab-parties{ display:block; }
body.role-party-only .app-container{ padding-top:22px; }
@media(max-width:900px){
  .party-calendar-controls{ justify-content:flex-start; }
  .party-calendar-weekdays,.party-calendar-days{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .party-calendar-day{ min-height:100px; }
  .party-packages-list{ grid-auto-columns:minmax(270px, 82vw); }
}
body.role-party-only .tabs,
body.role-party-only .nav-desktop,
body.role-party-only #mobileMenuBtn{
  display:none !important;
}

/* ══════════════════════════════════════════════════════════════
   V13 — Mejoras visuales y UX de fiestas
   ══════════════════════════════════════════════════════════════ */
.parties-grid{grid-template-columns:1fr;}
.parties-packages-card{margin-top:18px;}
.party-calendar-toolbar{
  background:rgba(7,17,34,.55);
  border:1px solid rgba(83,126,192,.26);
  border-radius:18px;
  padding:8px 10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.party-cal-nav{
  min-width:44px;
  font-weight:900;
}
.party-calendar-selects{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.party-calendar-selects select,
.party-calendar-toolbar select{
  min-width:140px;
  background:linear-gradient(180deg,rgba(17,34,66,.95),rgba(8,18,36,.96));
  border:1px solid rgba(108,146,210,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.18);
}
.party-calendar-day{
  position:relative;
  min-height:138px;
  border-radius:20px;
  border:1px solid rgba(71,110,170,.3);
  background:
    radial-gradient(circle at top right, rgba(56,189,248,.12), transparent 36%),
    linear-gradient(180deg, rgba(11,28,54,.94), rgba(7,18,34,.95));
  box-shadow:0 8px 24px rgba(3,10,22,.22), inset 0 1px 0 rgba(255,255,255,.03);
}
.party-calendar-day:hover{
  transform:translateY(-3px) scale(1.01);
  border-color:rgba(96,165,250,.65);
  box-shadow:0 18px 34px rgba(2,8,20,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
.party-calendar-day.has-events{
  background:
    radial-gradient(circle at top right, rgba(34,197,94,.12), transparent 36%),
    linear-gradient(180deg, rgba(18,41,76,.96), rgba(8,19,38,.97));
}
.party-calendar-day.today{
  border-color:rgba(96,165,250,.92);
  box-shadow:0 14px 30px rgba(2,8,20,.26), inset 0 0 0 1px rgba(59,130,246,.45);
}
.party-calendar-dayhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.party-calendar-daynum{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  font-size:15px;
}
.party-calendar-add{
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  border:1px dashed rgba(255,255,255,.16);
  color:#c7ddff;
  border-radius:999px;
  padding:5px 8px;
  opacity:.85;
}
.party-calendar-events{gap:7px;}
.party-cal-event{
  appearance:none;
  width:100%;
  text-align:left;
  cursor:pointer;
  font-size:11px;
  border-radius:10px;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.party-cal-event:hover{filter:brightness(1.08); transform:translateY(-1px);}
.party-packages-list{
  grid-auto-columns:minmax(290px, 340px);
  gap:14px;
  padding:4px 2px 10px;
}
.party-package-card{
  min-height:100%;
}
.party-duration-split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.party-duration-split > div{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.party-duration-split small{
  color:var(--text-muted);
  font-size:11px;
  padding-left:4px;
}
@media(max-width:900px){
  .party-calendar-toolbar{justify-content:flex-start;}
  .party-calendar-selects{width:100%;}
  .party-calendar-selects select,
  .party-calendar-toolbar select{min-width:calc(50% - 6px); flex:1 1 0;}
  .party-calendar-day{min-height:120px;}
}


/* ══════════════════════════════════════════════════════════════
   V14 — Fiestas, firma bloqueada y combos
   ══════════════════════════════════════════════════════════════ */
body.role-party-only .nav-logout{
  display:inline-flex !important;
}

.party-calendar-toolbar select,
.party-calendar-toolbar option,
.party-calendar-selects select,
.party-calendar-selects option,
#partyCalendarMonthSelect,
#partyCalendarYearSelect,
#partyCalendarBranch{
  color:#ffffff !important;
}

.party-calendar-toolbar select,
.party-calendar-selects select{
  background:linear-gradient(180deg,rgba(17,34,66,.98),rgba(8,18,36,.98)) !important;
  border-color:rgba(108,146,210,.42) !important;
}

.party-calendar-toolbar option,
.party-calendar-selects option{
  background:#0b1730 !important;
  color:#ffffff !important;
}

.combo-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.35);
  background:rgba(34,197,94,.12);
  color:#bbf7d0;
  font-size:11px;
  font-weight:900;
}

.combo-card{
  border:1px solid var(--border);
  background:rgba(15,35,70,.62);
  border-radius:16px;
  padding:14px;
  margin-bottom:10px;
}

.combo-card.is-inactive{
  opacity:.65;
  filter:grayscale(.25);
}

.combo-products-line{
  font-size:12px;
  color:var(--text-muted);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}

.combo-auto-discount-box{
  margin-top:6px;
  padding:8px 10px;
  background:rgba(34,197,94,.1);
  border-radius:8px;
  border:1px solid rgba(34,197,94,.28);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

#partySignatureAdminActions{
  display:none;
}


/* ══════════════════════════════════════════════════════════════
   V18 — Clientes alineado al ancho del sistema
   ══════════════════════════════════════════════════════════════ */
#tab-customers{
  max-width:1500px;
  width:100%;
  margin:0 auto;
  padding:24px;
}
#tab-customers > .card{
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}
#tab-customers .filters{
  max-width:620px;
}
@media(max-width:900px){
  #tab-customers{padding:14px;}
  #tab-customers > .card{max-width:100%;}
}

/* ══════════════════════════════════════════════════════════════
   V19 — Club Moy
   ══════════════════════════════════════════════════════════════ */
.club-moy-wrap{max-width:1450px;margin:0 auto;width:100%;}
.club-moy-rewards-panel{margin:14px 0 18px;padding:14px;border:1px solid rgba(96,165,250,.22);border-radius:18px;background:rgba(30,64,175,.08);}
.club-moy-rewards-title{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#93c5fd;margin-bottom:10px;}
.club-moy-rewards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;}
.club-reward-card{border:1px solid rgba(96,165,250,.26);border-radius:16px;background:rgba(15,35,70,.78);padding:12px;display:grid;gap:7px;font-size:12px;color:var(--text-muted);}
.club-reward-card strong{color:var(--text);font-size:14px;}
.club-reward-card.inactive{opacity:.55;filter:grayscale(.4);}
.club-member-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.pos-club-box{margin-bottom:12px;border:1px solid rgba(96,165,250,.28);border-radius:14px;background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(7,17,34,.6));padding:10px 12px;}
.pos-club-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px;}
.pos-club-head strong{font-size:13px;color:#bfdbfe;}
.pos-club-head span{display:block;font-size:10px;color:var(--text-muted);margin-top:1px;}
.pos-club-head button{border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.04);color:var(--text-muted);font-size:11px;font-weight:800;padding:5px 9px;cursor:pointer;}
.pos-club-search{display:grid;grid-template-columns:1fr auto auto;gap:6px;}
.pos-club-search input{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;min-width:0;}
.pos-club-search button{padding:8px 10px;border-radius:10px;border:1px solid rgba(96,165,250,.32);background:rgba(59,130,246,.12);color:#bfdbfe;font-size:12px;font-weight:900;cursor:pointer;white-space:nowrap;}
.pos-club-member{font-size:12px;color:var(--text-muted);line-height:1.45;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:8px 10px;}
.pos-club-member strong{color:#fff;}
.pos-club-reward-alert{margin-top:8px;border:1px solid rgba(96,165,250,.32);background:rgba(37,99,235,.14);color:#dbeafe;border-radius:12px;padding:8px 10px;font-size:12px;font-weight:900;}
.pos-club-rewards{display:grid;gap:6px;margin-top:8px;}
.pos-club-rewards button{border:1px solid rgba(96,165,250,.32);background:rgba(59,130,246,.10);color:#bfdbfe;border-radius:10px;padding:8px 10px;font-size:12px;font-weight:900;text-align:left;cursor:pointer;}
.pos-club-rewards button.active{background:rgba(37,99,235,.35);border-color:#60a5fa;color:#fff;}
.pos-club-rewards button.remove{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08);color:#fecaca;text-align:center;}
.club-moy-discount-box{border-color:rgba(96,165,250,.32)!important;background:rgba(37,99,235,.10)!important;}
@media(max-width:740px){.club-member-row{align-items:flex-start;flex-direction:column}.pos-club-search{grid-template-columns:1fr}.pos-club-search button{width:100%;}}

/* ══════════════════════════════════════════════════════════════
   V20 — Letreros centrados y caja en 3 columnas
   ══════════════════════════════════════════════════════════════ */
#toast.toast-center,
#toast{
  position:fixed !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  z-index:99999 !important;
  min-width:min(520px, calc(100vw - 44px)) !important;
  max-width:min(680px, calc(100vw - 44px)) !important;
  padding:20px 24px !important;
  border-radius:26px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  text-align:left !important;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%, -50%) scale(.94);
  transition:opacity .18s ease, transform .18s ease;
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.22), transparent 38%),
    linear-gradient(135deg, rgba(15,35,70,.98), rgba(7,18,38,.98)) !important;
  border:1px solid rgba(96,165,250,.44) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08) !important;
  color:#eef6ff !important;
  font-size:16px !important;
  font-weight:900 !important;
  line-height:1.35 !important;
}
#toast.toast-center.error{
  background:
    radial-gradient(circle at top left, rgba(248,113,113,.24), transparent 38%),
    linear-gradient(135deg, rgba(64,18,32,.98), rgba(18,9,22,.98)) !important;
  border-color:rgba(248,113,113,.58) !important;
  color:#fecaca !important;
}
#toast.toast-center.warning{
  background:
    radial-gradient(circle at top left, rgba(251,191,36,.24), transparent 38%),
    linear-gradient(135deg, rgba(64,42,12,.98), rgba(18,14,7,.98)) !important;
  border-color:rgba(251,191,36,.58) !important;
  color:#fde68a !important;
}
#toast .toast-icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  flex:0 0 auto;
  font-size:22px;
}
#toast .toast-message{flex:1;}

@media(max-width:1200px){
  #posCobroContent .pos-sale-3col{
    grid-template-columns:1fr 330px !important;
  }
  #posCobroContent .pos-payment-panel{
    grid-column:1 / -1;
    border-top:1px solid var(--border);
    border-left:none !important;
  }
}
@media(max-width:820px){
  #posCobroContent .pos-sale-3col{
    grid-template-columns:1fr !important;
    overflow:auto !important;
  }
  #posCobroContent .pos-products-panel,
  #posCobroContent .pos-cart-panel,
  #posCobroContent .pos-payment-panel{
    border-right:none !important;
    border-left:none !important;
    min-height:auto !important;
  }
}

/* V21 — Club Moy equivalencias */
.club-equivalence-grid{
  display:grid;
  gap:10px;
  max-height:280px;
  overflow:auto;
  padding-right:4px;
}
.club-equivalence-row{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:10px;
  align-items:center;
  border:1px solid rgba(96,165,250,.22);
  background:rgba(10,24,44,.55);
  border-radius:14px;
  padding:10px;
}
.club-equivalence-branch{
  font-size:12px;
  color:#c7ddff;
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.club-equivalence-select{
  width:100%;
  color:#fff !important;
  background:#111c31 !important;
  border-color:rgba(148,163,184,.35) !important;
}
@media(max-width:720px){
  .club-equivalence-row{grid-template-columns:1fr;}
}

/* ══════════════════════════════════════════════════════════════
   V23 — Confirmaciones premium y pagos de fiesta
   ══════════════════════════════════════════════════════════════ */
.app-confirm-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(2,6,23,.68);
  backdrop-filter:blur(12px);
  opacity:0;
  pointer-events:none;
  transition:.18s ease;
}
.app-confirm-overlay.active{
  opacity:1;
  pointer-events:auto;
}
.app-confirm-card{
  width:min(520px, 96vw);
  border:1px solid rgba(96,165,250,.28);
  border-radius:26px;
  padding:28px;
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.22), transparent 38%),
    linear-gradient(180deg, rgba(15,35,70,.98), rgba(4,13,27,.98));
  box-shadow:0 34px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(12px) scale(.98);
  transition:.18s ease;
  text-align:center;
}
.app-confirm-overlay.active .app-confirm-card{transform:translateY(0) scale(1);}
.app-confirm-card.danger{border-color:rgba(248,113,113,.42);}
.app-confirm-card.warning{border-color:rgba(251,191,36,.42);}
.app-confirm-icon{
  width:64px;
  height:64px;
  margin:0 auto 14px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.app-confirm-title{
  font-family:'Syne',system-ui,sans-serif;
  font-size:22px;
  font-weight:950;
  color:var(--text);
  margin-bottom:10px;
}
.app-confirm-message{
  color:var(--text-muted);
  font-size:14px;
  line-height:1.5;
  margin-bottom:22px;
}
.app-confirm-message p{margin:4px 0;}
.app-confirm-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
#partyPaymentExtraModal .party-total-box strong{color:var(--text);}


/* V24/V25 — Auditoría, pagos de fiesta y preparación modular */
.system-audit-row{
  width:100%;
  display:grid;
  grid-template-columns:145px 130px minmax(180px,1fr) 150px;
  gap:12px;
  align-items:start;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(10,24,44,.55);
  margin-bottom:8px;
  text-align:left;
  color:var(--text);
  cursor:pointer;
  transition:.18s ease;
}
.system-audit-row:hover{
  border-color:rgba(96,165,250,.42);
  background:rgba(15,35,70,.78);
  transform:translateY(-1px);
}
.system-audit-row .module{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#93c5fd;}
.system-audit-row .action{font-weight:900;color:var(--text);}
.system-audit-row .meta{font-size:12px;color:var(--text-muted);}
.system-audit-pagination{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px;}
.system-audit-pagination .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.system-audit-detail-box{
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  background:rgba(10,24,44,.62);
}
.system-audit-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-bottom:12px;}
.system-audit-detail-grid .field,.system-audit-detail-grid>div{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px;background:rgba(255,255,255,.035);}
.system-audit-detail-grid .label,.system-audit-detail-grid strong{display:block;font-size:10px;font-weight:950;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;}
.system-audit-detail-grid .value,.system-audit-detail-grid span{font-size:13px;font-weight:800;color:var(--text);word-break:break-word;}
.system-audit-description{margin-top:12px;color:var(--text-muted);line-height:1.45;}
.system-audit-description strong{display:block;color:var(--text);margin-bottom:4px;}
.system-audit-description p{margin:0;}
.system-audit-json{
  max-height:260px;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
  border:1px solid rgba(96,165,250,.18);
  border-radius:14px;
  padding:12px;
  background:rgba(2,6,23,.58);
  color:#dbeafe;
  font-size:12px;
}
.field-error,.input-error{border-color:#f87171!important;box-shadow:0 0 0 3px rgba(248,113,113,.16)!important;}
.has-error label{color:#fecaca!important;}
.field-error-hint{display:block;margin-top:6px;color:#fecaca;font-size:12px;font-weight:800;}
.party-reservation-discounts{border:1px solid rgba(251,191,36,.25);background:rgba(251,191,36,.07);border-radius:16px;padding:10px 12px;margin-top:10px;}
.party-reservation-discounts strong{display:block;color:#fde68a;margin-bottom:6px;}
.party-reservation-discounts ul{margin:0;padding-left:18px;color:var(--text-muted);font-size:12px;line-height:1.45;}
.party-payment-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);background:rgba(10,24,44,.62);border-radius:16px;padding:12px 14px;margin-bottom:8px;}
.party-payment-row .amount{font-size:18px;font-weight:950;color:#4ade80;text-align:right;white-space:nowrap;}
.club-moy-insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:14px 0;}
.club-moy-insight-card{border:1px solid rgba(96,165,250,.25);background:rgba(15,35,70,.55);border-radius:18px;padding:14px;}
.club-moy-insight-card strong{font-size:22px;color:#eaf2ff;display:block;}
.club-moy-insight-card span{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--text-muted);font-weight:900;}
@media(max-width:800px){.system-audit-row{grid-template-columns:1fr}.party-payment-row{align-items:flex-start;flex-direction:column}.party-payment-row .amount{text-align:left}}

/* =====================================================================
   FIESTAS — ESTILO APPLE / macOS (agregado 2026-05-24)
   Respaldo del estilo anterior incluido en:
   css/responsivas-respaldo-antes-apple-fiestas.css
   ===================================================================== */
#tab-parties{
  --party-apple-bg:rgba(15,23,42,.66);
  --party-apple-bg-soft:rgba(255,255,255,.075);
  --party-apple-bg-strong:rgba(255,255,255,.12);
  --party-apple-border:rgba(255,255,255,.18);
  --party-apple-border-soft:rgba(255,255,255,.105);
  --party-apple-shadow:0 22px 70px rgba(0,0,0,.34);
  --party-apple-blue:#0a84ff;
  --party-apple-blue-2:#64a9ff;
  --party-apple-yellow:#ffd60a;
  --party-apple-green:#30d158;
  position:relative;
}
#tab-parties::before{
  content:"";
  position:absolute;
  inset:-28px -18px auto -18px;
  height:360px;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 8%, rgba(10,132,255,.28), transparent 34%),
    radial-gradient(circle at 78% 4%, rgba(255,214,10,.18), transparent 30%),
    radial-gradient(circle at 58% 42%, rgba(99,102,241,.18), transparent 36%);
  filter:blur(8px);
  opacity:.9;
  z-index:0;
}
#tab-parties > *{position:relative;z-index:1;}
#tab-parties .card,
#tab-parties .party-calendar-card,
#tab-parties .party-package-card,
#tab-parties .party-reservation-card{
  border:1px solid var(--party-apple-border);
  background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.055));
  -webkit-backdrop-filter:blur(26px) saturate(160%);
  backdrop-filter:blur(26px) saturate(160%);
  box-shadow:var(--party-apple-shadow);
  border-radius:28px;
}
#tab-parties .parties-hero-card{
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(10,132,255,.26),rgba(255,255,255,.075) 48%,rgba(255,214,10,.13)),
    rgba(17,24,39,.54);
}
#tab-parties .parties-hero-card::after{
  content:"";
  position:absolute;
  right:-70px;
  top:-95px;
  width:260px;
  height:260px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(255,255,255,.24),transparent 64%);
  pointer-events:none;
}
#tab-parties .party-kicker{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
  color:#f8fafc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
#tab-parties .card-title,
.party-modal .card-title{
  letter-spacing:-.035em;
  font-weight:950;
}
#tab-parties .card-subtitle,
.party-modal .card-subtitle{
  color:rgba(226,232,240,.72);
}
#tab-parties .btn,
.party-modal .btn{
  border-radius:16px;
  min-height:42px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .18s ease, filter .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#tab-parties .btn:hover,
.party-modal .btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
  box-shadow:0 18px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
#tab-parties .btn-primary,
.party-modal .btn-primary{
  background:linear-gradient(180deg,#3b95ff,#006fe6);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}
#tab-parties .btn-warning,
.party-modal .btn-warning{
  background:linear-gradient(180deg,#ffd65a,#ffad05);
  color:#1f2937;
  border-color:rgba(255,214,10,.38);
}
#tab-parties .btn-secondary,
.party-modal .btn-secondary{
  background:rgba(255,255,255,.09);
  color:#f8fafc;
  border-color:rgba(255,255,255,.16);
}
#tab-parties input,
#tab-parties select,
#tab-parties textarea,
.party-modal input,
.party-modal select,
.party-modal textarea{
  background:rgba(255,255,255,.095);
  border:1px solid rgba(255,255,255,.16);
  color:#f8fafc;
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#tab-parties input:focus,
#tab-parties select:focus,
#tab-parties textarea:focus,
.party-modal input:focus,
.party-modal select:focus,
.party-modal textarea:focus{
  border-color:rgba(10,132,255,.9);
  background:rgba(255,255,255,.13);
  box-shadow:0 0 0 4px rgba(10,132,255,.18), inset 0 1px 0 rgba(255,255,255,.12);
}
#tab-parties input::placeholder,
#tab-parties textarea::placeholder,
.party-modal input::placeholder,
.party-modal textarea::placeholder{
  color:rgba(226,232,240,.44);
}
#tab-parties select option,
.party-modal select option{
  background:#111827;
  color:#f8fafc;
}
#tab-parties .party-total-box,
#tab-parties .party-availability,
.party-modal .party-total-box,
.party-modal .party-availability{
  border:1px solid var(--party-apple-border-soft);
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
#tab-parties .party-availability.ok,
.party-modal .party-availability.ok{
  background:rgba(48,209,88,.105);
  border-color:rgba(48,209,88,.32);
  color:#b9fbc9;
}
#tab-parties .party-availability.bad,
.party-modal .party-availability.bad{
  background:rgba(255,69,58,.12);
  border-color:rgba(255,69,58,.34);
  color:#ffd1ce;
}
#tab-parties .party-calendar-toolbar,
#tab-parties .filters{
  border-radius:24px;
  padding:10px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
}
#tab-parties .party-calendar-day{
  background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.045));
  border-color:rgba(255,255,255,.12);
  border-radius:22px;
  box-shadow:0 16px 34px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.08);
}
#tab-parties .party-calendar-day:hover{
  border-color:rgba(10,132,255,.52);
  transform:translateY(-2px) scale(1.005);
}
#tab-parties .party-calendar-day.today{
  border-color:rgba(10,132,255,.82);
  box-shadow:0 16px 36px rgba(10,132,255,.16), inset 0 0 0 1px rgba(10,132,255,.26);
}
#tab-parties .party-calendar-day.has-events{
  background:linear-gradient(180deg,rgba(10,132,255,.18),rgba(255,255,255,.055));
}
#tab-parties .party-cal-event{
  border-radius:14px;
  background:rgba(10,132,255,.16);
  border-color:rgba(10,132,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
#tab-parties .party-cal-event.status-pendiente{
  background:rgba(255,214,10,.14);
  border-color:rgba(255,214,10,.32);
  color:#fff3b0;
}
#tab-parties .party-cal-event.status-cancelada{
  background:rgba(255,69,58,.14);
  border-color:rgba(255,69,58,.34);
  color:#ffd1ce;
}
#tab-parties .party-package-card,
#tab-parties .party-reservation-card{
  transform:translateZ(0);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#tab-parties .party-package-card:hover,
#tab-parties .party-reservation-card:hover{
  transform:translateY(-2px);
  border-color:rgba(10,132,255,.35);
  box-shadow:0 24px 74px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.12);
}
#tab-parties .party-package-price,
#tab-parties .party-total-strong,
.party-modal .party-package-price,
.party-modal .party-total-strong{
  color:#62e985;
  letter-spacing:-.04em;
}
#tab-parties .party-package-pills span,
#tab-parties .party-status-chip,
#tab-parties .party-folio{
  background:rgba(255,255,255,.095);
  border-color:rgba(255,255,255,.14);
  color:#dbeafe;
}
#tab-parties .party-status-chip{
  background:rgba(48,209,88,.13);
  border-color:rgba(48,209,88,.30);
  color:#b9fbc9;
}
#tab-parties .status-pendiente .party-status-chip{
  background:rgba(255,214,10,.13);
  border-color:rgba(255,214,10,.32);
  color:#fff3b0;
}
#tab-parties .status-cancelada .party-status-chip{
  background:rgba(255,69,58,.13);
  border-color:rgba(255,69,58,.32);
  color:#ffd1ce;
}
.party-modal{
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(30,41,59,.92),rgba(15,23,42,.94));
  -webkit-backdrop-filter:blur(30px) saturate(160%);
  backdrop-filter:blur(30px) saturate(160%);
  box-shadow:0 32px 110px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.12);
  border-radius:30px;
}
.party-modal .modal-close{
  border-radius:999px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);
  color:#f8fafc;
}
.party-modal .party-signature-panel{
  border-radius:24px;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.12);
}
.party-modal #partySignatureCanvas{
  border-radius:22px;
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.92);
}
#partyPaymentExtraModal .party-total-box strong,
.party-modal .party-total-box strong{
  color:#f8fafc;
}
#tab-parties .party-reservation-discounts,
.party-modal .party-reservation-discounts{
  background:rgba(255,214,10,.105);
  border-color:rgba(255,214,10,.24);
  border-radius:20px;
}
#tab-parties .party-payment-row,
.party-modal .party-payment-row{
  background:rgba(255,255,255,.075);
  border-color:rgba(255,255,255,.12);
  border-radius:20px;
}
@media(max-width:800px){
  #tab-parties .card,
  #tab-parties .party-calendar-card,
  #tab-parties .party-package-card,
  #tab-parties .party-reservation-card,
  .party-modal{
    border-radius:24px;
  }
}

/* =====================================================================
   FIESTAS — APPLE LIQUID GLASS V2 (agregado 2026-05-24)
   Respaldo de la versión Apple anterior:
   css/responsivas-respaldo-apple-v1-fiestas.css
   Respaldo del estilo anterior al Apple:
   css/responsivas-respaldo-antes-apple-fiestas.css
   ===================================================================== */
#tab-parties{
  --party-lg-ink:#f5f7fb;
  --party-lg-muted:rgba(235,241,255,.66);
  --party-lg-muted-2:rgba(235,241,255,.48);
  --party-lg-blue:#007aff;
  --party-lg-blue-2:#5ac8fa;
  --party-lg-indigo:#5856d6;
  --party-lg-pink:#ff2d55;
  --party-lg-orange:#ff9f0a;
  --party-lg-yellow:#ffd60a;
  --party-lg-green:#30d158;
  --party-lg-red:#ff453a;
  --party-lg-glass:rgba(255,255,255,.108);
  --party-lg-glass-2:rgba(255,255,255,.074);
  --party-lg-glass-strong:rgba(255,255,255,.165);
  --party-lg-line:rgba(255,255,255,.185);
  --party-lg-line-soft:rgba(255,255,255,.105);
  --party-lg-shadow:0 26px 80px rgba(0,0,0,.34), 0 2px 12px rgba(0,0,0,.18);
  --party-lg-inner:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.06);
  --party-lg-radius:30px;
  --party-lg-radius-sm:20px;
  color:var(--party-lg-ink);
  isolation:isolate;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
  letter-spacing:-.012em;
}
#tab-parties::before{
  inset:-72px -48px auto -48px;
  height:520px;
  background:
    radial-gradient(circle at 10% 4%, rgba(0,122,255,.34), transparent 34%),
    radial-gradient(circle at 92% 0%, rgba(255,159,10,.22), transparent 31%),
    radial-gradient(circle at 58% 20%, rgba(88,86,214,.24), transparent 38%),
    radial-gradient(circle at 28% 72%, rgba(90,200,250,.18), transparent 34%);
  filter:blur(18px) saturate(130%);
  opacity:.96;
}
#tab-parties::after{
  content:"";
  position:absolute;
  inset:0 -22px auto -22px;
  height:100%;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 340px),
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.07),transparent 42%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.82) 42%,transparent 100%);
}
#tab-parties > *{position:relative;z-index:1;}
#tab-parties .parties-shell{
  position:relative;
  display:grid;
  gap:22px;
}
#tab-parties .card,
#tab-parties .party-calendar-card,
#tab-parties .party-package-card,
#tab-parties .party-reservation-card,
#tab-parties .party-calendar-toolbar,
#tab-parties .filters,
#tab-parties .party-total-box,
#tab-parties .party-availability,
.party-modal,
.party-modal .party-signature-panel,
.party-modal .party-total-box,
.party-modal .party-availability{
  -webkit-backdrop-filter:blur(34px) saturate(190%) contrast(104%);
  backdrop-filter:blur(34px) saturate(190%) contrast(104%);
}
#tab-parties .card,
#tab-parties .party-calendar-card,
#tab-parties .party-package-card,
#tab-parties .party-reservation-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--party-lg-line);
  background:
    linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.075) 43%,rgba(255,255,255,.052)),
    linear-gradient(180deg,rgba(8,13,28,.30),rgba(7,11,24,.18));
  border-radius:var(--party-lg-radius);
  box-shadow:var(--party-lg-shadow),var(--party-lg-inner);
}
#tab-parties .card::before,
#tab-parties .party-calendar-card::before,
#tab-parties .party-package-card::before,
#tab-parties .party-reservation-card::before,
.party-modal::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(130deg,rgba(255,255,255,.22),transparent 22%,transparent 72%,rgba(255,255,255,.075)),
    radial-gradient(circle at 18% 0%,rgba(255,255,255,.18),transparent 32%);
  opacity:.62;
  z-index:0;
}
#tab-parties .card > *,
#tab-parties .party-calendar-card > *,
#tab-parties .party-package-card > *,
#tab-parties .party-reservation-card > *,
.party-modal > *{
  position:relative;
  z-index:1;
}
#tab-parties .parties-hero-card{
  min-height:150px;
  padding:26px;
  align-items:center;
  background:
    radial-gradient(circle at 9% 8%,rgba(90,200,250,.42),transparent 32%),
    radial-gradient(circle at 90% 5%,rgba(255,214,10,.26),transparent 30%),
    linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06) 56%,rgba(0,122,255,.14)),
    rgba(18,28,48,.46);
}
#tab-parties .parties-hero-card::after{
  right:-92px;
  top:-118px;
  width:330px;
  height:330px;
  background:
    radial-gradient(circle at 42% 44%,rgba(255,255,255,.42),rgba(255,255,255,.12) 36%,transparent 66%);
  filter:blur(.2px);
}
#tab-parties .party-kicker{
  padding:8px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);
  color:rgba(255,255,255,.92);
  letter-spacing:.13em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 8px 24px rgba(0,0,0,.16);
}
#tab-parties .card-title,
.party-modal .card-title{
  color:#fff;
  font-weight:860;
  letter-spacing:-.045em;
  text-wrap:balance;
}
#tab-parties .parties-hero-card .card-title{
  font-size:clamp(28px,4vw,44px);
  line-height:1.02;
}
#tab-parties .card-subtitle,
.party-modal .card-subtitle,
#tab-parties .party-package-meta,
#tab-parties .party-reservation-meta,
#tab-parties .party-includes-list{
  color:var(--party-lg-muted);
}
#tab-parties .parties-hero-card .card-subtitle{
  max-width:720px;
  font-size:15px;
  line-height:1.55;
}
#tab-parties .btn,
.party-modal .btn{
  border-radius:999px;
  min-height:44px;
  padding-inline:18px;
  font-weight:780;
  letter-spacing:-.02em;
  border:1px solid rgba(255,255,255,.20);
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.075));
  color:#fff;
  box-shadow:0 12px 32px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(255,255,255,.08);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), filter .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#tab-parties .btn-sm,
.party-modal .btn-sm{min-height:36px;padding-inline:14px;}
#tab-parties .btn:hover,
.party-modal .btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.08) saturate(1.05);
  border-color:rgba(255,255,255,.28);
  box-shadow:0 18px 46px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(255,255,255,.12);
}
#tab-parties .btn:active,
.party-modal .btn:active{transform:translateY(0) scale(.985);}
#tab-parties .btn-primary,
.party-modal .btn-primary{
  background:linear-gradient(180deg,#4fb2ff 0%,#007aff 52%,#0065d9 100%);
  border-color:rgba(147,197,253,.42);
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.18);
  box-shadow:0 16px 38px rgba(0,122,255,.34), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.14);
}
#tab-parties .btn-warning,
.party-modal .btn-warning{
  background:linear-gradient(180deg,#ffe87a 0%,#ffb21a 56%,#ff9500 100%);
  border-color:rgba(255,214,10,.44);
  color:#16120a;
  box-shadow:0 16px 42px rgba(255,159,10,.26), inset 0 1px 0 rgba(255,255,255,.48), inset 0 -1px 0 rgba(0,0,0,.12);
}
#tab-parties .btn-secondary,
.party-modal .btn-secondary{
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
  color:rgba(255,255,255,.92);
}
#tab-parties input,
#tab-parties select,
#tab-parties textarea,
.party-modal input,
.party-modal select,
.party-modal textarea{
  min-height:44px;
  border-radius:18px;
  color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.135),rgba(255,255,255,.075));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.045), 0 10px 24px rgba(0,0,0,.12);
}
#tab-parties textarea,
.party-modal textarea{border-radius:22px;line-height:1.5;}
#tab-parties input:focus,
#tab-parties select:focus,
#tab-parties textarea:focus,
.party-modal input:focus,
.party-modal select:focus,
.party-modal textarea:focus{
  border-color:rgba(90,200,250,.82);
  background:linear-gradient(180deg,rgba(255,255,255,.19),rgba(255,255,255,.10));
  box-shadow:0 0 0 4px rgba(0,122,255,.20), 0 16px 36px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.22);
}
#tab-parties input::placeholder,
#tab-parties textarea::placeholder,
.party-modal input::placeholder,
.party-modal textarea::placeholder{color:rgba(255,255,255,.42);}
#tab-parties label,
.party-modal label{color:rgba(255,255,255,.76);font-weight:760;letter-spacing:.01em;}
#tab-parties select option,
.party-modal select option{background:#111827;color:#fff;}
#tab-parties .party-calendar-toolbar,
#tab-parties .filters{
  border-radius:24px;
  padding:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.055));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 12px 28px rgba(0,0,0,.14);
}
#tab-parties .party-calendar-weekdays div{
  color:rgba(255,255,255,.56);
  font-weight:860;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#tab-parties .party-calendar-day{
  min-height:118px;
  border-radius:24px;
  background:
    linear-gradient(150deg,rgba(255,255,255,.155),rgba(255,255,255,.062) 52%,rgba(255,255,255,.04)),
    rgba(7,12,26,.26);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 16px 38px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.045);
}
#tab-parties .party-calendar-day:hover{
  transform:translateY(-3px);
  border-color:rgba(90,200,250,.50);
  box-shadow:0 26px 62px rgba(0,0,0,.30), 0 0 0 1px rgba(90,200,250,.10), inset 0 1px 0 rgba(255,255,255,.24);
}
#tab-parties .party-calendar-day.today{
  border-color:rgba(0,122,255,.86);
  background:
    linear-gradient(150deg,rgba(0,122,255,.24),rgba(255,255,255,.075) 54%,rgba(255,255,255,.045)),
    rgba(8,18,39,.28);
  box-shadow:0 18px 46px rgba(0,122,255,.18), inset 0 0 0 1px rgba(90,200,250,.24), inset 0 1px 0 rgba(255,255,255,.20);
}
#tab-parties .party-calendar-day.has-events{
  background:
    radial-gradient(circle at 85% 10%,rgba(255,214,10,.16),transparent 28%),
    linear-gradient(150deg,rgba(0,122,255,.22),rgba(255,255,255,.075) 56%,rgba(255,255,255,.052));
}
#tab-parties .party-calendar-daynum{
  font-size:15px;
  font-weight:880;
  color:#fff;
}
#tab-parties .party-cal-event{
  border-radius:999px;
  min-height:24px;
  padding:5px 9px;
  color:#eaf4ff;
  background:linear-gradient(180deg,rgba(0,122,255,.26),rgba(0,122,255,.13));
  border-color:rgba(90,200,250,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
#tab-parties .party-cal-event.status-pendiente{
  color:#fff5bf;
  background:linear-gradient(180deg,rgba(255,214,10,.20),rgba(255,159,10,.10));
  border-color:rgba(255,214,10,.30);
}
#tab-parties .party-cal-event.status-cancelada{
  color:#ffd5d3;
  background:linear-gradient(180deg,rgba(255,69,58,.20),rgba(255,45,85,.10));
  border-color:rgba(255,69,58,.32);
}
#tab-parties .party-package-card,
#tab-parties .party-reservation-card{
  padding:18px;
  background:
    radial-gradient(circle at 96% 0%,rgba(255,255,255,.11),transparent 36%),
    linear-gradient(150deg,rgba(255,255,255,.145),rgba(255,255,255,.060) 54%,rgba(255,255,255,.046));
}
#tab-parties .party-package-card:hover,
#tab-parties .party-reservation-card:hover{
  transform:translateY(-3px);
  border-color:rgba(90,200,250,.42);
  box-shadow:0 30px 82px rgba(0,0,0,.36), 0 0 0 1px rgba(90,200,250,.08), inset 0 1px 0 rgba(255,255,255,.22);
}
#tab-parties .party-package-name,
#tab-parties .party-reservation-title{
  color:#fff;
  font-weight:860;
  letter-spacing:-.03em;
}
#tab-parties .party-package-price,
#tab-parties .party-total-strong,
.party-modal .party-package-price,
.party-modal .party-total-strong{
  color:#7dff9d;
  font-weight:900;
  text-shadow:0 0 24px rgba(48,209,88,.22);
}
#tab-parties .party-package-pills span,
#tab-parties .party-status-chip,
#tab-parties .party-folio{
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.065));
  border-color:rgba(255,255,255,.16);
  color:rgba(239,246,255,.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17);
}
#tab-parties .party-status-chip{
  background:linear-gradient(180deg,rgba(48,209,88,.20),rgba(48,209,88,.085));
  border-color:rgba(48,209,88,.31);
  color:#c9ffd7;
}
#tab-parties .status-pendiente .party-status-chip{
  background:linear-gradient(180deg,rgba(255,214,10,.20),rgba(255,159,10,.085));
  border-color:rgba(255,214,10,.33);
  color:#fff5bf;
}
#tab-parties .status-cancelada .party-status-chip{
  background:linear-gradient(180deg,rgba(255,69,58,.20),rgba(255,45,85,.085));
  border-color:rgba(255,69,58,.33);
  color:#ffd5d3;
}
#tab-parties .party-total-box,
#tab-parties .party-availability,
.party-modal .party-total-box,
.party-modal .party-availability{
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
  border-color:rgba(255,255,255,.13);
  color:var(--party-lg-muted);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 12px 28px rgba(0,0,0,.12);
}
#tab-parties .party-availability.ok,
.party-modal .party-availability.ok{
  background:linear-gradient(180deg,rgba(48,209,88,.17),rgba(48,209,88,.075));
  border-color:rgba(48,209,88,.35);
  color:#c9ffd7;
}
#tab-parties .party-availability.bad,
.party-modal .party-availability.bad{
  background:linear-gradient(180deg,rgba(255,69,58,.18),rgba(255,45,85,.075));
  border-color:rgba(255,69,58,.34);
  color:#ffd5d3;
}
#tab-parties .party-reservation-discounts,
.party-modal .party-reservation-discounts{
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,214,10,.15),rgba(255,159,10,.065));
  border-color:rgba(255,214,10,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
#tab-parties .party-payment-row,
.party-modal .party-payment-row{
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.052));
  border-color:rgba(255,255,255,.13);
}
.party-modal{
  position:relative;
  overflow:hidden;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.20);
  background:
    radial-gradient(circle at 12% 0%,rgba(90,200,250,.22),transparent 34%),
    radial-gradient(circle at 95% 5%,rgba(255,159,10,.13),transparent 30%),
    linear-gradient(150deg,rgba(30,41,59,.82),rgba(15,23,42,.76) 52%,rgba(10,14,28,.82));
  box-shadow:0 44px 140px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(255,255,255,.06);
}
.party-modal .modal-close{
  width:38px;
  height:38px;
  border-radius:999px;
  color:rgba(255,255,255,.88);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 8px 20px rgba(0,0,0,.18);
}
.party-modal .party-signature-panel{
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.055));
  border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.party-modal #partySignatureCanvas{
  border-radius:24px;
  border:1px solid rgba(255,255,255,.26);
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,248,255,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 18px 38px rgba(0,0,0,.18);
}
#partyPaymentExtraModal .party-total-box strong,
.party-modal .party-total-box strong{color:#fff;}
#tab-parties .form-error,
.party-modal .form-error,
#tab-parties .error-msg,
.party-modal .error-msg{
  border-radius:16px;
}
#tab-parties .is-invalid,
.party-modal .is-invalid{
  border-color:rgba(255,69,58,.85) !important;
  box-shadow:0 0 0 4px rgba(255,69,58,.18), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
@media(max-width:980px){
  #tab-parties .parties-hero-card{padding:22px;}
  #tab-parties .parties-hero-actions{width:100%;}
  #tab-parties .parties-hero-actions .btn{flex:1 1 220px;}
}
@media(max-width:800px){
  #tab-parties .card,
  #tab-parties .party-calendar-card,
  #tab-parties .party-package-card,
  #tab-parties .party-reservation-card,
  .party-modal{border-radius:26px;}
  #tab-parties .party-calendar-day{min-height:104px;}
}
@media(prefers-reduced-motion:reduce){
  #tab-parties .btn,
  .party-modal .btn,
  #tab-parties .party-calendar-day,
  #tab-parties .party-package-card,
  #tab-parties .party-reservation-card{transition:none;}
  #tab-parties .btn:hover,
  .party-modal .btn:hover,
  #tab-parties .party-calendar-day:hover,
  #tab-parties .party-package-card:hover,
  #tab-parties .party-reservation-card:hover{transform:none;}
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  #tab-parties .card,
  #tab-parties .party-calendar-card,
  #tab-parties .party-package-card,
  #tab-parties .party-reservation-card,
  .party-modal{background:#101827;}
}


/* ============================================================================
   NOTA DE USO
   Este archivo es una versión COMPLETA de responsivas.css.
   Para probarlo: renómbralo a responsivas.css y súbelo a /css/responsivas.css.
   Los cambios visuales están acotados principalmente a #tab-parties y .party-modal.
   No modifica lógica, endpoints, POS, kiosco ni tickets por JS/PHP.
   ============================================================================ */


/* ============================================================================
   ESTILO DE PRUEBA PARA FIESTAS — 01 NEO ARCADE PREMIUM
   Pegado al final para sobrescribir únicamente visuales de Fiestas.
   ============================================================================ */
#tab-parties{
  --party-bg:#050a18;
  --party-surface:rgba(9,18,38,.88);
  --party-surface-2:rgba(13,27,56,.92);
  --party-border:rgba(64,156,255,.34);
  --party-blue:#2f80ff;
  --party-cyan:#34d5ff;
  --party-purple:#8b5cf6;
  --party-pink:#ff4fd8;
  --party-yellow:#ffd166;
  --party-green:#30d158;
  position:relative;
  isolation:isolate;
}
#tab-parties:before{
  content:"";
  position:absolute;
  inset:-80px -30px auto -30px;
  height:420px;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 16% 8%,rgba(47,128,255,.34),transparent 34%),
    radial-gradient(circle at 88% 18%,rgba(255,79,216,.20),transparent 32%),
    radial-gradient(circle at 52% 0%,rgba(52,213,255,.12),transparent 38%);
  filter:blur(2px);
}
#tab-parties .parties-shell{gap:22px;}
#tab-parties .card,
#tab-parties .party-calendar-card,
#tab-parties .party-package-card,
#tab-parties .party-reservation-card{
  border:1px solid var(--party-border) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025)),
    radial-gradient(circle at top right,rgba(52,213,255,.10),transparent 38%),
    var(--party-surface) !important;
  border-radius:24px !important;
  box-shadow:0 20px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter:blur(16px) saturate(1.18);
  -webkit-backdrop-filter:blur(16px) saturate(1.18);
}
#tab-parties .parties-hero-card{
  min-height:150px;
  border-radius:32px !important;
  border:1px solid rgba(52,213,255,.42) !important;
  background:
    linear-gradient(135deg,rgba(47,128,255,.30),rgba(139,92,246,.16) 46%,rgba(255,79,216,.10)),
    radial-gradient(circle at 78% 20%,rgba(255,209,102,.22),transparent 28%),
    linear-gradient(180deg,rgba(8,18,39,.94),rgba(4,8,19,.96)) !important;
  box-shadow:0 28px 90px rgba(47,128,255,.18), 0 18px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
#tab-parties .parties-hero-card:before{background:radial-gradient(circle,rgba(52,213,255,.42),transparent 64%) !important;}
#tab-parties .parties-hero-card:after{background:radial-gradient(circle,rgba(255,79,216,.25),transparent 70%) !important;}
#tab-parties .party-kicker{
  border-color:rgba(255,209,102,.50) !important;
  background:linear-gradient(90deg,rgba(255,209,102,.20),rgba(255,79,216,.12)) !important;
  color:#fff4c2 !important;
  box-shadow:0 0 22px rgba(255,209,102,.16);
}
#tab-parties .card-title,
.party-modal .card-title{
  color:#f8fbff !important;
  letter-spacing:-.025em;
  text-shadow:0 0 22px rgba(52,213,255,.12);
}
#tab-parties .card-subtitle,
#tab-parties label,
#tab-parties .party-package-meta,
#tab-parties .party-reservation-meta,
.party-modal .card-subtitle,
.party-modal label{color:#a9c7ee !important;}
#tab-parties .btn,
.party-modal .btn{
  border-radius:999px !important;
  min-height:42px;
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:0 14px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16) !important;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
#tab-parties .btn:hover,
.party-modal .btn:hover{transform:translateY(-2px);filter:brightness(1.08);}
#tab-parties .btn-primary,
.party-modal .btn-primary{
  background:linear-gradient(135deg,var(--party-blue),var(--party-purple)) !important;
  color:#fff !important;
  border-color:rgba(52,213,255,.32) !important;
  box-shadow:0 16px 38px rgba(47,128,255,.30), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
#tab-parties .btn-warning,
.party-modal .btn-warning{
  background:linear-gradient(135deg,#ffd166,#ff9f0a) !important;
  color:#15110a !important;
  border-color:rgba(255,209,102,.45) !important;
  box-shadow:0 16px 38px rgba(255,159,10,.24), inset 0 1px 0 rgba(255,255,255,.36) !important;
}
#tab-parties .btn-secondary,
.party-modal .btn-secondary{
  background:linear-gradient(180deg,rgba(23,43,82,.96),rgba(10,22,46,.96)) !important;
  color:#dbeafe !important;
  border-color:rgba(98,163,255,.24) !important;
}
#tab-parties input,
#tab-parties select,
#tab-parties textarea,
.party-modal input,
.party-modal select,
.party-modal textarea{
  border-radius:18px !important;
  background:linear-gradient(180deg,rgba(5,12,28,.92),rgba(9,20,42,.92)) !important;
  border:1px solid rgba(52,213,255,.22) !important;
  color:#f8fbff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.20) !important;
}
#tab-parties input:focus,
#tab-parties select:focus,
#tab-parties textarea:focus,
.party-modal input:focus,
.party-modal select:focus,
.party-modal textarea:focus{
  border-color:rgba(52,213,255,.75) !important;
  box-shadow:0 0 0 4px rgba(52,213,255,.15), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#tab-parties .party-calendar-toolbar{
  border-radius:22px !important;
  background:linear-gradient(90deg,rgba(9,22,48,.82),rgba(18,32,66,.70)) !important;
  border-color:rgba(52,213,255,.28) !important;
}
#tab-parties .party-calendar-day{
  border-radius:22px !important;
  min-height:138px;
  background:
    linear-gradient(180deg,rgba(15,34,69,.92),rgba(6,14,31,.94)),
    radial-gradient(circle at 84% 12%,rgba(52,213,255,.14),transparent 34%) !important;
  border-color:rgba(64,156,255,.28) !important;
}
#tab-parties .party-calendar-day:hover{
  transform:translateY(-4px) scale(1.012);
  border-color:rgba(52,213,255,.65) !important;
  box-shadow:0 22px 48px rgba(2,8,20,.40),0 0 30px rgba(52,213,255,.10) !important;
}
#tab-parties .party-calendar-day.today{border-color:rgba(255,209,102,.88) !important;box-shadow:0 0 0 1px rgba(255,209,102,.28),0 18px 42px rgba(0,0,0,.35) !important;}
#tab-parties .party-calendar-daynum{background:linear-gradient(135deg,rgba(52,213,255,.20),rgba(139,92,246,.18)) !important;color:#fff !important;}
#tab-parties .party-cal-event{
  border-radius:12px !important;
  background:linear-gradient(90deg,rgba(48,209,88,.20),rgba(52,213,255,.10)) !important;
  border-color:rgba(48,209,88,.34) !important;
  color:#d8ffe2 !important;
}
#tab-parties .party-cal-event.status-pendiente{background:linear-gradient(90deg,rgba(255,209,102,.22),rgba(255,159,10,.12)) !important;border-color:rgba(255,209,102,.38) !important;color:#fff2bd !important;}
#tab-parties .party-cal-event.status-cancelada{background:linear-gradient(90deg,rgba(255,69,58,.22),rgba(255,79,216,.09)) !important;border-color:rgba(255,69,58,.38) !important;color:#ffd4d1 !important;}
#tab-parties .party-package-card:hover,
#tab-parties .party-reservation-card:hover{transform:translateY(-3px);border-color:rgba(52,213,255,.48) !important;}
#tab-parties .party-package-price,
#tab-parties .party-total-strong{color:#5dff9b !important;text-shadow:0 0 18px rgba(48,209,88,.18);}
#tab-parties .party-package-pills span,
#tab-parties .party-status-chip,
#tab-parties .party-folio{background:rgba(47,128,255,.16) !important;border-color:rgba(52,213,255,.30) !important;color:#cfe8ff !important;}
#tab-parties .party-total-box,
#tab-parties .party-availability,
.party-modal .party-total-box,
.party-modal .party-availability{
  border-radius:22px !important;
  border:1px solid rgba(52,213,255,.22) !important;
  background:linear-gradient(180deg,rgba(7,17,35,.86),rgba(10,22,46,.86)) !important;
  color:#b8d2f3 !important;
}
.party-modal{
  border-radius:32px !important;
  border:1px solid rgba(52,213,255,.30) !important;
  background:
    radial-gradient(circle at 15% 0%,rgba(52,213,255,.18),transparent 34%),
    radial-gradient(circle at 88% 5%,rgba(255,79,216,.13),transparent 30%),
    linear-gradient(160deg,rgba(10,22,46,.94),rgba(5,10,23,.96)) !important;
}

/* =====================================================================
   FIX 2026-05-24 — Notificaciones estilo iPhone + modales sin botones pegados
   Mantiene el estilo elegido para Fiestas y solo corrige UX visual.
   ===================================================================== */

/* Notificaciones tipo iPhone / iOS moderno: compactas, superiores, con blur */
#toast.toast-ios{
  position:fixed !important;
  left:50% !important;
  top:max(18px, env(safe-area-inset-top)) !important;
  right:auto !important;
  bottom:auto !important;
  z-index:999999 !important;
  width:auto !important;
  min-width:min(360px, calc(100vw - 28px)) !important;
  max-width:min(560px, calc(100vw - 28px)) !important;
  padding:10px 14px 10px 10px !important;
  border-radius:999px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  text-align:left !important;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%, -16px) scale(.98);
  transition:
    opacity .24s cubic-bezier(.2,.8,.2,1),
    transform .24s cubic-bezier(.2,.8,.2,1),
    filter .24s ease !important;
  background:
    linear-gradient(180deg,rgba(34,39,52,.82),rgba(12,16,28,.78)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.20) !important;
  color:#ffffff !important;
  -webkit-backdrop-filter:blur(22px) saturate(180%) !important;
  backdrop-filter:blur(22px) saturate(180%) !important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",system-ui,sans-serif !important;
}

#toast.toast-ios .toast-icon{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:18px !important;
  font-weight:900 !important;
  line-height:1 !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 8px 18px rgba(0,0,0,.22) !important;
}

#toast.toast-ios .toast-message{
  flex:1 !important;
  min-width:0 !important;
  color:#f8fafc !important;
  font-size:14px !important;
  font-weight:750 !important;
  line-height:1.25 !important;
  letter-spacing:-.015em !important;
  white-space:normal !important;
}

#toast.toast-ios.success .toast-icon{
  background:linear-gradient(180deg,#35e979,#16a34a) !important;
}
#toast.toast-ios.error .toast-icon{
  background:linear-gradient(180deg,#ff6b6b,#ef233c) !important;
}
#toast.toast-ios.warning .toast-icon{
  color:#231600 !important;
  background:linear-gradient(180deg,#ffd76a,#ff9f0a) !important;
}
#toast.toast-ios.info .toast-icon{
  background:linear-gradient(180deg,#5ac8fa,#007aff) !important;
}

#toast.toast-ios.error{
  background:linear-gradient(180deg,rgba(78,26,36,.86),rgba(25,10,18,.82)) !important;
  border-color:rgba(255,107,107,.25) !important;
}
#toast.toast-ios.warning{
  background:linear-gradient(180deg,rgba(72,48,14,.86),rgba(26,18,8,.82)) !important;
  border-color:rgba(255,214,106,.25) !important;
}
#toast.toast-ios.info{
  background:linear-gradient(180deg,rgba(24,46,82,.86),rgba(10,18,34,.82)) !important;
  border-color:rgba(90,200,250,.25) !important;
}

/* Las ventanitas se cierran solo con X/botón, no por tocar fondo. */
.modal-overlay.open{
  overscroll-behavior:contain;
}
.modal-overlay.open > .modal{
  pointer-events:auto;
}

/* Más aire al final de modales para que los botones no queden pegados abajo. */
.modal.party-modal{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:30px 30px 38px !important;
  scroll-padding-bottom:42px;
}

.party-modal .modal-close{
  top:18px !important;
  right:18px !important;
  z-index:15 !important;
}

.party-modal > .card-title:first-of-type{
  padding-right:58px !important;
  line-height:1.15 !important;
}

.party-modal-actions,
#partyContractModal .party-modal > div[style*="justify-content:flex-end"],
#partyPaymentExtraModal .party-modal > div[style*="justify-content:flex-end"],
#partyQuickUpdateModal .party-modal > div[style*="justify-content:flex-end"],
#partyCalendarInfoModal .party-modal > .actions,
#partyPackageModal .party-modal > div[style*="justify-content:flex-end"],
#partyPaymentHistoryModal .party-modal > div[style*="justify-content:flex-end"]{
  margin-top:22px !important;
  margin-bottom:8px !important;
  padding:16px 0 4px !important;
  border-top:1px solid rgba(52,213,255,.14) !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}

#partyContractModal .party-modal{
  padding-bottom:42px !important;
}
#partyContractModal .party-signature-panel{
  margin-bottom:16px !important;
}

/* Iconos nativos de fecha/hora en blanco dentro de Fiestas. */
#tab-parties input[type="date"]::-webkit-calendar-picker-indicator,
#tab-parties input[type="time"]::-webkit-calendar-picker-indicator,
.party-modal input[type="date"]::-webkit-calendar-picker-indicator,
.party-modal input[type="time"]::-webkit-calendar-picker-indicator{
  filter:invert(1) brightness(2.6) contrast(1.15) drop-shadow(0 0 4px rgba(255,255,255,.24)) !important;
  opacity:1 !important;
  cursor:pointer;
}

/* Selects de hora: se ven como bloques limpios de media hora. */
#partyReservationStart,
#partyReservationEnd{
  font-variant-numeric:tabular-nums;
  font-weight:800;
}

/* En móvil los botones conservan aire y no quedan aplastados en el borde. */
@media(max-width:760px){
  .modal.party-modal{
    padding:26px 18px calc(34px + env(safe-area-inset-bottom,0px)) !important;
  }
  .party-modal-actions,
  #partyContractModal .party-modal > div[style*="justify-content:flex-end"],
  #partyPaymentExtraModal .party-modal > div[style*="justify-content:flex-end"],
  #partyQuickUpdateModal .party-modal > div[style*="justify-content:flex-end"],
  #partyCalendarInfoModal .party-modal > .actions,
  #partyPackageModal .party-modal > div[style*="justify-content:flex-end"],
  #partyPaymentHistoryModal .party-modal > div[style*="justify-content:flex-end"]{
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)) !important;
  }
  #toast.toast-ios{
    top:max(12px, env(safe-area-inset-top)) !important;
    min-width:calc(100vw - 22px) !important;
    max-width:calc(100vw - 22px) !important;
    border-radius:24px !important;
  }
}