/* ── resources/css/proyecto\01-tokens.css ── */
/* ──────────────────────────────────────────────────────────────────────
   01-tokens.css — Sistema de design tokens
   "Warm Editorial" — paleta única warm umber, jerarquía por VALOR no HUE.
   Una sola familia cromática, el naranja como único acento sharp.
   ────────────────────────────────────────────────────────────────────── */

:root {
    /* ── Fondos: jerarquía warm-umber por luminosidad ──
       Una sola familia. Cada zona se diferencia por DARKNESS, no por
       diferentes hues. Esto da identidad cohesiva en vez de patchwork. */

    --fondo:                #15110A;    /* canvas — umber profundo casi negro */
    --fondo-superficie:     #1F1813;    /* cards — surface elevada */
    --fondo-elevado:        #2B2218;    /* hover, paneles superiores */

    /* Zonas estructurales: contraste sutil por valor */
    --fondo-sidebar:        #0D0A06;    /* más oscuro que canvas — ancla a la izquierda */
    --fondo-header:         #1F1813;    /* leve elevación del canvas */

    /* Tintes funcionales (para acentos puntuales, no para fondos completos) */
    --fondo-acento:         rgba(242, 106, 34, 0.08);
    --fondo-tibio:          rgba(255, 200, 140, 0.04);

    /* ── Bordes: warm browns en armonía ── */
    --borde:                #3A2E22;
    --borde-sutil:          #261D14;
    --borde-foco:           #F26A22;
    --borde-error:          #C44434;

    /* ── Texto: warm creams ── */
    --texto:                #F5EBDB;    /* cream principal */
    --texto-secundario:     #B5A89A;    /* warm beige muted */
    --texto-tenue:          #7A6E60;    /* metadata, placeholders */
    --texto-deshabilitado:  #4A4137;
    --texto-sobre-acento:   #15110A;    /* texto sobre naranja brillante */

    /* ── Acento principal: naranja refinado del logo ──
       Ligeramente menos rojo que el original (FF6B35 → F26A22), más luminoso
       y editorial. La escala se mantiene para retro-compat. */
    --acento-50:            #FFF4ED;
    --acento-100:           #FFE6D5;
    --acento-200:           #FFC4A0;
    --acento-300:           #FFA070;
    --acento-400:           #FF8550;
    --acento-500:           #F26A22;    /* base — naranja editorial */
    --acento-600:           #D4561A;
    --acento-700:           #B04313;
    --acento-800:           #88330F;
    --acento-900:           #5A220A;
    --acento-950:           #2E1106;

    --acento:               var(--acento-500);
    --acento-hover:         var(--acento-400);
    --acento-activo:        var(--acento-600);

    /* ── Multi-color funcional — solo para badges/categorización, no fondos ── */
    --c-cyan:               #5EEAD4;
    --c-cyan-claro:         #67E8F9;
    --c-azul:               #3B82F6;
    --c-azul-profundo:      #1D4ED8;
    --c-magenta:            #EC4899;
    --c-rosa:               #F472B6;
    --c-rojo:               #C44434;
    --c-amarillo:           #E0B040;
    --c-naranja:            #FB923C;
    --c-verde:              #4ADE80;
    --c-violeta:            #A78BFA;

    /* ── Estados semánticos ── */
    --exito:                var(--c-verde);
    --exito-fondo:          rgba(74, 222, 128, 0.10);
    --error:                var(--c-rojo);
    --error-fondo:          rgba(196, 68, 52, 0.12);
    --advertencia:          var(--c-amarillo);
    --advertencia-fondo:    rgba(224, 176, 64, 0.12);
    --info:                 var(--c-cyan-claro);
    --info-fondo:           rgba(103, 232, 249, 0.10);

    /* ── Gradientes (uso muy puntual, solo en el CTA principal) ── */
    --gradiente-cta:        linear-gradient(135deg, #F58850 0%, #F26A22 50%, #D4561A 100%);
    --gradiente-progreso:   linear-gradient(90deg, #E0B040 0%, #F26A22 50%, #C44434 100%);

    /* ── Espaciado (base 4px, con sufijos editoriales) ── */
    --espacio-0:            0;
    --espacio-1:            4px;
    --espacio-2:            8px;
    --espacio-3:            12px;
    --espacio-4:            16px;
    --espacio-5:            24px;
    --espacio-6:            32px;
    --espacio-7:            48px;
    --espacio-8:            64px;
    --espacio-9:            96px;
    --espacio-10:           128px;

    /* ── Radios ── */
    --radio-sm:             4px;
    --radio-md:             8px;
    --radio-lg:             14px;
    --radio-xl:             20px;
    --radio-pill:           999px;

    /* ── Sombras (más suaves y deep, no tipo SaaS) ── */
    --sombra-sutil:         0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-media:         0 6px 24px rgba(0, 0, 0, 0.45);
    --sombra-elevada:       0 24px 48px -12px rgba(0, 0, 0, 0.6);
    --sombra-papel:         0 1px 0 rgba(255, 255, 255, 0.04) inset,
                            0 2px 8px rgba(0, 0, 0, 0.25);
    --sombra-glow-acento:   0 0 32px rgba(242, 106, 34, 0.28);

    /* ── Movimiento ── */
    --duracion-instantanea: 100ms;
    --duracion-rapida:      180ms;
    --duracion-media:       320ms;
    --duracion-lenta:       520ms;

    /* Easings característicos */
    --easing-estandar:      cubic-bezier(0.2, 0, 0.2, 1);
    --easing-suave:         cubic-bezier(0.4, 0, 0.2, 1);
    --easing-entrada:       cubic-bezier(0, 0, 0.2, 1);
    --easing-salida:        cubic-bezier(0.4, 0, 1, 1);
    --easing-resorte:       cubic-bezier(0.34, 1.56, 0.64, 1);  /* overshoot */
    --easing-dramatico:     cubic-bezier(0.7, 0, 0.3, 1);       /* fuerte aceleración/desaceleración */

    /* ── Tipografía: tamaños ── */
    --tamano-xs:            0.75rem;
    --tamano-sm:            0.875rem;
    --tamano-md:            1rem;
    --tamano-lg:            1.125rem;
    --tamano-xl:            1.25rem;
    --tamano-2xl:           1.5rem;
    --tamano-3xl:           2rem;
    --tamano-4xl:           2.75rem;
    --tamano-5xl:           3.5rem;
    --tamano-display:       4.5rem;

    /* ── Tipografía: pesos ── */
    --peso-regular:         400;
    --peso-medio:           500;
    --peso-semibold:        600;
    --peso-bold:            700;
    --peso-display:         700;

    /* ── Tipografía: line-height ── */
    --interlineado-ajustado: 1.1;
    --interlineado-normal:   1.55;
    --interlineado-relajado: 1.75;

    /* ── Tipografía: tracking ── */
    --tracking-tight:       -0.02em;
    --tracking-normal:      0;
    --tracking-wide:        0.04em;
    --tracking-mono-caps:   0.10em;

    /* ── Layout ── */
    --sidebar-ancho:            60px;
    --sidebar-ancho-expandido:  232px;
    --header-alto:              108px;
    --contenedor-max:           1440px;

    /* ── Grano de papel (SVG noise inline) ── */
    --textura-grano:        url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ── resources/css/proyecto\02-tipografia.css ── */
/* ──────────────────────────────────────────────────────────────────────
   02-tipografia.css — Sistema tipográfico "Warm Editorial"

   - Fraunces: serif variable. Display + títulos editoriales. Optical size,
     soft axis y eje de peso variables. Mood: editorial, refinado, expresivo
     en grandes tamaños.
   - Geist: sans contemporáneo de Vercel. Body, UI, copy. Variable.
   - Geist Mono: monospaced para metadatos, números, badges, IDs.

   Las tres están en Google Fonts. Single request con display=swap.
   ────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..900,0..100&family=Geist+Mono:wght@400;500;600&family=Geist:wght@300;400;500;600;700&display=swap');

:root {
    --fuente-sans:    "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fuente-mono:    "Geist Mono", "JetBrains Mono", "Courier New", monospace;
    --fuente-display: "Fraunces", Georgia, "Times New Roman", serif;
}

/* ── Reglas tipográficas base ── */

html {
    font-size: 16px;
    text-size-adjust: 100%;
}

body {
    font-family: var(--fuente-sans);
    font-size: var(--tamano-md);
    font-weight: var(--peso-regular);
    line-height: var(--interlineado-normal);
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "cv01", "cv02", "cv03", "cv11";  /* Geist stylistic alternates */
}

/* ── Headings: Fraunces con optical sizing y SOFT axis ──
   El SOFT axis (0–100) le da carácter más redondeado/suave en valores altos.
   Opsz alto = título grande, formas más dramáticas. */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-display);
    font-weight: 600;
    line-height: var(--interlineado-ajustado);
    color: var(--texto);
    margin: 0;
    font-variation-settings: "opsz" 96, "SOFT" 50;
    letter-spacing: var(--tracking-tight);
}

h1 {
    font-size: var(--tamano-5xl);
    font-variation-settings: "opsz" 144, "SOFT" 50;
    letter-spacing: -0.025em;
}

h2 {
    font-size: var(--tamano-4xl);
    font-variation-settings: "opsz" 96, "SOFT" 40;
    letter-spacing: -0.022em;
}

h3 {
    font-size: var(--tamano-2xl);
    font-variation-settings: "opsz" 36, "SOFT" 30;
    letter-spacing: -0.015em;
}

h4 {
    font-size: var(--tamano-xl);
    font-variation-settings: "opsz" 24, "SOFT" 20;
    letter-spacing: -0.01em;
}

h5 { font-size: var(--tamano-lg); font-variation-settings: "opsz" 18, "SOFT" 10; }
h6 { font-size: var(--tamano-md); font-weight: 600; font-variation-settings: "opsz" 14, "SOFT" 0; }

p {
    margin: 0;
    color: var(--texto-secundario);
    line-height: var(--interlineado-normal);
}

a {
    color: var(--acento);
    text-decoration: none;
    transition: color var(--duracion-rapida) var(--easing-estandar);
}

a:hover {
    color: var(--acento-300);
}

code, pre, .mono {
    font-family: var(--fuente-mono);
    font-feature-settings: "tnum" 1, "ss01" 1, "ss02" 1;
}

/* ── Editorial: para usar como class en momentos puntuales ── */

.editorial {
    font-family: var(--fuente-display);
}

.editorial-italic {
    font-family: var(--fuente-display);
    font-style: italic;
    font-variation-settings: "opsz" 96, "SOFT" 100;
}

/* Etiquetas mono small-caps — para badges, metadata, tabs */
.eyebrow {
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    color: var(--texto-tenue);
}

/* Numeral display — para los `#01` de las temáticas */
.numeral-display {
    font-family: var(--fuente-display);
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 400;
    line-height: 1;
    color: var(--acento);
    font-feature-settings: "lnum" 1, "ss01" 1;
}

/* ── Selección ── */

::selection {
    background: var(--acento);
    color: var(--texto-sobre-acento);
}

::-moz-selection {
    background: var(--acento);
    color: var(--texto-sobre-acento);
}

/* ── Cursor refinement on text ── */

input, textarea {
    caret-color: var(--acento);
}


/* ── resources/css/proyecto\03-layout.css ── */
/* ──────────────────────────────────────────────────────────────────────
   03-layout.css — Primitivas de layout + zonas del dashboard
   Warm Editorial: cada zona se distingue por VALOR (oscuridad), no por hue.
   Sidebar más oscuro que canvas; header levemente más claro.
   ────────────────────────────────────────────────────────────────────── */

/* ── Reset ── */

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html, body {
    height: 100%;
}

/* Le decimos al navegador que renderice form controls en dark mode */
:root {
    color-scheme: dark;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* ── Contenedores ── */

.contenedor {
    width: 100%;
    max-width: var(--contenedor-max);
    margin-inline: auto;
    padding-inline: var(--espacio-5);
}

.contenedor--angosto { max-width: 760px; }
.contenedor--medio   { max-width: 980px; }
.contenedor--ancho   { max-width: 1280px; }
.contenedor--full    { max-width: none; }

/* ── Apilar (vertical stack) ── */

.apilar > * + * { margin-top: var(--espacio-4); }
.apilar--1 > * + * { margin-top: var(--espacio-1); }
.apilar--2 > * + * { margin-top: var(--espacio-2); }
.apilar--3 > * + * { margin-top: var(--espacio-3); }
.apilar--5 > * + * { margin-top: var(--espacio-5); }
.apilar--6 > * + * { margin-top: var(--espacio-6); }
.apilar--7 > * + * { margin-top: var(--espacio-7); }
.apilar--8 > * + * { margin-top: var(--espacio-8); }

/* ── Fila (horizontal) ── */

.fila {
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
}

.fila--apretada { gap: var(--espacio-2); }
.fila--separada { gap: var(--espacio-6); }
.fila--arriba   { align-items: flex-start; }
.fila--abajo    { align-items: flex-end; }
.fila--wrap     { flex-wrap: wrap; }
.fila--entre    { justify-content: space-between; }
.fila--centro   { justify-content: center; }
.fila--derecha  { justify-content: flex-end; }
.fila--expandir > * { flex: 1; }

/* ── Grilla ── */

.grilla {
    display: grid;
    gap: var(--espacio-4);
}

.grilla--2 { grid-template-columns: repeat(2, 1fr); }
.grilla--3 { grid-template-columns: repeat(3, 1fr); }
.grilla--4 { grid-template-columns: repeat(4, 1fr); }
.grilla--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

@media (max-width: 960px) {
    .grilla--3, .grilla--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .grilla--2, .grilla--3, .grilla--4 { grid-template-columns: 1fr; }
}

/* ── Dashboard ──
   Layout principal: sidebar pegado a la izquierda, header y contenido
   en un mismo flujo de scroll (no sticky). El header se va con el scroll
   para liberar espacio vertical cuando se lee el contenido. */

/* El fondo (color + grano) lo aplica el body para que las capas
   ambient/shapes fixed se vean DETRÁS del dashboard. */
html, body {
    background-color: var(--fondo);
    background-image: var(--textura-grano);
    background-size: 220px 220px;
    background-blend-mode: soft-light;
    min-height: 100vh;
}

.dashboard {
    display: grid;
    grid-template-columns: var(--sidebar-ancho) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "sidebar header"
        "sidebar contenido";
    min-height: 100vh;
    background: transparent;
    position: relative;
}

.dashboard__sidebar {
    grid-area: sidebar;
    overflow: visible;
    position: sticky;
    top: 0;
    height: 100vh;
    width: var(--sidebar-ancho);
    z-index: 100;
}

/* Header — tratamiento editorial XL con ornamento, NO sticky.
   Capas de fondo: gradiente warm radial + dot pattern animado +
   líneas diagonales decorativas + grano. Hairline acento abajo. */
.dashboard__header {
    grid-area: header;
    background:
        /* Spotlight superior-izquierda (warm) */
        radial-gradient(ellipse 70% 90% at 18% 10%,
            rgba(242, 106, 34, 0.14) 0%,
            rgba(242, 106, 34, 0.06) 35%,
            transparent 70%),
        /* Glow lateral derecho (cool — violeta sutil) */
        radial-gradient(ellipse 50% 100% at 95% 100%,
            rgba(167, 139, 250, 0.08) 0%,
            transparent 60%),
        /* Base gradient vertical */
        linear-gradient(180deg, var(--fondo-header) 0%, var(--fondo) 100%);
    border-bottom: 1px solid var(--borde-sutil);
    display: flex;
    align-items: center;
    min-height: 280px;
    padding: var(--espacio-8) var(--espacio-8);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Dot pattern flotando suavemente (capa decorativa) */
.dashboard__header::before {
    content: '';
    position: absolute;
    inset: -20px;
    background-image:
        radial-gradient(circle, rgba(242, 106, 34, 0.18) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1.5px);
    background-size: 36px 36px, 72px 72px;
    background-position: 0 0, 18px 18px;
    opacity: 0.55;
    mix-blend-mode: screen;
    pointer-events: none;
    animation: header-dots-drift 40s linear infinite;
    mask-image: linear-gradient(135deg, transparent 0%, black 30%, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(135deg, transparent 0%, black 30%, black 70%, transparent 100%);
}

@keyframes header-dots-drift {
    from { background-position: 0 0, 18px 18px; }
    to   { background-position: 72px 72px, 90px 90px; }
}

/* Líneas diagonales decorativas + hairline acento bajo el header */
.dashboard__header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    background:
        /* Línea diagonal 1 */
        linear-gradient(115deg,
            transparent 0%, transparent 22%,
            rgba(242, 106, 34, 0.18) 22.05%, rgba(242, 106, 34, 0.18) 22.15%,
            transparent 22.2%, transparent 100%),
        /* Línea diagonal 2 (más sutil, opuesta) */
        linear-gradient(-95deg,
            transparent 0%, transparent 65%,
            rgba(94, 234, 212, 0.10) 65.04%, rgba(94, 234, 212, 0.10) 65.10%,
            transparent 65.14%, transparent 100%);
    /* Hairline acento abajo */
    box-shadow: inset 0 -1px 0 transparent;
}

/* Hairline acento real abajo del header (border bottom con gradient) */
.dashboard__header {
    border-bottom: none;
    box-shadow:
        inset 0 -1px 0 rgba(242, 106, 34, 0.30),
        0 8px 24px -8px rgba(242, 106, 34, 0.10);
}

.dashboard__header > * { width: 100%; position: relative; z-index: 1; }

.dashboard__contenido {
    grid-area: contenido;
    padding: var(--espacio-7) var(--espacio-8);
    max-width: 100%;
    scroll-behavior: smooth;
}

/* La entrada arranca recién cuando el preloader se va. */
body.cargado .dashboard__contenido {
    animation: dashboard-contenido-enter 700ms var(--easing-suave) 250ms backwards;
}

@keyframes dashboard-contenido-enter {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
    .dashboard__header { min-height: 180px; padding: var(--espacio-6) var(--espacio-5); }
    .dashboard__contenido { padding: var(--espacio-5); }
}

/* ── Layout auth (centrado) ── */

.auth-layout {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--espacio-5);
    background: var(--fondo);
    position: relative;
}

.auth-layout::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: var(--textura-grano);
    opacity: 0.04;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.auth-layout__contenedor {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-6);
    position: relative;
    z-index: 2;
}

.auth-layout__logo {
    width: 88px;
    height: 88px;
    border-radius: var(--radio-xl);
    box-shadow: var(--sombra-elevada), 0 0 60px rgba(242, 106, 34, 0.25);
}

.auth-layout__card {
    width: 100%;
    padding: var(--espacio-8);
    background: var(--fondo-superficie);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-xl);
    box-shadow: var(--sombra-elevada);
}

