/* =====================================================================
   SPG — Identidad visual
   Neutros cálidos + acento oro champagne. El oro solo en acción/jerarquía.
   ===================================================================== */
:root{
  /* Base — neutros de la identidad (nada de blancos ni grises puros:
     los cálidos combinan con el oro, los fríos lo apagan) */
  --negro:#0D0D0D;         /* nav · footer            */
  --carbon:#1A1A1A;        /* hero · secciones        */
  --gris-oscuro:#555555;   /* texto muted             */
  --gris-calido:#E0DDD8;   /* bordes                  */
  --blanco-hueso:#F7F5F2;  /* fondo de página         */
  --blanco:#FFFFFF;        /* cards                   */

  /* Acento — oro champagne. SOLO donde hay acción o jerarquía. */
  --oro:#C9A84C;           /* botones · logo          */
  --oro-claro:#E8CC80;     /* hover · íconos          */
  --oro-oscuro:#8A6C1E;    /* activo · pressed        */

  /* Semánticos — los únicos colores fuera de la identidad, y solo para
     comunicar estado (nunca decoración). Los tintes son versiones cálidas,
     mezcladas hacia el blanco hueso, no pasteles fríos. */
  --verde:#2F5D2F;         --verde-tinte:#E9EFE6;   /* algo salió bien   */
  --rojo:#993535;          --rojo-tinte:#F7ECEC;    /* algo se anuló     */
  --oro-tinte:#FBF1D8;                              /* acento suave: badges y avisos */

  /* Fondo de las acciones secundarias en reposo. Es el oro claro llevado
     hacia el blanco hueso: tiene que leerse dorado de una, no casi blanco
     como el tinte de los badges. El blanco queda reservado para el clic. */
  --oro-suave:#F1E3B9;
  /* Mismo oro, un paso más oscuro. Va SOLO para texto e íconos sobre
     --oro-suave: con --oro-oscuro el contraste queda en 3,9:1 y la letra
     chica no se lee bien; con este llega a 5,7:1 y cumple AA. */
  --oro-texto:#6B5314;

  /* ---------------------------------------------------------------
     Superficies que van OSCURAS en los dos temas: la barra superior,
     la barra de módulos y el pie. Son oscuras por identidad, no por el
     tema, así que necesitan su propio par de variables.

     Sin esto se usaban `--negro`, `--carbon` y `--gris-calido`, que en
     el tema claro daban justo lo que hacía falta (fondo oscuro, texto
     claro) pero **se dan vuelta al invertir la paleta**: los enlaces
     del pie quedaban en 1,5:1 —invisibles— y la barra de módulos salía
     con fondo claro, porque `--carbon` pasa a ser el color del texto.
     --------------------------------------------------------------- */
  --sup-oscura:#0D0D0D;         /* barra superior y pie          */
  --sup-oscura-2:#1A1A1A;       /* barra de módulos: un paso más */
  --sup-oscura-borde:#2A2A2A;
  --sobre-oscura:#E6E2DB;       /* texto encima — 14,6:1         */
  --sobre-oscura-tenue:#9E988E; /* secundario   —  5,6:1         */

  --radius:12px;

  /* ---------------------------------------------------------------
     Bootstrap trae su propio azul (#0d6efd) y grises fríos. Acá se
     reemplazan por la paleta de la identidad, así los componentes del
     framework (checkboxes, pestañas, menús, enlaces, foco) salen en
     los colores del salón sin tener que pisar cada uno a mano.
     --------------------------------------------------------------- */
  --bs-body-bg:var(--blanco-hueso);
  --bs-body-color:var(--carbon);
  --bs-emphasis-color:var(--negro);
  --bs-border-color:var(--gris-calido);
  --bs-border-color-translucent:var(--gris-calido);
  --bs-secondary-color:var(--gris-oscuro);
  --bs-secondary-bg:var(--gris-calido);
  --bs-tertiary-bg:var(--blanco-hueso);
  --bs-tertiary-color:var(--gris-oscuro);

  --bs-primary:var(--oro);
  --bs-primary-rgb:201,168,76;

  /* Los enlaces usan el oro oscuro, que es casi marrón: se distingue
     del texto sin robarle protagonismo al oro de los botones. */
  --bs-link-color:var(--oro-oscuro);
  --bs-link-color-rgb:138,108,30;
  --bs-link-hover-color:var(--negro);

  --bs-focus-ring-color:rgba(201,168,76,.22);
  --bs-form-invalid-color:var(--rojo);
  --bs-form-invalid-border-color:var(--rojo);
}

/* =====================================================================
   Tema oscuro

   **No cambia ni una regla del sistema: sólo redefine las variables.**
   Todo lo demás —paneles, tablas, badges, botones— ya está escrito con
   `var(--…)`, así que cambia solo. Por eso acá no hay un solo selector
   de componente: si aparece uno, es que algo se escribió con un color
   suelto en vez de una variable, y eso es lo que hay que arreglar.

   EL ORO NO SE TOCA. Es la identidad del salón y se lee igual sobre
   claro que sobre oscuro; de hecho sobre oscuro luce más. Lo que se
   invierte son los neutros, y **siguen siendo cálidos**: un #1A1A1A
   tirando a marrón, no un gris azulado. Con neutros fríos el oro se
   apaga, que es justo lo que la identidad quiere evitar.

   Los tintes semánticos (verde, rojo, oro) sí necesitan versión propia:
   los claros son casi blancos y sobre un fondo oscuro se convierten en
   manchas. Se rehacen mezclando el color hacia el fondo, no hacia el
   blanco.
   ===================================================================== */
[data-tema="oscuro"]{
  /* --- Superficies, de más profunda a más cercana --- */
  --negro:#080807;          /* nav · footer: el plano de atrás     */
  --blanco-hueso:#14120F;   /* fondo de página                     */
  --blanco:#1E1B17;         /* cards: un paso por encima del fondo */
  --carbon:#EDE9E1;         /* texto principal                     */

  --gris-oscuro:#A9A39A;    /* texto muted — 7,1:1 sobre el fondo  */
  --gris-calido:#34302A;    /* bordes                              */

  /* --- Tintes rehechos hacia el fondo, no hacia el blanco --- */
  --oro-tinte:#2A2314;      /* avisos y badges con acento          */
  --verde-tinte:#16251A;    /* salió bien                          */
  --rojo-tinte:#2B1A1A;     /* se anuló                            */

  /* Los semánticos se aclaran: el verde y el rojo oscuros de la paleta
     clara no llegan al contraste mínimo sobre un fondo oscuro. */
  --verde:#7FBF7F;
  --rojo:#E08585;

  /* --- Acciones secundarias --- */
  /* `--oro-suave` era un fondo claro con texto oscuro; acá se da vuelta:
     fondo apagado y texto dorado. El hover sigue siendo el oro macizo,
     así que la jerarquía de tres pasos se mantiene igual. */
  --oro-suave:#3B3018;
  --oro-texto:#E8CC80;

  /* --- Barra superior, barra de módulos y pie ---
     Ya eran oscuras en el tema claro, así que sólo se profundizan un
     paso para que no queden pegadas al fondo de la página. El texto de
     encima NO cambia: sigue claro en los dos temas, que es justamente
     lo que se rompía cuando salía de `--gris-calido`. */
  --sup-oscura:#080807;
  --sup-oscura-2:#111010;
  --sup-oscura-borde:#2C2823;

  /* --- Lo que Bootstrap no toma de las variables de arriba --- */
  --bs-emphasis-color:var(--carbon);
  --bs-secondary-bg:#26221D;
  --bs-tertiary-bg:#1A1714;
  /* El oro oscuro casi no se ve sobre el fondo: los enlaces pasan al claro */
  --bs-link-color:var(--oro-claro);
  --bs-link-color-rgb:232,204,128;
  --bs-link-hover-color:#FFFFFF;
}

/* La barra superior ya es negra en el tema claro, así que en oscuro
   quedaría pegada al fondo. Se le deja un borde para que se despegue. */
[data-tema="oscuro"] .spg-topbar{border-bottom:1px solid var(--gris-calido);}

/* Las sombras suaves no se ven sobre fondo oscuro: lo que separa un
   panel del fondo pasa a ser el borde. */
[data-tema="oscuro"] .spg-panel,
[data-tema="oscuro"] .spg-card{box-shadow:none;border-color:var(--gris-calido);}

/* El navegador dibuja los controles nativos (fechas, horas, selects) con
   su propio esquema: sin esto, un campo de fecha sale blanco. */
[data-tema="oscuro"]{color-scheme:dark;}

/* Lo único que hay que repetir acá son los pocos lugares donde quedó un
   color escrito a mano en vez de una variable. Los bordes claros de las
   alertas y del checkbox se dibujaban sobre fondo blanco; sobre oscuro
   son marcos luminosos alrededor de un bloque apagado. Se apoyan en el
   color del propio mensaje, que ya cambia con el tema. */
