/* ============================================================
   Deluxe Studio — CRM
   Sistema visual portado de MyCuki (tutoria/web/src/styles/socrates.css):
   crema #FAF6EC, naranja #D88C3F, Montserrat + Inter, esquinas 16–20px.

   Este archivo SOLO lo cargan las pantallas de /app. La landing usa
   estilos.css y no lo carga, por eso aquí se pueden reescribir los
   tokens sin tocarla.
   ============================================================ */

:root {
  /* ---- paleta MyCuki, tema claro ---- */
  --bg:            #FAF6EC;
  --bg-2:          #F3EADA;
  --surface:       #FFFFFF;
  --surface-2:     #FBF6EC;
  --line:          #EFE4CE;
  --line-2:        #E3D2B4;
  --primary:       #D88C3F;
  --primary-2:     #E8A85C;
  --primary-strong:#B96E24;
  --primary-soft:  #FBF1E2;
  --good:          #2E7D55;
  --good-soft:     #E3F3EA;
  --danger:        #B4453E;
  --danger-soft:   #FBEDEC;
  --focus:         #8A4E12;
  --shadow:        0 6px 22px rgba(58, 30, 14, .07);
  --shadow-lg:     0 20px 50px rgba(58, 30, 14, .14);

  /* ---- tokens que ya usan las 11 pantallas, remapeados ----
     Así ninguna pantalla necesita tocar sus variables: cambian los
     valores aquí y todas adoptan MyCuki de una vez. */
  --fondo:      var(--surface);   /* tarjetas, tablas, diálogos */
  --superficie: var(--bg-2);      /* cabeceras de tabla, hover, indicadores */
  --borde:      var(--line);
  --texto:      #3D2510;
  --suave:      #7A5F43;
  --titulo:     #3D2510;
  --acento:     var(--primary-strong);
  --deco:       var(--primary);
  --deco-tenue: #B49B7F;
  --pie:        #3D2510;
  --btn-fondo:  var(--primary);
  --btn-texto:  #FFFFFF;

  --serif: 'Montserrat', 'Inter', system-ui, sans-serif;   /* display */
  --sans:  'Inter', system-ui, -apple-system, sans-serif;  /* lectura */
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  --radio: 14px;   /* controles */
  --rc: 16px;      /* botones */
  --rk: 20px;      /* tarjetas */
  --ancho: 1180px;
  --transicion: 140ms cubic-bezier(.4, 0, .2, 1);

  color-scheme: light;
}

:root[data-tema='oscuro'] {
  --bg:            #211812;
  --bg-2:          #2A201A;
  --surface:       #2C221B;
  --surface-2:     #332822;
  --line:          #3D3128;
  --line-2:        #4A3B2F;
  --primary:       #E8A85C;
  --primary-2:     #F0BE7E;
  --primary-strong:#D88C3F;
  --primary-soft:  #3A2C1E;
  --good:          #5FCB93;
  --good-soft:     #23342A;
  --danger:        #E8938C;
  --danger-soft:   #3A2422;
  --focus:         #F0BE7E;
  --shadow:        0 6px 22px rgba(0, 0, 0, .35);
  --shadow-lg:     0 20px 50px rgba(0, 0, 0, .5);

  --texto:      #F4E9D8;
  --suave:      #C6B097;
  --titulo:     #F4E9D8;
  --acento:     var(--primary);
  --deco:       var(--primary);
  --deco-tenue: #8C7358;
  --pie:        #1A120D;
  --btn-texto:  #241812;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --bg:            #211812;
    --bg-2:          #2A201A;
    --surface:       #2C221B;
    --surface-2:     #332822;
    --line:          #3D3128;
    --line-2:        #4A3B2F;
    --primary:       #E8A85C;
    --primary-2:     #F0BE7E;
    --primary-strong:#D88C3F;
    --primary-soft:  #3A2C1E;
    --good:          #5FCB93;
    --good-soft:     #23342A;
    --danger:        #E8938C;
    --danger-soft:   #3A2422;
    --focus:         #F0BE7E;
    --shadow:        0 6px 22px rgba(0, 0, 0, .35);
    --shadow-lg:     0 20px 50px rgba(0, 0, 0, .5);

    --texto:      #F4E9D8;
    --suave:      #C6B097;
    --titulo:     #F4E9D8;
    --acento:     var(--primary);
    --deco:       var(--primary);
    --deco-tenue: #8C7358;
    --pie:        #1A120D;
    --btn-texto:  #241812;

    color-scheme: dark;
  }
}