.auth-layout__marca {
    font-family: var(--fuente-mono);
    font-weight: 500;
    font-size: var(--tamano-xs);
    letter-spacing: var(--tracking-mono-caps);
    text-transform: uppercase;
    color: var(--acento);
    margin: 0;
}

/* ── Utilidades ── */

.oculto         { display: none !important; }
.invisible      { visibility: hidden; }
.texto-centro   { text-align: center; }
.texto-derecha  { text-align: right; }
.texto-mono     { font-family: var(--fuente-mono); }
.texto-secundario { color: var(--texto-secundario); }
.texto-tenue    { color: var(--texto-tenue); }
.texto-acento   { color: var(--acento); }

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

/* ── Scrollbars custom ── */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--acento-700) transparent;
}

*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--acento-800);
    border-radius: var(--radio-pill);
    border: 3px solid transparent;
    background-clip: padding-box;
    transition: background var(--duracion-rapida) var(--easing-estandar);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--acento-600);
    background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 0; height: 0; }
.sidebar-nav { scrollbar-width: none; }

/* ── Decorativo: línea editorial ──
   Línea horizontal con un break en el medio (estilo libro). */

.regla-editorial {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    color: var(--texto-tenue);
}

.regla-editorial::before,
.regla-editorial::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--borde-sutil);
}

.regla-editorial__ornamento {
    font-family: var(--fuente-display);
    font-style: italic;
    font-variation-settings: "opsz" 24, "SOFT" 80;
    font-size: var(--tamano-md);
    color: var(--acento);
}

/* ── Reveal por IntersectionObserver ──
   Cualquier hijo de [data-reveal] empieza oculto y se anima cuando entra
   al viewport. El JS (resources/js/.../reveal.js) agrega data-revealed="true"
   al detectar visibilidad, con un stagger por orden de aparición. */

[data-reveal] > * {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 320ms var(--easing-suave),
        transform 360ms var(--easing-suave);
}

[data-reveal] > [data-revealed="true"] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] > * { transition: none; opacity: 1; transform: none; }
    [data-reveal] > [data-revealed="true"] { opacity: 1; transform: none; }
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/* ── resources/css/proyecto\04-componentes\badge.css ── */
/* ── Badge — Warm Editorial (mono uppercase, tracked) ─────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    font-family: var(--fuente-mono);
    font-size: 0.6875rem;  /* 11px */
    font-weight: 500;
    border-radius: var(--radio-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    white-space: nowrap;
    line-height: 1.2;
    border: 1px solid transparent;
}

.badge::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.badge--sin-punto::before { display: none; }

/* ── Tipos de pieza ── */
.badge--reel    { background: rgba(242, 106, 34, 0.12); color: #F58850;        border-color: rgba(242, 106, 34, 0.30); }
.badge--youtube { background: rgba(196, 68, 52, 0.12);  color: #F09A8E;        border-color: rgba(196, 68, 52, 0.30); }
.badge--blog    { background: rgba(94, 234, 212, 0.10); color: var(--c-cyan);  border-color: rgba(94, 234, 212, 0.30); }

/* ── Estados de pieza ── */
.badge--grabado    { background: rgba(224, 176, 64, 0.10);  color: #E8C273;          border-color: rgba(224, 176, 64, 0.30); }
.badge--editado    { background: rgba(167, 139, 250, 0.10); color: var(--c-violeta); border-color: rgba(167, 139, 250, 0.30); }
.badge--redactado  { background: rgba(103, 232, 249, 0.10); color: var(--c-cyan-claro); border-color: rgba(103, 232, 249, 0.30); }
.badge--listo      { background: rgba(74, 222, 128, 0.10);  color: var(--c-verde);   border-color: rgba(74, 222, 128, 0.35); }
.badge--publicado  { background: rgba(236, 72, 153, 0.10);  color: var(--c-magenta); border-color: rgba(236, 72, 153, 0.30); }
.badge--vacio      { background: rgba(255, 255, 255, 0.04); color: var(--texto-tenue); border-color: var(--borde-sutil); }

/* ── Estados semánticos ── */
.badge--exito       { background: var(--exito-fondo);       color: var(--exito);       border-color: rgba(74, 222, 128, 0.30); }
.badge--error       { background: var(--error-fondo);       color: #F09A8E;            border-color: rgba(196, 68, 52, 0.30); }
.badge--advertencia { background: var(--advertencia-fondo); color: var(--advertencia); border-color: rgba(224, 176, 64, 0.30); }
.badge--info        { background: var(--info-fondo);        color: var(--info);        border-color: rgba(103, 232, 249, 0.30); }


/* ── resources/css/proyecto\04-componentes\boton.css ── */
/* ── Botón — Warm Editorial ───────────────────────────────────────── */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-2);
    padding: var(--espacio-3) var(--espacio-5);
    border-radius: var(--radio-md);
    font-family: var(--fuente-sans);
    font-size: var(--tamano-sm);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.005em;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        background var(--duracion-rapida) var(--easing-estandar),
        color var(--duracion-rapida) var(--easing-estandar),
        border-color var(--duracion-rapida) var(--easing-estandar),
        box-shadow var(--duracion-rapida) var(--easing-estandar),
        transform var(--duracion-rapida) var(--easing-resorte);
}

/* El contenido interno arriba del shimmer */
.boton > * { position: relative; z-index: 1; }

.boton:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(242, 106, 34, 0.30);
}

.boton:disabled,
.boton[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}

.boton svg { flex-shrink: 0; }

/* ── Variantes ── */

.boton--primario {
    background: var(--gradiente-cta);
    color: var(--texto-sobre-acento);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        0 4px 14px rgba(242, 106, 34, 0.30);
    font-weight: 600;
}

/* Shimmer / sheen que pasa por encima al hover */
.boton--primario::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(110deg,
        transparent 20%,
        rgba(255, 255, 255, 0.28) 50%,
        transparent 80%);
    transform: translateX(-130%) skewX(-15deg);
    transition: transform 700ms var(--easing-suave);
    pointer-events: none;
    z-index: 0;
}

.boton--primario:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        0 8px 22px rgba(242, 106, 34, 0.40);
}

.boton--primario:hover::before {
    transform: translateX(280%) skewX(-15deg);
}

.boton--primario:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.20),
        0 2px 6px rgba(242, 106, 34, 0.20);
}

.boton--secundario {
    background: rgba(255, 255, 255, 0.04);
    color: var(--texto);
    border-color: var(--borde);
}

/* Border-gradient sutil que aparece al hover */
.boton--secundario::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        var(--acento) 0%,
        transparent 40%,
        transparent 60%,
        var(--acento) 100%);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    opacity: 0;
    transition: opacity var(--duracion-rapida) var(--easing-estandar);
    pointer-events: none;
    z-index: 0;
}

.boton--secundario:hover {
    background: rgba(242, 106, 34, 0.10);
    border-color: transparent;
    color: var(--acento);
    transform: translateY(-1px);
}
.boton--secundario:hover::before {
    opacity: 1;
}

.boton--peligro {
    background: rgba(196, 68, 52, 0.12);
    color: #F09A8E;
    border-color: rgba(196, 68, 52, 0.4);
}
.boton--peligro:hover {
    background: var(--c-rojo);
    color: var(--texto);
    transform: translateY(-1px);
}

.boton--fantasma {
    background: transparent;
    color: var(--texto-secundario);
}
.boton--fantasma:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--texto);
}

/* ── Tamaños ── */

.boton--chico {
    padding: var(--espacio-2) var(--espacio-3);
    font-size: var(--tamano-xs);
    gap: 6px;
    letter-spacing: 0.01em;
}

.boton--grande {
    padding: var(--espacio-4) var(--espacio-6);
    font-size: var(--tamano-md);
}

.boton--bloque {
    width: 100%;
}


/* ── resources/css/proyecto\04-componentes\busqueda-live.css ── */
/* ── Búsqueda live (input compacto en page-header) ─────────────── */

.busqueda-live {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 240px;
}

.busqueda-live__icono {
    position: absolute;
    left: var(--espacio-3);
    color: var(--texto-tenue);
    pointer-events: none;
    display: grid;
    place-items: center;
}

.busqueda-live__input {
    width: 100%;
    padding: var(--espacio-2) var(--espacio-3) var(--espacio-2) calc(var(--espacio-3) + var(--espacio-5));
    background-color: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
    color: var(--texto);
    font-family: var(--fuente-sans);
    font-size: var(--tamano-sm);
    transition:
        border-color var(--duracion-rapida) var(--easing-estandar),
        background-color var(--duracion-rapida) var(--easing-estandar),
        box-shadow var(--duracion-rapida) var(--easing-estandar);
}

.busqueda-live__input::placeholder { color: var(--texto-tenue); }

.busqueda-live__input:hover {
    border-color: rgba(242, 106, 34, 0.4);
}

.busqueda-live__input:focus {
    outline: none;
    border-color: var(--borde-foco);
    background-color: rgba(0, 0, 0, 0.42);
    box-shadow: 0 0 0 3px rgba(242, 106, 34, 0.18);
}

/* ── Sort indicator en tabla ── */

.tabla-datos th[data-sort] {
    cursor: pointer;
    user-select: none;
    transition: color var(--duracion-rapida) var(--easing-estandar);
}

.tabla-datos th[data-sort]:hover {
    color: var(--acento);
}

.tabla-datos th[data-sort]::after {
    content: '↕';
    margin-left: 6px;
    opacity: 0.3;
    font-family: var(--fuente-mono);
}

.tabla-datos th[data-sort-actual="asc"]::after {
    content: '↑';
    opacity: 1;
    color: var(--acento);
}

.tabla-datos th[data-sort-actual="desc"]::after {
    content: '↓';
    opacity: 1;
    color: var(--acento);
}

.tabla-datos th[data-sort-actual] {
    color: var(--acento);
}


/* ── resources/css/proyecto\04-componentes\campo.css ── */
/* ── Campo (input / textarea / select) — Warm Editorial ──────────── */

.campo {
    display: block;
}

.campo__etiqueta {
    display: block;
    font-family: var(--fuente-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--texto-secundario);
    letter-spacing: var(--tracking-mono-caps);
    text-transform: uppercase;
    margin-bottom: var(--espacio-2);
}

.campo__etiqueta-requerido {
    color: var(--acento);
    margin-left: 4px;
    font-family: var(--fuente-display);
    font-style: italic;
}

.campo__input,
.campo__textarea,
.campo__select {
    width: 100%;
    padding: var(--espacio-4);
    background-color: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
    color: var(--texto);
    font-family: var(--fuente-sans);
    font-size: var(--tamano-md);
    /* line-height en píxeles (no unitless) para evitar diferencias de
       sub-pixel entre <input type="date"> y <button>/<select>. */
    line-height: 24px;
    box-sizing: border-box;
    transition:
        border-color var(--duracion-rapida) var(--easing-estandar),
        background-color var(--duracion-rapida) var(--easing-estandar),
        box-shadow var(--duracion-rapida) var(--easing-estandar);
}

/* Mismo alto exacto para input (incl. date) y select.
   16+16 padding + 24 line-height + 2 border = 58px.
   Usamos height (no min-height) porque algunos browsers no respetan
   min-height de la misma forma en <input type="date"> que en <select>
   o <button>, lo que dejaba 1 px de diferencia visual. */
.campo__input,
.campo__select {
    height: 58px;
    box-sizing: border-box;
}

.campo__input:hover,
.campo__textarea:hover,
.campo__select:hover {
    border-color: rgba(242, 106, 34, 0.5);
    background-color: rgba(0, 0, 0, 0.42);
}

.campo__input:focus,
.campo__textarea:focus,
.campo__select:focus {
    outline: none;
    border-color: var(--borde-foco);
    background-color: rgba(0, 0, 0, 0.42);
    box-shadow: 0 0 0 3px rgba(242, 106, 34, 0.18);
}

.campo__input::placeholder,
.campo__textarea::placeholder {
    color: var(--texto-tenue);
}

.campo__input:disabled,
.campo__textarea:disabled,
.campo__select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.campo__textarea {
    resize: vertical;
    min-height: 96px;
    line-height: var(--interlineado-normal);
}

.campo__select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23B5A89A'%3E%3Cpath d='M4.293 5.293a1 1 0 011.414 0L8 7.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--espacio-3) center;
    background-size: 16px;
    padding-right: var(--espacio-7);
    cursor: pointer;
    scrollbar-width: thin;
    scrollbar-color: var(--acento-500) rgba(255, 255, 255, 0.08);
}

.campo__select option {
    background-color: var(--fondo-elevado);
    color: var(--texto);
    padding: var(--espacio-2) var(--espacio-3);
}

/* ── Date / time picker: icono custom blanco-cream ──
   Solución robusta: oculto el indicator nativo (que Chrome no deja teñir
   confiablemente) y pongo nuestro propio icono SVG cream-warm como
   background-image del input. El clic sigue funcionando porque el
   indicator nativo, aunque transparente, mantiene el área clickeable. */

.campo__input[type="date"],
.campo__input[type="time"],
.campo__input[type="datetime-local"],
.campo__input[type="month"],
.campo__input[type="week"] {
    /* SVG inline de un calendario en color --texto (#F5EBDB) */
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23F5EBDB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--espacio-4) center;
    padding-right: var(--espacio-8);
}

