/* app.css — corregido + responsive (Topbar + Sidebar Drawer + Modal) */
/* Variables base se inyectan desde PHP (theme_css_vars) */
:root { font-family:'Rajdhani',sans-serif;}

[data-theme="dark"]{
  --bg: #0A0F1C;
  --surface: #161B26;
  --text: #E7ECF5;
  --muted: #9AA6BC;
  --border: rgba(226, 232, 240, .10);
  --shadow: 0 14px 36px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }

html, body{
  
  margin: 0;
  background: var(--bg);
  color: var(--text);
  
}
:root{
  --sidebar-sticky-top: 8px;
}
/* Evita desbordes por textos largos */
.brand-meta, .user-meta { min-width: 0; }
.brand-name, .brand-sub, .user-name, .user-role{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



/* =========================
   Topbar var(--bg);
========================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family:'Rajdhani',sans-serif;
  padding: 5px 20px;
  overflow: visible;
  background: var(--surface);
}
/*BLOQUE CROMATICO .CSS INTERACTIVO V1 JORGE ELIMINAR O NO SUBIR A PRODUCCION */
.brand-panel{
  overflow: auto;
  scrollbar-width: thin;
}
.brand-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.brand-section-head h4{
  margin:0;
}

.brand-check-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  user-select:none;
  cursor:pointer;
}

.brand-check-inline input{
  margin:0;
  accent-color: var(--primary);
}

.brand-check-inline code{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--text);
}

.brand-highlight-target-surface{
  outline: 2px dashed #8b5cf6 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(139,92,246,.14) !important;
}
.brand-panel::-webkit-scrollbar{
  width: 8px;
}

.brand-panel::-webkit-scrollbar-track{
  background: transparent;
}


/* 🔥 eliminar flechas real */
.brand-panel::-webkit-scrollbar-button,
.brand-panel::-webkit-scrollbar-button:single-button,
.brand-panel::-webkit-scrollbar-button:start:decrement,
.brand-panel::-webkit-scrollbar-button:end:increment{
  display: none;
  width: 0;
  height: 0;
}
.brand-panel-toggle{
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}

.brand-panel-toggle{
  position: relative;
  overflow: hidden;
}

.brand-panel-toggle::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: linear-gradient(270deg,
    red, orange, yellow, lime, cyan, blue, violet, red
  );
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
}

.brand-panel-toggle:hover::before{
  opacity: 1;
  animation: rb 4s linear infinite;
}

@keyframes rb{
  to{ background-position: 100% 50%; }
}
.brand-panel{
  position: fixed;
  top: 88px;
  right: 18px;
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 110px);
  overflow: auto;
  z-index: 9999;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 96%, white);
  box-shadow: 0 24px 60px rgba(2, 6, 23, .18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}