[data-tema="oscuro"] .form-check-input{border-color:#4A443B;}
[data-tema="oscuro"] .alert-success{border-color:#2E4A32;}
[data-tema="oscuro"] .alert-danger{border-color:#4E2C2C;}
[data-tema="oscuro"] .alert-warning{border-color:#4A3B1C;color:var(--oro-texto);}
[data-tema="oscuro"] .alert-info{background:var(--bs-secondary-bg);}

*{box-sizing:border-box;}
body{
  background:var(--blanco-hueso);
  color:var(--carbon);
  font-family:-apple-system,"Segoe UI",system-ui,Roboto,sans-serif;
  min-height:100vh;
}

/* ---- Barra superior ---- */
.spg-topbar{
  background:var(--sup-oscura);
  padding:.7rem 1.4rem;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:1030;
}
.spg-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;}
.spg-logo{
  width:34px;height:34px;border-radius:9px;background:var(--oro);
  display:flex;align-items:center;justify-content:center;color:var(--negro);font-size:1.2rem;
}
.spg-brand-name{color:var(--oro);font-size:1.05rem;font-weight:500;letter-spacing:.3px;}
.spg-topbar .spg-user{color:var(--sobre-oscura);font-size:.85rem;display:flex;align-items:center;gap:.9rem;}
/* Sin restringir a "a": en la barra hay enlaces y también botones (Módulos),
   y un <button> no hereda el color, se queda con el del navegador. */
.spg-topbar .spg-user-link{
  color:var(--sobre-oscura);text-decoration:none;
  background:none;border:none;padding:0;font:inherit;line-height:1;
  display:inline-flex;align-items:center;gap:.35rem;transition:color .15s;
}
.spg-topbar .spg-user-link:hover,
.spg-topbar .spg-user-link:focus-visible,
.spg-topbar .spg-user-link[aria-expanded="true"]{color:var(--oro-claro);}
/* El rol se muestra con el oro en contorno, no en relleno: en la barra ya
   están el logo y el nombre del local en oro sólido, y tres bloques dorados
   juntos le quitan fuerza al acento. */
.spg-rol-chip{
  background:transparent;color:var(--oro-claro);border:1px solid var(--oro-oscuro);
  font-size:.72rem;font-weight:500;padding:.1rem .6rem;border-radius:20px;white-space:nowrap;
}

/* La sucursal en la que se está trabajando, al lado del nombre.
   Va RELLENA y el rol en contorno, y la diferencia no es capricho: el rol de
   una persona no cambia nunca, la sucursal cambia entre una sesión y la
   siguiente — y de ella dependen la agenda que ve, la caja que cierra y el
   stock que descuenta. Es lo que hay que poder leer sin buscar.
   El oro se usa acá porque esto es jerarquía, no adorno: es el dato que
   contesta «¿dónde estoy parado?». Sobre la barra oscura, `--oro` con texto
   `--negro` da 8,5:1. */
.spg-suc-chip{
  background:var(--oro);color:var(--negro);border:1px solid var(--oro-oscuro);
  font-size:.72rem;font-weight:600;padding:.1rem .6rem;border-radius:20px;white-space:nowrap;
}
.spg-suc-chip i{font-size:.75rem;}

/* El desplegable abierto se marca con el oro claro, igual que el hover */
.spg-modulos-btn{font-size:.85rem;cursor:pointer;}
.spg-modulos-btn::after{display:none;}
.spg-dropdown{--bs-dropdown-link-active-bg:var(--oro);font-size:.88rem;}
.spg-dropdown .dropdown-item i{width:1.3rem;color:var(--oro-oscuro);}

/* ---- Accesos rápidos ---- */
/* Atajos de navegación y altas rápidas. Son acción, así que van en oro, con
   tres estados bien distintos:
     reposo    oro suave + contorno oro   (se lee dorado de una)
     hover     oro macizo + texto negro   (igual que el botón principal)
     al tocar  blanco + texto negro       (confirma el clic con un destello)
   El contorno en reposo es lo que evita que compitan con el botón primario
   de la pantalla, que sí es oro macizo de entrada. */
.spg-chip{
  display:inline-flex;align-items:center;gap:.3rem;
  background:var(--oro-suave);border:1px solid var(--oro);border-radius:20px;
  padding:.2rem .7rem;font-size:.78rem;color:var(--oro-texto);text-decoration:none;
  transition:background .12s,color .12s,border-color .12s;white-space:nowrap;
}
.spg-chip:hover,.spg-chip:focus-visible{background:var(--oro);border-color:var(--oro-oscuro);color:var(--negro);}
.spg-chip:active{background:var(--blanco);border-color:var(--oro-oscuro);color:var(--negro);}
.spg-chip i{font-size:.85rem;}
/* Elegido y sigue elegido: el día y la hora que la clienta tocó en el selector
   de la agenda. Estaba escrito sólo anidado en `.agenda-grupo` y `.spg-atajos`,
   dos contenedores que ninguna vista dibuja, así que el JS ponía la clase y no
   la respondía nadie: se tocaba un día y no cambiaba nada en pantalla. */
.spg-chip.activo{background:var(--oro);border-color:var(--oro-oscuro);color:var(--negro);font-weight:600;}

/* Alta rápida dentro de un formulario: "Nuevo cliente", "Nueva sucursal",
   "Agregar fila". Mismo lenguaje que los chips. Se define con las variables
   de Bootstrap para que el estado activo del framework no lo pise. */
.btn-rapido{
  --bs-btn-bg:var(--oro-suave);
  --bs-btn-border-color:var(--oro);
  --bs-btn-color:var(--oro-texto);
  --bs-btn-hover-bg:var(--oro);
  --bs-btn-hover-border-color:var(--oro-oscuro);
  --bs-btn-hover-color:var(--negro);
  --bs-btn-active-bg:var(--blanco);
  --bs-btn-active-border-color:var(--oro-oscuro);
  --bs-btn-active-color:var(--negro);
  --bs-btn-disabled-bg:var(--blanco-hueso);
  --bs-btn-disabled-border-color:var(--gris-calido);
  --bs-btn-disabled-color:var(--gris-oscuro);
  font-weight:500;
}

/* ---- Migas / encabezado de página ---- */
.spg-page-head{padding:1.3rem 0 .3rem;}
.spg-page-head h1{font-size:1.3rem;font-weight:500;margin:0;}
.spg-page-head .sub{font-size:.85rem;color:var(--gris-oscuro);margin-top:.15rem;}
.spg-back{color:var(--oro-oscuro);text-decoration:none;font-size:.85rem;}
.spg-back:hover{text-decoration:underline;}

/* ---- Grilla de tarjetas de módulos ---- */
.spg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;padding:.6rem 0 2rem;}
.spg-card{
  background:var(--blanco);border:1px solid var(--gris-calido);border-radius:var(--radius);
  padding:1.1rem;text-decoration:none;color:var(--carbon);display:block;transition:border-color .15s,transform .15s;
}
.spg-card:hover{border-color:var(--oro);transform:translateY(-2px);}
.spg-card .ic{
  width:42px;height:42px;border-radius:10px;background:var(--blanco-hueso);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--gris-oscuro);
}
.spg-card:hover .ic{color:var(--oro-oscuro);}
.spg-card h3{font-size:1rem;font-weight:500;margin:.8rem 0 .35rem;}
.spg-card p{font-size:.78rem;color:var(--gris-oscuro);margin:0;line-height:1.5;}
/* La tarjeta oscura —Seguridad— es oscura en LOS DOS temas, por identidad, así
   que va con las variables que NO se invierten. Estaba escrita con `--carbon`
   y `--blanco-hueso`, que en el tema claro daban justo lo que hacía falta y se
   dan vuelta al invertir la paleta: el fondo pasaba a ser claro y el título
   también, y la tarjeta quedaba ilegible. Es el mismo error que dejó los
   enlaces del pie en 1,5:1 hasta la 7.2.1. */
.spg-card.dark{background:var(--sup-oscura-2);border-color:var(--sup-oscura-borde);}
.spg-card.dark .ic{background:var(--sup-oscura);color:var(--oro);}
.spg-card.dark h3{color:var(--sobre-oscura);}
.spg-card.dark p{color:var(--sobre-oscura-tenue);}
.spg-card.dark:hover{border-color:var(--oro);}
.spg-card.dark:hover .ic{color:var(--oro-claro);}

/* ---- Contenedores de contenido ---- */
.spg-panel{background:var(--blanco);border:1px solid var(--gris-calido);border-radius:var(--radius);padding:1.2rem;}

/* ---- Tablas ---- */
.table thead th{background:var(--blanco-hueso);color:var(--gris-oscuro);font-weight:500;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--gris-calido);}
.table td{vertical-align:middle;}

/* La fila que se venía a buscar: se llega a Emitir desde la agenda con una
   cita ya elegida, y entre cien filas iguales hay que poder encontrarla de un
   vistazo. Va en `--oro-tinte`, que es el de los avisos, no en `--oro-suave`,
   que es para fondos de acción: la fila no es un botón. */
.table tbody tr.spg-fila-elegida > td{background:var(--oro-tinte);}
.table tbody tr.spg-fila-elegida > td:first-child{box-shadow:inset 3px 0 0 var(--oro);}

/* ---- Botones ---- */
.btn-oro{background:var(--oro);border:none;color:var(--negro);font-weight:500;}
.btn-oro:hover{background:var(--oro-oscuro);color:var(--blanco);}
.btn-outline-neutro{background:var(--blanco);border:1px solid var(--gris-calido);color:var(--gris-oscuro);}
.btn-outline-neutro:hover{border-color:var(--gris-oscuro);color:var(--carbon);}
/* Sirve tanto para <a> como para <button class="btn btn-link link-oro"> */
.link-oro{color:var(--oro-oscuro);text-decoration:none;}
.link-oro:hover,.link-oro:focus{color:var(--oro-oscuro);text-decoration:underline;}

