/* ================================================================
   CareFlow — ESTILOS DE PLATAFORMA
   Landing · Login · Dashboard · Shell · Integración módulo Entrega
   Depende de tokens.css
   ================================================================ */

/* ====================== BASE ====================== */
.cf {
  margin: 0;
  font-family: var(--cf-font);
  color: var(--cf-text);
  background: var(--cf-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}

.cf a { color: inherit; text-decoration: none; }
.cf button { font-family: inherit; cursor: pointer; }
.cf img { display: block; max-width: 100%; }
.cf-grad-text {
  background: var(--cf-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Identidad CareFlow. Dos piezas oficiales con reglas distintas:

   .cf-logo-mark   — ISOTIPO (assets/brand/svg/isotipo_color.svg). Cuadrado 999×999, así
                     que se dimensiona con width = height. Va acompañado de un <span> con
                     el nombre: es el chrome de la aplicación, donde el wordmark del
                     imagotipo quedaría ilegible a 30 px.
   .cf-logo-lockup — IMAGOTIPO horizontal. Proporción 1280×300, se dimensiona por ALTO y el
                     ancho lo fija su proporción; forzar un cuadrado le dejaría aire lateral
                     muerto. Ya trae el wordmark oficial en Nacelle, así que NO lleva <span>
                     al lado. Va donde la marca se presenta: nav, hero, login, footer, 404. */
.cf-logo-mark { display: block; width: 32px; height: 32px; flex-shrink: 0; object-fit: contain; }
.cf-logo-lockup { display: block; width: auto; flex-shrink: 0; }

/* ====================== BOTONES ====================== */
.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cf-2);
  padding: 13px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--cf-r-full);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform var(--cf-fast) var(--cf-ease),
              box-shadow var(--cf-fast) var(--cf-ease),
              background var(--cf-fast) var(--cf-ease),
              border-color var(--cf-fast) var(--cf-ease),
              color var(--cf-fast) var(--cf-ease);
  white-space: nowrap;
}
/* El primario es el principal de marca en sólido, no un degradado: el degradado hacía
   variar el contraste del texto blanco entre 11:1 y 5,7:1 dentro del mismo botón y
   emborronaba el color. Reposo = marca, hover = se ilumina y levanta, active = se hunde
   y profundiza. Los tres tonos son oficiales y ninguno baja de AA. */
.cf-btn-primary {
  background: var(--cf-blue-700);
  color: var(--cf-on-dark);
  box-shadow: 0 6px 18px rgba(39, 55, 119, .22);
}
.cf-btn-primary:hover { background: var(--cf-blue-600); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(56, 102, 174, .32); }
.cf-btn-primary:active { background: var(--cf-blue-800); transform: translateY(0); box-shadow: 0 3px 10px rgba(39, 55, 119, .20); }

/* `.cf a { color: inherit }` (línea 18) tiene especificidad (0,2,0) y le ganaba a
   `.cf-btn-primary` (0,1,0): TODO botón escrito como <a> —«Crear nota» del dashboard,
   los dos «Iniciar sesión» de la landing— heredaba el casi-negro del cuerpo en lugar
   del blanco. Medido en pantalla: 1,67:1 sobre el azul de marca, ilegible. Los <button>
   con las mismas clases sí salían bien, y por eso el defecto pasaba desapercibido.
   Se iguala la especificidad en vez de mover el orden de las reglas, que no bastaría. */
.cf a.cf-btn-primary,
.cf a.cf-btn-danger  { color: var(--cf-on-dark); }
.cf a.cf-btn-ghost   { color: var(--cf-blue-700); }

.cf-btn-ghost {
  background: var(--cf-surface);
  color: var(--cf-blue-700);
  border-color: var(--cf-border-2);
  box-shadow: var(--cf-shadow-xs);
}
.cf-btn-ghost:hover { border-color: var(--cf-blue-600); background: var(--cf-blue-50); transform: translateY(-2px); }
.cf-btn-ghost:active { background: var(--cf-blue-100); transform: translateY(0); }

.cf-btn-block { width: 100%; }
.cf-btn-lg { padding: 15px 30px; font-size: 1rem; }

.cf-btn:disabled, .cf-btn[disabled] {
  opacity: .55; cursor: not-allowed; box-shadow: none; transform: none !important;
}

/* Anillo de foco del shell. Ninguno de estos controles tenía `:focus-visible` propio, así
   que navegando con teclado por la landing, el login o el dashboard no se veía dónde
   estabas. Se replica el patrón que la aplicación clínica ya aplica en styles.css
   (`:where(.workflow, dialog) …:focus-visible`), en vez de inventar uno nuevo.
   El tono es 7683 C: 5,71:1 sobre blanco. */
.cf-btn:focus-visible,
.cf-nav-item:focus-visible,
.cf-nav-links a:focus-visible,
.cf-avatar-btn:focus-visible,
.cf-hamburger:focus-visible,
.cf-pw-toggle:focus-visible,
.cf-usermenu-item:focus-visible,
.cf-logout:focus-visible,
.cf-tenant-link:focus-visible,
.cf-crumb-link:focus-visible,
.cf-login-back:focus-visible {
  outline: 2px solid var(--cf-blue-600);
  outline-offset: 2px;
}

/* ====================== BADGES ====================== */
.cf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: var(--cf-r-full);
}
.cf-badge-available {
  color: var(--cf-success);
  background: var(--cf-success-bg);
  border: 1px solid rgba(10,158,99,.25);
}
.cf-badge-soon {
  color: var(--cf-warn);
  background: var(--cf-warn-bg);
  border: 1px solid rgba(182,121,31,.22);
}
.cf-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ====================== NAVBAR (landing) ====================== */
.cf-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cf-4) var(--cf-8);
  transition: background var(--cf-mid) var(--cf-ease),
              box-shadow var(--cf-mid) var(--cf-ease),
              border-color var(--cf-mid) var(--cf-ease);
  border-bottom: 1px solid transparent;
}
.cf-nav.scrolled {
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--cf-border);
  box-shadow: var(--cf-shadow-sm);
}
.cf-nav-brand { display: flex; align-items: center; gap: var(--cf-2); }
.cf-nav-brand .cf-logo-lockup { height: 34px; }
/* Los enlaces del navbar quedan ocultos al inicio y aparecen —con la misma
   suavidad que el desarmado del logo— cuando termina el typewriter. */
.cf-nav-links {
  display: flex; align-items: center; gap: var(--cf-6);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 2.6s var(--cf-ease-out), transform 2.6s var(--cf-ease-out);
  pointer-events: none;
  will-change: opacity, transform;
}
body.cf-typed .cf-nav-links { opacity: 1; transform: none; pointer-events: auto; }
.cf-nav-links a {
  font-size: 0.92rem; font-weight: 600; color: var(--cf-text-2);
  transition: color var(--cf-fast) var(--cf-ease);
}
.cf-nav-links a:hover { color: var(--cf-blue-700); }
.cf-nav-cta { display: flex; align-items: center; gap: var(--cf-3); }
.cf-nav-toggle { display: none; }

/* ====================== HERO + PARTÍCULAS ====================== */
.cf-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px var(--cf-6) var(--cf-20);
  overflow: hidden;
  background: #ffffff;   /* blanco puro */
}
.cf-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* Máscara radial blanca: garantiza legibilidad del copy sobre las partículas */
.cf-hero-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(58% 52% at 50% 46%,
              rgba(255,255,255,.96) 0%,
              rgba(255,255,255,.86) 38%,
              rgba(255,255,255,0) 78%);
}
.cf-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1040px;
  margin: 0 auto;
}

/* Lockup de marca estático (ícono + nombre), libre, sin contenedor */
.cf-hero-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto var(--cf-6);
}
.cf-hero-brand .cf-logo-lockup { height: 52px; }

.cf-hero h1 {
  /* Tamaño vinculado al tamaño REAL del logo (--cf-logo-px lo setea particles.js) →
     el título escala con la MISMA métrica que el logo y cabe dentro del hueco del
     corazón en cualquier pantalla (19–27"). Fallback clamp por si aún no hay JS. */
  font-size: clamp(42px, calc(var(--cf-logo-px, 900px) * 0.068), 110px);
  line-height: 1.02;
  font-weight: 400;                 /* menos pesado → letras menos anchas (estilo Antigravity) */
  letter-spacing: -0.04em;          /* trazo más compacto */
  color: var(--cf-text);
  margin: 0 0 var(--cf-6);
  min-height: 2.04em;
  transition: transform .9s ease;
}
/* Durante la intro (logo aún formado) el título baja un poco para caer en la
   parte MÁS ANCHA del hueco del corazón; al terminar la escritura vuelve a su
   sitio de forma suave. Es sólo visual (transform) → no altera el layout final. */
