/*
 * Tema Y-Flow sobre Radzen "standard". Referencia: docs/design-system/MASTER.md.
 * Mismo lenguaje visual que Nítida (herramienta financiera premium; referencias Linear, Mercury, Stripe):
 * fondo cálido, menú claro, un solo acento de marca y color solo donde hay algo que atender.
 * Criterio "marca ≠ UI": el naranja de marca vive en el logo; la interfaz usa el violeta como único acento.
 * Tres capas: primitivos → semánticos → Radzen. Nunca hex sueltos en componentes.
 * Preferencias del usuario: <html data-tipografia="…" data-densidad="…">.
 */

/* =====================================================================
   1. PRIMITIVOS
   ===================================================================== */

:root {
    /* Espaciado: base de 4 px */
    --yf-esp-1: 0.25rem;
    --yf-esp-2: 0.5rem;
    --yf-esp-3: 0.75rem;
    --yf-esp-4: 1rem;
    --yf-esp-5: 1.25rem;
    --yf-esp-6: 1.5rem;
    --yf-esp-8: 2rem;
    --yf-esp-10: 2.5rem;

    /* Tipografía */
    --yf-texto-2xs: 0.6875rem;   /* 11 */
    --yf-texto-xs: 0.75rem;      /* 12 */
    --yf-texto-sm: 0.8125rem;    /* 13 */
    --yf-texto-base: 0.875rem;   /* 14 */
    --yf-texto-md: 0.9375rem;    /* 15 */
    --yf-texto-lg: 1.0625rem;    /* 17 */
    --yf-texto-xl: 1.5rem;       /* 24 */
    --yf-texto-2xl: 1.625rem;    /* 26 */

    /* Radios: tarjetas 14, campos 12, chips y botones en píldora */
    --yf-radio-sm: 8px;
    --yf-radio-md: 12px;
    --yf-radio-lg: 14px;
    --yf-radio-pildora: 999px;

    /* Marca */
    --yf-violeta: #5b4391;
    --yf-violeta-hover: #4b3679;
    --yf-violeta-suave: #ece7f4;
    --yf-naranja: #ea5b1b;

    /* Familias */
    --yf-familia-manrope: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --yf-familia-familjen: 'Familjen Grotesk', 'Manrope', 'Segoe UI', sans-serif;
    --yf-familia-inter: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --yf-familia-plex: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
}

/* =====================================================================
   2. SEMÁNTICOS
   ===================================================================== */

:root {
    /* Superficies con un velo violeta casi blanco (en armonía con el acento) */
    --yf-fondo: #faf9fd;
    --yf-superficie: #ffffff;
    --yf-superficie-2: #f5f3fa;
    --yf-superficie-3: #ece8f5;
    --yf-borde: #e8e4f0;
    --yf-borde-fuerte: #d3cde2;

    /* Texto con un toque violeta para que el negro no sea duro */
    --yf-texto: #1c1a22;
    --yf-texto-secundario: #43404b;
    --yf-texto-apagado: #67636f;
    --yf-texto-tenue: #9d99a5;

    /* Acento único */
    --yf-primario: var(--yf-violeta);
    --yf-primario-hover: var(--yf-violeta-hover);
    --yf-primario-suave: var(--yf-violeta-suave);

    /* Semánticos: suaves de fondo + texto con contraste AA */
    --yf-ok: #1f7a5c;
    --yf-ok-suave: #e1f1ea;
    --yf-atencion: #9a4a0b;
    --yf-atencion-suave: #fcecdc;
    --yf-error: #b3261e;
    --yf-error-suave: #fadfdc;
    --yf-info: #2856b8;
    --yf-info-suave: #e7edfa;
    --yf-neutro-suave: #eeedf1;

    /* Menú lateral claro */
    --yf-sidebar: #f4f2fa;
    --yf-sidebar-texto: #4a4652;
    --yf-sidebar-titulo: #8e8a96;
    --yf-sidebar-activo: #ffffff;

    /* Tipografía por defecto: Manrope + Familjen Grotesk (como Nítida) */
    --yf-fuente-cuerpo: var(--yf-familia-manrope);
    --yf-fuente-titulos: var(--yf-familia-familjen);
    --yf-peso-titulos: 600;
    --yf-tracking-titulos: -0.015em;

    /* Layout */
    --yf-ancho-contenido: 1440px;
    --yf-gutter-pagina: var(--yf-esp-8);
    --yf-separacion-secciones: var(--yf-esp-5);
    --yf-alto-header: 3.5rem;

    /* Elevación */
    --yf-sombra-sm: 0 1px 2px rgba(28, 26, 34, 0.06);
    --yf-sombra-md: 0 4px 16px -4px rgba(28, 26, 34, 0.12);
    --yf-sombra-lg: 0 20px 50px -20px rgba(28, 26, 34, 0.25);
}

