/* Montserrat auto-hospedada (subset latino, variable 100-900) para respetar el
   CSP `font-src 'self'` y funcionar sin internet. Es la tipografía del real. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/public/fonts/montserrat-var.woff2') format('woff2');
}
* { box-sizing: border-box; }
/* Sistema de diseño fiel al real: Montserrat, fondo gris claro, rosa #ff9fc4. */
body { margin:0; font-family: 'Montserrat', system-ui, "Segoe UI", Arial, sans-serif; font-size:14px; background:#f8f9fa; color:rgba(0,0,0,.87); }
.topbar { display:flex; align-items:center; gap:1rem; max-width:100%; min-width:0; background:#ff9fc4; padding:.5rem 1.5rem; color:#fff; }
.topbar .brand { flex:0 0 auto; font-weight:700; color:#fff; text-decoration:none; letter-spacing:1px; }
.menu { display:flex; gap:1rem; min-width:0; margin-left:auto; align-items:center; }
.menu a, .dropdown > button { color:#fff; text-decoration:none; background:none; border:0; font-size:1rem; cursor:pointer; }
.dropdown { position:relative; }
.dropdown-content { display:none; position:absolute; right:0; background:#fff; min-width:200px; box-shadow:0 4px 12px rgba(0,0,0,.15); border-radius:6px; z-index:10; }
.dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content { display:block; }
.dropdown-content a { display:block; color:#333; padding:.6rem 1rem; }
.dropdown-content a:hover { background:#fde3ee; }
/* En móvil el menú se reparte en renglones dentro de SU propia barra. Así todos
   los módulos siguen visibles sin hacer más ancho el body y los desplegables
   conservan espacio vertical (un overflow-x:auto los recortaría). */
@media (max-width:900px) {
  .topbar { position:relative; align-items:flex-start; flex-wrap:wrap; gap:.4rem; padding:.55rem .75rem; }
  .topbar .brand { flex-basis:100%; min-height:32px; display:flex; align-items:center; }
  .menu { width:100%; margin-left:0; flex:1 1 100%; flex-wrap:wrap; gap:.2rem .35rem; }
  .menu > a, .menu > .dropdown > button { min-height:44px; display:inline-flex; align-items:center; padding:.45rem .55rem; white-space:nowrap; }
  /* Los botones permanecen en el flujo estable; el panel se ancla DEBAJO de
     toda la barra. Así no tapa hermanos ni mueve el siguiente botón entre el
     mousedown y el mouseup al cambiar de desplegable. */
  .menu > .dropdown { position:static; max-width:100%; }
  .dropdown-content { position:absolute; top:100%; left:.75rem; right:auto;
    width:min(220px, calc(100vw - 1.5rem)); min-width:min(200px, calc(100vw - 1.5rem)); max-width:calc(100vw - 1.5rem); }
  .menu > .dropdown:last-child .dropdown-content { left:auto; right:.75rem; }
  .dropdown-content a, .dropdown-content form button { width:100%; min-height:44px; display:flex; align-items:center; color:#333; padding:.6rem 1rem; text-align:left; }
  .dropdown-content form { width:100%; margin:0; }
  .dropdown-content form button { background:transparent; border:0; font:inherit; cursor:pointer; }
}
.page-head { display:flex; align-items:center; gap:.5rem; padding:.5rem 1.5rem; color:#ff9fc4; }
.page-head h1 { font-size:1.15rem; margin:0; font-weight:700; }
.container { max-width:1200px; margin:1rem auto; padding:0 1rem; }
.cards { display:flex; gap:1rem; flex-wrap:wrap; }
.card { background:#fff; border:1px solid #eee; border-radius:8px; padding:1rem 1.5rem; min-width:180px; }
.card h3 { margin:.2rem 0; font-weight:600; } .card .big { font-size:1.6rem; font-weight:700; }
/* Tabla estilo Semantic UI (como el real): encabezado gris claro, filas con
   borde tenue. */
table.grid { width:100%; border-collapse:collapse; background:#fff; border:1px solid rgba(34,36,38,.1); border-radius:.28rem; overflow:hidden; }
table.grid th { font-weight:700; color:rgba(0,0,0,.87); background:#f9fafb; border-bottom:1px solid rgba(34,36,38,.1); padding:.9rem .8rem; text-align:left; }
table.grid td { border-bottom:1px solid #f2f3f4; padding:.75rem .8rem; text-align:left; color:rgba(0,0,0,.87); }
table.grid tbody tr:last-child td { border-bottom:0; }
table.grid tbody tr:hover { background:#fcfcfd; }
/* Botón rosa (acción principal: + Nuevo, Buscar), radio 4px, como el real. */
.btn { background:#ff9fc4; color:#fff; border:0; border-radius:4px; padding:.65rem 1.2rem; cursor:pointer; text-decoration:none; display:inline-block; font-weight:700; font-size:.9rem; font-family:inherit; }
.btn:hover { filter:brightness(.96); }
.btn.green { background:#21ba45; } .btn.small { padding:.4rem .6rem; font-size:.82rem; }
.btn.gris { background:#e0e1e2; color:rgba(0,0,0,.6); }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.8rem; flex-wrap:wrap; }
/* Inputs globales estilo Semantic UI (como el real): borde clarísimo, redondeo
   4px, espaciados. Aplica a los formularios de alta/edición y a las toolbars. */
input, select, textarea { font-family:inherit; font-size:14px; color:rgba(0,0,0,.87); background:#fff;
  border:1px solid rgba(34,36,38,.15); border-radius:.28rem; padding:.62em .9em; }
input:focus, select:focus, textarea:focus { border-color:#85b7d9; outline:none; }
label { font-size:.9rem; font-weight:700; color:rgba(0,0,0,.87); }
fieldset { border:1px solid #eee; border-radius:6px; margin:.5rem 0; }
/* ---------------------------------------------------------------------------
   Agenda: DOM del real (docs/SISTEMA-REAL.md §5). Semantic UI no está instalado;
   se replica el LOOK con CSS propio conservando los nombres de clase reales
   (.ui.segment, .agenda, .titulo, .mes, .dia.semana, td.cita.diponible, ...).
   --------------------------------------------------------------------------- */
.ui.segment { background:#fff; border:1px solid rgba(34,36,38,.15); border-radius:.28rem; box-shadow:0 1px 2px 0 rgba(34,36,38,.15); padding:1rem; margin:1rem 0; }
.agenda { overflow-x:auto; }
/* La sucursal es una decisión operativa, no un subtítulo decorativo. Este
   letrero permanece visible mientras se recorre el horario para impedir que
   recepción agende o mueva una cita en la sede equivocada. */
.agenda-shell { position:relative; }
.sucursal-activa { position:sticky; top:0; z-index:8; width:100%; min-height:72px; margin:0 0 .85rem;
  display:grid; grid-template-columns:minmax(145px,.65fr) minmax(300px,2fr) minmax(175px,.8fr);
  align-items:center; gap:.75rem 1rem; padding:.7rem 1.1rem; border:2px solid #ff9fc4; border-radius:.55rem;
  background:linear-gradient(120deg,#661536 0%,#8f2050 58%,#bd3b72 100%); color:#fff;
  box-shadow:0 5px 15px rgba(102,21,54,.24); text-align:center; }
.sucursal-activa__etiqueta { justify-self:start; padding:.38rem .65rem; border:1px solid rgba(255,255,255,.45);
  border-radius:999px; background:rgba(255,255,255,.12); font-size:.72rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.sucursal-activa__nombre { min-width:0; font-size:clamp(1.7rem,2.5vw,2.65rem); font-weight:900; line-height:1.05;
  letter-spacing:.025em; text-transform:uppercase; overflow-wrap:anywhere; text-shadow:0 2px 5px rgba(0,0,0,.28); }
.sucursal-activa__aviso { justify-self:end; max-width:190px; font-size:.72rem; font-weight:700; line-height:1.35;
  text-align:right; color:#ffeaf2; }
/* .titulo: 12 meses · "<" · mes completo+días · ">" · leyenda */
.titulo { display:flex; align-items:flex-start; justify-content:center; gap:.5rem; flex-wrap:wrap; padding-bottom:.8rem; }
.meses { text-align:center; }
.meses.flechas { align-self:center; }
.meses-anio { width:100%; display:grid; grid-template-columns:repeat(12, minmax(78px, 1fr)); gap:.3rem;
  overflow-x:auto; padding:.15rem .1rem .45rem; scrollbar-width:thin; }
.mes-tab { appearance:none; border:1px solid #dfe2e5; border-radius:.35rem; background:#f4f5f6; color:#555;
  min-height:34px; padding:.42rem .55rem; font:600 .76rem/1 'Montserrat', system-ui, sans-serif;
  cursor:pointer; white-space:nowrap; transition:background .12s, border-color .12s, box-shadow .12s; }
.mes-tab:hover { background:#eceff1; border-color:#f4b0cb; }
.mes-tab.select { background:#f7bdd4; color:#5f1835; border-color:#ec6ca0;
  box-shadow:0 2px 5px rgba(146, 38, 84, .18); font-weight:800; }
.mes-tab:focus-visible { outline:3px solid rgba(94, 45, 124, .35); outline-offset:2px; }
.semana-navegacion { width:100%; display:flex; justify-content:center; align-items:flex-end; gap:.75rem; }
.semana-actual { min-width:0; }
.mes { font-weight:800; color:#333; font-size:1.2rem; margin-bottom:.45rem; text-transform:none; }
.dias { display:flex; gap:.25rem; }
.dia { background:#f9c9dc; color:#fff; border-radius:.28rem; padding:.4rem .55rem; cursor:pointer; font-size:.8rem; font-weight:700; user-select:none; white-space:nowrap; transition:background .1s; }
.dia:hover { background:#f4b0cb; }
.dia.semana.select { background:#ec6ca0; }
.dia.busca { background:#e0e1e2; color:#5c5c5c; padding:.4rem .7rem; }
.dia.busca:hover { background:#cacbcd; }
@media (max-width:720px) {
  .sucursal-activa { position:sticky; grid-template-columns:1fr; gap:.35rem; min-height:0; padding:.7rem; }
  .sucursal-activa__etiqueta, .sucursal-activa__aviso { justify-self:center; max-width:none; text-align:center; }
  .sucursal-activa__nombre { font-size:clamp(1.45rem,7vw,2rem); }
  .meses-anio { grid-template-columns:repeat(12, 82px); justify-content:start; }
  .semana-navegacion { gap:.35rem; }
  .dia { padding:.4rem .45rem; }
}
/* Leyenda: 5 columnas (.ui.five.column.grid). El 5º es .pagado, NO .estatus5. */
.ui.five.column.grid { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; width:100%; justify-content:center; margin-top:.4rem; }
.ui.five.column.grid .column { display:flex; align-items:center; gap:.35rem; font-size:.8rem; color:#666; }
/* Círculo de leyenda: 14px, 50%, borde 1.875px solid (§5). Se usan longhands a
   propósito: el shorthand `border` pisaría el border-color exacto del estatus. */
.circle { display:inline-block; width:14px; height:14px; border-radius:50%; border-width:1.875px; border-style:solid; flex:none; }
/* Tabla de la agenda: 28 filas alternando tr.sinborde (:00) y tr (:30). */
table.agenda_citas { width:100%; border-collapse:collapse; table-layout:fixed; min-width:760px; }
/* El real: apodo y "Espacio N" en negrita OSCURA sobre fondo blanco, sin bordes
   de caja en el encabezado. */
table.agenda_citas thead th { font-size:.78rem; font-weight:700; color:#333; padding:.2rem .2rem; text-align:center; background:transparent; border:0; }
table.agenda_citas thead th:first-child { width:64px; background:transparent; border:0; }
td.hora { width:64px; text-align:right; padding-right:.4rem; color:#999; font-size:.72rem; white-space:nowrap; vertical-align:top; }
/* Celda: `.cita` (no `td.cita`) para que el bloque de colores de abajo, que tiene
   la misma especificidad y va después, gane el border-color. */
/* El real centra el contenido de la celda (cliente, teléfono y servicios). */
.cita { height:22px; padding:1px 3px; font-size:.72rem; line-height:1.3; color:#333; text-align:center; overflow:hidden; vertical-align:middle; border-width:1px; border-style:solid; border-color:#eee; }
.cita.diponible { cursor:pointer; background:#fff; }
.cita.diponible:hover { background:#fdf6fa; }
.cita[data-id] { cursor:pointer; border-radius:3px; }
/* La fila :00 no cierra por abajo: se funde con la :30 en un bloque de una hora.
   Solo aplica a la hora y a las celdas libres; una cita conserva su borde de color. */
tr.sinborde > td.hora, tr.sinborde > td.diponible { border-bottom-color:transparent; }
/* La celda lleva un <span.servicios> POR servicio (§5): en bloque para que dos
   servicios no salgan pegados en la misma línea. */
.cita .servicios { display:block; font-size:.68rem; color:#666; }
.cita small { color:#777; }
.contenido .vacio { text-align:center; color:#999; padding:2rem; }
.citas-sin-celda { margin-top:1rem; padding:.75rem 1rem; border:1px solid #f0c36d; border-radius:.28rem; background:#fff8e8; color:#654d1d; }
.citas-sin-celda p { margin:.3rem 0 .5rem; font-size:.82rem; }
.citas-sin-celda ul { margin:0; padding-left:1.1rem; }
.citas-sin-celda button { padding:0; border:0; background:transparent; color:#654d1d; text-decoration:underline; cursor:pointer; text-align:left; }
/* Colores exactos del real (docs/SISTEMA-REAL.md §5). `pagado` no es un estatus:
   es un campo aparte y su clase manda sobre la del estatus. */
.estatus1{background:rgb(234,243,249);border-color:rgb(186,227,255)}
.estatus2{background:rgb(251,246,225);border-color:rgb(247,226,174)}
.estatus3{background:rgb(251,225,244);border-color:rgb(247,174,218)}
.estatus4{background:rgb(235,222,241);border-color:rgb(207,174,221)}
.pagado{background:rgb(232,251,225);border-color:rgb(193,247,174)}

/* --- Modales (.ui.modal): Agregar Cita (§6) y Detalle de la Cita (§7) ------- */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:flex-start; justify-content:center; z-index:100; overflow:auto; padding:2rem 1rem; }
.ui.modal { background:#fff; border-radius:.28rem; width:100%; max-width:900px; box-shadow:0 2px 12px rgba(0,0,0,.25); }
.ui.modal > .header { font-size:1.15rem; font-weight:700; padding:1rem 1.3rem; border-bottom:1px solid rgba(34,36,38,.15); color:#ec6ca0; }
.ui.modal > .content { padding:1.2rem 1.3rem; }
.error-empalme p:first-child { font-weight:700; color:#9f3b00; }
.error-empalme p:last-child { margin-bottom:0; color:#666; }
.ui.modal > .actions { padding:.9rem 1.3rem; border-top:1px solid rgba(34,36,38,.15); background:#f9fafb; display:flex; justify-content:space-between; gap:.5rem; }
.ui.modal > .actions .right { display:flex; gap:.5rem; }
/* Formulario fiel al real (Semantic UI): espacioso, redondeado, borde muy claro.
   Base 14px para que el look calce con el legacy. */
.ui.modal > .content { font-size:14px; }
/* Sección con ícono (usuario / calendario) + divisor, como el real (§6.1). */
.ui.form .seccion { display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:1.05rem;
  color:#4b4b4b; margin:1.3rem 0 .9rem; padding-bottom:.55rem; border-bottom:1px solid rgba(34,36,38,.1); }
.ui.form .seccion:first-child { margin-top:.2rem; }
.ui.form .seccion-icono { display:inline-flex; color:#9aa0a6; }
.ui.form .fields { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.ui.form .field { flex:1; min-width:190px; }
.ui.form .field > label { display:block; font-size:.93rem; font-weight:700; color:rgba(0,0,0,.87); margin-bottom:.5rem; }
/* Inputs/selects: alto ~38px, padding generoso, redondeo .28rem, borde clarísimo. */
.ui.form input, .ui.form select, .ui.form .ms-control {
  width:100%; font-size:1rem; color:rgba(0,0,0,.87); background:#fff;
  border:1px solid rgba(34,36,38,.15); border-radius:.35rem; padding:.68em 1em; line-height:1.2;
  transition:border-color .1s; }
.ui.form select { min-height:2.6em; padding-right:2em; }
.ui.form input:focus, .ui.form select:focus, .ui.form .ms-control:focus,
.ui.form .ms.abierto .ms-control { border-color:#85b7d9; outline:none; }
.ui.form input::placeholder { color:#b0b0b0; }
.ui.form input[readonly] { background:#f9fafb; color:#555; }
.ui.form :disabled { background:#f9fafb; color:#888; cursor:not-allowed; }
.ui.input.buscador { display:flex; gap:0; }
.ui.input.buscador input { border-top-right-radius:0; border-bottom-right-radius:0; }
.ui.input.buscador .ui.button { border-top-left-radius:0; border-bottom-left-radius:0; margin:0; }

/* Dropdown de servicios (reemplaza la lista fea): caja con etiquetas + menú, como
   el real. El <select> nativo queda oculto pero sigue siendo la fuente de datos. */
/* Se oculta visualmente sin display:none: así un <select required> todavía
   participa correctamente en la validación nativa. El JS mueve cualquier error
   al combobox visible y conserva este nodo como fuente de FormData. */
select.ms-nativo { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; opacity:0; pointer-events:none; }
.ms { position:relative; }
.ms-control { display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; min-height:2.6em;
  cursor:pointer; position:relative; }
.ms-control::after { content:''; position:absolute; right:1em; top:50%; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid #999;
  transform:translateY(-40%); pointer-events:none; }
.ms-placeholder { color:#b0b0b0; }
.ms-tag { display:inline-flex; align-items:center; gap:.35rem; background:#eef0f2; color:#333;
  border-radius:.28rem; padding:.2em .55em; font-size:.9em; }
.ms-tag .ms-x { cursor:pointer; color:#8a8f94; font-weight:700; line-height:1; }
.ms-tag .ms-x:hover { color:#db2828; }
.ms-menu { display:none; position:absolute; left:0; right:0; top:calc(100% + 3px); z-index:20;
  background:#fff; border:1px solid rgba(34,36,38,.15); border-radius:.35rem;
  box-shadow:0 2px 14px rgba(0,0,0,.15); max-height:230px; overflow:auto; }
.ms.abierto .ms-menu { display:block; }
.ms-item { padding:.6em .9em; cursor:pointer; font-size:.95em; color:#333; }
.ms-item:hover { background:#f6f6f6; }
.ms-control:focus-visible { outline:3px solid #5f1835; outline-offset:2px; border-color:#85b7d9; }
.ms-item.activa { background:#f9dce8; box-shadow:inset 3px 0 #7b234b; }
.ms-item[aria-disabled="true"] { color:#999; cursor:not-allowed; }
.ms-item.sel { background:#eafbe6; font-weight:600; }
.ms-item.sel.activa { background:#dff4db; }
.ms-item.sel::after { content:' ✓'; color:#21ba45; }
.ui.input.buscador { display:flex; gap:.3rem; }
/* Toggle real (§6.1: "Es cita reservada" y "Anuncio por publicidad pagada"
   son switches, no checkboxes). El segundo selector es obligatorio: dentro de un
   .field, `.ui.form .field > label` (0,3,1) le gana a `.ui.toggle` (0,2,0) y lo
   volvería display:block, con lo que .slider (un span) colapsaría a width:0 y el
   texto se montaría encima. */
.ui.toggle, .ui.form .field > label.ui.toggle { display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-size:.85rem; font-weight:400; color:#333; margin-top:1.3rem; }
.ui.toggle input { position:absolute; opacity:0; width:0; height:0; }
.ui.toggle .slider { width:38px; height:20px; border-radius:10px; background:#d4d4d5; position:relative; transition:background .15s; flex:none; }
.ui.toggle .slider::before { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform .15s; }
.ui.toggle input:checked + .slider { background:#4caf7d; }
.ui.toggle input:checked + .slider::before { transform:translateX(18px); }
.ui.toggle input:disabled + .slider { opacity:.5; }
/* Detalle: DOS columnas exactamente como el real (§7). */
.detalle { display:flex; gap:1.5rem; flex-wrap:wrap; }
.detalle > .col { flex:1; min-width:280px; }
.detalle .titulo-linea { display:flex; align-items:center; justify-content:space-between; font-weight:700; color:#5c5c5c; font-size:.82rem; margin:.9rem 0 .35rem; }
.detalle .lineas { display:flex; flex-direction:column; gap:.35rem; }
/* Fila de servicio: [×] NOMBRE [precio] [empleada ▾] · Fila de pago: [×] [monto] [método ▾] */
.detalle .linea { display:flex; gap:.35rem; align-items:center; }
.detalle .linea select.nombre { flex:3; min-width:0; }
.detalle .linea input.precio, .detalle .linea input.monto { flex:1; min-width:70px; }
.detalle .linea select.empleada, .detalle .linea select.metodo { flex:1.4; min-width:0; }
.detalle .totales { margin:.8rem 0 1rem; display:flex; flex-direction:column; gap:.35rem; }
.detalle .totales .fila { display:flex; justify-content:space-between; align-items:center; font-size:.85rem; }
.detalle .totales .fila b { color:#ec6ca0; }
.detalle .totales input { max-width:120px; text-align:right; }
.ui.button { background:#e0e1e2; color:#5c5c5c; border:0; border-radius:.28rem; padding:.55rem 1rem; cursor:pointer; font-size:.9rem; font-weight:700; }
.ui.button:hover { filter:brightness(.95); }
.ui.button.green { background:#21ba45; color:#fff; }
.ui.button.blue { background:#2185d0; color:#fff; }
.ui.button.mini { padding:.3rem .5rem; font-size:.8rem; }
.ui.button.icono { background:#db2828; color:#fff; padding:.3rem .5rem; line-height:1; flex:none; }
.ui.button.mas { background:#21ba45; color:#fff; padding:.15rem .5rem; line-height:1.2; }

/* Checador: Beauty Clock embebido (app externa en Vercel) */
.checador-acceso { display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }
.checador-card { background:#fff; border:1px solid #eee; border-radius:10px; padding:2rem 2.2rem; max-width:560px;
  display:flex; flex-direction:column; gap:.7rem; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.checador-card__icono { font-size:2.2rem; }
.checador-card__boton { align-self:flex-start; margin-top:.3rem; }

/* ---------- Alcance multisucrusal de Reportes ---------- */
/* Son enlaces de navegación (no pestañas JS): tienen URL propia, funcionan con
   teclado/nueva pestaña y conservan los filtros que la vista serializa. */
.alcance-reporte { max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin;
  scrollbar-color:#d98aae #f9edf2; background:#fff; border:1px solid #eed5df; border-radius:8px;
  padding:.45rem; margin:0 0 .5rem; scroll-snap-type:x proximity; }
.alcance-reporte__enlaces { display:flex; gap:.4rem; width:max-content; min-width:100%; }
.alcance-reporte__link { min-height:44px; display:inline-flex; align-items:center; justify-content:center; flex:1 0 auto;
  scroll-snap-align:start; padding:.6rem 1rem; border:1px solid transparent; border-radius:6px;
  background:#fff; color:#5f1835; font-weight:650; text-decoration:none; white-space:nowrap; }
.alcance-reporte__link:hover { background:#fff3f8; border-color:#f1bed2; }
.alcance-reporte__link--activa { background:#f7bdd4; color:#5f1835; border-color:#ec6ca0;
  box-shadow:inset 0 -3px #7b234b; font-weight:800; }
.alcance-reporte__link:focus-visible, .comparativo-sucursales__link:focus-visible,
.rep-tabs button:focus-visible { outline:3px solid #5f1835; outline-offset:2px; }
.alcance-reporte__actual { margin:.25rem 0 .8rem; color:#5f1835; font-size:.9rem; }
.alcance-reporte::-webkit-scrollbar { height:8px; }
.alcance-reporte::-webkit-scrollbar-thumb { background:#d98aae; border-radius:4px; }
.alcance-reporte::-webkit-scrollbar-track { background:#f9edf2; }

/* ---------- Reporte de Ventas ---------- */
/* Filtros en una fila ordenada: etiqueta arriba, todos los controles alineados
   por su borde superior y con la misma altura. Antes las fechas quedaban abajo
   y el multiselect de 87 servicios estiraba la fila entera. */
.filtros { display:flex; flex-wrap:wrap; gap:.75rem; align-items:flex-start; margin:0 0 .25rem; }
.filtros .f-campo { display:flex; flex-direction:column; gap:.25rem; }
.filtros .f-campo > span { font-size:.75rem; font-weight:600; color:#555; }
.filtros .f-campo input[type=date] { height:34px; padding:0 .4rem; }
.filtros .f-campo select { height:118px; min-width:150px; font-size:.8rem; padding:.2rem; }
.filtros .f-campo.f-ancho select { min-width:280px; }
.filtros .f-acciones { display:flex; gap:.5rem; margin-top:1.15rem; }
.f-ayuda { color:#999; margin:.2rem 0 1rem; font-size:.85rem; }
.resumen-ventas .monto { color:#4caf7d; font-weight:700; }
.tend-metricas { display:flex; gap:.5rem; align-items:flex-end; }
.tend-metricas .btn.active { background:#ec6ca0; }

/* La tabla tiene 15 columnas: `nowrap` para que ningún encabezado se apile en
   vertical y ninguna fila se estire, + scroll horizontal para alcanzar el resto.

   `overflow` en AMBOS ejes + tope de alto, y no solo `overflow-x`: por spec, si un
   eje es `visible` y el otro no, el `visible` computa a `auto`. Es decir que
   .tabla-scroll YA era el scrollport vertical de la tabla, pero sin tope de alto su
   contenido nunca desbordaba en Y — así que el `top:0` del thead y el `bottom:0` de
   la fila TOTALES no enganchaban NUNCA: al scrollear la página el contenedor entero
   se iba y se llevaba el encabezado dentro. Con el tope, la tabla scrollea en su
   propia caja y ambos sticky funcionan. */
.tabla-scroll { max-height:calc(100vh - 260px); overflow:auto; border:1px solid #eee; border-radius:6px; }
table.grid.reporte { font-size:.76rem; border-collapse:collapse; width:100%; }
table.grid.reporte th, table.grid.reporte td { padding:.4rem .55rem; white-space:nowrap; border-bottom:1px solid #f0f0f0; text-align:left; }
table.grid.reporte thead th { position:sticky; top:0; z-index:1; background:#fafafa; font-size:.72rem; font-weight:700; color:#444; border-bottom:1px solid #e5e5e5; }
table.grid.reporte td.num { text-align:right; font-variant-numeric:tabular-nums; }
/* Solo Servicio y Cliente pueden envolver, con tope de ancho. */
table.grid.reporte td.wrap { white-space:normal; max-width:190px; }
table.grid.reporte tbody tr:hover { background:#fdf6fa; }

/* (El ancho de .container--ancho se define abajo, en el bloque "ventana completa".) */
/* Ancho FIJO: con min-width los nombres largos del catálogo (p.ej. "MAQUILLAJE
   PAQUETE - MAQUILLAJE Y PEINADO") estiraban el select a casi 500px. */
.filtros .f-campo select { width:150px; }
.filtros .f-campo.f-ancho select { width:300px; }

/* El ancho de cada columna lo dictaba su ENCABEZADO ("Nos vio en RS 7 días" = 134px
   para mostrar "Si"). Se deja que el encabezado se parta en 2 líneas y los DATOS
   sigan en una: la tabla baja ~250px sin perder legibilidad. */
table.grid.reporte thead th { white-space:normal; line-height:1.15; vertical-align:bottom; max-width:88px; }
table.grid.reporte th, table.grid.reporte td { padding:.35rem .45rem; }
table.grid.reporte { font-size:.74rem; }
/* Fecha fija al scrollear: sin esto pierdes la referencia de la fila. */
table.grid.reporte th:first-child, table.grid.reporte td:first-child { position:sticky; left:0; background:#fff; }
table.grid.reporte thead th:first-child { background:#fafafa; z-index:2; }
/* El fondo OPACO que necesita el sticky-left se pintaba encima del fondo del <tr>,
   así que la columna Fecha era la única que NO se iluminaba con el hover — justo la
   columna ancla que el sticky existe para conservar mientras lees 15 columnas. */
table.grid.reporte tbody tr:hover > td:first-child { background:#fdf6fa; }
/* Barra de scroll visible: hay que saber que la tabla sigue a la derecha. */
.tabla-scroll { scrollbar-color:#e6a6c0 #f4f4f4; }
.tabla-scroll::-webkit-scrollbar { height:10px; }
.tabla-scroll::-webkit-scrollbar-thumb { background:#e6a6c0; border-radius:5px; }
.tabla-scroll::-webkit-scrollbar-track { background:#f4f4f4; }

/* Sin min-width la columna colapsaba al ancho de su dato ("Si") y el encabezado
   largo se partía en 6 líneas verticales, estirando toda la fila de títulos.
   Con piso y techo, "Nos vio en RS 7 días" cae en 2 líneas limpias. */
table.grid.reporte thead th { min-width:70px; max-width:112px; }

/* ---------- Reporte de Gráficas ---------- */
/* El real: tira blanca de filtros arriba, con etiquetas EN LÍNEA y Buscar gris. */
.graficas-filtros { display:flex; align-items:center; gap:2.5rem; background:#fff; border:1px solid #eee;
  border-radius:8px; padding:.7rem 1rem; margin-bottom:1rem; flex-wrap:wrap; }
.graficas-filtros label { display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.85rem; color:#444; }
.graficas-filtros .btn.gris { background:#e0e1e2; color:#5c5c5c; margin-left:auto; }
.graficas-filtros .btn.gris:hover { background:#cacbcd; }

/* Menú VERTICAL a la izquierda (el real no usa pestañas horizontales). */
.graficas-wrap { display:grid; grid-template-columns:170px 1fr; gap:1.2rem; align-items:start;
  background:#fff; border:1px solid #eee; border-radius:8px; padding:1rem; }
.rep-tabs { display:flex; flex-direction:column; border-right:1px solid #e5e5e5; }
.rep-tabs button { background:transparent; border:0; border-right:3px solid transparent; margin-right:-2px;
  min-height:44px; text-align:left; padding:.55rem .8rem; cursor:pointer; color:#666; font-size:.88rem; font-family:inherit; }
.rep-tabs button:hover { color:#ec6ca0; }
.rep-tabs button.active { font-weight:700; color:#333; border-right-color:#333; }
.rep-panel { display:none; }
.rep-panel.active { display:block; }
.rep-2col { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
.rep-card { background:#fff; border:1px solid #eee; border-radius:8px; padding:1rem; }
.rep-card h3 { margin:.2rem 0 .6rem; font-size:.95rem; font-weight:700; color:#333; }
@media (max-width:900px){
  .graficas-wrap { grid-template-columns:minmax(0,1fr); overflow:hidden; }
  .rep-contenido, .rep-panel, .rep-card, .rep-2col { min-width:0; }
  .rep-2col { grid-template-columns:minmax(0,1fr); }
  .rep-tabs { min-width:0; flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid #e5e5e5;
    scrollbar-width:thin; scroll-snap-type:x proximity; }
  .rep-tabs button { flex:0 0 auto; min-width:max-content; margin:0 0 -2px; border-right:0; border-bottom:3px solid transparent;
    white-space:nowrap; scroll-snap-align:start; }
  .rep-tabs button.active { border-right-color:transparent; border-bottom-color:#333; }
}

/* Resumen ejecutivo: tres tarjetas comparables, solo cuando las fechas definen
   un período cerrado. No se usa un delta ficticio si falta el período previo. */
.resumen-kpis { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.resumen-kpi { background:#fff; border:1px solid #eee; border-radius:8px; padding:1.2rem 1rem; text-align:center; min-height:190px; display:flex; flex-direction:column; align-items:center; }
.resumen-kpi__valor { font-size:2.1rem; line-height:1.1; color:#2f3b46; font-variant-numeric:tabular-nums; }
.resumen-kpi h3 { margin:1rem 0 .65rem; color:#50575c; font-size:.88rem; text-transform:uppercase; font-weight:700; }
.resumen-kpi h3 span { cursor:help; text-transform:none; }
.resumen-kpi__cambio { margin:.05rem 0 .75rem; font-size:1rem; font-weight:700; }
.resumen-kpi__cambio.sube { color:#1ba576; }.resumen-kpi__cambio.baja { color:#e44b5e; }.resumen-kpi__cambio.igual { color:#737b82; }.resumen-kpi__cambio.sin-base { color:#737b82; }
.resumen-kpi__pie { color:#737b82; margin:auto 0 0; line-height:1.35; font-size:.8rem; }
.resumen-barras { margin-bottom:1rem; }.resumen-barras .grafica { height:270px; }
.resumen-sin-rango { min-height:270px; display:grid; place-items:center; text-align:center; color:#737b82; background:#fafbfc; border:1px dashed #d9dde1; border-radius:6px; padding:1rem; }
.reporte-vacio { min-height:250px; display:grid; place-content:center; gap:.45rem; text-align:center;
  color:#50575c; background:#fafbfc; border:1px dashed #cfd5da; border-radius:8px; padding:2rem 1rem; }
.reporte-vacio h3 { margin:0; color:#2f3b46; font-size:1.15rem; }
.reporte-vacio p { max-width:580px; margin:0; color:#737b82; line-height:1.5; }
@media (max-width:900px){ .resumen-kpis { grid-template-columns:1fr; }.resumen-kpi { min-height:0; } }

/* Comparativo consolidado: la sucursal es el enlace de drill-down y la nota de
   capacidad evita presentar la ocupación actual como una reconstrucción histórica. */
.comparativo-sucursales { margin-bottom:1rem; }
.comparativo-sucursales > .muted { margin:.2rem 0 .8rem; }
.tabla-scroll--comparativo { max-height:none; }
.comparativo-sucursales table.grid.reporte th { min-width:90px; max-width:none; }
.comparativo-sucursales table.grid.reporte th:first-child { min-width:125px; }
.comparativo-sucursales table.grid.reporte th small { display:block; margin-top:.15rem; font-size:.65rem; color:#70757a; }
.comparativo-sucursales__link { color:#7b234b; font-weight:750; text-underline-offset:2px; }
.comparativo-sucursales__vacio { text-align:center !important; color:#737b82; padding:1.2rem !important; }

@media (max-width:640px){
  .alcance-reporte { margin-left:0; margin-right:0; padding:.35rem; }
  .alcance-reporte__link { min-height:44px; padding:.55rem .8rem; }
  .alcance-reporte__actual { margin-bottom:.65rem; }
}

/* Tendencias: Servicio (multiselect) + Métrica como par de botones, igual que el real. */
.tend-controles { display:flex; align-items:center; gap:2rem; flex-wrap:wrap; margin-bottom:.8rem; }
.tend-servicio { display:flex; align-items:center; gap:.6rem; }
.tend-servicio > span { font-weight:700; font-size:.9rem; color:#444; white-space:nowrap; }
.tend-servicio .ms { width:280px; }
.tend-metricas { display:flex; align-items:center; gap:.35rem; }
.tend-metricas span { font-weight:700; font-size:.85rem; color:#444; margin-right:.3rem; }
.tend-metricas .btn { background:#e0e1e2; color:#5c5c5c; padding:.4rem .8rem; font-size:.82rem; }
.tend-metricas .btn.active { background:#9aa0a6; color:#fff; }

/* Fila TOTALES del Detalle de Ingresos por Hora. */
table.grid.reporte tfoot tr.totales th { background:#fafafa; font-weight:700; border-top:2px solid #e5e5e5;
  position:sticky; bottom:0; }

/* Alto de las gráficas: con maintainAspectRatio:false el canvas llena a su
   contenedor, así que el alto se define AQUÍ (~250px como el real) en vez de
   quedar en manos del aspecto ancho/2 de Chart.js. */
.rep-card .grafica { position:relative; height:250px; }
/* Los pasteles y las barras horizontales necesitan algo más de aire. */
.rep-panel[data-panel="servicios"] .grafica { height:340px; }
.rep-panel[data-panel="categoria"] .grafica { height:280px; }
.categorias-ayuda { margin:.1rem 0 .85rem; max-width:760px; }
.categorias-scroll { max-height:calc(100vh - 300px); }
.categorias-tabla { width:100%; }
.categorias-tabla td:first-child { width:55%; }
.categoria-form input { width:100%; min-width:180px; }
.categorias-pagina { background:#fff; border:1px solid #eee; border-radius:8px; padding:1.2rem; }
.categorias-pagina h2 { margin:0; color:#333; font-size:1.08rem; }
.categorias-pagina .categorias-ayuda { margin:.45rem 0 1rem; }
/* `>` obligatorio: sin él, `:first-child` no está acotado al hijo directo del panel
   y también matcheaba la primera .rep-card DENTRO de .rep-2col ("Distribución de
   Ingresos por Hora"), que quedaba 50px más alta que su vecina de la misma fila. */
.rep-panel[data-panel="dias"] > .rep-card:first-child .grafica { height:300px; }

/* ---------- Línea de la hora actual (agenda) ---------- */
/* La grilla es el marco de referencia: la línea se posiciona en px sobre ella. */
.contenido { position:relative; }
.linea-ahora { position:absolute; left:64px; right:0; height:0; border-top:2px solid #3b9ae1;
  pointer-events:none; z-index:3; }
/* Punto en el arranque de la línea, como en un calendario. */
.linea-ahora::before { content:''; position:absolute; left:-4px; top:-5px; width:8px; height:8px;
  border-radius:50%; background:#3b9ae1; }
/* La hora exacta, encima de la columna de horas. */
.linea-ahora .etiqueta { position:absolute; left:-62px; top:-8px; background:#3b9ae1; color:#fff;
  font-size:.62rem; font-weight:700; padding:1px 4px; border-radius:3px; line-height:1.3; }

/* ---------- Aprovechar la ventana completa ---------- */
/* 1200px dejaba ~40% de pantalla en blanco con 8 espacios. El contenido manda. */
.container { max-width:1600px; }
.container--ancho { max-width:none; padding:0 1.5rem; }
/* La agenda ocupa todo el ancho útil: más pixeles por columna = más legible. */
.agenda-full .ui.segment { margin:.5rem 0; }
.agenda-full table.agenda_citas { min-width:0; }
/* Con más ancho, la celda de cita puede respirar. */
.agenda-full .cita { font-size:.75rem; }

/* ---------- Densidad de las tablas de administración ---------- */
/* 16px y filas de 48px es tamaño de texto de lectura, no de tabla de datos:
   desperdicia alto y hace que quepan pocos registros. Bajar a ~13px/34px mete
   ~40% más filas en la misma pantalla sin perder legibilidad. */
table.grid { font-size:.85rem; }
table.grid th, table.grid td { padding:.45rem .7rem; }
table.grid thead th { font-size:.78rem; text-transform:none; color:#444; background:#fafafa;
  position:sticky; top:0; z-index:1; }
table.grid tbody tr:hover { background:#fdf6fa; }
/* Los botones de fila no necesitan tamaño de botón principal. */
table.grid .btn { padding:.25rem .5rem; font-size:.8rem; }

/* La grilla llena la ventana también a lo ALTO: sin esto quedaban ~120px muertos
   abajo mientras las filas de 30 min salían más apretadas de lo necesario.
   `.ui.segment` solo existe en la agenda, así que no afecta a los reportes. */
.ui.segment { min-height:calc(100vh - 130px); display:flex; flex-direction:column; }
.ui.segment > .agenda { flex:1; display:flex; flex-direction:column; }
.agenda > .contenido { flex:1; display:flex; flex-direction:column; }
/* `height:100%` en un <table> NO lo estira (el navegador la trata como mínimo):
   como item flex sí toma el alto sobrante y las 28 filas se lo reparten. */
.contenido > table.agenda_citas { flex:1; }

/* La columna Fecha es sticky con fondo blanco propio: sin esta regla el hover
   iluminaba toda la fila MENOS esa celda (el fondo fijo tapaba el de la fila). */
table.grid.reporte tbody tr:hover td:first-child { background:#fdf6fa; }

/* El dropdown-multiselect también fuera de los modales (filtros del reporte de
   Ventas): le da el borde/relleno del input y el ancho de cada columna. */
.ms-control { border:1px solid rgba(34,36,38,.15); border-radius:.28rem; padding:.55em .9em; background:#fff; min-height:38px; }
.filtros .f-campo .ms { width:170px; }
.filtros .f-campo.f-ancho .ms { width:300px; }
.filtros .f-campo .ms-menu { min-width:230px; }

/* ---------- Gift cards ---------- */
.notice { padding:.75rem 1rem; border-radius:6px; margin-bottom:1rem; font-weight:600; }
.notice--error { background:#fdecea; border:1px solid #f5c6cb; color:#9f3a38; }
.notice--ok { background:#eefaf3; border:1px solid #b9e6c9; color:#177b45; }
.gift-resumen { display:flex; flex-wrap:wrap; gap:.75rem; color:#666; }
.gift-resumen span { background:#fff; border:1px solid #eee; padding:.35rem .6rem; border-radius:999px; }
.gift-resumen b { color:#333; }
.gift-seccion { background:#fff; border:1px solid #eee; border-radius:8px; padding:1rem; margin-bottom:1rem; }
.gift-seccion__head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.85rem; }
.gift-seccion h2, .gift-form h2 { margin:0; color:#333; font-size:1.05rem; }
.gift-seccion p, .gift-form__help { color:#70757a; margin:.35rem 0 0; line-height:1.45; font-size:.85rem; }
.gift-tabla-scroll { max-height:calc(100vh - 300px); }
.gift-tabla td { vertical-align:middle; }
.gift-tabla small { color:#777; }
.gift-tabla .num { text-align:right; font-variant-numeric:tabular-nums; }
.gift-estado { display:inline-block; border-radius:999px; padding:.2rem .55rem; font-weight:700; font-size:.75rem; white-space:nowrap; }
.gift-estado--activo { background:#eaf8ef; color:#177b45; }
.gift-estado--borrador { background:#f3f4f5; color:#5b6268; }
.gift-estado--inactivo, .gift-estado--cancelada { background:#fdecea; color:#9f3a38; }
.gift-estado--canjeada { background:#eaf3fb; color:#2777b3; }
.gift-estado--vencida { background:#fff4e5; color:#9f6c16; }
.gift-codigo { background:#f6f7f8; border:1px solid #e3e5e7; border-radius:4px; padding:.2rem .35rem; color:#343a40; font-weight:700; white-space:nowrap; }
.gift-acciones { min-width:195px; }
.gift-canjear { display:flex; gap:.3rem; align-items:center; flex-wrap:wrap; }
.gift-canjear input { width:145px; padding:.38rem .5rem; font-size:.78rem; }
.gift-vacio { text-align:center; color:#777; padding:2rem 1rem; background:#fafbfc; border:1px dashed #d9dde1; border-radius:6px; line-height:1.6; }
.gift-buscar { display:flex; align-items:center; gap:.4rem; }
.gift-buscar label { white-space:nowrap; }.gift-buscar input { width:180px; padding:.45rem .6rem; }.gift-buscar .btn { padding:.45rem .7rem; }
.gift-form { max-width:860px; background:#fff; border:1px solid #eee; border-radius:8px; overflow:hidden; }
.gift-form__section { padding:1.2rem; }.gift-form__section h2 { margin-bottom:1rem; }
.gift-form .field { margin-bottom:1rem; }.gift-form .field:last-child { margin-bottom:0; }
.gift-form .ms { max-width:100%; }.gift-form .ms-control { min-height:42px; }
.gift-form textarea { width:100%; resize:vertical; }
.gift-form__help { padding:0 1.2rem 1rem; }.gift-form__actions { border-top:1px solid #eee; background:#fafafa; padding:.85rem 1.2rem; display:flex; justify-content:space-between; gap:.5rem; }
.gift-emision-resumen { display:flex; flex-direction:column; gap:.45rem; padding:.8rem; background:#fff8fb; border:1px solid #f8d5e3; border-radius:6px; margin-bottom:1rem; color:#555; font-size:.88rem; }
.req { color:#db2828; }

/* --- Tarjeta de regalo con diseño subible (como el catálogo del real) ------
   Proporción 8:5 = los 800×500 recomendados. El diseño lo sube la dueña; los
   datos van SIEMPRE encima, sobre una franja oscura para leerse en cualquier
   imagen. Sin imagen: gradiente rosa de la marca (gcard--default). */
.gcard { position:relative; aspect-ratio:8/5; border-radius:14px; overflow:hidden;
  background:linear-gradient(135deg,#ff9fc4,#c56183); background-size:cover; background-position:center;
  box-shadow:0 6px 24px rgba(0,0,0,.14); color:#fff; }
.gcard--grande { max-width:800px; width:100%; }
.gcard--mini { width:280px; flex:none; }
.gcard__overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between;
  padding:5% 6%; background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.72) 100%); }
.gcard__marca { font-size:.72rem; font-weight:600; letter-spacing:.14em; opacity:.9; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.gcard__cuerpo { display:flex; flex-direction:column; gap:.35rem; }
.gcard__nombre { font-size:clamp(1.1rem,3.2vw,2.1rem); font-weight:700; line-height:1.15; text-shadow:0 2px 6px rgba(0,0,0,.55); }
.gcard__servicios { font-size:clamp(.7rem,1.6vw,.95rem); opacity:.95; text-shadow:0 1px 4px rgba(0,0,0,.6);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.gcard__pie { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-top:.3rem; }
.gcard__codigo { font-family:ui-monospace,Menlo,monospace; font-weight:700; font-size:clamp(.85rem,2.2vw,1.3rem); letter-spacing:.06em; text-shadow:0 2px 5px rgba(0,0,0,.55); }
.gcard__vence { font-size:clamp(.65rem,1.5vw,.85rem); opacity:.9; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.gcard__precio { background:rgba(255,159,196,.95); color:#5c1f3c; font-weight:700; white-space:nowrap;
  font-size:clamp(.9rem,2.4vw,1.4rem); padding:.35em .85em; border-radius:999px; }
.gcard--mini .gcard__overlay { padding:8% 7%; }
.gcard--mini .gcard__nombre { font-size:1rem; }
.gcard--mini .gcard__precio { font-size:.8rem; }
.gcard-thumb { display:block; width:72px; aspect-ratio:8/5; border-radius:6px;
  background:linear-gradient(135deg,#ff9fc4,#c56183); background-size:cover; background-position:center;
  border:1px solid rgba(34,36,38,.15); }
.gift-diseno__fila { display:flex; gap:1.2rem; align-items:flex-start; flex-wrap:wrap; }
.gift-diseno__acciones { display:flex; flex-direction:column; gap:.55rem; align-items:flex-start; }
.gift-diseno { margin-top:1rem; background:#fff; border:1px solid #eee; border-radius:8px; max-width:860px; }
.tarjeta-wrap { display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }
.tarjeta-acciones { display:flex; gap:.6rem; }

/* --- Acceso (login): la primera cara de la agenda, con la marca ------------ */
.login-body { min-height:100vh; margin:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#ffe3ef 0%,#ff9fc4 45%,#bd3b72 100%); }
.login-wrap { width:100%; max-width:420px; padding:1.2rem; }
.login-card { background:#fff; border-radius:16px; padding:2.4rem 2.2rem 2rem;
  box-shadow:0 18px 50px rgba(102,21,54,.35); display:flex; flex-direction:column; gap:.9rem; }
.login-marca { display:flex; flex-direction:column; align-items:center; gap:.15rem; }
.login-marca__nombre { font-size:1.9rem; font-weight:900; letter-spacing:.14em; color:#661536; line-height:1; }
.login-marca__grupo { font-size:.78rem; font-weight:800; letter-spacing:.5em; color:#ff9fc4; padding-left:.5em; }
.login-sub { margin:0; text-align:center; color:#888; font-size:.85rem; }
.login-error { margin:0; background:#fdecea; color:#9f3a38; border:1px solid #f5c6c3;
  border-radius:6px; padding:.6rem .8rem; font-size:.88rem; text-align:center; }
.login-form { display:flex; flex-direction:column; gap:.9rem; margin-top:.3rem; }
.login-form label { display:flex; flex-direction:column; gap:.35rem; font-size:.85rem; }
.login-form input { padding:.75em .9em; font-size:15px; }
.login-boton { width:100%; padding:.85rem 1rem; font-size:1rem; margin-top:.3rem;
  background:linear-gradient(120deg,#ff9fc4,#ec6ca0); }
.login-boton:hover { filter:brightness(.97); }
.login-pie { margin:.4rem 0 0; text-align:center; color:#aaa; font-size:.75rem; line-height:1.5; }
@media (max-width:480px) { .login-card { padding:1.8rem 1.3rem 1.5rem; } }

/* --- Comida de la sucursal en la grilla: rayada, sin cursor de acción --- */
td.cita.comida { background:repeating-linear-gradient(135deg,#f4f5f6 0 8px,#ececee 8px 16px); cursor:default; }

/* --- Sucursales y horarios (editor, solo admin) --- */
.sucursales-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:1rem; }
.sucursal-card { background:#fff; border:1px solid #eee; border-radius:10px; padding:1.1rem 1.3rem;
  display:flex; flex-direction:column; gap:.7rem; }
.sucursal-card h2 { margin:0; font-size:1.05rem; }
.sucursal-card__horas { display:flex; gap:1rem; }
.sucursal-card__horas label { display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; }
.sucursal-card__comida-toggle { display:flex; align-items:center; gap:.45rem; }
.sucursal-card__resumen { margin:0; font-size:.8rem; }
.sucursal-card .btn { align-self:flex-start; }

/* --- Permisos por cuadrante (Usuarios) --- */
.permisos { border:1px solid #eee; border-radius:8px; padding:1rem 1.2rem; margin:1rem 0; }
.permisos legend { font-weight:700; padding:0 .4rem; }
.permisos__tipo { display:block; margin-bottom:.5rem; }
.permisos__grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:.45rem .9rem; margin:.6rem 0 .4rem 1.6rem; }
.permisos__grid .check { display:flex; align-items:center; gap:.45rem; }
.permisos-celda { max-width:520px; }
.permiso-chip { display:inline-block; background:#fff0f6; border:1px solid #f3c7d9; color:#8d3f62;
  border-radius:999px; padding:.12rem .6rem; font-size:.75rem; margin:.12rem .2rem .12rem 0; white-space:nowrap; }
.permiso-chip--admin { background:#ff9fc4; border-color:#ff9fc4; color:#fff; font-weight:600; }
@media (max-width:640px) { .gift-buscar { width:100%; }.gift-buscar input { flex:1; width:auto; }.gift-acciones { min-width:150px; } }