/* ==================================================================
   ENCABEZADOS DE SECCIÓN — compactos y claros (capa v11)
   ------------------------------------------------------------------
   Cada sección conserva su dialecto (acento, motivo, piezas propias),
   pero el encabezado deja de comerse media pantalla: titular de 24–30 px,
   una línea de apoyo, cifras y acciones en la misma franja. Se trabaja
   con la pantalla, no se la mira.

   Los encabezados que eran oscuros (Reseñas, Plantillas, Caja, Cuentas,
   Academia) pasan a superficie clara con un tinte del acento de la
   sección: el oscuro pesaba más que todo lo demás junto.

   No se toca ningún HTML: todo son reglas que pisan a style.css y
   soft.css. Para volver atrás alcanza con sacar el <link>.
   ================================================================== */

:root{
  --head-title: clamp(1.4rem, 2vw, 1.8rem);
  --head-surface: var(--color-surface);
}

/* ---------- 1. Titular, apoyo y antetítulo: una sola medida ---------- */
.cx-board-title, .an-head-title, .rv-hero-title, .ct-hero-title, .fl-hero-title,
.tp-hero-title, .ops-title, .st-hero-title, .ac-hero-title, .caja-date{
  font-size: var(--head-title) !important;
  line-height: 1.14 !important;
  font-weight: 700 !important;
  letter-spacing: -.026em !important;
  margin: 8px 0 6px !important;
}
.cx-board-sub, .an-head-sub, .rv-hero-sub, .ct-hero-sub, .fl-hero-sub,
.tp-hero-sub, .ops-sub, .st-hero-sub, .ac-hero-sub{
  font-size: 13.5px !important; line-height: 1.55 !important; max-width: 66ch !important;
  margin-bottom: 0 !important;
}
/* La fecha de la caja venía en "Jueves, 15 De Octubre": sólo va mayúscula al inicio */
.caja-date{ text-transform: none !important; }
.caja-date::first-letter{ text-transform: uppercase; }

/* ---------- 2. CRM — la central ---------- */
.cx-board{ padding: 20px 26px !important; gap: 14px 28px !important; }

/* ---------- 3. Analytics — almanaque ---------- */
.an-head{ gap: 20px; padding-bottom: 0; }
.an-head-motif{ width: 84px; }
.an-head-eyebrow{ font-size: 10px; }

/* ---------- 4. Configuración — el taller ---------- */
.st-hero{ padding: 20px 26px !important; grid-template-columns: minmax(0,1fr) 190px; gap: 20px; }
.st-hero-art{ max-width: 190px; }
.st-hero-art svg{ width: 100%; height: auto; max-height: 92px; }

/* ---------- 5. Administración — barra de comando ---------- */
.ops-bar-in{ padding: 18px 24px 18px !important; gap: 24px; }

/* ---------- 6. Contenido social y Archivos (ya eran claros) ---------- */
.ct-hero, .fl-hero{ padding: 26px 30px !important; gap: 28px !important; }
.ct-hero{ grid-template-columns: minmax(0,1fr) 230px !important; }
.ct-hero-actions{ margin: 16px 0 18px !important; }
.ct-stats{ padding-top: 14px !important; }
.ct-stats .stat-num, .fl-hero-stats .stat-num{ font-size: clamp(1.25rem, 2vw, 1.6rem) !important; }
.fl-hero-stats{ margin-top: 16px !important; padding-top: 14px !important; }
.ct-phone{ width: 196px; border-radius: 28px; padding: 8px; }
.ct-phone .tilt-sheen{ border-radius: 28px; }
.ct-phone-screen{ border-radius: 21px; padding-top: 20px; }
.ct-phone-media{ height: 104px; }
.fl-hero .fl-drop, .fl-hero [class*="fl-drop"]{ padding-top: 22px; padding-bottom: 22px; }