/* ---- Badges de estado ---- */
.badge-estado{font-size:.72rem;font-weight:500;padding:.2rem .6rem;border-radius:20px;display:inline-block;}
/* El oro se reserva para el estado VIVO (En proceso): es lo único que está
   pasando ahora y lo que merece la mirada. Lo que está simplemente agendado
   o cerrado va en neutros cálidos, y el resultado (bien / anulado) en los
   semánticos. Así el badge dorado señala algo, en vez de ser decoración. */
.e-ok{background:var(--verde-tinte);color:var(--verde);}
.e-prog{background:var(--blanco-hueso);color:var(--gris-oscuro);box-shadow:inset 0 0 0 1px var(--gris-calido);}
.e-proc{background:var(--oro-tinte);color:var(--oro-oscuro);font-weight:600;}
.e-warn{background:transparent;color:var(--oro-oscuro);box-shadow:inset 0 0 0 1px var(--oro);}
.e-no{background:var(--rojo-tinte);color:var(--rojo);}
.e-muted{background:var(--gris-calido);color:var(--gris-oscuro);}

/* ---- Barra de caja del panel ---- */
.spg-caja-barra{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:var(--blanco);border:1px solid var(--gris-calido);border-left:4px solid var(--oro);
  border-radius:var(--radius);padding:.75rem 1rem;margin-top:.9rem;
}
.spg-caja-estado{display:flex;align-items:center;gap:.6rem;font-size:.87rem;flex-wrap:wrap;}
.spg-caja-estado > i{font-size:1.3rem;color:var(--oro-oscuro);}
.spg-caja-saldo{font-weight:500;color:var(--oro-oscuro);background:var(--blanco-hueso);
  border-radius:20px;padding:.1rem .7rem;font-size:.85rem;}

/* ---- Métricas del dashboard ---- */
.spg-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:.4rem;}
.spg-metric{background:var(--blanco);border:1px solid var(--gris-calido);border-radius:var(--radius);padding:1rem 1.1rem;}
.spg-metric .lbl{font-size:.75rem;color:var(--gris-oscuro);text-transform:uppercase;letter-spacing:.03em;}
.spg-metric .val{font-size:1.6rem;font-weight:500;margin-top:.2rem;}
.spg-metric .val.oro{color:var(--oro-oscuro);}

/* Variante compacta: para un informe con siete números seguidos, la tarjeta
   normal ocupa demasiado alto. El rótulo deja de ir en mayúsculas —que obliga
   a partirlo— y el número baja de 1.6 a 1.25rem, que sigue lejísimos del
   texto de al lado. */
.spg-metrics-compacto{grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:.55rem;}
.spg-metrics-compacto .spg-metric{padding:.55rem .7rem;}
.spg-metrics-compacto .lbl{text-transform:none;letter-spacing:0;font-size:.76rem;line-height:1.25;}
.spg-metrics-compacto .val{font-size:1.25rem;margin-top:.1rem;}

/* ---- Cuánto va sumando (Registrar atención) ---- */
.spg-suma-at{margin-top:.7rem;padding:.6rem .8rem;border:1px solid var(--gris-calido);
    border-radius:var(--radius);background:var(--blanco);}
.spg-suma-fila{display:flex;justify-content:space-between;align-items:baseline;
    gap:1rem;font-size:.85rem;padding:.15rem 0;}
.spg-suma-total{border-top:1px solid var(--gris-calido);margin-top:.3rem;
    padding-top:.4rem;font-size:.95rem;}

/* ---- Falta cargar (panel) ----
   El nivel se pinta con lo que cada color ya significa en esta paleta, no con
   uno nuevo: el rojo semántico para lo que impide, `--oro-tinte` —que la
   identidad reserva justamente para los AVISOS— para lo que hace decidir
   distinto, y neutros cálidos para lo que sólo conviene. Así el renglón que
   hay que mirar primero se lee sin tener que aprender un código de colores. */
.spg-falta{display:flex;gap:.6rem;align-items:flex-start;padding:.45rem 0;
    border-top:1px solid var(--gris-calido);}
.spg-falta:first-child{border-top:0;}
.spg-falta-txt{flex:1 1 auto;font-size:.85rem;line-height:1.35;}
.spg-falta-donde{font-size:.78rem;}
.spg-falta-nivel{flex:0 0 auto;min-width:5.2rem;text-align:center;
    font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;
    padding:.15rem .45rem;border-radius:999px;border:1px solid transparent;
    margin-top:.1rem;}
.spg-falta-impide{background:var(--rojo-tinte);color:var(--rojo);border-color:var(--rojo);}
.spg-falta-confunde{background:var(--oro-tinte);color:var(--oro-texto);border-color:var(--oro);}
.spg-falta-conviene{background:transparent;color:var(--gris-oscuro);border-color:var(--gris-calido);}

/* ---- Login ---- */
/* `column` no es un detalle: los avisos de `auth/marco` se dibujan como
   hermanos de la tarjeta, así que en fila quedaban PEGADOS A SU IZQUIERDA,
   fuera del recuadro y contra el margen. «Ese nombre de usuario ya está en
   uso» aparecía en el borde de la pantalla, lejos del campo que lo causó. */
.spg-login-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;gap:.75rem;}
.spg-login{background:var(--blanco);border:1px solid var(--gris-calido);border-radius:16px;padding:2rem;width:100%;max-width:390px;}
/* Mismo ancho que la tarjeta, para que se lean como una sola pieza. */
.spg-login-wrap > .alert{width:100%;max-width:390px;margin-bottom:0;}
.spg-login .logo-big{width:56px;height:56px;border-radius:14px;background:var(--oro);display:flex;align-items:center;
  justify-content:center;color:var(--negro);font-size:1.9rem;margin:0 auto 1rem;}

/* ---- Form ---- */
.form-label{font-size:.82rem;color:var(--gris-oscuro);font-weight:500;}
.form-control:focus,.form-select:focus{border-color:var(--oro);box-shadow:0 0 0 .18rem rgba(201,168,76,.18);}

/* =====================================================================
   Componentes de Bootstrap que traen el azul compilado y no salen con
   variables. Se pisan uno por uno para que no quede nada frío.
   ===================================================================== */