.campo__input[type="date"]::-webkit-calendar-picker-indicator,
.campo__input[type="time"]::-webkit-calendar-picker-indicator,
.campo__input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.campo__input[type="month"]::-webkit-calendar-picker-indicator,
.campo__input[type="week"]::-webkit-calendar-picker-indicator {
    /* Oculto visualmente pero conservo área clickeable */
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}

/* Reset del shadow DOM interno del <input type="date"> en WebKit/Chromium.
   Chrome agrega height/padding a su propio ::-webkit-datetime-edit que
   sumaba sub-píxeles fuera del modelo de caja, dejando 1px de diferencia
   contra el <button> del select-custom. */
.campo__input[type="date"]::-webkit-datetime-edit,
.campo__input[type="time"]::-webkit-datetime-edit,
.campo__input[type="datetime-local"]::-webkit-datetime-edit {
    padding: 0;
    line-height: 24px;
    height: 24px;
}

.campo__input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.campo__input[type="time"]::-webkit-datetime-edit-fields-wrapper,
.campo__input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
    line-height: 24px;
}

/* Wrapper para que el indicator absoluto funcione */
.campo {
    position: relative;
}

.campo--error .campo__input,
.campo--error .campo__textarea,
.campo--error .campo__select {
    border-color: var(--error);
}

.campo--error .campo__input:focus,
.campo--error .campo__textarea:focus,
.campo--error .campo__select:focus {
    box-shadow: 0 0 0 3px rgba(196, 68, 52, 0.20);
}

.campo__error {
    margin-top: var(--espacio-2);
    color: #F09A8E;
    font-size: var(--tamano-sm);
    display: flex;
    align-items: center;
    gap: 6px;
}

.campo__pista {
    margin-top: var(--espacio-2);
    color: var(--texto-tenue);
    font-size: var(--tamano-sm);
    line-height: var(--interlineado-normal);
    font-style: italic;
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 14, "SOFT" 50;
}

/* ── Contador de caracteres SEO (se monta via JS en inputs con data-contador) ── */

.campo__contador {
    margin-top: var(--espacio-2);
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    letter-spacing: var(--tracking-mono-caps);
    text-transform: uppercase;
    color: var(--texto-tenue);
    transition: color var(--duracion-rapida) var(--easing-estandar);
}

.campo__contador[data-estado="ok"]   { color: var(--c-verde); }
.campo__contador[data-estado="bajo"] { color: var(--c-amarillo); }
.campo__contador[data-estado="alto"] { color: #F09A8E; }


/* ── resources/css/proyecto\04-componentes\kpi-card.css ── */
/* ── KPI card — Warm Editorial ─────────────────────────────────────── */

.kpi-card {
    position: relative;
    padding: var(--espacio-6);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
        var(--fondo-superficie);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-lg);
    overflow: hidden;
    box-shadow: var(--sombra-papel);
    transition:
        transform var(--duracion-rapida) var(--easing-resorte),
        border-color var(--duracion-rapida) var(--easing-estandar),
        box-shadow var(--duracion-rapida) var(--easing-estandar);
}

.kpi-card:hover {
    transform: translateY(-3px);
    border-color: var(--borde);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5);
}

.kpi-card__icono {
    position: absolute;
    top: var(--espacio-5);
    right: var(--espacio-5);
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--radio-md);
    color: var(--texto-tenue);
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--borde-sutil);
}

.kpi-card__etiqueta {
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    color: var(--texto-tenue);
    font-weight: 500;
}

.kpi-card__numero {
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 96, "SOFT" 40, "wght" 600;
    font-size: var(--tamano-5xl);
    color: var(--texto);
    line-height: 1;
    margin-top: var(--espacio-3);
    letter-spacing: -0.028em;
    font-feature-settings: "lnum" 1;
}

.kpi-card__total {
    color: var(--texto-tenue);
    font-size: var(--tamano-xl);
    font-weight: 400;
    font-variation-settings: "opsz" 24, "SOFT" 30, "wght" 400;
    margin-left: 4px;
}

.kpi-card__sub {
    color: var(--texto-secundario);
    font-size: var(--tamano-sm);
    margin-top: var(--espacio-2);
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 14, "SOFT" 50;
    font-style: italic;
}

/* ── Variantes — sólo cambia el borde/glow del ícono al hover ── */

.kpi-card--naranja:hover {
    border-color: rgba(242, 106, 34, 0.45);
    box-shadow: 0 18px 40px -16px rgba(242, 106, 34, 0.20);
}
.kpi-card--naranja .kpi-card__icono { color: var(--acento); }

.kpi-card--rojo:hover {
    border-color: rgba(196, 68, 52, 0.45);
    box-shadow: 0 18px 40px -16px rgba(196, 68, 52, 0.20);
}
.kpi-card--rojo .kpi-card__icono { color: #F09A8E; }

.kpi-card--cyan:hover {
    border-color: rgba(94, 234, 212, 0.45);
    box-shadow: 0 18px 40px -16px rgba(94, 234, 212, 0.18);
}
.kpi-card--cyan .kpi-card__icono { color: var(--c-cyan); }


/* ── resources/css/proyecto\04-componentes\modal.css ── */
/* ── Modal — Warm Editorial (apertura cinemática) ─────────────────── */

.modal-fondo {
    position: fixed;
    inset: 0;
    background: rgba(8, 6, 4, 0.74);
    backdrop-filter: blur(6px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--espacio-6);
}

.modal-fondo[data-abierto="true"] {
    display: flex;
    animation: modal-fade-in var(--duracion-media) var(--easing-entrada);
}

.modal {
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - var(--espacio-8));
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 50%),
        var(--fondo-superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-xl);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        var(--sombra-elevada);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modal-slide-up var(--duracion-media) var(--easing-resorte);
    position: relative;
}

/* Grano sutil sobre el modal */
.modal::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--textura-grano);
    opacity: 0.025;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.modal > * { position: relative; z-index: 1; }

/* Sizes formales — escala consistente */
.modal--xs              { max-width: 360px; }
.modal--sm              { max-width: 480px; }
.modal--md              { max-width: 640px; }  /* default */
.modal--lg              { max-width: 820px; }
.modal--xl              { max-width: 1040px; }
.modal--completo        { max-width: calc(100vw - var(--espacio-8)); }

/* Aliases legacy */
.modal--ancho           { max-width: 820px; }
.modal--ancho-completo  { max-width: 1200px; }

.modal__header {
    padding: var(--espacio-6) var(--espacio-7);
    border-bottom: 1px solid var(--borde-sutil);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espacio-4);
    flex-shrink: 0;
    position: relative;
}

/* Hairline acento bajo el header */
.modal__header::after {
    content: '';
    position: absolute;
    left: var(--espacio-7);
    right: var(--espacio-7);
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, var(--acento) 0%, transparent 60%);
    opacity: 0.35;
}

.modal__titulo {
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 48, "SOFT" 40, "wght" 600;
    font-size: var(--tamano-2xl);
    color: var(--texto);
    margin: 0;
    letter-spacing: -0.018em;
    line-height: 1.1;
}

.modal__cerrar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--radio-md);
    color: var(--texto-secundario);
    background: transparent;
    transition:
        background var(--duracion-rapida) var(--easing-estandar),
        color var(--duracion-rapida) var(--easing-estandar);
    margin-top: -4px;
}

.modal__cerrar:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--texto);
}

.modal__cuerpo {
    padding: var(--espacio-7);
    overflow-y: auto;
    flex: 1;
}

.modal__footer {
    padding: var(--espacio-5) var(--espacio-7);
    border-top: 1px solid var(--borde-sutil);
    display: flex;
    justify-content: flex-end;
    gap: var(--espacio-3);
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.18);
    align-items: center;
}

/* Indicador de autosave en el footer */
.autosave-estado {
    margin-right: auto;
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    letter-spacing: var(--tracking-mono-caps);
    text-transform: uppercase;
    color: var(--texto-tenue);
    display: flex;
    align-items: center;
    gap: 8px;
}

.autosave-estado::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.autosave-estado[data-tipo="guardando"] {
    color: var(--c-amarillo);
}
.autosave-estado[data-tipo="guardando"]::before {
    animation: autosave-blink 800ms infinite;
}

.autosave-estado[data-tipo="ok"] { color: var(--c-verde); }
.autosave-estado[data-tipo="error"] { color: #F09A8E; }

@keyframes autosave-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-slide-up {
    from {
        transform: translateY(24px) scale(0.96);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* ── Contexto del editor de pieza ── */

.editor-pieza__contexto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-4);
    padding: var(--espacio-4) var(--espacio-5);
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--borde-sutil);
    border-left: 3px solid var(--acento);
    border-radius: var(--radio-md);
}

.editor-pieza__contexto-etiqueta {
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    color: var(--acento);
    margin-bottom: 4px;
    font-weight: 500;
}

.editor-pieza__contexto-titulo {
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 18, "SOFT" 30, "wght" 500;
    font-size: var(--tamano-md);
    color: var(--texto);
    line-height: 1.2;
}

/* ── Keywords heredadas del tema (read-only en el editor de pieza) ── */

.editor-pieza__keywords {
    margin-top: var(--espacio-4);
    padding: var(--espacio-3) var(--espacio-4);
    background: var(--fondo-tibio);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-md);
}

.editor-pieza__keywords-titulo {
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    color: var(--texto-secundario);
    margin-bottom: var(--espacio-2);
}

.editor-pieza__keywords-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--espacio-3) var(--espacio-5);
    align-items: baseline;
}

.editor-pieza__keywords-etiqueta {
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    color: var(--texto-tenue);
    margin-right: var(--espacio-2);
}

.editor-pieza__keywords-valor {
    color: var(--texto);
    font-size: var(--tamano-sm);
    line-height: var(--interlineado-normal);
}

.editor-pieza__keywords-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.editor-pieza__keyword-chip {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(255, 200, 140, 0.08);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-pill);
    color: var(--texto);
    font-size: 0.8125rem;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--duracion-rapida) var(--easing-estandar),
        border-color var(--duracion-rapida) var(--easing-estandar),
        color var(--duracion-rapida) var(--easing-estandar);
}

.editor-pieza__keyword-chip:hover {
    background: rgba(242, 106, 34, 0.14);
    border-color: var(--acento-600);
    color: var(--acento-100);
}

.editor-pieza__keyword-chip--principal {
    background: rgba(242, 106, 34, 0.10);
    border-color: var(--acento-700);
    color: var(--acento);
    font-weight: 500;
}

.editor-pieza__keyword-chip--principal:hover {
    background: rgba(242, 106, 34, 0.18);
    color: var(--acento-100);
}

/* Botón "Copiar todas" al lado del título de keywords */
.editor-pieza__keywords-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
}

.editor-pieza__copiar-todas {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-md);
    color: var(--texto-secundario);
    font-family: var(--fuente-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    cursor: pointer;
    transition:
        background var(--duracion-rapida) var(--easing-estandar),
        border-color var(--duracion-rapida) var(--easing-estandar),
        color var(--duracion-rapida) var(--easing-estandar);
}

.editor-pieza__copiar-todas:hover {
    background: rgba(242, 106, 34, 0.10);
    border-color: var(--acento-600);
    color: var(--acento-100);
}

.editor-pieza__copiar-todas svg {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .editor-pieza__keywords-grid { grid-template-columns: 1fr; }
}

/* ── Preguntas H2 / search intent heredadas del tema ── */

.editor-pieza__preguntas {
    margin-top: var(--espacio-3);
    padding: var(--espacio-4) var(--espacio-5);
    background: rgba(242, 106, 34, 0.06);
    border: 1px solid var(--borde-sutil);
    border-left: 3px solid var(--acento-600);
    border-radius: var(--radio-md);
}

.editor-pieza__preguntas-titulo {
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    color: var(--acento);
    margin-bottom: var(--espacio-3);
    font-weight: 500;
}

.editor-pieza__preguntas-hint {
    color: var(--texto-tenue);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-style: italic;
}

.editor-pieza__preguntas-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
}

.editor-pieza__preguntas-lista li {
    color: var(--texto);
    font-size: var(--tamano-sm);
    line-height: var(--interlineado-normal);
    padding-left: var(--espacio-5);
    position: relative;
}

.editor-pieza__preguntas-lista li::before {
    content: '›';
    position: absolute;
    left: var(--espacio-2);
    top: 0;
    color: var(--acento);
    font-family: var(--fuente-display);
    font-weight: 600;
    font-size: var(--tamano-md);
    line-height: 1.4;
}


/* ── resources/css/proyecto\04-componentes\page-header.css ── */
/* ── Page header — Warm Editorial XL ─────────────────────────────────
   Tratamiento editorial dominante: título Fraunces enorme con kerning
   apretado, bajada italic como pull-quote con barra naranja al costado,
   ícono como sello circular flotante (no cajita utility). Aire generoso,
   detalles que evocan portada de revista.
   ─────────────────────────────────────────────────────────────────── */

.page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: var(--espacio-7);
    row-gap: var(--espacio-4);
    width: 100%;
    align-items: center;
    position: relative;
}

/* La entrada arranca recién cuando el preloader se va */
body.cargado .page-header {
    animation: page-header-enter 600ms var(--easing-suave) backwards;
}

@keyframes page-header-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hairline naranja arriba del título — sello editorial */
.page-header::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, var(--acento) 0%, transparent 100%);
    border-radius: var(--radio-pill);
}

.page-header__texto {
    grid-column: 1;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-4);
    min-width: 0;
}

/* Animación staggered: título primero, bajada después (sólo después del preloader) */
body.cargado .page-header__texto > :nth-child(1) {
    animation: page-header-slide-up 750ms var(--easing-suave) 80ms backwards;
}
body.cargado .page-header__texto > :nth-child(2) {
    animation: page-header-slide-up 750ms var(--easing-suave) 220ms backwards;
}