/* ---------- base ---------- */

/* Reserva el sitio de la barra de desplazamiento aunque no haga falta.
   Sin esto, al pasar de una pantalla corta a una larga el contenido
   centrado se desplaza 7 px de lado y parece que la página baila. */
html { scrollbar-gutter: stable; }

body {
  background: var(--bg);
  color: var(--texto);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--titulo);
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: pretty;
}

/* Los controles de formulario NO heredan la tipografía por su cuenta: un
   <button> o un <select> sin font-family cae en la del sistema (Arial) y
   aparece un tipo suelto en medio del CRM. Sócrates lo resuelve así
   (socrates.css:30 y :114); aquí se copia esa misma regla para que ningún
   control futuro pueda escaparse. */
button, input, select, textarea { font-family: inherit; }

.mono { font-family: var(--mono); }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- estructura ---------- */

.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100svh;
}

.lateral {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: sticky;
  top: 0;
  height: 100svh;
  overflow-y: auto;
}

.lateral__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 18px 8px;
}
.lateral__marca-txt { min-width: 0; flex: 1; }
.lateral__plegar {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--suave);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.lateral__plegar svg { width: 15px; height: 15px; }
.lateral__plegar:hover { background: var(--bg-2); color: var(--texto); }
.lateral__logo {
  width: 38px; height: 38px;
  border-radius: 13px;
  background: linear-gradient(150deg, var(--primary-2), var(--primary));
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 800; font-size: 1.05rem;
  flex-shrink: 0;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--primary) 28%, transparent);
}
.lateral__nombre {
  display: block;
  font-family: var(--serif); font-weight: 800; font-size: 15.5px;
  letter-spacing: -.01em; line-height: 1.2;
}
.lateral__sub {
  display: block; margin-top: 2px;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--suave); letter-spacing: .06em; text-transform: uppercase;
}

.lateral__grupo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--suave);
  padding: 14px 12px 6px; margin: 0;
}

/* Los enlaces son píldoras, como el nav de MyCuki */
.lateral__enlace {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--suave);
  font-size: 13.5px; font-weight: 600;
  /* Con el icono delante, «Agenda de citas» más su pastilla se partía en
     dos líneas y rompía el ritmo de la lista. Todo cabe en una si no se
     permite el salto: el más largo, «Personal / planilla», mide 169 px. */
  white-space: nowrap;
  transition: background var(--transicion), color var(--transicion);
}
.lateral__enlace:hover { background: var(--bg-2); color: var(--texto); }
.lateral__enlace--activo,
.lateral__enlace--activo:hover { background: var(--texto); color: var(--bg); }

/* El icono va más apagado que el texto para que no compita con él; en el
   módulo abierto sube a opacidad plena y refuerza dónde estás. */
.lateral__icono {
  width: 17px; height: 17px;
  flex-shrink: 0;
  opacity: .62;
}
.lateral__enlace:hover .lateral__icono { opacity: .85; }
.lateral__enlace--activo .lateral__icono { opacity: 1; }

/* ---------- menú plegado ----------
   Queda una columna de iconos de 68px. El nombre de cada módulo sigue
   disponible en el title, así que no se pierde información: se cambia
   leerla siempre por leerla al pasar el ratón. */
.app--plegado { grid-template-columns: 68px 1fr; }
.app--plegado .lateral { padding: 18px 10px; align-items: stretch; }
.app--plegado .lateral__marca { flex-direction: column; gap: 12px; padding: 4px 0 14px; }
.app--plegado .lateral__marca-txt { display: none; }
.app--plegado .lateral__plegar svg { transform: rotate(180deg); }

