/* ═══════════════════════════════════════════════════════════════
   PISIE — Design System núcleo
   Fuente única de verdad para variables visuales y componentes base
   de toda la suite (excepto PISIEF, ver nota abajo).
   PISIEF (monolito congelado) NO importa este archivo — su CSS vive
   embebido en index.html y no se toca; ESTE archivo PORTA sus valores
   reales (tipografía, tamaños, tarjetas) para que PISIEP y programas
   futuros se vean como el mismo producto, sin duplicar esos valores
   por módulo. ago-2026: extendido con los componentes reales
   (label/input, .pisie-card, .pisie-h2, grids) — antes solo tenía
   tokens de color y un badge, cada módulo de PISIEP inventaba su
   propia tipografía/tamaños desde cero (causa real de que PISIEP se
   sintiera "otro producto" frente a PISIEF).
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;600;700;900&family=Barlow+Condensed:wght@400;600;700;800;900&display=swap');

:root {
  /* Base neutra de marca PISIE (idéntica en espíritu a PISIEF: fondo
     oscuro, tarjetas, bordes sutiles — solo los nombres de variable
     cambian de --bg/--card/--border a --pisie-*) */
  --pisie-bg-dark: #0B0F17;
  --pisie-bg-card: #111827;
  --pisie-bg-card2: #17202E;   /* fondo de inputs/encabezados de página, equivalente a --card2 de PISIEF */
  --pisie-border: #1F2937;
  --pisie-border2: #2A3648;    /* equivalente a --border2 de PISIEF */
  --pisie-text-main: #F3F4F6;
  --pisie-text-muted: #9CA3AF;
  --pisie-shadow: rgba(0,0,0,.45);

  /* Acentos por programa — cada programa hijo define/hereda el suyo */
  --acento-pisief: #00e676;   /* verde cian, heredado del monolito existente */
  --acento-pisiep: #F97316;   /* naranja, del draft aprobado */
  --acento-pisied: #9CA3AF;   /* gris neutro — próximamente */
  --acento-pisiet: #9CA3AF;   /* gris neutro — próximamente */
  --acento-pisiepr: #EC4899;  /* rosa — color de marca definido ago-2026, aún sin landing propio */

  --radius-card: 16px;
  --pisie-radius-sm: 8px;   /* equivalente a --radius-sm de PISIEF (botones, inputs) */
  --pisie-radius-md: 14px;  /* equivalente a --radius-md de PISIEF (tarjetas) */

  /* Tipografía real de PISIEF — Exo 2 para texto/campos, Barlow Condensed
     para títulos de página/sección. Antes PISIEP usaba 'Inter' (definida
     en pisiep-theme.css) — cambiado a pedido explícito de Jorge: "Solo
     respetando el color base de PISIEP", el resto (tipología incluida)
     debe verse igual que PISIEF. */
  --font-suite: 'Exo 2', sans-serif;
  --font-suite-title: 'Barlow Condensed', 'Exo 2', sans-serif;
}

* { box-sizing: border-box; }

/* ── Campos de formulario — MISMOS valores reales que PISIEF ──
   (index.html: label{font-size:12px;...}, input,select,textarea{...})
   Al estar en el tag base (no una clase), cualquier módulo que use
   <label>/<input>/<select>/<textarea> normal hereda esto automático,
   sin tener que reescribir su propio HTML/CSS. font-size:16px en los
   campos es DELIBERADO (no un descuido): por debajo de eso, iOS Safari
   hace zoom automático de toda la pantalla al enfocar el campo — bug
   real que PISIEF ya tuvo que corregir en todos sus módulos. */
label {
  font-size: 12px;
  color: var(--acento, var(--acento-pisiep));
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  margin-bottom: 5px;
  letter-spacing: 1.2px;
  font-family: var(--font-suite);
}
input, select, textarea {
  background: var(--pisie-bg-card2);
  border: 1.5px solid var(--pisie-border2);
  color: var(--pisie-text-main);
  padding: 11px 14px;
  border-radius: var(--pisie-radius-sm);
  width: 100%;
  margin-bottom: 12px;
  box-sizing: border-box;
  font-family: var(--font-suite);
  font-size: 16px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--acento, var(--acento-pisiep));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento, var(--acento-pisiep)) 20%, transparent);
}
input[readonly], input:disabled, select:disabled, textarea:disabled {
  cursor: not-allowed;
  opacity: .75;
}

/* ── Encabezado de página, tarjeta de sección — MISMOS valores que
   .pagina h2 / .card / .seccion-title de PISIEF ── */
.pisie-h2 {
  font-family: var(--font-suite-title);
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pisie-text-main);
  margin: 0 0 18px;
  padding: 11px 16px;
  border-radius: var(--pisie-radius-sm);
  background: var(--pisie-bg-card2);
  border-left: 4px solid var(--acento, var(--acento-pisiep));
  display: flex;
  align-items: center;
  gap: 10px;
}
.pisie-card {
  background: var(--pisie-bg-card);
  padding: 18px;
  border-radius: var(--pisie-radius-md);
  border: 1px solid var(--pisie-border);
  margin-bottom: 16px;
  box-shadow: 0 4px 24px var(--pisie-shadow);
}
.pisie-seccion-title {
  font-family: var(--font-suite-title);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--acento, var(--acento-pisiep));
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--pisie-border2);
}

/* ── Grids de 2 y 3 columnas — MISMO patrón que .card-grid-2/.form-grid-3
   de PISIEF (minmax(0,1fr) evita que un campo largo robe espacio a los
   demás — bug real ya corregido varias veces en PISIEF). Colapsan a 1
   columna en móvil, igual que el monolito. ── */
.pisie-grid-2 { display: block; }
.pisie-form-grid-2 { display: block; }
.pisie-form-grid-3 { display: block; }
@media (min-width: 900px) {
  .pisie-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
}
@media (min-width: 480px) {
  .pisie-form-grid-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
}
@media (min-width: 640px) {
  .pisie-form-grid-3 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: 10px; }
}

/* ── Botones — MISMO patrón que .btn/.btn-g de PISIEF (mayúsculas,
   letter-spacing, ancho completo por defecto) ── */
.pisie-btn {
  padding: 12px 18px;
  border: none;
  border-radius: var(--pisie-radius-sm);
  cursor: pointer;
  font-weight: 700;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-suite);
  font-size: 12px;
  letter-spacing: .8px;
  text-transform: uppercase;
  transition: transform .15s, opacity .15s, box-shadow .2s;
}
.pisie-btn:active { transform: scale(.97); }
.pisie-btn-primary {
  background: linear-gradient(135deg, var(--acento, var(--acento-pisiep)), var(--acento, var(--acento-pisiep)));
  color: #1a0f00;
}
.pisie-btn-outline {
  background: transparent;
  border: 1.5px solid var(--acento, var(--acento-pisiep));
  color: var(--acento, var(--acento-pisiep));
}

/* Utilidades mínimas compartidas — ampliar aquí, no duplicar en cada programa */
.pisie-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}