:root[data-tipografia="inter"] {
    --yf-fuente-cuerpo: var(--yf-familia-inter);
    --yf-fuente-titulos: var(--yf-familia-inter);
}

:root[data-tipografia="plex"] {
    --yf-fuente-cuerpo: var(--yf-familia-plex);
    --yf-fuente-titulos: var(--yf-familia-plex);
}

/* =====================================================================
   3. RADZEN
   ===================================================================== */

:root {
    --rz-primary: var(--yf-primario);
    --rz-primary-light: #735aa8;
    --rz-primary-lighter: var(--yf-primario-suave);
    --rz-primary-dark: var(--yf-primario-hover);
    --rz-primary-darker: #3f2d66;
    --rz-on-primary-lighter: var(--yf-primario-hover);

    --rz-secondary: var(--yf-naranja);
    --rz-secondary-lighter: rgba(234, 91, 27, 0.12);

    --rz-success: var(--yf-ok);
    --rz-success-lighter: var(--yf-ok-suave);
    --rz-success-dark: #186349;
    --rz-warning: var(--yf-atencion);
    --rz-warning-lighter: var(--yf-atencion-suave);
    --rz-warning-dark: #7d3c08;
    --rz-warning-darker: #6a3307;
    --rz-danger: var(--yf-error);
    --rz-danger-lighter: var(--yf-error-suave);
    --rz-danger-dark: #951f19;
    --rz-info: var(--yf-info);
    --rz-info-lighter: var(--yf-info-suave);
    --rz-info-darker: #1d3f86;

    --rz-base: var(--yf-borde-fuerte);
    --rz-base-50: var(--yf-superficie);
    --rz-base-100: var(--yf-superficie-2);
    --rz-base-200: var(--yf-superficie-3);
    --rz-base-300: var(--yf-borde);
    --rz-base-400: var(--yf-borde-fuerte);
    --rz-base-500: var(--yf-texto-tenue);
    --rz-base-600: var(--yf-texto-apagado);
    --rz-base-700: var(--yf-texto-apagado);
    --rz-base-800: var(--yf-texto-secundario);
    --rz-base-900: var(--yf-texto);
    --rz-base-background-color: var(--yf-superficie);

    --rz-text-font-family: var(--yf-fuente-cuerpo);
    --rz-body-font-size: var(--yf-texto-base);
    --rz-body-line-height: 1.5;
    --rz-text-title-color: var(--yf-texto);
    --rz-text-color: var(--yf-texto);
    --rz-text-secondary-color: var(--yf-texto-apagado);
    --rz-text-tertiary-color: var(--yf-texto-tenue);

    /* Íconos finos, al estilo Lucide (Material Symbols es una fuente variable) */
    --rz-icon-weight: 300;
    --rz-icon-grade: -25;
    --rz-icon-optical-size: 20;
    --rz-icon-fill: 0;

    --rz-border-radius: var(--yf-radio-sm);
    --rz-button-border-radius: var(--yf-radio-pildora);
    --rz-input-border-radius: var(--yf-radio-md);
    --rz-shadow-1: var(--yf-sombra-sm);

    --rz-body-background-color: var(--yf-fondo);
    --rz-layout-body-padding: 0;
    --rz-header-background-color: var(--yf-fondo);
    --rz-sidebar-background-color: var(--yf-sidebar);

    --rz-panel-menu-item-color: var(--yf-sidebar-texto);
    --rz-panel-menu-item-background-color: transparent;
    --rz-panel-menu-item-active-color: var(--yf-texto);
    --rz-panel-menu-item-active-background-color: var(--yf-sidebar-activo);
    --rz-panel-menu-item-active-indicator: transparent;
    --rz-panel-menu-item-padding-block: 0.4375rem;
    --rz-panel-menu-item-padding-inline: 0.625rem;
    --rz-panel-menu-item-line-height: 1.375rem;
    --rz-panel-menu-item-margin-inline: 0.5rem;
    --rz-panel-menu-item-margin-block: 1px;
    --rz-panel-menu-item-border-radius: var(--yf-radio-sm);

    --rz-grid-header-background-color: var(--yf-superficie-2);
    --rz-grid-header-font-size: var(--yf-texto-2xs);
    --rz-grid-header-font-weight: 600;
    --rz-grid-cell-font-size: var(--yf-texto-base);
    --rz-grid-hover-background-color: rgba(245, 243, 250, 0.8);
    --rz-grid-hover-color: inherit;
    --rz-grid-selected-background-color: rgba(236, 231, 244, 0.7);
    --rz-grid-selected-color: inherit;
    --rz-grid-stripe-background-color: var(--yf-superficie);
    --rz-grid-cell-border: 1px solid var(--yf-borde);
}