.cf-hero:not(.is-typed) h1 { transform: translateY(calc(var(--cf-logo-px, 854px) * 0.0258)); }

/* Elementos del hero ocultos durante la escritura del eslogan. Al terminar
   aparecen con un fundido MUY suave (largo y con muy poco desplazamiento),
   acorde y casi sincronizado con el desarmado del logo de partículas. */
.cf-hero-after {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 2.6s var(--cf-ease-out),
              transform 2.6s var(--cf-ease-out);
  pointer-events: none;
  will-change: opacity, transform;
}
.cf-hero.is-typed .cf-hero-after { opacity: 1; transform: none; pointer-events: auto; }
.cf-hero.is-typed .cf-hero-brand   { transition-delay: 0s; }
.cf-hero.is-typed .cf-hero-sub     { transition-delay: .25s; }
.cf-hero.is-typed .cf-hero-actions { transition-delay: .5s; }
.cf-type-caret {
  display: inline-block;
  width: 3px;
  height: 1em;
  margin-left: 2px;
  background: var(--cf-blue-600);
  vertical-align: text-bottom;
  animation: cf-blink 1s steps(1) infinite;
  transform: translateY(.08em);
}
@keyframes cf-blink { 50% { opacity: 0; } }

.cf-hero-sub {
  font-size: clamp(1rem, 2vw, 1.22rem);
  color: var(--cf-text-2);
  max-width: 760px;
  margin: 0 auto var(--cf-8);
  font-weight: 400;
}
.cf-hero-actions {
  display: flex; gap: var(--cf-4); justify-content: center; flex-wrap: wrap;
}

.cf-scroll-cue {
  position: absolute; bottom: var(--cf-6); left: 50%; transform: translateX(-50%);
  z-index: 2; color: var(--cf-blue-500);
  animation: cf-bob 2s ease-in-out infinite;
}
@keyframes cf-bob { 0%,100%{ transform: translate(-50%,0); } 50%{ transform: translate(-50%,8px); } }

/* ====================== SECCIONES LANDING ====================== */
.cf-section {
  max-width: var(--cf-maxw);
  margin: 0 auto;
  padding: var(--cf-24) var(--cf-6);
}
.cf-section-head { text-align: center; max-width: 720px; margin: 0 auto var(--cf-16); }
.cf-eyebrow {
  display: inline-block;
  font-size: 0.78rem; font-weight: 700; letter-spacing: var(--cf-tracking-wide);
  text-transform: uppercase; color: var(--cf-blue-600);
  background: var(--cf-blue-50); padding: 6px 14px; border-radius: var(--cf-r-full);
  margin-bottom: var(--cf-4);
}
.cf-section h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 700; letter-spacing: var(--cf-tracking-tighter);
  color: var(--cf-blue-800); line-height: 1.15; margin: 0 0 var(--cf-4);
}
.cf-section-head p { font-size: 1.08rem; color: var(--cf-text-2); margin: 0; }

/* "Qué es" — bloque dividido */
.cf-split {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--cf-16); align-items: center;
}
.cf-split-text h2 { text-align: left; }
.cf-split-text p { color: var(--cf-text-2); font-size: 1.05rem; margin: 0 0 var(--cf-4); }
.cf-check-list { list-style: none; padding: 0; margin: var(--cf-6) 0 0; display: grid; gap: var(--cf-3); }
.cf-check-list li { display: flex; gap: var(--cf-3); align-items: flex-start; font-size: 0.98rem; color: var(--cf-text); }
.cf-check-list svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--cf-blue-600); margin-top: 1px; }

.cf-split-visual {
  position: relative;
  border-radius: var(--cf-r-xl);
  padding: var(--cf-8);
  background: var(--cf-grad-deep);
  box-shadow: var(--cf-shadow-lg);
  overflow: hidden;
  min-height: 320px;
  display: flex; flex-direction: column; justify-content: center;
}
.cf-split-visual::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.08);
}
.cf-mock-note {
  position: relative; z-index: 1;
  background: rgba(255,255,255,.96);
  border-radius: var(--cf-r-md);
  padding: var(--cf-5);
  box-shadow: var(--cf-shadow-md);
}
.cf-mock-note .ln { height: 9px; border-radius: 5px; background: var(--cf-blue-200); margin-bottom: 10px; }
.cf-mock-note .ln.w1 { width: 45%; background: var(--cf-blue-600); }
.cf-mock-note .ln.w2 { width: 88%; }
.cf-mock-note .ln.w3 { width: 70%; }
.cf-mock-note .ln.w4 { width: 92%; }
.cf-mock-note .ln.w5 { width: 60%; }
.cf-mock-chip {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--cf-3);
  font-size: 0.72rem; font-weight: 700; color: var(--cf-success);
  background: var(--cf-success-bg); padding: 4px 10px; border-radius: var(--cf-r-full);
}

/* "Por qué" — grid de beneficios */
.cf-grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cf-6);
}
.cf-card {
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-lg);
  padding: var(--cf-8);
  box-shadow: var(--cf-shadow-sm);
  transition: transform var(--cf-mid) var(--cf-ease-out),
              box-shadow var(--cf-mid) var(--cf-ease-out),
              border-color var(--cf-mid) var(--cf-ease-out);
}
.cf-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--cf-shadow-lg);
  border-color: var(--cf-blue-400);
}
.cf-card-icon {
  width: 52px; height: 52px; border-radius: var(--cf-r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--cf-blue-200); color: var(--cf-blue-600);
  margin-bottom: var(--cf-5);
}
.cf-card-icon svg { width: 26px; height: 26px; }
.cf-card h3 { font-size: 1.12rem; font-weight: 600; color: var(--cf-blue-800); margin: 0 0 var(--cf-2); }
.cf-card p { font-size: 0.95rem; color: var(--cf-text-2); margin: 0; }

/* "Módulos" — tarjetas */
.cf-modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cf-6); }
.cf-module {
  position: relative;
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-lg);
  padding: var(--cf-8);
  box-shadow: var(--cf-shadow-sm);
  transition: transform var(--cf-mid) var(--cf-ease-out), box-shadow var(--cf-mid) var(--cf-ease-out), border-color var(--cf-mid) var(--cf-ease-out);
  display: flex; flex-direction: column; gap: var(--cf-3);
}
.cf-module.is-available:hover { transform: translateY(-6px); box-shadow: var(--cf-shadow-lg); border-color: var(--cf-blue-400); }
.cf-module.is-soon { opacity: .85; }
.cf-module-top { display: flex; align-items: center; justify-content: space-between; }
.cf-module-mark {
  width: 48px; height: 48px; border-radius: var(--cf-r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--cf-grad); color: #fff; box-shadow: var(--cf-glow);
}
.cf-module.is-soon .cf-module-mark { background: var(--cf-bg-soft); color: var(--cf-muted); box-shadow: none; }
.cf-module-mark svg { width: 24px; height: 24px; }
.cf-module h3 { font-size: 1.2rem; font-weight: 600; color: var(--cf-blue-800); margin: 0; }
.cf-module p { font-size: 0.95rem; color: var(--cf-text-2); margin: 0; flex: 1; }

/* ====================== AGENDA (llamada a la acción) ======================
   Usa --cf-grad-deep, el mismo degradado que el panel del login. Nació con un
   degradado propio porque entonces el token acababa en #1f7ff0 y el texto blanco
   pequeño se quedaba en 3,9:1; tras la migración de marca termina en 7683 C, con
   el blanco a 5,71:1, así que ya no hace falta duplicarlo.
   Los halos quedan en las esquinas, lejos del texto, para no aclarar el fondo
   bajo él. */
