/* ============================================
   DROOP — Hoja de estilos base del Método Vidroop
   Cada Droop hereda de aquí. Las variables --app-*
   se sobrescriben en app-config.css / app-config.js
   ============================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Open Sans', sans-serif; background-color: #F3F3F3; min-height: 100vh; font-size: 15px; }
a { text-decoration: none; color: inherit; }

:root {
  /* === Paleta Vidroop fija (no se cambia) === */
  --jd-yellow: #F4B82E;
  --jd-red:    #E84A3C;
  --jd-green:  #6FBE3F;
  --jd-blue:   #2D9DE6;
  --jd-violet: #C878E6;
  --jd-orange: #FF8C5A;
  --jd-text:   #5D5D5D;
  --jd-bg:     #F3F3F3;

  /* === Variables configurables por droop === */
  --app-primary: #2D9DE6;
  --app-primary-dark: #B4282B;            /* color de acento de la app */
  --app-gradient-from: #eaba4e;      /* barra superior — color izquierdo */
  --app-gradient-to:   #9bca80;      /* barra superior — color derecho */
}

/* ============================================
   SISTEMA DE TOOLTIPS (data-tip) — Vidroop 1.4.2
   Uso: <button data-tip="Editar" aria-label="Editar"> ...
   Opcional: data-tip-pos="top" (defecto) | "bottom" | "left" | "right"
   ============================================ */
[data-tip] { position: relative; }
[data-tip]::after,
[data-tip]::before {
  position: absolute;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease-in-out;
  transition-delay: 0s;
  z-index: 1000;
}
[data-tip]::after {
  content: attr(data-tip);
  background: #FFFFFF;
  color: #5D5D5D;
  font-size: 14px; font-weight: 500;
  font-family: 'Open Sans', sans-serif;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10), 0 0 0 1px #FFFFFF;
  letter-spacing: 0;
  text-transform: none;
}
[data-tip]::before {
  content: '';
  width: 8px; height: 8px;
  background: #FFFFFF;
  transform: rotate(45deg);
  box-shadow: -1px -1px 1px #FFFFFF;
}
/* Posición por defecto: top */
[data-tip]::after,
[data-tip]:not([data-tip-pos])::after,
[data-tip-pos="top"]::after {
  bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
}
[data-tip]::before,
[data-tip]:not([data-tip-pos])::before,
[data-tip-pos="top"]::before {
  bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%) rotate(45deg);
}
[data-tip-pos="bottom"]::after {
  top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  bottom: auto;
}
[data-tip-pos="bottom"]::before {
  top: calc(100% + 4px); left: 50%; transform: translateX(-50%) rotate(45deg);
  bottom: auto;
}
[data-tip-pos="left"]::after {
  right: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  bottom: auto; left: auto;
}
[data-tip-pos="left"]::before {
  right: calc(100% + 4px); top: 50%; transform: translateY(-50%) rotate(45deg);
  bottom: auto; left: auto;
}
[data-tip-pos="right"]::after {
  left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  bottom: auto;
}
[data-tip-pos="right"]::before {
  left: calc(100% + 4px); top: 50%; transform: translateY(-50%) rotate(45deg);
  bottom: auto;
}
[data-tip]:hover::after,
[data-tip]:hover::before,
[data-tip]:focus-visible::after,
[data-tip]:focus-visible::before {
  opacity: 1;
  transition-delay: 0.35s;
}