/* ---------- 7. Encabezados que eran oscuros → claros ---------- */
.rv-hero, .tp-hero, .caja-desk, .vault, .ac-hero{
  color: var(--color-primary) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: none !important;
  border-radius: 24px !important;
}
.rv-hero{
  padding: 24px 28px !important;
  background: radial-gradient(900px 300px at 82% -30%, color-mix(in srgb, var(--c-rose) 11%, transparent), transparent 64%),
              linear-gradient(120deg, #fffdfd, #fbf8fb 60%, #f8f9fe) !important;
}
.tp-hero{
  padding: 24px 28px !important;
  background: radial-gradient(860px 300px at 84% -30%, color-mix(in srgb, var(--c-amber) 13%, transparent), transparent 64%),
              linear-gradient(120deg, #fffdfa, #fbf9f4 60%, #f8f9fd) !important;
}
.caja-desk{
  padding: 22px 26px 22px !important; margin-bottom: 18px;
  background: radial-gradient(860px 300px at 84% -30%, color-mix(in srgb, #d97706 10%, transparent), transparent 64%),
              var(--head-surface) !important;
}
.vault{
  padding: 24px 28px !important;
  background: radial-gradient(860px 300px at 84% -30%, color-mix(in srgb, #4f9cf0 12%, transparent), transparent 64%),
              var(--head-surface) !important;
}
.ac-hero{
  padding: 28px 32px 24px !important; margin-bottom: 22px !important;
  background: radial-gradient(900px 320px at 86% -30%, color-mix(in srgb, var(--c-violet) 12%, transparent), transparent 64%),
              linear-gradient(120deg, #fdfcff, #f9f8fe 60%, #f6fafd) !important;
}
/* Los fondos animados quedan como una textura apenas visible */
.rv-hero .ambient-canvas, .tp-hero .ambient-canvas, .caja-desk .ambient-canvas, .vault .ambient-canvas{ opacity: .28 !important; }
.rv-hero > .ar-aurora, .tp-hero > .ar-aurora, .ac-hero > .ar-aurora{ opacity: .22 !important; }
.caja-desk .ops-grid, .vault .ops-grid{ opacity: .35; }

/* Antetítulos en el tono de su sección */
.rv-hero .eyebrow{ color: var(--c-rose) !important; }
.rv-hero .eyebrow::before{ background: linear-gradient(90deg, var(--c-rose), #7cc0f7) !important; }
.tp-hero .eyebrow{ color: #b45309 !important; }
.tp-hero .eyebrow::before{ background: linear-gradient(90deg, #d97706, #f5b860) !important; }
.caja-desk .ops-eyebrow.light{ color: #b45309; }
.vault .ops-eyebrow.light{ color: #2563eb; }
.ac-hero-eyebrow{ color: var(--c-violet) !important; margin-bottom: 4px !important; }

/* Textos que estaban en blanco translúcido */
.rv-hero-title, .tp-hero-title, .ac-hero-title, .caja-date{ color: var(--color-primary) !important; }
.rv-hero-sub, .tp-hero-sub, .ac-hero-sub, .vault-sub{ color: var(--color-text-muted) !important; }
.rv-hero .grad-sky, .tp-hero .grad-sky{
  background: var(--grad-brand, linear-gradient(90deg,#1d4ed8,#4f9cf0)) !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important;
}

/* Botones translúcidos de fondo oscuro → secundarios blancos */
.rv-hero .rv-ghost-btn, .ac-hero .ac-btn.ghost,
.caja-desk .ops-btn.light, .caja-desk .ops-icon-btn.light{
  background: var(--color-surface) !important; border: 1px solid var(--hairline-strong, #dfe3ea) !important;
  color: var(--color-text-secondary) !important;
}
.rv-hero .rv-ghost-btn:hover, .ac-hero .ac-btn.ghost:hover,
.caja-desk .ops-btn.light:hover, .caja-desk .ops-icon-btn.light:hover{
  background: var(--color-surface-2, #f4f5f7) !important; color: var(--color-primary) !important;
  border-color: color-mix(in srgb, var(--color-primary) 22%, transparent) !important; transform: none;
}
.rv-hero-actions, .tp-hero-actions{ margin-top: 16px !important; }

/* --- Reseñas: medidor, chips, distribución y tendencia --- */
.rv-hero-in{ gap: 28px !important; }
.rv-chip{ color: var(--color-text-secondary) !important; background: var(--color-surface) !important; border-color: var(--hairline) !important; backdrop-filter: none !important; }
.rv-dot{ box-shadow: none !important; }
.rv-hero-chips{ margin-top: 14px !important; }
.rv-hero-gauge{ width: 150px !important; height: 150px !important; color: var(--color-primary); }
.rv-hero-gauge .ar-ring{ width: 150px !important; height: 150px !important; }
.rv-hero-gauge::before{
  inset: 11px !important;
  background: radial-gradient(circle at 40% 30%, #ffffff, #f5f6fb 72%) !important;
  box-shadow: inset 0 0 0 1px var(--hairline), 0 8px 22px rgba(14,33,72,.07) !important;
}
.rv-gauge-ring{ color: var(--color-primary) !important; }
.rv-gauge-num{ font-size: 2.3rem !important; color: var(--color-primary); font-family: var(--font-body) !important; font-weight: 700 !important; }
.rv-gauge-stars{ color: #f59e0b !important; margin-top: 6px !important; }
.rv-gauge-lbl{ color: var(--color-text-subtle) !important; margin-top: 5px !important; }
.rv-mini-label{ color: var(--color-text-subtle) !important; }
.rv-hist-star{ color: var(--color-text-muted) !important; }
.rv-hist-track{ background: var(--color-surface-2, #f1f2f5) !important; }
.rv-hist-n{ color: var(--color-text-secondary) !important; }
.rv-trend{ margin-top: 14px !important; padding-top: 12px !important; border-top-color: var(--hairline) !important; }
.rv-spark{ height: 38px !important; }
.rv-spark-line{ stroke: #4f9cf0 !important; }
.rv-delta.up{ color: #047857 !important; background: #e7f6ef !important; }
.rv-delta.down{ color: #be123c !important; background: #fdecef !important; }
.rv-trend-note{ color: var(--color-text-muted) !important; }
@media (max-width: 1180px){
  .rv-hero-dist{ border-top-color: var(--hairline) !important; }
}

/* --- Plantillas: cifras --- */
.tp-stat{ border-left-color: var(--hairline) !important; padding: 0 20px !important; }
.tp-stat-num, .tp-hero-stats .tp-stat-num{ color: #b45309 !important; font-size: clamp(1.3rem, 2vw, 1.7rem) !important; }
.tp-stat-lbl{ color: var(--color-text-muted) !important; }

/* --- Caja: semana, balanza, saldo y línea del día --- */
.caja-desk-top{ margin-bottom: 14px !important; }
.caja-desk .ops-day{
  background: var(--color-surface) !important; border-color: var(--hairline) !important;
  color: var(--color-text-secondary) !important; padding: 8px 6px 7px !important;
}
.caja-desk .ops-day:hover{ background: #fbf7ef !important; border-color: color-mix(in srgb, #d97706 30%, var(--hairline)) !important; }
.caja-desk .ops-day.on{
  background: color-mix(in srgb, #d97706 10%, #fff) !important;
  border-color: color-mix(in srgb, #d97706 45%, transparent) !important;
  color: #92400e !important; box-shadow: none !important;
}
.caja-desk .ops-day-bar{ height: 12px !important; }
.caja-desk .ops-day-bar i{ background: #d97706 !important; opacity: .45 !important; }
.caja-scale{ margin-top: 16px !important; gap: 22px !important; }
.caja-scale-lbl{ color: var(--color-text-muted) !important; }
.caja-scale-val{ font-family: var(--font-body) !important; font-weight: 700; letter-spacing: -.02em; }
.caja-scale-side.in .caja-scale-val{ color: #047857 !important; }
.caja-scale-side.out .caja-scale-val{ color: #be123c !important; }
.caja-scale-track{ background: var(--color-surface-2, #f1f2f5) !important; height: 7px !important; }
.caja-scale-side.in .caja-scale-track i{ background: linear-gradient(90deg, #a7e3c8, #10b981) !important; }
.caja-scale-side.out .caja-scale-track i{ background: linear-gradient(270deg, #fbc4cf, #f43f5e) !important; }
.caja-desk .ops-dial.light .ops-dial-tick{ color: #d97706 !important; }
.caja-desk .ops-dial.light .ops-dial-tick:not(.on){ opacity: .18 !important; color: var(--color-text-subtle) !important; }
.caja-scale-net{ color: var(--color-primary) !important; font-family: var(--font-body) !important; font-weight: 700; }
.caja-scale-net.neg{ color: #be123c !important; }
.caja-scale-net-lbl{ color: var(--color-text-subtle) !important; }
.caja-timeline{ margin-top: 16px !important; padding-top: 14px !important; border-top-color: var(--hairline) !important; }
.caja-timeline .ops-mini-label{ color: var(--color-text-subtle) !important; }
.caja-desk .tl-rail{ background: var(--color-surface-2, #f4f5f7) !important; height: 36px !important; }
.caja-desk .tl-hour{ color: var(--color-text-subtle) !important; }
.caja-desk .tl-hour::before{ background: var(--hairline) !important; height: 36px !important; }
.caja-desk .tl-mark.in{ background: #10b981 !important; box-shadow: 0 0 0 3px rgba(16,185,129,.16) !important; }
.caja-desk .tl-mark.out{ background: #f43f5e !important; box-shadow: 0 0 0 3px rgba(244,63,94,.16) !important; }
.caja-desk .tl-mark:hover{ box-shadow: 0 0 0 6px rgba(14,33,72,.08) !important; }

/* --- Cuentas: bóveda --- */
.vault-in{ gap: 32px !important; }
.vault-total{ font-family: var(--font-body) !important; font-weight: 700 !important; font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important; color: var(--color-primary); margin-top: 8px !important; }
.vault-flow{ margin-top: 16px !important; }
.vault-flow-lbl{ color: var(--color-text-muted) !important; }
.vault-flow-track{ background: var(--color-surface-2, #f1f2f5) !important; }
.vault-flow-row.in .vault-flow-track i{ background: linear-gradient(90deg, #a7e3c8, #10b981) !important; }
.vault-flow-row.out .vault-flow-track i{ background: linear-gradient(90deg, #fbc4cf, #f43f5e) !important; }
.vault-flow-row.in .vault-flow-val{ color: #047857 !important; }
.vault-flow-row.out .vault-flow-val{ color: #be123c !important; }
.vault-pulse .ops-mini-label, .vault-pulse-foot{ color: var(--color-text-subtle) !important; }
.vault .ops-bars.on-dark .ops-bar-tick{ fill: #10b981 !important; }
.vault .ops-bars.on-dark .ops-bar-tick.neg{ fill: #f43f5e !important; }

/* Tarjetas de cuenta: el "chip" de la tarjeta se pisaba con la etiqueta del tipo */
.bank-card-chip{ left: auto !important; right: 20px; top: 50px !important; }

/* --- Academia --- */
.ac-hero-in{ max-width: 760px; }
.ac-hero-in .ac-searchbar{ background: var(--color-surface) !important; border-color: var(--hairline) !important; margin-top: 14px; }
.ac-hero-in .ac-searchbar:focus-within{ border-color: color-mix(in srgb, var(--c-violet) 55%, var(--hairline)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-violet) 12%, transparent) !important; }
.ac-hero-in .ac-searchbar .ico{ color: var(--color-text-subtle) !important; }
.ac-hero-in .ac-searchbar input{ color: var(--color-primary) !important; }
.ac-hero-in .ac-searchbar input::placeholder{ color: var(--color-text-subtle) !important; }
.ac-hero-in .ac-searchbar-x{ background: var(--hairline) !important; color: var(--color-text-muted) !important; }
.ac-hero-stats{ margin: 16px 0 8px !important; gap: 22px !important; }
.ac-hero-stats span{ color: var(--color-text-muted) !important; }
.ac-hero-stats b{ color: var(--color-primary) !important; font-family: var(--font-body) !important; font-weight: 700; font-size: 18px !important; }
.ac-hero-bar{ background: var(--color-surface-2, #eef0f4) !important; }
.ac-hero-acts{ margin-top: 14px !important; }

/* ---------- 8. Celular ---------- */
@media (max-width: 760px){
  .cx-board, .st-hero, .rv-hero, .tp-hero, .ct-hero, .fl-hero, .caja-desk, .vault, .ac-hero{ padding: 18px 18px !important; }
  .ops-bar-in{ padding: 16px 18px !important; }
  .an-head-motif{ width: 64px; }
  .ct-phone{ width: 160px; }
  .ct-phone-media{ height: 84px; }
  .rv-hero-gauge{ width: 132px !important; height: 132px !important; }
  .rv-hero-gauge .ar-ring{ width: 132px !important; height: 132px !important; }
  .rv-gauge-num{ font-size: 2rem !important; }
}