@keyframes page-header-slide-up {
    from { opacity: 0; transform: translateY(18px); filter: blur(3px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

@keyframes page-header-icono-enter {
    from { opacity: 0; transform: scale(0.6) rotate(-20deg); }
    to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ── Título: Fraunces display XL, gradient sutil ── */
.page-header__titulo {
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 144, "SOFT" 0, "wght" 600;
    font-size: clamp(2.5rem, 5.2vw, 5.25rem);
    color: var(--texto);
    margin: 0;
    line-height: 0.96;
    letter-spacing: -0.034em;

    /* Gradient muy sutil de cream a beige para warmth editorial */
    background: linear-gradient(165deg,
        var(--texto) 0%,
        var(--texto) 60%,
        var(--texto-secundario) 110%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Permite que <em>/<i> dentro del título resalten en italic display */
    & em, & i {
        font-style: italic;
        font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 500;
        color: var(--acento);
        -webkit-text-fill-color: var(--acento);
    }
}

/* ── Bajada: italic editorial con barra acento al costado ── */
.page-header__bajada {
    font-family: var(--fuente-display);
    font-style: italic;
    font-variation-settings: "opsz" 14, "SOFT" 60, "wght" 400;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--texto-secundario);
    max-width: 60ch;
    margin: 0;
    padding: var(--espacio-1) 0 var(--espacio-1) var(--espacio-4);
    border-left: 2px solid var(--acento);
    border-image: linear-gradient(180deg, var(--acento) 0%, rgba(242, 106, 34, 0.3) 100%) 1;
}

/* ── Ícono: sello circular flotante con halo, no cajita ── */
.page-header__icono {
    grid-column: 2;
    grid-row: 1;
    width: 104px;
    height: 104px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 28%,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(242, 106, 34, 0.22) 18%,
            rgba(242, 106, 34, 0.04) 65%,
            transparent 80%
        );
    border: 1px solid rgba(242, 106, 34, 0.28);
    color: var(--acento);
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 0 70px rgba(242, 106, 34, 0.16),
        0 18px 32px -16px rgba(0, 0, 0, 0.5);
    align-self: center;
    justify-self: end;
    /* glow corre siempre. La entrada se condiciona a body.cargado abajo. */
    animation: page-header-glow 7s ease-in-out infinite;
}

body.cargado .page-header__icono {
    animation:
        page-header-icono-enter 900ms var(--easing-resorte) 100ms backwards,
        page-header-glow 7s ease-in-out 1100ms infinite;
}

/* Aro decorativo exterior — efecto de "sello" o "moneda" */
.page-header__icono::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px dashed rgba(242, 106, 34, 0.18);
    pointer-events: none;
    animation: page-header-rotate 60s linear infinite;
}

.page-header__icono svg {
    width: 46px;
    height: 46px;
    position: relative;
    z-index: 1;
    stroke-width: 1.6;
}

/* Glow estático — el shadow-pulse era costoso en frames continuos.
   Mantenemos el resplandor pero sin animarlo. */
@keyframes page-header-glow {
    from, to {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.10),
            inset 0 -1px 0 rgba(0, 0, 0, 0.25),
            0 0 70px rgba(242, 106, 34, 0.18),
            0 18px 32px -16px rgba(0, 0, 0, 0.5);
    }
}

@keyframes page-header-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Variantes de color del ícono — ajustadas al nuevo tratamiento circular */
.page-header__icono--cyan {
    background: radial-gradient(circle at 30% 28%,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(94, 234, 212, 0.22) 18%,
        rgba(94, 234, 212, 0.04) 65%,
        transparent 80%);
    border-color: rgba(94, 234, 212, 0.28);
    color: var(--c-cyan);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 0 70px rgba(94, 234, 212, 0.16),
        0 18px 32px -16px rgba(0, 0, 0, 0.5);
    animation: none;
}
.page-header__icono--cyan::before { border-color: rgba(94, 234, 212, 0.18); }

.page-header__icono--magenta {
    background: radial-gradient(circle at 30% 28%,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(236, 72, 153, 0.22) 18%,
        rgba(236, 72, 153, 0.04) 65%,
        transparent 80%);
    border-color: rgba(236, 72, 153, 0.28);
    color: var(--c-magenta);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 0 70px rgba(236, 72, 153, 0.16),
        0 18px 32px -16px rgba(0, 0, 0, 0.5);
    animation: none;
}
.page-header__icono--magenta::before { border-color: rgba(236, 72, 153, 0.18); }

.page-header__icono--violeta {
    background: radial-gradient(circle at 30% 28%,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(167, 139, 250, 0.22) 18%,
        rgba(167, 139, 250, 0.04) 65%,
        transparent 80%);
    border-color: rgba(167, 139, 250, 0.28);
    color: var(--c-violeta);
    animation: none;
}
.page-header__icono--violeta::before { border-color: rgba(167, 139, 250, 0.18); }

.page-header__icono--amarillo {
    background: radial-gradient(circle at 30% 28%,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(224, 176, 64, 0.22) 18%,
        rgba(224, 176, 64, 0.04) 65%,
        transparent 80%);
    border-color: rgba(224, 176, 64, 0.28);
    color: var(--c-amarillo);
    animation: none;
}
.page-header__icono--amarillo::before { border-color: rgba(224, 176, 64, 0.18); }

/* ── Acciones — alineadas abajo a la derecha cuando existen ── */
.page-header__acciones {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    gap: var(--espacio-3);
    align-items: center;
    justify-self: end;
}

/* Si NO hay acciones, el ícono ocupa ambas filas (centrado vertical) */
.page-header:not(:has(.page-header__acciones)) .page-header__icono {
    grid-row: 1 / -1;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .page-header__icono {
        width: 84px;
        height: 84px;
    }
    .page-header__icono svg { width: 38px; height: 38px; }
}

@media (max-width: 720px) {
    .page-header {
        grid-template-columns: 1fr;
        row-gap: var(--espacio-3);
    }
    .page-header__texto { grid-row: 2; }
    .page-header__icono {
        grid-row: 1;
        grid-column: 1;
        justify-self: start;
        width: 64px;
        height: 64px;
    }
    .page-header__icono svg { width: 28px; height: 28px; }
    .page-header__acciones {
        grid-row: 3;
        grid-column: 1;
        justify-self: stretch;
    }
    .page-header__titulo { font-size: clamp(2rem, 8vw, 3rem); }
    .page-header__bajada { font-size: 0.9375rem; padding-left: var(--espacio-3); }
}


/* ── resources/css/proyecto\04-componentes\palette.css ── */
/* ── Command palette (Cmd+K) — buscador global ─────────────────── */

.palette-fondo {
    position: fixed;
    inset: 0;
    background: rgba(8, 6, 4, 0.78);
    backdrop-filter: blur(8px);
    z-index: 9500;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    padding-inline: var(--espacio-5);
}

.palette-fondo[data-abierto="true"] {
    display: flex;
    animation: palette-fade-in 200ms var(--easing-entrada);
}

.palette {
    width: 100%;
    max-width: 640px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
        var(--fondo-elevado);
    border: 1px solid var(--borde);
    border-radius: var(--radio-xl);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 32px 64px -16px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    animation: palette-slide-in 280ms var(--easing-resorte);
}

.palette__input-wrap {
    position: relative;
    border-bottom: 1px solid var(--borde-sutil);
    flex-shrink: 0;
}

.palette__input-icono {
    position: absolute;
    left: var(--espacio-5);
    top: 50%;
    transform: translateY(-50%);
    color: var(--texto-tenue);
    pointer-events: none;
}

.palette__input {
    width: 100%;
    background: transparent;
    border: none;
    padding: var(--espacio-5) var(--espacio-5) var(--espacio-5) calc(var(--espacio-5) + var(--espacio-7));
    color: var(--texto);
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 24, "SOFT" 40, "wght" 500;
    font-size: var(--tamano-xl);
    outline: none;
    letter-spacing: -0.01em;
}

.palette__input::placeholder {
    color: var(--texto-tenue);
    font-style: italic;
}

.palette__hint {
    position: absolute;
    right: var(--espacio-5);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    color: var(--texto-tenue);
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-sm);
    pointer-events: none;
}

.palette__cuerpo {
    flex: 1;
    overflow-y: auto;
    padding: var(--espacio-3);
}

.palette__seccion {
    margin-bottom: var(--espacio-3);
}

.palette__seccion:last-child { margin-bottom: 0; }

.palette__seccion-titulo {
    font-family: var(--fuente-mono);
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--texto-tenue);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    padding: var(--espacio-2) var(--espacio-4);
}

.palette__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--espacio-4);
    width: 100%;
    padding: var(--espacio-3) var(--espacio-4);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radio-md);
    color: var(--texto);
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms var(--easing-estandar);
}

.palette__item[data-seleccionado="true"] {
    background: rgba(242, 106, 34, 0.14);
    border-color: rgba(242, 106, 34, 0.30);
}

.palette__item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.palette__item-icono {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radio-sm);
    color: var(--texto-secundario);
    background: rgba(0, 0, 0, 0.30);
    flex-shrink: 0;
}

.palette__item[data-seleccionado="true"] .palette__item-icono {
    color: var(--acento);
    background: rgba(242, 106, 34, 0.18);
}

.palette__item-texto {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.palette__item-titulo {
    font-size: var(--tamano-sm);
    font-weight: 500;
    color: var(--texto);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.palette__item-sub {
    font-family: var(--fuente-mono);
    font-size: 0.6875rem;
    color: var(--texto-tenue);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.palette__item-hint {
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    color: var(--texto-tenue);
    opacity: 0;
    transition: opacity 120ms var(--easing-estandar);
}

.palette__item[data-seleccionado="true"] .palette__item-hint {
    opacity: 1;
}

.palette__vacio {
    padding: var(--espacio-6) var(--espacio-5);
    text-align: center;
    color: var(--texto-tenue);
    font-family: var(--fuente-display);
    font-style: italic;
    font-variation-settings: "opsz" 18, "SOFT" 60;
    font-size: var(--tamano-md);
}

.palette__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-5);
    border-top: 1px solid var(--borde-sutil);
    background: rgba(0, 0, 0, 0.20);
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    color: var(--texto-tenue);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    flex-shrink: 0;
}

.palette__footer-tecla {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-sm);
    color: var(--texto-secundario);
    font-size: 0.625rem;
}

@keyframes palette-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes palette-slide-in {
    from { opacity: 0; transform: translateY(-16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}


/* ── resources/css/proyecto\04-componentes\preloader.css ── */
/* ── Preloader: overlay editorial al cargar ──────────────────────── */

.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background:
        radial-gradient(ellipse 600px 400px at 50% 40%, rgba(242, 106, 34, 0.08), transparent 60%),
        var(--fondo);
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 1;
    transition: opacity 350ms var(--easing-salida);
}

.preloader--oculto {
    opacity: 0;
    pointer-events: none;
}

.preloader__contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-5);
    animation: preloader-pulse 1.8s var(--easing-suave) infinite;
}

.preloader__logo {
    width: 80px;
    height: 80px;
    border-radius: var(--radio-lg);
    box-shadow:
        0 0 48px rgba(242, 106, 34, 0.35),
        0 0 0 1px rgba(242, 106, 34, 0.2);
    object-fit: cover;
    object-position: center;
}

.preloader__marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.preloader__titulo {
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 36, "SOFT" 50, "wght" 600;
    font-size: var(--tamano-xl);
    color: var(--texto);
    letter-spacing: -0.01em;
}

.preloader__sub {
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    color: var(--texto-tenue);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
}

.preloader__barra {
    width: 120px;
    height: 2px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radio-pill);
    overflow: hidden;
    position: relative;
    margin-top: var(--espacio-3);
}

.preloader__barra::after {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--acento), transparent);
    animation: preloader-barra 1.4s var(--easing-suave) infinite;
}

@keyframes preloader-pulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.02); }
}

@keyframes preloader-barra {
    from { left: -40%; }
    to   { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .preloader__contenido { animation: none; }
    .preloader__barra::after { animation: none; }
}


/* ── resources/css/proyecto\04-componentes\progress.css ── */
/* ── Barra de progreso — Warm Editorial ─────────────────────────── */

.progress {
    width: 100%;
}

.progress__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--espacio-3);
    gap: var(--espacio-4);
}

.progress__etiqueta {
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    font-weight: 500;
    color: var(--texto-secundario);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
}

.progress__valor {
    color: var(--texto);
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 18, "SOFT" 30, "wght" 600;
    font-size: var(--tamano-lg);
    white-space: nowrap;
    line-height: 1;
}

.progress__valor strong {
    color: var(--acento);
    font-variation-settings: "opsz" 24, "SOFT" 50, "wght" 700;
    font-size: var(--tamano-xl);
}

.progress__barra {
    width: 100%;
    height: 10px;
    background: rgba(0, 0, 0, 0.40);
    border-radius: var(--radio-pill);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.40);
}

.progress__llenado {
    height: 100%;
    background: var(--gradiente-progreso);
    border-radius: var(--radio-pill);
    transition: width var(--duracion-lenta) var(--easing-suave);
    box-shadow: 0 0 16px rgba(242, 106, 34, 0.45);
    min-width: 4px;
    position: relative;
}

/* Shine sutil sobre el llenado */
.progress__llenado::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.20), transparent);
    border-radius: var(--radio-pill) var(--radio-pill) 0 0;
}

.progress--grande .progress__barra { height: 14px; }
.progress--chico  .progress__barra { height: 5px; }


/* ── resources/css/proyecto\04-componentes\quill-tema.css ── */
/* ── Quill snow → Warm Editorial ────────────────────────────────────
   Quill viene con tema "snow" pensado para fondos claros. Acá lo
   reescribimos contra nuestros tokens warm.
   ─────────────────────────────────────────────────────────────────── */

.ql-toolbar.ql-snow {
    border: 1px solid var(--borde) !important;
    border-radius: var(--radio-md) var(--radio-md) 0 0 !important;
    background: rgba(0, 0, 0, 0.30);
    padding: var(--espacio-3) var(--espacio-4);
}

.ql-container.ql-snow {
    border: 1px solid var(--borde) !important;
    border-top: none !important;
    border-radius: 0 0 var(--radio-md) var(--radio-md) !important;
    background: rgba(0, 0, 0, 0.20);
    color: var(--texto);
    font-family: var(--fuente-sans);
    font-size: var(--tamano-md);
    min-height: 260px;
}

.ql-editor {
    color: var(--texto);
    line-height: var(--interlineado-relajado);
    padding: var(--espacio-5) var(--espacio-6);
    font-family: var(--fuente-sans);
}

/* Placeholder — Quill snow lo deja casi negro por defecto */
.ql-editor.ql-blank::before {
    color: var(--texto-tenue) !important;
    font-family: var(--fuente-display) !important;
    font-style: italic !important;
    font-variation-settings: "opsz" 18, "SOFT" 60 !important;
    opacity: 1 !important;
}

.ql-editor h2, .ql-editor h3 {
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 36, "SOFT" 30, "wght" 600;
    color: var(--texto);
    margin: var(--espacio-5) 0 var(--espacio-3);
    letter-spacing: -0.015em;
}

.ql-editor h2 { font-size: var(--tamano-2xl); }
.ql-editor h3 { font-size: var(--tamano-xl); }

.ql-editor p {
    color: var(--texto);
    margin-bottom: var(--espacio-3);
}

.ql-editor ul, .ql-editor ol {
    padding-left: var(--espacio-6);
    margin-bottom: var(--espacio-3);
}

.ql-editor a {
    color: var(--acento);
    text-decoration: underline;
    text-decoration-color: rgba(242, 106, 34, 0.4);
    text-underline-offset: 3px;
}

.ql-editor blockquote {
    border-left: 3px solid var(--acento);
    padding-left: var(--espacio-5);
    color: var(--texto-secundario);
    margin: var(--espacio-5) 0;
    font-family: var(--fuente-display);
    font-style: italic;
    font-variation-settings: "opsz" 18, "SOFT" 60;
    font-size: var(--tamano-lg);
    line-height: var(--interlineado-relajado);
}

.ql-editor pre.ql-syntax {
    background: rgba(0, 0, 0, 0.40) !important;
    color: var(--texto) !important;
    border-radius: var(--radio-md);
    padding: var(--espacio-4) !important;
    font-family: var(--fuente-mono);
    border: 1px solid var(--borde-sutil);
}

/* Toolbar — íconos */
.ql-snow .ql-stroke       { stroke: var(--texto-secundario) !important; }
.ql-snow .ql-fill         { fill:   var(--texto-secundario) !important; }
.ql-snow .ql-picker       { color:  var(--texto-secundario) !important; }
.ql-snow .ql-picker-label { color:  var(--texto-secundario) !important; }

.ql-snow button:hover .ql-stroke,
.ql-snow button.ql-active .ql-stroke,
.ql-snow .ql-picker-label:hover,
.ql-snow .ql-picker-label.ql-active {
    stroke: var(--acento) !important;
    color:  var(--acento) !important;
}

.ql-snow button:hover .ql-fill,
.ql-snow button.ql-active .ql-fill {
    fill: var(--acento) !important;
}

.ql-snow .ql-picker-options {
    background: var(--fondo-elevado) !important;
    border-color: var(--borde) !important;
    border-radius: var(--radio-md);
}

.ql-snow .ql-tooltip {
    background: var(--fondo-elevado) !important;
    border-color: var(--borde) !important;
    color: var(--texto) !important;
    box-shadow: var(--sombra-elevada);
    border-radius: var(--radio-md);
}

.ql-snow .ql-tooltip input[type="text"] {
    background: rgba(0, 0, 0, 0.30) !important;
    border: 1px solid var(--borde) !important;
    color: var(--texto) !important;
    border-radius: var(--radio-sm);
    padding: 6px 10px;
}


/* ── resources/css/proyecto\04-componentes\select-custom.css ── */
/* ── Select custom — Warm Editorial ─────────────────────────────── */

.select-custom {
    position: relative;
    display: block;
    width: 100%;
}

.select-custom__nativo {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    background: none !important;
}