/* HEADER */
.o-top-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.rainbow-bar { height: 3px; background: linear-gradient(90deg, #FF6B6B 0%, #FFE66D 25%, #4ECDC4 50%, #58A2F7 75%, #C878E6 100%); }
.o-header { background: white; padding: 0 30px; height: 90px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 6px rgba(0,0,0,0.04); }

.o-header-logo a { display: flex; align-items: center; cursor: pointer; }
.o-header-logo img { height: 44px; width: auto; transition: transform 0.2s; }
.o-header-logo a:hover img { transform: scale(1.03); }

.o-header-actions { display: flex; align-items: center; gap: 20px; }
.m-bell { display: none; }
.a-avatar {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  cursor: pointer; transition: box-shadow 0.2s; background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.a-avatar:hover { box-shadow: 0 0 0 2px var(--app-primary); }
.a-avatar i { display: none; }

/* BARRA DE TÍTULO (degradé configurable por droop) */
.m-title-bar {
  padding: 0 30px; color: #FFF; font-size: 15px; font-weight: 500;
  display: flex; align-items: center; gap: 10px; height: 40px;
  background: linear-gradient(90deg, var(--app-gradient-from) 0%, var(--app-gradient-to) 100%);
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
/* PANEL DEL CLOSER: barra en VERDE (seña de identidad por defecto). Los puntos
   centrales son variables: si el profesor pone su marca, app-config los deriva
   de su color; si no, quedan estos verdes. */
:root { --closer-grad-mid1: #4FB846; --closer-grad-mid2: #3F9E36; }
:root[data-panel="closer"] .m-title-bar {
  background: linear-gradient(90deg,
    var(--app-gradient-from) 0%,
    var(--closer-grad-mid1) 55%,
    var(--closer-grad-mid2) 80%,
    var(--app-gradient-to) 100%);
}
.m-title-bar i { font-size: 14px; }
/* Icono de sección en la barra de título: mismo GIF que la cabecera, en
   blanco (filtro) para que coincida exactamente con el icono superior. */
.m-title-ico { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); flex-shrink: 0; }

/* LAYOUT */
.o-page { margin-top: 133px; display: flex; min-height: calc(100vh - 133px); }

.o-sidebar { width: 296px; background: white; border-right: 1px solid #eee; flex-shrink: 0; position: fixed; top: 133px; left: 0; bottom: 0; z-index: 40; overflow-y: auto; }
.o-sidebar-item { display: flex; align-items: center; gap: 14px; padding: 18px 24px; color: #5D5D5D; font-size: 15px; cursor: pointer; transition: all 0.2s; border-left: 4px solid transparent; text-decoration: none; border-bottom: 2px solid #F0F0F0; }
.o-sidebar-item:hover { color: var(--app-primary); }
.o-sidebar-item:hover i { color: var(--app-primary); }
.o-sidebar-item.active { color: var(--app-primary); border-left-color: var(--app-primary); font-weight: 500; }
.o-sidebar-item i { width: 22px; text-align: center; font-size: 16px; color: #5D5D5D; }
.o-sidebar-item.active i { color: var(--app-primary); }

/* min-width:0 es imprescindible: sin él este hijo flexible NO puede encogerse
   por debajo del ancho mínimo de su contenido, y una tabla ancha estira toda
   la página en vez de hacer scroll dentro de su contenedor. */
/* overflow-x:clip (NO hidden): el bocadillo de ayuda de la tarjeta más a la
   derecha se sale unos píxeles y eso ponía scroll horizontal a toda la página.
   `clip` recorta sin crear contenedor de scroll, así que no rompe el sticky ni
   el scroll vertical, y el globo sigue pudiendo salirse por arriba. */
.o-content { flex: 1; min-width: 0; padding: 50px 50px 60px; margin-left: 296px; overflow-x: clip; }

/* TÍTULOS */
/* Titular de sección (Campaña › Productos, Comisiones…). Va en Nunito como
   el resto de titulares de los dos paneles: ver "VOZ DEL PANEL". */
.m-section-title { font-size: 18px; font-weight: 600; color: var(--app-primary); margin-bottom: 14px;
  font-family: 'Nunito', 'Open Sans', sans-serif; letter-spacing: -.2px; }

/* BOTONES */
.m-btn-save { display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; background: #96BE6E; color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; transition: background 0.2s; font-family: 'Open Sans', sans-serif; }
.m-btn-save:hover { background: #85ad5e; }
.m-btn-cancel { display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; background: white; color: #999; border: 1px solid #DDD; border-radius: 8px; font-size: 15px; cursor: pointer; transition: all 0.2s; font-family: 'Open Sans', sans-serif; }
.m-btn-cancel:hover { background: #F5F5F5; }

/* INPUTS */
.m-name-input, .m-config-input, .m-config-select { width: 100%; padding: 11px 14px; font-family: 'Open Sans', sans-serif; font-size: 15px; color: #333; background: #FAFAFA; border: 1px solid #E0E0E0; border-radius: 8px; outline: none; transition: border-color 0.2s; }
.m-name-input:focus, .m-config-input:focus, .m-config-select:focus { border-color: var(--app-primary); background: white; }

/* TOGGLE */
.m-toggle { position: relative; width: 52px; height: 28px; cursor: pointer; flex-shrink: 0; }
.m-toggle input { display: none; }
.m-toggle-slider { position: absolute; inset: 0; background: #CCC; border-radius: 28px; transition: background 0.3s; }
.m-toggle-slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: white; border-radius: 50%; transition: transform 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.m-toggle input:checked + .m-toggle-slider { background: var(--app-primary); }
.m-toggle input:checked + .m-toggle-slider::after { transform: translateX(24px); }

/* FOOTER */
.o-footer { text-align: center; padding: 30px; color: rgba(0,0,0,0.35); font-size: 14px; margin-left: 296px; }

/* RESPONSIVE */
@media (max-width: 1100px) {
  .o-content { padding: 40px 30px 50px; }
}
@media (max-width: 768px) {
  .o-sidebar { transform: translateX(-100%); transition: transform .3s ease; z-index: 41; }
  .o-sidebar.open { transform: translateX(0); }
  /* En móvil el contenido va pegado a los bordes (16px). !important porque varias
     pantallas redefinen .o-content con el padding de escritorio en su <style>
     inline (que, por orden de cascada, ganaba y dejaba ~90px de márgenes). */
  .o-content { margin-left: 0 !important; padding: 24px 16px 60px !important; }
  .o-footer { margin-left: 0; }
  .o-header { padding: 0 15px; }
  .o-header-logo img { height: 36px; }
  /* Móvil: nada de scroll horizontal; las barras de controles (p. ej.
     "Trabajando como", "Ver:") se apilan en vez de salirse por la derecha. */
  body { overflow-x: hidden; }
  .c-ctx { flex-wrap: wrap; }
  .c-ctx select { min-width: 0; }
}

/* ============================================================
   TARJETA DE CIFRA — la línea estética de Gestión › Ventas
   Fondo pastel + icono en cuadrado sólido + etiqueta en MAYÚSCULAS del color
   de la familia + número grande en oscuro. Sobre degradados saturados con
   texto blanco la descripción se leía mal; así el número manda y la frase de
   debajo se lee de verdad.
   Aquí sólo va la PIEL: cada pantalla pone su propia rejilla.
   Uso: <div class="k-card k-verde"><div class="ico">…</div>
          <div class="tx"><div class="l">…</div><div class="v">…</div><div class="h">…</div></div></div>
   ============================================================ */
.k-card { border-radius: 20px; padding: 24px 26px; display: flex; align-items: flex-start; gap: 20px; }
.k-card .ico { width: 76px; height: 76px; border-radius: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; }
.k-card .tx { min-width: 0; }
.k-card .l { font-size: 14.5px; text-transform: uppercase; letter-spacing: .6px; font-weight: 800; }
.k-card .v { font-size: 38px; font-weight: 800; color: #1f1f1f; margin-top: 4px; line-height: 1.05; letter-spacing: -1px; }
.k-card .h { font-size: 14px; color: #5f6470; margin-top: 10px; line-height: 1.5; }
/* Variante compacta: cuando caben 4-5 tarjetas en fila (Next) */
.k-card.k-mini { padding: 18px 20px; gap: 15px; }
.k-card.k-mini .ico { width: 56px; height: 56px; border-radius: 16px; font-size: 22px; }
.k-card.k-mini .l { font-size: 13.5px; }
.k-card.k-mini .v { font-size: 30px; }
.k-card.k-mini .h { font-size: 14px; margin-top: 6px; }
/* Familias de color. El significado manda sobre el gusto: verde lo bueno o lo
   ya cobrado, ámbar lo que está en camino, azul lo acumulado o neutro,
   violeta lo que está en curso, rojo lo que exige actuar hoy. */
.k-verde   { background: linear-gradient(135deg,#E9F7EC,#DDF1E3); }
.k-verde   .ico { background: linear-gradient(135deg,#3DAE5F,#2E8E49); }
.k-verde   .l { color: #2E8E49; }
.k-ambar   { background: linear-gradient(135deg,#FFF3DC,#FFE9C4); }
.k-ambar   .ico { background: linear-gradient(135deg,#F9A825,#F08C0A); }
.k-ambar   .l { color: #D97B06; }
.k-azul    { background: linear-gradient(135deg,#E6F0FB,#D8E7F8); }
.k-azul    .ico { background: linear-gradient(135deg,#2F80DE,#1C5FB4); }
.k-azul    .l { color: #1C5FB4; }
.k-violeta { background: linear-gradient(135deg,#F2ECFC,#E7DDF8); }
.k-violeta .ico { background: linear-gradient(135deg,#9B6FE0,#7A4FC4); }
.k-violeta .l { color: #7A4FC4; }
.k-rojo    { background: linear-gradient(135deg,#FDEBE9,#FADCD8); }
.k-rojo    .ico { background: linear-gradient(135deg,#E8604F,#C0392B); }
.k-rojo    .l { color: #C0392B; }
.k-gris    { background: linear-gradient(135deg,#F2F3F6,#E8EAEF); }
.k-gris    .ico { background: linear-gradient(135deg,#9AA0AC,#767D8B); }
.k-gris    .l { color: #6B7280; }

/* ============================================================
   VOZ DEL SISTEMA — titulares en Nunito (puntas redondeadas)
   Se pone aquí, por defecto, y no pantalla por pantalla: así una pantalla
   nueva la hereda sin acordarse. Los datos de trabajo (tablas, etiquetas,
   formularios) siguen en Open Sans; eso NO se toca.
   ============================================================ */
/* TODO titular va en Nunito: un h1/h2/h3 es un título por definición, así que
   la regla es por etiqueta y no por lista de clases — una pantalla nueva lo
   hereda sin acordarse. El interletraje NO se toca aquí: las etiquetas en
   MAYÚSCULAS (que también son h3) declaran el suyo en su propia hoja y ese
   gana, que es justo lo que queremos (Nunito a -.2px las aprieta). */
h1, h2, h3 { font-family: 'Nunito', 'Open Sans', sans-serif; }

/* Los titulares grandes, además, con el interletraje cerrado */
h1, h2.m-section-title, .g-h1, .m-section-title,
.c-head h1, .sec-txt h1, .md-id h1, .a-card h1 {
  font-family: 'Nunito', 'Open Sans', sans-serif;
  letter-spacing: -.2px;
}

/* Las CIFRAS DESTACADAS son la otra mitad de esa voz: el número que el panel
   te canta (cobros, ventas, comisiones, tareas) va en Nunito igual que los
   titulares. Aquí van TODAS las clases de cifra grande de la app —formador y
   closer— para no volver a arreglarlo pantalla por pantalla. Las etiquetas en
   MAYÚSCULAS que las acompañan (.l) NO entran: Nunito con -.2px las aprieta. */
.k-card .v,            /* tarjeta de cifra (Gestión, Next, Cobros, Comisiones) */
.kpi .v,               /* admin.html, editar/contactos.html */
.c-kpi .num,           /* next.html, closer.html */
.hero-stats .n,        /* closer.html */
.s-stat .num,          /* superadmin.html */
.p-imp .v,             /* pago-comision.html */
.cv-pct, .tm-k .v, .mc-kpi .v, .a-com .box .v,   /* closer-analitica.html */
.rk .met .v,           /* closer-equipo.html */
.ses-horas .hb-h,      /* closer-disponibilidad.html */
.f-plazo .pl-v {       /* cuenta atrás del foco */
  font-family: 'Nunito', 'Open Sans', sans-serif;
}

/* ============================================================
   BOCADILLO DE AYUDA
   Globo blanco con rabito, forma de bocadillo pero sin contorno marcado: el
   borde oscuro ensuciaba. Queda un filo gris muy suave y la sombra es la que
   separa el globo del fondo.
   El rabito va girado 45º con borde en dos lados, para que el filo del globo
   continúe por la punta usando sólo dos pseudoelementos.
   Uso: <div data-tip="lo que explica">…</div>
   ============================================================ */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%) translateY(5px);
  background: #fff; color: #23233a; font-size: 14px; font-weight: 600; line-height: 1.5;
  padding: 12px 16px; border-radius: 18px; white-space: normal; width: max-content; max-width: 250px;
  border: 1px solid #E6E6EC; box-shadow: 0 8px 26px rgba(35,35,58,.14);
  opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; z-index: 60;
}
[data-tip]::before {
  content: ''; position: absolute; left: 50%; bottom: calc(100% + 8px);
  width: 12px; height: 12px; background: #fff;
  border-right: 1px solid #E6E6EC; border-bottom: 1px solid #E6E6EC;
  transform: translateX(-50%) translateY(5px) rotate(45deg);
  opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; z-index: 61;
}
[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-tip]:hover::before { opacity: 1; transform: translateX(-50%) translateY(0) rotate(45deg); }

/* Posiciones alternativas del bocadillo. Imprescindible para los botones que
   están dentro de una tarjeta con overflow:hidden (p. ej. las acciones de la
   tarjeta de campaña, data-tip-pos="left"): así el globo sale al lado y no
   arriba, donde la tarjeta lo recortaba y salía "descuadrado". */
[data-tip-pos="left"]::after  { left: auto; right: calc(100% + 14px); top: 50%; bottom: auto; transform: translateY(-50%) translateX(5px); }
[data-tip-pos="left"]::before { left: auto; right: calc(100% + 8px);  top: 50%; bottom: auto; transform: translateY(-50%) translateX(5px) rotate(45deg); }
[data-tip-pos="left"]:hover::after  { transform: translateY(-50%) translateX(0); }
[data-tip-pos="left"]:hover::before { transform: translateY(-50%) translateX(0) rotate(45deg); }
[data-tip-pos="right"]::after  { right: auto; left: calc(100% + 14px); top: 50%; bottom: auto; transform: translateY(-50%) translateX(-5px); }
[data-tip-pos="right"]::before { right: auto; left: calc(100% + 8px);  top: 50%; bottom: auto; transform: translateY(-50%) translateX(-5px) rotate(45deg); }
[data-tip-pos="right"]:hover::after  { transform: translateY(-50%) translateX(0); }
[data-tip-pos="right"]:hover::before { transform: translateY(-50%) translateX(0) rotate(45deg); }
[data-tip-pos="bottom"]::after  { top: calc(100% + 14px); bottom: auto; transform: translateX(-50%) translateY(-5px); }
[data-tip-pos="bottom"]::before { top: calc(100% + 8px);  bottom: auto; transform: translateX(-50%) translateY(-5px) rotate(45deg); }
[data-tip-pos="bottom"]:hover::after  { transform: translateX(-50%) translateY(0); }
[data-tip-pos="bottom"]:hover::before { transform: translateX(-50%) translateY(0) rotate(45deg); }

/* Sin puntero no hay hover: en móvil el bocadillo sobra. */
@media (max-width: 700px) { [data-tip]::after, [data-tip]::before { display: none; } }

/* ============================================================
   TARJETA DE CIFRA PULSABLE
   Cuando el número lleva detrás una lista de gente, la tarjeta es un botón:
   al pulsarla se despliega abajo QUIÉN está en ese número. Se nota que se
   puede pulsar (cursor, elevación) y cuál está abierta (anillo + flechita).
   ============================================================ */
button.k-card { border: none; text-align: left; font-family: inherit; width: 100%; cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease; }
button.k-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.10); }
button.k-card.abierta { box-shadow: 0 0 0 2.5px currentColor, 0 8px 22px rgba(0,0,0,.10); }
button.k-card.abierta .l::after { content: ' ▾'; }
/* El anillo toma el color de la familia a través de currentColor */
button.k-card.k-verde.abierta   { color: #2E8E49; } button.k-card.k-ambar.abierta { color: #D97B06; }
button.k-card.k-azul.abierta    { color: #1C5FB4; } button.k-card.k-violeta.abierta { color: #7A4FC4; }
button.k-card.k-rojo.abierta    { color: #C0392B; } button.k-card.k-gris.abierta  { color: #6B7280; }

/* ============================================================
   TITULAR DE TARJETA CON MARCO DE ICONO
   Misma línea en los dos paneles: el icono del h2 va en un cuadrado de color
   en vez de suelto. Las familias las pone cada pantalla con .b-*.
   ============================================================ */
.c-card h2 i.marco, .card h2 i.marco {
  width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-size: 14px; color: #fff; flex-shrink: 0;
}

/* ============================================================
   SECUENCIA DE VENTA SITUADA (.seqv)
   Los mismos pasos que el formador definió en Campaña › Secuencia, pero
   contados para ESTE contacto: hechos en color, el de ahora destacado y los
   que vienen apagados. El HTML lo genera AgendaLaunch.secuenciaContactoHtml;
   aquí va sólo la piel, compartida por el foco de la tarea y la ficha.
   ============================================================ */
.seqv > h3 { font-size: 14px; color: var(--app-primary); font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.seqv .fs-leyenda { display:flex; gap:12px; flex-wrap:wrap; font-size:13px; color:#9aa3af; margin-bottom:12px; }
.seqv .fs-leyenda span { display:inline-flex; align-items:center; gap:5px; }
.seqv .fs-leyenda i { width:9px; height:9px; border-radius:50%; }
.seqv .fs-fase { display:flex; align-items:center; gap:9px; margin:16px 0 9px; padding-bottom:7px; border-bottom:2px solid #F0F2F5; }
.seqv .fs-fase:first-of-type { margin-top:2px; }
.seqv .fs-fase .di { width:28px; height:28px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; color:#fff; font-size:13px; flex-shrink:0; }
.seqv .fs-fase .ft { font-size:14.5px; font-weight:800; color:#2c2c54; }
.seqv .fs-fase .fc { margin-left:auto; font-size:13px; font-weight:700; color:#9aa3af; }
.seqv .fs-list { display:flex; flex-direction:column; gap:7px; }
.seqv .fs-step { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:11px;
  border:1px solid #EEF0F3; background:#fff; }
.seqv .fs-step .n { width:26px; height:26px; border-radius:8px; flex-shrink:0; display:flex;
  align-items:center; justify-content:center; font-size:12.5px; font-weight:800; color:#fff; }
.seqv .fs-step .ic { width:24px; height:24px; border-radius:50%; flex-shrink:0; display:flex;
  align-items:center; justify-content:center; font-size:11.5px; color:#fff; }
.seqv .fs-step .tx { min-width:0; flex:1; }
.seqv .fs-step .t { font-size:14px; font-weight:700; color:#2c2c54; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.seqv .fs-step .s { font-size:13px; color:#9aa3af; margin-top:1px; }
/* HECHO: a color, con el check a la derecha */
.seqv .fs-step.hecho { background:#F4FAF5; border-color:#DCEDDF; }
.seqv .fs-step.hecho .t { color:#2b6b34; }
/* AHORA: es la tarea que tiene delante, así que manda */
.seqv .fs-step.ahora { background:#FFF4EC; border-color:#F3C9A8; box-shadow:0 0 0 2px rgba(232,128,27,.16); }
.seqv .fs-step.ahora .t { color:#A9500C; }
.seqv .fs-step.ahora .s { color:#C07B36; }
/* SALTADO: la fase ya pasó y este paso nunca se hizo. Se dice, no se esconde. */
.seqv .fs-step.saltado { background:#FAFAFB; border-style:dashed; }
.seqv .fs-step.saltado .n, .seqv .fs-step.saltado .ic { filter:grayscale(1); opacity:.5; }
.seqv .fs-step.saltado .t { color:#9aa3af; text-decoration:line-through; }
/* FUTURO: apagado, para que no compita con lo de ahora */
.seqv .fs-step.futuro { background:#FAFAFB; }
.seqv .fs-step.futuro .n, .seqv .fs-step.futuro .ic { filter:grayscale(1); opacity:.45; }
.seqv .fs-step.futuro .t { color:#9aa3af; font-weight:600; }
.seqv .fs-step .mk { margin-left:auto; flex-shrink:0; font-size:13px; font-weight:800; }
.seqv .fs-step.hecho .mk { color:#3DAE5F; }
.seqv .fs-step.ahora .mk { color:#E8801B; font-size:12px; text-transform:uppercase; letter-spacing:.4px; }
/* La sesión es la bisagra entre las dos fases: se marca como hito, no como paso */
.seqv .fs-hito { display:flex; align-items:center; gap:9px; margin:12px 0; padding:10px 12px;
  border-radius:11px; background:#EFF5FD; border:1px dashed #C3D8F2; font-size:13.5px; color:#2B5FA8; font-weight:700; }
.seqv .fs-hito.hecha { background:#F4FAF5; border-color:#CFE6D4; color:#2b6b34; }
/* Cuando la fase "antes" ya está entera, lo siguiente que toca ES la sesión */
.seqv .fs-hito.ahora { background:#FFF4EC; border-color:#F3C9A8; border-style:solid;
  color:#A9500C; box-shadow:0 0 0 2px rgba(232,128,27,.16); }
.seqv .fs-hito i.d { font-size:14px; }
.seqv .fs-hito .cu { margin-left:auto; font-weight:600; opacity:.85; }
.seqv .fs-hito.ahora .cu { margin-left:auto; }
.seqv .fs-hito .mk { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; }
.seqv .fs-nota { font-size:13px; color:#9aa3af; line-height:1.5; margin-top:12px; }

/* === Tanda 4 (limpieza) === */

/* Legibilidad público 45+: los textos de ayuda usaban grises muy claros
   (#999 / #B5B5B5 / #9aa3af ≈ 2.8:1, por debajo de AA). Se oscurecen a un
   gris que sigue siendo secundario pero se lee (≈ 4.8:1). */
.hint, .empty, .sub, .muted, .m-field-hint, .m-q-ayuda,
.fp-ayuda, .seqv .fs-nota, .form-hint, .field-hint, .help, .subtxt,
.md-help, .cm-help, .g-sub, .cg-sub, .c-sub-lbl {
  color: #6B7280 !important;
}

/* Controles de demostración (Simular respuesta, mocks…): sólo tienen sentido
   con datos falsos. En la nube (usuario real) se ocultan. data-modo lo pone
   agenda-auth.js sobre <html> en cada carga. */
:root[data-modo="supabase"] .demo-only { display: none !important; }