/* =====================================================================
   4. DENSIDAD (va sobre .rz-data-grid para ganarle a .rz-density-* de Radzen)
   ===================================================================== */

:root .rz-data-grid {
    --rz-grid-cell-padding: 0.5625rem 0.75rem;
    --rz-grid-cell-line-height: 1.375rem;
    --rz-grid-header-cell-padding: 0.5625rem 0;
    --rz-grid-header-title-padding-inline: 0.75rem 0;
    --rz-grid-group-header-padding: 0.5rem;
}

:root[data-densidad="compacta"] .rz-data-grid {
    --rz-grid-cell-padding: 0.3125rem 0.75rem;
    --rz-grid-cell-line-height: 1.25rem;
    --rz-grid-header-cell-padding: 0.4375rem 0;
    --rz-grid-group-header-padding: 0.3125rem;
}

:root[data-densidad="compacta"] {
    --yf-gutter-pagina: var(--yf-esp-6);
    --yf-separacion-secciones: var(--yf-esp-4);
}

/* =====================================================================
   5. BASE
   ===================================================================== */

html, body {
    font-family: var(--yf-fuente-cuerpo);
    font-size: 16px;
    line-height: 1.5;
    color: var(--yf-texto);
    background: var(--yf-fondo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    font-size: var(--yf-texto-base);
}

h1, h2, h3, .yf-titulo {
    font-family: var(--yf-fuente-titulos);
    font-weight: var(--yf-peso-titulos);
    letter-spacing: var(--yf-tracking-titulos);
    color: var(--yf-texto);
}

a {
    color: var(--yf-primario);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--yf-primario);
    outline-offset: 2px;
}