.select-custom__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    width: 100%;
    /* Mismo alto exacto que .campo__input (incl. type=date):
       16+16 padding + 24 line-height + 2 border = 58px.
       height (no min-height) para garantizar paridad pixel-perfect. */
    height: 58px;
    box-sizing: border-box;
    padding: var(--espacio-4);
    background-color: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
    color: var(--texto);
    font-family: var(--fuente-sans);
    font-size: var(--tamano-md);
    /* line-height en píxeles (no unitless) para igualar al <input type="date">. */
    line-height: 24px;
    text-align: left;
    cursor: pointer;
    transition:
        border-color var(--duracion-rapida) var(--easing-estandar),
        background-color var(--duracion-rapida) var(--easing-estandar),
        box-shadow var(--duracion-rapida) var(--easing-estandar);
}

.select-custom__trigger:hover {
    border-color: rgba(242, 106, 34, 0.5);
    background-color: rgba(0, 0, 0, 0.42);
}

.select-custom__trigger:focus-visible {
    outline: none;
    border-color: var(--borde-foco);
    box-shadow: 0 0 0 3px rgba(242, 106, 34, 0.18);
}

.select-custom__trigger[aria-expanded="true"] {
    border-color: var(--acento);
    box-shadow: 0 0 0 3px rgba(242, 106, 34, 0.18);
}

.select-custom__trigger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.select-custom__valor {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-custom__chevron {
    display: grid;
    place-items: center;
    color: var(--texto-secundario);
    flex-shrink: 0;
    transition:
        transform var(--duracion-media) var(--easing-resorte),
        color var(--duracion-rapida) var(--easing-estandar);
}

.select-custom__trigger[aria-expanded="true"] .select-custom__chevron {
    transform: rotate(180deg);
    color: var(--acento);
}

/* ── Popup ── */

.select-custom__popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    background: var(--fondo-elevado);
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-elevada);
    padding: var(--espacio-1);
    z-index: 200;
    animation: select-custom-fade-in var(--duracion-rapida) var(--easing-entrada);

    scrollbar-width: thin;
    scrollbar-color: var(--acento-500) rgba(255, 255, 255, 0.08);
}

.select-custom__popup--arriba {
    top: auto;
    bottom: calc(100% + 6px);
}

.select-custom__popup::-webkit-scrollbar {
    width: 10px;
}
.select-custom__popup::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--radio-pill);
    margin: 4px;
}
.select-custom__popup::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--acento-400), var(--acento-600));
    border-radius: var(--radio-pill);
    border: 2px solid var(--fondo-elevado);
    background-clip: padding-box;
}
.select-custom__popup::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--acento-300), var(--acento-500));
    background-clip: padding-box;
}

@keyframes select-custom-fade-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Opciones ── */

.select-custom__opcion {
    display: block;
    width: 100%;
    padding: var(--espacio-3) var(--espacio-4);
    color: var(--texto);
    font-family: var(--fuente-sans);
    font-size: var(--tamano-sm);
    text-align: left;
    border: none;
    background: transparent;
    border-radius: var(--radio-sm);
    cursor: pointer;
    transition: background var(--duracion-rapida) var(--easing-estandar),
                color var(--duracion-rapida) var(--easing-estandar);
}

.select-custom__opcion:hover {
    background: rgba(242, 106, 34, 0.18);
    color: var(--acento);
}

.select-custom__opcion[data-actual="true"] {
    background: rgba(242, 106, 34, 0.24);
    color: var(--acento);
    font-weight: 500;
}

.select-custom__opcion[data-actual="true"]:hover {
    background: rgba(242, 106, 34, 0.32);
}


/* ── resources/css/proyecto\04-componentes\tabla-datos.css ── */
/* ── Tabla de datos — Warm Editorial ───────────────────────────── */

.tabla-datos {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
        var(--fondo-superficie);
    border-radius: var(--radio-lg);
    overflow: hidden;
    border: 1px solid var(--borde-sutil);
    box-shadow: var(--sombra-papel);
}

.tabla-datos thead {
    background: rgba(0, 0, 0, 0.32);
}

.tabla-datos th {
    padding: var(--espacio-4) var(--espacio-5);
    text-align: left;
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    font-weight: 500;
    color: var(--texto-secundario);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    border-bottom: 1px solid var(--borde-sutil);
    white-space: nowrap;
}

.tabla-datos td {
    padding: var(--espacio-4) var(--espacio-5);
    color: var(--texto);
    font-size: var(--tamano-sm);
    border-bottom: 1px dashed var(--borde-sutil);
    vertical-align: middle;
}

.tabla-datos tr:last-child td {
    border-bottom: none;
}

.tabla-datos tbody tr {
    transition: background var(--duracion-rapida) var(--easing-estandar);
}

.tabla-datos tbody tr:hover {
    background: rgba(242, 106, 34, 0.06);
}

.tabla-datos--compacta th,
.tabla-datos--compacta td {
    padding: var(--espacio-2) var(--espacio-3);
}

.tabla-datos__numero {
    color: var(--texto-tenue);
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    width: 48px;
}

.tabla-datos__acciones {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.tabla-datos__vacio {
    padding: var(--espacio-9) var(--espacio-7);
    text-align: center;
    color: var(--texto-secundario);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
        var(--fondo-superficie);
    border: 1px dashed var(--borde-sutil);
    border-radius: var(--radio-lg);
    position: relative;
}

/* Ornamento editorial — un asterisco serif sobre el texto */
.tabla-datos__vacio::before {
    content: '✻';
    display: block;
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 300;
    font-size: var(--tamano-4xl);
    color: var(--acento);
    opacity: 0.55;
    line-height: 1;
    margin-bottom: var(--espacio-3);
}

.tabla-datos__vacio p {
    font-family: var(--fuente-display);
    font-style: italic;
    font-variation-settings: "opsz" 24, "SOFT" 70;
    font-size: var(--tamano-lg);
    color: var(--texto-secundario);
    line-height: var(--interlineado-relajado);
    max-width: 480px;
    margin: 0 auto;
}

.tabla-datos__vacio strong {
    font-family: var(--fuente-sans);
    font-style: normal;
    font-weight: 600;
    color: var(--acento);
    font-size: var(--tamano-md);
    padding: 2px 6px;
    background: rgba(242, 106, 34, 0.10);
    border-radius: var(--radio-sm);
}


/* ── resources/css/proyecto\04-componentes\tabs.css ── */
/* ── Tabs (filtros tipo ideas) — Warm Editorial ───────────────────── */

.tabs {
    display: flex;
    flex-direction: column;
}

.tabs__lista {
    display: flex;
    gap: var(--espacio-1);
    border-bottom: 1px dashed var(--borde-sutil);
    overflow-x: auto;
    margin-bottom: var(--espacio-5);
    scrollbar-width: thin;
}

.tabs__tab {
    padding: var(--espacio-3) var(--espacio-5);
    color: var(--texto-secundario);
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    border-bottom: 2px solid transparent;
    transition: color var(--duracion-rapida) var(--easing-estandar),
                border-color var(--duracion-rapida) var(--easing-estandar);
    cursor: pointer;
    white-space: nowrap;
    background: transparent;
    margin-bottom: -1px;
}

.tabs__tab:hover         { color: var(--texto); }
.tabs__tab:focus-visible { outline: 2px solid var(--borde-foco); outline-offset: -2px; }

.tabs__tab[aria-selected="true"] {
    color: var(--acento);
    border-bottom-color: var(--acento);
}

.tabs__panel { display: none; }

.tabs__panel[data-activo="true"] {
    display: block;
    animation: tabs-fade-in var(--duracion-media) var(--easing-entrada);
}

@keyframes tabs-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ── resources/css/proyecto\04-componentes\tarjeta-seccion.css ── */
/* ── Tarjeta sección + Formulario — Warm Editorial ──────────────── */

.tarjeta-seccion {
    padding: var(--espacio-7) var(--espacio-8);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
        var(--fondo-superficie);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-papel);
    position: relative;
    overflow: hidden;
}

/* Grano sutil sobre el papel */
.tarjeta-seccion::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--textura-grano);
    opacity: 0.02;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.tarjeta-seccion > * { position: relative; }

.tarjeta-seccion--peligro {
    border-color: rgba(196, 68, 52, 0.40);
}

.tarjeta-seccion__header {
    margin-bottom: var(--espacio-6);
    padding-bottom: var(--espacio-5);
    border-bottom: 1px dashed var(--borde-sutil);
}

.tarjeta-seccion__titulo {
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 36, "SOFT" 40, "wght" 600;
    font-size: var(--tamano-2xl);
    color: var(--texto);
    margin: 0 0 var(--espacio-1) 0;
    letter-spacing: -0.018em;
    line-height: 1.15;
}

.tarjeta-seccion__titulo--peligro {
    color: #F09A8E;
}

.tarjeta-seccion__bajada {
    margin: 0;
    color: var(--texto-secundario);
    font-size: var(--tamano-sm);
    line-height: var(--interlineado-normal);
}

/* ── Formulario ── */

.formulario {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-5);
}

.formulario__fila {
    display: grid;
    gap: var(--espacio-4);
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 720px) {
    .formulario__fila { grid-template-columns: 1fr; }
}

.formulario__pie {
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
    margin-top: var(--espacio-2);
    padding-top: var(--espacio-5);
    border-top: 1px dashed var(--borde-sutil);
}

.formulario__seccion {
    padding-top: var(--espacio-5);
    border-top: 1px dashed var(--borde-sutil);
    display: flex;
    flex-direction: column;
    gap: var(--espacio-5);
}

.formulario__seccion-titulo {
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    color: var(--acento);
    margin: 0;
}


/* ── resources/css/proyecto\04-componentes\toast.css ── */
/* ── Toast — notificaciones deslizantes en esquina ───────────────── */

.toast-container {
    position: fixed;
    bottom: var(--espacio-6);
    right: var(--espacio-6);
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
    z-index: 9000;
    pointer-events: none;
    max-width: calc(100vw - var(--espacio-7) - var(--sidebar-ancho));
}

.toast {
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--espacio-3);
    min-width: 280px;
    max-width: 420px;
    padding: var(--espacio-4) var(--espacio-5);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 60%),
        var(--fondo-elevado);
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 18px 40px -12px rgba(0, 0, 0, 0.6);
    color: var(--texto);
    font-size: var(--tamano-sm);
    line-height: var(--interlineado-normal);
    animation: toast-slide-in var(--duracion-media) var(--easing-resorte);
    position: relative;
    overflow: hidden;
}

.toast--saliendo {
    animation: toast-slide-out var(--duracion-rapida) var(--easing-salida) forwards;
}

.toast__icono {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radio-sm);
    flex-shrink: 0;
    color: var(--acento);
    background: rgba(242, 106, 34, 0.16);
}

.toast__cuerpo {
    min-width: 0;
}

.toast__titulo {
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 18, "SOFT" 30, "wght" 600;
    font-size: var(--tamano-md);
    color: var(--texto);
    line-height: 1.2;
}

.toast__mensaje {
    color: var(--texto-secundario);
    font-size: var(--tamano-sm);
    margin-top: 2px;
}

.toast__cerrar {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: var(--texto-tenue);
    background: transparent;
    border-radius: var(--radio-sm);
    cursor: pointer;
    transition: color var(--duracion-rapida) var(--easing-estandar),
                background var(--duracion-rapida) var(--easing-estandar);
    flex-shrink: 0;
}

.toast__cerrar:hover { color: var(--texto); background: rgba(255, 255, 255, 0.05); }

/* Barra de progreso del autodismiss */
.toast__progreso {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--acento);
    opacity: 0.4;
    animation: toast-progreso 4000ms linear forwards;
}

/* ── Variantes ── */

.toast--exito  .toast__icono { color: var(--c-verde);     background: rgba(74, 222, 128, 0.16); }
.toast--exito  .toast__progreso { background: var(--c-verde); }

.toast--error  .toast__icono { color: #F09A8E;            background: rgba(196, 68, 52, 0.16); }
.toast--error  .toast__progreso { background: var(--c-rojo); }

.toast--info   .toast__icono { color: var(--c-cyan-claro); background: rgba(103, 232, 249, 0.14); }
.toast--info   .toast__progreso { background: var(--c-cyan-claro); }

.toast--alerta .toast__icono { color: var(--c-amarillo); background: rgba(224, 176, 64, 0.16); }
.toast--alerta .toast__progreso { background: var(--c-amarillo); }

@keyframes toast-slide-in {
    from { opacity: 0; transform: translateX(40px) scale(0.95); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toast-slide-out {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(40px) scale(0.95); }
}

@keyframes toast-progreso {
    from { width: 100%; }
    to   { width: 0%; }
}


/* ── resources/css/proyecto\04-componentes\toggle.css ── */
/* ── Toggle — Warm Editorial ──────────────────────────────────────── */

.toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-3);
    cursor: pointer;
    user-select: none;
}

.toggle__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle__visual {
    width: 42px;
    height: 24px;
    background: rgba(0, 0, 0, 0.40);
    border: 1px solid var(--borde);
    border-radius: var(--radio-pill);
    position: relative;
    transition:
        background var(--duracion-rapida) var(--easing-estandar),
        border-color var(--duracion-rapida) var(--easing-estandar);
    flex-shrink: 0;
}

.toggle__visual::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--texto-tenue);
    border-radius: 50%;
    transition:
        transform var(--duracion-media) var(--easing-resorte),
        background var(--duracion-rapida) var(--easing-estandar),
        box-shadow var(--duracion-rapida) var(--easing-estandar);
}

.toggle__input:checked + .toggle__visual {
    background: var(--acento);
    border-color: var(--acento);
}

.toggle__input:checked + .toggle__visual::after {
    transform: translateX(18px);
    background: var(--texto);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.30);
}

.toggle__input:focus-visible + .toggle__visual {
    box-shadow: 0 0 0 3px rgba(242, 106, 34, 0.25);
}

.toggle__input:disabled + .toggle__visual {
    opacity: 0.5;
    cursor: not-allowed;
}

.toggle__etiqueta {
    color: var(--texto-secundario);
    font-size: var(--tamano-sm);
    font-family: var(--fuente-sans);
    font-weight: 500;
    transition: color var(--duracion-rapida) var(--easing-estandar);
}

.toggle__input:checked ~ .toggle__etiqueta {
    color: var(--texto);
}


/* ── resources/css/proyecto\05-modulos\calendario.css ── */
/* ── Calendario editorial — timeline vertical Warm Editorial ───────── */

/* ── Filtros ── */
.calendario-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-5);
    margin-bottom: var(--espacio-4);
    padding: var(--espacio-4) var(--espacio-5);
    background: var(--fondo-superficie);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-md);
}

.calendario-filtros__grupo {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
}

.calendario-filtros__etiqueta {
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    color: var(--texto-tenue);
    flex-shrink: 0;
}

.calendario-filtros__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.calendario-filtros__tab {
    padding: 4px 12px;
    background: transparent;
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-pill);
    color: var(--texto-secundario);
    font-size: var(--tamano-sm);
    text-decoration: none;
    transition:
        background var(--duracion-rapida) var(--easing-estandar),
        border-color var(--duracion-rapida) var(--easing-estandar),
        color var(--duracion-rapida) var(--easing-estandar);
}

.calendario-filtros__tab:hover {
    background: rgba(242, 106, 34, 0.10);
    border-color: var(--acento-600);
    color: var(--acento-100);
}

.calendario-filtros__tab--activo {
    background: var(--acento);
    border-color: var(--acento);
    color: var(--texto-sobre-acento);
    font-weight: 500;
}

.calendario-filtros__tab--activo:hover {
    background: var(--acento-hover);
    border-color: var(--acento-hover);
    color: var(--texto-sobre-acento);
}

/* ── Resumen ── */
.calendario-resumen {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-5);
    font-size: var(--tamano-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    color: var(--texto-secundario);
}

/* ── Timeline ── */
.calendario-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-7);
}

.cal-dia {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--espacio-5);
    padding: var(--espacio-5) var(--espacio-5);
    background: var(--fondo-superficie);
    border: 1px solid var(--borde-sutil);
    border-left: 3px solid var(--borde);
    border-radius: var(--radio-md);
    transition: border-color var(--duracion-rapida) var(--easing-estandar);
}