.app--plegado .lateral__enlace { justify-content: center; padding: 9px 0; }
.app--plegado .lateral__texto,
.app--plegado .lateral__pastilla { display: none; }

/* El título del grupo se queda sin sitio, pero la separación entre
   grupos sí hace falta: pasa a ser una línea. */
.app--plegado .lateral__grupo {
  height: 1px; padding: 0; margin: 9px 8px;
  overflow: hidden; text-indent: -999em;
  background: var(--line);
}

.app--plegado .lateral__pie { flex-direction: column; gap: 7px; }
.app--plegado .lateral__yo { display: none; }
.app--plegado .lateral__salir { font-size: 11px; padding: 4px 6px; }

.lateral__futuro { opacity: .42; pointer-events: none; }
.lateral__pastilla {
  margin-left: auto; flex-shrink: 0;
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 999px; padding: 3px 8px;
  background: var(--bg-2); color: var(--suave); border: 0;
}

.lateral__pie {
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: center; gap: 9px;
  border-top: 1px solid var(--line);
}
.lateral__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-2); color: var(--suave);
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 11.5px;
  flex-shrink: 0;
}
/* Tu avatar y tu nombre son el enlace a Mi cuenta. Ocupan el hueco que antes
   ocupaba `.lateral__yo`, así que el enlace es quien crece y el botón de Salir
   se queda donde estaba. */
.lateral__quien {
  display: flex; align-items: center; gap: 9px;
  min-width: 0; flex: 1;
  text-decoration: none; color: inherit;
  padding: 3px; margin: -3px;
  border-radius: 999px;
  transition: var(--transicion);
}
.lateral__quien:hover { background: var(--bg-2); }
.lateral__quien:hover .lateral__avatar { background: var(--primary-soft); color: var(--primary-strong); }
.app--plegado .lateral__quien { flex: 0 0 auto; justify-content: center; }

.lateral__yo { min-width: 0; flex: 1; }
.lateral__yo b { display: block; font-weight: 600; font-size: 13px; }
.lateral__yo span { font-size: 11px; color: var(--suave); text-transform: capitalize; }
.lateral__salir {
  background: none; border: 0; cursor: pointer;
  color: var(--suave); font-family: var(--sans);
  font-size: 12.5px; font-weight: 600;
  padding: 6px 10px; border-radius: 999px;
  transition: var(--transicion);
}
.lateral__salir:hover { color: var(--texto); background: var(--bg-2); }

.principal {
  min-width: 0;
  padding: clamp(18px, 2.4vw, 26px) clamp(14px, 2.4vw, 30px) 70px;
  max-width: calc(var(--ancho) + 60px);
  /* Sin esto el contenido se pega al menú y deja un hueco muerto a la
     derecha: en una pantalla de 1920 eran 424 px de vacío.
     El width:100% no sobra: un margen automático en horizontal anula el
     estirado propio de una celda de rejilla y el bloque se encoge al
     tamaño de su contenido (se quedaba en 780 px de los 1240). */
  width: 100%;
  margin-inline: auto;
}

.cabecera {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.cabecera h1 { font-size: clamp(21px, 2.1vw, 27px); letter-spacing: -.02em; margin: 0 0 3px; }
.cabecera__nota { margin: 0; color: var(--suave); font-size: 13.5px; max-width: 68ch; }
.cabecera__acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* estilos.css (de la landing) también define estas dos: aquí mandan */
.titulo-seccion { font-family: var(--serif); font-size: clamp(21px, 2.1vw, 27px); letter-spacing: -.02em; margin: 0 0 3px; }
.etiqueta {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .04em; text-transform: none;
  color: var(--suave); margin: 0 0 6px;
}
.entradilla { color: var(--suave); font-size: 15px; max-width: 64ch; margin: 0 0 20px; }

/* ---------- tarjetas ---------- */

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rk);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.tarjeta + .tarjeta { margin-top: 16px; }
/* Título de sección. En Sócrates los títulos van SIEMPRE en la display
   (Montserrat); la monoespaciada se reserva a metadatos de una o dos
   palabras —fechas, referencias, código—, nunca a un encabezado. */