::selection {
    background: rgba(91, 67, 145, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* =====================================================================
   6. LAYOUT
   ===================================================================== */

.yf-contenido {
    max-width: var(--yf-ancho-contenido);
    margin: 0 auto;
    padding: var(--yf-esp-6) var(--yf-gutter-pagina) var(--yf-esp-10);
}

/* Encabezado superior: mismo fondo que la página, con una línea sutil */
.rz-header {
    border-bottom: 1px solid var(--yf-borde);
    box-shadow: none;
}

.yf-header {
    display: flex;
    align-items: center;
    gap: var(--yf-esp-3);
    padding: 0 var(--yf-esp-5) 0 var(--yf-esp-2);
    height: var(--yf-alto-header);
}

.yf-header__contexto {
    display: flex;
    align-items: center;
    gap: var(--yf-esp-2);
    flex: 1;
    min-width: 0;
}

.yf-header__empresa {
    display: inline-flex;
    align-items: center;
    gap: var(--yf-esp-2);
    padding: 0.3125rem 0.75rem 0.3125rem 0.625rem;
    border-radius: var(--yf-radio-pildora);
    font-size: var(--yf-texto-sm);
    font-weight: 600;
    color: var(--yf-texto);
    white-space: nowrap;
}

.yf-header__empresa .rzi {
    font-size: 1.125rem;
    color: var(--yf-texto-apagado);
}

.yf-header__cuit {
    font-weight: 500;
    color: var(--yf-texto-tenue);
    font-variant-numeric: tabular-nums;
}

.yf-avatar {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--yf-primario-suave);
    color: var(--yf-primario);
    font-size: var(--yf-texto-xs);
    font-weight: 700;
}

/* Menú lateral claro */
.rz-sidebar {
    border-right: 1px solid var(--yf-borde);
}

.yf-sidebar-contenido {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.yf-sidebar-logo {
    display: flex;
    align-items: center;
    padding: var(--yf-esp-5) var(--yf-esp-5) var(--yf-esp-3);
}

.yf-sidebar-logo img {
    height: 38px;
    width: auto;
}

.yf-sidebar-grupo {
    padding: var(--yf-esp-4) 1.125rem var(--yf-esp-1);
    font-size: var(--yf-texto-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--yf-sidebar-titulo);
}

.rz-sidebar .rz-panel-menu {
    background: transparent;
}

.rz-sidebar .rz-navigation-item {
    border: 0;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item-link {
    font-size: var(--yf-texto-sm);
    font-weight: 700;
    gap: 0.625rem;
    transition: background-color 150ms ease, color 150ms ease;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item-link .rzi {
    font-size: 1.125rem;
    color: var(--yf-texto-tenue);
}

.rz-sidebar .rz-panel-menu .rz-navigation-item-link:hover {
    background: rgba(255, 255, 255, 0.75);
    color: var(--yf-texto);
}

.rz-sidebar .rz-panel-menu .rz-navigation-item-link-active,
.rz-sidebar .rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-link {
    background: var(--yf-sidebar-activo);
    color: var(--yf-texto);
    box-shadow: var(--yf-sombra-sm);
}

.rz-sidebar .rz-panel-menu .rz-navigation-item-link-active .rzi,
.rz-sidebar .rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi {
    color: var(--yf-primario);
}

.yf-sidebar-pie {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: var(--yf-esp-2);
    padding: var(--yf-esp-3) var(--yf-esp-5);
    border-top: 1px solid var(--yf-borde);
    font-size: var(--yf-texto-xs);
    color: var(--yf-texto-apagado);
}

/* =====================================================================
   7. COMPONENTES
   ===================================================================== */

/* ---------- Números ---------- */

.yf-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    text-align: right;
    white-space: nowrap;
}

.yf-num-fuerte {
    font-weight: 600;
}

/* ---------- Encabezado de página ---------- */

.yf-pagina-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--yf-esp-4);
    margin-bottom: var(--yf-separacion-secciones);
}

.yf-pagina-encabezado h1 {
    font-size: var(--yf-texto-2xl);
    line-height: 1.2;
    margin: 0;
}

.yf-pagina-encabezado p {
    margin: var(--yf-esp-1) 0 0;
    max-width: 75ch;
    color: var(--yf-texto-apagado);
    font-size: var(--yf-texto-base);
}

.yf-seccion-titulo {
    font-family: var(--yf-fuente-cuerpo);
    font-size: var(--yf-texto-base);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 0 0 var(--yf-esp-3);
}

/* ---------- Paneles (tarjetas) ---------- */

.yf-panel {
    background: var(--yf-superficie);
    border: 1px solid var(--yf-borde);
    border-radius: var(--yf-radio-lg);
    box-shadow: var(--yf-sombra-sm);
}

.yf-panel--cuerpo {
    padding: var(--yf-esp-5);
}

.yf-panel__encabezado {
    padding: var(--yf-esp-4) var(--yf-esp-5) var(--yf-esp-3);
}

.yf-panel__encabezado .yf-seccion-titulo {
    margin: 0;
}

.yf-panel__encabezado--acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--yf-esp-3);
}

.yf-panel--pestanias {
    padding: var(--yf-esp-2) var(--yf-esp-5) var(--yf-esp-5);
}

.yf-panel--pestanias .rz-tabview-panels .rz-data-grid {
    border: 1px solid var(--yf-borde);
    border-radius: var(--yf-radio-md);
    overflow: hidden;
}

.yf-separado {
    margin-bottom: var(--yf-separacion-secciones);
}

/* Las grillas dentro de un panel respetan las esquinas redondeadas */
.yf-panel > .rz-data-grid {
    border: 0;
    border-radius: 0 0 var(--yf-radio-lg) var(--yf-radio-lg);
    background: transparent;
}

.yf-panel > .rz-data-grid:first-child {
    border-radius: var(--yf-radio-lg);
}

.yf-barra-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--yf-esp-3) var(--yf-esp-4);
    padding: var(--yf-esp-4) var(--yf-esp-5);
    margin-bottom: var(--yf-separacion-secciones);
}

.yf-barra-filtros label,
.yf-formulario label,
.yf-etiqueta {
    display: block;
    font-size: var(--yf-texto-xs);
    font-weight: 600;
    color: var(--yf-texto-apagado);
    margin-bottom: 0.3125rem;
}

/* ---------- Grilla ---------- */