.brand-panel__handle{
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: inherit;
  cursor: grab;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.brand-panel__handle:active{
  cursor: grabbing;
}


.brand-panel__actions{
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-panel__body{
  padding: 14px 16px 18px;
}

.brand-panel__section + .brand-panel__section{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed color-mix(in srgb, var(--border) 85%, transparent);
}


.brand-panel__hint{
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.brand-panel__columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
}
.brand-color-row{
  display: grid;
  align-items: center;
  margin-bottom: 10px;
      justify-items: center;
          gap: 5px;

}
.brand-panel__title{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--text);
}

.brand-panel__iconbtn{
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.brand-panel__section h4{
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--text);
}
.brand-radio{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 13px;
}
.brand-color-row label{
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.brand-color-row input[type="color"]{
  width: 58px;
  height: 58px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--border),
    0 8px 18px rgba(2,6,23,.10);
}
.brand-color-row input[type="color"]::-webkit-color-swatch-wrapper{
  padding: 0;
}

.brand-color-row input[type="color"]::-webkit-color-swatch{
  border: none;
  border-radius: 50%;
}

.brand-color-row input[type="color"]::-moz-color-swatch{
  border: none;
  border-radius: 50%;
}
.brand-color-row input[type="text"]{
  width: 100%;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  padding: 0 12px;
  font-size: 13px;
  outline: none;
      text-align: center;
}

.brand-swatches{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.brand-swatch{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.brand-swatch span{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: block;
  margin: 0 auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 8px 18px rgba(2,6,23,.10);
}

.brand-swatch small{
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.brand-panel [disabled]{
  opacity: .45;
  pointer-events: none;
}
.brand-swatch-btn{
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.brand-swatch-btn span{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.brand-swatch-btn.is-active span{
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent),
    0 10px 22px rgba(2,6,23,.16);
  transform: scale(1.05);
}

.brand-swatch-btn small{
  transition: color .2s ease, transform .2s ease;
}

.brand-swatch-btn.is-active small{
  color: var(--text);
  transform: translateY(1px);
}

.brand-highlight-target{
  position: relative !important;
  outline: 2px dashed #f59e0b !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(245,158,11,.14) !important;
  transition: outline-color .2s ease, box-shadow .2s ease;
}

.brand-highlight-target-primary{
  outline-color: #3b82f6 !important;
  box-shadow: 0 0 0 4px rgba(59,130,246,.14) !important;
}

.brand-highlight-target-secondary{
  outline-color: #10b981 !important;
  box-shadow: 0 0 0 4px rgba(16,185,129,.14) !important;
}

.brand-highlight-target-accent{
  outline-color: #f59e0b !important;
  box-shadow: 0 0 0 4px rgba(245,158,11,.16) !important;
}
@media (max-width: 640px){
  .brand-panel{
    width: min(360px, calc(100vw - 16px));
    top: 72px;
    right: 8px;
  }
}
/*BLOQUE CROMATICO .CSS INTERACTIVO V1 JORGE ELIMINAR O NO SUBIR A PRODUCCION */

@media (max-width: 980px){
  body.sb-open{
    overflow: hidden !important;
  }

  .topbar{
    position: sticky;
    top: 0;
    z-index: 60;
  }
}
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.brand-logo{
width: 3.5em;
    height: 3.5em;
  border-radius: 12px;
  object-fit: contain;
}


.brand-meta{ line-height: 1.1; }
.brand-name{ color: var(--primary);font-weight: 900; 
  letter-spacing: .2px;text-transform: capitalize;  font-size: 1.5rem;

}

.brand-sub{ font-size: 12px; color: var(--muted); }

.topbar-right{
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-outline i {
  font-size: 20px;        /* tamaño fijo */
  transition: transform 0.3s ease, color 0.3s ease;
}

.btn-outline:hover i {
  transform: scale(1.15); /* efecto zoom */
  color: #ff7a7a;
}
.btn{
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  padding: 8px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
}

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

.btn-primary{
background:color-mix(in srgb, var(--primary) 40%, transparent);      
  color: black;
  border-color: transparent;
}


.user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #11111100;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  overflow: hidden;
}

.user-avatar img.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-meta{ line-height: 1.1; }
.user-name{ font-weight: 800; font-size: 13px;text-transform: capitalize; }
.user-role{ font-size: 12px; color: var(--muted); }

/* =========================
   Modal
========================= */
.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 100;
}

.modal-backdrop.is-open{ display: flex; }

.modal{
  width: min(560px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.modal-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.modal-title{ margin: 0; font-size: 18px; }
.modal-sub{ margin: 6px 0 0; color: var(--muted); font-size: 13px; }

.icon-btn{
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 12px;
  cursor: pointer;
}

.modal-body{ padding: 16px; display: grid; gap: 14px; }

.field{ display: grid; gap: 6px; }
.field span{ font-weight: 800; font-size: 13px; color: var(--muted); }

select{
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  padding: 12px 12px;
  border-radius: 12px;
  outline: none;
}

.modal-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 6px;
}

/* =========================
   Sidebar estilo (FoodOps)
========================= */
#sidebar{
  position: relative;
  width: 100%;
  /*padding: 6px 1em 6px 0px;*/
  transition: 220ms ease-in-out;
  overflow: visible;
  text-wrap: nowrap;
  min-height: 70vh;
  background: var(--surface);
}
/* MODO PC (pantallas grandes) */


/* MODO TELÉFONO (pantallas pequeñas) */

#sidebar.close{ padding: 4px; width: 60px; }


#sidebar ul{
  list-style: none;
  padding: 0;
  margin: 0;
  position: sticky;
  top: var(--sidebar-sticky-top);
  max-height: calc(100vh - var(--sidebar-sticky-top) - 8px);
}
@media (max-width: 768px) {

#sidebar ul{
  position: static;
    max-height: none;
  overflow-y: auto;
}

}
@media (max-width: 1024px){
  #sidebar ul {
    max-height: none !important;
  }
      .sm\:px-8
 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

}
#sidebar .sb-top{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  margin:0px;
font-weight: 900;
}
#sidebar .sb-top a,
#sidebar .sb-top a:hover,
#sidebar .sb-top a:active,
#sidebar .sb-top a.active{
  background: none !important;
  border: none !important;
  font-weight: normal !important;
  cursor: default !important; 
  pointer-events: none !important; 
}
.sb-brand{ font-weight: 900; letter-spacing: .2px; color: var(--text); }

#sidebar a{
  border-radius: 2px;
  padding: .85em;
  text-decoration: none;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .85em;
  font-weight: 800;
  border: 1px solid transparent;
}

#sidebar ul li.active a,
#sidebar a.active{
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
}

#sidebar a:hover,
#sidebar ul li.active a:hover{
  color: #fff !important;
  font-weight: 900;
  background-color: color-mix(in srgb, var(--primary) 60%, transparent) !important;
}

.sb-fa{
  width: 30px;
  height: 30px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Toggle interno (sin bordes, como pediste) */
#toggle-btn{
  margin-left: auto;
    padding: 0.85em;
      border: none;
  border-radius: .15em;
  background: transparent;
  cursor: pointer;
  outline: none;
  box-shadow: none;
}

#toggle-btn:hover{
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
/* ====== GRID ====== */



/* Sidebar colapsado */
.app-shell.sidebar-collapsed {
    grid-template-columns: 88px 1fr;
}

.app-shell.sidebar-collapsed #sidebar {
padding: 6px 0px;
}
/* ====== OCULTAR TEXTO ====== */

.app-shell.sidebar-collapsed #sidebar a span:not(.sb-fa),
.app-shell.sidebar-collapsed #sidebar .sb-brand,
.app-shell.sidebar-collapsed #sidebar .logo-img {
    display: none;
}


/* ====== CENTRAR ICONOS ====== */

.app-shell.sidebar-collapsed #sidebar a {
    justify-content: center;
    padding: .85em 0;
}


/* ====== CENTRAR BOTÓN TOGGLE ====== */

.app-shell.sidebar-collapsed #sidebar #toggle-btn {
    margin: 0;
    width: 100%;
  }


/* ====== ROTACIÓN DEL ICONO ====== */

#toggle-btn i {
    transition: transform 300ms ease;
    font-size: 1rem;
    line-height: 1;
}
.app-shell.sidebar-collapsed #sidebar #toggle-btn i {
    transform: rotate(180deg);
    color: var(--text);
}
/* =========================
   Layout
========================= */
.app-shell{
  display: grid;
  grid-template-columns: clamp(250px, 18vw, 300px) 1fr;
    padding:0px;
      max-width: 100%;
  margin: 0 auto;
    transition: grid-template-columns 220ms ease;
    
}
.content{
  position: relative; /* necesario para el before */
  padding: 5px 22px;
  box-shadow: inset 0px 0px 8px 0px #0000002e;
  overflow: hidden;
}

