/* ═══════════════════════════════════════════════════════
   GR Panel de Organizador — Frontend CSS
   GR Diseño Digital · v1.0
═══════════════════════════════════════════════════════ */
:root{
  --grp-bg:       #0f1117;
  --grp-surface:  #1a1d27;
  --grp-border:   rgba(255,255,255,.08);
  --grp-accent:   #6366f1;
  --grp-accent2:  #8b5cf6;
  --grp-green:    #10b981;
  --grp-red:      #ef4444;
  --grp-yellow:   #f59e0b;
  --grp-text:     #e2e8f0;
  --grp-muted:    #64748b;
  --grp-radius:   10px;
  --grp-ease:     .25s cubic-bezier(.4,0,.2,1);
}

/* ══ PANEL PRINCIPAL — TEMA CLARO POR DEFECTO ══
   Las vars se redefinen aquí para sobreescribir :root en el scope del panel.
   Así WordPress no se ve afectado. ══ */
.grp-org-panel{
  --grp-bg:      #f0f2f5;
  --grp-surface: #ffffff;
  --grp-border:  rgba(0,0,0,.10);
  --grp-text:    #111827;
  --grp-muted:   #6b7280;
  --grp-yellow:  #d97706;
  background:var(--grp-bg);
  border-radius:16px;
  padding:32px;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--grp-text);
  min-height:calc(100vh - 120px);
  box-sizing:border-box;
}
/* 🌙 Modo oscuro — el toggle añade esta clase */
.grp-org-panel.grp-theme-dark{
  --grp-bg:      #0f1117;
  --grp-surface: #1a1d27;
  --grp-border:  rgba(255,255,255,.08);
  --grp-text:    #e2e8f0;
  --grp-muted:   #64748b;
  --grp-yellow:  #f59e0b;
}