.rz-data-grid .rz-grid-table thead th,
.rz-data-grid .rz-grid-table thead th .rz-column-title,
.rz-data-grid .rz-grid-table thead th .rz-column-title-content {
    color: var(--yf-texto-apagado);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rz-data-grid .rz-grid-table thead th {
    border-bottom: 1px solid var(--yf-borde);
}

/* Texto descriptivo en una línea (el completo va en el title): para columnas que no son cifras */
.yf-una-linea {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rz-data-grid .rz-group-row td {
    background: var(--yf-superficie-2);
}

.rz-data-grid .rz-group-footer td,
.rz-data-grid tr.rz-group-footer td {
    border-top: 1px solid var(--yf-borde-fuerte);
    background: var(--yf-superficie);
}

.rz-data-grid .rz-grid-table tfoot td {
    background: var(--yf-superficie-2);
}

.yf-grupo-codigo {
    font-weight: 700;
    color: var(--yf-primario);
    font-variant-numeric: tabular-nums;
}

.yf-grupo-detalle {
    color: var(--yf-texto-apagado);
    font-size: var(--yf-texto-xs);
}

.yf-celda-texto {
    display: block;
    white-space: normal;
    line-height: 1.4;
}

.yf-celda-detalle {
    display: block;
    white-space: normal;
    margin-top: 0.0625rem;
    font-size: var(--yf-texto-xs);
    color: var(--yf-texto-apagado);
    line-height: 1.4;
}

/* ---------- Pestañas: subrayado, sin cajas ---------- */

.rz-tabview .rz-tabview-nav {
    gap: var(--yf-esp-5);
    border-bottom: 1px solid var(--yf-borde);
    background: transparent;
}

.rz-tabview .rz-tabview-nav li {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: var(--yf-esp-2) 0 !important;
    color: var(--yf-texto-apagado) !important;
    font-weight: 600;
    font-size: var(--yf-texto-sm);
    box-shadow: inset 0 -2px 0 transparent;
    transition: color 150ms ease, box-shadow 150ms ease;
}

.rz-tabview .rz-tabview-nav li * {
    color: inherit !important;
    background: transparent !important;
    padding-inline: 0 !important;
}

.rz-tabview .rz-tabview-nav li:hover {
    color: var(--yf-texto) !important;
}

.rz-tabview .rz-tabview-nav li.rz-tabview-selected {
    color: var(--yf-texto) !important;
    box-shadow: inset 0 -2px 0 var(--yf-primario);
}

.rz-tabview .rz-tabview-panels {
    padding: var(--yf-esp-4) 0 0;
    background: transparent;
    border: 0;
}

/* ---------- Botones ---------- */

.rz-button {
    font-weight: 600;
    box-shadow: none;
}

.rz-button.rz-variant-outlined.rz-base {
    background: var(--yf-superficie);
    border-color: var(--yf-borde-fuerte);
    color: var(--yf-texto);
}

.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover {
    background: var(--yf-superficie-2);
}

/* ---------- Estados (siempre ícono + texto) ---------- */

.yf-estado {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--yf-radio-pildora);
    font-size: var(--yf-texto-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.yf-estado .rzi {
    font-size: 0.875rem;
}

.yf-estado--ok { color: var(--yf-ok); background: var(--yf-ok-suave); }
.yf-estado--alerta { color: var(--yf-atencion); background: var(--yf-atencion-suave); }
.yf-estado--error { color: var(--yf-error); background: var(--yf-error-suave); }
.yf-estado--info { color: var(--yf-info); background: var(--yf-info-suave); }
.yf-estado--neutro { color: var(--yf-texto-secundario); background: var(--yf-neutro-suave); }
.yf-estado--primario { color: var(--yf-primario); background: var(--yf-primario-suave); }

/* Estado sin fondo: para lo que está bien y no necesita llamar la atención */
.yf-estado--tenue {
    padding-inline: 0;
    background: transparent;
    color: var(--yf-texto-apagado);
    font-weight: 500;
}

/* ---------- Indicadores (tarjetas KPI) ---------- */

.yf-indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--yf-esp-4);
    margin-bottom: var(--yf-separacion-secciones);
}

.yf-indicador {
    display: block;
    padding: var(--yf-esp-4) var(--yf-esp-5) var(--yf-esp-5);
    color: inherit;
}

.yf-indicador__etiqueta {
    font-size: var(--yf-texto-2xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--yf-texto-apagado);
}

.yf-indicador__valor {
    margin-top: var(--yf-esp-2);
    font-family: var(--yf-fuente-titulos);
    font-size: var(--yf-texto-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.yf-indicador__detalle {
    margin-top: var(--yf-esp-1);
    font-size: var(--yf-texto-xs);
    color: var(--yf-texto-apagado);
}

.yf-indicador--error .yf-indicador__valor { color: var(--yf-error); }
.yf-indicador--alerta .yf-indicador__valor { color: var(--yf-atencion); }
.yf-indicador--ok .yf-indicador__valor { color: var(--yf-ok); }
.yf-indicador--tenue .yf-indicador__valor { color: var(--yf-texto-tenue); }

a.yf-indicador {
    text-decoration: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

a.yf-indicador:hover {
    border-color: var(--yf-borde-fuerte);
    box-shadow: var(--yf-sombra-md);
}

/* ---------- Avisos ---------- */

.yf-demo-aviso {
    display: flex;
    align-items: center;
    gap: var(--yf-esp-2);
    padding: var(--yf-esp-3) var(--yf-esp-4);
    margin-bottom: var(--yf-separacion-secciones);
    border-radius: var(--yf-radio-md);
    background: var(--yf-info-suave);
    color: var(--rz-info-darker);
    font-size: var(--yf-texto-sm);
}

/* ---------- Tablero ---------- */

.yf-tablero {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(19rem, 1fr);
    gap: var(--yf-separacion-secciones);
    align-items: start;
}

@media (max-width: 1180px) {
    .yf-tablero {
        grid-template-columns: minmax(0, 1fr);
    }
}

.yf-lista-pendientes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.yf-lista-pendientes li {
    display: flex;
    align-items: flex-start;
    gap: var(--yf-esp-3);
    padding: var(--yf-esp-3) 0;
    border-top: 1px solid var(--yf-borde);
}

.yf-lista-pendientes li:first-child {
    border-top: 0;
    padding-top: 0;
}

.yf-lista-pendientes li > .rzi {
    font-size: 1.125rem;
    margin-top: 0.0625rem;
}

.yf-lista-pendientes li > div {
    flex: 1;
    min-width: 0;
}

.yf-enlace-accion {
    font-weight: 600;
    font-size: var(--yf-texto-sm);
    color: var(--yf-primario);
    white-space: nowrap;
    text-decoration: none;
}

.yf-enlace-accion:hover {
    text-decoration: underline;
}

/* ---------- Utilidades ---------- */

.yf-texto-secundario {
    color: var(--yf-texto-apagado);
}

.yf-mono {
    font-family: ui-monospace, 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
    font-size: var(--yf-texto-xs);
}

.yf-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--yf-esp-2);
}

.yf-barra-seleccion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--yf-esp-3);
    padding: var(--yf-esp-3) var(--yf-esp-4);
    margin-bottom: var(--yf-esp-4);
    border-radius: var(--yf-radio-lg);
    background: var(--yf-primario-suave);
    border: 1px solid rgba(91, 67, 145, 0.2);
}