/* Fondo patrón con transparencia */
.content::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at top left,
            color-mix(in srgb, var(--primary) 4%, transparent) 0%,
            transparent 42%
        ),
        radial-gradient(
            circle at bottom right,
            color-mix(in srgb, var(--primary) 3%, transparent) 0%,
            transparent 48%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,0.88) 0%,
            rgba(248,250,252,0.72) 55%,
            transparent 100%
        );
    z-index: 0;
    pointer-events: none;
}
[data-theme="dark"] .streak-gif{

    filter: 
        brightness(0) 
        invert(1)
        drop-shadow(0 1px 2px rgba(0,0,0,.28));

}
[data-theme="dark"]  .page-head-checkin {
    background: none;
}
/* Input fecha en modo dark */
[data-theme="dark"] .filters .field input[type="date"]{

    background: transparent !important;
    color: var(--text) !important;

    border: 1px solid var(--border);
    border-radius: 12px;

    padding: 10px 11px;

}
/* DARK MODE - INPUTS Y LABELS PROFILE */
[data-theme="dark"] .profile-field > span{
  color: #ffffff;
}

[data-theme="dark"] .profile-input,
[data-theme="dark"] .profile-textarea{
  background: transparent;
  color: #ffffff;
  border-color: rgba(255,255,255,0.15);
}

[data-theme="dark"] .profile-input::placeholder,
[data-theme="dark"] .profile-textarea::placeholder{
  color: rgba(255,255,255,0.5);
}

[data-theme="dark"] .profile-input:focus,
[data-theme="dark"] .profile-textarea:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}
[data-theme="dark"] .profile-input,
[data-theme="dark"] .profile-textarea{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .profile-btn{
  background: transparent;
  color: #ffffff;
  border-color: rgba(255,255,255,0.15);
  box-shadow: none;
}

[data-theme="dark"] .profile-btn:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.22);
}

[data-theme="dark"] .profile-btn.primary{
  background: var(--primary);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--primary) 24%, transparent);
}

[data-theme="dark"] .profile-btn.primary:hover{
  filter: brightness(1.05);
}
[data-theme="dark"] select option{

    color: #000 !important;
    background: #fff !important;

}
[data-theme="dark"] .filters .field .input{background:transparent !important;}
[data-theme="dark"] .bodymap{color:color-mix(in srgb,var(--primary) 20%,white);}
[data-theme="dark"] .bodymap path{fill:color-mix(in srgb,var(--primary) 18%,transparent) !important;stroke:#ffffff !important;stroke-width:2.5;cursor:pointer;}
[data-theme="dark"] .relative svg *{stroke-width:1.5;stroke:#ffffff !important;}
[data-theme="dark"] svg image{filter:brightness(0) invert(1);}
[data-theme="dark"] .bodymap:hover path{fill:color-mix(in srgb,var(--primary) 90%,transparent) !important;}
[data-theme="dark"] #listado-pagos .table-wrap{background:transparent !important;}
[data-theme="dark"] #listado-pagos .table-pago{background:transparent !important;}
[data-theme="dark"] #listado-pagos .table-pago thead{background:transparent !important;}
[data-theme="dark"] #listado-pagos .table-pago thead:hover{background:transparent !important;}

[data-theme="dark"] .content::before{background:radial-gradient(circle at top left,color-mix(in srgb,var(--primary) 7%,var(--surface)) 0%,transparent 44%),radial-gradient(circle at bottom right,color-mix(in srgb,var(--primary) 5%,var(--surface)) 0%,transparent 50%),linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,#0b1020) 0%,color-mix(in srgb,var(--surface) 82%,transparent) 58%,transparent 100%);}

[data-theme="dark"] .content .section-head{position:relative;border:none;}
[data-theme="dark"] .page-head{position:relative;border:none;}
[data-theme="dark"] .nutrition-page>.hero{position:relative;border:none;}
[data-theme="dark"] .content> .section-head::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,15,28,.75),rgba(10,15,28,.9));opacity:.9;pointer-events:none;border-radius:inherit;}
[data-theme="dark"] .page-head:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,15,28,.75),rgba(10,15,28,.9));opacity:.9;pointer-events:none;border-radius:inherit;}
[data-theme="dark"] .content> .section-head::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,15,28,.75),rgba(10,15,28,.9));opacity:.9;pointer-events:none;border-radius:inherit;}
[data-theme="dark"] .nutrition-page>.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,15,28,.75),rgba(10,15,28,.9));opacity:.9;pointer-events:none;border-radius:inherit;}