.cf-section.cf-cta-section { padding-top: 0; }
.cf-cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center; gap: var(--cf-10);
  padding: var(--cf-16) var(--cf-12);
  border-radius: var(--cf-r-xl);
  background: var(--cf-grad-deep);
  color: var(--cf-on-dark);
  box-shadow: var(--cf-shadow-xl);
}
.cf-cta::before, .cf-cta::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
}
.cf-cta::before {
  width: 460px; height: 460px; top: -260px; right: -140px;
  background: radial-gradient(circle, rgba(56, 102, 174, .45) 0%, transparent 68%);
}
.cf-cta::after {
  width: 380px; height: 380px; bottom: -240px; left: -120px;
  background: radial-gradient(circle, rgba(255, 255, 255, .12) 0%, transparent 68%);
}
.cf-cta-dots {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(105deg, transparent 35%, #000 100%);
  mask-image: linear-gradient(105deg, transparent 35%, #000 100%);
}
.cf-cta-eyebrow {
  display: inline-block; margin-bottom: var(--cf-4);
  padding: 6px 14px; border-radius: var(--cf-r-full);
  font-size: 0.78rem; font-weight: 700; letter-spacing: var(--cf-tracking-wide); text-transform: uppercase;
  color: var(--cf-blue-100);
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18);
}
.cf-section .cf-cta h2 { color: var(--cf-on-dark); max-width: 20ch; }
.cf-cta-copy p { margin: 0; max-width: 52ch; font-size: 1.05rem; color: rgba(255, 255, 255, .86); }
.cf-cta-action { display: flex; flex-direction: column; align-items: center; gap: var(--cf-4); }

/* El botón es blanco sobre el azul: el único punto claro de la banda es la acción.
   El color va con `.cf-cta` delante porque `.cf a { color: inherit }` pesa más que
   una sola clase, y el enlace heredaría el blanco de la banda: texto invisible. */
.cf-btn-calendar {
  padding: 10px 26px 10px 10px; gap: var(--cf-3);
  background: #fff;
  box-shadow: 0 14px 34px rgba(0, 12, 40, .35), 0 0 0 6px rgba(255, 255, 255, .12);
}
.cf-cta .cf-btn-calendar { color: var(--cf-blue-800); }
.cf-btn-calendar-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--cf-r-full);
  background: var(--cf-grad); color: #fff; box-shadow: var(--cf-glow);
}
.cf-btn-calendar-icon svg { width: 20px; height: 20px; }
.cf-btn-calendar-arrow { width: 18px; height: 18px; transition: transform var(--cf-mid) var(--cf-spring); }
.cf-btn-calendar:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0, 12, 40, .42), 0 0 0 9px rgba(255, 255, 255, .16);
}
.cf-btn-calendar:hover .cf-btn-calendar-arrow { transform: translateX(4px); }
.cf-btn-calendar:active { transform: translateY(0); }
/* Blanco sobre la banda: el azul del resto de la página no se vería aquí. */
.cf-btn-calendar:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.cf-cta-note {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-size: 0.85rem; color: rgba(255, 255, 255, .86);
}
.cf-cta-note svg { width: 15px; height: 15px; flex-shrink: 0; }
/* Al llegar desde «Hablemos», la acción late dos veces para decir «es aquí». */
.cf-cta-section.cf-arrived .cf-btn-calendar { animation: cf-cta-arrive 1s var(--cf-ease-out) 2; }
@keyframes cf-cta-arrive {
  0%   { box-shadow: 0 14px 34px rgba(0, 12, 40, .35), 0 0 0 6px rgba(255, 255, 255, .12); }
  45%  { box-shadow: 0 14px 34px rgba(0, 12, 40, .35), 0 0 0 16px rgba(255, 255, 255, .26); transform: scale(1.03); }
  100% { box-shadow: 0 14px 34px rgba(0, 12, 40, .35), 0 0 0 6px rgba(255, 255, 255, .12); }
}
@media (forced-colors: active) {
  .cf-cta { border: 1px solid CanvasText; }
}

/* ====================== FOOTER ======================
   Identidad a la izquierda; a la derecha, los canales directos separados de las
   redes. El texto secundario usa --cf-text-2 y no --cf-muted: sobre este fondo
   --cf-muted queda en 3,97:1, por debajo del 4,5:1 que pide el texto pequeño. */
.cf-footer {
  border-top: 1px solid var(--cf-border);
  background: var(--cf-surface-2);
  padding: var(--cf-12) var(--cf-6) var(--cf-6);
}
.cf-footer-inner {
  max-width: var(--cf-maxw); margin: 0 auto;
  /* La marca absorbe el sobrante y las dos columnas de enlaces se dimensionan por su
     contenido, ancladas al borde derecho. Con tres columnas iguales el contenido se
     apelotonaba a la izquierda y el tercio derecho quedaba vacío: no era espacio
     negativo, era hueco. Así el aire queda EN MEDIO, entre marca y enlaces, que es
     donde se lee como decisión. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--cf-10) var(--cf-16);
  align-items: start;
}
.cf-footer-identity { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cf-4); }
.cf-footer-brand { display: inline-flex; align-items: center; gap: var(--cf-3); border-radius: var(--cf-r-sm); }
.cf-footer-brand .cf-logo-mark { width: 38px; height: 38px; }
.cf-footer-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.cf-footer-brand-name { font-weight: 700; font-size: 1.05rem; color: var(--cf-blue-800); letter-spacing: var(--cf-tracking-tight); }
.cf-footer-brand-domain { font-size: 0.85rem; font-weight: 400; color: var(--cf-blue-700); }
.cf-footer-brand:hover .cf-footer-brand-domain { text-decoration: underline; text-underline-offset: 3px; }
/* Bajaba de la barra legal, donde compartía renglón con el aviso de copyright sin
   tener nada que ver con él. Aquí da cuerpo al bloque de marca, que solo con el
   nombre y el dominio quedaba flotando. El límite de medida evita que se estire por
   toda la columna cuando la ventana es ancha. */
.cf-footer-tagline {
  margin: 0; max-width: 34ch;
  font-size: 0.92rem; line-height: 1.55; color: var(--cf-text-2);
}

.cf-footer-heading {
  margin: 0 0 var(--cf-4);
  font-size: 0.74rem; font-weight: 700; letter-spacing: var(--cf-tracking-wide);
  text-transform: uppercase; color: var(--cf-blue-800);
}
.cf-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cf-1); }
/* 44px de alto: blanco táctil cómodo. El margen negativo alinea el texto con el
   título aunque el fondo del hover y el foco se extiendan a los lados. */
.cf-footer-link {
  display: inline-flex; align-items: center; gap: var(--cf-3);
  min-height: 44px; padding: 0 var(--cf-2); margin-left: calc(-1 * var(--cf-2));
  border-radius: var(--cf-r-sm);
  font-size: 0.92rem; font-weight: 600; color: var(--cf-text-2);
  overflow-wrap: anywhere;
  transition: color var(--cf-fast) var(--cf-ease), background-color var(--cf-fast) var(--cf-ease);
}
.cf-footer-link svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--cf-blue-600); }
.cf-footer-link:hover { color: var(--cf-blue-700); background: var(--cf-blue-50); }
.cf-footer-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
/* Solo teclado: con puntero no aparece. --cf-blue-600 (7683 C) mide 5,71:1 sobre
   blanco y supera de sobra el 3:1 que pide un indicador no textual. Es el mismo
   tono que el resto de anillos de foco del shell. */
.cf-footer a:focus-visible { outline: 2px solid var(--cf-blue-600); outline-offset: 2px; }

/* Banda intermedia. Son afirmaciones sobre el producto, no enlaces: dentro de la
   columna de identidad competían con la marca y se leían como un añadido suelto.
   A ancho completo forman su propia franja, con el mismo margen izquierdo que la
   marca y el copyright — ese borde compartido es la espina de toda la composición. */
.cf-footer-trust {
  max-width: var(--cf-maxw); margin: var(--cf-10) auto 0;
  /* `padding: … 0 0` y no solo `padding-top`: el relleno por defecto del <ul> son
     40 px a la izquierda, y con él la banda rompía la espina compartida. */
  padding: var(--cf-6) 0 0;
  border-top: 1px solid var(--cf-border-2);
  list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--cf-3) var(--cf-8);
  font-size: 0.85rem; color: var(--cf-text-2);
}
.cf-footer-trust li { display: inline-flex; align-items: center; gap: 8px; }
.cf-footer-trust svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--cf-blue-600); }

/* Cierre a dos extremos, no centrado: centrarlo introducía un segundo sistema de
   alineación que peleaba con el resto del pie. */
.cf-footer-copy {
  max-width: var(--cf-maxw); margin: var(--cf-6) auto 0; padding-top: var(--cf-5);
  border-top: 1px solid var(--cf-border-2);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--cf-2) var(--cf-6);
  font-size: 0.8rem; color: var(--cf-text-2);
}
.cf-footer-made { font-size: 0.8rem; color: var(--cf-text-2); }
.cf-footer-made .cf-heart { color: #e0506b; }

/* ====================== SCROLL REVEAL (premium) ====================== */
.cf-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s var(--cf-ease-out), transform .8s var(--cf-ease-out);
  will-change: opacity, transform;
}
.cf-reveal[data-reveal="zoom"]  { transform: scale(.92); }
.cf-reveal[data-reveal="scale"] { transform: translateY(26px) scale(.965); }
.cf-reveal[data-reveal="fade"]  { transform: translateY(10px); }
.cf-reveal.in { opacity: 1; transform: none; }