.tarjeta__titulo {
  font-family: var(--serif); font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--suave); margin: 0 0 14px;
}

.rejilla { display: grid; gap: 11px; }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }
/* auto-fit y no un numero fijo: la consulta de medios mira el ancho de la
   VENTANA, pero el menu lateral se come 240px fijos. Entre 1001 y 1186px
   quedaban cinco columnas de 128px y cualquier importe de cuatro digitos
   partia en dos lineas con el «S/» solo arriba. Asi se acomoda al hueco que
   de verdad hay, sin puntos de ruptura que mantener. */
.rejilla--5 { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
/* Se intentó estirar el último con `grid-column: auto / -1` para que
   cerrara la fila. Peor: la colocación automática lo mandó a la cuarta
   columna de la segunda fila y dejó un hueco de tres tarjetas debajo de
   las primeras. El reparto natural de auto-fit —cuatro arriba y una
   debajo— se lee mejor que cualquier apaño. */

/* Avance contra la meta del mes. La barra se lee de un vistazo; el número
   va al lado porque «68%» dice algo que una barra sola no dice. */
.avance { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.avance__barra {
  width: 62px; height: 6px; border-radius: 999px;
  background: var(--line); overflow: hidden; flex-shrink: 0;
}
.avance__barra i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
}
.avance b { font-variant-numeric: lining-nums tabular-nums; min-width: 44px; }

/* Indicadores: el .kpi de MyCuki */
.dato {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
/* Un indicador dentro de otra tarjeta era blanco sobre blanco: solo lo
   separaba el borde y el bloque se leía plano. Sobre crema se distingue
   sin necesidad de más sombra ni más línea. */
.tarjeta .dato { background: var(--surface-2); box-shadow: none; }

.dato__k {
  font-size: 11px; color: var(--suave);
  text-transform: uppercase; letter-spacing: .05em; margin: 0 0 5px;
}
.dato__v {
  font-family: var(--serif); font-weight: 800; font-size: 25px;
  letter-spacing: -.02em; color: var(--titulo); line-height: 1.15;
  font-variant-numeric: lining-nums tabular-nums;
  /* Es un <p>: sin esto el navegador le pone 1em de margen arriba y abajo,
     que a 25px son 50px de aire y estiraban la tarjeta a 136px de alto. */
  margin: 0;
}
/* Debajo de cada indicador van frases enteras («Meta fija — escenario de
   3 manicuristas»), no un dato suelto: eso es texto de lectura y va en
   Inter. En Sócrates la monoespaciada de un KPI es solo el delta, tipo +12%. */
.dato__extra { font-size: 11.5px; color: var(--suave); margin: 4px 0 0; line-height: 1.45; }

/* ---------- tablas ---------- */

.tabla-envoltura {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--rk);
  box-shadow: var(--shadow);

  /* Sombra en el borde que aparece SOLO si hay más tabla hacia ese lado.
     En el celular la tabla se corta a media columna y nada indicaba que
     se podía arrastrar: se veía como un texto cortado, no como que hay
     más. Las dos capas `local` se desplazan con el contenido y tapan la
     sombra al llegar al extremo, así que la pista desaparece sola. */
  background:
    linear-gradient(to right, var(--surface) 40%, transparent) left center / 34px 100% no-repeat local,
    linear-gradient(to left,  var(--surface) 40%, transparent) right center / 34px 100% no-repeat local,
    radial-gradient(farthest-side at 0    50%, color-mix(in srgb, var(--texto) 16%, transparent), transparent) left center / 13px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--texto) 16%, transparent), transparent) right center / 13px 100% no-repeat scroll;
  background-color: var(--surface);
}
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 680px; }

/* Para tablas de pocas columnas cortas. El suelo de 680px evita que una tabla
   de 8 columnas se aplaste en el celular, pero a una de 4 le inventa hasta
   144px de arrastre que no necesita: con `th { white-space: nowrap }` ya no
   puede colapsar. Se marca a mano donde sobra, en vez de quitarlo para todas. */
.tabla--compacta { min-width: 0; }