/* Casillas, radios e interruptores: marcados en oro, no en azul */
.form-check-input{border-color:#c9c4bc;}
.form-check-input:checked{background-color:var(--oro);border-color:var(--oro-oscuro);}
.form-check-input:focus{border-color:var(--oro);box-shadow:0 0 0 .18rem rgba(201,168,76,.22);}
.form-check-input:focus:not(:checked){background-image:none;}

/* Pestañas tipo pastilla (Cargar stock) *

/* Menú desplegable de módulos */
.dropdown-menu{
  --bs-dropdown-bg:var(--blanco);
  --bs-dropdown-border-color:var(--gris-calido);
  --bs-dropdown-link-color:var(--carbon);
  --bs-dropdown-link-hover-bg:var(--blanco-hueso);
  --bs-dropdown-link-hover-color:var(--oro-oscuro);
  --bs-dropdown-link-active-bg:var(--oro);
  --bs-dropdown-link-active-color:var(--negro);
  --bs-dropdown-divider-bg:var(--gris-calido);
}

/* Foco: anillo dorado tenue en vez del azul */
.btn:focus-visible,.btn-close:focus,.form-check-input:focus-visible,.accordion-button:focus{
  box-shadow:0 0 0 .18rem rgba(201,168,76,.22)!important;outline:none;
}
.btn-oro:focus-visible{box-shadow:0 0 0 .2rem rgba(138,108,30,.35)!important;}

/* Tablas y tarjetas sobre neutros cálidos */
.table{
  --bs-table-bg:transparent;
  --bs-table-color:var(--carbon);
  --bs-table-border-color:var(--gris-calido);
  --bs-table-striped-bg:var(--blanco-hueso);
  --bs-table-hover-bg:var(--blanco-hueso);
}
.card,.modal-content,.list-group-item{
  background-color:var(--blanco);border-color:var(--gris-calido);
}
.modal-header,.modal-footer{border-color:var(--gris-calido);}

/* Avisos: los mismos tonos que los badges de estado, sin colores nuevos */
.alert{border-radius:var(--radius);border-width:1px;}
.alert-success{background:var(--verde-tinte);border-color:#CBDCC6;color:var(--verde);}
.alert-danger{background:var(--rojo-tinte);border-color:#E8D2D2;color:var(--rojo);}
.alert-warning{background:var(--oro-tinte);border-color:#EEDDB4;color:var(--oro-oscuro);}
.alert-info{background:var(--blanco-hueso);border-color:var(--gris-calido);color:var(--gris-oscuro);}

/* Texto secundario, siempre en el gris cálido de la identidad.
   #C9C4BC y #A8A29A son el gris cálido llevado a más contraste para
   bordes de control y placeholder: siguen siendo cálidos, no fríos. */
.form-text,.text-muted{color:var(--gris-oscuro)!important;}
.input-group-text{background:var(--blanco-hueso);border-color:var(--gris-calido);color:var(--gris-oscuro);}
.form-control,.form-select{border-color:var(--gris-calido);color:var(--carbon);}
.form-control::placeholder{color:#A8A29A;}
.form-control:disabled,.form-select:disabled{background:var(--blanco-hueso);}

/* ---- Utilidades ---- */
.text-muted-warm{color:var(--gris-oscuro)!important;}
/* Para no escribir colores a mano en las vistas */
.txt-ok{color:var(--verde);}
.txt-no{color:var(--rojo);}
.txt-oro{color:var(--oro-oscuro);}

/* ---- Selector de disponibilidad ----
   Los días y las horas son atajos de navegación, así que usan el nivel
   secundario del oro (.spg-chip) con sus tres estados. El elegido queda en
   oro macizo, que es lo único seleccionado de la pantalla. *
.agenda-aviso{margin:.3rem 0;}

/* ---- Comprobante (detalle e impresión de factura) ----
   El oro aparece solo en el número del comprobante y en el total: son los dos
   datos que se buscan primero. El resto va en los neutros cálidos. */
.spg-comprobante{border-top:3px solid var(--oro);position:relative;}
/* Sello de anulada: no debe poder confundirse con un comprobante válido *

/* ---- Impresión ----
   Se imprime solo el comprobante: fuera la barra superior, los accesos rápidos,
   los botones y el listado de cobros (que es información interna). */
@media print{
  /* **Todo lo que sirve para navegar sobra en el papel.** `.spg-nav` no
     estaba en esta lista, así que la barra de módulos y su desplegable
     salían impresos encima del comprobante: en la hoja aparecían «Panel ·
     Citas · Clientes · Tesorería» y los enlaces del menú, que en pantalla
     el hover mantiene ocultos pero al imprimir se dibujan todos. */
  .spg-topbar,.spg-nav,.spg-nav-menu,.spg-migas,
  .no-imprimir,.alert,footer,.spg-footer{display:none !important;}
  body{background:var(--blanco);}
  main.container{padding:0 !important;max-width:100% !important;}
  .spg-comprobante{border:none;padding:0;}
  a[href]:after{content:none !important;}
  .table{font-size:.82rem;}
}

/* ---- Responsive (móviles) ---- */
html,body{max-width:100%;overflow-x:hidden;}
@media (max-width:768px){
  .spg-cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem;}
}
@media (max-width:576px){
  .spg-topbar{padding:.6rem .9rem;}
  .spg-brand-name{font-size:.95rem;}
  .spg-user{gap:.55rem;font-size:.8rem;}
  .spg-user .spg-user-nombre{display:none;}      /* en móvil, solo ícono + rol + salir */
  .spg-page-head h1{font-size:1.15rem;}
  .spg-cards{grid-template-columns:1fr 1fr;gap:.6rem;}
  .spg-card{padding:.9rem;}
  .spg-card .ic{width:38px;height:38px;font-size:1.2rem;}
  .spg-card h3{font-size:.92rem;margin-top:.6rem;}
  .spg-card p{font-size:.72rem;}
  .spg-metric .val{font-size:1.35rem;}
  .spg-panel{padding:.9rem;}
  .table{font-size:.85rem;}
  .btn{font-size:.9rem;}
}
@media (max-width:380px){
  .spg-cards{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------------------
   Móvil: que la cabecera y la barra respiren.

   Las dos son pegajosas y se apilan, así que en una pantalla de 5" se
   comían un tercio del alto útil antes de mostrar nada. El encabezado
   traía el padding del escritorio, la barra de módulos el suyo, y entre
   la ficha de la sucursal y la del rol la fila se desbordaba.

   Nada de esto esconde información: lo que se achica es el aire, y lo
   único que se oculta —el subtítulo «SISTEMA DE GESTIÓN»— es decorativo
   y está repetido en el pie.
   --------------------------------------------------------------------- */
@media (max-width:576px){
  .spg-topbar{padding:.45rem .7rem;gap:.5rem;}
  .spg-brand{gap:.45rem;}
  .spg-brand-sub{display:none;}          /* decorativo: el pie lo repite */
  .spg-brand-name{font-size:.9rem;}

  /* La barra queda pegada a la cabecera achicada, no a los 52 px de antes:
     con el valor viejo dejaba una franja muerta encima. */
  .spg-nav{top:44px;}
  .spg-nav-in{padding:0 .4rem;gap:0;}
  .spg-nav-item{padding:.45rem .55rem;font-size:.78rem;gap:.28rem;}

  /* La ficha del rol sale: la sucursal es lo que cambia entre sesiones y
     por eso es la que se queda (7.31.1). El rol sigue en Mi cuenta. */
  .spg-rol-chip{display:none;}

  /* El scroll horizontal de la barra sin la barrita gris encima, que en
     táctil no hace falta y roba 6 px de alto. */
  .spg-nav-in::-webkit-scrollbar{display:none;}
  .spg-nav-in{scrollbar-width:none;}
}

/* ---------------------------------------------------------------------
   Días de la semana de un turno
   Es una casilla marcada, no un atajo: por eso usa el oro de
   .form-check-input:checked y no los tres estados de .spg-chip.
   La casilla real queda oculta pero sigue ahí, así el teclado y el lector
   de pantalla la encuentran igual.
   --------------------------------------------------------------------- */
.spg-dias{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;}
.spg-horas{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;}

/* ---- Selector de agenda: que el día no se confunda con la hora ----
   Eran dos listas de fichas idénticas, una debajo de la otra, y no se
   distinguía cuál se estaba tocando. Ahora cada lista lleva su rótulo
   numerado y las horas van en contorno en vez de relleno — el nivel
   terciario de la escala del oro, que ya existe para «información con
   jerarquía, no acción». El oro no cambia: cambia el peso. */
.spg-agenda-rotulo{
  flex-basis:100%;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--gris-oscuro);margin-bottom:.1rem;
}
.spg-chip-hora{
  background:transparent;border-color:var(--oro-oscuro);color:var(--oro-texto);
  font-variant-numeric:tabular-nums;
}
/* Al elegirla se llena, igual que el día: es la confirmación de qué quedó
   tocado, y sin eso las dos listas vuelven a parecerse. */
.spg-chip-hora:hover,.spg-chip-hora:focus-visible,.spg-chip-hora.activo{
  background:var(--oro);border-color:var(--oro-oscuro);color:var(--negro);
}
.spg-dia{cursor:pointer;user-select:none;}
.spg-dia input{position:absolute;opacity:0;width:0;height:0;}
.spg-dia span{
  display:inline-block;min-width:2.6rem;text-align:center;
  border:1px solid var(--gris-calido);border-radius:20px;
  padding:.22rem .55rem;font-size:.78rem;color:var(--gris-oscuro);
  background:var(--blanco);transition:.12s;
}
.spg-dia input:checked + span{
  background:var(--oro-suave);border-color:var(--oro);color:var(--oro-texto);font-weight:600;
}
.spg-dia input:focus-visible + span{outline:2px solid var(--oro);outline-offset:2px;}
.spg-dia:hover span{border-color:var(--oro);}

/* =====================================================================
   PROTOTIPO DE LISTADO
   Migas · encabezado · barra de filtros · paginación.
   Las tres piezas salen de parciales de layout/, así que este bloque es
   el único lugar donde se les toca el aspecto: cambiarlo acá lo cambia
   en las treinta pantallas.
   ===================================================================== */

/* ---- Migas de pan: dónde estoy y cómo vuelvo ---- */
.spg-migas{
  display:flex;align-items:center;flex-wrap:wrap;gap:.3rem;
  font-size:.78rem;color:var(--gris-oscuro);padding:.55rem 0 .1rem;
}
.spg-migas a{color:var(--gris-oscuro);text-decoration:none;display:inline-flex;align-items:center;gap:.28rem;}
.spg-migas a:hover,.spg-migas a:focus-visible{color:var(--oro-oscuro);text-decoration:underline;}
.spg-migas span[aria-current]{color:var(--carbon);font-weight:500;}
.spg-miga-sep{font-size:.62rem;color:var(--gris-calido);}

/* ---- Encabezado de pantalla ---- */
.spg-head-flex{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:.8rem;}
.spg-head-txt{min-width:0;}
.spg-head-acciones{display:flex;gap:.5rem;flex-wrap:wrap;}

/* ---- Barra de filtros ---- */
.spg-filtros{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem;
  background:var(--blanco-hueso);border:1px solid var(--gris-calido);
  border-radius:var(--radius);padding:.75rem .9rem;margin-bottom:1rem;
}
.spg-filtros .form-label{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--gris-oscuro);margin-bottom:.2rem;font-weight:500;
}
.spg-filtro{min-width:130px;}
.spg-filtro-btns{display:flex;gap:.4rem;align-items:center;padding-bottom:.05rem;margin-left:auto;}
/* El aviso va en --oro-tinte, no en --oro-suave: es información, no acción.
   (Ver la regla del oro: el tinte es para badges y avisos.) */
.spg-filtro-aviso{
  flex-basis:100%;font-size:.75rem;color:var(--oro-oscuro);
  background:var(--oro-tinte);border-radius:6px;padding:.25rem .6rem;
  display:inline-flex;align-items:center;gap:.35rem;width:fit-content;
}

/* ---- Pie del listado: conteo + páginas ---- */
.spg-paginacion{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.7rem;
  border-top:1px solid var(--gris-calido);margin-top:.2rem;padding-top:.8rem;
}
.spg-pag-conteo{font-size:.82rem;color:var(--gris-oscuro);}
.spg-pag-conteo strong{color:var(--carbon);font-variant-numeric:tabular-nums;}
.spg-pag-botones{display:flex;gap:.25rem;flex-wrap:wrap;}
.spg-pag{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2rem;height:2rem;padding:0 .45rem;
  border:1px solid var(--gris-calido);border-radius:7px;background:var(--blanco);
  color:var(--gris-oscuro);text-decoration:none;font-size:.82rem;
  font-variant-numeric:tabular-nums;transition:.12s;
}
.spg-pag:hover,.spg-pag:focus-visible{border-color:var(--oro);color:var(--oro-texto);background:var(--oro-suave);}
/* La página actual es jerarquía, no adorno: por eso lleva el oro macizo */
.spg-pag.activo{background:var(--oro);border-color:var(--oro-oscuro);color:var(--negro);font-weight:600;}
.spg-pag.inactivo{opacity:.4;pointer-events:none;}
.spg-pag-puntos{color:var(--gris-oscuro);padding:0 .15rem;align-self:center;font-size:.8rem;}

/* ---- Fila vacía de una tabla ---- */
/* ---------------------------------------------------------------
   Tarjetas de servicio al reservar, con su imagen de referencia.

   **La tarjeta entera es un `<label>`**, así que marca el checkbox sin
   JavaScript: con `app.js` caído se sigue pudiendo reservar.

   El oro va SÓLO en la elegida —borde y marca— que es donde hay jerarquía;
   el resto queda en neutros cálidos. Si el oro estuviera en las quince
   tarjetas, la elegida dejaría de distinguirse.
   --------------------------------------------------------------- */
.spg-srv-grid{display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));}

.spg-srv-card{display:flex;flex-direction:column;cursor:pointer;
  border:1px solid var(--gris-calido);border-radius:10px;overflow:hidden;
  background:var(--blanco);transition:border-color .15s,box-shadow .15s;}
.spg-srv-card:hover{border-color:var(--oro-claro);}
.spg-srv-card.elegida{border-color:var(--oro);box-shadow:0 0 0 2px var(--oro-suave);}

/* `aspect-ratio` y no una altura fija: así la grilla no se desalinea cuando
   una foto viene más alta que otra. */
.spg-srv-img{position:relative;aspect-ratio:4/3;background:var(--blanco-hueso);
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
.spg-srv-img img{width:100%;height:100%;object-fit:cover;display:block;}

.spg-srv-sinimg{display:flex;flex-direction:column;align-items:center;gap:.2rem;
  color:var(--gris-oscuro);text-align:center;padding:.5rem;}
.spg-srv-sinimg i{font-size:1.5rem;opacity:.5;}
.spg-srv-sinimg span{font-size:.68rem;line-height:1.2;}

/* El check va sobre la imagen, no debajo del texto: es lo que se toca y tiene
   que verse sin buscarlo. */
.spg-srv-check{position:absolute;top:.4rem;left:.4rem;width:1.15rem;height:1.15rem;
  box-shadow:0 0 0 2px var(--blanco);}

.spg-srv-cuerpo{padding:.5rem .6rem .6rem;display:flex;flex-direction:column;gap:.15rem;}
.spg-srv-nombre{font-size:.87rem;font-weight:500;line-height:1.25;}
.spg-srv-desc{font-size:.74rem;color:var(--gris-oscuro);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.spg-srv-precio{font-size:1rem;font-weight:600;color:var(--oro-texto);}
.spg-srv-dur{font-size:.73rem;color:var(--gris-oscuro);}

/* La miniatura de la ficha del servicio, donde se sube la imagen. */
.spg-srv-mini{width:120px;height:90px;object-fit:cover;border-radius:8px;
  border:1px solid var(--gris-calido);}

/* Los pasos numerados de un formulario largo. El número va en oro suave y no
   en oro macizo: es jerarquía, no acción — el oro lleno se reserva para lo que
   hay que apretar. */
.spg-paso{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;
  padding-top:.35rem;border-top:1px solid var(--gris-calido);}
.spg-paso:first-of-type{border-top:none;padding-top:0;}
.spg-paso-n{display:inline-flex;align-items:center;justify-content:center;
  width:1.4rem;height:1.4rem;border-radius:50%;flex:0 0 auto;
  background:var(--oro-suave);color:var(--oro-texto);
  font-size:.78rem;font-weight:600;}
.spg-paso-t{font-size:.92rem;font-weight:600;}

/* A dónde transferir la seña. Va en neutros y NO en oro: es un dato para
   copiar, no una acción ni una jerarquía — el oro se reserva para lo que hay
   que tocar. El número sí va en monoespaciada, que es lo que hace que no se
   copie mal un dígito. */
.spg-cuentas-tit{font-size:.82rem;font-weight:600;color:var(--gris-oscuro);
  margin-bottom:.4rem;}
.spg-cuenta{border:1px solid var(--gris-calido);border-radius:8px;
  padding:.55rem .7rem;margin-bottom:.45rem;background:var(--blanco-hueso);}
.spg-cuenta:last-child{margin-bottom:0;}
.spg-cuenta-cab{font-size:.86rem;}
.spg-cuenta-nro{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.02rem;letter-spacing:.02em;word-break:break-all;margin:.1rem 0;}
.spg-cuenta-pie{font-size:.79rem;color:var(--gris-oscuro);}
.spg-cuenta-obs{font-size:.79rem;color:var(--gris-oscuro);margin-top:.25rem;
  padding-top:.25rem;border-top:1px dashed var(--gris-calido);}

.spg-vacio{text-align:center;color:var(--gris-oscuro);padding:2.2rem 1rem;}
.spg-vacio i{font-size:1.7rem;color:var(--gris-calido);display:block;margin-bottom:.4rem;}
.spg-vacio .t{font-size:.92rem;color:var(--carbon);margin-bottom:.15rem;}
.spg-vacio .d{font-size:.8rem;}

/* Resumen de lo que está mostrando el filtro (total cobrado, stock actual…).
   Va en oro tinte porque informa, no es un botón. *

/* Aviso de bloque (caja cerrada, sin timbrado…). El color del borde
   izquierdo es el que comunica: rojo si algo está mal, oro si es un aviso. *

/* ---- Informes: atajos de período y cabecera de bloque ---- *

/* =====================================================================
   ENCABEZADO, NAVEGACIÓN Y PIE
   ===================================================================== */

/* ---- Marca con bajada ---- */
.spg-brand-txt{display:flex;flex-direction:column;line-height:1.15;}
.spg-brand-sub{font-size:.68rem;color:var(--gris-oscuro);letter-spacing:.04em;text-transform:uppercase;}

/* Cabecera del desplegable de la cuenta */
.spg-drop-cabecera{display:flex;flex-direction:column;line-height:1.3;padding:.25rem 1rem;}
.spg-drop-cabecera strong{font-size:.88rem;color:var(--carbon);}
.spg-drop-cabecera span{font-size:.75rem;color:var(--gris-oscuro);}

/* ---- Panel de navegación: los módulos siempre a la vista ----
   Va en carbón, un escalón más claro que la barra negra de arriba, para que
   se lean como dos niveles y no como una sola franja negra. El módulo actual
   se marca con el oro: es jerarquía —dónde estoy—, no decoración. */
.spg-nav{background:var(--sup-oscura-2);border-bottom:1px solid var(--sup-oscura-borde);position:sticky;top:52px;z-index:1020;}
.spg-nav-in{
  display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:thin;
  max-width:1320px;margin:0 auto;padding:0 .8rem;
}
.spg-nav-item{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  padding:.6rem .8rem;color:var(--sobre-oscura);text-decoration:none;font-size:.82rem;
  border-bottom:2px solid transparent;transition:color .13s,border-color .13s;
}
.spg-nav-item i{font-size:.95rem;opacity:.85;}
.spg-nav-item:hover,.spg-nav-item:focus-visible{color:var(--oro-claro);}
.spg-nav-item.activo{color:var(--oro);border-bottom-color:var(--oro);font-weight:500;}
.spg-nav-item.activo i{opacity:1;}

/* ---- El módulo se abre al pasar el mouse ----
   Llegar a una pantalla eran dos clics con una tarjeta de por medio, y eso se
   hace veinte veces por día. El desplegable es un ATAJO: el enlace del módulo
   sigue llevando a su tarjeta, así que nada depende de que esto funcione.

   Tres decisiones que no son adorno y conviene no perder al tocarlo:

   · **Se abre con CSS, no con JavaScript.** Si `app.js` no cargó, la barra
     sigue navegando igual — la misma regla que la salida de la pantalla de la
     huella.
   · **Sólo donde hay mouse de verdad** (`hover:hover`). En una pantalla táctil
     el hover no existe y el navegador lo emula con el primer toque: tocar
     «Clientes» abriría el menú en vez de entrar al módulo, o sea que el atajo
     rompería la navegación normal. Ahí la barra se queda como estaba.
   · **`overflow` vuelve a `visible` en ese caso.** `.spg-nav-in` scrollea en
     horizontal para las pantallas angostas, y un desplegable dentro de un
     contenedor con overflow se recorta: se vería la primera línea y nada más. */
@media (hover:hover) and (min-width:768px) {
  .spg-nav-in{overflow:visible;}
  .spg-nav-grupo{position:relative;display:inline-flex;}
  .spg-nav-flecha{font-size:.6rem !important;opacity:.5 !important;margin-left:-.15rem;
                  transition:transform .13s,opacity .13s;}
  .spg-nav-grupo:hover .spg-nav-flecha,
  .spg-nav-grupo:focus-within .spg-nav-flecha{opacity:.9 !important;transform:rotate(180deg);}

  .spg-nav-menu{
    position:absolute;top:100%;left:0;min-width:210px;z-index:1030;
    background:var(--sup-oscura);border:1px solid var(--sup-oscura-borde);
    border-top:2px solid var(--oro);border-radius:0 0 6px 6px;
    box-shadow:0 8px 24px rgba(0,0,0,.35);padding:.3rem;
    /* Oculto pero enfocable no sirve: `display:none` saca los enlaces del
       recorrido del teclado y `:focus-within` no podría dispararse nunca. */
    /* `visibility:hidden` y no `display:none` para poder animarlo. Los dos
       sacan los enlaces del recorrido del teclado, y está bien que así sea: el
       menú cerrado no es navegable. Lo que hace andar el teclado es que el
       disparador de `:focus-within` es el enlace del módulo, que SIEMPRE es
       visible y enfocable — al llegarle con Tab el menú se abre y recién
       entonces sus enlaces entran al recorrido. */
    opacity:0;visibility:hidden;transform:translateY(-4px);
    transition:opacity .13s,transform .13s,visibility .13s;
  }
  .spg-nav-grupo:hover .spg-nav-menu,
  .spg-nav-grupo:focus-within .spg-nav-menu{opacity:1;visibility:visible;transform:none;}

  .spg-nav-menu a{
    display:flex;align-items:center;gap:.55rem;white-space:nowrap;
    padding:.45rem .6rem;border-radius:4px;
    color:var(--sobre-oscura);text-decoration:none;font-size:.8rem;
  }
  .spg-nav-menu a i{font-size:.9rem;opacity:.7;width:1rem;text-align:center;}
  .spg-nav-menu a:hover,.spg-nav-menu a:focus-visible{background:var(--sup-oscura-2);color:var(--oro-claro);}
  .spg-nav-menu a:hover i,.spg-nav-menu a:focus-visible i{opacity:1;}
  .spg-nav-menu a.activo{color:var(--oro);font-weight:500;}
  .spg-nav-menu a.activo i{opacity:1;}

  /* El último módulo queda pegado al borde derecho: su menú se alinea al
     revés para no salirse de la pantalla. */
  .spg-nav-grupo:last-child .spg-nav-menu{left:auto;right:0;}

  /* ---- El submenú que abre AL COSTADO ----
     Tesorería tiene ocho pantallas y con los rótulos intercalados el menú
     medía doce renglones para elegir uno. Agrupado son cuatro —Facturación,
     Cobros, Caja, Pagos— y cada uno abre su división a un costado, que es lo
     que pidió el usuario. El grupo de una sola pantalla no abre nada: se
     dibuja como enlace directo (lo decide el marcado, no el CSS). */
  .spg-nav-sub-wrap{position:relative;}
  .spg-nav-sub-flecha{margin-left:auto;font-size:.65rem !important;opacity:.45 !important;}
  .spg-nav-sub-wrap:hover .spg-nav-sub-flecha,
  .spg-nav-sub-wrap:focus-within .spg-nav-sub-flecha{opacity:.9 !important;}
  .spg-nav-sub{
    position:absolute;left:100%;top:-.3rem;min-width:13rem;
    background:var(--sup-oscura);border:1px solid var(--sup-oscura-borde);
    border-radius:var(--radius);padding:.3rem 0;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
    opacity:0;visibility:hidden;transform:translateX(-4px);
    transition:opacity .12s ease,transform .12s ease;z-index:1;}
  .spg-nav-sub-wrap:hover>.spg-nav-sub,
  .spg-nav-sub-wrap:focus-within>.spg-nav-sub{opacity:1;visibility:visible;transform:none;}
  /* Si el módulo cae a la derecha de la pantalla, su submenú también se da
     vuelta: si no, se sale por el borde y no se puede leer. */
  .spg-nav-grupo:last-child .spg-nav-sub{left:auto;right:100%;transform:translateX(4px);}
  .spg-nav-grupo:last-child .spg-nav-sub-wrap:hover>.spg-nav-sub{transform:none;}
}

@media (prefers-reduced-motion:reduce) {
  .spg-nav-menu,.spg-nav-flecha,.spg-nav-sub{transition:none;}
}

/* ---- Pie ---- */
.spg-footer{background:var(--sup-oscura);color:var(--sobre-oscura);margin-top:2.5rem;}
/* Las secciones van en tres columnas, no en una lista larga: apiladas
   estiraban el pie y dejaban una franja negra enorme abajo. */
/* Con solo dos bloques, una grilla a lo ancho de 1320px los tiraba contra los
   bordes opuestos y dejaba un vacío enorme en el medio. Se los trata como un
   par centrado y con ancho acotado: se leen juntos, sin hueco. */
.spg-footer-in{
  max-width:1240px;margin:0 auto;padding:1.7rem 1.2rem 1.1rem;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:1.5rem 2.5rem;
}
.spg-footer-marca{flex:0 1 230px;}
.spg-footer-secciones{flex:0 1 440px;}
.spg-footer-ayuda{flex:0 1 200px;}
.spg-footer-version{flex:0 1 160px;}
.spg-footer-col h3{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--oro);margin:0 0 .6rem;font-weight:600;
}
.spg-footer-col ul{list-style:none;margin:0;padding:0;}
.spg-footer-col li{margin-bottom:.3rem;font-size:.82rem;}
.spg-footer-col a{color:var(--sobre-oscura);text-decoration:none;}
.spg-footer-col a:hover,.spg-footer-col a:focus-visible{color:var(--oro-claro);text-decoration:underline;}
/* 3 columnas: con 8 secciones quedan 3 + 3 + 2.
   `minmax(0,1fr)` y no `1fr` a secas: dentro de un contenedor que se encoge,
   `1fr` se resuelve como max-content y cada columna toma el ancho de su enlace
   más largo, así que los nombres quedaban desparejos en vez de alineados. */
.spg-footer-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.2rem 1rem;width:100%;
}
.spg-footer-logo{
  display:flex;align-items:center;gap:.45rem;
  color:var(--oro);font-size:1rem;font-weight:500;margin-bottom:.35rem;
}
.spg-footer-tcc{font-size:.75rem;color:var(--sobre-oscura-tenue);margin:0;max-width:30ch;line-height:1.45;}
/* El rótulo va centrado sobre la grilla de enlaces, no pegado al borde de la
   columna. Se centra con flex y no con text-align para que el eje sea el mismo
   para los dos: si se centrara cada uno por su cuenta respecto de la columna,
   el título quedaría corrido cuando la grilla no ocupa todo el ancho. */
.spg-footer-secciones{display:flex;flex-direction:column;align-items:center;}
.spg-footer-secciones h3{text-align:center;}
/* El contacto es una acción —abre el chat—, así que lleva el ícono en oro.
   El texto se queda en el neutro del pie: si el renglón entero fuera dorado
   competiría con el rótulo de la columna. */
.spg-contacto{display:inline-flex;align-items:center;gap:.4rem;}
.spg-contacto i{color:var(--oro);font-size:.95rem;}
.spg-contacto:hover i,.spg-contacto:focus-visible i{color:var(--oro-claro);}

/* Versión del sistema. El número va en oro porque es jerarquía —es el dato
   del bloque—, y la fecha en el gris del pie. */
.spg-version-nro{
  color:var(--oro);font-size:1.05rem;font-weight:500;
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.spg-version-fecha{font-size:.75rem;color:var(--sobre-oscura-tenue);margin-top:.2rem;}
.spg-footer-pie{
  border-top:1px solid var(--sup-oscura-borde);text-align:center;
  padding:.85rem 1rem;font-size:.75rem;color:var(--sobre-oscura-tenue);
  display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;
}
.spg-footer-sep{color:var(--sup-oscura-borde);}

@media (max-width:820px){
  .spg-footer-in{justify-content:flex-start;gap:1.2rem;}
  .spg-footer-marca,.spg-footer-secciones,
  .spg-footer-ayuda,.spg-footer-version{flex:1 1 100%;}
  .spg-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .spg-footer-secciones{align-items:flex-start;}
  .spg-footer-secciones h3{text-align:left;}
  .spg-nav{top:0;position:static;}
  .spg-brand-sub{display:none;}
}

/* Subtítulo de una sección dentro de un formulario largo */
.spg-form-titulo{font-size:.95rem;font-weight:500;margin:0 0 .3rem;}
.spg-form-titulo i{color:var(--oro-oscuro);}

/* Vista previa de cómo va a quedar el bloque del pie, dentro de Configuración.
   Repite el fondo negro para que se vea tal cual, no como una lista suelta. *

/* Campo de código de verificación. Antes cada pantalla lo estilaba con estilos
   sueltos en el HTML; ahora es una clase y sale igual en las tres. *

/* Niveles de fidelización: se leen como una escalera, de menos a más visitas */
.spg-niveles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;}
.spg-nivel{
  border:1px solid var(--gris-calido);border-radius:10px;padding:.65rem .8rem;background:var(--blanco);
}
.spg-nivel-nombre{font-weight:500;color:var(--oro-oscuro);font-size:.92rem;}
.spg-nivel-req{font-size:.75rem;color:var(--gris-oscuro);}
.spg-nivel-desc{font-size:.78rem;margin-top:.25rem;}
.spg-nivel-clientes{
  font-size:.72rem;color:var(--gris-oscuro);margin-top:.35rem;
  border-top:1px dashed var(--gris-calido);padding-top:.3rem;
}

/* Vuelto del mostrador. Es una cuenta de apoyo, no un dato que se guarde:
   por eso va separado del resto del formulario con un borde punteado. */
.spg-vuelto{border-top:1px dashed var(--gris-calido);padding-top:.8rem;}
.spg-vuelto-res{font-size:.87rem;min-height:1.2rem;}
.spg-vuelto-monto{
  background:var(--oro-tinte);color:var(--oro-oscuro);font-weight:600;
  border-radius:8px;padding:.35rem .7rem;display:inline-block;font-size:1rem;
}

/* Aviso de stock por reponer: los nombres de los productos en línea, para
   que se sepa QUÉ falta sin tener que entrar a la lista. *

/* Filas de medios de contacto: medio · valor · etiqueta · quitar *

/* Servicio elegible, con su selector de quién lo hace *

/* Aviso de dos servicios que no pueden ir a la vez *

/* ---- Portal: la atención en curso ---- *

/* --- Matriz de permisos (Configuración → Roles) -----------------------
   Un bloque por rol, y adentro un recuadro por módulo con sus submódulos.
   Reemplaza a la tabla rol × módulo: con los ocho módulos desglosados son
   28 columnas, que no entran en ninguna pantalla y obligan a leer de
   costado para saber qué se está marcando.
   Todo en neutros cálidos; el oro queda para el módulo que tiene algo
   marcado, que es la única jerarquía que hace falta ver de un vistazo. *
/* El recuadro se tiñe cuando el módulo tiene algo dado: así se ve de lejos
   el alcance del rol sin leer casilla por casilla. *

/* =====================================================================
   Señales de carga

   Con navegación tradicional el navegador no da ninguna señal entre el
   clic y la respuesta: con muchos datos cargados esa espera se lee como
   «el sistema no responde», cuando en realidad está trabajando. Son tres
   piezas, y cada una responde a una espera distinta:

     .spg-barra-carga   la página entera se está yendo a buscar
     .btn.cargando      ese botón concreto disparó algo y está esperando
     .spg-spinner       un pedazo de pantalla se está llenando por fetch

   Todo en oro, que es donde el sistema ya pone la acción.
   ===================================================================== */

/* --- Barra superior: la página se está cargando --------------------- */
.spg-barra-carga{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:2000;
  background:transparent;pointer-events:none;
  opacity:0;transition:opacity .15s ease;
}
.spg-barra-carga.visible{opacity:1;}
.spg-barra-carga::before{
  content:"";display:block;height:100%;width:40%;
  background:linear-gradient(90deg,
    transparent, var(--oro-claro) 30%, var(--oro) 50%, var(--oro-claro) 70%, transparent);
  animation:spg-barra 1.1s ease-in-out infinite;
}
@keyframes spg-barra{
  0%  {transform:translateX(-100%);}
  100%{transform:translateX(350%);}
}

/* --- Botón esperando ------------------------------------------------ */
/* El ícono se reemplaza por el spinner en su lugar: el botón no cambia
   de ancho, así la fila no salta cuando hay varios en línea. */
.btn.cargando{position:relative;pointer-events:none;}
.btn.cargando > i{visibility:hidden;}
.btn.cargando::after{
  content:"";position:absolute;
  top:50%;margin-top:-.45rem;
  left:.75rem;
  width:.9rem;height:.9rem;
  border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;opacity:.85;
  animation:spg-giro .6s linear infinite;
}
/* Sin ícono adentro el spinner no tiene dónde ir: se centra y se apaga
   el texto, que si no queda montado encima. */
.btn.cargando.sin-icono{color:transparent;}
.btn.cargando.sin-icono::after{left:50%;margin-left:-.45rem;color:var(--negro);}
.btn-oro.cargando.sin-icono::after{border-color:var(--negro);border-right-color:transparent;}

@keyframes spg-giro{to{transform:rotate(360deg);}}

/* --- Spinner suelto, para bloques que se llenan por fetch ----------- */
.spg-spinner{
  display:inline-block;vertical-align:-.15em;
  width:1rem;height:1rem;
  border:2px solid var(--oro-suave);border-right-color:var(--oro);
  border-radius:50%;
  animation:spg-giro .6s linear infinite;
}
.spg-spinner.grande{width:1.6rem;height:1.6rem;border-width:3px;}

/* Línea de «buscando…»: spinner + texto, en el tono de los muted */
.spg-cargando-texto{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--gris-oscuro);font-size:.85rem;
}

/* Bloque que se está actualizando: se apaga un poco y no se puede tocar,
   así no se hace clic sobre datos que están por cambiar. */
.spg-actualizando{opacity:.5;pointer-events:none;transition:opacity .2s ease;}

/* --- Respeto por quien pidió menos movimiento ----------------------- */
@media (prefers-reduced-motion:reduce){
  .spg-barra-carga::before{animation:none;width:100%;opacity:.5;}
  .btn.cargando::after,.spg-spinner{animation-duration:2.5s;}
}

/* Acá vivían las dos clases del renglón de cuenta del modal de cobro. Se
   fueron cuando ese renglón pasó a ser una tabla: cuatro cifras en una línea
   —lista, descuento, total, seña— no dejaban decir de dónde salía ninguna, y
   quien cobra no puede defender un número que no puede explicar.

   Lo detectó la prueba que exige que toda clase del CSS aparezca en algún
   marcado, que es justamente para esto. */

/* ---------------------------------------------------------------------------
   El portal en el celular.

   La clienta entra casi siempre desde el teléfono, y hasta acá heredaba el
   ancho del panel: la barra de secciones se cortaba, las tablas de «Mis citas»
   empujaban la página a lo ancho —con el scroll horizontal que eso trae— y los
   botones de acción de cada fila quedaban apretados uno contra otro.

   Nada de esto es un componente nuevo: son las mismas clases, acomodadas.
--------------------------------------------------------------------------- */
@media (max-width:576px){
  /* La barra ya scrollea sola; lo que faltaba era que no se pegue al borde
     y que cada ítem se pueda tocar con el dedo. */
  .spg-nav-in{padding-inline:.6rem;gap:.15rem;}
  .spg-nav-item{padding:.55rem .6rem;font-size:.82rem;}

  /* Una tabla de acciones en 360 px no entra: las celdas de botones pasan a
     ocupar la fila entera y los botones se reparten el ancho. */
  .table td[style*="white-space:nowrap"]{white-space:normal !important;}
  .table .btn-sm{margin:.12rem 0;}
  .table td .btn-sm,
  .table td form.d-inline{display:inline-block;}

  /* El encabezado de página deja de competir con el contenido. */
  .spg-page-head h1{font-size:1.15rem;}
  .spg-page-head .sub{font-size:.8rem;}
  .spg-head-flex{flex-direction:column;align-items:stretch;gap:.5rem;}
  .spg-head-acciones .btn{width:100%;}

  /* Los modales del portal —seña, pedido— llegaban pegados a los bordes. */
  .modal-dialog{margin:.5rem;}

  /* El pie en una sola columna: en dos, los enlaces quedan de una palabra. */
  .spg-footer-grid{grid-template-columns:1fr !important;}
}

/* Rótulo que separa grupos dentro de una lista de casillas: lo agendado y lo
   que se agrega en el sillón. Neutro a propósito — es una división, no una
   acción, así que no lleva oro. */
.spg-grupo-rotulo{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--gris-oscuro);font-weight:600;padding:.2rem 0 .1rem;
  border-bottom:1px solid var(--gris-calido);margin-bottom:.3rem;}

