/* 🎨 bootstrap5-tema.css — Único CSS de tema sobre Bootstrap 5.3.8.
 * Requiere bootstrap5Css cargado ANTES (capability bootstrap5Tema, ver assets-registro.php) — este
 * archivo reasigna las CSS custom properties que Bootstrap 5.3 ya declara en :root, y afina selectores
 * de componentes NATIVOS de Bootstrap (.card, .nav-tabs, .table...) — nunca inventa clases ni variables
 * propias con prefijo (`--ic-*`, etc.), nunca toca Sass ($spacer, $border-radius...) porque usamos el
 * CSS ya compilado.
 *
 * SPRINT "IdeoCore UI Foundation" (ago 2026) — Foundation técnica (colores, tipografía base, radios,
 * sombras). Valores tomados de la auditoría visual real de IdeoCore (ver design-tokens.css, ahora
 * legacy/no consumido — este archivo es su reemplazo alineado 100% con Bootstrap).
 *
 * SPRINT V2 "IdeoCore Visual Refinement — Less UI, more product" (ago 2026) — refinamiento de
 * composición: menos cajas, menos bordes, menos azul decorativo, más espacio, jerarquía tipográfica más
 * marcada. Ver comentarios en la sección "REFINAMIENTO V2" más abajo para el detalle de cada decisión.
 *
 * SPRINT V3 "IdeoCore Surface & Interaction Refinement" (ago 2026) — introduce el concepto Surface
 * (`.ideo-surface`, background gris muy sutil de página + superficies blancas que agrupan contenido
 * funcional — NUNCA otra Card genérica), paleta semántica menos saturada (success/warning/danger/info
 * derivados con las variables -subtle/-text-emphasis nativas de Bootstrap), y rehace visualmente
 * tabs/pagination/loading para que dejen de sentirse "Bootstrap default". Ver sección "REFINAMIENTO V3"
 * más abajo.
 *
 * SPRINT V3.1 "Semantic Color Refinement" (ago 2026) — corrección puntual: V3 bajó demasiado la
 * saturación de success/warning/danger/info. Se suben a una paleta "vibrant but refined" (ver los
 * cuatro `--bs-*` en el bloque de abajo) — Primary intacto. Composición/Surface/Navigation/Loading sin
 * cambios, este sprint es exclusivamente color.
 */