/* ====================== LOGIN ====================== */
.cf-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}
.cf-login-brand {
  position: relative;
  background: var(--cf-grad-deep);
  color: #fff;
  padding: var(--cf-16);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.cf-login-brand .cf-particles { opacity: .65; }
.cf-login-brand-top, .cf-login-brand-mid, .cf-login-brand-bottom { position: relative; z-index: 2; }
.cf-login-brand-logo { display: flex; align-items: center; gap: var(--cf-3); }
/* Sin el recuadro blanco que llevaba antes: existía porque el logo anterior no tenía
   versión negativa y había que aislarlo del degradado. La versión negativa (#fcfdfd) va
   directamente sobre el fondo oscuro, que es lo que prescribe el manual. */
.cf-login-brand-logo .cf-logo-lockup { height: 40px; }
.cf-login-phrase { font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 700; line-height: 1.18; letter-spacing: var(--cf-tracking-tighter); max-width: 460px; color: #fff; }
.cf-login-phrase em { font-style: normal; color: var(--cf-blue-400); }
.cf-login-trust { display: grid; gap: var(--cf-3); }
.cf-login-trust li { list-style: none; display: flex; align-items: center; gap: var(--cf-3); font-size: 0.95rem; color: rgba(255,255,255,.9); }
.cf-login-trust svg { width: 20px; height: 20px; color: var(--cf-blue-400); flex-shrink: 0; }

.cf-login-form-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: var(--cf-12); background: var(--cf-bg);
}
.cf-login-form { width: 100%; max-width: 400px; }
.cf-login-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--cf-muted); margin-bottom: var(--cf-8); transition: color var(--cf-fast) var(--cf-ease); }
.cf-login-back:hover { color: var(--cf-blue-700); }
.cf-login-form h1 { font-size: 1.7rem; font-weight: 700; color: var(--cf-blue-800); letter-spacing: var(--cf-tracking-tighter); margin: 0 0 var(--cf-2); }
.cf-login-form > p.cf-login-lead { color: var(--cf-text-2); margin: 0 0 var(--cf-8); font-size: 0.98rem; }

.cf-field { margin-bottom: var(--cf-5); }
.cf-field label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--cf-text-2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--cf-2); }
.cf-input, .cf-select {
  width: 100%; padding: 13px var(--cf-4);
  border: 1.5px solid var(--cf-border-2); border-radius: var(--cf-r-sm);
  font-size: 0.95rem; font-family: inherit; color: var(--cf-text); background: var(--cf-surface);
  outline: none; transition: border-color var(--cf-fast) var(--cf-ease), box-shadow var(--cf-fast) var(--cf-ease);
}
.cf-input:focus, .cf-select:focus { border-color: var(--cf-border-focus); box-shadow: 0 0 0 4px rgba(56,102,174,.15); }
.cf-input-pw { position: relative; }
.cf-input-pw .cf-input { padding-right: 46px; }
.cf-pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: none; background: transparent; color: var(--cf-muted);
  display: flex; align-items: center; justify-content: center; border-radius: 8px;
}
.cf-pw-toggle:hover { color: var(--cf-blue-600); background: var(--cf-blue-50); }
.cf-pw-toggle svg { width: 19px; height: 19px; }

.cf-login-error {
  display: none;
  align-items: center; gap: var(--cf-2);
  background: #fff0ee; border: 1px solid rgba(192,57,43,.25);
  color: var(--cf-danger); font-size: 0.88rem; font-weight: 600;
  padding: 10px var(--cf-3); border-radius: var(--cf-r-sm); margin-bottom: var(--cf-5);
}
.cf-login-error.show { display: flex; animation: cf-shake .4s var(--cf-ease); }
@keyframes cf-shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }

.cf-login-hint {
  margin-top: var(--cf-6); padding: var(--cf-3) var(--cf-4);
  background: var(--cf-blue-50); border: 1px dashed var(--cf-blue-400);
  border-radius: var(--cf-r-sm); font-size: 0.82rem; color: var(--cf-text-2);
}
.cf-login-hint code { font-family: ui-monospace, 'Cascadia Code', monospace; color: var(--cf-blue-700); font-weight: 600; }

/* ====================== SHELL (dashboard + entrega) ====================== */
/* Flexbox (no grid): el ancho de la sidebar transiciona de forma fiable a 0. */
.cf-shell {
  display: flex;
  min-height: 100vh;
}

.cf-sidebar {
  position: sticky; top: 0; height: 100vh;
  width: var(--cf-sidebar-w);
  flex: 0 0 var(--cf-sidebar-w);
  background: var(--cf-surface);
  border-right: 1px solid var(--cf-border);
  display: flex; flex-direction: column;
  padding: var(--cf-5) var(--cf-3);
  z-index: 40;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
  transition: width var(--cf-mid) var(--cf-ease-out),
              flex-basis var(--cf-mid) var(--cf-ease-out),
              padding var(--cf-mid) var(--cf-ease-out);
}
/* Estado colapsado (desktop): la sidebar se oculta por completo y el main ocupa todo */
.cf-shell.collapsed .cf-sidebar {
  width: 0;
  flex-basis: 0;
  padding-left: 0; padding-right: 0;
  border-right-color: transparent;
}
.cf-sidebar-brand { display: flex; align-items: center; gap: var(--cf-2); padding: var(--cf-2) var(--cf-3) var(--cf-6); }
.cf-sidebar-brand .cf-logo-mark { width: 30px; height: 30px; }
.cf-sidebar-brand span { font-weight: 700; font-size: 1.12rem; letter-spacing: var(--cf-tracking-tight); color: var(--cf-blue-800); }
.cf-nav-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; flex: 1; }
.cf-nav-item {
  display: flex; align-items: center; gap: var(--cf-3);
  padding: 11px var(--cf-3); border-radius: var(--cf-r-sm);
  font-size: 0.93rem; font-weight: 600; color: var(--cf-text-2);
  cursor: pointer; transition: background var(--cf-fast) var(--cf-ease), color var(--cf-fast) var(--cf-ease);
  border: none; background: transparent; width: 100%; text-align: left;
}
.cf-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; opacity: .85; }
.cf-nav-item:hover { background: var(--cf-blue-50); color: var(--cf-blue-700); }
.cf-nav-item.active { background: var(--cf-blue-50); color: var(--cf-blue-700); font-weight: 600; }
.cf-nav-item.active svg { opacity: 1; color: var(--cf-blue-600); }
.cf-nav-item .cf-mini-soon {
  margin-left: auto; font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--cf-warn); background: var(--cf-warn-bg);
  padding: 2px 7px; border-radius: var(--cf-r-full);
}
.cf-user {
  display: flex; align-items: center; gap: var(--cf-3); padding: var(--cf-2) var(--cf-3);
}
.cf-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--cf-grad); color: #fff; font-weight: 700; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}
.cf-user-meta { line-height: 1.25; overflow: hidden; }
.cf-user-meta strong { display: block; font-size: 0.85rem; color: var(--cf-text); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.cf-user-meta small { font-size: 0.75rem; color: var(--cf-muted); }
.cf-logout {
  width: 100%; margin-top: var(--cf-2);
  display: flex; align-items: center; gap: var(--cf-3); padding: 10px var(--cf-3);
  border: none; background: transparent; color: var(--cf-muted); border-radius: var(--cf-r-sm);
  font-size: 0.9rem; transition: background var(--cf-fast) var(--cf-ease), color var(--cf-fast) var(--cf-ease);
}
.cf-logout svg { width: 19px; height: 19px; }
.cf-logout:hover { background: #fff0ee; color: var(--cf-danger); }

/* Área de contenido */
.cf-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--cf-bg); }
.cf-scrim { display: none; }
.cf-topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--cf-topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--cf-8);
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--cf-border);
}
.cf-topbar-left { display: flex; align-items: center; gap: var(--cf-4); min-width: 0; }
.cf-hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--cf-text-2);
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  transition: background var(--cf-fast) var(--cf-ease), color var(--cf-fast) var(--cf-ease);
}
.cf-hamburger:hover { background: var(--cf-surface-2); color: var(--cf-blue-600); }
.cf-hamburger svg { width: 22px; height: 22px; }
.cf-breadcrumb { font-size: 0.82rem; color: var(--cf-muted); }
.cf-breadcrumb b { color: var(--cf-text); font-weight: 600; }
.cf-topbar-title { font-size: 1.05rem; font-weight: 600; color: var(--cf-blue-800); letter-spacing: var(--cf-tracking-tight); }
.cf-topbar-right { display: flex; align-items: center; gap: var(--cf-3); }