/* --------------------------------------------------------------------
   Elegir sucursal: grilla, no columna.

   Con dos locales una columna se ve bien; con quince es scroll puro y hay
   que leer una por una. Dos por fila desde 480 px, y la lista con su
   propio scroll para que el botón de cerrar sesión no se vaya de pantalla.
   -------------------------------------------------------------------- */
.spg-suc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    max-height: 52vh;
    overflow-y: auto;
    /* El scroll recorta el anillo de foco contra el borde: un respiro. */
    padding: 2px;
}

@media (min-width: 480px) {
    .spg-suc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------
   Reportes: que la información respire.

   Las tablas del informe salían con el tamaño de una lista de operación
   —donde importa ver muchas filas— y acá se leen de a poco: son números
   que se comparan entre sí. Un poco más de aire y de cuerpo cambia
   bastante cuánto cuesta leerlas.
   -------------------------------------------------------------------- */
.spg-reporte .table {
    font-size: .95rem;
    line-height: 1.45;
}

.spg-reporte .table th,
.spg-reporte .table td {
    padding: .7rem .85rem;
    vertical-align: middle;
}

.spg-reporte .table thead th {
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gris-oscuro);
    border-bottom: 2px solid var(--gris-calido);
}

/* Cada bloque en su propio panel, separado del anterior: son informes
   distintos, no una lista continua. */