/* La ayuda bajo un dato numerico puede partirse: «incluye 10 min de limpieza»
   ocupaba una linea entera que nunca envolvia y estiraba su columna. */
.tabla .num .fila-sub { white-space: normal; }
.tabla th {
  text-align: left; padding: 9px 13px;
  font-size: 10.5px; font-weight: 600; color: var(--suave);
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--line);
  white-space: nowrap; background: transparent;
}
.tabla td { padding: 8px 13px; border-top: 1px solid var(--line); vertical-align: middle; }
.tabla tbody tr:first-child td { border-top: 0; }
.tabla tbody tr { transition: background var(--transicion); }
.tabla tbody tr:hover { background: var(--surface-2); }
.tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.tabla tfoot td {
  padding: 9px 13px; font-weight: 700;
  border-top: 1px solid var(--line-2); background: var(--surface-2);
}

.fila-titulo { font-weight: 600; color: var(--texto); margin-bottom: 1px; }
.fila-sub { font-size: 12.5px; color: var(--suave); }
.fila-inactiva td { opacity: .5; }

.dinero {
  font-family: var(--serif); font-weight: 700; font-size: 14px;
  color: var(--texto); white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---------- pastillas ---------- */

.pastilla {
  display: inline-block; border: 0; border-radius: 999px;
  padding: 4px 10px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--bg-2); color: var(--suave);
  white-space: nowrap;
}
.pastilla--ok    { background: var(--good-soft);    color: var(--good); }
.pastilla--malo  { background: var(--danger-soft);  color: var(--danger); }
/* --aviso es suave; --info va rellena, como el .chip.on de MyCuki.
   Antes ambas eran el mismo naranja y dos estados distintos se veían igual. */
.pastilla--aviso { background: var(--primary-soft); color: var(--primary-strong); }
.pastilla--info  { background: var(--primary); color: #fff; }

/* ---------- botones ---------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--rc);
  padding: 11px 18px;
  font-family: var(--serif); font-weight: 700; font-size: 14px;
  letter-spacing: 0; text-transform: none;
  cursor: pointer;
  /* Sin nowrap. Una etiqueta larga —«Importar 1250 filas a categorías de
     gasto», «Restablecer acceso (contraseña provisional)»— no cabía en el
     botón en el celular y se cortaba por los dos lados: se leía «ar 1250
     filas a categorí». Un botón que envuelve se lee; uno cortado, no.
     Los botones de etiqueta corta no envuelven igualmente: inline-flex
     se ajusta a su contenido. */
  text-wrap: balance;
  transition: background var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.boton--primario {
  background: var(--primary); color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 30%, transparent);
}
.boton--primario:hover { background: var(--primary-strong); }
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: .55; cursor: not-allowed; }

.boton--contorno {
  background: var(--surface); color: var(--texto);
  border: 1px solid var(--line-2); box-shadow: none;
}
.boton--contorno:hover { background: var(--bg); border-color: var(--primary); }

.mini {
  border: 1px solid var(--line-2); background: var(--surface);
  color: var(--suave); border-radius: 999px;
  padding: 7px 13px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  cursor: pointer; white-space: nowrap;
  transition: var(--transicion);
}
.mini:hover { color: var(--texto); border-color: var(--primary); }
.mini--peligro:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