/* Co-branding del cliente (white-label) en el topbar — solo logo */
.cf-cobrand {
  display: inline-flex; align-items: center;
  padding: 4px; border-radius: 10px;
  background: var(--cf-surface); border: 1px solid var(--cf-border);
}
.cf-cobrand img { width: 28px; height: 28px; object-fit: contain; display: block; }

/* Conmutador de rol del evaluador (qa_tester). Se distingue del resto del
   topbar a propósito: lo que muestra la pantalla no es el rol de la persona. */
.cf-qa-switch {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: var(--cf-r-full);
  background: var(--cf-warn-bg); border: 1px dashed var(--cf-warn);
}
.cf-qa-switch[hidden] { display: none; }
.cf-qa-switch-label {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--cf-warn);
}
.cf-qa-switch select {
  border: 1px solid var(--cf-border); border-radius: 8px;
  background: var(--cf-surface); color: var(--cf-text);
  font: inherit; font-size: 0.85rem; padding: 3px 6px; cursor: pointer;
}

/* Dropdown del avatar (logout seguro) */
.cf-usermenu-wrap { position: relative; }
.cf-avatar-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--cf-border); background: var(--cf-surface);
  padding: 5px 10px 5px 5px; border-radius: var(--cf-r-full); cursor: pointer;
  transition: border-color var(--cf-fast) var(--cf-ease), box-shadow var(--cf-fast) var(--cf-ease);
}
.cf-avatar-btn:hover { border-color: var(--cf-blue-400); box-shadow: var(--cf-shadow-xs); }
.cf-avatar-btn .cf-chevron { width: 15px; height: 15px; color: var(--cf-muted); transition: transform var(--cf-fast) var(--cf-ease); }
.cf-avatar-btn[aria-expanded="true"] .cf-chevron { transform: rotate(180deg); }

.cf-usermenu {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 248px; padding: var(--cf-2);
  background: var(--cf-surface); border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-md); box-shadow: var(--cf-shadow-lg);
  z-index: 60;
  animation: cf-menu-in var(--cf-fast) var(--cf-ease-out);
}
@keyframes cf-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cf-usermenu-head {
  display: flex; align-items: center; gap: var(--cf-3);
  padding: var(--cf-3); border-bottom: 1px solid var(--cf-border); margin-bottom: var(--cf-2);
}
.cf-usermenu-head .cf-user-meta strong { font-size: 0.88rem; }
.cf-usermenu-item {
  width: 100%; display: flex; align-items: center; gap: var(--cf-3);
  padding: 10px var(--cf-3); border: none; background: transparent;
  border-radius: var(--cf-r-sm); font-size: 0.9rem; color: var(--cf-text-2); cursor: pointer;
  transition: background var(--cf-fast) var(--cf-ease), color var(--cf-fast) var(--cf-ease);
}
.cf-usermenu-item svg { width: 18px; height: 18px; }
.cf-usermenu-item.danger:hover { background: #fff0ee; color: var(--cf-danger); }
.cf-usermenu-item:hover { background: var(--cf-surface-2); color: var(--cf-blue-700); }

.cf-content { padding: var(--cf-10) var(--cf-8); flex: 1; }

/* El hueco que un menú necesita para abrir hacia abajo.

   `scrollToFitBelow` (`js/nota-campos.js`) desplaza la página hasta dejar bajo
   el campo el sitio que el panel pide —134 de mínimo cómodo, 6 de separación,
   20 de margen contra el borde y 8 para que un redondeo no decida el lado—,
   pero respeta los límites del documento: cuando no queda recorrido, no fuerza
   nada y el panel se voltea hacia arriba, tapando lo que hay sobre el campo.
   En CI eso escondió la compuerta «Glasgow no evaluable», con 24 px libres bajo
   el campo y el menú abierto encima de ella.

   Este hueco **solo existe mientras un panel lo pide**. Reservarlo de forma
   permanente sí daba sitio, pero cambiaba el desplazamiento en todos los demás
   estados: como relleno sacaba al último campo de la banda cómoda de §41.1, y
   como altura mínima volvía desplazable una página que no lo era, de modo que
   abrir un diálogo movía la geometría bajo el cursor. Las dos regresiones las
   atrapó la suite de teclado. */
body::after {
  content: '';
  display: block;
  height: var(--cf-popup-runway-active, 0px);
}
.cf-content-narrow { max-width: 1080px; margin: 0 auto; width: 100%; }

/* Vistas conmutables del dashboard */
.cf-view { display: none; animation: cf-fade-up .45s var(--cf-ease-out); }
.cf-view.active { display: block; }
@keyframes cf-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Bienvenida */
.cf-welcome { margin-bottom: var(--cf-10); }
.cf-welcome h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: var(--cf-blue-800); letter-spacing: var(--cf-tracking-tighter); margin: 0 0 var(--cf-2); }
.cf-welcome p { font-size: 1.05rem; color: var(--cf-text-2); margin: 0; }
.cf-welcome .cf-wave { display: inline-block; animation: cf-wave 2.4s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes cf-wave { 0%,60%,100%{transform:rotate(0);} 10%,30%{transform:rotate(14deg);} 20%{transform:rotate(-8deg);} }

/* Tarjetas de módulo (dashboard) */
.cf-dash-modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cf-6); }
.cf-dash-module {
  position: relative;
  background: var(--cf-surface); border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-lg); padding: var(--cf-8); box-shadow: var(--cf-shadow-sm);
  display: flex; flex-direction: column; gap: var(--cf-4);
  transition: transform var(--cf-mid) var(--cf-ease-out), box-shadow var(--cf-mid) var(--cf-ease-out), border-color var(--cf-mid) var(--cf-ease-out);
}
.cf-dash-module.is-available:hover { transform: translateY(-6px); box-shadow: var(--cf-shadow-lg); border-color: var(--cf-blue-400); }
.cf-dash-module.is-soon { opacity: .9; }
.cf-dash-module.is-soon .cf-module-mark { background: var(--cf-bg-soft); color: var(--cf-muted); box-shadow: none; }
.cf-dash-module .cf-module-mark { width: 54px; height: 54px; }
.cf-dash-module h3 { font-size: 1.25rem; font-weight: 600; color: var(--cf-blue-800); margin: 0; }
.cf-dash-module p { font-size: 0.95rem; color: var(--cf-text-2); margin: 0; flex: 1; }
.cf-dash-module .cf-btn { margin-top: var(--cf-2); }

/* Versión al pie de la sidebar */
.cf-sidebar-version {
  margin-top: auto; padding: var(--cf-3);
  font-size: 0.72rem; color: var(--cf-muted); letter-spacing: .02em;
}

/* Etiqueta de sección dentro de las vistas */
.cf-section-label {
  font-size: 0.74rem; font-weight: 700; letter-spacing: var(--cf-tracking-wide);
  text-transform: uppercase; color: var(--cf-muted);
  margin: 0 0 var(--cf-4);
}

/* Avatar grande (settings) */
.cf-avatar-lg { width: 56px; height: 56px; font-size: 1.15rem; }

/* "Cómo funciona" — pasos */
.cf-howit { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cf-5); }
.cf-howit-step {
  display: flex; gap: var(--cf-4); align-items: flex-start;
  background: var(--cf-surface); border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-lg); padding: var(--cf-5);
}
.cf-howit-num {
  font-size: 1.05rem; font-weight: 800; color: var(--cf-blue-600);
  background: var(--cf-blue-50); border-radius: var(--cf-r-sm);
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  letter-spacing: var(--cf-tracking-tight);
}
.cf-howit-step strong { display: block; font-size: 0.95rem; color: var(--cf-blue-800); margin-bottom: 3px; }
.cf-howit-step p { font-size: 0.86rem; color: var(--cf-text-2); margin: 0; line-height: 1.5; }