.spg-reporte h2 {
    font-size: 1.08rem;
    margin: 2.2rem 0 .8rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--gris-calido);
}

.spg-reporte h2:first-of-type { margin-top: 1rem; }

/* Las filas alternadas ayudan a seguir el renglón en una tabla ancha. */
.spg-reporte .table tbody tr:nth-child(even) { background: var(--blanco-hueso); }

/* Una ficha de dos columnas para el detalle de algo: el rótulo a la izquierda
   y el valor al lado, que se lee más rápido que un párrafo. */
.spg-ficha{display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;margin:0;}
.spg-ficha dt{font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;
    color:var(--gris-oscuro);font-weight:400;padding-top:.1rem;}
.spg-ficha dd{margin:0;font-size:.9rem;}

/* Un botón del tamaño de un ícono, para no romper el renglón de una tabla. */
.spg-btn-mini{padding:.05rem .35rem;font-size:.75rem;line-height:1.3;vertical-align:middle;}

/* ---- Reportes: pestañas, gráficos y atajos ----
   El módulo se repartió en siete pantallas porque en una sola medía 2.600 px
   y para mirar una cosa había que pasar por las otras seis. Nada de esto trae
   colores nuevos: son los mismos neutros cálidos y el mismo oro de siempre. */

/* Las pestañas son enlaces de verdad, así que cada informe tiene su URL. */
.spg-tabs{display:flex;gap:.15rem;flex-wrap:wrap;margin-bottom:1rem;
    border-bottom:1px solid var(--gris-calido);}