[data-theme="dark"] .id-label{position:absolute;left:5px;color:var(--text);border:none;border-radius:4px;background:color-mix(in srgb,var(--surface) 96%,#fff);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:2;}
[data-theme="dark"] .alumnos-table{background:transparent;}
[data-theme="dark"] .alumnos-table tr:hover{color:color-mix(in srgb,var(--primary) 20%,white);background:color-mix(in srgb,var(--primary) 18%,transparent);border-color:color-mix(in srgb,var(--primary) 40%,transparent);}
[data-theme="dark"] .btn-view-alumno i{color:var(--text);}
[data-theme="dark"] .alumnos-table thead{background-color:color-mix(in srgb,var(--primary) 60%,transparent)!important;}
[data-theme="dark"] .alumnos-table thead th{color:var(--text)!important;}
[data-theme="dark"] .chartKpi{color:white;}
[data-theme="dark"] #sidebar ul li.active a,[data-theme="dark"] #sidebar a.active{color:color-mix(in srgb,var(--primary) 20%,white);background:color-mix(in srgb,var(--primary) 18%,transparent);border-color:color-mix(in srgb,var(--primary) 40%,transparent);}
[data-theme="dark"] .footer{border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent);}
[data-theme="dark"] .footer-brand{color:#fff;}
[data-theme="dark"] .footer-links a{color:rgba(255,255,255,.70);}
[data-theme="dark"] .footer-links a:hover{color:var(--accent);}
[data-theme="dark"] .footer-bottom{color:rgba(255,255,255,.65);}
[data-theme="dark"] .brand-panel{background:rgba(255,255,255,.747);box-shadow:0 24px 60px rgba(255,255,255,.142);}
[data-theme="dark"] .brand-panel__title,
[data-theme="dark"] .brand-panel__iconbtn,
[data-theme="dark"] .brand-panel__section h4,
[data-theme="dark"] .brand-radio,
[data-theme="dark"] .brand-color-row label{
    color: rgba(22, 22, 22, 0.65) !important;
}
/* =========================================
   DARK MODE - MODAL CONFIGURAR KPIs (SweetAlert2)
========================================= */
[data-theme="dark"] .swal2-popup.kpi-modal-popup{
  background:
    linear-gradient(180deg, rgba(22,27,38,.96), rgba(12,18,28,.98)) !important;
  color: var(--text) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)) !important;
  border-radius: 24px !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

[data-theme="dark"] .swal2-popup.kpi-modal-popup .swal2-title{
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 1.35rem !important;
  padding: 22px 24px 8px !important;
  text-align: left !important;
}

[data-theme="dark"] .swal2-popup.kpi-modal-popup .swal2-html-container{
  color: var(--text) !important;
  margin: 0 !important;
  padding: 0 24px 22px !important;
}

[data-theme="dark"] .swal2-popup.kpi-modal-popup .swal2-actions{
  width: 100%;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 24px 22px !important;
  margin: 0 !important;
}

[data-theme="dark"] .swal2-popup.kpi-modal-popup .swal2-styled{
  border-radius: 14px !important;
  font-weight: 800 !important;
  padding: 11px 16px !important;
  box-shadow: none !important;
}

[data-theme="dark"] .swal2-popup.kpi-modal-popup .swal2-confirm{
  background: var(--primary) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

[data-theme="dark"] .swal2-popup.kpi-modal-popup .swal2-confirm:hover{
  filter: brightness(1.05);
}

[data-theme="dark"] .swal2-popup.kpi-modal-popup .swal2-cancel{
  background: rgba(255,255,255,.04) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

[data-theme="dark"] .swal2-popup.kpi-modal-popup .swal2-close{
  color: rgba(255,255,255,.72) !important;
}

[data-theme="dark"] .swal2-popup.kpi-modal-popup .swal2-close:hover{
  color: #fff !important;
  background: rgba(255,255,255,.06) !important;
}

/* overlay */
[data-theme="dark"] .swal2-container.swal2-backdrop-show,
[data-theme="dark"] .swal2-container.swal2-center{
  backdrop-filter: blur(4px);
}

/* cabecera interna del modal KPI */
[data-theme="dark"] .kpi-swap-top{
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding-bottom: 16px;
    background: transparent;

}

[data-theme="dark"] .kpi-swap-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  color: color-mix(in srgb, var(--primary) 25%, white);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

[data-theme="dark"] .kpi-swap-title{
  color: #fff !important;
}

[data-theme="dark"] .kpi-swap-sub{
  color: var(--muted) !important;
}

/* grid principal */
[data-theme="dark"] .kpi-swap-grid{
  gap: 16px;
}

/* paneles */
[data-theme="dark"] .kpi-panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

[data-theme="dark"] .kpi-panel-head{
  background: transparent;
}

[data-theme="dark"] .kpi-panel-head h4{
  color: #fff !important;
}

[data-theme="dark"] .kpi-panel-head p{
  color: var(--muted) !important;
}

[data-theme="dark"] .kpi-panel-badge{
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent);
}

/* opciones */
[data-theme="dark"] .kpi-option{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

[data-theme="dark"] .kpi-option:hover{
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background: rgba(255,255,255,.04);
  transform: translateY(-1px);
}

[data-theme="dark"] .kpi-option.is-selected{
  border-color: color-mix(in srgb, var(--primary) 44%, var(--border));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--primary) 16%, transparent),
      rgba(255,255,255,.03));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent);
}

[data-theme="dark"] .kpi-option strong{
  color: #f8fafc !important;
}

[data-theme="dark"] .kpi-option small{
  color: var(--muted) !important;
}

[data-theme="dark"] .kpi-option input[type="radio"]{
  accent-color: var(--primary);
}

[data-theme="dark"] .kpi-icon{
  color: color-mix(in srgb, var(--primary) 28%, white);
}

[data-theme="dark"] .kpi-option-chip{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #cbd5e1 !important;
}

/* preview */
[data-theme="dark"] .kpi-preview{
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.03) !important;
  border-radius: 18px;
}

[data-theme="dark"] .kpi-preview-item{
  border: 1px dashed rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.03) !important;
}

[data-theme="dark"] .kpi-preview-label{
  color: #94a3b8 !important;
}

[data-theme="dark"] .kpi-preview b{
  color: #fff !important;
}

[data-theme="dark"] .kpi-empty{
  border: 1px dashed rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.03) !important;
  color: var(--muted) !important;
}

