/* ============================================================
   RUOT · Rediseño visual del PANEL FUNDADOR — capa de piel
   07-nov-2026 · Diseñador Gráfico (validado por Ale ese día)
   ------------------------------------------------------------
   REGLA DE LA CASA: solo piel. No cambia HTML ni JS. No cambia
   estructura, flujos ni contenido. Solo se apoya en las clases
   que fundador.js ya pinta y en los tokens de css/tokens.css.
   Reversible: quitar este <link> devuelve el aspecto anterior.
   Paleta v2: petróleo (estructura) · teal (profundidad) ·
   ámbar (EL momento, uno solo) · neutros. 70/20/8/2.
   ============================================================ */

/* ---------- 1 · Cabecera de pantalla con identidad ----------
   El h1 de cada pantalla del fundador pasa de texto suelto a
   banda de marca: degradado entre FRÍOS (petróleo→teal, regla
   §3.3.5 de identidad-visual) + patrón de puntos muy sutil. */
.fundador .titulo-pantalla {
  position: relative;
  overflow: hidden;
  margin: 0 0 var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radio-l);
  background: linear-gradient(120deg, var(--c-petroleo) 0%, var(--c-teal-aa) 100%);
  /* teal-aa (#007486) y no teal (#018790): blanco encima = 5,47:1 (AA), medido. */
  color: var(--c-blanco);
  box-shadow: var(--sombra-media);
}
.fundador .titulo-pantalla::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(rgba(255, 255, 255, .10) 1.3px, transparent 1.4px) 0 0 / 22px 22px;
  pointer-events: none;
}
/* Debajo de la banda: la miga y el claim respiran como subtítulo. */
.fundador .miga { margin-bottom: var(--sp-3); }
.fundador .claim {
  color: var(--texto-suave);
  margin: 0 0 var(--sp-5);
  max-width: 68ch;
}

/* ---------- 2 · Contadores = tarjetas KPI con jerarquía ----------
   Antes: tarjetas planas. Ahora: label pequeño arriba, cifra
   protagonista (peso 800, tabular), contexto debajo. */
.fundador .f-hoy-contadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: var(--sp-4);
}
.fundador .tarjeta.f-hoy-contador {
  position: relative;
  padding: var(--sp-5);
  gap: var(--sp-2);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-m);
  background: var(--superficie);
  box-shadow: var(--sombra-suave);
  transition: box-shadow var(--trans), transform var(--trans);
}
.fundador .tarjeta.f-hoy-contador:hover {
  box-shadow: var(--sombra-media);
  transform: translateY(-1px);
}
.fundador .f-hoy-cifra {
  font-size: clamp(2.25rem, 4.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--ls-titulo);
  font-variant-numeric: tabular-nums;
}
.fundador .f-hoy-contador .f-hoy-titulo {
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: var(--lh-apretado);
}

/* EL MOMENTO CÁLIDO: solo el primer contador (lo que requiere
   acción) lleva el ámbar. Uno solo por pantalla, como manda la
   regla anti-arcoíris. Texto petróleo encima: AA 4,98:1. */
.fundador .f-hoy-contadores > :first-child {
  border-color: transparent;
  background: var(--c-ambar); /* ámbar SÓLIDO: petróleo encima = 4,98:1 (AA), medido.
     Sin degradado a melocotón: petróleo sobre #FFA259 = 4,33:1 y fallaría en texto normal. */
  color: var(--c-petroleo);
}
.fundador .f-hoy-contadores > :first-child .f-hoy-cifra,
.fundador .f-hoy-contadores > :first-child .f-hoy-titulo,
.fundador .f-hoy-contadores > :first-child .texto-suave {
  color: var(--c-petroleo);
}

/* ---------- 3 · Ventana de tiempo (24 h / 48 h) ---------- */
.fundador .f-hoy-ventana {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.fundador .f-hoy-ventana-rotulo {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--texto-suave);
}

/* ---------- 4 · Bloques de contenido (Salidas / Reservas / Pagos) ----------
   Más aire y una cabecera de bloque más clara; las filas se
   separan solas con hairline, sin cajas dentro de cajas. */
.fundador .tarjeta.f-hoy-bloque {
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-m);
  background: var(--superficie);
  box-shadow: var(--sombra-suave);
  padding: var(--sp-5);
}
.fundador .f-hoy-bloque .f-hoy-titulo {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: var(--ls-titulo);
  line-height: var(--lh-titulo);
  margin: 0 0 var(--sp-4);
}
.fundador .f-hoy-filas li {
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--separador);
}
.fundador .f-hoy-filas li:first-child { border-top: 0; padding-top: 0; }
.fundador .f-hoy-fila-titulo {
  font-size: var(--fs-base);
  font-weight: 700;
}
.fundador .f-hoy-estado { margin: var(--sp-1) 0 0; }

/* ---------- 5 · Botones de acción de los contadores ---------- */
.fundador .f-hoy-contador .btn,
.fundador .f-hoy-contador a[class*="btn"] {
  align-self: flex-start;
}

/* ---------- 6 · Modo oscuro: la banda ya es oscura por sí misma;
   el ámbar sigue siendo el único cálido. Solo se ajusta el
   texto suave sobre la tarjeta destacada para que no pierda
   contraste (petróleo sobre ámbar = AA). ---------- */
:root[data-tema="oscuro"] .fundador .titulo-pantalla {
  background: linear-gradient(120deg, var(--c-petroleo) 0%, var(--teal-aa) 100%);
}

/* ---------- 7 · Responsive: a 390 px la banda y las KPI se
   apilan sin romper; a partir de 880 la rejilla respira. ---------- */
@media (max-width: 640px) {
  .fundador .titulo-pantalla {
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radio-m);
    font-size: var(--fs-h2);
  }
  .fundador .tarjeta.f-hoy-contador,
  .fundador .tarjeta.f-hoy-bloque { padding: var(--sp-4); }
  .fundador .f-hoy-cifra { font-size: 2rem; }
}

/* ---------- 8 · Respeto al usuario (P16) ---------- */
@media (prefers-reduced-motion: reduce) {
  .fundador .tarjeta.f-hoy-contador { transition: none; }
  .fundador .tarjeta.f-hoy-contador:hover { transform: none; }
}
:root[data-reducir-movimiento="true"] .fundador .tarjeta.f-hoy-contador {
  transition: none;
}
:root[data-reducir-movimiento="true"] .fundador .tarjeta.f-hoy-contador:hover {
  transform: none;
}