.spg-tab{display:inline-flex;align-items:center;gap:.4rem;
    padding:.5rem .85rem;font-size:.87rem;text-decoration:none;
    color:var(--gris-oscuro);border-bottom:2px solid transparent;
    border-radius:var(--radius) var(--radius) 0 0;white-space:nowrap;}
.spg-tab:hover{color:var(--oro-texto);background:var(--blanco-hueso);}
.spg-tab.activo{color:var(--oro-oscuro);border-bottom-color:var(--oro);font-weight:500;
    background:var(--blanco);}
.spg-tab i{font-size:.95rem;opacity:.8;}
.spg-tab.activo i{opacity:1;}

/* Las de adentro de un informe —Por día / Por hora— son pastillas, para que
   no compitan con las de arriba: son dos jerarquías distintas. */
.spg-subtabs .nav-link{font-size:.82rem;padding:.28rem .7rem;color:var(--gris-oscuro);}
.spg-subtabs .nav-link.active{background:var(--oro-suave);color:var(--oro-texto);}

/* El gráfico de barras. Dos divs y un `width` en por ciento: no hace falta
   librería, y una de CDN habría que mantenerla al día. */
.spg-graf-fila{display:flex;align-items:center;gap:.5rem;margin-bottom:.28rem;}
.spg-graf-rot{font-size:.8rem;color:var(--gris-oscuro);flex:0 0 auto;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.spg-graf-pista{flex:1 1 auto;display:block;background:var(--gris-calido);
    border-radius:4px;height:14px;overflow:hidden;min-width:40px;}
.spg-graf-barra{display:block;background:var(--oro);height:100%;border-radius:4px;}
.spg-graf-val{flex:0 0 auto;width:34px;text-align:right;font-size:.8rem;
    font-variant-numeric:tabular-nums;}
.spg-graf-val-ancho{width:auto;min-width:92px;}
.spg-graf-mas{display:inline-block;margin-top:.5rem;font-size:.82rem;}
.spg-sin-datos{color:var(--gris-oscuro);font-size:.85rem;margin:0;}

/* Los atajos de período y los botones de bajada, en un solo renglón. */
.spg-atajos-per{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center;
    margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--gris-calido);}