/* validación swal */
[data-theme="dark"] .swal2-popup.kpi-modal-popup .swal2-validation-message{
  background: rgba(239,68,68,.12) !important;
  color: #fecaca !important;
  border: 1px solid rgba(239,68,68,.22) !important;
  border-radius: 12px !important;
}
/* =========================================================
   DARK MODE - MODALES SWEETALERT DE ALUMNOS.PHP
   alumno / rutina / registrar pago / ver ticket / historial pagos
========================================================= */

[data-theme="dark"] .swal2-popup.alumno-modal-popup,
[data-theme="dark"] .swal2-popup.rutina-modal-popup,
[data-theme="dark"] .swal2-popup.pay-modal-popup,
[data-theme="dark"] .swal2-popup.pay-view-popup,
[data-theme="dark"] .swal2-popup.pagos-modal-popup{
  background:
    linear-gradient(180deg, rgba(22,27,38,.97), rgba(10,15,28,.99)) !important;
  color: var(--text) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)) !important;
  border-radius: 22px !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  overflow: hidden !important;
}

[data-theme="dark"] .swal2-popup.alumno-modal-popup .swal2-title,
[data-theme="dark"] .swal2-popup.rutina-modal-popup .swal2-title,
[data-theme="dark"] .swal2-popup.pay-modal-popup .swal2-title,
[data-theme="dark"] .swal2-popup.pay-view-popup .swal2-title,
[data-theme="dark"] .swal2-popup.pagos-modal-popup .swal2-title{
  color: #fff !important;
}

[data-theme="dark"] .swal2-popup.alumno-modal-popup .swal2-html-container,
[data-theme="dark"] .swal2-popup.rutina-modal-popup .swal2-html-container,
[data-theme="dark"] .swal2-popup.pay-modal-popup .swal2-html-container,
[data-theme="dark"] .swal2-popup.pay-view-popup .swal2-html-container,
[data-theme="dark"] .swal2-popup.pagos-modal-popup .swal2-html-container{
  color: var(--text) !important;
}

[data-theme="dark"] .swal2-close{
  color: rgba(255,255,255,.72) !important;
}

[data-theme="dark"] .swal2-close:hover{
  color: #fff !important;
  background: rgba(255,255,255,.06) !important;
}

[data-theme="dark"] .swal2-container.swal2-backdrop-show{
  backdrop-filter: blur(4px);
}

/* acciones swal */
[data-theme="dark"] .btn-swal-primary{
  background: var(--primary) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 24%, transparent) !important;
}
[data-theme="dark"] .btn-swal-primary:hover{
  filter: brightness(1.06);
}

[data-theme="dark"] .btn-swal-warning{
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}
[data-theme="dark"] .btn-swal-warning:hover{
  filter: brightness(1.05);
}