:root {
    /* 🔤 Tipografía — Inter Variable primero (self-hosted, ver fuente-inter.css). body ya usa
       var(--bs-body-font-family) en el CSS compilado de Bootstrap, así que overridear esta variable
       alcanza para toda la página. */
    --bs-font-sans-serif: 'Inter Variable', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);

    /* 🎨 Color primario aprobado — recolorea .btn-primary, .text-primary, .bg-primary, .border-primary,
       links, focus rings, etc. porque Bootstrap 5.3 ya consume --bs-primary/--bs-primary-rgb en esos
       componentes. Variantes derivadas: -subtle (fondo) y -border-subtle para badges/alerts suaves. */
    --bs-primary: #2f6fed;
    --bs-primary-rgb: 47, 111, 237;
    --bs-primary-text-emphasis: #1d4ed8;
    --bs-primary-bg-subtle: #eaf1fe;
    --bs-primary-border-subtle: #bcd3fb;
    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: #2558c4;
    --bs-link-hover-color-rgb: 37, 88, 196;

    /* 🖋️ Texto / superficie / borde — escala de grises auditada en Videos (el módulo más consistente).
       V3: --bs-body-bg baja un poco más de gris (#f7f8fa) — el fondo de PÁGINA. `.ideo-surface` (ver
       más abajo) usa blanco puro directo, no una variable — es justamente el contraste entre este
       gris muy sutil y el blanco de la Surface lo que le da sentido al concepto. --bs-tertiary-bg se
       mantiene como el gris casi imperceptible para hovers (pagination, dropdown-item), nunca blanco. */
    --bs-body-color: #344054;
    --bs-body-bg: #f7f8fa;
    --bs-secondary-color: #667085;
    --bs-tertiary-color: #98a2b3;
    --bs-border-color: #e4e7ec;
    --bs-secondary-bg: #f2f4f7;
    --bs-tertiary-bg: #eef0f3;

    /* 🎨 Semánticos — SPRINT V3.1 "Semantic Color Refinement" (ago 2026): V3 los dejó demasiado
       apagados; acá suben de intensidad ("vibrant but refined", NO Bootstrap default, NO pastel). El
       color intenso vive en `-text-emphasis` (texto/ícono/badge) — foreground literal, igual al valor
       aprobado — nunca como fondo grande; `-bg-subtle`/`-border-subtle` se mantienen pálidos, ese
       contraste es justamente lo que hace que el foreground se sienta vivo sin ser un bloque saturado.
       `secondary` alineado al mismo gris que ya usa el resto de la Foundation. Primary SIN CAMBIOS.

       SPRINT V3.2 "Semantic Color Final Polish" (ago 2026) — ajuste puntual de los 3 foreground
       (success/warning/danger; info ya coincidía con el valor aprobado) para que se sientan más vivos y
       contemporáneos. Backgrounds/borders `-subtle` SIN CAMBIOS respecto a V3.1 — a propósito, la
       instrucción fue ajustar solo el foreground.

       Ajuste posterior (mismo criterio: solo foreground, -bg-subtle/-border-subtle intactos) —
       success/warning/danger/info a #06a070/#e4a61f/#f33f48/#148bea. Nota: info quedó bastante cerca en
       tono de --bs-primary (#2f6fed) — ambos son azules saturados; si en el Playground se ven
       compitiendo entre sí, avisar para ajustar solo `info` sin tocar el resto. */
    --bs-secondary: #667085;
    --bs-secondary-rgb: 102, 112, 133;

    --bs-success: #06a070;
    --bs-success-rgb: 6, 160, 112;
    --bs-success-text-emphasis: #06a070;
    --bs-success-bg-subtle: #e6f6ef;
    --bs-success-border-subtle: #bfe6d5;

    --bs-warning: #e4a61f;
    --bs-warning-rgb: 228, 166, 31;
    --bs-warning-text-emphasis: #e4a61f;
    --bs-warning-bg-subtle: #fdf1de;
    --bs-warning-border-subtle: #f3d9a3;

    --bs-danger: #f33f48;
    --bs-danger-rgb: 243, 63, 72;
    --bs-danger-text-emphasis: #f33f48;
    --bs-danger-bg-subtle: #fbe9e9;
    --bs-danger-border-subtle: #f2c4c4;

    --bs-info: #148bea;
    --bs-info-rgb: 20, 139, 234;
    --bs-info-text-emphasis: #148bea;
    --bs-info-bg-subtle: #e8f4f6;
    --bs-info-border-subtle: #bfe0e6;

    /* 📐 Radios — V2: controls 8–10px, cards 12px, modal 16px, pill (sin cambios). --bs-border-radius
       es el que consumen botones/inputs/selects por defecto en Bootstrap 5.3. */
    --bs-border-radius-sm: .375rem;   /* 6px — elementos chicos (badge, elementos densos) */
    --bs-border-radius: .5625rem;     /* 9px — controls: botones, inputs, selects */
    --bs-border-radius-lg: .75rem;    /* 12px — cards */
    --bs-border-radius-xl: 1rem;      /* 16px — modal */
    --bs-border-radius-pill: 50rem;

    /* 🌑 Sombras — V2: prácticamente ausentes por defecto. Solo lo que realmente flota (modal,
       dropdown, popover) las usa — ver overrides puntuales más abajo. */
    --bs-box-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --bs-box-shadow: 0 4px 12px rgba(16, 24, 40, .10);
}

/* ============================================================================================
 * REFINAMIENTO V2 — "Less UI, more product"
 * Principio: el espacio separa, el borde delimita solo cuando hace falta. Bordes y sombras se
 * apagan por defecto en toda la superficie; se reintroducen puntualmente donde SÍ cumplen una
 * función (inputs, tabla, cards que representan una entidad, elementos flotantes).
 * ============================================================================================ */