.acciones { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- formularios ---------- */

.campo { margin-bottom: 13px; }
.campo label {
  display: block; font-size: 11.5px; font-weight: 700;
  color: var(--suave); margin: 0 0 6px;
  text-transform: uppercase; letter-spacing: .06em;
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radio);
  padding: 11px 13px;
  color: var(--texto);
  font-family: var(--sans); font-size: 14.5px;
  outline: none;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo textarea { resize: vertical; line-height: 1.55; min-height: 84px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.campo__ayuda { font-size: 12.5px; color: var(--suave); margin: 5px 0 0; line-height: 1.45; }

/* Fila de días de la semana en pastillas. Vivía suelta en Automatizaciones; ahora la usan
   también los servicios, así que su sitio es aquí y no copiada en cada pantalla. */
/* Pregunta de permiso comercial, en corto. La usan la agenda y la caja: donde quiera que se
   cree una clienta hay que preguntarlo, porque el valor por defecto de la base es «no» y una
   ficha creada sin preguntar deja a esa clienta fuera de todos los avisos para siempre. */
.permiso-mini { border: 0; padding: 0; margin: 4px 0 0; }
.permiso-mini legend {
  padding: 0; font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--primary-strong); margin-bottom: 4px;
}
.permiso-mini__q { font-size: 12.5px; color: var(--suave); line-height: 1.5; margin: 0 0 8px; }
.permiso-mini__op { display: flex; gap: 9px; flex-wrap: wrap; }
.permiso-mini__op label {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px; cursor: pointer; margin: 0;
  font-size: 13px; font-weight: 500; color: var(--texto);
  background: var(--surface); text-transform: none; letter-spacing: 0;
  transition: var(--transicion);
}
.permiso-mini__op label:has(input:checked) {
  border-color: var(--primary); background: var(--primary-soft); color: var(--primary-strong);
}
.permiso-mini__op input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); }
.permiso-mini--falta legend { color: var(--danger); }

.dias { display: flex; flex-wrap: wrap; gap: 6px; }
.dias label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border: 1px solid var(--line-2); border-radius: 999px;
  font-size: 13px; cursor: pointer;
}
/* `accent-color` explícito: sin él el navegador las pinta de azul y la fila de días
   desentonaba con el resto del panel, que es cálido. */
.dias input { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--acento); }

/* Lista de servicios con casillas, agrupada por categoría. La usan la regla de
   automatización y la ficha de personal, así que su sitio es la hoja común. */
.lista-serv {
  max-height: 210px; overflow-y: auto;
  border: 1px solid var(--line-2); border-radius: var(--radio);
  background: var(--bg); padding: 6px 4px;
}
.lista-serv__cat {
  margin: 8px 0 4px; padding: 0 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--suave);
}
.lista-serv__cat:first-child { margin-top: 2px; }
/* Lleva el nombre de su contenedor delante por especificidad, no por gusto:
   `.campo label` de panel.css pesa 0,2,0 y dejaba esto en `display:block`,
   con la casilla pegada al texto. Con la clase del padre empatan y gana esta,
   que va después. */
.lista-serv .lista-serv__op {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; font-size: 14px; cursor: pointer;
}
.lista-serv__op:hover { background: var(--bg-2); }
.lista-serv__op input {
  flex: none; width: 17px; height: 17px; margin: 0; cursor: pointer;
  accent-color: var(--acento);
}
.lista-serv__aviso { margin: 0; padding: 12px 10px; color: var(--suave); font-size: 13.5px; }


.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campos-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.casilla { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.casilla input { width: 17px; height: 17px; accent-color: var(--primary); }
.casilla label {
  margin: 0; text-transform: none; letter-spacing: 0;
  font-size: 14px; font-weight: 400; color: var(--texto);
}

.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; }
.filtros .campo { margin: 0; min-width: 160px; }

/* Texto de apoyo permanente: ni error ni confirmación, así que no es un
   .aviso. Nació dentro de usuarios.html y subió aquí al necesitarla también
   Mi cuenta. Radio 16px y tono crema, como el .banner de MyCuki. */
.nota {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--rc);
  padding: 13px 15px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--suave);
}
/* Variante para fechas y referencias: van en mono, como en MyCuki. */
.nota--datos { font-size: 12.5px; }

/* `hidden` tiene que ganar siempre.
   La regla del navegador para [hidden] es `display: none`, pero la pisa
   cualquier clase de autor que declare `display` —y `.boton` declara
   `inline-flex`—. El resultado era un botón marcado como oculto que se seguía
   viendo: en la agenda salía «Confirmar» sobre una cita ya confirmada. Pasaba
   en cualquier .boton o .mini del sistema que se ocultara así. */
[hidden] { display: none !important; }

/* ---------- avisos y estados ---------- */

.aviso {
  display: none; margin: 14px 0;
  border-radius: 14px; padding: 11px 14px;
  font-size: 13.5px; border: 1px solid transparent;
}
.aviso--error {
  display: block; background: var(--danger-soft); color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}