[data-theme="dark"] .btn-swal-secondary,
[data-theme="dark"] .btn-swal-ghost{
  background: rgba(255,255,255,.04) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
[data-theme="dark"] .btn-swal-secondary:hover,
[data-theme="dark"] .btn-swal-ghost:hover{
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* inputs swal */
[data-theme="dark"] .swal2-input,
[data-theme="dark"] .swal2-select,
[data-theme="dark"] .swal2-file,
[data-theme="dark"] #rp_mode,
[data-theme="dark"] #rp_pass{
  background: rgba(255,255,255,.04) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

[data-theme="dark"] .swal2-input::placeholder{
  color: rgba(255,255,255,.45) !important;
}

[data-theme="dark"] .swal2-select option{
  color: #111 !important;
  background: #fff !important;
}

/* =========================================
   MODAL ALUMNO
========================================= */
[data-theme="dark"] .alumno-left,
[data-theme="dark"] .alumno-field,
[data-theme="dark"] .alumno-box{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

[data-theme="dark"] .alumno-avatar{
  background: color-mix(in srgb, var(--primary) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 34%, rgba(255,255,255,.12)) !important;
  color: #fff !important;
}

[data-theme="dark"] .alumno-mini,
[data-theme="dark"] .alumno-field .k,
[data-theme="dark"] .alumno-box .m{
  color: var(--muted) !important;
}

[data-theme="dark"] .alumno-field .v,
[data-theme="dark"] .alumno-box .t{
  color: #fff !important;
}

[data-theme="dark"] .btn-alumno-action{
  background: rgba(255,255,255,.04) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

[data-theme="dark"] .btn-alumno-action i{
  color: color-mix(in srgb, var(--primary) 28%, white) !important;
}

[data-theme="dark"] .btn-alumno-action:hover{
  background: color-mix(in srgb, var(--primary) 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 34%, rgba(255,255,255,.12)) !important;
}

/* =========================================
   MODAL RUTINA / NUTRICION
========================================= */
[data-theme="dark"] .rutina-chip,
[data-theme="dark"] .rutina-notas,
[data-theme="dark"] .rutina-day,
[data-theme="dark"] .rutina-item,
[data-theme="dark"] .rutina-empty{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .rutina-day-title,
[data-theme="dark"] .rutina-item-name{
  color: #fff !important;
}

[data-theme="dark"] .rutina-chip,
[data-theme="dark"] .rutina-item-stats,
[data-theme="dark"] .rutina-notas,
[data-theme="dark"] .rutina-empty{
  color: var(--muted) !important;
}

[data-theme="dark"] .rutina-item{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--primary) 8%, rgba(255,255,255,.03)),
      rgba(255,255,255,.02)) !important;
}

[data-theme="dark"] .rutina-item-video a{
  color: color-mix(in srgb, var(--primary) 28%, white) !important;
}

[data-theme="dark"] .rutina-item-obs{
  color: #94a3b8 !important;
}

/* =========================================
   MODAL REGISTRAR PAGO
========================================= */
[data-theme="dark"] .pay-ticket{
  background: rgba(255,255,255,.03) !important;
  color: #f8fafc !important;
  border: 1px dashed rgba(255,255,255,.16) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

[data-theme="dark"] .pay-head{
  border-bottom: 1px dashed rgba(255,255,255,.16) !important;
}

[data-theme="dark"] .pay-head .h1{
  color: #fff !important;
}
[data-theme="dark"] .pay-head .h2,
[data-theme="dark"] .pay-foot{
  color: var(--muted) !important;
}

[data-theme="dark"] .pay-line{
  border-top: 1px dashed rgba(255,255,255,.14) !important;
}

[data-theme="dark"] .pay-grid .k{
  color: #cbd5e1 !important;
}
[data-theme="dark"] .pay-grid .v{
  color: #fff !important;
}

[data-theme="dark"] .pay-input{
  background: rgba(255,255,255,.04) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
}

[data-theme="dark"] .pay-input::placeholder{
  color: rgba(255,255,255,.45) !important;
}

[data-theme="dark"] .pay-field span{
  color: #cbd5e1 !important;
}

/* =========================================
   MODAL VER TICKET PAGO
========================================= */
[data-theme="dark"] .pay-view-ticket{
  background: rgba(255,255,255,.03) !important;
  color: #f8fafc !important;
  border: 1px dashed rgba(255,255,255,.16) !important;
  border-radius: 14px !important;
}

[data-theme="dark"] .pay-view-head{
  border-bottom: 1px dashed rgba(255,255,255,.16) !important;
}

[data-theme="dark"] .pay-view-head .h1{
  color: #fff !important;
}
[data-theme="dark"] .pay-view-head .h2{
  color: var(--muted) !important;
}

[data-theme="dark"] .pay-view-row .k{
  color: #cbd5e1 !important;
}
[data-theme="dark"] .pay-view-row .v,
[data-theme="dark"] .pay-view-total{
  color: #fff !important;
}

[data-theme="dark"] .pay-view-line{
  border-top: 1px dashed rgba(255,255,255,.14) !important;
}

/* =========================================
   MODAL HISTORIAL PAGOS
========================================= */
[data-theme="dark"] .pagos-chip{
  background: color-mix(in srgb, var(--primary) 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 30%, rgba(255,255,255,.10)) !important;
  color: color-mix(in srgb, var(--primary) 24%, white) !important;
}

[data-theme="dark"] .pagos-table-wrap{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

[data-theme="dark"] .pagos-table th{
  background: rgba(255,255,255,.04) !important;
  color: #cbd5e1 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

[data-theme="dark"] .pagos-table td{
  color: #f8fafc !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

[data-theme="dark"] .pagos-table tbody tr:hover td{
  background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
}

[data-theme="dark"] .pagos-empty{
  background: rgba(255,255,255,.03) !important;
  border: 1px dashed rgba(255,255,255,.14) !important;
  color: var(--muted) !important;
}

/* =========================================
   FORM CREAR ALUMNO / CAMPOS FLOTANTES
========================================= */
[data-theme="dark"] #frmAlumno .fgroup input,
[data-theme="dark"] #frmAlumno .fgroup select,
[data-theme="dark"] .input-container input,
[data-theme="dark"] .self-register-linkbox input,
[data-theme="dark"] .fview{
  background: rgba(255,255,255,.04) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

[data-theme="dark"] .fview label,
[data-theme="dark"] #frmAlumno .file-group label{
  background: color-mix(in srgb, var(--surface) 96%, #0b1020) !important;
  color: #cbd5e1 !important;
}
/* INACTIVO */
[data-theme="dark"] #frmAlumno .fgroup label{
  background: transparent !important;
  color: #cbd5e1 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 2px;
}
[data-theme="dark"] #frmAlumno .fgroup:focus-within label{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 92%, white 2%),
      color-mix(in srgb, var(--surface) 88%, black 4%)
    ) !important;

  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}
[data-theme="dark"] #frmAlumno .fgroup input:focus,
[data-theme="dark"] #frmAlumno .fgroup select:focus,
[data-theme="dark"] .input-container input:focus{
  border-color: color-mix(in srgb, var(--primary) 46%, white) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent) !important;
}

[data-theme="dark"] .fview .value{
  color: #fff !important;
}

[data-theme="dark"] #frmAlumno .file-group input[type="file"]{
  background: rgba(255,255,255,.04) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

[data-theme="dark"] #frmAlumno .file-group input[type="file"]::file-selector-button{
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* =========================================
   AJUSTE MOBILE EN DARK
========================================= */
@media (max-width: 768px){
  [data-theme="dark"] .swal2-popup.alumno-modal-popup,
  [data-theme="dark"] .swal2-popup.rutina-modal-popup,
  [data-theme="dark"] .swal2-popup.pay-modal-popup,
  [data-theme="dark"] .swal2-popup.pay-view-popup,
  [data-theme="dark"] .swal2-popup.pagos-modal-popup{
    border-radius: 18px !important;
  }
}
[data-theme="dark"] .swal2-popup.swal2-modal.swal2-show{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 92%, white 2%),
      color-mix(in srgb, var(--surface) 88%, black 4%)
    ) !important;

  color: var(--text) !important;

  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)) !important;

  box-shadow:
    0 24px 70px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.04);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* responsive */
@media (max-width: 760px){
  [data-theme="dark"] .swal2-popup.kpi-modal-popup{
    width: min(96vw, 96vw) !important;
    border-radius: 18px !important;
  }

  [data-theme="dark"] .swal2-popup.kpi-modal-popup .swal2-title{
    padding: 18px 16px 8px !important;
    font-size: 1.08rem !important;
  }

  [data-theme="dark"] .swal2-popup.kpi-modal-popup .swal2-html-container{
    padding: 0 16px 16px !important;
  }

  [data-theme="dark"] .swal2-popup.kpi-modal-popup .swal2-actions{
    padding: 0 16px 16px !important;
    flex-direction: column;
    align-items: stretch;
  }
}
/* =========================
   SCROLL GLOBAL REAL APP
========================= */