.cal-dia--hoy {
    border-left-color: var(--acento);
    background:
        linear-gradient(90deg, rgba(242, 106, 34, 0.06) 0%, transparent 30%),
        var(--fondo-superficie);
}

.cal-dia--pasado {
    opacity: 0.7;
}

.cal-dia--pasado:hover {
    opacity: 1;
}

.cal-dia__fecha {
    display: flex;
    align-items: baseline;
    gap: var(--espacio-3);
    padding-right: var(--espacio-4);
    border-right: 1px dashed var(--borde-sutil);
}

.cal-dia__numero {
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 60, "SOFT" 20, "wght" 600;
    font-size: 3rem;
    line-height: 1;
    color: var(--texto);
    letter-spacing: -0.02em;
}

.cal-dia--hoy .cal-dia__numero {
    color: var(--acento);
}

.cal-dia__metadata {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cal-dia__dia {
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 18, "SOFT" 30, "wght" 500;
    font-size: var(--tamano-md);
    color: var(--texto);
    line-height: 1.1;
}

.cal-dia__mes {
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    color: var(--texto-tenue);
}

.cal-dia__hoy {
    display: inline-block;
    margin-top: var(--espacio-2);
    padding: 2px 8px;
    background: var(--acento);
    color: var(--texto-sobre-acento);
    border-radius: var(--radio-pill);
    font-family: var(--fuente-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: var(--tracking-mono-caps);
    width: fit-content;
}

.cal-dia__piezas {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
}

/* ── Pieza individual en la timeline ── */
.cal-pieza {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--espacio-4);
    align-items: center;
    padding: var(--espacio-3) var(--espacio-4);
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-md);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        background var(--duracion-rapida) var(--easing-estandar),
        border-color var(--duracion-rapida) var(--easing-estandar),
        transform var(--duracion-media) var(--easing-suave),
        box-shadow var(--duracion-media) var(--easing-suave);
}

/* Línea naranja vertical que aparece al hover (lado izquierdo) */
.cal-pieza::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 70%;
    background: var(--acento);
    border-radius: 0 var(--radio-pill) var(--radio-pill) 0;
    transition: transform var(--duracion-media) var(--easing-resorte);
    box-shadow: 0 0 12px rgba(242, 106, 34, 0.55);
    z-index: 0;
}

.cal-pieza:hover,
.cal-pieza:focus-visible {
    background: rgba(242, 106, 34, 0.08);
    border-color: var(--acento-700);
    outline: none;
    transform: translateX(4px) translateY(-1px);
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.4);
}

.cal-pieza:hover::before,
.cal-pieza:focus-visible::before {
    transform: translateY(-50%) scaleY(1);
}

.cal-pieza__badge {
    flex-shrink: 0;
}

.cal-pieza__contenido {
    min-width: 0;
}

.cal-pieza__titulo {
    color: var(--texto);
    font-size: var(--tamano-md);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-pieza__titulo--vacio {
    color: var(--texto-tenue);
    font-style: italic;
}

.cal-pieza__tema {
    margin-top: 2px;
    font-size: var(--tamano-xs);
    color: var(--texto-tenue);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-pieza__redes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex-shrink: 0;
}

.cal-pieza__red {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-pill);
    font-family: var(--fuente-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    color: var(--texto-secundario);
    white-space: nowrap;
}

.cal-pieza__red--reel    { color: var(--c-magenta); border-color: rgba(236, 72, 153, 0.3); }
.cal-pieza__red--youtube { color: var(--c-rojo);    border-color: rgba(196, 68, 52, 0.3); }
.cal-pieza__red--blog    { color: var(--c-amarillo);border-color: rgba(224, 176, 64, 0.3); }

.cal-pieza__red--publicado {
    background: var(--exito-fondo);
    color: var(--exito);
    border-color: rgba(74, 222, 128, 0.3);
}

/* ── Bloque "Sin fecha" ── */
.calendario-sin-fecha {
    padding: var(--espacio-5);
    background: var(--fondo-superficie);
    border: 1px solid var(--borde-sutil);
    border-left: 3px solid var(--c-amarillo);
    border-radius: var(--radio-md);
    margin-top: var(--espacio-5);
}

.calendario-sin-fecha__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
    padding-bottom: var(--espacio-3);
    border-bottom: 1px dashed var(--borde-sutil);
}

.calendario-sin-fecha__titulo {
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 24, "SOFT" 30, "wght" 500;
    font-size: var(--tamano-lg);
    color: var(--c-amarillo);
    margin: 0;
}

.calendario-sin-fecha__contador {
    font-size: var(--tamano-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    color: var(--texto-tenue);
}

.calendario-sin-fecha__lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
}

.cal-pieza--sin-fecha {
    border-style: dashed;
}

/* ── Responsive ── */
@media (max-width: 720px) {
    .cal-dia {
        grid-template-columns: 1fr;
        gap: var(--espacio-3);
    }
    .cal-dia__fecha {
        padding-right: 0;
        padding-bottom: var(--espacio-3);
        border-right: none;
        border-bottom: 1px dashed var(--borde-sutil);
    }
    .cal-pieza {
        grid-template-columns: 1fr;
        gap: var(--espacio-2);
    }
    .cal-pieza__redes {
        justify-content: flex-start;
    }
}


/* ── resources/css/proyecto\05-modulos\fondo-ambient.css ── */
/* ── Fondo ambient — capas de luz que respiran lentamente ────────────
   Tres blobs cromáticos posicionados con radial-gradient que flotan
   de forma muy sutil (drift 38 segundos, alternate). Da sensación de
   profundidad y "lugar" sin distraer del trabajo.
   ─────────────────────────────────────────────────────────────────── */

/* Aplicar al body via dashboard (que tiene min-height: 100vh) */
.dashboard::before,
.dashboard::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Capa 1: blobs cromáticos warm — naranja arriba-izq, violeta abajo-der, ámbar central */
.dashboard::before {
    background:
        radial-gradient(circle 720px at 14% 18%, rgba(242, 106, 34, 0.085), transparent 65%),
        radial-gradient(circle 820px at 86% 82%, rgba(167, 139, 250, 0.055), transparent 68%),
        radial-gradient(circle 900px at 50% 50%, rgba(224, 176, 64, 0.035), transparent 70%);
    animation: ambient-drift 38s var(--easing-suave) infinite alternate;
}

/* Capa 2: blobs más sutiles, contramovimiento (efecto parallax) */
.dashboard::after {
    background:
        radial-gradient(circle 600px at 72% 22%, rgba(94, 234, 212, 0.04), transparent 65%),
        radial-gradient(circle 540px at 22% 78%, rgba(242, 106, 34, 0.05), transparent 65%);
    animation: ambient-drift-reverse 52s var(--easing-suave) infinite alternate;
    opacity: 0.85;
}

/* El contenido del dashboard tiene que estar arriba de las capas ambient */
.dashboard__header,
.dashboard__contenido {
    position: relative;
    z-index: 1;
}

/* La sidebar siempre arriba de todo el contenido (cuando se expande
   se desborda sobre el área del header/contenido y necesita capturar el
   hover sin que esos elementos se metan en el medio). */
.dashboard__sidebar {
    z-index: 100;
}

@keyframes ambient-drift {
    0%   { transform: translate3d(0%,   0%,    0) rotate(0deg);    }
    25%  { transform: translate3d(2%,   -1.5%, 0) rotate(0.6deg);  }
    50%  { transform: translate3d(-1%,  2%,    0) rotate(-0.4deg); }
    75%  { transform: translate3d(1.5%, 1%,    0) rotate(0.3deg);  }
    100% { transform: translate3d(0.5%, -1%,   0) rotate(-0.2deg); }
}

@keyframes ambient-drift-reverse {
    0%   { transform: translate3d(0%,  0%,    0) scale(1);    }
    50%  { transform: translate3d(-2%, 1.5%,  0) scale(1.05); }
    100% { transform: translate3d(1%,  -1%,   0) scale(0.98); }
}

/* Cuando el usuario prefiere movimiento reducido (a11y), desactivamos */
@media (prefers-reduced-motion: reduce) {
    .dashboard::before,
    .dashboard::after {
        animation: none;
    }
}


/* ── resources/css/proyecto\05-modulos\fondo-shapes.css ── */
/* ── Capa de figuras geométricas — versión performance ───────────────
   Antes cada shape tenía 2-3 animations simultáneas (drift + rotate +
   pulse). El navegador animaba 17 × 3 = 51 timelines en paralelo
   sobre transform+opacity+box-shadow → scroll trabado.

   Ahora: 8 shapes, cada una con UNA animación principal (drift O
   rotate, no las dos), duraciones largas para que no parezca apurado.
   ─────────────────────────────────────────────────────────────────── */

.fondo-shapes {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    overflow: visible;
}

.fondo-shape {
    fill: none;
    stroke: rgba(242, 106, 34, 0.32);
    stroke-width: 1.5;
    transform-origin: center;
    transform-box: fill-box;
}

/* ── Círculos cromáticos rellenos (los más grandes — el "ambient" warm) ── */
.fondo-shape--circulo-1 {
    fill: rgba(242, 106, 34, 0.10);
    stroke: rgba(242, 106, 34, 0.35);
    transform-origin: 280px 220px;
    animation: shape-float-a 38s ease-in-out infinite alternate;
}

.fondo-shape--circulo-2 {
    fill: rgba(167, 139, 250, 0.09);
    stroke: rgba(167, 139, 250, 0.32);
    transform-origin: 1620px 780px;
    animation: shape-float-b 44s ease-in-out infinite alternate;
}

.fondo-shape--circulo-3 {
    fill: rgba(224, 176, 64, 0.10);
    stroke: rgba(224, 176, 64, 0.40);
    transform-origin: 1300px 180px;
    animation: shape-float-c 32s ease-in-out infinite alternate;
}

.fondo-shape--circulo-4 {
    fill: rgba(94, 234, 212, 0.08);
    stroke: rgba(94, 234, 212, 0.40);
    transform-origin: 540px 320px;
    animation: shape-float-a 36s ease-in-out 4s infinite alternate;
}

/* ── Hexágono — sólo flota suave, sin rotación constante ── */
.fondo-shape--hex {
    stroke: rgba(94, 234, 212, 0.42);
    stroke-width: 1.8;
    transform-origin: 1440px 500px;
    animation: shape-float-c 40s ease-in-out 2s infinite alternate;
}

/* ── Triángulo grande — flota ── */
.fondo-shape--tri-big {
    stroke: rgba(236, 72, 153, 0.40);
    stroke-width: 1.7;
    transform-origin: 1040px 120px;
    animation: shape-float-b 36s ease-in-out 1s infinite alternate;
}

/* ── Cruz X — única que rota lenta (60s) ── */
.fondo-shape--x-1 {
    stroke: rgba(242, 106, 34, 0.65);
    stroke-width: 2.2;
    stroke-linecap: round;
    animation: shape-spin 60s linear infinite;
}

/* ── Estrella — única que pulsa (lenta) ── */
.fondo-shape--star {
    stroke: rgba(167, 139, 250, 0.60);
    stroke-width: 2;
    stroke-linecap: round;
    transform-origin: 1140px 660px;
    animation: shape-pulse 14s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────────
   Keyframes — drift suave (transform translate, GPU-amigable)
   ───────────────────────────────────────────────────────────────────── */

@keyframes shape-float-a {
    0%   { transform: translate3d(0%,   0%,    0); }
    50%  { transform: translate3d(2.5%, -1.5%, 0); }
    100% { transform: translate3d(-1%,  2%,    0); }
}

@keyframes shape-float-b {
    0%   { transform: translate3d(0%,   0%,    0); }
    50%  { transform: translate3d(-2%,  1.5%,  0); }
    100% { transform: translate3d(1.5%, -1.5%, 0); }
}

@keyframes shape-float-c {
    0%   { transform: translate3d(0%,    0%,   0); }
    50%  { transform: translate3d(1.5%,  1.5%, 0); }
    100% { transform: translate3d(-1.5%, -1%,  0); }
}

@keyframes shape-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes shape-pulse {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.6;  transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .fondo-shape { animation: none !important; }
}

@media (max-width: 720px) {
    .fondo-shapes { opacity: 0.5; }
}


/* ── resources/css/proyecto\05-modulos\glassmorphism.css ── */
/* ── Glassmorphism — versión performance-friendly ─────────────────────
   El blur (backdrop-filter) sólo se aplica a unos pocos contenedores
   grandes y "principales" (modal, sidebar, header, plan-doc, palette,
   tarjeta-seccion, cards principales). Los muchos elementos chiquitos
   (tiles, piezas, días del calendario, inputs, tablas, badges, etc.)
   usan background opaco — visualmente similar, pero sin costo GPU.

   Razón: backdrop-filter recompone cada vez que el fondo (animado)
   cambia. Si hay 30+ elementos con blur sobre un fondo en movimiento,
   el scroll y las animaciones se traban.
   ─────────────────────────────────────────────────────────────────── */

:root {
    --blur-glass: 14px;
    --blur-glass-fuerte: 22px;
}

/* ──────────────────────────────────────────────────────────────────
   CON blur (pocos, grandes, y de impacto visual)
   ────────────────────────────────────────────────────────────────── */

.modal {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
        rgba(31, 24, 19, 0.82) !important;
    backdrop-filter: blur(var(--blur-glass-fuerte)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--blur-glass-fuerte)) saturate(140%);
}

.modal-fondo {
    background: rgba(8, 6, 4, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.palette {
    background: rgba(31, 24, 19, 0.82) !important;
    backdrop-filter: blur(var(--blur-glass-fuerte)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--blur-glass-fuerte)) saturate(140%);
}

.palette-fondo {
    background: rgba(8, 6, 4, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.sidebar-nav {
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.dashboard__header {
    backdrop-filter: blur(2px) saturate(110%);
    -webkit-backdrop-filter: blur(2px) saturate(110%);
}

.plan-doc {
    position: relative;
    padding: var(--espacio-7) var(--espacio-7);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 70%),
        rgba(31, 24, 19, 0.72);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-lg);
    backdrop-filter: blur(var(--blur-glass)) saturate(115%);
    -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(115%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 12px 36px -16px rgba(0, 0, 0, 0.45);
}

/* ──────────────────────────────────────────────────────────────────
   SIN blur (mayoría) — background opaco que simula el efecto visual
   ────────────────────────────────────────────────────────────────── */

.tarjeta-seccion {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 60%),
        rgba(31, 24, 19, 0.82) !important;
}

.idea-card,
.plan-card,
.tema-card,
.sesion-card,
.kpi-card {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
        rgba(31, 24, 19, 0.78);
}

.cal-dia {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
        rgba(31, 24, 19, 0.82);
}

.cal-dia--hoy {
    background:
        linear-gradient(90deg, rgba(242, 106, 34, 0.10) 0%, transparent 30%),
        rgba(31, 24, 19, 0.82);
}

.cal-pieza {
    background: rgba(0, 0, 0, 0.55);
}

.calendario-sin-fecha {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
        rgba(31, 24, 19, 0.78);
}

.calendario-filtros {
    background: rgba(31, 24, 19, 0.78) !important;
}

.plan-subnav {
    background: rgba(31, 24, 19, 0.82) !important;
}

.tabla-datos__vacio {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
        rgba(31, 24, 19, 0.70);
}

.ideas-tabs {
    background: rgba(31, 24, 19, 0.78);
}

.toast {
    background: rgba(31, 24, 19, 0.92);
}

.plan-doc table {
    background: rgba(31, 24, 19, 0.62) !important;
}

.pieza-tile {
    background: rgba(0, 0, 0, 0.48) !important;
}

.busqueda-live {
    background: rgba(31, 24, 19, 0.78) !important;
}

.formulario__seccion {
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-md);
    padding: var(--espacio-5);
}

.quill-editor {
    background: rgba(0, 0, 0, 0.48) !important;
}

/* Cajas .ancla / .verde-box / .bandera dentro del plan: ya tienen
   background sólido propio, no las tocamos acá. */


/* ── resources/css/proyecto\05-modulos\ideas.css ── */
/* ── Lluvia de ideas — Warm Editorial ──────────────────────────── */

/* ── Tabs de filtro por estado ── */

.ideas-tabs {
    display: flex;
    gap: var(--espacio-1);
    margin-bottom: var(--espacio-6);
    padding: 6px;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-lg);
    flex-wrap: wrap;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.30);
}