/* Configuración */
.cf-settings-card {
  background: var(--cf-surface); border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-lg); box-shadow: var(--cf-shadow-sm);
  padding: var(--cf-6); max-width: 620px;
}
.cf-settings-head { display: flex; align-items: center; gap: var(--cf-4); padding-bottom: var(--cf-5); border-bottom: 1px solid var(--cf-border); margin-bottom: var(--cf-2); }
.cf-settings-rows { display: grid; }
.cf-settings-row { display: flex; justify-content: space-between; align-items: center; gap: var(--cf-4); padding: var(--cf-4) 0; border-bottom: 1px solid var(--cf-border); }
.cf-settings-row:last-child { border-bottom: none; }
.cf-settings-k { font-size: 0.85rem; color: var(--cf-muted); font-weight: 600; }
.cf-settings-v { font-size: 0.92rem; color: var(--cf-text); font-weight: 600; }
.cf-settings-soon { display: flex; align-items: center; gap: var(--cf-4); margin-top: var(--cf-6); max-width: 620px; }
.cf-settings-soon p { font-size: 0.9rem; color: var(--cf-text-2); margin: 0; }

/* ====================== INTEGRACIÓN MÓDULO ENTREGA ======================
   Carga DESPUÉS de styles.css. Neutraliza el fondo/padding globales y el
   "card" centrado del note app para que viva dentro del shell, conservando
   el layout de dos columnas y TODOS los IDs intactos. */
body.cf-app-body {
  background: var(--cf-bg) !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.cf-app-body .container {
  --note-width-main: clamp(960px, 72vw, 1100px);
  --note-width-with-aside: clamp(1120px, 82vw, 1240px);
  width: 100%;
  max-width: var(--note-width-main) !important;   /* cap para lectura cómoda en escritorio */
  margin: 0 auto !important;       /* centrado */
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
}
.cf-app-body .container.container--with-aside {
  max-width: var(--note-width-with-aside) !important;
}
/* Ocultar la cabecera grande original — el shell ya provee marca/título */
.cf-app-body .container > .header { display: none !important; }
/* El contenido de la nota se inserta dentro del área del shell */
.cf-app-body .content { padding: 0 !important; }

/* Header de página delgado para Entrega (centrado con el note app) */
.cf-page-head {
  --note-width-main: clamp(960px, 72vw, 1100px);
  --note-width-with-aside: clamp(1120px, 82vw, 1240px);
  margin: 0 auto var(--cf-6);
  max-width: var(--note-width-main);
}
.cf-page-head.page-head--with-aside {
  max-width: var(--note-width-with-aside);
}
.cf-page-head h1 { font-size: 1.4rem; font-weight: 700; color: var(--cf-blue-800); letter-spacing: var(--cf-tracking-tight); margin: 0 0 4px; }
.cf-page-head p { font-size: 0.95rem; color: var(--cf-text-2); margin: 0; }

/* ====================== RESPONSIVE ====================== */
@media (max-width: 1024px) {
  .cf-split { grid-template-columns: 1fr; gap: var(--cf-10); }
  .cf-split-text h2 { text-align: center; }
  .cf-grid-3, .cf-modules, .cf-dash-modules { grid-template-columns: repeat(2, 1fr); }
  /* La marca deja de competir por el renglón y pasa arriba, a ancho completo; las
     dos columnas de enlaces se reparten el siguiente. El descriptor se ensancha
     porque ya no comparte fila con nada. */
  .cf-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cf-8) var(--cf-10); }
  .cf-footer-identity { grid-column: 1 / -1; }
  .cf-footer-tagline { max-width: 52ch; }
  .cf-cta { grid-template-columns: 1fr; gap: var(--cf-8); padding: var(--cf-12) var(--cf-10); }
  .cf-cta-action { align-items: flex-start; }
}

@media (max-width: 860px) {
  /* Shell colapsable */
  .cf-shell { grid-template-columns: 1fr; }
  .cf-sidebar {
    position: fixed; left: 0; top: 0; width: 280px;
    transform: translateX(-100%); transition: transform var(--cf-mid) var(--cf-ease-out);
    box-shadow: var(--cf-shadow-lg);
  }
  .cf-shell.sidebar-open .cf-sidebar { transform: translateX(0); }
  .cf-scrim {
    display: block;
    position: fixed; inset: 0; background: rgba(23,32,52,.4); z-index: 35;
    opacity: 0; pointer-events: none; transition: opacity var(--cf-mid) var(--cf-ease);
  }
  .cf-shell.sidebar-open .cf-scrim { opacity: 1; pointer-events: auto; }
  .cf-hamburger { display: inline-flex; }

  .cf-login { grid-template-columns: 1fr; }
  .cf-login-brand { display: none; }

  .cf-nav-links { display: none; }
  .cf-nav-toggle { display: inline-flex; }
}

@media (max-width: 600px) {
  .cf-grid-3, .cf-modules, .cf-dash-modules { grid-template-columns: 1fr; }
  .cf-section { padding: var(--cf-16) var(--cf-5); }
  .cf-footer { padding: var(--cf-10) var(--cf-5) var(--cf-6); }
  .cf-footer-inner { grid-template-columns: 1fr; gap: var(--cf-8); }
  /* En una sola columna los extremos del cierre se apilan y vuelven a la izquierda:
     centrarlos aquí rompería la espina que comparten marca, confianza y copyright. */
  .cf-footer-copy { justify-content: flex-start; }
  .cf-footer-trust { gap: var(--cf-2) var(--cf-5); }
  .cf-cta { padding: var(--cf-10) var(--cf-6); border-radius: var(--cf-r-lg); }
  .cf-cta-action { align-items: stretch; }
  .cf-btn-calendar { justify-content: flex-start; }
  .cf-btn-calendar .cf-btn-calendar-arrow { margin-left: auto; }
  .cf-cta-note { justify-content: center; }
  .cf-hero { padding: 120px var(--cf-5) var(--cf-16); }
  .cf-content { padding: var(--cf-6) var(--cf-5); }
  .cf-topbar { padding: 0 var(--cf-5); }
  .cf-hero-actions { flex-direction: column; }
  .cf-hero-actions .cf-btn { width: 100%; }
  /* En móvil el logo es pequeño; el título usa un tamaño legible propio (algo menor
     para caber dentro del corazón compacto sin tocar las partículas). */
  .cf-hero h1 { font-size: clamp(32px, 9vw, 52px); }
}

/* ====================== REDUCED MOTION ====================== */
@media (prefers-reduced-motion: reduce) {
  .cf *, .cf *::before, .cf *::after { animation: none !important; transition: none !important; }
  .cf-reveal { opacity: 1; transform: none; }
  .cf-hero-logo { animation: none; }
}
/* Protected pages remain non-interactive until the authoritative guard resolves. */
.cf-auth-pending body {
  visibility: hidden;
}

.cf-frontend-only-banner {
  position: fixed;
  right: var(--cf-4);
  bottom: var(--cf-4);
  z-index: 9999;
  max-width: min(520px, calc(100vw - 2 * var(--cf-4)));
  padding: var(--cf-2) var(--cf-4);
  border: 1px solid #d97706;
  border-radius: var(--cf-r-lg);
  background: #fffbeb;
  color: #78350f;
  box-shadow: var(--cf-shadow-lg);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.35;
  pointer-events: none;
}

/* Un solo fondo para todas las ventanas de la aplicacion. Vive tambien aqui porque
   el login y el tablero no cargan la hoja del formulario. */
dialog::backdrop { background: rgb(23 32 52 / 44%); backdrop-filter: blur(2px); }

.cf-session-warning {
  /* `turno.html` trae un reset con `* { margin: 0 }` que anula el `margin: auto`
     con el que un `<dialog>` modal se centra. Se repone aqui tambien para que el
     aviso no dependa de que otra hoja lo haya arreglado. */
  margin: auto;
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 0;
  border: 0;
  border-radius: var(--cf-r-md);
  box-shadow: var(--cf-shadow-xl);
  color: var(--cf-text);
}

.cf-session-warning__body { position: relative; }
.cf-session-warning__close {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--cf-border-2);
  border-radius: 50%;
  background: #fff;
  color: var(--cf-text-2);
  font: inherit;
  cursor: pointer;
}
.cf-session-warning__close:hover { color: var(--cf-text); background: var(--cf-surface-2); }
.cf-session-warning__close:focus-visible { outline: 2px solid var(--cf-blue-600); outline-offset: 2px; }
.cf-session-warning h2 { padding-inline-end: 40px; }


.cf-session-warning__body {
  padding: var(--cf-8, 2rem);
}

.cf-session-warning__body h2 {
  margin: 0 0 var(--cf-3, .75rem);
  font-size: 1.25rem;
}

.cf-session-warning__body p {
  margin: 0;
  line-height: 1.6;
}

.cf-session-warning__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cf-3, .75rem);
  margin-top: var(--cf-6, 1.5rem);
}
.cf-dash-module[hidden] { display: none !important; }