/* SCROLL PRINCIPAL (EL IMPORTANTE) */
html::-webkit-scrollbar{
  width: 6px;
  height: 6px;
}

html::-webkit-scrollbar-track{
  background: transparent;
}

html::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover{
  background: rgba(0,0,0,.28);
}

/* SCROLLS INTERNOS (divs, modales, tablas, etc) */
*::-webkit-scrollbar{
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track{
  background: transparent;
}

*::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover{
  background: rgba(0,0,0,.28);
}

/* quitar flechas */
*::-webkit-scrollbar-button{
  display:none;
  width:0;
  height:0;
}
.content > *{
  position: relative;
  z-index: 2;
}
.theme-toggle{
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  box-shadow: var(--shadow);
}

.theme-toggle:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}

.theme-toggle:active{
  transform: scale(.97);
}

.theme-toggle:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.08),
    0 0 0 5px rgba(59,130,246,.18);
}

.theme-toggle .theme-icon{
  font-size: 18px;
  line-height: 1;
  transition: transform .25s ease, filter .25s ease, opacity .2s ease;
}

.theme-toggle:hover .theme-icon{
  transform: scale(1.08) rotate(-6deg);
}
.theme-toggle:hover  .icon-sun,
.theme-toggle:hover .icon-moon{
  transform: rotate(-20deg) scale(1.1);
}
/* LUNA: blanco hueso / marfil */
.theme-toggle .icon-moon{
  background: linear-gradient(
    135deg,
    #c7d2fe 0%,   /* azul claro */
    #93c5fd 35%,  /* azul suave */
    #60a5fa 70%,  /* azul medio */
    #3b82f6 100%  /* azul profundo */
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  filter:
    drop-shadow(0 0 4px rgba(96,165,250,.25))
    drop-shadow(0 0 10px rgba(59,130,246,.20));
}
/* SOL: gradiente atardecer */
.theme-toggle .icon-sun{
  background: linear-gradient(135deg, #ffd166 0%, #ffb703 32%, #fb8500 68%, #ff7b00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 0 6px rgba(255, 183, 3, .22))
    drop-shadow(0 0 12px rgba(251, 133, 0, .18));
}

.user-chip{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--surface);
  min-width: 0;
  text-transform: uppercase
} 

@media (max-width: 768px) {
    .content {
        /*padding-top: 72px !important;*/
  padding: 0;
}

}
/* =========================
   Responsive: Topbar + Layout
========================= */
@media (max-width: 980px){
  /* Topbar en 2 filas si no cabe */
  .topbar{
    gap: 10px;
    padding: 10px 12px;
justify-content: space-between;
    }
   .topbar .btn.btn-outline{
  display: none;
}
  .brand{ flex: 1 1 auto; }

  .topbar-right{
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
  }
.user-avatar {
    width: 36px;
    height: 36px;
}
  .btn, .theme-toggle{
    padding: 9px 10px;
    border-radius: 12px;
  }

  .user-chip{
    max-width: 100%;
    min-width: 0;
          flex-direction: row-reverse;

  }

  /* Layout */
  .app-shell{
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    gap: 12px;
  }

  /* El sidebar se vuelve drawer (abajo) */
}
.user-chip-sidebar {

            display: none ;

    }
/* =========================
   Responsive Sidebar Drawer (Mobile)
========================= */
@media (max-width: 980px){
  #sidebar{
    position: fixed !important;
    top: 71px !important;
    left: 0 !important;
    height: calc(100vh - 71px) !important;
    width: min(86vw, 320px) !important;
    z-index: 1002 !important;
    transform: translateX(-110%);
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    transition: transform 220ms ease, opacity 220ms ease;
  }

  body.sb-open #sidebar{
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
.user-chip-topbar{
    display: none !important;
  }
  
    .user-chip-sidebar {
        display: flex;
        min-width: 0;
        text-transform: uppercase; 
        flex-direction: column;

    }
    a.user-meta {
        padding: 0 !important;
    }
  .user-chip-sidebar .user-meta{
    flex: 1 1 auto;
    min-width: 0;
  }

  .user-chip-sidebar .user-name,
  .user-chip-sidebar .user-role{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .user-chip-sidebar .btn{
    flex-shrink: 0;
  }
  .sb-backdrop{
    position: fixed;
    inset: 71px 0 0 0;
    background: rgba(2,6,23,.45);
    z-index: 1001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
  }

  body.sb-open .sb-backdrop{
    opacity: 1;
    pointer-events: auto;
  }

  /* Oculta el toggle interno del sidebar en móvil */
  #sidebar #toggle-btn{ display: none; }
  .topbar{
   /* position: fixed;*/
width: 100%;
height: 71px;
}
}

/* Botón hamburguesa en Topbar */
.sb-mobile-btn{
  display: none;
  width: 42px;
  height: 42px;
  border: none;
  background:transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.sb-mobile-btn:hover{ 
color: var(--primary);
 }

@media (max-width: 980px){
  .sb-mobile-btn{ display: inline-flex; }
}

/* =========================
   Mobile (teléfono)
========================= */
@media (max-width: 560px){
  .brand-logo,
  .brand-logo-fallback{
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .brand-name{ font-size: 14px;}
  .brand-sub{ font-size: 11px; }

  /* Si tienes texto al lado del icono en el theme toggle */
  .theme-toggle .theme-tx{ display: none; }

  /* User-chip compacto */
  .user-role{ display: none; }

  /* Modal y acciones */
  .modal{
    width: 100%;
    border-radius: 16px;
  }
  select{ width: 100%; }

  .modal-actions{
    flex-direction: column;
    align-items: stretch;
  }
}

/* Mejora en móviles (sin hover real) */
@media (hover: none){
  .btn:hover{ transform: none; }
  #sidebar a:hover{ transform: none; }
}

/**FOOTER**//* ===== Footer tipo Colorlib (responsive + claro/oscuro) ===== */
.footer{
  position: relative; /* necesario para que ::before funcione */
  text-transform: uppercase;
  padding: 15px 18px 10px 18px;
  border-radius: 0px;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
  z-index: 1;
      background: var(--surface);
}




.footer-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.footer-brand{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 18px;
  color: var(--text);
}
.footer-center {
  display: flex;
  align-items: center;
  gap: 30px;
    border:none;

}
.footer-center .brand-logo {
    background: none; /* quita el fondo */
  height: 50px; /* ajusta según necesites */
  object-fit: contain;
      border:none;

}


.footer-links{
  display:flex;
  gap: 18px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.footer-links a{
  color: var(--muted);
  text-decoration:none;
  font-weight: 700;
  font-size: 12px;
}

.footer-links a:hover{
  color: var(--primary);
}

.footer-left{
      width: 33%;

}
.footer-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 12px;
      width: 33%;

}

.footer-social {
  display: flex;
  gap: 12px;
  align-items: center;
    justify-content: center;
}

.footer-social .social-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: invert(0%); /* color original */
  transition: transform 0.2s ease;
}

.footer-social .social-logo:hover {
  transform: scale(1.2);
}
.footer-links-right{
  justify-content:flex-end;
  margin-top: 0;
}

.footer-bottom{
  text-align:center;
  padding-top: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.footer-dev{
  color: var(--primary);
  font-weight: 900;
}

/* Responsive */
/* =========================
   Footer responsive bonito
========================= */
@media (max-width: 900px){
  .footer{
    padding: 18px 14px 12px;
  }

  .footer-top{
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    align-items: center;
    justify-items: center;
    text-align: center;
  }

  .footer-left,
  .footer-right{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
.footer-right{
     gap: 0px;
        padding-bottom: 5px;
  }
  .footer-brand{
    font-size: 17px;
    line-height: 1.2;
    text-align: center;
  }

  .footer-links{
    margin-top: 8px;
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
  }

  .footer-links a{
    font-size: 9px;
    letter-spacing: .4px;
  }

  .footer-social{
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 100%;
    padding: 4px 0;
  }

  .footer-social .social-logo{
    width: 22px;
    height: 22px;
  }

  .footer-links-right{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
    margin-top: 2px;
  }



  .footer-bottom{
    padding-top: 5px;
    font-size: 9px;
    text-align: center;
  }

  .footer-dev{
    display: block;
    margin-top: 4px;
  }
}
/* ===== Mesas (cards + estados) ===== */
.tables-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin-top: 12px;
}

.tables-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:12px;
}

.table-card{
  border-radius:18px;
  padding:14px;
  border:2px solid var(--border);
 

  transition: transform .12s ease, filter .12s ease;
}
.table-card:hover{ transform: translateY(-1px); filter: brightness(.99); }

.table-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.table-title{ font-weight: 900; }
.table-meta{ margin-top:6px; font-size:12px; color:var(--muted); }

.table-actions{
  margin-top:12px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content: space-around;
}

/* Estados */
.table-free{
  background: #fff;
  border-color: #111;
}

.table-reserved{
  background: rgba(148,163,184,.25); /* gris elegante */
  border-color: rgba(148,163,184,.60);
}

.table-waiting{
  background: rgba(250,204,21,.18); /* amarillo */
  border-color: rgba(250,204,21,.55);
}

.table-served{
  background: rgba(34,197,94,.18); /* verde */
  border-color: rgba(34,197,94,.55);
}

/* Badge */
.table-badge{
  padding:4px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:11px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--secondary) 70%, transparent);
}