.spg-atajos-sep{flex:1 1 auto;}
.spg-filtros-rep .spg-filtros{margin-bottom:0;}

/* El pie de una tarjeta: el porcentaje debajo del número. Va chico a
   propósito —es contexto del número, no otro número—. */
.spg-metric-pie{font-size:.72rem;color:var(--gris-oscuro);margin-top:.15rem;}

/* El total de una tabla del informe se separa del cuerpo. */
.spg-reporte tfoot th{border-top:2px solid var(--gris-calido);
    background:var(--blanco-hueso);font-size:.85rem;}

@media (max-width: 575px) {
    /* En el celular las pestañas scrollean en horizontal en vez de apilarse
       en cinco filas, que dejaría el informe abajo del pliegue. */
    .spg-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
    .spg-tabs::-webkit-scrollbar{display:none;}
    .spg-tab{padding:.45rem .6rem;font-size:.8rem;}
    .spg-graf-rot{max-width:38vw;}
}

/* **El resumen del informe va compacto**, y esto pisaba la variante.
   Estas dos reglas repetían el tamaño base —1.55rem y el mismo padding— pero
   con un selector más específico, así que `.spg-metrics-compacto` no llegaba a
   aplicarse nunca: son siete números seguidos y cada tarjeta medía 148 px de
   alto. Acá sólo queda lo que la variante NO decide. */
.spg-reporte .spg-metric .val { font-variant-numeric: tabular-nums; }

/* Los números en columna se comparan de un vistazo si comparten ancho. */
.spg-reporte .table td.text-end,
.spg-reporte .table th.text-end {
    font-variant-numeric: tabular-nums;
}

/* El rótulo de grupo intercalado en el desplegable salió con los submenús
   laterales: los grupos ya no son separadores de texto sino renglones que
   abren al costado, así que la clase quedó sin marcado. La borra
   `AndamiajeTest`, que es justamente para esto. */

/* --------------------------------------------------------------------
   Pantalla angosta: la barra de módulos pasa a ser lateral.

   Con la cabecera y la barra apiladas arriba, un panel de 5" se queda sin
   alto útil y las tarjetas caen fuera de la pantalla. Lateral ocupa el
   ancho que sobra —los módulos son nueve nombres cortos— y devuelve dos
   filas de contenido.

   Se activa por debajo de 992 px, que es donde la barra horizontal empieza
   a necesitar scroll para mostrar los nueve.
   -------------------------------------------------------------------- */
/* El interruptor no se ve nunca: lo único que hace es guardar el estado. */
.spg-cajon-int { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.spg-cajon-btn { display: none; }
.spg-cajon-fondo {
    position: fixed; inset: 44px 0 0 0; background: rgba(0,0,0,.45);
    opacity: 0; visibility: hidden; transition: opacity .18s ease;
    z-index: 1030; cursor: pointer;
}

@media (max-width: 991px) {
    /* El cajón se desliza POR ENCIMA del contenido y no le roba ancho.
       Antes era un riel fijo de 54 px y el contenido se corría con
       `margin-left`, que **seguía aplicándose en el Panel —donde la barra ni
       se dibuja—**: de ahí el hueco al costado en el celular. */
    .spg-nav-mod {
        position: fixed;
        top: 44px;
        bottom: 0;
        left: 0;
        width: min(78vw, 250px);
        border-right: 1px solid var(--sup-oscura-borde);
        border-bottom: none;
        overflow-y: auto;
        z-index: 1031;
        transform: translateX(-100%);
        transition: transform .18s ease;
    }

    .spg-nav-mod .spg-nav-in {
        flex-direction: column;
        align-items: stretch;
        gap: .1rem;
        padding: .5rem .4rem;
        overflow-x: visible;
    }

    /* Rótulo al lado del ícono y de tamaño normal: apilados y a .58rem no se
       leían, que es lo que se reportó. Acá sobra el ancho. */
    .spg-nav-mod .spg-nav-item {
        flex-direction: row;
        justify-content: flex-start;
        gap: .6rem;
        padding: .6rem .7rem;
        font-size: .9rem;
        text-align: left;
        border-bottom: none;
        border-left: 3px solid transparent;
        border-radius: var(--radius);
        line-height: 1.2;
    }

    .spg-nav-mod .spg-nav-item i { font-size: 1rem; width: 1.2rem; text-align: center; }
    .spg-nav-mod .spg-nav-item.activo {
        border-bottom-color: transparent;
        border-left-color: var(--oro);
        background: rgba(201, 168, 76, .1);
    }

    /* **El contenido NO se corre.** El cajón tapa, no empuja. */
    main.container, .spg-migas, footer, .spg-footer { margin-left: 0; }

    /* El desplegable de escritorio no cabe acá y en táctil el hover no
       existe: se entra al módulo y ahí están las tarjetas. */
    .spg-nav-menu { display: none !important; }

    /* El botón del cajón sólo existe acá. */
    .spg-cajon-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 34px; height: 34px; margin-right: .1rem; flex: 0 0 auto;
        border-radius: var(--radius); cursor: pointer;
        color: var(--sobre-oscura); font-size: 1.25rem; line-height: 1;
    }
    .spg-cajon-btn:hover, .spg-cajon-int:focus-visible + .spg-topbar .spg-cajon-btn {
        background: var(--sup-oscura-2); color: var(--oro-claro);
    }

    .spg-cajon-int:checked ~ .spg-nav-mod { transform: none; }

    /* El fondo que cierra el cajón al tocar afuera. Es el propio `<label>`
       repetido por CSS, así que no hace falta JavaScript. */
    .spg-cajon-int:checked ~ .spg-cajon-fondo {
        opacity: 1; visibility: visible;
    }
}

@media (min-width: 992px) {
    /* En escritorio la barra es horizontal y el cajón no existe. */
    .spg-cajon-fondo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .spg-nav-mod, .spg-cajon-fondo { transition: none; }
}

/* ---------------------------------------------------------------------------
   Desplegable nativo (`<details>`), para agrupar dos acciones parientes
   ---------------------------------------------------------------------------
   Lo usa la pantalla de «Mis citas» para los dos calendarios. Es `<details>` y
   no un dropdown de Bootstrap **a propósito**: lo abre el navegador, así que
   funciona con `app.js` caído — agendar la cita en el teléfono no puede
   depender de que cargue una librería.

   El `summary` se dibuja como botón, y el marcador triangular se saca: con el
   ícono al lado se lee como una flecha de más.                              */
.spg-desple { position: relative; }

.spg-desple > summary { list-style: none; cursor: pointer; }
.spg-desple > summary::-webkit-details-marker { display: none; }
.spg-desple > summary::marker { content: ''; }

.spg-desple-menu {
    position: absolute;
    z-index: 20;
    min-width: 220px;
    margin-top: .25rem;
    padding: .3rem;
    background: var(--blanco);
    border: 1px solid var(--gris-calido);
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
}

.spg-desple-menu a {
    display: block;
    padding: .45rem .6rem;
    border-radius: .35rem;
    color: var(--carbon);
    text-decoration: none;
    font-size: .88rem;
    white-space: nowrap;
}

.spg-desple-menu a:hover,
.spg-desple-menu a:focus { background: var(--oro-tinte); color: var(--negro); }

/* Pegado al borde derecho no se sale de la pantalla en el celular. */
@media (max-width: 575.98px) {
    .spg-desple-menu { right: 0; }
}