/* ── Wrapper principal ── */
/* ── Login form ── */
.grp-org-login{
  max-width:380px;
  margin:0 auto;
  text-align:center;
  padding:40px 0;
}
.grp-org-login h2{
  font-size:1.5rem;font-weight:700;margin-bottom:6px;
}
.grp-org-login p{ color:var(--grp-muted);font-size:.9rem;margin-bottom:28px; }
.grp-login-form{ display:flex;flex-direction:column;gap:12px;text-align:left; }
.grp-login-form label{ font-size:.78rem;font-weight:600;color:var(--grp-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;display:block; }
.grp-login-form input{
  width:100%;padding:11px 14px;background:var(--grp-surface);border:1px solid var(--grp-border);
  border-radius:var(--grp-radius);color:var(--grp-text);font-size:.92rem;outline:none;transition:var(--grp-ease);
}
.grp-login-form input:focus{ border-color:var(--grp-accent);box-shadow:0 0 0 3px rgba(99,102,241,.15); }
.grp-login-error{ color:var(--grp-red);font-size:.82rem;padding:8px;background:rgba(239,68,68,.1);border-radius:6px;text-align:center;display:none; }

/* ── Botones ── */
.grp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 18px;border-radius:var(--grp-radius);font-size:.85rem;font-weight:600;
  cursor:pointer;border:none;transition:var(--grp-ease);white-space:nowrap;
}
.grp-btn-primary{ background:var(--grp-accent);color:#fff; }
.grp-btn-primary:hover{ background:#4f46e5;transform:translateY(-1px); }
.grp-btn-primary:disabled{ opacity:.5;pointer-events:none; }
.grp-btn-success{ background:var(--grp-green);color:#fff; }
.grp-btn-success:hover{ background:#059669; }
.grp-btn-ghost{ background:rgba(0,0,0,.05);color:var(--grp-text);border:1px solid var(--grp-border); }
.grp-btn-ghost:hover{ background:rgba(0,0,0,.08); }
.grp-btn-danger{ background:transparent;color:var(--grp-red);border:1px solid rgba(239,68,68,.3); }
.grp-btn-danger:hover{ background:rgba(239,68,68,.1); }
.grp-btn-wa{ background:#25D366;color:#fff; }
.grp-btn-wa:hover{ background:#1da851; }
.grp-btn-sm{ padding:5px 12px;font-size:.78rem; }
.grp-btn-full{ width:100%; }

/* ── Header del panel ── */
.grp-panel-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:12px;margin-bottom:24px;
  padding-bottom:20px;border-bottom:1px solid var(--grp-border);
}
.grp-panel-title h2{ font-size:1.4rem;font-weight:700;margin:0 0 4px; }
.grp-panel-title p{ color:var(--grp-muted);font-size:.85rem;margin:0; }
.grp-panel-title .grp-event-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.25);
  color:#a5b4fc;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 10px;border-radius:20px;margin-bottom:6px;
}
.grp-panel-logout{ font-size:.78rem;color:var(--grp-muted);cursor:pointer;text-decoration:underline; }
.grp-panel-logout:hover{ color:var(--grp-red); }

/* ── Stats bar ── */
.grp-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
  gap:10px;margin-bottom:24px;
}
.grp-stat{
  background:var(--grp-surface);border:1px solid var(--grp-border);
  border-radius:var(--grp-radius);padding:14px 16px;text-align:center;transition:var(--grp-ease);
}
.grp-stat:hover{ border-color:var(--grp-accent);transform:translateY(-2px); }
.grp-stat-n{ display:block;font-size:1.8rem;font-weight:800;line-height:1; }
.grp-stat-l{ display:block;font-size:.7rem;color:var(--grp-muted);margin-top:4px;font-weight:500; }
.grp-stat-yes .grp-stat-n{ color:var(--grp-green); }
.grp-stat-no  .grp-stat-n{ color:var(--grp-red); }
.grp-stat-pend .grp-stat-n{ color:var(--grp-yellow); }
.grp-stat-att  .grp-stat-n{ color:#60a5fa; }

/* ── Toolbar ── */
.grp-toolbar{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px;
}
.grp-search{
  margin-left:auto;position:relative;
}
.grp-search input{
  background:var(--grp-surface);border:1px solid var(--grp-border);border-radius:var(--grp-radius);
  color:var(--grp-text);padding:8px 12px 8px 34px;font-size:.85rem;outline:none;transition:var(--grp-ease);width:180px;
}
.grp-search input:focus{ border-color:var(--grp-accent);width:220px; }
.grp-search-ico{ position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--grp-muted);font-size:.9rem; }

/* ── Tabla de invitados ── */
.grp-table-wrap{ overflow-x:auto;border-radius:var(--grp-radius);border:1px solid var(--grp-border); }
.grp-table{
  width:100%;border-collapse:collapse;font-size:.84rem;
}
.grp-table th{
  background:rgba(255,255,255,.04);padding:10px 12px;text-align:left;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--grp-muted);border-bottom:1px solid var(--grp-border);white-space:nowrap;
}
.grp-table td{
  padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle;
}
.grp-table tr:last-child td{ border-bottom:none; }
.grp-table tr:hover td{ background:rgba(0,0,0,.03); }
.grp-table .grp-name-cell strong{ display:block;font-weight:600;color:var(--grp-text); }
.grp-table .grp-name-cell small{ color:var(--grp-muted);font-size:.72rem;font-family:monospace; }
.grp-rsvp-yes{ color:var(--grp-green);font-size:.78rem;font-weight:600; }
.grp-rsvp-no { color:var(--grp-red);  font-size:.78rem;font-weight:600; }
.grp-rsvp-pend{ color:var(--grp-yellow);font-size:.78rem; }
.grp-actions{ display:flex;gap:5px; }
.grp-table-empty{ text-align:center;padding:48px;color:var(--grp-muted); }

/* ── Modal ── */
.grp-modal{
  display:none;position:fixed;inset:0;z-index:2147483647;
  background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:20px;
}
.grp-modal.open{ display:flex; }
.grp-modal-box{
  background:var(--grp-surface);border:1px solid var(--grp-border);
  border-radius:16px;width:100%;max-width:580px;max-height:90vh;
  overflow-y:auto;padding:28px;position:relative;
  animation:grpModalIn .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes grpModalIn{ from{opacity:0;transform:scale(.92)translateY(20px)} to{opacity:1;transform:scale(1)translateY(0)} }
.grp-modal-header{ display:flex;align-items:center;justify-content:space-between;margin-bottom:20px; }
.grp-modal-header h3{ font-size:1.1rem;font-weight:700;margin:0; }
.grp-modal-close{ background:none;border:none;color:var(--grp-muted);cursor:pointer;font-size:1.3rem;padding:4px; }
.grp-modal-close:hover{ color:var(--grp-text); }
.grp-modal-footer{ display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--grp-border); }

/* ── Form fields ── */
.grp-field{ margin-bottom:14px; }
.grp-field label{ display:block;font-size:.75rem;font-weight:600;color:var(--grp-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px; }
.grp-field input,.grp-field select,.grp-field textarea{
  width:100%;padding:10px 13px;background:rgba(255,255,255,.04);border:1px solid var(--grp-border);
  border-radius:var(--grp-radius);color:var(--grp-text);font-size:.88rem;outline:none;transition:var(--grp-ease);
  font-family:inherit;
}
.grp-field input:focus,.grp-field select:focus,.grp-field textarea:focus{
  border-color:var(--grp-accent);box-shadow:0 0 0 3px rgba(99,102,241,.12);
}
.grp-field select option{ background:#1e2030;color:var(--grp-text); }
.grp-field textarea{ resize:vertical;min-height:70px; }
.grp-field-row{ display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.grp-field-hint{ font-size:.73rem;color:var(--grp-muted);margin-top:4px; }

/* ── Companions ── */
.grp-companions-item{
  display:flex;align-items:center;gap:8px;margin-bottom:7px;
}
.grp-companions-item input{ flex:1; }
.grp-companions-item .grp-rm{ background:none;border:1px solid rgba(239,68,68,.3);color:var(--grp-red);border-radius:6px;width:26px;height:26px;cursor:pointer;flex-shrink:0;font-size:.85rem; }

/* ── Output textarea (links/csv) ── */
.grp-output-ta{
  width:100%;background:rgba(0,0,0,.3);border:1px solid var(--grp-border);border-radius:var(--grp-radius);
  color:var(--grp-text);font-family:monospace;font-size:.78rem;padding:12px;resize:vertical;min-height:200px;outline:none;
}

/* ── Loading state ── */
.grp-loading-overlay{
  display:none;position:absolute;inset:0;background:rgba(15,17,23,.8);
  border-radius:16px;align-items:center;justify-content:center;z-index:10;flex-direction:column;gap:10px;
}
.grp-loading-overlay.show{ display:flex; }
.grp-spinner{
  width:28px;height:28px;border:3px solid rgba(99,102,241,.2);
  border-top-color:var(--grp-accent);border-radius:50%;animation:grpSpin .7s linear infinite;
}
@keyframes grpSpin{ to{transform:rotate(360deg)} }

/* ── Toast notifications modernas ── */
.grp-toast-container{
  position:fixed;bottom:28px;right:28px;z-index:999999;
  display:flex;flex-direction:column-reverse;gap:10px;
  pointer-events:none;
}
.grp-toast{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-radius:14px;
  font-size:.86rem;font-weight:500;min-width:220px;max-width:360px;
  pointer-events:all;cursor:default;
  box-shadow:0 8px 40px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3);
  animation:grpToastIn .4s cubic-bezier(.34,1.56,.64,1) forwards;
  border:1px solid transparent;
}
.grp-toast.removing{
  animation:grpToastOut .35s ease forwards;
}
@keyframes grpToastIn{
  from{opacity:0;transform:translateX(40px) scale(.9)}
  to  {opacity:1;transform:translateX(0)   scale(1)}
}
@keyframes grpToastOut{
  from{opacity:1;transform:translateX(0)   scale(1)}
  to  {opacity:0;transform:translateX(40px) scale(.92)}
}
.grp-toast-ok {
  background:linear-gradient(135deg,#064e3b,#065f46);
  border-color:rgba(16,185,129,.3);color:#6ee7b7;
}
.grp-toast-err{
  background:linear-gradient(135deg,#7f1d1d,#991b1b);
  border-color:rgba(239,68,68,.3);color:#fca5a5;
}
.grp-toast-info{
  background:linear-gradient(135deg,#1e1b4b,#312e81);
  border-color:rgba(99,102,241,.3);color:#c7d2fe;
}
.grp-toast-warn{
  background:linear-gradient(135deg,#78350f,#92400e);
  border-color:rgba(245,158,11,.3);color:#fde68a;
}
.grp-toast-icon{ font-size:1.1rem;flex-shrink:0; }
.grp-toast-body{ flex:1; }
.grp-toast-title{ font-weight:700;display:block; }
.grp-toast-sub  { font-size:.76rem;opacity:.75;margin-top:2px;display:block; }
.grp-toast-close{
  background:none;border:none;color:inherit;opacity:.5;cursor:pointer;
  font-size:.9rem;padding:2px;flex-shrink:0;
}
.grp-toast-close:hover{ opacity:1; }
/* Barra de progreso inferior */
.grp-toast-progress{
  position:absolute;bottom:0;left:0;height:3px;border-radius:0 0 14px 14px;
  animation:grpToastProg var(--grp-toast-dur,3.5s) linear forwards;
}
@keyframes grpToastProg{ from{width:100%} to{width:0%} }
.grp-toast{ position:relative;overflow:hidden; }
.grp-toast-ok   .grp-toast-progress{ background:rgba(16,185,129,.6); }
.grp-toast-err  .grp-toast-progress{ background:rgba(239,68,68,.6); }
.grp-toast-info .grp-toast-progress{ background:rgba(99,102,241,.6); }
.grp-toast-warn .grp-toast-progress{ background:rgba(245,158,11,.6); }

@media(max-width:480px){
  .grp-toast-container{ bottom:16px;right:16px;left:16px; }
  .grp-toast{ max-width:100%; }
}

/* ── Responsive ── */
@media(max-width:640px){
  .grp-org-panel{ padding:16px; }
  .grp-toolbar{ gap:6px; }
  .grp-search{ margin-left:0;width:100%; }
  .grp-search input{ width:100%; }
  .grp-field-row{ grid-template-columns:1fr; }
  .grp-table td,.grp-table th{ padding:8px; }
  .grp-stats{ grid-template-columns:repeat(2,1fr); }
}


/* ── Animación cuando cambia un número de stat ── */
.grp-count-changed {
  animation: grpCountPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes grpCountPop {
  0%   { transform: scale(1);    color: inherit; }
  40%  { transform: scale(1.4);  color: #f59e0b; }
  100% { transform: scale(1);    color: inherit; }
}

/* ── Botón refresh spinning ── */
#grp-refresh-manual.spinning {
  animation: grpSpin .7s linear infinite;
}
@keyframes grpSpin { to { transform: rotate(360deg); } }

/* ── Aviso deadline en pase ── */
.grp-pass-deadline-warn {
  background: linear-gradient(135deg, #78350f, #92400e);
  border: 1px solid rgba(245,158,11,.3);
  color: #fde68a;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  animation: grpDeadlinePulse 2s ease infinite;
}
@keyframes grpDeadlinePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,.4); }
  50%      { box-shadow: 0 0 0 8px rgba(245,158,11,0); }
}

/* ── FAB Botón actualizar ── */
#grp-fab-refresh {
  position: fixed !important;
  bottom: 88px !important;
  right: 28px !important;
  z-index: 99999 !important;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #6366f1, #818cf8);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(99,102,241,.45);
  transition: transform .2s ease, box-shadow .2s ease;
}
#grp-fab-refresh:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 32px rgba(99,102,241,.6);
}
#grp-fab-refresh.spinning svg {
  animation: grpSpin .7s linear infinite;
}
@keyframes grpSpin { to { transform: rotate(360deg); } }

@media(max-width:480px){
  #grp-fab-refresh { bottom:16px; right:16px; width:46px; height:46px; }
}

/* ═══════════════════════════════════════════════════
   TOOLBAR — fila única: botones | sep | search | refresh
═══════════════════════════════════════════════════ */
.grp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.grp-toolbar-sep {
  color: var(--grp-border);
  font-size: .85rem;
  user-select: none;
  flex-shrink: 0;
}
/* Refresh button con texto */
.grp-refresh-inline {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.grp-refresh-txt {
  display: inline-block;
  transition: transform .3s ease;
}
.grp-refresh-inline.spinning .grp-refresh-txt {
  animation: grpSpin .7s linear infinite;
}
@keyframes grpSpin { to { transform: rotate(360deg); } }

/* ─── Deadline widget editable ─── */
.grp-deadline-row {
  margin-top: 5px;
  font-size: .80rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.grp-deadline-static {
  display: flex;
  align-items: center;
  gap: 4px;
}
.grp-deadline-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .78rem;
  opacity: .6;
  padding: 0 2px;
  transition: opacity .2s;
}
.grp-deadline-edit-btn:hover { opacity: 1; }
.grp-deadline-edit-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ─── Alerts modal rows ─── */
.grp-alert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(249,115,22,.06);
  border: 1px solid rgba(249,115,22,.15);
  border-radius: 10px;
}
.grp-alert-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.grp-alert-name strong { font-size: .88rem; color: var(--grp-text); }
.grp-alert-name small  { font-size: .76rem; color: var(--grp-muted); }

/* ─── Remove FAB (ya no se usa, refresh está inline) ─── */
#grp-fab-refresh { display: none !important; }

.grp-btn-active { background:rgba(var(--grp-accent-rgb,99,102,241),.2) !important; border-color:var(--grp-accent) !important; color:var(--grp-accent) !important; }

/* ══════════════════════════════════════════════════════════════
   TEMA CLARO — descomenta y ajusta según tus necesidades
   Para activar: .grp-org-panel añade clase 'grp-theme-light'
   El toggle 🌙/☀️ en la cabecera gestiona esta clase automáticamente
══════════════════════════════════════════════════════════════ */
/*
.grp-org-panel.grp-theme-light {
  --grp-bg:      #f5f5f7;
  --grp-surface: #ffffff;
  --grp-border:  rgba(0,0,0,.12);
  --grp-text:    #1d1d1f;
  --grp-muted:   #6e6e73;
  --grp-accent:  #5856d6;
  --grp-accent-rgb: 88,86,214;
}
.grp-org-panel.grp-theme-light .grp-panel-header { background:#fff; border-color:rgba(0,0,0,.1); }
.grp-org-panel.grp-theme-light .grp-stats       { background:#fff; border-color:rgba(0,0,0,.1); }
.grp-org-panel.grp-theme-light .grp-tabs        { background:#fff; border-color:rgba(0,0,0,.1); }
.grp-org-panel.grp-theme-light .grp-table        { background:#fff; }
.grp-org-panel.grp-theme-light .grp-table th     { background:rgba(0,0,0,.04); color:#3a3a3c; }
.grp-org-panel.grp-theme-light .grp-table td     { border-color:rgba(0,0,0,.06); color:#1d1d1f; }
.grp-org-panel.grp-theme-light .grp-tab          { color:#6e6e73; }
.grp-org-panel.grp-theme-light .grp-tab.active   { color:var(--grp-accent); border-color:var(--grp-accent); }
.grp-org-panel.grp-theme-light .grp-btn-ghost    { color:#3a3a3c; border-color:rgba(0,0,0,.15); }
.grp-org-panel.grp-theme-light .grp-modal-box    { background:#fff; }
.grp-org-panel.grp-theme-light input,
.grp-org-panel.grp-theme-light select,
.grp-org-panel.grp-theme-light textarea { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.15); color:#1d1d1f; }
.grp-org-panel.grp-theme-light .grp-stat { background:rgba(0,0,0,.04); }
*/

/* Informes tab grid */
#grp-content-informes .grp-stats {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap:12px; padding:20px;
  background:transparent; border:none;
}
#grp-content-informes .grp-stat {
  flex-direction:column; gap:4px; padding:20px 16px;
}

/* ══ NAVEGACIÓN (TABS) ══ */
.grp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 0;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--grp-border);
}
.grp-tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--grp-muted);
  cursor: pointer;
  font-size: .88rem;
  font-weight: 600;
  padding: 10px 18px;
  margin-bottom: -2px;
  border-radius: 8px 8px 0 0;
  transition: color .18s, border-color .18s, background .18s;
  white-space: nowrap;
}
.grp-tab:hover {
  color: var(--grp-text);
  background: rgba(255,255,255,.04);
}
.grp-tab.active {
  color: var(--grp-accent);
  border-bottom-color: var(--grp-accent);
  background: rgba(99,102,241,.08);
}
.grp-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grp-red);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 4px;
  margin-left: 5px;
  vertical-align: middle;
  animation: grpPulse 1.5s infinite;
}
.grp-tab-content { display: none; }
.grp-tab-content.active { display: block; }