.ideas-tabs__item {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-2) var(--espacio-4);
    color: var(--texto-secundario);
    text-decoration: none;
    border-radius: var(--radio-md);
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    border: 1px solid transparent;
    transition:
        background var(--duracion-rapida) var(--easing-estandar),
        color var(--duracion-rapida) var(--easing-estandar),
        border-color var(--duracion-rapida) var(--easing-estandar);
}

.ideas-tabs__item:hover {
    color: var(--texto);
    background: rgba(255, 255, 255, 0.04);
}

.ideas-tabs__item--activo {
    background: rgba(242, 106, 34, 0.18);
    color: var(--acento);
    border-color: rgba(242, 106, 34, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ideas-tabs__contador {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: rgba(0, 0, 0, 0.40);
    border-radius: var(--radio-pill);
    font-family: var(--fuente-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0;
}

.ideas-tabs__item--activo .ideas-tabs__contador {
    background: rgba(242, 106, 34, 0.30);
    color: var(--acento);
}

/* ── Idea card ── */

.idea-card {
    padding: var(--espacio-5) var(--espacio-6);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
        var(--fondo-superficie);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-papel);
    transition:
        border-color var(--duracion-rapida) var(--easing-estandar),
        box-shadow var(--duracion-rapida) var(--easing-estandar),
        transform var(--duracion-rapida) var(--easing-resorte);
}

.idea-card:hover {
    border-color: var(--borde);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.50);
    transform: translateY(-2px);
}

.idea-card--convertida {
    border-color: rgba(74, 222, 128, 0.40);
}

.idea-card--convertida:hover {
    border-color: rgba(74, 222, 128, 0.60);
    box-shadow: 0 18px 40px -16px rgba(74, 222, 128, 0.18);
}


/* ── resources/css/proyecto\05-modulos\plan.css ── */
/* ── Plan / Wiki estratégica — adaptación Warm Editorial ──────────────
   Las clases viejas (.ancla, .caja, .punto, .semana, .vacio, .hito,
   .fechas, .nota, .bandera, .verde-box, .escenario.a/b/c, .copy-box,
   .bloque1-4, .toc) están scopeadas bajo .plan-doc para no contaminar
   el resto del sistema. Adaptan tipografía/colores al tema actual.
   ───────────────────────────────────────────────────────────────────── */

/* ── Sub-nav horizontal: navegación entre secciones del plan ── */
.plan-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--espacio-5);
    padding: var(--espacio-3) var(--espacio-4);
    background: var(--fondo-superficie);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-md);
}

.plan-subnav__link {
    padding: 4px 12px;
    background: transparent;
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-pill);
    color: var(--texto-secundario);
    font-size: var(--tamano-sm);
    text-decoration: none;
    transition:
        background var(--duracion-rapida) var(--easing-estandar),
        border-color var(--duracion-rapida) var(--easing-estandar),
        color var(--duracion-rapida) var(--easing-estandar);
}

.plan-subnav__link:hover {
    background: rgba(242, 106, 34, 0.10);
    border-color: var(--acento-600);
    color: var(--acento-100);
}

.plan-subnav__link--activo {
    background: var(--acento);
    border-color: var(--acento);
    color: var(--texto-sobre-acento);
    font-weight: 500;
}

/* ── Grid de cards del plan/index ── */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--espacio-4);
}

.plan-card {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
    padding: var(--espacio-5);
    background: var(--fondo-superficie);
    border: 1px solid var(--borde-sutil);
    border-left: 3px solid var(--acento);
    border-radius: var(--radio-md);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transform-style: preserve-3d;
    transition:
        background var(--duracion-rapida) var(--easing-estandar),
        border-color var(--duracion-rapida) var(--easing-estandar),
        transform var(--duracion-media) var(--easing-suave),
        box-shadow var(--duracion-media) var(--easing-suave);
}

/* Spotlight que sigue al hover — gradient radial sutil */
.plan-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 200px at var(--mx, 50%) var(--my, 50%),
        rgba(242, 106, 34, 0.10) 0%,
        transparent 60%);
    opacity: 0;
    transition: opacity var(--duracion-media) var(--easing-estandar);
    pointer-events: none;
    z-index: -1;
}

.plan-card > * { position: relative; z-index: 1; }

.plan-card:hover {
    background: var(--fondo-elevado);
    border-color: var(--acento-600);
    transform: translateY(-4px) rotateX(2deg);
    box-shadow:
        0 24px 48px -20px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(242, 106, 34, 0.25);
}

.plan-card:hover::before {
    opacity: 1;
}

.plan-card__icono {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: rgba(242, 106, 34, 0.10);
    border-radius: var(--radio-md);
    color: var(--acento);
}

.plan-card__titulo {
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 18, "SOFT" 30, "wght" 600;
    font-size: var(--tamano-lg);
    color: var(--texto);
    margin: 0;
    line-height: 1.2;
}

.plan-card__eyebrow {
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    color: var(--texto-tenue);
}

/* ─────────────────────────────────────────────────────────────────────
   Contenido del documento — tipografía editorial cómoda para leer
   ───────────────────────────────────────────────────────────────────── */

.plan-doc {
    max-width: 920px;
    margin: 0 auto;
    color: var(--texto);
    font-size: var(--tamano-md);
    line-height: var(--interlineado-normal);
}

/* ── Drop cap editorial — primera letra de un párrafo introductorio ──
   Se aplica al primer <p> que viene inmediatamente después del primer
   <h3> de cada documento. Es la inicial Fraunces italic en naranja. */
.plan-doc > h3:first-child + p:first-letter,
.plan-doc > h3:first-of-type + p:first-letter {
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 600;
    font-style: italic;
    font-size: 5.2rem;
    line-height: 0.82;
    float: left;
    margin: 6px 14px 0 0;
    color: var(--acento);
    text-shadow: 0 2px 24px rgba(242, 106, 34, 0.22);
    letter-spacing: -0.02em;
}

.plan-doc h3 {
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 32, "SOFT" 30, "wght" 600;
    font-size: var(--tamano-2xl);
    color: var(--texto);
    margin: var(--espacio-7) 0 var(--espacio-4);
    letter-spacing: -0.015em;
    line-height: 1.2;
    padding-bottom: var(--espacio-2);
    border-bottom: 1px solid var(--borde-sutil);
}

.plan-doc h3:first-child {
    margin-top: 0;
}

.plan-doc h4 {
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 22, "SOFT" 30, "wght" 600;
    font-size: var(--tamano-lg);
    color: var(--acento);
    margin: var(--espacio-5) 0 var(--espacio-3);
}

.plan-doc p {
    margin: 0 0 var(--espacio-4);
}

/* ── Asterismo: separador editorial tipo libro impreso ──
   Reemplaza el <hr> simple por una marca tipográfica centrada. ⁂ es el
   asterismo Unicode usado en libros antiguos para indicar separaciones. */
.plan-doc hr {
    border: none;
    height: 1px;
    background: none;
    margin: var(--espacio-7) 0;
    position: relative;
    text-align: center;
    overflow: visible;
}

.plan-doc hr::before {
    content: '⁂';
    display: inline-block;
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 24, "SOFT" 50, "wght" 400;
    font-size: 1.5rem;
    color: var(--acento);
    letter-spacing: 0.5em;
    padding: 0 var(--espacio-3);
    position: relative;
    top: -14px;
    background: transparent;
}

.plan-doc hr::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--borde-sutil) 25%, var(--borde-sutil) 75%, transparent);
    z-index: -1;
}

.plan-doc a {
    color: var(--acento);
    text-decoration: underline;
    text-decoration-color: rgba(242, 106, 34, 0.3);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--duracion-rapida);
}

.plan-doc a:hover {
    text-decoration-color: var(--acento);
}

.plan-doc code {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-sm);
    padding: 1px 6px;
    font-family: var(--fuente-mono);
    font-size: 0.85em;
    color: var(--acento-100);
}

.plan-doc ul,
.plan-doc ol {
    margin: 0 0 var(--espacio-4);
    padding-left: var(--espacio-5);
}

.plan-doc ul li,
.plan-doc ol li {
    margin-bottom: var(--espacio-2);
}

.plan-doc ul ul,
.plan-doc ol ol,
.plan-doc ul ol,
.plan-doc ol ul {
    margin-top: var(--espacio-2);
    margin-bottom: 0;
}

/* ── Tabla del plan ── */
.plan-doc table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--espacio-4) 0;
    background: var(--fondo-superficie);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-md);
    overflow: hidden;
    font-size: var(--tamano-sm);
}

.plan-doc table caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 var(--espacio-2);
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    color: var(--texto-tenue);
}

.plan-doc th {
    background: var(--fondo-elevado);
    color: var(--acento-100);
    text-align: left;
    padding: var(--espacio-3) var(--espacio-4);
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    border-bottom: 1px solid var(--borde);
}

.plan-doc td {
    padding: var(--espacio-3) var(--espacio-4);
    vertical-align: top;
    border-bottom: 1px solid var(--borde-sutil);
}

.plan-doc tr:last-child td {
    border-bottom: none;
}

.plan-doc tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* ── Clases utilitarias heredadas del sistema viejo ── */

/* .ancla — pull-quote editorial con comillas decorativas grandes */
.plan-doc .ancla {
    margin: var(--espacio-6) auto;
    padding: var(--espacio-6) var(--espacio-7);
    max-width: 80%;
    background:
        radial-gradient(ellipse 70% 100% at 50% 0%,
            rgba(242, 106, 34, 0.08) 0%,
            transparent 70%),
        rgba(0, 0, 0, 0.22);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-lg);
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 32, "SOFT" 50, "wght" 500;
    font-size: var(--tamano-xl);
    font-style: italic;
    text-align: center;
    line-height: 1.35;
    color: var(--texto);
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 12px 32px -16px rgba(0, 0, 0, 0.5);
}

/* Comillas decorativas gigantes en las esquinas */
.plan-doc .ancla::before,
.plan-doc .ancla::after {
    font-family: var(--fuente-display);
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 600;
    font-size: 4rem;
    line-height: 1;
    color: var(--acento);
    opacity: 0.5;
    position: absolute;
    pointer-events: none;
}
.plan-doc .ancla::before {
    content: '\201C';
    top: -8px;
    left: 12px;
}
.plan-doc .ancla::after {
    content: '\201D';
    bottom: -32px;
    right: 12px;
}

.plan-doc .ancla.verde {
    background: var(--exito-fondo);
    border-left-color: var(--exito);
}

/* .caja — lista enmarcada */
.plan-doc ul.caja {
    padding: var(--espacio-4) var(--espacio-5);
    margin: var(--espacio-4) 0;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-md);
    list-style: none;
}

.plan-doc ul.caja li {
    padding-left: var(--espacio-4);
    position: relative;
}

.plan-doc ul.caja li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--acento);
    font-family: var(--fuente-display);
    font-weight: 600;
}

/* .punto — etiqueta destacada al inicio de un ítem */
.plan-doc .punto {
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    color: var(--acento);
    font-weight: 600;
    margin-right: 4px;
}

/* .bandera — bloque de advertencia "NO se hace" */
.plan-doc .bandera {
    margin: var(--espacio-5) 0;
    padding: var(--espacio-5);
    background: rgba(196, 68, 52, 0.08);
    border: 1px solid rgba(196, 68, 52, 0.3);
    border-left: 3px solid var(--c-rojo);
    border-radius: var(--radio-md);
}

.plan-doc .bandera h4 {
    color: var(--c-rojo);
    margin-top: 0;
}

.plan-doc .bandera ul {
    margin-bottom: 0;
}

/* .verde-box — bloque de "SÍ se hace" / positivo */
.plan-doc .verde-box {
    margin: var(--espacio-5) 0;
    padding: var(--espacio-5);
    background: var(--exito-fondo);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-left: 3px solid var(--exito);
    border-radius: var(--radio-md);
}

.plan-doc .verde-box h4 {
    color: var(--exito);
    margin-top: 0;
}

.plan-doc .verde-box ul,
.plan-doc .verde-box p:last-child {
    margin-bottom: 0;
}

/* .semana — celda de tabla con nombre de semana/día */
.plan-doc td.semana {
    background: rgba(242, 106, 34, 0.06);
    font-family: var(--fuente-mono);
    font-weight: 600;
    color: var(--acento);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
    font-size: var(--tamano-xs);
    white-space: nowrap;
}

/* .fechas — celda de tabla con rango/fecha */
.plan-doc td.fechas,
.plan-doc .fechas {
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    color: var(--texto-secundario);
}

/* .vacio — celda con valor "nulo" o descartado */
.plan-doc td.vacio,
.plan-doc .vacio {
    color: var(--texto-tenue);
    font-style: italic;
}

/* .hito — celda o fila destacada como hito */
.plan-doc td.hito,
.plan-doc tr.hito td,
.plan-doc .hito {
    background: rgba(242, 106, 34, 0.12);
    color: var(--acento);
    font-weight: 500;
}

.plan-doc tr.hito th,
.plan-doc tr.hito td {
    background: var(--acento);
    color: var(--texto-sobre-acento);
}

/* .nota — texto pequeño tipo metadata */
.plan-doc .nota,
.plan-doc p.nota {
    font-family: var(--fuente-mono);
    font-size: var(--tamano-xs);
    color: var(--texto-tenue);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono-caps);
}

/* .bloque1-4 — celdas de tabla con tono según fase del cronograma */
.plan-doc td.bloque1 { background: rgba(94, 234, 212, 0.05); }
.plan-doc td.bloque2 { background: rgba(59, 130, 246, 0.05); }
.plan-doc td.bloque3 { background: rgba(242, 106, 34, 0.05); }
.plan-doc td.bloque4 { background: rgba(167, 139, 250, 0.05); }

/* .escenario .a/.b/.c — bloques de los 3 escenarios de febrero */
.plan-doc .escenario {
    margin: var(--espacio-5) 0;
    padding: var(--espacio-5);
    background: var(--fondo-superficie);
    border: 1px solid var(--borde-sutil);
    border-left: 3px solid var(--borde);
    border-radius: var(--radio-md);
}

.plan-doc .escenario h4 {
    margin-top: 0;
    color: var(--texto);
}

.plan-doc .escenario.a { border-left-color: var(--exito); }
.plan-doc .escenario.a h4 { color: var(--exito); }
.plan-doc .escenario.b { border-left-color: var(--c-amarillo); }
.plan-doc .escenario.b h4 { color: var(--c-amarillo); }
.plan-doc .escenario.c { border-left-color: var(--c-rojo); }
.plan-doc .escenario.c h4 { color: var(--c-rojo); }

/* .copy-box — caja de texto literal (copy reproducible) */
.plan-doc .copy-box {
    margin: var(--espacio-4) 0;
    padding: var(--espacio-5);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--borde);
    border-left: 3px solid var(--acento-700);
    border-radius: var(--radio-md);
    font-family: var(--fuente-mono);
    font-size: var(--tamano-sm);
    line-height: var(--interlineado-relajado);
    white-space: pre-wrap;
    color: var(--texto);
}

/* .toc — tabla de contenidos en línea */
.plan-doc .toc {
    margin: var(--espacio-4) 0;
    padding: var(--espacio-3) var(--espacio-4);
    background: var(--fondo-superficie);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-md);
    font-family: var(--fuente-mono);
    font-size: var(--tamano-sm);
    text-align: center;
}

@media (max-width: 720px) {
    .plan-doc table { font-size: var(--tamano-xs); }
    .plan-doc th, .plan-doc td { padding: var(--espacio-2) var(--espacio-3); }
}