.aviso--ok {
  display: block; background: var(--good-soft); color: var(--good);
  border-color: color-mix(in srgb, var(--good) 30%, transparent);
}

.vacio {
  border: 2px dashed var(--line-2); border-radius: 26px;
  padding: 48px 24px; text-align: center;
  color: var(--suave); font-size: 14.5px; background: transparent;
}
.cargando { color: var(--suave); padding: 22px 0; font-size: 14.5px; }

/* ---------- diálogos ---------- */

dialog {
  border: 1px solid var(--line); border-radius: 26px; padding: 0;
  background: var(--surface); color: var(--texto);
  max-width: 560px; width: calc(100vw - 32px);
  box-shadow: var(--shadow-lg);
}
dialog::backdrop { background: rgba(33, 24, 18, .48); backdrop-filter: blur(2px); }
.modal__cuerpo { padding: clamp(22px, 3vw, 30px); }
.modal__cuerpo h2 { font-size: 21px; font-weight: 800; margin-bottom: 5px; }
.modal__nota { color: var(--suave); font-size: 13.5px; margin: 0 0 18px; line-height: 1.5; }
.modal__pie { display: flex; gap: 9px; margin-top: 20px; }
.modal__pie .boton { flex: 1; }
dialog.ancho { max-width: 880px; }

/* ---------- responsive ---------- */

/* La tipografía va aquí y no solo dentro de la consulta de medios: un
   <button> sin font-family cae en la del sistema (Arial), y bastaría con
   mostrar este botón fuera de móvil para que apareciera un Arial suelto
   en medio del CRM. */
.lateral__menu { display: none; font-family: var(--sans); }

@media (max-width: 1000px) {
  .app { grid-template-columns: 1fr; }
  .lateral {
    position: fixed; inset: 0 auto 0 0; width: 256px; z-index: 120;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 0 0 50px rgba(0, 0, 0, .25);
  }
  .lateral--abierto { transform: none; }
  .lateral__menu {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 12px; padding: 9px 14px; margin-bottom: 16px;
    cursor: pointer; font-family: var(--sans);
    font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0;
    color: var(--texto);
  }
  .velo { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 110; display: none; }
  .velo--visible { display: block; }
  /* En cajón, plegar no significa nada: se abre y se cierra entero */
  .lateral__plegar { display: none; }
  .app--plegado { grid-template-columns: 1fr; }
  .app--plegado .lateral { padding: 18px 14px; }
  .app--plegado .lateral__marca { flex-direction: row; padding: 4px 4px 18px 8px; }
  .app--plegado .lateral__marca-txt,
  .app--plegado .lateral__texto,
  .app--plegado .lateral__yo { display: block; }
  .app--plegado .lateral__enlace { justify-content: flex-start; padding: 8px 12px; }
  .app--plegado .lateral__pie { flex-direction: row; }
  .app--plegado .lateral__grupo {
    height: auto; padding: 14px 12px 6px; margin: 0;
    text-indent: 0; background: none;
  }
  .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  /* Cinco indicadores no entran en tablet: pasan a tres y luego a dos */
}

@media (max-width: 780px) {
  /* Tres columnas de formulario no caben aqui: el texto de los
     desplegables se corta a media palabra. Dos si. */
  .campos-3 { grid-template-columns: 1fr 1fr; }
  .rejilla--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
  /* Una pastilla que ocupa la fila entera ya no necesita el nowrap que
     la mantiene en una línea dentro de una celda de tabla. */
  .cabecera__acciones .mini, .filtros__acciones .mini { white-space: normal; }
  .campos-2, .campos-3 { grid-template-columns: 1fr; }
  .modal__pie { flex-direction: column-reverse; }

  /* Filtros de dos en dos: uno por fila obliga a scrollear media
     pantalla antes de ver el primer dato. */
  .filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .filtros .campo { min-width: 0; }
  .filtros .campo--ancho { grid-column: 1 / -1; }
  .filtros .boton, .filtros .mini { grid-column: 1 / -1; width: 100%; }

  .tabla th { padding: 11px 12px; }
  .tabla td { padding: 12px 12px; }
  .tabla tfoot td { padding: 12px; }

  .cabecera { align-items: stretch; }
  .cabecera__acciones .boton { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   Señal de espera
   ============================================================ */

/* Barra en el borde superior, como la de MyCuki. No desplaza nada y
   no obliga a vaciar la pantalla para decir "estoy trabajando". */
.progreso {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 200;
  background: var(--bg-2);
  opacity: 0;
  transition: opacity 120ms linear;
  pointer-events: none;
}
.progreso::before {
  content: '';
  display: block;
  height: 100%;
  width: 38%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary-2), var(--primary));
}
.progreso--visible { opacity: 1; }
.progreso--visible::before { animation: dx-avance 1.1s ease-in-out infinite; }