/* ══ CHECK-IN TABLE MAP ══ */
.grp-ci-tables {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--grp-surface);
  border: 1px solid var(--grp-border);
  border-radius: var(--grp-radius);
}
.grp-ci-table-card {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--grp-border);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.grp-ci-table-name {
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--grp-text);
}
.grp-ci-dot {
  display: inline-block;
  width: 13px; height: 13px;
  border-radius: 50%;
  margin: 2px;
  border: 1px solid rgba(255,255,255,.1);
  transition: background .3s;
}
.grp-ci-dot.checkin-arrived { background: #22c55e; border-color: #16a34a; }
.grp-ci-dot.checkin-pending { background: #f59e0b; border-color: #d97706; }
.grp-ci-dot.checkin-free    { background: rgba(255,255,255,.1); }

/* ══ RESPONSIVE ══ */
@media (max-width: 768px) {
  .grp-tabs {
    gap: 2px;
    padding: 6px 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .grp-tabs::-webkit-scrollbar { display: none; }
  .grp-tab {
    font-size: .78rem;
    padding: 8px 12px;
    flex-shrink: 0;
  }
  .grp-panel-header {
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 14px;
  }
  .grp-panel-title h2 { font-size: 1.15rem; }
  .grp-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .grp-stat { padding: 10px 8px; }
  .grp-stat-n { font-size: 1.3rem; }
  .grp-stat-l { font-size: .62rem; }
  .grp-toolbar {
    gap: 5px;
  }
  .grp-toolbar .grp-btn-sm {
    font-size: .72rem;
    padding: 6px 8px;
  }
  .grp-toolbar-sep { display: none; }
  .grp-search { margin-left: 0; width: 100%; }
  .grp-search input { width: 100% !important; }
  .grp-table th, .grp-table td { padding: 6px 8px; font-size: .78rem; }
  /* Hide less important columns on mobile */
  .grp-table .col-tipo, .grp-table .col-email { display: none; }
  .grp-modal-box { margin: 10px; padding: 18px; }
  .grp-ci-tables { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 480px) {
  .grp-stats { grid-template-columns: repeat(2, 1fr); }
  .grp-tab { font-size: .72rem; padding: 7px 10px; }
  .grp-tables-card-grid { grid-template-columns: 1fr; }
}

/* Dark mode: restore white-based rgba for dark backgrounds */
.grp-org-panel.grp-theme-dark .grp-btn-ghost       { background:rgba(255,255,255,.05); }
.grp-org-panel.grp-theme-dark .grp-btn-ghost:hover  { background:rgba(255,255,255,.10); }
.grp-org-panel.grp-theme-dark .grp-table th         { background:rgba(255,255,255,.03); }
.grp-org-panel.grp-theme-dark .grp-table tr:hover td{ background:rgba(255,255,255,.025); }
.grp-org-panel.grp-theme-dark .grp-modal-box        { background:#1e2132; }
.grp-org-panel.grp-theme-dark input,
.grp-org-panel.grp-theme-dark select,
.grp-org-panel.grp-theme-dark textarea              { background:rgba(255,255,255,.07); color:#e2e8f0; border-color:rgba(255,255,255,.12); }