/* ===== Modal ===== */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
}

.modal-overlay.active{
  display:flex;
}

.modal-card{
  background:var(--surface);
  border-radius:18px;
  padding:24px;
  width:100%;
  max-width:420px;
  border:1px solid var(--border);
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.modal-card h3{
  margin:0 0 18px;
}

.modal-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
}

.modal-field input{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:transparent;
}

.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:10px;
}
.table-card { border:1px solid var(--border); border-radius:8px; padding:14px; background:var(--surface); }
.table-card.table-free     { box-shadow: inset 0 0 0 2px rgba(226, 231, 238, 0.25); }
.table-card.table-reserved { box-shadow: inset 0 0 0 2px rgba(59, 131, 246, 0.356); }
.table-card.table-waiting  { box-shadow: inset 0 0 0 2px rgba(234,179,8,.55); }   /* pendiente */
.table-card.table-cooking  { box-shadow: inset 0 0 0 2px rgba(234,179,8,.55); }   /* cocinando */
.table-card.table-ready    { box-shadow: inset 0 0 0 2px rgba(34,197,94,.45); }   /* listo */
.apexcharts-heatmap-rect[val="0"] {
  fill: transparent !important;
  stroke: transparent !important;
}
.apexcharts-heatmap-rect:not([val="0"]) {
  stroke: var(--surface) !important;
}

#scrollTopBtn{
  position:fixed;
  right:25px;
  bottom:5px;
  background:none;
  border:none;
  font-size:22px;
  color:#9aa6b2;
  cursor:pointer;
  z-index:9999;
  transition:0.25s;
  padding:3px;
}

#scrollTopBtn:hover{
  color:var(--secundary);
  transform:translateY(-3px);
}
html{
  scroll-behavior: smooth;
}