/* 🃏 Card — por defecto sin borde y sin sombra (una Card ya se distingue por su propio padding/fondo,
   no necesita remarcarse con una línea). El radio pasa a 12px. Cuando una Card representa una entidad
   real (Video, Obra...) y necesita distinguirse de un fondo del mismo color, agregar `.card--realce`
   (borde sutil de 1px) en el markup en vez de tocar este archivo de nuevo. */
.card {
    border: 0;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: none;
}
.card--realce {
    border: 1px solid var(--bs-border-color);
}

/* 🪟 Modal — el único lugar (junto a dropdown) donde SÍ corresponde una sombra real, porque
   literalmente flota sobre el contenido. Radio 16px. */
.modal-content {
    border: 0;
    border-radius: var(--bs-border-radius-xl);
    box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
}
.modal-header,
.modal-footer {
    border-color: var(--bs-border-color);
}

/* 🍔 Dropdown — flotante, sombra sutil pero perceptible; nunca incrustado como si fuera parte del
   layout de la página. */
.dropdown-menu {
    border: 0;
    border-radius: .75rem; /* 10–12px */
    box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
    padding: .375rem;
}
.dropdown-item {
    border-radius: var(--bs-border-radius-sm);
    padding: .5rem .75rem;
}

/* 🔤 Jerarquía tipográfica — Inter como protagonista de la jerarquía, no el peso/color. Headings con
   letter-spacing levemente negativo (look editorial, no "bold genérico"). Escala aproximada:
   page title 30px/600, section title 21px/600, body 16px/400, secondary 14px, metadata 13px. */
h1, .h1 { font-size: 1.875rem; font-weight: 600; letter-spacing: -.02em; }
h2, .h2 { font-size: 1.3125rem; font-weight: 600; letter-spacing: -.02em; }
h3, .h3 { font-size: 1.125rem; font-weight: 600; }
h4, .h4 { font-size: 1rem; font-weight: 600; }
h5, .h5 { font-size: .9375rem; font-weight: 600; }
h6, .h6 { font-size: .875rem; font-weight: 600; }
/* Metadata (13px) — mismo rol que ya usaba .text-body-tertiary.small en el Playground V1. */
.text-body-tertiary.small,
small.text-body-tertiary {
    font-size: .8125rem;
}

/* 🎯 Azul = interacción, no decoración — el primary no debe aparecer en títulos/labels neutrales,
   solo en lo que el usuario puede accionar. Nada que overridear acá: es una convención de USO (ver
   plantillas del Playground), no una regla que se pueda forzar por CSS.

   Estados semánticos (badges) — contenidos, nunca bloques saturados. Bootstrap 5.3 ya resuelve
   `.badge.text-bg-*` con buen contraste; se deja tal cual, sin agrandar padding/tamaño. */
.badge {
    font-weight: 600;
    letter-spacing: .01em;
}

/* 🔔 Alerts — V3: superficies semánticas suaves (fondo -subtle + texto -emphasis, sin borde marcado),
   nunca bloques de color sólido. Como los tokens -subtle/-text-emphasis ya se refinaron arriba (menos
   saturados), esto alcanza con las utilidades nativas `.alert-success`/`.alert-warning`/etc. */
.alert {
    --bs-alert-border-color: transparent;
    border-radius: var(--bs-border-radius);
}

/* ============================================================================================
 * REFINAMIENTO V3 — Surface & Interaction
 * ============================================================================================ */

/* 🧭 Tabs — V3: navegación de producto, no pestaña de carpeta Bootstrap. Sin bordes laterales, sin
   fondo, mucho espacio horizontal entre tabs, underline fino (2px) solo en la activa, transición suave
   de color. El foco visible usa el mismo primary pero como contorno, no como caja. */