/* Administración no clínica */
.cf-admin-status {
  min-height: 1.5rem;
  margin-bottom: var(--cf-5);
  color: var(--cf-text-2);
  font-size: .9rem;
}
.cf-admin-status[data-state="error"] { color: #9f2d2d; }
.cf-admin-card { margin-bottom: var(--cf-6); }
.cf-admin-card h2 { margin: 0 0 var(--cf-4); font-size: 1.08rem; }
.cf-admin-form { display: grid; gap: var(--cf-4); margin-top: var(--cf-4); }
.cf-admin-form--inline,
.cf-admin-grid { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); align-items: end; }
.cf-admin-form label,
[data-cf-platform-admin] > .cf-settings-card > label {
  display: grid;
  gap: .4rem;
  color: var(--cf-text-2);
  font-size: .86rem;
  font-weight: 600;
}
.cf-admin-form input,
.cf-admin-form select,
[data-cf-platform-tenant],
.cf-admin-table select {
  width: 100%;
  min-height: 2.5rem;
  padding: .55rem .7rem;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-sm);
  background: var(--cf-surface);
  color: var(--cf-text);
  font: inherit;
}
.cf-admin-table-wrap { overflow-x: auto; margin-top: var(--cf-4); }
.cf-admin-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.cf-admin-table th,
.cf-admin-table td { padding: .7rem; border-bottom: 1px solid var(--cf-border); text-align: left; vertical-align: middle; }
.cf-admin-table th { color: var(--cf-text-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.cf-btn-small { min-height: 2rem; padding: .35rem .65rem; }
.cf-admin-note-types { display: grid; gap: var(--cf-4); }
.cf-admin-note-type {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr) auto;
  align-items: end;
  gap: var(--cf-4);
  padding-block: var(--cf-3);
  border-bottom: 1px solid var(--cf-border);
}
.cf-admin-note-type:last-child { border-bottom: 0; }
.cf-admin-note-type label {
  display: grid;
  gap: .4rem;
  color: var(--cf-text-2);
  font-size: .86rem;
  font-weight: 600;
}
.cf-admin-note-type input:not([type="checkbox"]) {
  width: 100%;
  min-height: 2.5rem;
  padding: .55rem .7rem;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-sm);
  background: var(--cf-surface);
  color: var(--cf-text);
  font: inherit;
}
/* ── Administración: directorio maestro y ficha de institución ───────────────
   El panel creció por acumulación hasta siete tarjetas apiladas. Aquí se separa
   en un directorio comparable y una ficha enfocada, y se añaden las tres piezas
   de retroalimentación que faltaban: aviso, carga y confirmación. */

.cf-directory-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-4);
  margin: var(--cf-5) 0 var(--cf-4);
}
.cf-directory-bar > :last-child { margin-left: auto; }
.cf-field-inline { display: inline-flex; align-items: center; gap: var(--cf-2); }
.cf-field-label { font-size: .82rem; color: var(--cf-text-2); }
.cf-field-inline input[type="search"] {
  min-width: 16rem; padding: .5rem .7rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--cf-border); border-radius: var(--cf-r-sm);
  background: var(--cf-surface); color: var(--cf-text);
}
.cf-field-hint { margin: 0 0 var(--cf-3); font-size: .85rem; color: var(--cf-text-2); }

/* La pista y el logo vigente ocupan la fila entera de la rejilla: partidos en
   columnas quedaban lejos del campo que explican. */
#brandingLogoHint,
.cf-branding-logo-current { grid-column: 1 / -1; }
.cf-branding-logo-current { display: flex; align-items: center; gap: var(--cf-4); flex-wrap: wrap; }
.cf-branding-logo-current img {
  max-height: 3rem; max-width: 12rem; object-fit: contain;
  border: 1px solid var(--cf-border); border-radius: var(--cf-r-sm);
  padding: var(--cf-2); background: #fff;
}

.cf-switch { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; cursor: pointer; }
.cf-switch input { width: 1.05rem; height: 1.05rem; accent-color: var(--cf-blue-700, #273777); }

.cf-directory-table tbody tr { cursor: pointer; }
.cf-directory-table tbody tr:hover { background: var(--cf-blue-50); }
.cf-directory-table tbody tr:focus-within { outline: 2px solid var(--cf-blue-600); outline-offset: -2px; }
.cf-tenant-link {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 600;
  color: var(--cf-blue-800); cursor: pointer; text-align: left;
}
.cf-tenant-link:hover { text-decoration: underline; }
.cf-directory-empty { margin: var(--cf-5) 0; color: var(--cf-text-2); font-size: .9rem; }

.cf-badge {
  display: inline-block; padding: .18rem .55rem; border-radius: var(--cf-r-full);
  font-size: .74rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  background: var(--cf-blue-50); color: var(--cf-blue-600); border: 1px solid var(--cf-border);
}
.cf-badge--active { background: var(--cf-success-bg); color: var(--cf-success); border-color: transparent; }
.cf-badge--suspended { background: var(--cf-warn-bg); color: var(--cf-warn); border-color: transparent; }
.cf-badge--closed { background: var(--cf-surface-2); color: var(--cf-muted); border-color: transparent; }
.cf-badge--test { background: var(--cf-warn-bg); color: var(--cf-warn); border: 1px dashed var(--cf-warn); }

/* ── Migas y encabezado del detalle ── */
.cf-breadcrumb-nav { display: flex; align-items: center; gap: .5rem; margin: var(--cf-5) 0 var(--cf-3); font-size: .88rem; }
.cf-crumb-link { border: 0; background: none; padding: 0; font: inherit; color: var(--cf-blue-700, #273777); cursor: pointer; }
.cf-crumb-link:hover { text-decoration: underline; }
.cf-crumb-sep { color: var(--cf-text-2); }
.cf-crumb-current { color: var(--cf-text-2); }
.cf-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-3); margin-bottom: var(--cf-4); }
.cf-detail-head h2 { margin: 0; font-size: 1.35rem; color: var(--cf-blue-800); }
.cf-detail-badges { display: flex; gap: .4rem; }

/* ── Pestañas ── */
.cf-tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--cf-border); margin-bottom: var(--cf-5); }
.cf-tab {
  border: 0; background: none; padding: .6rem .9rem; font: inherit; font-size: .92rem;
  /* Era `--cf-text-secondary`, un token que no existe en el repositorio: la declaración
     quedaba inválida, la pestaña heredaba el casi-negro `--cf-text` y la NO seleccionada
     salía más oscura que la seleccionada. La jerarquía iba al revés. */
  color: var(--cf-text-2); cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.cf-tab:hover { color: var(--cf-blue-700); }
.cf-tab[aria-selected="true"] { color: var(--cf-blue-700); font-weight: 600; border-bottom-color: var(--cf-blue-700); }
/* El anillo era `--cf-blue-500` (#9cb3d7): 1,9:1 sobre blanco, invisible en la práctica. */
.cf-tab:focus-visible { outline: 2px solid var(--cf-blue-600); outline-offset: 2px; border-radius: var(--cf-r-sm); }

/* ── Zona de peligro ── */
.cf-danger-zone { border: 1px solid rgb(192 57 43 / 35%); }
.cf-danger-zone h3 { color: var(--cf-danger); }
.cf-btn-danger { background: var(--cf-danger); color: #fff; border: 1px solid var(--cf-danger); }
.cf-btn-danger:hover { filter: brightness(1.06); }

/* ── Avisos ── */
.cf-toasts {
  position: fixed; right: var(--cf-5); bottom: var(--cf-5); z-index: 200;
  display: flex; flex-direction: column; gap: .5rem; max-width: min(26rem, calc(100vw - 2rem));
}
.cf-toast {
  padding: .8rem 1rem; border-radius: var(--cf-r-sm); font-size: .9rem; line-height: 1.45;
  background: var(--cf-surface); color: var(--cf-text);
  border: 1px solid var(--cf-border); border-left: 4px solid var(--cf-success);
  box-shadow: var(--cf-shadow-md);
}
.cf-toast[data-state="error"] { border-left-color: var(--cf-danger); }
.cf-toast[data-state="warn"] { border-left-color: var(--cf-warn); }

/* ── Modales ── */
.cf-modal {
  border: 1px solid var(--cf-border); border-radius: var(--cf-r-md);
  padding: var(--cf-5); max-width: 32rem; width: calc(100vw - 2rem);
  background: var(--cf-surface); color: var(--cf-text); box-shadow: var(--cf-shadow-lg);
}
.cf-modal h3 { margin: 0 0 var(--cf-3); font-size: 1.1rem; color: var(--cf-blue-800); }
.cf-modal-actions { display: flex; justify-content: flex-end; gap: var(--cf-3); margin-top: var(--cf-5); }
.cf-modal label { display: grid; gap: .35rem; font-size: .86rem; color: var(--cf-text-2); margin-top: var(--cf-4); }
.cf-modal input {
  padding: .55rem .7rem; font: inherit; font-size: .92rem;
  border: 1px solid var(--cf-border); border-radius: var(--cf-r-sm);
  background: var(--cf-surface); color: var(--cf-text);
}
.cf-checkbox-field { flex-direction: row; align-items: center; gap: .5rem; }

/* ── Anchura de la administración ────────────────────────────────────────────
   Las tarjetas están capadas a 620px, que es una anchura de lectura pensada
   para texto, no para formularios de ocho campos ni tablas de seis columnas. En
   esta vista se sueltan y el contenedor se ensancha; el resto del panel conserva
   su medida, porque ahí el cap sí ayuda. */
#view-administracion .cf-settings-card { max-width: none; }
.cf-content-narrow:has(#view-administracion.active) { max-width: 1400px; }
#view-administracion .cf-admin-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

@media (max-width: 1024px) {
  .cf-content-narrow:has(#view-administracion.active) { max-width: 1080px; }
}

/* ── Analítica de uso (superadmin) ───────────────────────────────────────────
   Cifras que se leen, no que se operan: los indicadores, gráficos y tablas no son
   paradas de Tab. Una sola serie por gráfico, en --cf-blue-600 (3:1 o más sobre
   blanco, guía de diseño §7); los tonos claros solo hacen de fondo decorativo y
   toda cifra está además escrita. */
#view-analitica .cf-settings-card { max-width: none; }
.cf-content-narrow:has(#view-analitica.active) { max-width: 1400px; }
@media (max-width: 1024px) {
  .cf-content-narrow:has(#view-analitica.active) { max-width: 1080px; }
}
.cf-analytics-status { margin: 0 0 var(--cf-2); min-height: 1.3em; font-size: .88rem; color: var(--cf-text-2); }
.cf-analytics-status[data-state="error"] { color: var(--cf-danger); font-weight: 600; }
.cf-analytics-scope { margin: 0 0 var(--cf-5); font-size: .88rem; color: var(--cf-text-2); }
[data-cf-analytics-refresh][aria-disabled="true"] { opacity: .7; cursor: progress; }

/* Los filtros usan la misma medida que el buscador del directorio. */
#view-analitica .cf-field-inline select {
  min-height: 2.4rem; padding: .45rem .6rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--cf-border); border-radius: var(--cf-r-sm);
  background: var(--cf-surface); color: var(--cf-text);
}

.cf-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--cf-4); margin: 0 0 var(--cf-5);
}
.cf-kpi {
  padding: var(--cf-4); border: 1px solid var(--cf-border-2); border-radius: var(--cf-r-md);
  background: var(--cf-surface);
}
.cf-kpi dt { font-size: .8rem; font-weight: 600; color: var(--cf-text-2); }
.cf-kpi dd { margin: var(--cf-1) 0 0; font-size: 1.6rem; font-weight: 700; color: var(--cf-blue-800); }
.cf-kpi-note { display: block; margin-top: var(--cf-1); font-size: .78rem; font-weight: 400; color: var(--cf-text-2); }

/* `min-width: 0` es lo que deja a la tabla desplazarse dentro de su tarjeta: sin él, la
   celda de la rejilla crece al ancho de las cifras y empuja toda la página de lado. */
.cf-analytics-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: var(--cf-5); align-items: start;
}
.cf-analytics-grid > .cf-settings-card { margin: 0; min-width: 0; }
.cf-analytics-subhead { margin: var(--cf-5) 0 0; font-size: .95rem; color: var(--cf-blue-800); }
.cf-analytics-caption { caption-side: top; text-align: left; padding-bottom: var(--cf-2); font-size: .85rem; font-weight: 600; color: var(--cf-text-2); }
.cf-analytics-table .cf-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf-analytics-table tbody th { font-weight: 400; color: var(--cf-text); text-transform: none; letter-spacing: 0; font-size: .86rem; }
.cf-analytics-tenant { display: inline-flex; align-items: center; gap: var(--cf-2); flex-wrap: wrap; }
.cf-suppressed { color: var(--cf-text-2); font-style: italic; }

.cf-share { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--cf-2); }
.cf-meter { display: block; width: 5rem; height: .4rem; }
.cf-meter-track { fill: var(--cf-blue-100); }
.cf-meter-value { fill: var(--cf-blue-600); }