.yf-dos-columnas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--yf-separacion-secciones);
    align-items: start;
}

@media (max-width: 1180px) {
    .yf-dos-columnas {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Campos de formulario lado a lado; en celular quedan uno debajo del otro. */
.yf-grilla-campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--yf-esp-4);
}

.yf-grilla-campos--tres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 640px) {
    .yf-grilla-campos,
    .yf-grilla-campos--tres {
        grid-template-columns: minmax(0, 1fr);
    }
}

.yf-formulario {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--yf-esp-4);
}

.yf-ayuda {
    font-size: var(--yf-texto-xs);
    color: var(--yf-texto-apagado);
    margin-top: var(--yf-esp-1);
    line-height: 1.45;
}

.yf-error-campo {
    font-size: var(--yf-texto-sm);
    color: var(--yf-error);
    margin-top: var(--yf-esp-1);
}

/* ---------- Popover simple (preferencias de vista) ---------- */

.yf-popover {
    position: relative;
}

.yf-popover__panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 1000;
    min-width: 16rem;
    padding: var(--yf-esp-4);
    background: var(--yf-superficie);
    border: 1px solid var(--yf-borde);
    border-radius: var(--yf-radio-lg);
    box-shadow: var(--yf-sombra-lg);
    display: grid;
    gap: var(--yf-esp-3);
}

/* Menú de ayuda (guías para usuarios nuevos). */
.yf-menu-ayuda {
    gap: var(--yf-esp-1);
    padding: var(--yf-esp-2);
}

.yf-menu-ayuda .rz-button {
    justify-content: flex-start;
}