@keyframes dx-avance {
  0%   { margin-left: -40%; width: 40%; }
  50%  { margin-left: 30%;  width: 55%; }
  100% { margin-left: 100%; width: 40%; }
}

/* El cartel de "Cargando…" tarda en aparecer: si la consulta responde
   antes, no llega a verse y no hay parpadeo. Solo se muestra cuando la
   espera es real y merece explicación. */
.cargando {
  color: var(--suave);
  padding: 22px 0;
  font-size: 14.5px;
  opacity: 0;
  animation: dx-aparecer-tarde 160ms linear 500ms forwards;
}
@keyframes dx-aparecer-tarde { to { opacity: 1; } }

/* Mientras se recarga, el contenido anterior se atenúa en vez de
   desaparecer: se mantiene la referencia visual y no salta el alto. */
.recargando { opacity: .45; transition: opacity 120ms linear; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .progreso--visible::before { animation: none; width: 100%; }
  .cargando { opacity: 1; animation: none; }
}

/* ---------- menú de acciones por fila ----------
   Sustituye a los tres botones repetidos en cada fila. Con 20 filas, ese
   patrón llenaba la tabla de ruido; aquí queda un solo botón que se abre. */
.acciones-menu { position: relative; display: inline-block; }
.acciones-menu__boton { display: inline-flex; align-items: center; gap: 6px; }
.acciones-menu__boton svg { width: 13px; height: 13px; }
/* En su propia capa, no dentro de la tabla: así escapa del recorte sin
   obligar a la tabla a renunciar a su scroll. shell.js le calcula el sitio
   al abrirla, porque una capa fija no sabe dónde está su botón. */
.acciones-menu__lista {
  position: fixed; z-index: 60;
  min-width: 168px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rc);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  padding: 5px;
}
.acciones-menu__op {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border: 0; border-radius: 10px;
  background: none; color: var(--texto);
  font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background var(--transicion), color var(--transicion);
}
.acciones-menu__op:hover { background: var(--bg-2); }
.acciones-menu__op--peligro { color: var(--danger); }
.acciones-menu__op--peligro:hover { background: var(--danger-soft); }

/* Aquí había dos reglas que le quitaban el overflow al contenedor y el
   min-width a la tabla, para que el menú no quedara recortado. Rompían
   cuatro pantallas en el celular: sin overflow, una tabla de 8 columnas ya
   no podía desplazarse de lado; sin min-width, se aplastaba hasta dejar las
   columnas en tiras verticales. La capa fija de arriba lo resuelve sin
   pedirle nada a la tabla. */

/* ---------- lo que se pulsa con el dedo ---------- */

/* En el celular y la tablet no hay ratón: hay una yema de unos 8 mm. Medido
   en el CRM, «Salir» quedaba en 27px de alto y los botones de fila (.mini)
   en 31. Se acierta, pero con puntería. Aquí crecen a 36, que es lo que
   recomiendan tanto Apple como Google para lo que se toca, sin cambiar nada
   en escritorio: allí el ratón acierta en 27px sin despeinarse. */
@media (max-width: 900px) {
  .mini { padding: 10px 15px; }
  .lateral__salir { padding: 9px 12px; }
  .acciones-menu__boton { padding-top: 9px; padding-bottom: 9px; }
}