.cf-chart-block { margin-top: var(--cf-2); }
.cf-chart { display: block; width: 100%; height: auto; margin-top: var(--cf-3); }
.cf-chart-bar { fill: var(--cf-blue-600); }
.cf-chart-axis { stroke: var(--cf-border-2); stroke-width: 1; }
.cf-chart-label { fill: var(--cf-text-2); font-size: 11px; }
.cf-chart-data summary {
  margin-top: var(--cf-2); font-size: .85rem; color: var(--cf-blue-700); cursor: pointer;
}
.cf-chart-data summary:focus-visible { outline: 2px solid var(--cf-blue-600); outline-offset: 2px; border-radius: var(--cf-r-sm); }

/* Comentarios de la opinión sobre las notas: plegados, uno debajo de otro. El texto es
   del personal y se cita tal cual; la línea de contexto va en texto secundario. */
.cf-feedback-comments summary {
  margin-top: var(--cf-2); font-size: .85rem; color: var(--cf-blue-700); cursor: pointer;
}
.cf-feedback-comments summary:focus-visible { outline: 2px solid var(--cf-blue-600); outline-offset: 2px; border-radius: var(--cf-r-sm); }
.cf-feedback-comment-list { list-style: none; margin: var(--cf-3) 0 0; padding: 0; display: grid; gap: var(--cf-3); }
.cf-feedback-comment { padding: var(--cf-3) var(--cf-4); border: 1px solid var(--cf-border); border-radius: var(--cf-r-sm); background: var(--cf-surface-2); min-width: 0; }
.cf-feedback-comment-meta { margin: 0; font-size: .8rem; font-weight: 600; color: var(--cf-text-2); }
.cf-feedback-comment-tags { margin: var(--cf-1) 0 0; font-size: .8rem; color: var(--cf-text-2); }
.cf-feedback-comment-text { margin: var(--cf-2) 0 0; padding-left: var(--cf-3); border-left: 3px solid var(--cf-blue-200); font-size: .9rem; color: var(--cf-text); overflow-wrap: anywhere; white-space: pre-wrap; }

@media (max-width: 640px) {
  .cf-analytics-grid { grid-template-columns: 1fr; }
  .cf-meter { width: 3rem; }
}

@media (max-width: 860px) {
  .cf-directory-bar > :last-child { margin-left: 0; }
  .cf-field-inline input[type="search"] { min-width: 0; width: 100%; }
  .cf-toasts { right: var(--cf-3); left: var(--cf-3); bottom: var(--cf-3); max-width: none; }
}


@media (max-width: 640px) {
  .cf-admin-form--inline,
  .cf-admin-grid,
  .cf-admin-note-type { grid-template-columns: 1fr; }
}

/* ── Utilidades que reemplazan atributos style en línea ──────────────────────
   Una Content-Security-Policy sin 'unsafe-inline' tampoco aplica los atributos
   `style=`. Estas clases sustituyen uno a uno los que había en las páginas, con
   los mismos valores, para que el sitio remoto se vea igual bajo la política
   estricta. */
.cf-section-label--spaced { margin-top: var(--cf-10); }
.cf-section--full-bleed {
    max-width: none;
    border-top: 1px solid var(--cf-border);
    border-bottom: 1px solid var(--cf-border);
}
.cf-section-inner { max-width: var(--cf-maxw); margin: 0 auto; }
.cf-btn--spaced { margin-top: var(--cf-4); }
.cf-link-inherit { color: inherit; }

/* ── Acceso institucional ────────────────────────────────────────────────────
   Los botones de proveedor preceden al formulario de credenciales y solo se
   muestran si el ambiente declara ese proveedor. */
.cf-login-providers { display: flex; flex-direction: column; gap: var(--cf-2); margin-bottom: var(--cf-2); }
.cf-provider-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--cf-2); }
.cf-provider-btn svg { flex: 0 0 auto; }
.cf-login-divider {
    display: flex;
    align-items: center;
    gap: var(--cf-3);
    margin: var(--cf-2) 0 0;
    color: var(--cf-text-2);
    font-size: 0.85rem;
}
.cf-login-divider::before,
.cf-login-divider::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px solid var(--cf-border);
}