/* ── resources/css/proyecto\05-modulos\sidebar-nav.css ── */
/* ── Sidebar navigation — Warm Editorial ───────────────────────────────
   El sidebar es la zona MÁS oscura del layout (ancla a la izquierda).
   Colapsado a 68px, se expande a 240px en hover con micro-interacciones
   refinadas (no animación brusca de toda la barra).
   ─────────────────────────────────────────────────────────────────────── */

.sidebar-nav {
    position: relative;
    height: 100%;
    width: var(--sidebar-ancho);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: var(--espacio-4) 0;
    background:
        linear-gradient(180deg,
            rgba(242, 106, 34, 0.04) 0%,
            transparent 30%,
            transparent 70%,
            rgba(242, 106, 34, 0.04) 100%
        ),
        var(--fondo-sidebar);
    border-right: 1px solid var(--borde-sutil);
    overflow: hidden;
    /* Colapso con delay de gracia 120ms: si el mouse sale y vuelve a entrar
       rápido (gesto accidental), la sidebar no llega a cerrarse. */
    transition:
        width 280ms var(--easing-dramatico) 120ms,
        box-shadow 280ms var(--easing-suave) 120ms;
}

.sidebar-nav:hover,
.sidebar-nav:focus-within {
    /* Al expandir: sin delay y un toque más rápido. */
    transition:
        width 240ms var(--easing-dramatico) 0ms,
        box-shadow 240ms var(--easing-suave) 0ms;
}

/* Una hairline vertical de acento al ras del borde derecho */
.sidebar-nav::after {
    content: '';
    position: absolute;
    top: 18%;
    bottom: 18%;
    right: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--acento) 50%, transparent);
    opacity: 0.25;
    pointer-events: none;
}

.sidebar-nav:hover,
.sidebar-nav:focus-within {
    width: var(--sidebar-ancho-expandido);
    box-shadow: 28px 0 48px -16px rgba(0, 0, 0, 0.55);
}

/* ── Marca ── */

.sidebar-nav__marca {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-2) 0;
    padding-left: 12px;
    margin-bottom: var(--espacio-5);
    text-decoration: none;
    color: var(--texto);
    flex-shrink: 0;
    transition: padding-left var(--duracion-media) var(--easing-suave);
}

.sidebar-nav:hover .sidebar-nav__marca,
.sidebar-nav:focus-within .sidebar-nav__marca {
    padding-left: 18px;
}

.sidebar-nav__logo {
    width: 36px;
    height: 36px;
    border-radius: var(--radio-md);
    object-fit: cover;
    object-position: center;
    flex-shrink: 0;
    box-shadow:
        0 0 28px rgba(242, 106, 34, 0.35),
        0 0 0 1px rgba(242, 106, 34, 0.22);
    transition:
        width var(--duracion-media) var(--easing-suave),
        height var(--duracion-media) var(--easing-suave),
        box-shadow var(--duracion-media) var(--easing-suave),
        transform var(--duracion-media) var(--easing-resorte);
    animation: sidebar-logo-pulse 4.5s ease-in-out infinite;
}

@keyframes sidebar-logo-pulse {
    0%, 100% {
        box-shadow:
            0 0 28px rgba(242, 106, 34, 0.35),
            0 0 0 1px rgba(242, 106, 34, 0.22);
    }
    50% {
        box-shadow:
            0 0 42px rgba(242, 106, 34, 0.55),
            0 0 0 1px rgba(242, 106, 34, 0.40);
    }
}

.sidebar-nav:hover .sidebar-nav__logo,
.sidebar-nav:focus-within .sidebar-nav__logo {
    width: 42px;
    height: 42px;
    transform: rotate(-2deg);
    box-shadow:
        0 0 42px rgba(242, 106, 34, 0.55),
        0 0 0 1px rgba(242, 106, 34, 0.40);
}

.sidebar-nav__marca:hover .sidebar-nav__logo {
    transform: rotate(3deg) scale(1.04);
}

.sidebar-nav__marca-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-8px);
    transition:
        opacity var(--duracion-media) var(--easing-estandar) 50ms,
        transform var(--duracion-media) var(--easing-suave) 50ms;
    pointer-events: none;
}

.sidebar-nav:hover .sidebar-nav__marca-texto,
.sidebar-nav:focus-within .sidebar-nav__marca-texto {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.sidebar-nav__marca-titulo {
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 18, "SOFT" 30, "wght" 600;
    font-size: var(--tamano-md);
    color: var(--texto);
    line-height: 1;
}

.sidebar-nav__marca-sub {
    font-family: var(--fuente-mono);
    font-size: 0.6875rem;  /* 11px */
    color: var(--texto-tenue);
    letter-spacing: var(--tracking-mono-caps);
    text-transform: uppercase;
    margin-top: 4px;
}

/* ── Links ── */

.sidebar-nav__links {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    width: 100%;
}

.sidebar-nav__link {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    width: 100%;
    padding: var(--espacio-3) 20px;
    text-decoration: none;
    color: var(--texto-secundario);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--fuente-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
    transition:
        color var(--duracion-rapida) var(--easing-estandar),
        padding-left var(--duracion-media) var(--easing-suave);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Swipe naranja desde la izquierda al hover */
.sidebar-nav__link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(242, 106, 34, 0.16) 0%,
        rgba(242, 106, 34, 0.05) 60%,
        transparent 100%);
    transform: translateX(-100%);
    transition: transform var(--duracion-media) var(--easing-suave);
    z-index: -1;
}

/* Barra vertical naranja que aparece al hover/activo */
.sidebar-nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    background: var(--acento);
    border-radius: 0 var(--radio-pill) var(--radio-pill) 0;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform var(--duracion-media) var(--easing-resorte);
    box-shadow: 0 0 12px rgba(242, 106, 34, 0.55);
}

.sidebar-nav__link:hover {
    color: var(--texto);
}
.sidebar-nav__link:hover::before {
    transform: translateX(0);
}
.sidebar-nav__link:hover::after {
    transform: scaleY(1);
}

.sidebar-nav__link--activo {
    color: var(--texto);
}
.sidebar-nav__link--activo::before {
    transform: translateX(0);
}
.sidebar-nav__link--activo::after {
    transform: scaleY(1);
}

/* El shift de 4px en padding-left sólo aplica cuando la sidebar está
   expandida (con hover/focus). En estado colapsado los íconos quedan
   centrados en los 60px del wrapper. */
.sidebar-nav:hover  .sidebar-nav__link:hover,
.sidebar-nav:focus-within .sidebar-nav__link:hover,
.sidebar-nav:hover  .sidebar-nav__link--activo,
.sidebar-nav:focus-within .sidebar-nav__link--activo {
    padding-left: 24px;
}

.sidebar-nav__link--activo .sidebar-nav__icono { color: var(--acento); }

.sidebar-nav__icono {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: var(--texto-tenue);
    transition:
        color var(--duracion-rapida) var(--easing-estandar),
        transform var(--duracion-media) var(--easing-resorte);
}

.sidebar-nav__link:hover .sidebar-nav__icono {
    color: var(--acento);
    transform: scale(1.1) rotate(-3deg);
}

.sidebar-nav__link--activo .sidebar-nav__icono {
    transform: scale(1.05);
}

.sidebar-nav__icono svg {
    width: 20px;
    height: 20px;
    display: block;
}

.sidebar-nav__label {
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-4px);
    transition:
        opacity var(--duracion-media) var(--easing-estandar) 40ms,
        transform var(--duracion-media) var(--easing-suave) 40ms;
}

.sidebar-nav:hover .sidebar-nav__label,
.sidebar-nav:focus-within .sidebar-nav__label {
    opacity: 1;
    transform: translateX(0);
}

/* ── Pie (perfil + logout) ── */

.sidebar-nav__pie {
    width: 100%;
    border-top: 1px solid var(--borde-sutil);
    padding-top: var(--espacio-3);
    margin-top: auto;
    display: flex;
    flex-direction: column;
}

.sidebar-nav__pie form {
    width: 100%;
    margin: 0;
}


/* ── resources/css/proyecto\05-modulos\temas.css ── */
/* ── Temáticas — Warm Editorial ────────────────────────────────────
   Cada tema-card es una "página" del manuscrito. El numeral va GRANDE
   en serif itálico al costado, como una tipografía de revista. Hover
   con leve rotación (como levantar un naipe de la mesa).
   ───────────────────────────────────────────────────────────────── */

.temas-lista {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-5);
}

.tema-card {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
        var(--fondo-superficie);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-lg);
    overflow: hidden;
    box-shadow: var(--sombra-papel);
    transition:
        border-color var(--duracion-media) var(--easing-suave),
        box-shadow var(--duracion-media) var(--easing-suave),
        transform var(--duracion-rapida) var(--easing-resorte);
    position: relative;
}

.tema-card:hover {
    border-color: var(--borde);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 18px 40px -16px rgba(0, 0, 0, 0.5);
}

.tema-card[data-acordeon-abierto] {
    border-color: rgba(242, 106, 34, 0.4);
    background:
        radial-gradient(ellipse 800px 240px at 0% 0%, rgba(242, 106, 34, 0.10), transparent 60%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 60%),
        var(--fondo-superficie);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 24px 48px -12px rgba(0, 0, 0, 0.55),
        0 0 36px rgba(242, 106, 34, 0.10);
}

/* Línea acento al costado izquierdo cuando está abierto */
.tema-card[data-acordeon-abierto]::before {
    content: '';
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--acento), transparent);
    border-radius: 0 var(--radio-pill) var(--radio-pill) 0;
}

/* ── Cabecera ── */

.tema-card__cabecera {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: var(--espacio-5);
    padding: var(--espacio-5) var(--espacio-6);
    cursor: pointer;
    user-select: none;
    position: relative;
}

.tema-card__numeral {
    font-family: var(--fuente-display);
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 400;
    font-size: var(--tamano-4xl);
    line-height: 1;
    color: var(--texto-tenue);
    font-feature-settings: "lnum" 1;
    transition: color var(--duracion-media) var(--easing-suave);
    min-width: 64px;
    text-align: right;
    letter-spacing: -0.02em;
    cursor: grab;
    user-select: none;
}

.tema-card__numeral:active {
    cursor: grabbing;
}

.tema-card--ghost {
    opacity: 0.3;
    background: rgba(242, 106, 34, 0.10);
    border-color: rgba(242, 106, 34, 0.45);
}

.tema-card--chosen {
    box-shadow:
        0 0 0 1px var(--acento),
        0 24px 48px -12px rgba(0, 0, 0, 0.7),
        0 0 48px rgba(242, 106, 34, 0.20);
}

.tema-card--dragging {
    cursor: grabbing;
}

.tema-card:hover .tema-card__numeral { color: var(--texto-secundario); }

.tema-card[data-acordeon-abierto] .tema-card__numeral {
    color: var(--acento);
    font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 500;
}

.tema-card__chevron {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: var(--texto-tenue);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-md);
    transition:
        transform var(--duracion-media) var(--easing-resorte),
        color var(--duracion-rapida) var(--easing-estandar),
        border-color var(--duracion-rapida) var(--easing-estandar),
        background var(--duracion-rapida) var(--easing-estandar);
}

.tema-card__cabecera:hover .tema-card__chevron {
    color: var(--acento);
    border-color: rgba(242, 106, 34, 0.4);
}

.tema-card[data-acordeon-abierto] .tema-card__chevron {
    transform: rotate(90deg);
    color: var(--acento);
    border-color: rgba(242, 106, 34, 0.55);
    background: rgba(242, 106, 34, 0.12);
}

.tema-card__head-centro {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
}

.tema-card__titulo {
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 36, "SOFT" 30, "wght" 600;
    font-size: var(--tamano-xl);
    color: var(--texto);
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.012em;
}

.tema-card__descripcion {
    color: var(--texto-secundario);
    font-size: var(--tamano-sm);
    line-height: var(--interlineado-normal);
    margin: 0;
}

.tema-card__descripcion--vacia {
    color: var(--texto-tenue);
    font-style: italic;
    font-family: var(--fuente-display);
    font-variation-settings: "opsz" 14, "SOFT" 70;
}

.tema-card__acciones {
    display: flex;
    gap: var(--espacio-2);
    flex-shrink: 0;
    align-items: center;
}

/* ── Cuerpo (parte colapsable) ── */

.tema-card__cuerpo {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duracion-media) var(--easing-dramatico);
}

.tema-card__cuerpo-inner {
    overflow: hidden;
    min-height: 0;
}

.tema-card[data-acordeon-abierto] .tema-card__cuerpo {
    grid-template-rows: 1fr;
}

.tema-card__piezas {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--espacio-3);
    padding: var(--espacio-5) var(--espacio-6) var(--espacio-6);
    border-top: 1px dashed var(--borde-sutil);
    background: rgba(0, 0, 0, 0.15);
}

@media (max-width: 1100px) {
    .tema-card__piezas { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
    .tema-card__piezas { grid-template-columns: repeat(2, 1fr); }
    .tema-card__cabecera {
        grid-template-columns: auto 1fr auto;
        gap: var(--espacio-3);
    }
    .tema-card__numeral { display: none; }
}

/* ── Pieza-tile ── */

.pieza-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    padding: var(--espacio-4);
    min-height: 120px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radio-md);
    cursor: pointer;
    transition:
        background var(--duracion-rapida) var(--easing-estandar),
        border-color var(--duracion-rapida) var(--easing-estandar),
        transform var(--duracion-rapida) var(--easing-resorte),
        box-shadow var(--duracion-rapida) var(--easing-estandar);
}

.pieza-tile:hover {
    background: rgba(242, 106, 34, 0.08);
    border-color: rgba(242, 106, 34, 0.45);
    transform: translateY(-3px) rotate(-0.3deg);
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.45);
}

.pieza-tile--listo {
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.40);
}

.pieza-tile--listo:hover {
    background: rgba(74, 222, 128, 0.14);
    border-color: rgba(74, 222, 128, 0.65);
    box-shadow: 0 12px 28px -8px rgba(74, 222, 128, 0.20);
}

.pieza-tile__check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    background: var(--c-verde);
    color: #0E3A20;
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(74, 222, 128, 0.45);
    animation: tile-check-pop var(--duracion-media) var(--easing-resorte);
}

.pieza-tile__check svg {
    width: 14px;
    height: 14px;
    stroke-width: 3;
}

@keyframes tile-check-pop {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.pieza-tile__badge {
    align-self: flex-start;
}

.pieza-tile__titulo {
    color: var(--texto);
    font-size: var(--tamano-sm);
    line-height: var(--interlineado-normal);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

/* ── Lista de archivos en el modal del tema ── */
.tema-archivos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
}
.tema-archivos__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-2) var(--espacio-3);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-md);
    font-size: var(--tamano-sm);
}
.tema-archivos__item:hover {
    background: rgba(242, 106, 34, 0.06);
    border-color: rgba(242, 106, 34, 0.30);
}
.tema-archivos__icono {
    font-size: 18px;
    opacity: 0.7;
}
.tema-archivos__nombre {
    font-family: var(--fuente-mono, 'JetBrains Mono', monospace);
    color: var(--texto);
    text-decoration: none;
    word-break: break-all;
}
a.tema-archivos__nombre:hover {
    color: var(--acento);
    text-decoration: underline;
}
.tema-archivos__meta {
    color: var(--texto-tenue);
    font-size: var(--tamano-xs);
    font-family: var(--fuente-mono, 'JetBrains Mono', monospace);
    white-space: nowrap;
}
.tema-archivos__vacio {
    padding: var(--espacio-3);
    color: var(--texto-tenue);
    font-style: italic;
    font-size: var(--tamano-sm);
    text-align: center;
}

.pieza-tile__titulo--vacio {
    color: var(--texto-tenue);
    font-family: var(--fuente-display);
    font-style: italic;
    font-variation-settings: "opsz" 14, "SOFT" 70;
    font-size: var(--tamano-xs);
}

.pieza-tile__estados {
    display: flex;
    gap: var(--espacio-1);
    flex-wrap: wrap;
    margin-top: auto;
}