.nav-tabs {
    border-bottom: 1px solid var(--bs-border-color);
    gap: 1.75rem;
}
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--bs-secondary-color);
    font-size: .9375rem;
    font-weight: 500;
    border-radius: 0;
    padding: .625rem .125rem;
    margin: 0;
    background: transparent;
    transition: color .15s ease, border-color .15s ease;
}
.nav-tabs .nav-link:hover {
    color: var(--bs-body-color);
    border-color: transparent;
}
.nav-tabs .nav-link.active {
    color: var(--bs-primary);
    border-color: transparent transparent var(--bs-primary);
    background: transparent;
}
.nav-tabs .nav-link:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* 🔢 Pagination — V3: "‹ Anterior  1 2 3  Siguiente ›", no una fila de casilleros. Sin fondo/borde por
   defecto; el número activo se distingue por fondo suave + color + peso, no por ser "un cuadrado más
   oscuro que los demás". */
.pagination {
    --bs-pagination-border-width: 0;
    --bs-pagination-bg: transparent;
    --bs-pagination-color: var(--bs-secondary-color);
    --bs-pagination-hover-bg: var(--bs-tertiary-bg);
    --bs-pagination-hover-color: var(--bs-body-color);
    --bs-pagination-active-bg: var(--bs-primary-bg-subtle);
    --bs-pagination-active-color: var(--bs-primary);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: var(--bs-tertiary-color);
    --bs-pagination-focus-bg: var(--bs-tertiary-bg);
    --bs-pagination-focus-box-shadow: none;
    gap: .125rem;
}
.pagination .page-link {
    border-radius: var(--bs-border-radius-sm);
    font-weight: 500;
    padding: .375rem .625rem;
}

/* 📊 Table — sin líneas verticales (Bootstrap ya no las trae por defecto salvo .table-bordered, esto
   solo lo deja explícito), encabezado en gris secundario y sin mayúsculas forzadas — "datos de
   producto", no un componente de framework. */
.table > thead > tr > th {
    color: var(--bs-secondary-color);
    font-weight: 600;
    font-size: .8125rem;
    text-transform: none;
    border-bottom-width: 1px;
}
.table > :not(caption) > * > * {
    border-color: var(--bs-border-color);
}

/* 🕊️ Empty state — nunca dentro de una Card pesada; solo espacio + ícono discreto + texto. */
.ideo-estado-vacio {
    padding: 4rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
}
.ideo-estado-vacio i {
    font-size: 1.75rem;
    opacity: .5;
    display: block;
    margin-bottom: .75rem;
}

/* 🧱 .ideo-surface — el concepto nuevo de V3. NO es una segunda Card: no representa una entidad, no
   tiene la semántica de "esto es un Video/una Obra" — solo AGRUPA contenido funcional (resultados de
   una búsqueda, un formulario, una tabla, un grupo de ejemplos) sobre el fondo gris de la página.
   Fondo blanco fijo (no una variable — es la superficie de referencia, siempre la más clara de la
   pantalla), borde apenas perceptible (necesario porque el fondo de página ya es casi blanco: sin
   borde, la Surface se perdería contra --bs-body-bg), radio de card (12px), CERO sombra — no "flota",
   se apoya. Padding generoso y consistente. */
.ideo-surface {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: none;
    padding: 1.75rem;
}
@media (max-width: 575.98px) {
    .ideo-surface {
        padding: 1.25rem;
    }
}

/* ⏳ .ideo-loading — Bootstrap no tiene un tratamiento "discreto" para loading (su spinner por defecto
   es grande y de trazo grueso). Spinner fino (border-width reducido), tamaño chico, color neutral
   (secondary, NUNCA primary) — el azul es para interacción, cargar no es una acción del usuario.
   Texto pequeño al lado, mismo gris que el spinner — conjunto silencioso, no un aviso. */
.ideo-loading {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--bs-secondary-color);
    font-size: .875rem;
}
.ideo-loading .spinner-border {
    width: .875rem;
    height: .875rem;
    border-width: .125em;
    color: var(--bs-tertiary-color);
}