/* =============================================================================
   CUADERNO DE CAMPO · Enterprise Operations Design System
   -----------------------------------------------------------------------------
   Sistema de diseño enterprise B2B inspirado en Linear / Stripe / Vercel.
   Paleta neutral slate + verde agro como acento de marca, tipografía
   Plus Jakarta Sans para display y Inter para texto. Sin texturas, sin
   ornamentos editoriales. Foco en densidad de datos y claridad operacional.

   Los nombres de clase (.cdc-*) y de tokens se mantienen para preservar
   compatibilidad con páginas existentes; sólo cambian los valores.
   ============================================================================= */


/* ═══════════════════════════════════════════════════════════════════════════
   1 · TOKENS · Enterprise palette + Plus Jakarta Sans
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* --- Texto · escala slate refinada para legibilidad outdoor (high-glare) */
    /* Contraste 7:1+ en pares principales tipo guia agro (10k+ lux readable). */
    --cdc-ink:          #0B1120;   /* texto primario · slate-950 más profundo */
    --cdc-ink-2:        #1E293B;   /* títulos secundarios · slate-800 */
    --cdc-soil:         #1E293B;   /* texto secundario · slate-800 (mejor que 700) */
    --cdc-soil-2:       #334155;   /* texto cuerpo · slate-700 */
    --cdc-bark:         #475569;   /* texto terciario / labels · slate-600 */

    /* Acentos COMO TEXTO PEQUENO sobre su propio tinte claro. Los acentos base
       (--cdc-forest #15803D, --cdc-cobalt #2563EB, --cdc-amber #B45309) se quedan
       en 4.2-4.5:1 sobre sus tintes al 8-12%: un paso mas profundos en claro y
       los tonos -300 en oscuro (donde el tinte translucido se oscurece). */
    --cdc-forest-text:  #126633;
    --cdc-cobalt-text:  #1D4ED8;
    --cdc-amber-text:   #92400E;
    /* El violeta de las cifras de coste por kilo y de rendimiento (analítica de costes, inicio del
       asesor). Fijo en #6A1B9A se quedaba en 1,8:1 sobre la tarjeta oscura. */
    --cdc-violet-text:  #6A1B9A;
    --cdc-mute:         #64748B;   /* muted / placeholders · slate-500 */
    --cdc-mute-2:       #94A3B8;   /* muted débil · slate-400 */

    /* --- Bordes · slate scale ---------------------------------------------- */
    --cdc-border:        #E2E8F0;
    --cdc-border-strong: #CBD5E1;
    --cdc-border-subtle: #F1F5F9;

    /* --- Marca · Forest agro (verde más vivo y saturado) ------------------ */
    --cdc-forest:       #15803D;   /* emerald-700 — primario */
    --cdc-forest-2:     #16A34A;   /* emerald-600 — hover */
    --cdc-forest-deep:  #166534;   /* emerald-800 — pressed */
    --cdc-forest-soft:  rgba(21, 128, 61, 0.10);
    --cdc-forest-line:  rgba(21, 128, 61, 0.28);

    /* --- Cobalto · CTA / info / links (acento enterprise) ----------------- */
    --cdc-cobalt:       #2563EB;   /* blue-600 */
    --cdc-cobalt-2:     #3B82F6;   /* blue-500 */
    --cdc-cobalt-deep:  #1D4ED8;   /* blue-700 */
    --cdc-cobalt-soft:  rgba(37, 99, 235, 0.10);
    --cdc-cobalt-line:  rgba(37, 99, 235, 0.28);

    /* --- Semánticas -------------------------------------------------------- */
    --cdc-success:      #15803D;
    --cdc-success-soft: rgba(21, 128, 61, 0.10);

    --cdc-amber:        #B45309;   /* warning */
    --cdc-amber-2:      #D97706;
    --cdc-amber-soft:   rgba(180, 83, 9, 0.10);
    --cdc-amber-line:   rgba(180, 83, 9, 0.28);

    --cdc-danger:       #B91C1C;   /* red-700 */
    --cdc-danger-2:     #DC2626;
    --cdc-danger-soft:  rgba(185, 28, 28, 0.08);
    --cdc-danger-line:  rgba(185, 28, 28, 0.30);

    /* --- Aliases legacy → mapean a tokens enterprise (compat) ------------- */
    /* Wheat se conserva como acento decorativo SOLO en componentes específicos.
       Los bordes/líneas que usaban wheat-soft/wheat-line se mapean a slate. */
    --cdc-wheat:        #D4A853;
    --cdc-wheat-2:      #E8C87A;
    --cdc-wheat-soft:   var(--cdc-border);          /* legacy → border slate */
    --cdc-wheat-line:   var(--cdc-border-strong);   /* legacy → border slate */
    --cdc-wheat-glow:   rgba(212, 168, 83, 0.30);

    --cdc-ochre:        #C2410C;   /* orange-700 — acento cálido */
    --cdc-ochre-soft:   rgba(194, 65, 12, 0.10);

    --cdc-sky:          var(--cdc-cobalt);          /* legacy info → cobalt */
    --cdc-sky-soft:     var(--cdc-cobalt-soft);

    --cdc-olive:        #4d5a2b;
    --cdc-olive-deep:   #2d3a23;

    /* Aliases papel → mapean a superficies enterprise */
    --cdc-cream:        #F8FAFC;
    --cdc-paper:        #FFFFFF;
    --cdc-paper-2:      #F1F5F9;
    --cdc-bone:         #EEF2F6;

    /* --- Superficies · slate frío ----------------------------------------- */
    --cdc-surface-page:     #F7F8FA;   /* fondo de página */
    --cdc-surface-paper:    #FFFFFF;
    --cdc-surface-card:     #FFFFFF;   /* cards / paneles */
    --cdc-surface-card-alt: #F8FAFC;   /* hover de fila / surface alt */
    --cdc-surface-well:     #F1F5F9;   /* superficie hundida (tablas head, code) */
    --cdc-surface-hover:    #E2E8F0;   /* hover pulsado: un paso mas que -well */
    /* Se usaba en 3 sitios SIN estar definida: cada uso caia a su fallback literal
       claro y en tema oscuro dejaba texto casi blanco sobre fondo casi blanco.
       Alias de -card-alt, que es lo que esos usos pretendian. */
    --cdc-surface-soft:     #F8FAFC;

    /* ── Velo y visor de documentos ──────────────────────────────────────────
       --cdc-velo: el fondo oscurecido de un dialogo a pantalla completa.
       --cdc-visor-*: el gris del visor de PDF de los navegadores y su texto.
       Ese par NO invierte en oscuro a proposito: el <iframe> lleva dentro el
       visor nativo, que pinta su propio gris; si el marco se fuera a claro se
       veria un recuadro blanco alrededor de un documento gris. */
    --cdc-velo:         rgba(11, 17, 32, 0.55);
    --cdc-visor-fondo:  #525659;
    --cdc-visor-texto:  #E8EAED;
    /* ── Trio SOLIDO · macizos que LLEVAN TEXTO BLANCO encima ────────────────
       Mismo valor en claro y en oscuro A PROPOSITO. Los acentos normales
       (--cdc-forest, --cdc-ochre, --cdc-danger) SI invierten porque su uso
       principal es texto e icono, y en oscuro se aclaran (#22C55E, #FB923C,
       #F87171): con blanco encima se quedan en 2.3-2.9:1. Estos tres se quedan
       profundos para que el blanco siga cumpliendo AA en ambos temas.
       Regla: fondo macizo -> *-solid; texto o icono -> el acento normal. */
    --cdc-forest-solid:     #15803D;   /* blanco encima: 5.02:1 */
    --cdc-ochre-solid:      #C2410C;   /* blanco encima: 5.18:1 */
    --cdc-danger-solid:     #B91C1C;   /* blanco encima: 6.47:1 */
    --cdc-neutral-solid:    #475569;   /* blanco encima: 7.56:1 (estado sin clasificar) */
    --cdc-amber-solid:      #B45309;   /* blanco encima: 5.02:1 */
    --cdc-cobalt-solid:     #2563EB;   /* blanco encima: 5.17:1 */
    /* Acompanantes para el OTRO extremo de los degradados de boton. Mismo criterio:
       fijos en ambos temas. Sin ellos, la mitad superior del degradado usaba
       --cdc-*-2, que si invierte (forest-2 pasa a #4ADE80) y dejaba el blanco en
       ~1.9:1 en oscuro.
       OJO — defecto PREEXISTENTE que esto NO arregla: --cdc-forest-2 vale #16A34A en
       claro y el blanco encima se queda en 3.30:1, asi que el extremo superior del
       degradado de .cdc-btn--primary ya incumplia AA antes de todo esto. Cambiarlo
       altera el aspecto de todos los botones primarios: decision de diseno pendiente. */
    --cdc-forest-2-solid:   #16A34A;   /* blanco encima: 3.30:1 (ver aviso arriba) */
    --cdc-cobalt-2-solid:   #3B82F6;
    --cdc-amber-2-solid:    #D97706;
    --cdc-danger-2-solid:   #DC2626;
    /* El parte del cuadro del asesor (/dashboard-asesor): una banda verde oscura con texto
       claro en los DOS temas, a proposito, como los -solid. Las marcas son pares fondo/texto
       que cumplen AA entre si (el texto claro sobre su fondo, de 6,8:1 el verde a 9:1 el ambar). */
    --cdc-parte-fondo-1:    #0F2A1C;
    --cdc-parte-fondo-2:    #14532D;
    --cdc-parte-fondo-3:    #166534;
    --cdc-parte-texto:      #FFFFFF;
    --cdc-parte-verde:      #86EFAC;
    --cdc-parte-ambar-fondo: #4A2E0A;
    --cdc-parte-ambar:      #FCD34D;
    --cdc-parte-rojo-fondo: #4C1414;
    --cdc-parte-rojo:       #FCA5A5;
    --cdc-parte-azul-fondo: #172554;
    --cdc-parte-azul:       #93C5FD;

    /* --- Tipografía · Plus Jakarta Sans + Inter + JetBrains Mono ---------- */
    --cdc-display: 'Plus Jakarta Sans', 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
    --cdc-serif:   'Plus Jakarta Sans', 'Inter Tight', system-ui, sans-serif; /* alias → kill serif */
    --cdc-sans:    'Inter Tight', 'Inter', 'Plus Jakarta Sans', 'Source Sans 3', system-ui, -apple-system, sans-serif;
    --cdc-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    /* --- Sombras premium · estilo Vercel Geist con "ring" exterior -------- */
    /* Cada sombra tiene 3 capas: ring interior 1px + drop close + drop far.
       Esto da el efecto "premium lifted" tipo Linear/Stripe/Vercel. */
    --cdc-shadow-ring:    inset 0 0 0 1px rgba(15, 23, 42, 0.04);
    --cdc-shadow-xs:      0 1px 0 rgba(15, 23, 42, 0.04);
    --cdc-shadow-sm:
        0 0 0 1px rgba(15, 23, 42, 0.04),
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 1px 3px rgba(15, 23, 42, 0.06);
    --cdc-shadow-md:
        0 0 0 1px rgba(15, 23, 42, 0.04),
        0 1px 3px rgba(15, 23, 42, 0.05),
        0 4px 12px -2px rgba(15, 23, 42, 0.06);
    --cdc-shadow-lg:
        0 0 0 1px rgba(15, 23, 42, 0.04),
        0 4px 12px -2px rgba(15, 23, 42, 0.07),
        0 12px 28px -8px rgba(15, 23, 42, 0.10);
    --cdc-shadow-xl:
        0 0 0 1px rgba(15, 23, 42, 0.05),
        0 8px 24px -4px rgba(15, 23, 42, 0.10),
        0 24px 48px -12px rgba(15, 23, 42, 0.14);
    --cdc-shadow-card-hover:
        0 0 0 1px rgba(15, 23, 42, 0.06),
        0 4px 12px -2px rgba(15, 23, 42, 0.08),
        0 12px 32px -8px rgba(15, 23, 42, 0.10);

    /* Inset highlight · halo blanco sutil arriba de buttons/cards (efecto cristal) */
    --cdc-highlight-inset: inset 0 1px 0 rgba(255, 255, 255, 0.10);

    /* Focus rings premium · multi-capa estilo Geist (gap blanco + halo color) */
    --cdc-ring-forest:
        0 0 0 2px var(--cdc-surface-card),
        0 0 0 4px rgba(21, 128, 61, 0.45);
    --cdc-ring-cobalt:
        0 0 0 2px var(--cdc-surface-card),
        0 0 0 4px rgba(37, 99, 235, 0.45);
    --cdc-ring-wheat:  var(--cdc-ring-cobalt);   /* alias legacy → cobalt */
    --cdc-ring-danger:
        0 0 0 2px var(--cdc-surface-card),
        0 0 0 4px rgba(185, 28, 28, 0.40);

    /* Focus ring "soft" para inputs (sin gap, solo halo cobalt) */
    --cdc-ring-input-cobalt: 0 0 0 3px rgba(37, 99, 235, 0.18), inset 0 0 0 1px var(--cdc-cobalt);
    --cdc-ring-input-forest: 0 0 0 3px rgba(21, 128, 61, 0.18), inset 0 0 0 1px var(--cdc-forest);
    --cdc-ring-input-danger: 0 0 0 3px rgba(185, 28, 28, 0.16), inset 0 0 0 1px var(--cdc-danger);

    /* --- Radii · más conservador ------------------------------------------ */
    --cdc-radius-xs: 4px;
    --cdc-radius-sm: 6px;
    --cdc-radius-md: 8px;
    --cdc-radius-lg: 12px;
    --cdc-radius-xl: 16px;
    --cdc-radius-pill: 999px;

    /* --- Spacing scale · escala 4px base ----------------------------------
       Uso recomendado para nuevos componentes/páginas:
         gap:      --cdc-space-sm / --cdc-space-md   (lista de chips, toolbar)
         padding:  --cdc-space-md / --cdc-space-lg   (cards, fieldsets)
         margin:   --cdc-space-md (entre secciones)
         grid gap: --cdc-space-sm horizontal · --cdc-space-md vertical
       NO retroactiva — el CSS legacy con valores hardcodeados (16px, 12px)
       sigue funcionando. Sustituir gradualmente.                         */
    --cdc-space-2xs:  2px;
    --cdc-space-xs:   4px;
    --cdc-space-sm:   8px;
    --cdc-space-md:  12px;
    --cdc-space-lg:  16px;
    --cdc-space-xl:  24px;
    --cdc-space-2xl: 32px;
    --cdc-space-3xl: 48px;

    /* --- Easing curves · Emil Kowalski strong custom curves -------------- */
    /* Built-in CSS easings son débiles · faltan el "punch" intencional.
       Los custom curves debajo son de easing.dev / easings.co. */
    --cdc-ease-out:      cubic-bezier(0.23, 1, 0.32, 1);   /* strong out — UI snap */
    --cdc-ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);  /* on-screen movement */
    --cdc-ease-drawer:   cubic-bezier(0.32, 0.72, 0, 1);   /* iOS drawer (Ionic) */
    --cdc-ease-spring:   cubic-bezier(0.2, 0.9, 0.3, 1.05); /* sutil bounce */
    --cdc-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --cdc-ease-in:       cubic-bezier(0.4, 0, 1, 1);       /* solo para exits */

    /* --- Durations · UI bajo 300ms (regla Emil) -------------------------- */
    --cdc-dur-instant:  100ms;   /* button press feedback */
    --cdc-dur-fast:     160ms;   /* small popovers, tooltips */
    --cdc-dur-base:     200ms;   /* dropdowns, hover */
    --cdc-dur-slow:     280ms;   /* modals enter */
    --cdc-dur-graceful: 400ms;   /* drawers, complex transitions */
    --cdc-dur-exit:     140ms;   /* exits siempre 60-70% del enter */

    /* --- Override tokens base TF para armonía enterprise ------------------ */
    --tf-page-bg:       var(--cdc-surface-page);
    --tf-text-primary:  var(--cdc-ink);
    --tf-text-secondary: var(--cdc-soil);
    --tf-text-muted:    var(--cdc-mute);
    --tf-border-color:  var(--cdc-border);
    --tf-card-radius:   var(--cdc-radius-md);
    --tf-card-shadow:   var(--cdc-shadow-sm);
    --tf-card-shadow-hover: var(--cdc-shadow-card-hover);
    --tf-accent-warm:   var(--cdc-cobalt);
    --tf-accent-warm-light: var(--cdc-cobalt-soft);

    /* Radzen primarios → forest green agro */
    --rz-primary:         var(--cdc-forest);
    --rz-primary-lighter: var(--cdc-forest-2);
    --rz-primary-light:   #22C55E;
    --rz-primary-dark:    var(--cdc-forest-deep);
    --rz-primary-darker:  #14532D;
    --rz-secondary:       var(--cdc-soil-2);
    --rz-warning:         var(--cdc-amber);
    --rz-info:            var(--cdc-cobalt);
    --rz-success:         var(--cdc-forest);
    --rz-danger:          var(--cdc-danger);
    /* Texto de los RadzenAlert con Shade.Lighter. El tema material los deja en el
       propio color semantico sobre su tinte claro, y eso no llega ni de lejos: la
       "Alerta de plazo CUE" pintaba #FF9800 sobre #FFEACC = 1.84:1, ilegible siendo
       ademas un aviso normativo. Tonos -800 medidos sobre los tintes reales:
       ambar 6.04, azul/verde/rojo >= 6 en sus fondos. */
    --rz-on-warning-lighter: #92400E;
    --rz-on-info-lighter:    #1E40AF;
    --rz-on-success-lighter: #166534;
    --rz-on-danger-lighter:  #991B1B;
    /* Icono de filtro en cabeceras de grid: el tema lo hereda de text-disabled
       (tinta al 40% = 2.53:1) pero es un control INTERACTIVO — minimo 3:1. */
    --rz-grid-filter-color: var(--cdc-mute);
    --rz-base-background-color: var(--cdc-surface-page);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2 · LIENZO GLOBAL · Slate frío con gradient premium muy sutil
   ═══════════════════════════════════════════════════════════════════════════ */
body {
    /* Gradient extremadamente sutil tipo Vercel: cobalt 1% en esquinas,
       forest 1% inferior. Casi imperceptible pero da profundidad. */
    background:
        radial-gradient(ellipse 1400px 800px at 100% 0%,
            rgba(37, 99, 235, 0.025) 0%,
            transparent 60%),
        radial-gradient(ellipse 1200px 600px at 0% 100%,
            rgba(21, 128, 61, 0.02) 0%,
            transparent 55%),
        var(--cdc-surface-page);
    background-attachment: fixed;
    color: var(--cdc-ink);
    font-family: var(--cdc-sans);
    font-weight: 400;
    /* Numerales tabulares + Plus Jakarta Sans alternates */
    font-feature-settings: "cv11", "ss03", "ss01";
    font-variation-settings: "wght" 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.page-content {
    background-color: transparent !important;
    position: relative;
}

/* Utilidad legacy: cdc-u-grain mantiene la API pero ya no aplica grano.
   Las páginas que la usan no se rompen. */
.cdc-u-grain::before {
    content: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3 · TIPOGRAFÍA · Plus Jakarta Sans variable + numerales tabulares globales
   ═══════════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--cdc-display);
    color: var(--cdc-ink);
    letter-spacing: -0.015em;
    font-weight: 600;
    font-feature-settings: "cv11", "ss03", "ss01";
    line-height: 1.2;
    margin-top: 0;
    font-optical-sizing: auto;
    text-wrap: balance;     /* títulos balanceados (Linear style) */
}
h1 {
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variation-settings: "wght" 700;
    line-height: 1.1;
}
h2 {
    font-weight: 700;
    letter-spacing: -0.025em;
    font-variation-settings: "wght" 700;
    line-height: 1.15;
}
h3 {
    letter-spacing: -0.02em;
    font-variation-settings: "wght" 600;
}
h5, h6 {
    color: var(--cdc-soil);
    letter-spacing: -0.005em;
    font-weight: 600;
}

p, body, input, button, select, textarea {
    font-family: var(--cdc-sans);
}

/* Numerales tabulares globales en valores de KPI/tablas/datos */
.cdc-stat__value,
.stat-card-value,
.cdc-num,
.cdc-u-tabular,
[data-num],
.tabular-nums {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "lnum";
}

.cdc-u-mono     { font-family: var(--cdc-mono); letter-spacing: 0; font-feature-settings: "zero", "ss01"; }
.cdc-u-serif    { font-family: var(--cdc-serif); font-style: normal; }    /* alias legacy → sans */
.cdc-u-display  { font-family: var(--cdc-display); letter-spacing: -0.02em; font-weight: 600; }
.cdc-u-caption {
    font-family: var(--cdc-sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cdc-mute);
}
.cdc-u-label {
    font-family: var(--cdc-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cdc-soil);
}
.cdc-u-tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.cdc-u-ink     { color: var(--cdc-ink); }
.cdc-u-soil    { color: var(--cdc-soil); }
.cdc-u-mute    { color: var(--cdc-mute); }
.cdc-u-wheat   { color: var(--cdc-amber); }   /* legacy alias → amber */
.cdc-u-forest  { color: var(--cdc-forest); }
.cdc-u-ochre   { color: var(--cdc-ochre); }
.cdc-u-danger  { color: var(--cdc-danger); }
.cdc-u-cobalt  { color: var(--cdc-cobalt); }
.cdc-u-amber   { color: var(--cdc-amber); }


/* ═══════════════════════════════════════════════════════════════════════════
   4 · PRIMITIVAS EDITORIALES REUTILIZABLES (.cdc-*)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- 4.1 Page heading · estilo Linear / Stripe -------------------------- */
.cdc-heading {
    margin: 0 0 24px;
    padding: 0 0 16px;
    position: relative;
    border-bottom: 1px solid var(--cdc-border);
}
.cdc-heading::after { content: none; }   /* sin barra dorada decorativa */

.cdc-heading__eyebrow {
    font-family: var(--cdc-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.cdc-heading__eyebrow::before { content: none; }    /* sin línea dorada */
.cdc-heading__eyebrow i {
    color: var(--cdc-forest);
    font-size: 0.85em;
}

.cdc-heading__title {
    font-family: var(--cdc-display);
    font-size: clamp(1.625rem, 1.8vw + 0.85rem, 2.125rem);
    font-weight: 700;
    color: var(--cdc-ink);
    margin: 0;
    letter-spacing: -0.035em;
    line-height: 1.1;
    font-variation-settings: "wght" 700;
    text-wrap: balance;
}
.cdc-heading__title em {
    font-style: normal;
    /* Gradient text premium · forest → cobalt para los términos enfatizados */
    background: linear-gradient(135deg, var(--cdc-forest) 0%, var(--cdc-forest-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
}

.cdc-heading__lede {
    font-family: var(--cdc-sans);
    font-size: 0.95rem;
    color: var(--cdc-soil);
    line-height: 1.55;
    margin: 6px 0 0;
    max-width: 70ch;
    font-style: normal;
    font-weight: 400;
}
.cdc-heading__lede strong {
    color: var(--cdc-ink);
    font-weight: 600;
}

.cdc-heading__meta {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    font-family: var(--cdc-sans);
    font-size: 0.78rem;
    color: var(--cdc-bark);
}

.cdc-heading__actions {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ---- 4.2 Separador horizontal · línea limpia ---------------------------- */
.cdc-rule {
    display: block;
    height: 1px;
    margin: 24px 0;
    background: var(--cdc-border);
    border: 0;
}
.cdc-rule--short { width: 80px; margin-left: 0; }
.cdc-rule--ornament {
    background: var(--cdc-border);    /* sin ornamento ☙ ⁕ ❧ */
    height: 1px;
    text-align: left;
}
.cdc-rule--ornament::before { content: none; }

/* ---- 4.3 Sección con título ---------------------------------------------- */
.cdc-section {
    margin-top: 32px;
    margin-bottom: 20px;
}
.cdc-section__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--cdc-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--cdc-ink);
    letter-spacing: -0.015em;
    margin: 0 0 14px;
}
.cdc-section__title::before {
    content: "";
    width: 3px;
    height: 16px;
    background: var(--cdc-forest);   /* acento verde agro en lugar de wheat */
    border-radius: 999px;
    flex-shrink: 0;
}
.cdc-section__caption {
    font-family: var(--cdc-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--cdc-bark);
    margin-left: auto;
}

/* ---- 4.4 Card · premium con ring shadow + hairline highlight ----------- */
.cdc-card {
    background: var(--cdc-surface-card);
    border: 1px solid var(--cdc-border-subtle);
    border-radius: var(--cdc-radius-lg);
    padding: 20px 22px;
    box-shadow: var(--cdc-shadow-sm);
    position: relative;
    transition:
        box-shadow var(--cdc-dur-base) var(--cdc-ease-out),
        border-color var(--cdc-dur-fast) var(--cdc-ease-out),
        transform var(--cdc-dur-base) var(--cdc-ease-out);
    isolation: isolate;
}
.cdc-card > *:first-child { position: relative; z-index: 1; }
/* Hover SOLO en pointer fine — touch devices disparan hover en tap (false positive) */
@media (hover: hover) and (pointer: fine) {
    .cdc-card:hover {
        box-shadow: var(--cdc-shadow-card-hover);
        border-color: var(--cdc-border);
    }
}
.cdc-card--paper {
    background: var(--cdc-surface-card);
    background-image: none;
}
.cdc-card--well {
    background: var(--cdc-surface-well);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
    border-color: var(--cdc-border-subtle);
}
.cdc-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--cdc-border-subtle);
}
.cdc-card__title {
    font-family: var(--cdc-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--cdc-ink);
    margin: 0;
    letter-spacing: -0.015em;
}
.cdc-card__caption {
    font-family: var(--cdc-sans);
    font-size: 0.78rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cdc-bark);
    font-weight: 500;
}

/* Card destacado · acento superior verde agro */
.cdc-card--featured {
    padding-top: 24px;
}
.cdc-card--featured::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--cdc-forest);
    border-radius: var(--cdc-radius-lg) var(--cdc-radius-lg) 0 0;
}

/* Card "documento oficial" · acento verde sólido */
.cdc-card--official {
    position: relative;
    padding-top: 24px;
    background: var(--cdc-surface-card);
    border-color: var(--cdc-border);
}
.cdc-card--official::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--cdc-forest);
    border-radius: var(--cdc-radius-lg) var(--cdc-radius-lg) 0 0;
}
.cdc-card__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--cdc-border-subtle);
}
.cdc-card__seal {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cdc-radius-md);
    background: var(--cdc-forest-soft);
    border: 1px solid var(--cdc-forest-line);
    color: var(--cdc-forest);
    font-size: 16px;
}
.cdc-card__lede {
    margin: 4px 0 0;
    font-family: var(--cdc-sans);
    font-style: normal;
    font-size: 0.9rem;
    color: var(--cdc-soil);
    line-height: 1.5;
}
.cdc-card__badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    font-family: var(--cdc-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    /* --cdc-forest a pelo daba 4.38:1 sobre el tinte de la card (badge "SIEX") */
    color: var(--cdc-forest-text, var(--cdc-forest));
    border: 1px solid var(--cdc-forest-line);
    border-radius: var(--cdc-radius-xs);
    background: var(--cdc-forest-soft);
    vertical-align: middle;
}

/* ---- 4.5 Chip · pill enterprise ----------------------------------------- */
.cdc-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    font-family: var(--cdc-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--cdc-radius-pill);
    border: 1px solid var(--cdc-border);
    background: var(--cdc-surface-card);
    color: var(--cdc-soil);
    line-height: 1.5;
    transition: background var(--cdc-dur-fast), color var(--cdc-dur-fast), border-color var(--cdc-dur-fast);
}
.cdc-chip--forest {
    background: var(--cdc-forest-soft);
    color: var(--cdc-forest);
    border-color: var(--cdc-forest-line);
}
.cdc-chip--wheat {
    background: var(--cdc-amber-soft);
    color: var(--cdc-amber);
    border-color: var(--cdc-amber-line);
}
.cdc-chip--danger {
    background: var(--cdc-danger-soft);
    color: var(--cdc-danger);
    border-color: var(--cdc-danger-line);
}
.cdc-chip--ink {
    background: var(--cdc-ink);
    color: #fff;
    border-color: var(--cdc-ink);
}
.cdc-chip--amber {
    background: var(--cdc-amber-soft);
    color: var(--cdc-amber);
    border-color: var(--cdc-amber-line);
}
.cdc-chip--sky,
.cdc-chip--cobalt {
    background: var(--cdc-cobalt-soft);
    color: var(--cdc-cobalt);
    border-color: var(--cdc-cobalt-line);
}
.cdc-chip i { font-size: 0.85em; }

/* ---- 4.6 Stat tile · KPI card estilo Stripe ----------------------------- */
.cdc-stat {
    background: var(--cdc-surface-card);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-lg);
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--cdc-shadow-sm);
    transition:
        transform var(--cdc-dur-base) var(--cdc-ease-out),
        box-shadow var(--cdc-dur-base) var(--cdc-ease-out),
        border-color var(--cdc-dur-fast);
}
.cdc-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--cdc-forest);   /* default → verde agro en lugar de wheat */
    transition: background var(--cdc-dur-fast);
}
@media (hover: hover) and (pointer: fine) {
    .cdc-stat:hover {
        transform: translateY(-1px);
        box-shadow: var(--cdc-shadow-card-hover);
        border-color: var(--cdc-border-strong);
    }
}
.cdc-stat__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--cdc-radius-md);   /* squircle moderno en lugar de círculo */
    background: var(--cdc-forest-soft);
    color: var(--cdc-forest);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    border: 1px solid var(--cdc-forest-line);
}
.cdc-stat__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.cdc-stat__value {
    font-family: var(--cdc-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--cdc-ink);
    line-height: 1.05;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "lnum";
    font-variation-settings: "wght" 700;
}
.cdc-stat__label {
    font-family: var(--cdc-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cdc-bark);
}
.cdc-stat__delta {
    font-family: var(--cdc-sans);
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}
.cdc-stat__delta--up   { color: var(--cdc-forest); }
.cdc-stat__delta--down { color: var(--cdc-danger); }

.cdc-stat--wheat::before  { background: var(--cdc-amber); }
.cdc-stat--forest::before { background: var(--cdc-forest); }
.cdc-stat--ochre::before  { background: var(--cdc-ochre); }
.cdc-stat--danger::before { background: var(--cdc-danger); }
.cdc-stat--sky::before,
.cdc-stat--cobalt::before { background: var(--cdc-cobalt); }

.cdc-stat--wheat .cdc-stat__icon  { background: var(--cdc-amber-soft); color: var(--cdc-amber); border-color: var(--cdc-amber-line); }
.cdc-stat--ochre .cdc-stat__icon  { background: var(--cdc-ochre-soft); color: var(--cdc-ochre); border-color: rgba(194, 65, 12, 0.28); }
.cdc-stat--danger .cdc-stat__icon { background: var(--cdc-danger-soft); color: var(--cdc-danger); border-color: var(--cdc-danger-line); }
.cdc-stat--sky .cdc-stat__icon,
.cdc-stat--cobalt .cdc-stat__icon { background: var(--cdc-cobalt-soft); color: var(--cdc-cobalt); border-color: var(--cdc-cobalt-line); }

/* ---- 4.7 Botón · scale(0.97) feedback Emil-style ---------------------- */
.cdc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    min-height: 36px;
    font-family: var(--cdc-sans);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    border-radius: var(--cdc-radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--cdc-ink);
    cursor: pointer;
    /* Propiedades específicas (no `all`) · curve strong out · 160ms snap */
    transition:
        background var(--cdc-dur-fast) var(--cdc-ease-out),
        color var(--cdc-dur-fast) var(--cdc-ease-out),
        border-color var(--cdc-dur-fast) var(--cdc-ease-out),
        box-shadow var(--cdc-dur-fast) var(--cdc-ease-out),
        transform var(--cdc-dur-instant) var(--cdc-ease-out),
        filter var(--cdc-dur-fast) ease;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
    user-select: none;
    touch-action: manipulation;   /* elimina 300ms tap delay en mobile */
}
.cdc-btn:focus-visible { outline: none; box-shadow: var(--cdc-ring-cobalt); }
/* scale(0.97) Emil — escala más sensible que 0.98 sin ser excesivo */
.cdc-btn:active:not(:disabled) { transform: scale(0.97); }
.cdc-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Buttons premium: highlight inset superior (efecto cristal) + drop micro-sombra
   Tipo Linear/Stripe — el button "flota" 1px sobre la superficie. */
.cdc-btn--primary {
    background: linear-gradient(180deg, var(--cdc-forest-2-solid) 0%, var(--cdc-forest-solid) 100%);
    color: #fff;
    border-color: var(--cdc-forest-deep);
    box-shadow:
        var(--cdc-highlight-inset),
        0 1px 2px rgba(21, 128, 61, 0.20),
        0 0 0 1px var(--cdc-forest-deep);
}
.cdc-btn--primary:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--cdc-forest) 0%, var(--cdc-forest-deep) 100%);
    border-color: var(--cdc-forest-deep);
    box-shadow:
        var(--cdc-highlight-inset),
        0 2px 6px -1px rgba(21, 128, 61, 0.30),
        0 0 0 1px var(--cdc-forest-deep);
}
.cdc-btn--primary:focus-visible { box-shadow: var(--cdc-ring-forest); }

.cdc-btn--cobalt {
    background: linear-gradient(180deg, var(--cdc-cobalt-2-solid) 0%, var(--cdc-cobalt-solid) 100%);
    color: #fff;
    border-color: var(--cdc-cobalt-deep);
    box-shadow:
        var(--cdc-highlight-inset),
        0 1px 2px rgba(37, 99, 235, 0.22),
        0 0 0 1px var(--cdc-cobalt-deep);
}
.cdc-btn--cobalt:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--cdc-cobalt) 0%, var(--cdc-cobalt-deep) 100%);
    box-shadow:
        var(--cdc-highlight-inset),
        0 2px 6px -1px rgba(37, 99, 235, 0.32),
        0 0 0 1px var(--cdc-cobalt-deep);
}

/* legacy --wheat → amber con highlight inset */
.cdc-btn--wheat {
    background: linear-gradient(180deg, var(--cdc-amber-2-solid) 0%, var(--cdc-amber-solid) 100%);
    color: #fff;
    border-color: var(--cdc-amber);
    box-shadow:
        var(--cdc-highlight-inset),
        0 1px 2px rgba(180, 83, 9, 0.22);
}
.cdc-btn--wheat:hover:not(:disabled) {
    filter: brightness(1.04);
}

/* Secondary · ring shadow + hairline interior highlight */
.cdc-btn--secondary {
    background: var(--cdc-surface-card);
    color: var(--cdc-ink);
    border-color: var(--cdc-border);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 0 0 1px rgba(15, 23, 42, 0.04);
}
.cdc-btn--secondary:hover:not(:disabled) {
    background: var(--cdc-surface-card-alt);
    border-color: var(--cdc-border-strong);
    color: var(--cdc-ink);
}

.cdc-btn--ghost {
    background: transparent;
    color: var(--cdc-soil-2);
    box-shadow: none;
}
.cdc-btn--ghost:hover:not(:disabled) {
    background: var(--cdc-surface-well);
    color: var(--cdc-ink);
}

.cdc-btn--danger {
    background: linear-gradient(180deg, var(--cdc-danger-2-solid) 0%, var(--cdc-danger-solid) 100%);
    color: #fff;
    border-color: #991B1B;
    box-shadow:
        var(--cdc-highlight-inset),
        0 1px 2px rgba(185, 28, 28, 0.24),
        0 0 0 1px #991B1B;
}
.cdc-btn--danger:hover:not(:disabled) {
    filter: brightness(1.06);
    box-shadow:
        var(--cdc-highlight-inset),
        0 2px 6px -1px rgba(185, 28, 28, 0.32),
        0 0 0 1px #991B1B;
}
.cdc-btn--danger:focus-visible { box-shadow: var(--cdc-ring-danger); }

.cdc-btn--sm { padding: 5px 10px; min-height: 30px; font-size: 0.8125rem; }
.cdc-btn--lg { padding: 11px 22px; min-height: 44px; font-size: 0.9375rem; }
.cdc-btn--block { width: 100%; }
.cdc-btn--icon { padding: 8px; width: 36px; min-height: 36px; }

/* ---- 4.8 Input · premium con focus ring snappy ------------------------ */
.cdc-input {
    display: block;
    width: 100%;
    padding: 8px 12px;
    min-height: 38px;
    background: var(--cdc-surface-card);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-md);
    font-family: var(--cdc-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--cdc-ink);
    box-shadow: var(--cdc-shadow-xs);
    /* strong-out curve — focus se siente instantáneo */
    transition:
        border-color var(--cdc-dur-fast) var(--cdc-ease-out),
        box-shadow var(--cdc-dur-fast) var(--cdc-ease-out),
        background var(--cdc-dur-fast) var(--cdc-ease-out);
    -webkit-appearance: none;
    appearance: none;
}
.cdc-input::placeholder {
    color: var(--cdc-mute);
    font-style: normal;
    font-weight: 400;
}
.cdc-input:hover:not(:focus) {
    border-color: var(--cdc-border-strong);
    background: var(--cdc-surface-card);
}
.cdc-input:focus {
    outline: none;
    border-color: var(--cdc-cobalt);
    box-shadow: var(--cdc-ring-input-cobalt);
}
.cdc-input[aria-invalid="true"],
.cdc-input.is-error {
    border-color: var(--cdc-danger);
}
.cdc-input[aria-invalid="true"]:focus,
.cdc-input.is-error:focus {
    box-shadow: var(--cdc-ring-input-danger);
}

.cdc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.cdc-field__label {
    font-family: var(--cdc-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cdc-soil);
}
.cdc-field__hint {
    font-family: var(--cdc-sans);
    font-size: 0.8125rem;
    color: var(--cdc-bark);
    line-height: 1.4;
}
.cdc-field__error {
    font-family: var(--cdc-sans);
    font-size: 0.8125rem;
    color: var(--cdc-danger);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

/* ---- 4.9 Toolbar -------------------------------------------------------- */
.cdc-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: var(--cdc-surface-card);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-md);
    box-shadow: var(--cdc-shadow-xs);
    margin-bottom: 18px;
}
.cdc-toolbar__group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cdc-toolbar__sep {
    width: 1px;
    height: 22px;
    background: var(--cdc-border);
    margin: 0 4px;
}
.cdc-toolbar__spacer { flex: 1; }

/* ---- 4.10 Empty state --------------------------------------------------- */
.cdc-empty {
    text-align: center;
    padding: 56px 24px;
    background: var(--cdc-surface-card);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-lg);
    color: var(--cdc-bark);
}
.cdc-empty__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--cdc-radius-lg);
    background: var(--cdc-forest-soft);
    color: var(--cdc-forest);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 14px;
    border: 1px solid var(--cdc-forest-line);
}
.cdc-empty__title {
    font-family: var(--cdc-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--cdc-ink);
    margin: 0 0 6px;
    letter-spacing: -0.015em;
}
.cdc-empty__desc {
    font-family: var(--cdc-sans);
    font-style: normal;
    font-size: 0.9rem;
    color: var(--cdc-soil);
    max-width: 56ch;
    margin: 0 auto 16px;
    line-height: 1.55;
}

/* ---- 4.11 Notice / callout · alerta premium con ring + highlight ------ */
.cdc-notice {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--cdc-radius-md);
    background: var(--cdc-cobalt-soft);
    border: 1px solid var(--cdc-cobalt-line);
    border-left: 3px solid var(--cdc-cobalt);
    color: var(--cdc-ink);
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 1px 2px rgba(37, 99, 235, 0.05);
}
.cdc-notice__icon {
    font-size: 1.05rem;
    flex-shrink: 0;
    color: var(--cdc-cobalt);
    margin-top: 2px;
}
.cdc-notice__title {
    font-family: var(--cdc-display);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--cdc-ink);
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}
.cdc-notice__body {
    font-family: var(--cdc-sans);
    font-size: 0.875rem;
    color: var(--cdc-soil-2);
    line-height: 1.5;
    margin: 0;
}
.cdc-notice--forest { background: var(--cdc-forest-soft); border-color: var(--cdc-forest-line); border-left-color: var(--cdc-forest); }
.cdc-notice--forest .cdc-notice__icon { color: var(--cdc-forest); }
.cdc-notice--amber  { background: var(--cdc-amber-soft); border-color: var(--cdc-amber-line); border-left-color: var(--cdc-amber); }
.cdc-notice--amber .cdc-notice__icon { color: var(--cdc-amber); }
.cdc-notice--danger { background: var(--cdc-danger-soft); border-color: var(--cdc-danger-line); border-left-color: var(--cdc-danger); }
.cdc-notice--danger .cdc-notice__icon { color: var(--cdc-danger); }

/* ---- 4.12 Skeleton · shimmer rápido (loading feels faster) ------------ */
/* Spinner rápido = app se siente más rápida (mismo load time, perception) */
.cdc-skeleton {
    background:
        linear-gradient(90deg,
            var(--cdc-border-subtle) 0%,
            var(--cdc-surface-well) 40%,
            var(--cdc-border-subtle) 80%);
    background-size: 200% 100%;
    animation: cdcShimmer 1.2s ease-in-out infinite;
    border-radius: var(--cdc-radius-sm);
}
@keyframes cdcShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- 4.13 KBD · tecla mono limpia -------------------------------------- */
.cdc-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    min-width: 22px;
    height: 20px;
    font-family: var(--cdc-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cdc-soil);
    background: var(--cdc-surface-card);
    border: 1px solid var(--cdc-border);
    border-bottom-width: 1.5px;
    border-radius: var(--cdc-radius-xs);
    line-height: 1;
    letter-spacing: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4·B · AGRO PREMIUM PRIMITIVES
   Patrones especializados del dominio agrícola: field cards, crop health,
   sparklines, layer toggles, risk banners, confidence badges, KPI hero.
   Inspirados en Climate FieldView, John Deere Operations Center, AgriWebb
   y guías de UI agro-resistente (alta legibilidad outdoor / luz solar 10k lux).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- 4.B.1 KPI Hero · "north star metric" tipo Vercel/Stripe ----------- */
/* Para el dato más importante de la pantalla (yield/ha total, sup. campaña). */
.cdc-stat--hero {
    padding: 24px 28px;
}
.cdc-stat--hero .cdc-stat__value,
.cdc-stat__value--hero {
    font-size: clamp(2.25rem, 2.5vw + 1rem, 3rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1;
    font-variation-settings: "wght" 700;
}
.cdc-stat--hero .cdc-stat__label,
.cdc-stat__label--hero {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cdc-soil);
    letter-spacing: 0;
    text-transform: none;
}
.cdc-stat__unit {
    font-size: 0.65em;
    font-weight: 500;
    color: var(--cdc-bark);
    margin-left: 4px;
    letter-spacing: 0;
    font-variation-settings: "wght" 500;
}

/* ---- 4.B.2 Sparkline · mini-trend SVG/CSS-only en KPI ------------------ */
/* Container 80x24 para un sparkline svg embedded. */
.cdc-sparkline {
    display: inline-block;
    width: 80px;
    height: 24px;
    vertical-align: middle;
    color: var(--cdc-forest);
}
.cdc-sparkline--danger { color: var(--cdc-danger); }
.cdc-sparkline--cobalt { color: var(--cdc-cobalt); }
.cdc-sparkline--amber  { color: var(--cdc-amber); }
.cdc-sparkline svg,
.cdc-sparkline path,
.cdc-sparkline polyline {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

/* ---- 4.B.3 Field Card · parcela con map slot + KPI strip --------------- */
/* Patrón Climate FieldView: header con cultivo+sup, map preview, KPI strip. */
.cdc-field-card {
    background: var(--cdc-surface-card);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-lg);
    overflow: hidden;
    box-shadow: var(--cdc-shadow-sm);
    transition:
        transform var(--cdc-dur-base) var(--cdc-ease-out),
        box-shadow var(--cdc-dur-base) var(--cdc-ease-out),
        border-color var(--cdc-dur-fast);
    display: flex;
    flex-direction: column;
}
@media (hover: hover) and (pointer: fine) {
    .cdc-field-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--cdc-shadow-card-hover);
        border-color: var(--cdc-forest-line);
    }
}
.cdc-field-card__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--cdc-border-subtle);
}
.cdc-field-card__title {
    flex: 1;
    min-width: 0;
}
.cdc-field-card__crop {
    font-family: var(--cdc-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--cdc-ink);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}
.cdc-field-card__sub {
    font-family: var(--cdc-sans);
    font-size: 0.8125rem;
    color: var(--cdc-bark);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}
.cdc-field-card__sub strong {
    color: var(--cdc-soil);
    font-weight: 600;
}
/* Map slot · superficie aspect-ratio para preview NDVI/satélite */
.cdc-field-card__map {
    aspect-ratio: 16 / 9;
    background:
        linear-gradient(135deg,
            #166534 0%,
            #15803D 30%,
            #65A30D 60%,
            #84CC16 100%);   /* fallback verde si no hay imagen */
    position: relative;
    overflow: hidden;
}
.cdc-field-card__map img,
.cdc-field-card__map svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Overlay hairline para hairline highlight al borde del mapa */
.cdc-field-card__map::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    pointer-events: none;
}
/* KPI strip horizontal · 3-4 valores tabulares */
.cdc-field-card__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    padding: 10px 14px 12px;
    gap: 10px;
}
.cdc-field-card__kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cdc-field-card__kpi-val {
    font-family: var(--cdc-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--cdc-ink);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "lnum";
}
.cdc-field-card__kpi-lab {
    font-family: var(--cdc-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--cdc-bark);
    text-transform: none;
    letter-spacing: 0;
}

/* ---- 4.B.4 Crop Health Meter · 5-step indicator ----------------------- */
/* Indicador visual: excelente / bueno / atención / riesgo / crítico */
.cdc-health {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 8px;
    border-radius: var(--cdc-radius-pill);
    background: var(--cdc-surface-card);
    border: 1px solid var(--cdc-border);
    font-family: var(--cdc-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cdc-soil);
    line-height: 1.2;
}
.cdc-health__bars {
    display: inline-flex;
    gap: 2px;
    align-items: end;
}
.cdc-health__bar {
    width: 3px;
    background: var(--cdc-border-strong);
    border-radius: 1px;
    transition: background var(--cdc-dur-fast);
}
.cdc-health__bar:nth-child(1) { height: 6px; }
.cdc-health__bar:nth-child(2) { height: 9px; }
.cdc-health__bar:nth-child(3) { height: 12px; }
.cdc-health__bar:nth-child(4) { height: 15px; }
.cdc-health__bar:nth-child(5) { height: 18px; }

/* Estados según .cdc-health--{level} (1=critical, 5=excellent) */
.cdc-health--1 .cdc-health__bar:nth-child(-n+1) { background: var(--cdc-danger); }
.cdc-health--1 { color: var(--cdc-danger); border-color: var(--cdc-danger-line); background: var(--cdc-danger-soft); }
.cdc-health--2 .cdc-health__bar:nth-child(-n+2) { background: var(--cdc-amber); }
.cdc-health--2 { color: var(--cdc-amber); border-color: var(--cdc-amber-line); background: var(--cdc-amber-soft); }
.cdc-health--3 .cdc-health__bar:nth-child(-n+3) { background: var(--cdc-amber-2); }
.cdc-health--3 { color: var(--cdc-amber); border-color: var(--cdc-amber-line); background: var(--cdc-amber-soft); }
.cdc-health--4 .cdc-health__bar:nth-child(-n+4) { background: var(--cdc-forest-2); }
.cdc-health--4 { color: var(--cdc-forest); border-color: var(--cdc-forest-line); background: var(--cdc-forest-soft); }
.cdc-health--5 .cdc-health__bar { background: var(--cdc-forest); }
.cdc-health--5 { color: var(--cdc-forest); border-color: var(--cdc-forest-line); background: var(--cdc-forest-soft); }

/* ---- 4.B.5 Risk Banner · severidad agronómica con enter premium ------ */
.cdc-risk {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--cdc-radius-md);
    background: var(--cdc-amber-soft);
    border: 1px solid var(--cdc-amber-line);
    border-left: 4px solid var(--cdc-amber);
    color: var(--cdc-ink);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 1px 3px rgba(180, 83, 9, 0.06);
    position: relative;
    /* Entry desde scale(0.98) + opacity — never from scale(0) */
    animation: cdcRiskEnter var(--cdc-dur-base) var(--cdc-ease-out) both;
}
@keyframes cdcRiskEnter {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.cdc-risk__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--cdc-radius-md);
    background: var(--cdc-amber-solid);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.cdc-risk__body { flex: 1; min-width: 0; }
.cdc-risk__title {
    font-family: var(--cdc-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--cdc-ink);
    letter-spacing: -0.015em;
    line-height: 1.3;
    margin: 0 0 4px;
}
.cdc-risk__desc {
    font-family: var(--cdc-sans);
    font-size: 0.8125rem;
    color: var(--cdc-soil);
    line-height: 1.5;
    margin: 0;
}
.cdc-risk__meta {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-family: var(--cdc-sans);
    font-size: 0.75rem;
    color: var(--cdc-bark);
    font-variant-numeric: tabular-nums;
}
.cdc-risk__action {
    flex-shrink: 0;
}
/* Severidades */
.cdc-risk--info {
    background: var(--cdc-cobalt-soft);
    border-color: var(--cdc-cobalt-line);
    border-left-color: var(--cdc-cobalt);
}
.cdc-risk--info .cdc-risk__icon { background: var(--cdc-cobalt); }
.cdc-risk--success {
    background: var(--cdc-forest-soft);
    border-color: var(--cdc-forest-line);
    border-left-color: var(--cdc-forest);
}
.cdc-risk--success .cdc-risk__icon { background: var(--cdc-forest); }
.cdc-risk--danger {
    background: var(--cdc-danger-soft);
    border-color: var(--cdc-danger-line);
    border-left-color: var(--cdc-danger);
}
.cdc-risk--danger .cdc-risk__icon { background: var(--cdc-danger); }
.cdc-risk--critical {
    background: var(--cdc-danger);
    border-color: #991B1B;
    border-left-color: #991B1B;
    color: #fff;
    animation: cdcRiskPulse 2s ease-in-out infinite;
}
.cdc-risk--critical .cdc-risk__icon { background: #fff; color: var(--cdc-danger); }
.cdc-risk--critical .cdc-risk__title,
.cdc-risk--critical .cdc-risk__desc,
.cdc-risk--critical .cdc-risk__meta { color: #fff; }
@keyframes cdcRiskPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.40); }
    50%      { box-shadow: 0 0 0 8px rgba(185, 28, 28, 0.0); }
}

/* ---- 4.B.6 Confidence Badge · AI suggestions agro --------------------- */
/* Pill que muestra el % de confianza de una sugerencia AI/agronómica */
.cdc-confidence {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 7px;
    border-radius: var(--cdc-radius-pill);
    background: var(--cdc-cobalt-soft);
    border: 1px solid var(--cdc-cobalt-line);
    color: var(--cdc-cobalt-deep);
    font-family: var(--cdc-sans);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.cdc-confidence__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cdc-cobalt);
    box-shadow: 0 0 6px rgba(37, 99, 235, 0.50);
}
.cdc-confidence--high {
    background: var(--cdc-forest-soft);
    border-color: var(--cdc-forest-line);
    color: var(--cdc-forest-deep);
}
.cdc-confidence--high .cdc-confidence__dot {
    background: var(--cdc-forest);
    box-shadow: 0 0 6px rgba(21, 128, 61, 0.50);
}
.cdc-confidence--low {
    background: var(--cdc-amber-soft);
    border-color: var(--cdc-amber-line);
    color: var(--cdc-amber);
}
.cdc-confidence--low .cdc-confidence__dot {
    background: var(--cdc-amber);
    box-shadow: 0 0 6px rgba(180, 83, 9, 0.50);
}

/* ---- 4.B.7 Layer Toggle · NDVI / satélite / parcelas ------------------ */
/* Cluster de toggles para activar capas en el mapa */
.cdc-layers {
    display: inline-flex;
    flex-direction: column;
    background: var(--cdc-surface-card);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-md);
    padding: 4px;
    gap: 2px;
    box-shadow: var(--cdc-shadow-md);
    min-width: 200px;
}
.cdc-layers__title {
    font-family: var(--cdc-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--cdc-bark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 8px 4px;
}
.cdc-layer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--cdc-radius-sm);
    cursor: pointer;
    transition: background var(--cdc-dur-fast);
    font-family: var(--cdc-sans);
    font-size: 0.8125rem;
    color: var(--cdc-soil);
    user-select: none;
}
.cdc-layer:hover { background: var(--cdc-surface-well); color: var(--cdc-ink); }
.cdc-layer__swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid var(--cdc-border-strong);
}
.cdc-layer__name { flex: 1; }
.cdc-layer__check {
    flex-shrink: 0;
    color: var(--cdc-forest);
    font-size: 0.85em;
    opacity: 0;
    transition: opacity var(--cdc-dur-fast);
}
.cdc-layer.is-active .cdc-layer__check { opacity: 1; }
.cdc-layer.is-active { background: var(--cdc-forest-soft); color: var(--cdc-forest-deep); font-weight: 600; }
.cdc-layer.is-active .cdc-layer__swatch { border-color: var(--cdc-forest); }

/* ---- 4.B.8 Crop Status Badge · estado fenológico ---------------------- */
/* Badge para el estado del cultivo: siembra, brotación, floración, etc. */
.cdc-crop-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px 2px 6px;
    border-radius: var(--cdc-radius-pill);
    background: var(--cdc-surface-well);
    color: var(--cdc-soil);
    font-family: var(--cdc-sans);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid var(--cdc-border);
}
.cdc-crop-status__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.cdc-crop-status--siembra    { background: rgba(180, 83, 9, 0.10);  color: #92400E; border-color: rgba(146, 64, 14, 0.25); }
.cdc-crop-status--brotacion  { background: rgba(101, 163, 13, 0.10); color: #4D7C0F; border-color: rgba(77, 124, 15, 0.25); }
.cdc-crop-status--floracion  { background: rgba(219, 39, 119, 0.10); color: #BE185D; border-color: rgba(190, 24, 93, 0.25); }
.cdc-crop-status--cuajado    { background: rgba(202, 138, 4, 0.10);  color: #A16207; border-color: rgba(161, 98, 7, 0.25); }
.cdc-crop-status--maduracion { background: rgba(217, 119, 6, 0.10);  color: #B45309; border-color: rgba(180, 83, 9, 0.25); }
.cdc-crop-status--cosecha    { background: rgba(21, 128, 61, 0.10);  color: var(--cdc-forest-deep); border-color: var(--cdc-forest-line); }
.cdc-crop-status--barbecho   { background: rgba(120, 113, 108, 0.10); color: #57534E; border-color: rgba(87, 83, 78, 0.25); }

/* ---- 4.B.9 Meter Bar · progress riego/yield --------------------------- */
/* Barra de progreso premium con label y % */
.cdc-meter {
    display: block;
    width: 100%;
}
.cdc-meter__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 8px;
}
.cdc-meter__label {
    font-family: var(--cdc-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cdc-soil);
}
.cdc-meter__val {
    font-family: var(--cdc-display);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--cdc-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.cdc-meter__track {
    height: 8px;
    background: var(--cdc-border-subtle);
    border-radius: var(--cdc-radius-pill);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}
.cdc-meter__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cdc-forest) 0%, var(--cdc-forest-2) 100%);
    border-radius: var(--cdc-radius-pill);
    transition: width var(--cdc-dur-graceful) var(--cdc-ease-out);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 0 8px rgba(34, 197, 94, 0.25);
    position: relative;
}
.cdc-meter--cobalt .cdc-meter__fill { background: linear-gradient(90deg, var(--cdc-cobalt) 0%, var(--cdc-cobalt-2) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 0 8px rgba(37,99,235,0.25); }
.cdc-meter--amber  .cdc-meter__fill { background: linear-gradient(90deg, var(--cdc-amber) 0%, var(--cdc-amber-2) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 0 8px rgba(180,83,9,0.25); }
.cdc-meter--danger .cdc-meter__fill { background: linear-gradient(90deg, var(--cdc-danger) 0%, var(--cdc-danger-2) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 0 8px rgba(185,28,28,0.25); }

/* ---- 4.B.10 cdc-btn--field · touch target 48px para uso en campo ------ */
/* Variant para botones críticos en pantallas que se usan en exterior */
.cdc-btn--field {
    min-height: 48px !important;
    padding: 12px 20px !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    letter-spacing: 0;
}
.cdc-btn--field.cdc-btn--sm {
    min-height: 44px !important;
    padding: 10px 16px !important;
}

/* ---- 4.B.11 cdc-glass · panel translúcido sobre mapa ------------------ */
/* Para overlays sobre map: filtros, leyenda, info parcela activa */
.cdc-glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--cdc-radius-md);
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.10),
        0 8px 24px -4px rgba(15, 23, 42, 0.14);
    padding: 12px 14px;
    color: var(--cdc-ink);
}
[data-theme="dark"] .cdc-glass {
    background: rgba(19, 28, 46, 0.78);
    border-color: rgba(255, 255, 255, 0.08);
}


/* ═══════════════════════════════════════════════════════════════════════════
   5 · ACTUALIZACIONES A CLASES EXISTENTES (.page-heading, .stat-card, etc.)
   Todas las páginas las usan — al actualizarlas aquí, se redecora
   automáticamente todo el producto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- 5.1 .page-heading → enterprise ----------------------------------- */
.page-heading,
.page-header {
    background: transparent !important;
    padding: 0 0 16px !important;
    margin: 0 0 24px !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--cdc-border);
    position: relative;
}
.page-heading::after,
.page-header::after { content: none; }   /* sin barra dorada */

.page-heading h1,
.page-heading h2,
.page-header h1,
.page-header h2 {
    font-family: var(--cdc-display) !important;
    font-weight: 700 !important;
    color: var(--cdc-ink) !important;
    letter-spacing: -0.035em !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    font-size: clamp(1.625rem, 1.8vw + 0.85rem, 2.125rem) !important;
}
.page-heading .page-subtitle,
.page-heading .subtitle,
.page-header .page-subtitle,
.page-header .subtitle,
.page-header .text-muted,
.page-header p {
    font-family: var(--cdc-sans) !important;
    font-style: normal !important;
    font-size: 0.9375rem !important;
    color: var(--cdc-soil) !important;
    line-height: 1.55 !important;
    margin: 6px 0 0 !important;
    font-weight: 400 !important;
}

/* Badge "año" dentro del heading · cobalt enterprise */
.badge-year {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-family: var(--cdc-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--cdc-radius-pill);
    background: var(--cdc-cobalt-soft);
    color: var(--cdc-cobalt);
    border: 1px solid var(--cdc-cobalt-line);
    font-variant-numeric: tabular-nums;
}

/* ---- 5.2 .section-heading → enterprise -------------------------------- */
.section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--cdc-display) !important;
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    color: var(--cdc-ink) !important;
    letter-spacing: -0.015em !important;
    margin: 28px 0 14px !important;
    padding: 0 !important;
}
.section-heading::before {
    content: "";
    width: 3px;
    height: 16px;
    background: var(--cdc-forest);
    border-radius: var(--cdc-radius-pill);
    flex-shrink: 0;
}
.section-heading i:first-child {
    color: var(--cdc-forest);
    font-size: 0.95rem;
}

/* ---- 5.3 .tf-card → enterprise ---------------------------------------- */
.tf-card {
    background: var(--cdc-surface-card) !important;
    border: 1px solid var(--cdc-border) !important;
    border-radius: var(--cdc-radius-lg) !important;
    box-shadow: var(--cdc-shadow-sm) !important;
    padding: 20px 22px !important;
    transition:
        box-shadow var(--cdc-dur-base) var(--cdc-ease-out),
        border-color var(--cdc-dur-fast) !important;
}
.tf-card:hover {
    border-color: var(--cdc-border-strong) !important;
    box-shadow: var(--cdc-shadow-card-hover) !important;
}
.tf-card-clickable:hover {
    transform: translateY(-1px);
    cursor: pointer;
}

/* ---- 5.4 .stat-card → enterprise -------------------------------------- */
.stat-card {
    background: var(--cdc-surface-card) !important;
    border: 1px solid var(--cdc-border) !important;
    border-radius: var(--cdc-radius-lg) !important;
    box-shadow: var(--cdc-shadow-sm) !important;
    padding: 18px 20px !important;
    position: relative;
    overflow: hidden;
    transition:
        transform var(--cdc-dur-base) var(--cdc-ease-out),
        box-shadow var(--cdc-dur-base) var(--cdc-ease-out),
        border-color var(--cdc-dur-fast) !important;
}
.stat-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--cdc-forest);
}
.stat-card:hover {
    transform: translateY(-1px);
    border-color: var(--cdc-border-strong) !important;
    box-shadow: var(--cdc-shadow-card-hover) !important;
}
.stat-card-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--cdc-radius-md) !important;
    font-size: 1rem !important;
    border: 1px solid var(--cdc-forest-line);
    background: var(--cdc-forest-soft) !important;
    color: var(--cdc-forest) !important;
}
.stat-card-icon.green  { background: var(--cdc-forest-soft) !important; color: var(--cdc-forest) !important; border-color: var(--cdc-forest-line); }
.stat-card-icon.blue   { background: var(--cdc-cobalt-soft) !important; color: var(--cdc-cobalt) !important; border-color: var(--cdc-cobalt-line); }
.stat-card-icon.gold   { background: var(--cdc-amber-soft) !important; color: var(--cdc-amber) !important; border-color: var(--cdc-amber-line); }
.stat-card-icon.red    { background: var(--cdc-danger-soft) !important; color: var(--cdc-danger) !important; border-color: var(--cdc-danger-line); }
.stat-card-icon.orange { background: var(--cdc-ochre-soft) !important; color: var(--cdc-ochre) !important; border-color: rgba(194,65,12,0.28); }

/* Barra lateral del stat-card según color del icono */
.stat-card:has(.stat-card-icon.green)  { --_stat-accent: var(--cdc-forest); }
.stat-card:has(.stat-card-icon.blue)   { --_stat-accent: var(--cdc-cobalt); }
.stat-card:has(.stat-card-icon.gold)   { --_stat-accent: var(--cdc-amber); }
.stat-card:has(.stat-card-icon.red)    { --_stat-accent: var(--cdc-danger); }
.stat-card:has(.stat-card-icon.orange) { --_stat-accent: var(--cdc-ochre); }
.stat-card::before { background: var(--_stat-accent, var(--cdc-forest)); }

.stat-card-content { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat-card-value {
    font-family: var(--cdc-display) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--cdc-ink) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "lnum";
}
.stat-card-label {
    font-family: var(--cdc-sans) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--cdc-bark) !important;
}

/* ---- 5.5 .quick-card → enterprise ------------------------------------- */
.quick-card {
    background: var(--cdc-surface-card) !important;
    border: 1px solid var(--cdc-border) !important;
    border-radius: var(--cdc-radius-lg) !important;
    padding: 20px !important;
    box-shadow: var(--cdc-shadow-sm) !important;
    transition:
        transform var(--cdc-dur-base) var(--cdc-ease-out),
        box-shadow var(--cdc-dur-base),
        border-color var(--cdc-dur-fast) !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.quick-card:hover {
    transform: translateY(-2px);     /* sin rotate ornamental */
    border-color: var(--cdc-forest-line) !important;
    box-shadow: var(--cdc-shadow-card-hover) !important;
}
.quick-card::after { content: none; }   /* sin gradiente radial */

.quick-card-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--cdc-radius-md) !important;
    font-size: 1.1rem !important;
    margin-bottom: 12px;
    border: 1px solid var(--cdc-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--cdc-dur-base) var(--cdc-ease-out);
}
.quick-card:hover .quick-card-icon { transform: scale(1.05); }   /* sin rotate */

.quick-card-icon.icon-green  { background: var(--cdc-forest-soft) !important; color: var(--cdc-forest) !important; border-color: var(--cdc-forest-line); }
.quick-card-icon.icon-blue   { background: var(--cdc-cobalt-soft) !important; color: var(--cdc-cobalt) !important; border-color: var(--cdc-cobalt-line); }
.quick-card-icon.icon-gold   { background: var(--cdc-amber-soft) !important; color: var(--cdc-amber) !important; border-color: var(--cdc-amber-line); }
.quick-card-icon.icon-red    { background: var(--cdc-danger-soft) !important; color: var(--cdc-danger) !important; border-color: var(--cdc-danger-line); }
.quick-card-icon.icon-orange { background: var(--cdc-ochre-soft) !important; color: var(--cdc-ochre) !important; border-color: rgba(194,65,12,0.28); }

.quick-card-title {
    font-family: var(--cdc-display) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--cdc-ink) !important;
    letter-spacing: -0.015em !important;
    margin-bottom: 4px;
}
.quick-card-desc {
    font-family: var(--cdc-sans) !important;
    font-style: normal !important;
    font-size: 0.875rem !important;
    color: var(--cdc-soil) !important;
    line-height: 1.5 !important;
}

/* ---- 5.6 Grids (stats + quick-access) ---------------------------------- */
.stats-grid,
.quick-access-grid {
    display: grid;
    gap: 16px;
}
.stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-bottom: 22px;
}
.quick-access-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-bottom: 18px;
}

/* ---- 5.7 Stagger entrance · Emil 40-60ms entre items ------------------- */
/* Bajo 300ms total · cascading natural · scale(0.96) no scale(0). */
.animate-in {
    animation: cdcEnter 280ms var(--cdc-ease-out) both;
}
@keyframes cdcEnter {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.stagger-1 { animation-delay: 40ms; }
.stagger-2 { animation-delay: 80ms; }
.stagger-3 { animation-delay: 120ms; }
.stagger-4 { animation-delay: 160ms; }
.stagger-5 { animation-delay: 200ms; }
.stagger-6 { animation-delay: 240ms; }

/* Stagger automático para hijos directos via CSS variable --i */
.tf-stagger-list > * {
    animation: cdcEnter 280ms var(--cdc-ease-out) both;
    animation-delay: calc(var(--i, 0) * 50ms);
}


/* ═══════════════════════════════════════════════════════════════════════════
   6 · SKIN EDITORIAL PARA RADZEN
   Sobrescribe los estilos de los componentes más usados: DataGrid, Dropdown,
   Button, TextBox, DatePicker, Dialog, Tabs, Switch, Checkbox, Pager.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- 6.1 DataGrid · premium estilo Linear/Stripe ----------------------- */
.rz-datatable,
.rz-grid-table,
.rz-data-grid {
    background: var(--cdc-surface-card) !important;
    border: 1px solid var(--cdc-border) !important;
    border-radius: var(--cdc-radius-lg) !important;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.02),
        0 1px 3px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    font-family: var(--cdc-sans) !important;
    color: var(--cdc-ink) !important;
}
/* La tabla NO recorta: con overflow hidden se convertia en el contenedor de desplazamiento de
   sus celdas y el position: sticky de Radzen no hacia nada. Las columnas fijas (Frozen) se iban
   con el resto al desplazar la rejilla, en toda la aplicacion. Las esquinas redondeadas ya las
   recorta .rz-data-grid, que sigue con overflow hidden. Medido el 02/10/2026 en vales de cosecha. */
.rz-grid-table {
    overflow: visible;
}
/* Header sticky con gradient sutil hacia abajo (efecto profundidad) */
.rz-grid-table thead,
.rz-data-grid thead {
    background:
        linear-gradient(180deg, var(--cdc-surface-well) 0%, var(--cdc-surface-card-alt) 100%) !important;
    border-bottom: 1px solid var(--cdc-border) !important;
    position: sticky;
    top: 0;
    z-index: 2;
}
/* Solo el titulo de la CABECERA: con Responsive="true" Radzen tambien pone
   .rz-column-title dentro de cada celda del cuerpo (la etiqueta de las fichas
   moviles), y a esos no les toca este traje. */
.rz-grid-table thead th,
.rz-data-grid thead th,
.rz-grid-table thead .rz-column-title,
.rz-data-grid thead .rz-column-title {
    font-family: var(--cdc-sans) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--cdc-soil) !important;
    padding: 10px 14px !important;
    border-right: 1px solid var(--cdc-border-subtle) !important;
    border-bottom: none !important;
    height: 40px;
    white-space: nowrap;
}
.rz-grid-table thead th:last-child,
.rz-data-grid thead th:last-child {
    border-right: none !important;
}

/* ---- Utilidad · listado ancho con scroll horizontal --------------------
   Un RadzenDataGrid con muchas columnas de ancho fijo NO se encoge con
   elegancia: reparte el sobrante entre las columnas automaticas hasta
   dejarlas en nada, trunca los titulos de cabecera hasta la primera letra
   ("N. Registro" -> "N") y deja la ultima columna cortada contra el borde.
   Medido en /maestras/dosis a 1440 px: 12 columnas que suman ~1.160 px de
   anchos fijos dentro de un area de contenido de ~1.160 px.

   Envolver el grid en `.cdc-grid-scroll` y fijar `--cdc-grid-min` a la suma
   de los anchos declarados: las columnas conservan su ancho y el usuario
   desplaza en horizontal, que es el comportamiento esperable en un listado
   ancho. Utilidad global a proposito: sirve para los 17 listados de maestras.
   ------------------------------------------------------------------------ */
.cdc-grid-scroll {
    overflow-x: auto;
    overflow-y: visible;
    /* Sin esto, el grid hereda el radio y la sombra y se ven cortados al
       desplazar; el contenedor asume el marco y el grid queda plano dentro. */
    border-radius: var(--cdc-radius-lg);
}

.cdc-grid-scroll > .rz-datatable,
.cdc-grid-scroll > .rz-data-grid,
.cdc-grid-scroll > .cdc-rejilla > .rz-datatable,
.cdc-grid-scroll > .cdc-rejilla > .rz-data-grid,
.cdc-grid-scroll .rz-grid-table {
    min-width: var(--cdc-grid-min, 1200px);
}
/* La rejilla de un listado que recuerda sus ajustes (PreferenciasDeRejilla) va dentro de este div, con un @if que no
   la crea hasta haberlos leído: no ocupa caja propia, así que la maquetación es la misma que sin él. */
.cdc-rejilla { display: contents; }
.rz-grid-table tbody tr,
.rz-data-grid tbody tr {
    border-bottom: 1px solid var(--cdc-border-subtle) !important;
    transition: background var(--cdc-dur-instant) ease;
}
.rz-grid-table tbody tr:last-child,
.rz-data-grid tbody tr:last-child {
    border-bottom: none !important;
}
.rz-grid-table tbody tr:hover,
.rz-data-grid tbody tr:hover {
    background: var(--cdc-cobalt-soft) !important;
}
.rz-grid-table tbody td,
.rz-data-grid tbody td,
.rz-cell-data {
    padding: 10px 14px !important;
    font-size: 0.875rem !important;
    color: var(--cdc-ink) !important;
    border: none !important;
    font-variant-numeric: tabular-nums;
    height: 44px;
    vertical-align: middle;
}
/* Sin zebra · borders puros premium */
.rz-grid-table tbody tr:nth-child(even):not(:hover),
.rz-data-grid tbody tr:nth-child(even):not(:hover) {
    background: transparent;
}
/* Selection · ring cobalt sólido tipo Linear */
.rz-grid-table tbody tr.rz-state-highlight,
.rz-data-grid tbody tr.rz-state-highlight,
.rz-grid-table tbody tr.rz-selected,
.rz-data-grid tbody tr.rz-selected {
    background: var(--cdc-cobalt-soft) !important;
    color: var(--cdc-ink);
    box-shadow:
        inset 3px 0 0 var(--cdc-cobalt),
        inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}

/* Paginador enterprise */
.rz-paginator {
    background: var(--cdc-surface-card) !important;
    border-top: 1px solid var(--cdc-border) !important;
    padding: 8px 12px !important;
    font-family: var(--cdc-sans) !important;
    font-size: 0.8125rem !important;
    color: var(--cdc-soil) !important;
}
.rz-paginator .rz-paginator-element {
    color: var(--cdc-soil) !important;
    border-radius: var(--cdc-radius-sm) !important;
    padding: 4px 10px !important;
    min-width: 28px;
    min-height: 28px;
    transition: background var(--cdc-dur-fast), color var(--cdc-dur-fast);
}
.rz-paginator .rz-paginator-element:hover {
    background: var(--cdc-surface-well) !important;
    color: var(--cdc-ink) !important;
}
.rz-paginator .rz-paginator-element.rz-state-active {
    background: var(--cdc-forest-solid) !important;
    color: #fff !important;
    font-weight: 600;
}

/* ---- 6.2 Dropdown · enterprise select --------------------------------- */
.rz-dropdown,
.rz-multiselect,
.rz-listbox {
    background: var(--cdc-surface-card) !important;
    border: 1px solid var(--cdc-border) !important;
    border-radius: var(--cdc-radius-md) !important;
    min-height: 38px !important;
    transition:
        border-color var(--cdc-dur-fast),
        box-shadow var(--cdc-dur-fast) !important;
    box-shadow: var(--cdc-shadow-xs) !important;
    color: var(--cdc-ink) !important;
    font-family: var(--cdc-sans) !important;
}
.rz-dropdown:hover,
.rz-multiselect:hover {
    border-color: var(--cdc-border-strong) !important;
}
.rz-dropdown.rz-state-focused,
.rz-multiselect.rz-state-focused {
    border-color: var(--cdc-cobalt) !important;
    box-shadow: var(--cdc-ring-input-cobalt) !important;
}
.rz-dropdown .rz-dropdown-label,
.rz-inputtext,
.rz-dropdown-label {
    color: var(--cdc-ink) !important;
    font-family: var(--cdc-sans) !important;
    font-size: 0.9375rem !important;
}
.rz-placeholder {
    color: var(--cdc-mute) !important;
    font-style: normal;
}

.rz-dropdown-panel,
.rz-multiselect-panel,
.rz-overlaypanel {
    background: var(--cdc-surface-card) !important;
    border: 1px solid var(--cdc-border) !important;
    border-radius: var(--cdc-radius-md) !important;
    box-shadow: var(--cdc-shadow-lg) !important;
    padding: 4px !important;
    /* Popover entry desde top (anclado al trigger arriba) — Emil's
       transform-origin awareness. NUNCA scale(0) — empieza desde 0.97. */
    transform-origin: top center;
    /* IMPORTANTE: la animation NO va aqui directa — Radzen 10.x cierra el
       popup mediante `onanimationend` despues de anadir la clase `.rz-close`
       (ver Radzen.Blazor.js #closePopup). Si ponemos una animation con
       `both` en el selector base, se aplica permanente y sobrescribe el
       `.rz-close` keyframe → el popup NUNCA dispara animationend → no
       se cierra al seleccionar un item. Hay que separar enter/exit en
       selectores `.rz-open` / `.rz-close`. */
}

/* Animacion de entrada — solo cuando Radzen anade la clase `rz-open` */
.rz-dropdown-panel.rz-open,
.rz-multiselect-panel.rz-open,
.rz-overlaypanel.rz-open {
    animation: cdcPopoverEnter var(--cdc-dur-fast) var(--cdc-ease-out) both;
}

/* Animacion de salida — Radzen anade `rz-close` y espera `onanimationend`.
   Si NO definimos una animation aqui, animationend nunca dispara y el
   popup queda visible (display sigue siendo block). */
.rz-dropdown-panel.rz-close,
.rz-multiselect-panel.rz-close,
.rz-overlaypanel.rz-close {
    animation: cdcPopoverExit var(--cdc-dur-exit) var(--cdc-ease-out) both;
}

@keyframes cdcPopoverEnter {
    from { opacity: 0; transform: scale(0.97) translateY(-4px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
@keyframes cdcPopoverExit {
    from { opacity: 1; transform: scale(1)    translateY(0); }
    to   { opacity: 0; transform: scale(0.97) translateY(-4px); }
}
.rz-dropdown-item,
.rz-multiselect-item {
    padding: 8px 10px !important;
    border-radius: var(--cdc-radius-sm) !important;
    font-family: var(--cdc-sans) !important;
    font-size: 0.9375rem !important;
    color: var(--cdc-ink) !important;
    transition: background var(--cdc-dur-instant), color var(--cdc-dur-instant);
}
.rz-dropdown-item:hover,
.rz-multiselect-item:hover {
    background: var(--cdc-surface-well) !important;
    color: var(--cdc-ink) !important;
}
.rz-dropdown-item.rz-state-highlight,
.rz-multiselect-item.rz-state-highlight {
    background: var(--cdc-cobalt-soft) !important;
    color: var(--cdc-cobalt-deep) !important;
    font-weight: 600;
}

/* ---- 6.3 TextBox / TextArea / Password / Numeric · enterprise inputs --- */
.rz-textbox,
.rz-textarea,
.rz-password,
.rz-numeric,
.rz-mask,
.rz-autocomplete {
    background: var(--cdc-surface-card) !important;
    border: 1px solid var(--cdc-border) !important;
    border-radius: var(--cdc-radius-md) !important;
    font-family: var(--cdc-sans) !important;
    font-size: 0.9375rem !important;
    color: var(--cdc-ink) !important;
    padding: 8px 12px !important;
    box-shadow: var(--cdc-shadow-xs) !important;
    min-height: 38px !important;
    transition:
        border-color var(--cdc-dur-fast),
        box-shadow var(--cdc-dur-fast) !important;
}
.rz-textbox:focus,
.rz-textarea:focus,
.rz-password:focus,
.rz-numeric:focus,
.rz-autocomplete:focus,
.rz-textbox.rz-state-focused,
.rz-numeric.rz-state-focused,
.rz-password.rz-state-focused,
.rz-autocomplete.rz-state-focused {
    outline: none !important;
    border-color: var(--cdc-cobalt) !important;
    box-shadow: var(--cdc-ring-input-cobalt) !important;
    background: var(--cdc-surface-card) !important;
}
.rz-textbox::placeholder,
.rz-textarea::placeholder,
.rz-password::placeholder {
    color: var(--cdc-mute) !important;
    font-style: normal;
}

/* ---- 6.4 Button · scale(0.97) feedback Emil-style --------------------- */
.rz-button {
    font-family: var(--cdc-sans) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    letter-spacing: 0 !important;
    /* El tema de Radzen pone los botones en MAYUSCULAS y los nuestros (.cdc-btn) van en
       caja normal, asi que cualquier pantalla que mezcle los dos —y las mezclan casi
       todas— ensena dos idiomas a la vez. Se normaliza aqui, donde ya se normaliza el
       resto de la tipografia del boton, y no pantalla por pantalla. */
    text-transform: none !important;
    border-radius: var(--cdc-radius-md) !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    transition:
        background var(--cdc-dur-fast) var(--cdc-ease-out),
        border-color var(--cdc-dur-fast) var(--cdc-ease-out),
        box-shadow var(--cdc-dur-fast) var(--cdc-ease-out),
        transform var(--cdc-dur-instant) var(--cdc-ease-out) !important;
    border: 1px solid transparent !important;
    touch-action: manipulation;
}
/* scale(0.97) Emil — feedback inmediato al presionar */
.rz-button:not(:disabled):active { transform: scale(0.97); }
.rz-button:not(:disabled):focus-visible { box-shadow: var(--cdc-ring-cobalt) !important; }

/* Primary · sólido forest agro */
.rz-button.rz-button-primary,
.rz-button.rz-primary {
    background: var(--cdc-forest-solid) !important;
    color: #fff !important;
    border-color: var(--cdc-forest) !important;
    box-shadow: var(--cdc-shadow-xs) !important;
}
.rz-button.rz-button-primary:hover:not(:disabled),
.rz-button.rz-primary:hover:not(:disabled) {
    background: var(--cdc-forest-2) !important;
    border-color: var(--cdc-forest-2) !important;
}
.rz-button.rz-button-primary:focus-visible,
.rz-button.rz-primary:focus-visible { box-shadow: var(--cdc-ring-forest) !important; }

/* Secondary · outline slate */
.rz-button.rz-button-secondary,
.rz-button.rz-secondary,
.rz-button-outlined,
.rz-button.rz-variant-flat.rz-base {
    background: var(--cdc-surface-card) !important;
    color: var(--cdc-ink) !important;
    border-color: var(--cdc-border) !important;
    box-shadow: var(--cdc-shadow-xs) !important;
}
.rz-button.rz-button-secondary:hover:not(:disabled),
.rz-button.rz-secondary:hover:not(:disabled),
.rz-button-outlined:hover:not(:disabled) {
    background: var(--cdc-surface-card-alt) !important;
    border-color: var(--cdc-border-strong) !important;
    color: var(--cdc-ink) !important;
}

/* Danger · sólido red */
.rz-button.rz-danger {
    background: var(--cdc-danger-solid) !important;
    color: #fff !important;
    border-color: var(--cdc-danger) !important;
}
.rz-button.rz-danger:hover:not(:disabled) {
    background: var(--cdc-danger-2) !important;
    border-color: var(--cdc-danger-2) !important;
}
.rz-button.rz-danger:focus-visible { box-shadow: var(--cdc-ring-danger) !important; }

/* Info · cobalt enterprise */
.rz-button.rz-info {
    background: var(--cdc-cobalt-solid) !important;
    color: #fff !important;
    border-color: var(--cdc-cobalt) !important;
}
.rz-button.rz-info:hover:not(:disabled) {
    background: var(--cdc-cobalt-deep) !important;
    border-color: var(--cdc-cobalt-deep) !important;
}

/* Warning · sólido amber */
.rz-button.rz-warning {
    background: var(--cdc-amber-solid) !important;
    color: #fff !important;
    border-color: var(--cdc-amber) !important;
}
.rz-button.rz-warning:hover:not(:disabled) {
    background: var(--cdc-amber-2) !important;
    border-color: var(--cdc-amber-2) !important;
}

/* Success · sólido forest */
.rz-button.rz-success {
    background: var(--cdc-success) !important;
    color: #fff !important;
    border-color: var(--cdc-success) !important;
}
.rz-button.rz-success:hover:not(:disabled) {
    background: var(--cdc-forest-2) !important;
    border-color: var(--cdc-forest-2) !important;
}

/* Light/ghost · transparent */
.rz-button.rz-light,
.rz-button.rz-variant-text {
    background: transparent !important;
    color: var(--cdc-soil-2) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.rz-button.rz-light:hover:not(:disabled),
.rz-button.rz-variant-text:hover:not(:disabled) {
    background: var(--cdc-surface-well) !important;
    color: var(--cdc-ink) !important;
}

/* Small size */
.rz-button.rz-button-sm {
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 0.8125rem !important;
}

/* ---- 6.5 Dialog · enterprise modal con entry refinada ----------------- */
.rz-dialog,
.rz-dialog-wrapper .rz-dialog-content {
    background: var(--cdc-surface-card) !important;
    border: 1px solid var(--cdc-border) !important;
    border-radius: var(--cdc-radius-lg) !important;
    box-shadow: var(--cdc-shadow-xl) !important;
    font-family: var(--cdc-sans) !important;
    color: var(--cdc-ink) !important;
    position: relative;
    /* Entry desde scale(0.96) + opacity — never from scale(0).
       Modales mantienen transform-origin: center (no anclados a trigger). */
    animation: cdcDialogEnter var(--cdc-dur-slow) var(--cdc-ease-out) both;
    transform-origin: center;
}
@keyframes cdcDialogEnter {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.rz-dialog-mask,
.rz-overlay-mask {
    animation: cdcMaskFade var(--cdc-dur-fast) ease both;
}
@keyframes cdcMaskFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.rz-dialog-titlebar,
.rz-dialog-header {
    background: transparent !important;
    border-bottom: 1px solid var(--cdc-border) !important;
    padding: 16px 20px !important;
    position: relative;
}
.rz-dialog-titlebar::after,
.rz-dialog-header::after { content: none; }   /* sin barra dorada */

.rz-dialog-title,
.rz-dialog-titlebar .rz-dialog-title {
    font-family: var(--cdc-display) !important;
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    color: var(--cdc-ink) !important;
    letter-spacing: -0.015em !important;
}
.rz-dialog-content,
.rz-dialog-wrapper .rz-dialog-content {
    padding: 20px !important;
    color: var(--cdc-ink);
}
.rz-dialog-titlebar-close,
.rz-dialog-titlebar-icon {
    color: var(--cdc-bark) !important;
    transition: background var(--cdc-dur-fast), color var(--cdc-dur-fast);
    border-radius: var(--cdc-radius-sm);
}
.rz-dialog-titlebar-close:hover,
.rz-dialog-titlebar-icon:hover {
    background: var(--cdc-surface-well) !important;
    color: var(--cdc-ink) !important;
}
/* Scrim premium · slate-900 40% + saturate blur fuerte (coherente TFDialog) */
.rz-dialog-mask,
.rz-overlay-mask {
    background: rgba(15, 23, 42, 0.40) !important;
    backdrop-filter: saturate(150%) blur(8px);
    -webkit-backdrop-filter: saturate(150%) blur(8px);
}
[data-theme="dark"] .rz-dialog-mask,
[data-theme="dark"] .rz-overlay-mask {
    background: rgba(0, 0, 0, 0.55) !important;
}

/* ---- 6.6 Tabs · subrayado verde ----------------------------------------
   Radzen 10 pinta cada pestaña como <li role="presentation"><button role="tab">, con el
   icono y el título dentro (.rz-tabview-icon + .rz-tabview-title). Estas reglas se
   escribieron para las pestañas de antes, que eran <a>, y no alcanzaban al botón (medido el
   30/09/2026): el título llevaba su propio relleno dentro del del botón, se partía en tres
   líneas —pestañas de 146-158 px de ancho y hasta 115 de alto— y la ficha de tratamiento
   quedaba 836 px más ancha que un teléfono y 305 más que un portátil. El indicador de la
   activa tampoco se pintaba. Ahora el relleno es del botón, el título va en una línea y,
   cuando las pestañas no caben, la tira se desplaza en horizontal a cualquier ancho; el borde
   por el que queda contenido se difumina (lo marca pestanas-interop.js, que también trae a la
   vista la pestaña que se toca). Las reglas del <a> se quedan para el RadzenTabs que se pinte
   con enlaces. */
.rz-tabview .rz-tabview-nav,
.rz-tabview-nav {
    background: transparent !important;
    /* El filete va por dentro: con la tira desplazable (overflow) un borde de verdad recortaría
       el indicador de la activa, que se monta sobre él. */
    border-bottom: none !important;
    box-shadow: inset 0 -1px 0 var(--cdc-border);
    padding: 0 !important;
    gap: 0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.rz-tabview-nav::-webkit-scrollbar { display: none; }
/* Con ratón no hay gesto de arrastrar: la barra fina dice que la tira se mueve. */
@media (hover: hover) and (pointer: fine) {
    .rz-tabview-nav { scrollbar-width: thin; }
    .rz-tabview-nav::-webkit-scrollbar { display: block; height: 6px; }
}
.rz-tabview-nav[data-mas-derecha] {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
.rz-tabview-nav[data-mas-izquierda] {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
}
.rz-tabview-nav[data-mas-izquierda][data-mas-derecha] {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}
.rz-tabview .rz-tabview-nav li,
.rz-tabview-nav li {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
}
/* El foco de Radzen va en el li: hacia dentro, para que la tira no lo recorte. */
.rz-tabview-nav li.rz-state-focused { outline-offset: -2px; }
.rz-tabview .rz-tabview-nav li a,
.rz-tabview-nav li a,
.rz-tabview-nav li > button[role="tab"] {
    font-family: var(--cdc-sans) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
    color: var(--cdc-bark) !important;
    padding: 12px 14px !important;
    border: none !important;
    background: transparent !important;
    position: relative;
    white-space: nowrap;
    gap: 6px;
    transition: color var(--cdc-dur-fast) var(--cdc-ease-out),
                border-color var(--cdc-dur-base) var(--cdc-ease-out);
}
/* Solo el <a>: el botón no lleva borde, su indicador es el ::after de abajo, montado sobre el filete. */
.rz-tabview .rz-tabview-nav li a,
.rz-tabview-nav li a {
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px !important;
}
/* El título hereda del botón: con relleno propio era una segunda pestaña dentro de la primera. */
.rz-tabview-nav .rz-tabview-title {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
    letter-spacing: inherit !important;
    white-space: nowrap;
}
/* Indicator premium · gradient verde con glow sutil */
.rz-tabview .rz-tabview-nav li.rz-state-active a,
.rz-tabview-nav li.rz-state-active a,
.rz-tabview-nav li.rz-tabview-selected a,
.rz-tabview-nav li.rz-tabview-selected > button[role="tab"] {
    color: var(--cdc-ink) !important;
    border-bottom-color: var(--cdc-forest) !important;
    font-weight: 600 !important;
    background: transparent !important;
}
.rz-tabview .rz-tabview-nav li.rz-state-active a::after,
.rz-tabview-nav li.rz-state-active a::after,
.rz-tabview-nav li.rz-tabview-selected a::after,
.rz-tabview-nav li.rz-tabview-selected > button[role="tab"]::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cdc-forest), var(--cdc-forest-2));
    border-radius: 2px 2px 0 0;
    box-shadow: 0 0 8px rgba(21, 128, 61, 0.30);
    /* Indicator entrance — scale-x desde 0 con strong out (no scale 0 estático) */
    animation: cdcTabIndicator var(--cdc-dur-base) var(--cdc-ease-out) both;
    transform-origin: center;
}
@keyframes cdcTabIndicator {
    from { transform: scaleX(0.3); opacity: 0; }
    to   { transform: scaleX(1);   opacity: 1; }
}
.rz-tabview .rz-tabview-nav li a:hover,
.rz-tabview-nav li:not(.rz-state-active) a:hover,
.rz-tabview-nav li:not(.rz-tabview-selected):not(.rz-state-disabled) > button[role="tab"]:hover {
    color: var(--cdc-ink) !important;
    background: transparent !important;
}
.rz-tabview .rz-tabview-panels,
.rz-tabview-panels {
    background: transparent !important;
    padding: 20px 0 !important;
    border: none !important;
}

/* ---- 6.7 Checkbox / Switch / Radio ------------------------------------ */
.rz-chkbox-box,
.rz-checkbox-box {
    border: 1.5px solid var(--cdc-border-strong) !important;
    background: var(--cdc-surface-card) !important;
    border-radius: var(--cdc-radius-xs) !important;
    transition: background var(--cdc-dur-fast), border-color var(--cdc-dur-fast);
}
.rz-chkbox-box.rz-state-active,
.rz-checkbox-box.rz-state-active {
    background: var(--cdc-forest) !important;
    border-color: var(--cdc-forest) !important;
    color: #fff !important;
}
.rz-chkbox-box .rz-chkbox-icon,
.rz-checkbox-box .rz-checkbox-icon {
    color: #fff !important;
}

.rz-switch {
    background: var(--cdc-border-strong) !important;
    border-color: var(--cdc-border-strong) !important;
    border-radius: var(--cdc-radius-pill) !important;
}
.rz-switch.rz-state-active {
    background: var(--cdc-forest) !important;
    border-color: var(--cdc-forest) !important;
}
.rz-switch-circle {
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
}

/* ---- 6.8 Badge -------------------------------------------------------- */
.rz-badge {
    font-family: var(--cdc-sans) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0;
    text-transform: none;
    padding: 2px 8px !important;
    border-radius: var(--cdc-radius-pill) !important;
    border: 1px solid var(--cdc-border);
    background: var(--cdc-surface-well);
    color: var(--cdc-soil);
}

/* ---- 6.9 Notification / Toast ---------------------------------------- */
.rz-growl-item,
.rz-notification-item {
    background: var(--cdc-surface-card) !important;
    border: 1px solid var(--cdc-border) !important;
    border-left-width: 3px !important;
    border-radius: var(--cdc-radius-md) !important;
    box-shadow: var(--cdc-shadow-lg) !important;
    font-family: var(--cdc-sans) !important;
    color: var(--cdc-ink) !important;
    padding: 12px 16px !important;
}
.rz-growl-item.rz-growl-item-info,
.rz-notification-item.rz-notification-info    { border-left-color: var(--cdc-cobalt) !important; }
.rz-growl-item.rz-growl-item-success,
.rz-notification-item.rz-notification-success { border-left-color: var(--cdc-forest) !important; }
.rz-growl-item.rz-growl-item-warning,
.rz-notification-item.rz-notification-warning { border-left-color: var(--cdc-amber) !important; }
.rz-growl-item.rz-growl-item-error,
.rz-notification-item.rz-notification-error   { border-left-color: var(--cdc-danger) !important; }
.rz-growl-title,
.rz-notification-title {
    font-family: var(--cdc-display) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: var(--cdc-ink) !important;
    letter-spacing: -0.01em;
}

/* ---- 6.10 DatePicker / Calendar --------------------------------------- */
.rz-datepicker,
.rz-calendar {
    background: var(--cdc-surface-card) !important;
    border: 1px solid var(--cdc-border) !important;
    border-radius: var(--cdc-radius-md) !important;
    color: var(--cdc-ink) !important;
    font-family: var(--cdc-sans) !important;
}
.rz-datepicker-popup {
    background: var(--cdc-surface-card) !important;
    border: 1px solid var(--cdc-border) !important;
    border-radius: var(--cdc-radius-md) !important;
    box-shadow: var(--cdc-shadow-lg) !important;
    font-family: var(--cdc-sans) !important;
}
.rz-datepicker-calendar td.rz-datepicker-today a,
.rz-datepicker-calendar td.rz-state-highlight a {
    background: var(--cdc-cobalt-soft) !important;
    color: var(--cdc-cobalt-deep) !important;
    border-color: var(--cdc-cobalt-line) !important;
    font-weight: 600;
}
.rz-datepicker-calendar td.rz-state-active a {
    background: var(--cdc-forest-solid) !important;
    color: #fff !important;
    border-color: var(--cdc-forest) !important;
}
.rz-datepicker-header {
    font-family: var(--cdc-display) !important;
    color: var(--cdc-ink) !important;
    font-weight: 600;
    letter-spacing: -0.015em;
}

/* ---- 6.11 Panel --------------------------------------------------------- */
.rz-panel {
    background: var(--cdc-surface-card) !important;
    border: 1px solid var(--cdc-border) !important;
    border-radius: var(--cdc-radius-lg) !important;
    box-shadow: var(--cdc-shadow-sm) !important;
    color: var(--cdc-ink) !important;
}
.rz-panel-titlebar {
    background: var(--cdc-surface-well) !important;
    border-bottom: 1px solid var(--cdc-border) !important;
    padding: 12px 16px !important;
}
.rz-panel-titlebar .rz-panel-title {
    font-family: var(--cdc-display) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: var(--cdc-ink) !important;
    letter-spacing: -0.01em;
}

/* ---- 6.12 Card Radzen -------------------------------------------------- */
.rz-card {
    background: var(--cdc-surface-card) !important;
    border: 1px solid var(--cdc-border) !important;
    border-radius: var(--cdc-radius-lg) !important;
    box-shadow: var(--cdc-shadow-sm) !important;
    color: var(--cdc-ink) !important;
    font-family: var(--cdc-sans) !important;
}

/* ---- 6.13 Progress · sólido forest ------------------------------------ */
.rz-progressbar {
    background: var(--cdc-surface-well) !important;
    border-radius: var(--cdc-radius-pill) !important;
    overflow: hidden;
    height: 8px !important;
}
.rz-progressbar-value {
    background: var(--cdc-forest) !important;
    border-radius: var(--cdc-radius-pill) !important;
}

/* ---- 6.14 Tooltip · enter snappy + skip-delay subsequent (Emil) ------ */
.rz-tooltip,
.rz-tooltip-content {
    background: var(--cdc-ink) !important;
    color: #fff !important;
    font-family: var(--cdc-sans) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    border-radius: var(--cdc-radius-sm) !important;
    padding: 6px 10px !important;
    box-shadow: var(--cdc-shadow-lg) !important;
    transform-origin: center bottom;   /* ancla al trigger debajo */
    /* IMPORTANTE: la tooltip tambien usa Radzen.closePopup → onanimationend.
       NO ponemos animation aqui; va en .rz-open / .rz-close. */
}

.rz-tooltip-content.rz-open {
    animation: cdcTooltipEnter var(--cdc-dur-fast) var(--cdc-ease-out) both;
}
.rz-tooltip-content.rz-close {
    animation: cdcTooltipExit var(--cdc-dur-exit) var(--cdc-ease-out) both;
}

@keyframes cdcTooltipEnter {
    from { opacity: 0; transform: scale(0.97) translateY(2px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
@keyframes cdcTooltipExit {
    from { opacity: 1; transform: scale(1)    translateY(0); }
    to   { opacity: 0; transform: scale(0.97) translateY(2px); }
}
/* Skip animation tras primer tooltip — barra de iconos se siente más rápida */
.rz-tooltip[data-instant],
.rz-tooltip-content[data-instant] {
    animation-duration: 0ms !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7 · FORMULARIOS NATIVOS · enterprise inputs
   ═══════════════════════════════════════════════════════════════════════════ */
input[type="text"]:not(.rz-textbox):not(.rz-inputtext),
input[type="email"]:not(.rz-textbox),
input[type="password"]:not(.rz-textbox),
input[type="tel"]:not(.rz-textbox),
input[type="url"]:not(.rz-textbox),
input[type="search"]:not(.rz-textbox),
input[type="number"]:not(.rz-textbox),
input[type="date"]:not(.rz-textbox),
input[type="time"]:not(.rz-textbox),
textarea:not(.rz-textarea) {
    background: var(--cdc-surface-card);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-md);
    font-family: var(--cdc-sans);
    font-size: 0.9375rem;
    color: var(--cdc-ink);
    padding: 8px 12px;
    box-shadow: var(--cdc-shadow-xs);
    transition: border-color var(--cdc-dur-fast), box-shadow var(--cdc-dur-fast);
    min-height: 38px;
}
input[type="text"]:not(.rz-textbox):focus,
input[type="email"]:not(.rz-textbox):focus,
input[type="password"]:not(.rz-textbox):focus,
input[type="tel"]:not(.rz-textbox):focus,
input[type="url"]:not(.rz-textbox):focus,
input[type="search"]:not(.rz-textbox):focus,
input[type="number"]:not(.rz-textbox):focus,
input[type="date"]:not(.rz-textbox):focus,
input[type="time"]:not(.rz-textbox):focus,
textarea:not(.rz-textarea):focus {
    outline: none;
    border-color: var(--cdc-cobalt);
    box-shadow: var(--cdc-ring-input-cobalt);
    background: var(--cdc-surface-card);
}
/* El campo oculto con el que los desplegables de Radzen reciben el teclado y el lector de pantalla
   (.rz-helper-hidden-accessible) no es un campo del formulario. Radzen 12 lo esconde con opacidad y alto 0,
   y las dos reglas de arriba lo estiraban a 38 px: sobresalía 2 px de la caja del desplegable, el
   desplegable pasaba a tener scroll y Radzen cierra la lista en cuanto ese scroll se mueve (al ir a
   pulsar una opción, Playwright lo movía 1 px: medido el 02/10/2026 en el panel de ecorregímenes). */
.rz-helper-hidden-accessible input:not(.rz-textbox):not(.rz-inputtext)[type] {
    min-height: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   8 · SCROLLBARS · premium overlay-style tipo macOS
   ═══════════════════════════════════════════════════════════════════════════ */
*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18);
    border-radius: 12px;
    border: 3px solid transparent;
    background-clip: padding-box;
    transition: background var(--cdc-dur-fast);
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.32);
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:active {
    background: rgba(15, 23, 42, 0.45);
    background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
    background: transparent;
}
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.20) transparent;
}


/* ═══════════════════════════════════════════════════════════════════════════
   9 · SELECCIÓN DE TEXTO · cobalt premium con texto fuerte
   ═══════════════════════════════════════════════════════════════════════════ */
::selection {
    background: rgba(37, 99, 235, 0.22);
    color: var(--cdc-cobalt-deep);
    text-shadow: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10 · FOCUS RINGS GLOBALES · multi-layer estilo Geist
   ═══════════════════════════════════════════════════════════════════════════ */
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--cdc-ring-cobalt);
    border-radius: var(--cdc-radius-md);
}

/* Un fieldset no encoge por debajo de su contenido (min-inline-size: min-content por defecto): en el teléfono
   «Nueva línea de producto» se salía por la derecha (un fieldset de 833 px en un diálogo de 768; tarea 0.4 del plan
   «nota 10», 02/10). */
fieldset { min-inline-size: 0; }

/* Smooth scroll global */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   11 · MODO OSCURO · slate-900/950 con alto contraste
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    /* Surfaces — slate profundo */
    --cdc-surface-page:     #0B1120;   /* slate más profundo que slate-900 */
    --cdc-surface-paper:    #0F172A;   /* slate-900 */
    --cdc-surface-card:     #131C2E;   /* card ligeramente elevado */
    --cdc-surface-card-alt: #1A2438;   /* hover de fila */
    --cdc-surface-well:     #0A0F1C;   /* hundido */
    --cdc-surface-hover:    #24314A;   /* hover pulsado: un paso mas que -card-alt */
    --cdc-surface-soft:     #1A2438;
    --cdc-cream:            #131C2E;
    --cdc-paper:            #131C2E;
    --cdc-paper-2:          #1A2438;
    --cdc-bone:             #0A0F1C;

    /* Texto — high contrast */
    --cdc-ink:   #F1F5F9;   /* slate-100 */
    --cdc-ink-2: #E2E8F0;   /* slate-200 */
    --cdc-soil:  #CBD5E1;   /* slate-300 */
    --cdc-soil-2: #94A3B8;  /* slate-400 */
    --cdc-bark:  #94A3B8;
    /* #64748B era el MISMO valor que en claro: no invertia. Sobre la superficie
       oscura (#131C2E) daba 3.58:1, por debajo del 4.5:1 de WCAG AA, y afecta a
       todo el texto terciario de las paginas que aliasan su --*-ink-4 a este token.
       #A3AEC0 da 7.60:1 y mantiene la jerarquia respecto a --cdc-bark (#94A3B8). */
    --cdc-mute:  #A3AEC0;
    --cdc-mute-2: #8B97A8;
    /* El acento calido tampoco invertia (#C2410C fijo): como TEXTO sobre superficie
       oscura se quedaba en 3.29:1. #FB923C da 7.52:1. Ojo: donde el ochre se usa como
       FONDO con blanco encima hace falta un valor profundo, y para eso esta
       --cdc-ochre-solid, que es fijo a proposito. */
    --cdc-ochre:      #FB923C;
    --cdc-ochre-soft: rgba(251, 146, 60, 0.16);

    /* Borders */
    --cdc-border:        #1E293B;   /* slate-800 */
    --cdc-border-strong: #334155;   /* slate-700 */
    --cdc-border-subtle: #131C2E;
    --cdc-wheat-soft: var(--cdc-border);
    --cdc-wheat-line: var(--cdc-border-strong);

    /* Marca · forest mantiene tono pero con más viveza para dark */
    --cdc-forest:       #22C55E;   /* emerald-500 — más vivo en dark */
    --cdc-forest-2:     #4ADE80;   /* emerald-400 */
    --cdc-forest-deep:  #16A34A;   /* emerald-600 */
    --cdc-forest-soft:  rgba(34, 197, 94, 0.14);
    --cdc-forest-line:  rgba(34, 197, 94, 0.30);

    /* Cobalto · más vivo en dark */
    --cdc-cobalt:       #60A5FA;   /* blue-400 */
    --cdc-cobalt-2:     #93C5FD;   /* blue-300 */
    --cdc-cobalt-deep:  #3B82F6;   /* blue-500 */
    --cdc-cobalt-soft:  rgba(96, 165, 250, 0.14);
    --cdc-cobalt-line:  rgba(96, 165, 250, 0.30);

    --cdc-amber:        #F59E0B;   /* amber-500 */
    --cdc-amber-2:      #FCD34D;
    --cdc-amber-soft:   rgba(245, 158, 11, 0.14);
    --cdc-amber-line:   rgba(245, 158, 11, 0.30);

    /* Faltaba invertir el oliva: quedaba #4d5a2b (oscuro) sobre superficie
       oscura. Medido 2.19:1 como texto en la portada del titular. */
    --cdc-olive:        #A8B87A;
    --cdc-olive-deep:   #8A9A5E;

    --cdc-danger:       #F87171;   /* red-400 */
    --cdc-danger-2:     #FCA5A5;
    --cdc-danger-soft:  rgba(248, 113, 113, 0.14);
    --cdc-danger-line:  rgba(248, 113, 113, 0.30);

    --cdc-success:      var(--cdc-forest);
    --cdc-success-soft: var(--cdc-forest-soft);

    /* Acentos como texto pequeno sobre tinte: en dark el tinte translucido se
       oscurece, asi que el texto sube a los tonos -300/-400. */
    --cdc-forest-text:  #4ADE80;
    --cdc-cobalt-text:  #93C5FD;
    --cdc-amber-text:   #FCD34D;
    --cdc-violet-text:  #C4B5FD;   /* violet-300 */

    /* Los tintes -lighter de Radzen son TRANSLUCIDOS (rgba al 20%): sobre pagina
       clara quedan claros y sobre oscura, oscuros. Los on-*-lighter deben invertirse
       con ellos: en claro tonos -800 (definidos arriba), en oscuro tonos -300. */
    --rz-on-warning-lighter: #FCD34D;
    --rz-on-info-lighter:    #93C5FD;
    --rz-on-success-lighter: #86EFAC;
    --rz-on-danger-lighter:  #FCA5A5;

    /* La fila alterna y el pie de los grids salen de --rz-base-50/-100, fijos en
       claro (#FAFAFA/#F5F5F5): en dark dejaban bandas blancas con el texto ya
       invertido encima (1.05:1 en el detalle de tratamiento, pestana Parcelas). */
    --rz-grid-stripe-background-color: var(--cdc-surface-card-alt);
    --rz-grid-foot-background-color:   var(--cdc-surface-card-alt);
    /* El hover de fila tambien: --rz-base-100 fijo. Al pasar el raton en dark la
       fila se volvia BLANCA con el texto invertido encima — texto invisible.
       (branding-interop intenta sobreescribirlo pero con un nombre de variable
       que no existe en Radzen 9: --rz-grid-row-hover-background-color.) */
    --rz-grid-hover-background-color: var(--cdc-surface-hover);

    /* LA ESCALA --rz-base-* ENTERA, invertida. Es el hueco sistemico que dejaba
       los casos anteriores uno a uno: el dark del cuaderno se construye sobre
       --cdc-* y la escala de superficies de Radzen se quedaba fija en claro, asi
       que CUALQUIER componente (propio o de Radzen) que use base-* como fondo
       pintaba una banda clara con el texto ya invertido encima. Los puntos ya
       corregidos arriba (stripe/foot/hover) se mantienen como estan; esta escalera
       es el respaldo para todo lo no auditado. Mapeo sobre la rampa slate del
       tema: 50-300 superficies, 400-900 progresivamente mas claro (texto). */
    --rz-base:         var(--cdc-surface-card-alt);
    --rz-base-lighter: var(--cdc-surface-card);
    --rz-base-light:   var(--cdc-surface-card-alt);
    --rz-base-dark:    #94A3B8;
    --rz-base-darker:  #F1F5F9;
    --rz-base-50:      #131C2E;
    --rz-base-100:     #1A2438;
    --rz-base-200:     #243048;
    --rz-base-300:     #334155;
    --rz-base-400:     #475569;
    --rz-base-500:     #64748B;
    --rz-base-600:     #94A3B8;
    --rz-base-700:     #CBD5E1;
    --rz-base-800:     #E2E8F0;
    --rz-base-900:     #F1F5F9;

    /* Sombras — más oscuras para destacar elevación */
    --cdc-shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.20);
    --cdc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 3px rgba(0, 0, 0, 0.20);
    --cdc-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.24);
    --cdc-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.34), 0 12px 28px -8px rgba(0, 0, 0, 0.40);
    --cdc-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.40), 0 24px 48px -12px rgba(0, 0, 0, 0.50);
    --cdc-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.30), 0 8px 24px -4px rgba(0, 0, 0, 0.36);

    --tf-page-bg:       var(--cdc-surface-page);
    --tf-text-primary:  var(--cdc-ink);
    --tf-text-secondary: var(--cdc-soil);
    --tf-text-muted:    var(--cdc-mute);
    --tf-border-color:  var(--cdc-border);
}
[data-theme="dark"] body {
    background: var(--cdc-surface-page);
}
/* Botones de color en oscuro: las reglas base (seccion de botones, con !important)
   usan los acentos adaptativos, que en dark se aclaran (#22C55E, #F87171...) porque
   estan pensados como TEXTO sobre superficie oscura; como FONDO con texto blanco
   caen a 2.1-2.5:1. Fondo a la familia *-solid (fija, >=4.5:1 con blanco) y hover
   un paso mas profundo — solo en dark; en claro el acento ya coincide con el solid.
   El !important es obligado para ganar a las reglas base equivalentes. */
[data-theme="dark"] .rz-button.rz-success { background: var(--cdc-forest-solid) !important; border-color: var(--cdc-forest-solid) !important; }
[data-theme="dark"] .rz-button.rz-success:hover:not(:disabled) { background: #166534 !important; border-color: #166534 !important; }
[data-theme="dark"] .rz-button.rz-info    { background: var(--cdc-cobalt-solid) !important; border-color: var(--cdc-cobalt-solid) !important; }
[data-theme="dark"] .rz-button.rz-info:hover:not(:disabled)    { background: #1D4ED8 !important; border-color: #1D4ED8 !important; }
[data-theme="dark"] .rz-button.rz-warning { background: var(--cdc-amber-solid) !important; border-color: var(--cdc-amber-solid) !important; }
[data-theme="dark"] .rz-button.rz-warning:hover:not(:disabled) { background: #92400E !important; border-color: #92400E !important; }
[data-theme="dark"] .rz-button.rz-danger  { background: var(--cdc-danger-solid) !important; border-color: var(--cdc-danger-solid) !important; }
[data-theme="dark"] .rz-button.rz-danger:hover:not(:disabled)  { background: #991B1B !important; border-color: #991B1B !important; }
[data-theme="dark"] ::selection {
    background: rgba(96, 165, 250, 0.30);
    color: #fff;
}


/* ═══════════════════════════════════════════════════════════════════════════
   12 · REDUCED MOTION · Emil philosophy
   Reduce motion = fewer/gentler animations, no zero. Conservar opacity/color
   (aid comprehension). Eliminar transform/movement (cause motion sickness).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    /* Eliminar movement-based animations · mantener opacity para fades */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* Mantener opacity transitions (aid comprehension, no motion sickness) */
    .cdc-skeleton {
        animation: cdcShimmerFade 1.5s ease-in-out infinite !important;
    }
    @keyframes cdcShimmerFade {
        0%, 100% { opacity: 1; }
        50%      { opacity: 0.6; }
    }
    /* Eliminar transform en hover/active · mantener color/border feedback */
    .cdc-btn:active:not(:disabled),
    .rz-button:not(:disabled):active,
    .cdc-card:hover,
    .cdc-stat:hover,
    .cdc-field-card:hover {
        transform: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   13 · MÓVIL
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .cdc-heading__actions {
        position: static;
        margin-top: 12px;
        width: 100%;
    }
    .cdc-heading__title {
        font-size: 1.4rem;
    }
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .quick-access-grid {
        grid-template-columns: 1fr;
    }
    .cdc-toolbar {
        padding: 10px 12px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   14 · AUTH EDITORIAL · "Tierra Fértil" pattern para flujos auxiliares
   (Recuperar contraseña, Confirmar email, Reset password, Código 2FA)
   ═══════════════════════════════════════════════════════════════════════════ */

.cdc-auth {
    /* Tokens locales del flujo auth · enterprise mapping */
    --cdc-line:       var(--cdc-border);
    --cdc-line-soft:  var(--cdc-border-subtle);

    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(20px, 4vw, 56px);
    overflow: auto;
    isolation: isolate;
    font-family: var(--cdc-sans);
    color: var(--cdc-ink);

    background:
        radial-gradient(ellipse 1000px 600px at 80% -10%,
            rgba(37, 99, 235, 0.06), transparent 55%),
        radial-gradient(ellipse 800px 500px at 0% 110%,
            rgba(21, 128, 61, 0.05), transparent 55%),
        var(--cdc-surface-page);
}

/* Sin grano · sin líneas tipo libreta */
.cdc-auth::before { content: none; }
.cdc-auth::after  { content: none; }

/* ====== Card auth · enterprise modal ====== */
.cdc-auth__panel {
    position: relative;
    z-index: 2;
    width: min(440px, 100%);
    background: var(--cdc-surface-card);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-xl);
    padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 36px);
    box-shadow:
        var(--cdc-shadow-lg),
        0 32px 64px -28px rgba(15, 23, 42, 0.20);
    animation: cdcAuthRise 600ms var(--cdc-ease-out) both;
}

@keyframes cdcAuthRise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Sin cinta tricolor · sin sello timbre */
.cdc-auth__panel::before { content: none; }
.cdc-auth__panel::after  { content: none; }

/* ====== Cabecera editorial ====== */
.cdc-auth__header {
    text-align: center;
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--cdc-line-soft);
    position: relative;
}

.cdc-auth__header::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: 36px;
    height: 1px;
    background: var(--cdc-wheat);
}

.cdc-auth__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, var(--cdc-wheat-2), var(--cdc-wheat) 70%);
    border: 1px solid rgba(86, 65, 42, 0.35);
    color: var(--cdc-soil);
    font-size: 22px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 4px 14px -4px rgba(212, 168, 83, 0.5);
}

.cdc-auth__icon--ok    { background: radial-gradient(circle at 30% 30%, #6cc18a, var(--cdc-forest-solid) 70%); color: #fff; border-color: rgba(13, 124, 62, 0.5); }
.cdc-auth__icon--err   { background: radial-gradient(circle at 30% 30%, #e89a8d, #b94a36 70%); color: #fff; border-color: rgba(140, 50, 30, 0.5); }
.cdc-auth__icon--info  { background: radial-gradient(circle at 30% 30%, #c4d2a0, var(--cdc-olive, #4d5a2b) 70%); color: #fff; border-color: rgba(60, 70, 30, 0.5); }

.cdc-auth__eyebrow {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    margin-bottom: 10px;
    padding: 3px 10px;
    border: 1px solid var(--cdc-line);
    border-radius: 2px;
    background: rgba(212, 168, 83, 0.08);
}

.cdc-auth__title {
    font-family: 'Fraunces', 'Instrument Serif', Georgia, serif;
    font-weight: 500;
    font-size: clamp(26px, 3.4vw, 34px);
    line-height: 1.08;
    letter-spacing: -0.018em;
    color: var(--cdc-ink);
    margin: 4px 0 8px 0;
    font-variation-settings: "opsz" 36, "SOFT" 50;
}

.cdc-auth__title em {
    font-style: italic;
    color: var(--cdc-bark);
    font-family: 'Instrument Serif', 'Fraunces', Georgia, serif;
    font-weight: 400;
}

.cdc-auth__subtitle {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--cdc-bark);
    max-width: 36ch;
    margin: 0 auto;
}

.cdc-auth__subtitle strong {
    color: var(--cdc-soil);
    font-weight: 600;
}

/* ====== Formulario ====== */
.cdc-auth__form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cdc-auth__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cdc-auth__label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    font-weight: 500;
}

.cdc-auth__hint {
    font-size: 12px;
    color: rgba(86, 65, 42, 0.78);
    font-style: italic;
    line-height: 1.4;
}

/* Inputs Radzen integrados */
.cdc-auth__field .rz-textbox,
.cdc-auth__field .rz-password,
.cdc-auth__field .rz-inputtext,
.cdc-auth__field input.rz-textbox,
.cdc-auth__field input.rz-inputtext {
    width: 100%;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--cdc-line);
    border-radius: 3px;
    padding: 12px 14px;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 15px;
    color: var(--cdc-ink);
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.cdc-auth__field .rz-textbox:focus,
.cdc-auth__field .rz-password:focus,
.cdc-auth__field .rz-inputtext:focus,
.cdc-auth__field input.rz-textbox:focus,
.cdc-auth__field input.rz-inputtext:focus {
    outline: none;
    border-color: var(--cdc-wheat);
    background: #fff;
    box-shadow:
        0 0 0 3px rgba(212, 168, 83, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

/* Code box (2FA) */
.cdc-auth__code .rz-textbox,
.cdc-auth__code input.rz-textbox {
    text-align: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0.55em;
    padding-left: 1.2em;
    color: var(--cdc-soil);
    background: rgba(255, 255, 255, 0.75);
    caret-color: var(--cdc-forest);
}

/* ====== CTAs ====== */
.cdc-auth__cta {
    appearance: none;
    border: none;
    width: 100%;
    padding: 14px 18px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--cdc-forest) 0%, var(--cdc-forest-deep) 100%);
    color: #fbf7ee;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease, filter 200ms ease;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 -1px 0 rgba(0, 0, 0, 0.18) inset,
        0 8px 22px -10px rgba(13, 124, 62, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.cdc-auth__cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 70%);
    transform: translateX(-110%);
    transition: transform 700ms ease;
}

.cdc-auth__cta:hover:not(:disabled) {
    filter: brightness(1.04);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 -1px 0 rgba(0, 0, 0, 0.18) inset,
        0 12px 28px -10px rgba(13, 124, 62, 0.6);
}

.cdc-auth__cta:hover:not(:disabled)::before {
    transform: translateX(110%);
}

.cdc-auth__cta:active:not(:disabled) {
    transform: translateY(1px);
}

.cdc-auth__cta:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    filter: saturate(0.8);
}

.cdc-auth__cta strong {
    font-weight: 600;
}

.cdc-auth__cta i {
    font-size: 14px;
}

.cdc-auth__cta--ghost {
    background: transparent;
    color: var(--cdc-soil);
    border: 1px solid var(--cdc-line);
    box-shadow: none;
}

.cdc-auth__cta--ghost:hover:not(:disabled) {
    background: rgba(212, 168, 83, 0.08);
    border-color: var(--cdc-wheat);
    filter: none;
    box-shadow: none;
}

/* Spinner */
.cdc-auth__spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(251, 247, 238, 0.35);
    border-top-color: #fbf7ee;
    border-radius: 50%;
    animation: cdcAuthSpin 700ms linear infinite;
}

@keyframes cdcAuthSpin {
    to { transform: rotate(360deg); }
}

/* ====== Separador ornamentado ====== */
.cdc-auth__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0;
    color: var(--cdc-bark);
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 14px;
    font-style: italic;
    opacity: 0.7;
}

.cdc-auth__divider::before,
.cdc-auth__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cdc-line) 30%, var(--cdc-line) 70%, transparent);
}

.cdc-auth__divider--ornament::before,
.cdc-auth__divider--ornament::after {
    background: var(--cdc-line);
}

/* ====== Alertas (estado) ====== */
.cdc-auth__alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 3px;
    border: 1px solid var(--cdc-line);
    background: rgba(255, 255, 255, 0.55);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--cdc-soil);
    animation: cdcAuthAlert 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes cdcAuthAlert {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cdc-auth__alert i {
    font-size: 18px;
    margin-top: 1px;
    flex-shrink: 0;
}

.cdc-auth__alert--ok {
    background: linear-gradient(180deg, rgba(13, 124, 62, 0.08), rgba(13, 124, 62, 0.04));
    border-color: rgba(13, 124, 62, 0.35);
    color: #0a5c2e;
}
.cdc-auth__alert--ok i { color: var(--cdc-forest); }

.cdc-auth__alert--err {
    background: linear-gradient(180deg, rgba(185, 74, 54, 0.10), rgba(185, 74, 54, 0.04));
    border-color: rgba(185, 74, 54, 0.4);
    color: #7a2e1e;
}
.cdc-auth__alert--err i { color: #b94a36; }

.cdc-auth__alert--info {
    background: linear-gradient(180deg, var(--cdc-forest-soft), rgba(212, 168, 83, 0.04));
    border-color: rgba(86, 65, 42, 0.25);
    color: var(--cdc-soil);
}
.cdc-auth__alert--info i { color: var(--cdc-bark); }

/* ====== Estado · sello visual centrado ====== */
.cdc-auth__seal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 22px 0 12px;
    text-align: center;
}

.cdc-auth__seal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid currentColor;
    font-size: 38px;
    position: relative;
    animation: cdcSealPop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms both;
}

.cdc-auth__seal-icon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px dashed currentColor;
    opacity: 0.35;
}

@keyframes cdcSealPop {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}

.cdc-auth__seal--ok    { color: var(--cdc-forest); }
.cdc-auth__seal--err   { color: #b94a36; }

.cdc-auth__seal-msg {
    font-family: 'Fraunces', 'Instrument Serif', Georgia, serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.45;
    color: var(--cdc-ink);
    max-width: 32ch;
    font-variation-settings: "opsz" 24;
}

.cdc-auth__seal-sub {
    font-size: 13px;
    color: var(--cdc-bark);
    max-width: 32ch;
    line-height: 1.5;
}

/* ====== Pie ====== */
.cdc-auth__footer {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--cdc-line-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cdc-auth__footer-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--cdc-bark);
    text-decoration: none;
    transition: color 160ms ease;
    cursor: pointer;
    font-family: 'Inter Tight', system-ui, sans-serif;
}

.cdc-auth__footer-link:hover {
    color: var(--cdc-forest);
}

.cdc-auth__footer-link i {
    font-size: 11px;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cdc-auth__footer-link:hover i.fa-arrow-left {
    transform: translateX(-3px);
}

.cdc-auth__footer-link:hover i.fa-rotate-right {
    transform: rotate(-90deg);
}

/* ====== Colofón ====== */
.cdc-auth__colophon {
    position: relative;
    z-index: 2;
    margin-top: 18px;
    text-align: center;
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 12px;
    color: var(--cdc-bark);
    opacity: 0.75;
    letter-spacing: 0.02em;
    width: min(460px, 100%);
}

.cdc-auth__colophon::before {
    content: '❦';
    display: block;
    font-size: 14px;
    color: var(--cdc-wheat);
    margin-bottom: 4px;
    opacity: 0.85;
}

/* ====== Reduced motion ====== */
@media (prefers-reduced-motion: reduce) {
    .cdc-auth__panel,
    .cdc-auth__alert,
    .cdc-auth__seal-icon,
    .cdc-auth__cta::before {
        animation: none !important;
        transition: none !important;
    }
}

/* ====== Responsive ====== */
@media (max-width: 540px) {
    .cdc-auth { padding: 18px; }
    .cdc-auth__panel { padding: 26px 22px; border-radius: 3px; }
    .cdc-auth__title { font-size: 24px; }
    .cdc-auth__icon { width: 48px; height: 48px; font-size: 19px; }
    .cdc-auth__seal-icon { width: 68px; height: 68px; font-size: 32px; }
    .cdc-auth__footer { flex-direction: column; align-items: stretch; text-align: center; }
    .cdc-auth__footer-link { justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   15 · DIALOGS EDITORIALES (Edit/Create modales)
   ═══════════════════════════════════════════════════════════════════════════
   Primitivas de formulario para los ~28 dialogs (RadzenDialog) del Cuaderno.
   Reemplaza los `style="display: flex/grid; gap: ...; padding: ..."` inline
   por classes coherentes con la paleta editorial.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wrapper raíz del formulario dentro del dialog. */
.cdc-dialog__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 2px 4px;
    max-height: 70vh;
    overflow-y: auto;
    font-family: var(--cdc-sans, 'Inter Tight', system-ui, sans-serif);
    color: var(--cdc-ink);
}

/* Fila estándar (un campo a ancho completo). */
.cdc-dialog__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Grid de N columnas con gap homogéneo. */
.cdc-dialog__grid {
    display: grid;
    gap: 12px;
    align-items: start;
}
.cdc-dialog__grid--2 { grid-template-columns: 1fr 1fr; }
.cdc-dialog__grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.cdc-dialog__grid--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* Variantes con primera/última columna estrechas (códigos cortos) */
.cdc-dialog__grid--code-3 { grid-template-columns: 80px 80px 1fr; }
.cdc-dialog__grid--code-2 { grid-template-columns: 80px 1fr; }
.cdc-dialog__grid--mix    { grid-template-columns: 1fr 1fr 80px; }

/* Fieldset editorial — borde wheat con esquinas suaves y label "sello". */
.cdc-dialog__fieldset {
    border: 1px solid var(--cdc-wheat-line);
    border-radius: 4px;
    padding: 14px 16px 16px;
    background: var(--cdc-paper);
    margin: 0;
    position: relative;
}
.cdc-dialog__fieldset + .cdc-dialog__fieldset { margin-top: 4px; }

.cdc-dialog__legend {
    font-family: var(--cdc-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    padding: 0 8px;
    background: var(--cdc-paper);
    line-height: 1;
}
.cdc-dialog__legend i { margin-right: 6px; color: var(--cdc-wheat); }

/* Caption opcional bajo legend para frase explicativa. */
.cdc-dialog__caption {
    font-family: var(--cdc-serif, 'Instrument Serif', Georgia, serif);
    font-size: 0.84rem;
    font-style: italic;
    color: var(--cdc-mute);
    margin: -2px 0 12px;
}

/* Hint debajo de un input. */
.cdc-dialog__hint {
    font-size: 0.74rem;
    color: var(--cdc-mute);
    line-height: 1.4;
    margin-top: 2px;
}
.cdc-dialog__hint--err { color: var(--cdc-danger); }

/* Divisor entre secciones del formulario. */
.cdc-dialog__divider {
    height: 1px;
    border: none;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--cdc-wheat-line) 14%,
        var(--cdc-wheat-line) 86%,
        transparent 100%);
    margin: 6px 0;
}

/* Footer con botones de acción. */
.cdc-dialog__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid var(--cdc-wheat-soft);
}
.cdc-dialog__footer--split { justify-content: space-between; }
.cdc-dialog__footer-meta {
    font-family: var(--cdc-mono, 'JetBrains Mono', monospace);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cdc-mute);
}

/* Ancho responsivo para dialogs grandes */
.cdc-dialog__form--wide  { max-width: 920px; }
.cdc-dialog__form--medium { max-width: 640px; }
.cdc-dialog__form--narrow { max-width: 420px; }

/* Responsive: en móvil colapsamos grids a 1 columna */
@media (max-width: 640px) {
    .cdc-dialog__grid--2,
    .cdc-dialog__grid--3,
    .cdc-dialog__grid--4,
    .cdc-dialog__grid--code-3,
    .cdc-dialog__grid--code-2,
    .cdc-dialog__grid--mix {
        grid-template-columns: 1fr;
    }
    .cdc-dialog__form { max-height: 80vh; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   15 · TITULARES · Página maestra editorial
   Hero con stats inline, buscador prominente, segmentado de filtros,
   toggle vista cards/tabla, grid de fichas con avatar gradiente,
   chips DNI/NIE/CIF y estado vigente/baja, empty state ilustrado.
   ═══════════════════════════════════════════════════════════════════════════ */

.cdc-titulares {
    --cdc-tit-radius: 18px;
    --cdc-tit-radius-sm: 12px;
    --cdc-tit-line: rgba(26, 18, 8, 0.10);
    --cdc-tit-line-strong: rgba(26, 18, 8, 0.18);
    --cdc-tit-paper: #fbf7ee;
    --cdc-tit-paper-2: #f4ede0;

    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2vw, 32px);
    padding: clamp(8px, 1.2vw, 16px) 0 clamp(40px, 4vw, 72px);
    color: var(--cdc-ink);
    font-family: 'Inter Tight', 'Source Sans 3', system-ui, sans-serif;
    container-type: inline-size;
}

/* ── HERO ──────────────────────────────────────────────────────────────── */
.cdc-titulares__hero {
    position: relative;
    display: grid;
    gap: clamp(18px, 2vw, 28px);
    padding: clamp(22px, 2.4vw, 38px) clamp(22px, 2.6vw, 40px);
    border-radius: 20px;
    background:
        radial-gradient(ellipse 600px 280px at 92% -20%, rgba(212, 168, 83, 0.20), transparent 60%),
        radial-gradient(ellipse 420px 260px at 0% 110%, rgba(13, 124, 62, 0.10), transparent 60%),
        linear-gradient(180deg, var(--cdc-tit-paper) 0%, #f8f1e0 100%);
    border: 1px solid var(--cdc-tit-line);
    overflow: hidden;
    isolation: isolate;
}

.cdc-titulares__hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.28;
    mix-blend-mode: multiply;
    background-image: none;   /* enterprise: sin grano de papel */
}

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

.cdc-titulares__hero-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}.cdc-titulares__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    margin-bottom: 10px;
}

.cdc-titulares__eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--cdc-wheat);
    flex-shrink: 0;
}.cdc-titulares__title em {
    font-style: italic;
    font-weight: 400;
    color: var(--cdc-bark);
}.cdc-titulares__lede strong {
    font-weight: 600;
    color: var(--cdc-ink);
    border-bottom: 1px dotted var(--cdc-wheat);
    padding-bottom: 1px;
}

/* Banderín "Cumple PAC / RD 1054" */
.cdc-titulares__seal {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--cdc-wheat-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(4px);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    white-space: nowrap;
}/* Stats inline en el hero */
.cdc-titulares__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
    border-top: 1px solid var(--cdc-tit-line);
    padding-top: clamp(14px, 1.6vw, 20px);
}

.cdc-titulares__stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 clamp(14px, 1.4vw, 22px);
    border-left: 1px solid var(--cdc-tit-line);
}
.cdc-titulares__stat:first-child { border-left: 0; padding-left: 0; }.cdc-titulares__stat-value em {
    font-style: normal;
    font-size: 0.55em;
    color: var(--cdc-bark);
    margin-left: 4px;
    letter-spacing: 0;
}

.cdc-titulares__stat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    margin-top: 6px;
}

.cdc-titulares__stat-label i { font-size: 11px; opacity: 0.75; }
.cdc-titulares__stat--forest .cdc-titulares__stat-label i { color: var(--cdc-forest); }
.cdc-titulares__stat--ochre  .cdc-titulares__stat-label i { color: var(--cdc-ochre); }
.cdc-titulares__stat--danger .cdc-titulares__stat-label i { color: var(--cdc-danger); }

/* ── BOARD (toolbar + lista) ───────────────────────────────────────────── */
.cdc-titulares__board {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.8vw, 24px);
}

.cdc-titulares__toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--cdc-tit-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
}

@container (max-width: 880px) {
    .cdc-titulares__toolbar {
        grid-template-columns: 1fr;
    }
    .cdc-titulares__filters,
    .cdc-titulares__view-toggle {
        justify-self: start;
    }
}

/* Buscador */
.cdc-titulares__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--cdc-tit-line);
    border-radius: 10px;
    background: var(--cdc-tit-paper);
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.cdc-titulares__search:focus-within {
    border-color: var(--cdc-wheat-line);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(212, 168, 83, 0.16);
}.cdc-titulares__search input {
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--cdc-ink);
}

.cdc-titulares__search input::placeholder {
    color: var(--cdc-bark);
    opacity: 0.7;
}

.cdc-titulares__search kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid var(--cdc-tit-line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.8);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--cdc-bark);
    box-shadow: 0 1px 0 rgba(26, 18, 8, 0.06);
}

.cdc-titulares__search-clear {
    border: 0;
    background: transparent;
    color: var(--cdc-bark);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background 140ms ease;
}.cdc-pill {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 7px 12px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--cdc-bark);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
    white-space: nowrap;
}

.cdc-pill:hover { color: var(--cdc-ink); background: rgba(26, 18, 8, 0.04); }

.cdc-pill.is-active {
    background: var(--cdc-ink);
    color: var(--cdc-paper);
    box-shadow: 0 1px 2px rgba(26, 18, 8, 0.18);
}

.cdc-pill__count {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 1px 6px;
    border-radius: 99px;
    background: rgba(26, 18, 8, 0.08);
    color: inherit;
    font-variant-numeric: tabular-nums;
}
.cdc-pill.is-active .cdc-pill__count { background: rgba(255, 255, 255, 0.18); }

/* Toggle de vista cards / tabla */
.cdc-titulares__view-toggle {
    display: inline-flex;
    border: 1px solid var(--cdc-tit-line);
    border-radius: 10px;
    background: var(--cdc-tit-paper);
    padding: 3px;
}

.cdc-titulares__view-toggle button {
    appearance: none;
    border: 0;
    background: transparent;
    width: 36px;
    height: 32px;
    border-radius: 7px;
    color: var(--cdc-bark);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 160ms ease, color 160ms ease;
}
.cdc-titulares__view-toggle button:hover { color: var(--cdc-ink); background: rgba(26, 18, 8, 0.04); }
.cdc-titulares__view-toggle button.is-active {
    background: #fff;
    color: var(--cdc-ink);
    box-shadow: 0 1px 2px rgba(26, 18, 8, 0.10);
}

/* CTA "Nuevo titular" */
.cdc-titulares__cta {
    appearance: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--cdc-forest-solid) 0%, var(--cdc-forest-deep, #0a5c2e) 100%);
    color: #fff;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 6px 16px rgba(13, 124, 62, 0.28);
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.cdc-titulares__cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 10px 22px rgba(13, 124, 62, 0.34);
}.cdc-titulares__cta i { font-size: 12px; }

/* ── GRID de fichas ────────────────────────────────────────────────────── */
.cdc-titulares__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(14px, 1.4vw, 20px);
}.cdc-titulares__count strong {
    color: var(--cdc-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Ficha de titular */
.cdc-titular-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 12px;
    padding: 16px 16px 14px;
    border: 1px solid var(--cdc-tit-line);
    border-radius: var(--cdc-tit-radius);
    background:
        linear-gradient(180deg, #fff 0%, var(--cdc-tit-paper) 100%);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform 200ms cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 200ms ease, border-color 200ms ease;
    animation: cdc-tit-fade-up 320ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
    animation-delay: calc(var(--i, 0) * 35ms);
}

@keyframes cdc-tit-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cdc-titular-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--cdc-card-tint, transparent);
    opacity: 0.0;
    transition: opacity 200ms ease;
}

.cdc-titular-card:hover {
    transform: translateY(-2px);
    border-color: var(--cdc-wheat-line);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 14px 28px -10px rgba(26, 18, 8, 0.20),
        0 4px 10px -4px rgba(26, 18, 8, 0.10);
}
.cdc-titular-card:hover::before { opacity: 1; }
.cdc-titular-card:focus-visible {
    outline: 0;
    border-color: var(--cdc-wheat);
    box-shadow:
        0 0 0 3px rgba(212, 168, 83, 0.32),
        0 14px 28px -10px rgba(26, 18, 8, 0.18);
}

/* Cinta superior con color por tipo */
.cdc-titular-card__band {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--cdc-card-band, var(--cdc-wheat));
}

.cdc-titular-card__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
}

/* Avatar gradiente con iniciales */
.cdc-titular-card__avatar {
    --h: 36;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', 'Instrument Serif', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.02em;
    background:
        linear-gradient(140deg,
            hsl(var(--h), 55%, 38%) 0%,
            hsl(calc(var(--h) + 18), 50%, 28%) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 6px 14px -4px hsla(var(--h), 50%, 25%, 0.4);
    flex-shrink: 0;
}

.cdc-titular-card__name {
    font-family: 'Fraunces', 'Instrument Serif', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.15;
    color: var(--cdc-ink);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cdc-titular-card__sub {
    font-size: 0.8rem;
    color: var(--cdc-bark);
    margin: 2px 0 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Quick acción: editar/borrar visibles en hover */
.cdc-titular-card__quick {
    display: inline-flex;
    gap: 4px;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity 160ms ease, transform 160ms ease;
}
.cdc-titular-card:hover .cdc-titular-card__quick,
.cdc-titular-card:focus-within .cdc-titular-card__quick {
    opacity: 1;
    transform: translateX(0);
}

.cdc-titular-card__icon-btn {
    appearance: none;
    border: 1px solid var(--cdc-tit-line);
    background: rgba(255, 255, 255, 0.6);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--cdc-bark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.cdc-titular-card__icon-btn:hover { color: var(--cdc-ink); background: #fff; border-color: var(--cdc-tit-line-strong); }
.cdc-titular-card__icon-btn--danger:hover {
    color: var(--cdc-danger);
    border-color: var(--cdc-danger-line);
    background: var(--cdc-danger-soft);
}

/* Chips: tipo NIF + estado */
.cdc-titular-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.cdc-tipo-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 6px;
    border-radius: 7px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--cdc-tit-paper-2);
    color: var(--cdc-bark);
    border: 1px solid var(--cdc-tit-line);
}

.cdc-tipo-chip__tag {
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 9.5px;
    background: var(--cdc-ink);
    color: var(--cdc-paper);
}

.cdc-tipo-chip--dni .cdc-tipo-chip__tag { background: var(--cdc-forest); }
.cdc-tipo-chip--nie .cdc-tipo-chip__tag { background: var(--cdc-sky); }
.cdc-tipo-chip--cif .cdc-tipo-chip__tag { background: var(--cdc-ochre); }

.cdc-tipo-chip__nif {
    font-variant-numeric: tabular-nums;
    color: var(--cdc-ink);
    letter-spacing: 0.04em;
}

.cdc-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid;
}

.cdc-status-chip__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.cdc-status-chip--vigente {
    color: var(--cdc-forest);
    background: var(--cdc-forest-soft);
    border-color: var(--cdc-forest-line);
}
.cdc-status-chip--vigente .cdc-status-chip__dot {
    box-shadow: 0 0 0 4px rgba(13, 124, 62, 0.15);
    animation: cdc-tit-pulse 1.8s ease-in-out infinite;
}
@keyframes cdc-tit-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(13, 124, 62, 0.15); }
    50%      { box-shadow: 0 0 0 6px rgba(13, 124, 62, 0.0); }
}

.cdc-status-chip--baja {
    color: var(--cdc-danger);
    background: var(--cdc-danger-soft);
    border-color: var(--cdc-danger-line);
}

/* Lista de contactos */
.cdc-titular-card__contacts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.85rem;
    color: var(--cdc-soil, #2a2015);
}

.cdc-titular-card__contacts li {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cdc-titular-card__contacts i {
    width: 14px;
    color: var(--cdc-bark);
    font-size: 12px;
    flex-shrink: 0;
}

.cdc-titular-card__contacts li.is-empty {
    color: var(--cdc-bark);
    opacity: 0.5;
    font-style: italic;
}

/* Footer del card: id + meta */
.cdc-titular-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--cdc-tit-line);
}

.cdc-titular-card__codigo {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--cdc-bark);
    text-transform: uppercase;
}
.cdc-titular-card__codigo strong { color: var(--cdc-ink); font-weight: 600; }

.cdc-titular-card__rl {
    font-size: 11px;
    color: var(--cdc-bark);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cdc-titular-card__rl i { color: var(--cdc-ochre); font-size: 11px; }

/* Acciones de gestion del socio (editar / baja / contrasena). Solo las ve la
   administracion de la cooperativa; ver Titulares.razor. */
.cdc-titular-card__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--cdc-tit-line);
}

.cdc-titular-card__acciones button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cdc-ink);
    background: var(--cdc-surface-soft, #f6f7f5);
    border: 1px solid var(--cdc-tit-line);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.cdc-titular-card__acciones button:hover:not(:disabled) {
    background: var(--cdc-forest);
    border-color: var(--cdc-forest);
    color: #fff;
}

.cdc-titular-card__acciones button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.cdc-titular-card__acciones i { font-size: 11px; }

/* Tonos por tipo (--cdc-card-band) — set inline en el template */
.cdc-titular-card[data-tipo="DNI"] { --cdc-card-band: var(--cdc-forest); }
.cdc-titular-card[data-tipo="NIE"] { --cdc-card-band: var(--cdc-sky); }
.cdc-titular-card[data-tipo="CIF"] { --cdc-card-band: var(--cdc-ochre); }
.cdc-titular-card[data-baja="true"] {
    --cdc-card-band: var(--cdc-danger);
    opacity: 0.85;
}
.cdc-titular-card[data-baja="true"]:hover { opacity: 1; }

/* ── Empty state editorial ─────────────────────────────────────────────── */
.cdc-titulares__empty {
    display: grid;
    place-items: center;
    text-align: center;
    padding: clamp(32px, 4vw, 64px) 24px;
    border: 1px dashed var(--cdc-tit-line-strong);
    border-radius: var(--cdc-tit-radius);
    background:
        radial-gradient(ellipse 360px 180px at 50% 0%, rgba(212, 168, 83, 0.16), transparent 70%),
        var(--cdc-tit-paper);
    color: var(--cdc-bark);
}

.cdc-titulares__empty-illu {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--cdc-wheat-line);
    color: var(--cdc-ochre);
    font-size: 32px;
    margin-bottom: 18px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 12px 24px -10px rgba(212, 168, 83, 0.4);
}/* ── Vista tabla preserved ─────────────────────────────────────────────── */
.cdc-titulares__table {
    background: #fff;
    border: 1px solid var(--cdc-tit-line);
    border-radius: var(--cdc-tit-radius);
    overflow: hidden;
}

/* ── Loader skeleton ───────────────────────────────────────────────────── */
.cdc-titulares__skel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(14px, 1.4vw, 20px);
}
.cdc-titulares__skel {
    height: 200px;
    border-radius: var(--cdc-tit-radius);
    background:
        linear-gradient(110deg,
            rgba(26, 18, 8, 0.04) 25%,
            rgba(26, 18, 8, 0.08) 50%,
            rgba(26, 18, 8, 0.04) 75%);
    background-size: 200% 100%;
    animation: cdc-tit-shimmer 1.4s linear infinite;
    border: 1px solid var(--cdc-tit-line);
}
@keyframes cdc-tit-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .cdc-titulares__hero { padding: 18px 18px; }
    .cdc-titulares__hero-head { align-items: flex-start; }    .cdc-titulares__stat:first-child { padding-left: 0; }    .cdc-titulares__grid { grid-template-columns: 1fr; }
    .cdc-titular-card__quick { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cdc-titular-card { animation: none; }
    .cdc-status-chip--vigente .cdc-status-chip__dot { animation: none; }
    .cdc-titulares__skel { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   15.5 · MASAS DE AGUA · Página editorial (cuaderno · aguas y zonas vulnerables)
   Hero con stats inline (total, consumo humano, superficie, parcelas, huérfanas),
   buscador + filtros pill, toggle cards/tabla, grid de fichas con banda
   semántica (captación / sin parcela), chips estado (consumo humano / sin captación),
   diálogo seccionado para alta/edición con selector de parcela y aviso normativo.
   Tema cromático: --cdc-sky (agua) sobre --cdc-paper (cuaderno) con detalles ochre.
   ═══════════════════════════════════════════════════════════════════════════ */

.cdc-masas {
    --cdc-mas-radius: 18px;
    --cdc-mas-radius-sm: 12px;
    --cdc-mas-line: rgba(26, 18, 8, 0.10);
    --cdc-mas-line-strong: rgba(26, 18, 8, 0.18);
    --cdc-mas-paper: var(--cdc-paper);
    --cdc-mas-paper-2: #f0e8d8;
    --cdc-mas-water: var(--cdc-sky);
    --cdc-mas-water-deep: #3e6f9c;
    --cdc-mas-water-soft: var(--cdc-sky-soft);
    --cdc-mas-water-line: rgba(91, 140, 190, 0.42);

    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2vw, 32px);
    padding: clamp(8px, 1.2vw, 16px) 0 clamp(40px, 4vw, 72px);
    color: var(--cdc-ink);
    font-family: var(--cdc-sans);
    container-type: inline-size;
}

/* ── HERO ──────────────────────────────────────────────────────────────── */
.cdc-masas__hero {
    position: relative;
    display: grid;
    gap: clamp(18px, 2vw, 28px);
    padding: clamp(22px, 2.4vw, 38px) clamp(22px, 2.6vw, 40px);
    border-radius: 20px;
    background:
        radial-gradient(ellipse 600px 280px at 92% -20%, rgba(91, 140, 190, 0.22), transparent 60%),
        radial-gradient(ellipse 420px 260px at 0% 110%, rgba(13, 124, 62, 0.10), transparent 60%),
        linear-gradient(180deg, var(--cdc-mas-paper) 0%, #f4ede0 100%);
    border: 1px solid var(--cdc-mas-line);
    overflow: hidden;
    isolation: isolate;
}

.cdc-masas__hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.22;
    mix-blend-mode: multiply;
    background-image: none;   /* enterprise: sin grano de papel */
}

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

.cdc-masas__hero-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}.cdc-masas__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cdc-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    margin-bottom: 10px;
}
.cdc-masas__eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--cdc-mas-water);
    flex-shrink: 0;
}.cdc-masas__title em {
    font-style: italic;
    font-weight: 400;
    color: var(--cdc-mas-water-deep);
}.cdc-masas__lede strong {
    font-weight: 600;
    color: var(--cdc-ink);
    border-bottom: 1px dotted var(--cdc-mas-water-line);
    padding-bottom: 1px;
}

.cdc-masas__seal {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--cdc-mas-water-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(4px);
    font-family: var(--cdc-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    white-space: nowrap;
}/* Stats inline en el hero */
.cdc-masas__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
    border-top: 1px solid var(--cdc-mas-line);
    padding-top: clamp(14px, 1.6vw, 20px);
}
.cdc-masas__stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 clamp(14px, 1.4vw, 22px);
    border-left: 1px solid var(--cdc-mas-line);
}
.cdc-masas__stat:first-child { border-left: 0; padding-left: 0; }.cdc-masas__stat-value em {
    font-style: normal;
    font-size: 0.55em;
    color: var(--cdc-bark);
    margin-left: 4px;
    letter-spacing: 0;
}
.cdc-masas__stat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--cdc-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    margin-top: 6px;
}
.cdc-masas__stat-label i { font-size: 11px; opacity: 0.75; }
.cdc-masas__stat--sky    .cdc-masas__stat-label i { color: var(--cdc-mas-water); }
.cdc-masas__stat--forest .cdc-masas__stat-label i { color: var(--cdc-forest); }
.cdc-masas__stat--ochre  .cdc-masas__stat-label i { color: var(--cdc-ochre); }
.cdc-masas__stat--danger .cdc-masas__stat-label i { color: var(--cdc-danger); }

/* ── BOARD (toolbar + lista) ───────────────────────────────────────────── */
.cdc-masas__board { display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 24px); }

.cdc-masas__toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--cdc-mas-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
}
@container (max-width: 880px) {
    .cdc-masas__toolbar { grid-template-columns: 1fr; }
    .cdc-masas__filters,
    .cdc-masas__view-toggle { justify-self: start; }
}

.cdc-masas__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--cdc-mas-line);
    border-radius: 10px;
    background: var(--cdc-mas-paper);
    transition: border-color var(--cdc-dur-fast) var(--cdc-ease-standard),
                box-shadow var(--cdc-dur-fast) var(--cdc-ease-standard),
                background var(--cdc-dur-fast) var(--cdc-ease-standard);
}
.cdc-masas__search:focus-within {
    border-color: var(--cdc-mas-water-line);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(91, 140, 190, 0.18);
}.cdc-masas__search input {
    flex: 1 1 0; min-width: 0;
    border: 0; outline: 0; background: transparent;
    font-family: inherit; font-size: 0.95rem; color: var(--cdc-ink);
}
.cdc-masas__search input::placeholder { color: var(--cdc-bark); opacity: 0.7; }
.cdc-masas__search-clear {
    border: 0; background: transparent; color: var(--cdc-bark);
    cursor: pointer; padding: 4px 8px; border-radius: 6px;
    transition: background var(--cdc-dur-instant) var(--cdc-ease-standard);
    min-width: 28px; min-height: 28px;
}.cdc-masas__view-toggle {
    display: inline-flex;
    border: 1px solid var(--cdc-mas-line);
    border-radius: 10px;
    background: var(--cdc-mas-paper);
    overflow: hidden;
}
.cdc-masas__view-toggle button {
    appearance: none;
    border: 0; background: transparent;
    padding: 8px 12px;
    color: var(--cdc-bark);
    cursor: pointer;
    transition: background var(--cdc-dur-instant) var(--cdc-ease-standard),
                color var(--cdc-dur-instant) var(--cdc-ease-standard);
    min-width: 40px; min-height: 36px;
}
.cdc-masas__view-toggle button:hover { background: rgba(26, 18, 8, 0.04); color: var(--cdc-ink); }
.cdc-masas__view-toggle button.is-active { background: var(--cdc-mas-water); color: #fff; }

.cdc-masas__cta {
    appearance: none;
    border: 1px solid var(--cdc-mas-water-deep);
    background: linear-gradient(180deg, var(--cdc-mas-water) 0%, var(--cdc-mas-water-deep) 100%);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: transform var(--cdc-dur-instant) var(--cdc-ease-standard),
                box-shadow var(--cdc-dur-instant) var(--cdc-ease-standard);
    box-shadow: var(--cdc-shadow-sm);
    min-height: 40px;
}
.cdc-masas__cta:hover { transform: translateY(-1px); box-shadow: var(--cdc-shadow-md); }.cdc-masas__cta--outline {
    background: transparent;
    color: var(--cdc-mas-water-deep);
    border-color: var(--cdc-mas-water-line);
}.cdc-masas__count strong { color: var(--cdc-ink); font-weight: 700; font-variant-numeric: tabular-nums; }.cdc-masas__no-explotacion .cdc-masas__empty-illu {
    background: rgba(212, 168, 83, 0.18);
    color: var(--cdc-ochre);
}

.cdc-masas__skel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.cdc-masas__skel {
    height: 220px;
    border-radius: 16px;
    background: linear-gradient(90deg,
        var(--cdc-mas-paper-2) 0%,
        rgba(255, 255, 255, 0.85) 50%,
        var(--cdc-mas-paper-2) 100%);
    background-size: 200% 100%;
    animation: cdc-mas-shimmer 1.6s infinite linear;
    border: 1px solid var(--cdc-mas-line);
}
@keyframes cdc-mas-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ── CARD GRID ─────────────────────────────────────────────────────────── */
.cdc-masas__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.cdc-masa-card {
    position: relative;
    display: flex; flex-direction: column; gap: 12px;
    padding: 18px;
    background: var(--cdc-surface-card);
    border: 1px solid var(--cdc-mas-line);
    border-radius: 16px;
    box-shadow: var(--cdc-shadow-xs);
    transition: transform var(--cdc-dur-fast) var(--cdc-ease-out),
                box-shadow var(--cdc-dur-fast) var(--cdc-ease-out),
                border-color var(--cdc-dur-fast) var(--cdc-ease-out);
    overflow: hidden;
    cursor: pointer;
    animation: cdc-mas-fade-up 380ms var(--cdc-ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 35ms);
}
.cdc-masa-card:hover,
.cdc-masa-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--cdc-shadow-card-hover);
    border-color: var(--cdc-mas-water-line);
    outline: none;
}
.cdc-masa-card:focus-visible { box-shadow: var(--cdc-shadow-card-hover), var(--cdc-ring-wheat); }
@keyframes cdc-mas-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cdc-masa-card__band {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--cdc-mas-water);
    opacity: 0.85;
}
.cdc-masa-card[data-captacion="true"]  .cdc-masa-card__band { background: linear-gradient(90deg, var(--cdc-mas-water) 0%, var(--cdc-forest) 100%); }
.cdc-masa-card[data-huerfana="true"]   .cdc-masa-card__band { background: var(--cdc-amber); opacity: 0.95; }

.cdc-masa-card__head {
    display: flex; gap: 12px;
    align-items: flex-start;
    margin-top: 4px;
}
.cdc-masa-card__icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--cdc-mas-water-soft);
    color: var(--cdc-mas-water-deep);
    font-size: 18px;
}
.cdc-masa-card[data-captacion="true"] .cdc-masa-card__icon {
    background: linear-gradient(135deg, rgba(91, 140, 190, 0.20) 0%, rgba(13, 124, 62, 0.18) 100%);
    color: var(--cdc-forest-deep);
}
.cdc-masa-card__name {
    font-family: var(--cdc-display);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--cdc-ink);
    margin: 0 0 2px 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cdc-masa-card__sub {
    margin: 0;
    font-family: var(--cdc-mono);
    font-size: 11px;
    color: var(--cdc-bark);
    display: flex; flex-wrap: wrap; gap: 4px;
    align-items: center;
}
.cdc-masa-card__sub em { font-style: normal; color: var(--cdc-mute-2); margin: 0 2px; }
.cdc-masa-card__sub--muted { font-style: italic; color: var(--cdc-amber); }

.cdc-masa-card__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.cdc-masa-card__data {
    list-style: none;
    margin: 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--cdc-mas-line);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}
.cdc-masa-card__data li {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px;
    color: var(--cdc-soil);
    min-width: 0;
}
.cdc-masa-card__data li i {
    flex: 0 0 auto;
    color: var(--cdc-bark);
    font-size: 11px;
    width: 14px;
    text-align: center;
}
.cdc-masa-card__data li span {
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cdc-masa-card__data li em { font-style: normal; color: var(--cdc-bark); font-size: 0.85em; margin-left: 2px; }
.cdc-masa-card__data li.is-empty { color: var(--cdc-mute); font-style: italic; }
.cdc-masa-card__data li.is-empty span { font-style: italic; }
.cdc-masa-card__coords { font-family: var(--cdc-mono); font-size: 11.5px; }

.cdc-masa-card__foot {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--cdc-mas-line);
}
.cdc-masa-card__action {
    appearance: none;
    border: 1px solid var(--cdc-mas-line);
    background: transparent;
    color: var(--cdc-bark);
    padding: 6px 10px;
    border-radius: 8px;
    font-family: inherit; font-size: 12px; font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background var(--cdc-dur-instant) var(--cdc-ease-standard),
                color var(--cdc-dur-instant) var(--cdc-ease-standard),
                border-color var(--cdc-dur-instant) var(--cdc-ease-standard);
    min-height: 32px;
}
.cdc-masa-card__action:hover {
    background: var(--cdc-mas-water-soft);
    color: var(--cdc-mas-water-deep);
    border-color: var(--cdc-mas-water-line);
}
.cdc-masa-card__action--danger:hover {
    background: var(--cdc-danger-soft);
    color: var(--cdc-danger);
    border-color: var(--cdc-danger-line);
}

/* ── STATUS CHIPS específicos de Masas ──────────────────────────────── */
.cdc-status-chip--captacion {
    background: var(--cdc-forest-soft);
    color: var(--cdc-forest-deep);
    border: 1px solid var(--cdc-forest-line);
}
.cdc-status-chip--captacion .cdc-status-chip__dot {
    background: var(--cdc-forest);
    box-shadow: 0 0 0 0 rgba(13, 124, 62, 0.5);
    animation: cdc-mas-pulse 2.4s infinite;
}
@keyframes cdc-mas-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(13, 124, 62, 0.45); }
    70%  { box-shadow: 0 0 0 6px rgba(13, 124, 62, 0); }
    100% { box-shadow: 0 0 0 0 rgba(13, 124, 62, 0); }
}
.cdc-status-chip--neutral {
    background: rgba(86, 65, 42, 0.06);
    color: var(--cdc-bark);
    border: 1px solid var(--cdc-mas-line);
}
.cdc-status-chip--neutral .cdc-status-chip__dot { background: var(--cdc-mute); }
.cdc-status-chip--warn {
    background: var(--cdc-amber-soft);
    color: var(--cdc-amber);
    border: 1px solid rgba(182, 121, 31, 0.32);
}
.cdc-status-chip--warn .cdc-status-chip__dot { background: var(--cdc-amber); }

.cdc-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--cdc-wheat-soft);
    color: var(--cdc-bark);
    border: 1px solid var(--cdc-wheat-line);
    font-size: 11px;
    font-weight: 500;
}
.cdc-tag-chip i { color: var(--cdc-ochre); font-size: 10px; }

/* ── TABLE VIEW container ─────────────────────────────────────────────── */
.cdc-masas__table {
    background: var(--cdc-surface-card);
    border: 1px solid var(--cdc-mas-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--cdc-shadow-xs);
}

/* ───────────────────────────────────────────────────────────────────────
   DIÁLOGO de alta/edición de Masa de Agua (cdc-masa-dialog)
   ─────────────────────────────────────────────────────────────────────── */
.cdc-masa-dialog {
    --cdc-mas-dialog-line: rgba(26, 18, 8, 0.10);
    --cdc-mas-dialog-water: var(--cdc-sky);
    --cdc-mas-dialog-water-deep: #3e6f9c;
    --cdc-mas-dialog-water-soft: var(--cdc-sky-soft);

    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--cdc-ink);
    font-family: var(--cdc-sans);
    padding: 4px 2px;
}

.cdc-masa-dialog__alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--cdc-amber-soft);
    border-left: 4px solid var(--cdc-amber);
    color: var(--cdc-soil);
    font-size: 13.5px;
    line-height: 1.45;
}
.cdc-masa-dialog__alert i { color: var(--cdc-amber); font-size: 18px; margin-top: 2px; flex-shrink: 0; }
.cdc-masa-dialog__alert strong { color: var(--cdc-ink); }

.cdc-masa-dialog__section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    background: var(--cdc-surface-card);
    border: 1px solid var(--cdc-mas-dialog-line);
    border-radius: 12px;
}

.cdc-masa-dialog__section-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--cdc-mas-dialog-line);
}
.cdc-masa-dialog__section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--cdc-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cdc-bark);
}
.cdc-masa-dialog__section-eyebrow i { color: var(--cdc-mas-dialog-water); font-size: 11px; }
.cdc-masa-dialog__section-title {
    font-family: var(--cdc-display);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--cdc-ink);
    margin: 0;
    letter-spacing: -0.01em;
}

.cdc-masa-dialog__field { display: flex; flex-direction: column; gap: 6px; }

.cdc-masa-dialog__row { display: grid; gap: 12px; }
.cdc-masa-dialog__row--2 { grid-template-columns: 1fr 1fr; }
@container (max-width: 540px) {
    .cdc-masa-dialog__row--2 { grid-template-columns: 1fr; }
}

.cdc-masa-dialog__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cdc-ink);
    letter-spacing: 0.01em;
}
.cdc-masa-dialog__label em {
    font-style: normal;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--cdc-danger);
    background: var(--cdc-danger-soft);
    border: 1px solid var(--cdc-danger-line);
    padding: 1px 6px;
    border-radius: 999px;
}
.cdc-masa-dialog__unit { color: var(--cdc-bark); font-weight: 400; font-size: 0.9em; }

.cdc-masa-dialog__hint {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--cdc-bark);
}
.cdc-masa-dialog__hint i { color: var(--cdc-mas-dialog-water); font-size: 11px; margin-top: 2px; }
.cdc-masa-dialog__hint--soft { color: var(--cdc-mute); }

/* Parcela seleccionada · ficha SIGPAC */
.cdc-masa-dialog__parcela-card {
    position: relative;
    padding: 14px 16px;
    background: linear-gradient(180deg, var(--cdc-paper) 0%, #f4ede0 100%);
    border: 1px solid var(--cdc-mas-dialog-line);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 4px;
}
.cdc-masa-dialog__parcela-band {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--cdc-mas-dialog-water) 0%, var(--cdc-forest) 100%);
}
.cdc-masa-dialog__parcela-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cdc-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    margin-bottom: 10px;
    padding-left: 4px;
}
.cdc-masa-dialog__parcela-head i { color: var(--cdc-ochre); }
.cdc-masa-dialog__parcela-data {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 10px 16px;
    margin: 0;
    padding-left: 4px;
}
.cdc-masa-dialog__parcela-data > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cdc-masa-dialog__parcela-data dt {
    font-family: var(--cdc-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cdc-bark);
}
.cdc-masa-dialog__parcela-data dd {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--cdc-ink);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cdc-masa-dialog__parcela-data-wide { grid-column: 1 / -1; }

/* Captación · checkbox grande tipo card */
.cdc-masa-dialog__captacion {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--cdc-mas-dialog-water-soft);
    border: 1px solid rgba(91, 140, 190, 0.30);
    border-radius: 12px;
    cursor: pointer;
    transition: background var(--cdc-dur-fast) var(--cdc-ease-standard),
                border-color var(--cdc-dur-fast) var(--cdc-ease-standard);
}
.cdc-masa-dialog__captacion:hover {
    background: rgba(91, 140, 190, 0.18);
    border-color: rgba(91, 140, 190, 0.42);
}
.cdc-masa-dialog__captacion.is-active {
    background: linear-gradient(135deg, rgba(91, 140, 190, 0.22) 0%, rgba(13, 124, 62, 0.16) 100%);
    border-color: var(--cdc-forest-line);
}
.cdc-masa-dialog__captacion span { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cdc-masa-dialog__captacion strong { font-size: 14px; color: var(--cdc-ink); }
.cdc-masa-dialog__captacion em {
    font-style: normal;
    font-size: 12px;
    line-height: 1.45;
    color: var(--cdc-soil);
}

/* Footer botones */
.cdc-masa-dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--cdc-mas-dialog-line);
    margin-top: 4px;
}
.cdc-masa-dialog__btn {
    appearance: none;
    border: 1px solid transparent;
    padding: 10px 18px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform var(--cdc-dur-instant) var(--cdc-ease-standard),
                box-shadow var(--cdc-dur-instant) var(--cdc-ease-standard),
                background var(--cdc-dur-instant) var(--cdc-ease-standard);
    min-height: 40px;
}
.cdc-masa-dialog__btn--ghost {
    background: transparent;
    color: var(--cdc-bark);
    border-color: var(--cdc-mas-dialog-line);
}
.cdc-masa-dialog__btn--ghost:hover { background: rgba(26, 18, 8, 0.04); color: var(--cdc-ink); }
.cdc-masa-dialog__btn--primary {
    background: linear-gradient(180deg, var(--cdc-mas-dialog-water) 0%, var(--cdc-mas-dialog-water-deep) 100%);
    color: #fff;
    border-color: var(--cdc-mas-dialog-water-deep);
    box-shadow: var(--cdc-shadow-sm);
}
.cdc-masa-dialog__btn--primary:hover { transform: translateY(-1px); box-shadow: var(--cdc-shadow-md); }
.cdc-masa-dialog__btn--primary:active { transform: translateY(0); }

/* Override Radzen dialog frame para que respete el aire editorial */
.cdc-masas-dialog .rz-dialog-content { background: var(--cdc-surface-page); padding: 16px; }
.cdc-masas-dialog .rz-dialog-titlebar {
    background: linear-gradient(180deg, var(--cdc-paper) 0%, #f4ede0 100%);
    border-bottom: 1px solid var(--cdc-mas-line);
}
.cdc-masas-dialog .rz-dialog-title {
    font-family: var(--cdc-display);
    font-weight: 500;
    color: var(--cdc-ink);
    letter-spacing: -0.01em;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .cdc-masas__hero { padding: 18px 18px; }
    .cdc-masas__hero-head { align-items: flex-start; }    .cdc-masas__stat:first-child { padding-left: 0; }
    .cdc-masas__stat { padding: 0 10px; }
    .cdc-masas__grid { grid-template-columns: 1fr; }
    .cdc-masa-card__data { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .cdc-masa-card { animation: none; }
    .cdc-status-chip--captacion .cdc-status-chip__dot { animation: none; }}


/* ═══════════════════════════════════════════════════════════════════════════
   16 · AGRUPACIONES · Página editorial (master-detail)
   Hero con stats inline (agrupaciones, fincas, parcelas, sup. cultivada),
   buscador + filtros pill, toggle cards/tabla, grid de fichas con banda
   semantica (finca / parcelas / vacia), barra de % sobre la explotacion,
   panel de detalle con KPIs y tabla SIGPAC.
   ═══════════════════════════════════════════════════════════════════════════ */

.cdc-agrupaciones {
    --cdc-ag-radius: 18px;
    --cdc-ag-radius-sm: 12px;
    --cdc-ag-line: rgba(26, 18, 8, 0.10);
    --cdc-ag-line-strong: rgba(26, 18, 8, 0.18);
    --cdc-ag-paper: #fbf7ee;
    --cdc-ag-paper-2: #f4ede0;

    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2vw, 32px);
    padding: clamp(8px, 1.2vw, 16px) 0 clamp(40px, 4vw, 72px);
    color: var(--cdc-ink);
    font-family: 'Inter Tight', 'Source Sans 3', system-ui, sans-serif;
    container-type: inline-size;
}

/* ── HERO ──────────────────────────────────────────────────────────────── */
.cdc-agrupaciones__hero {
    position: relative;
    display: grid;
    gap: clamp(18px, 2vw, 28px);
    padding: clamp(22px, 2.4vw, 38px) clamp(22px, 2.6vw, 40px);
    border-radius: 20px;
    background:
        radial-gradient(ellipse 600px 280px at 92% -20%, rgba(212, 168, 83, 0.20), transparent 60%),
        radial-gradient(ellipse 420px 260px at 0% 110%, rgba(13, 124, 62, 0.10), transparent 60%),
        linear-gradient(180deg, var(--cdc-ag-paper) 0%, #f8f1e0 100%);
    border: 1px solid var(--cdc-ag-line);
    overflow: hidden;
    isolation: isolate;
}

.cdc-agrupaciones__hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.28;
    mix-blend-mode: multiply;
    background-image: none;   /* enterprise: sin grano de papel */
}

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

.cdc-agrupaciones__hero-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}.cdc-agrupaciones__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    margin-bottom: 10px;
}

.cdc-agrupaciones__eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--cdc-wheat);
    flex-shrink: 0;
}.cdc-agrupaciones__title em {
    font-style: italic;
    font-weight: 400;
    color: var(--cdc-bark);
}.cdc-agrupaciones__lede strong {
    font-weight: 600;
    color: var(--cdc-ink);
    border-bottom: 1px dotted var(--cdc-wheat);
    padding-bottom: 1px;
}

.cdc-agrupaciones__seal {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--cdc-wheat-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(4px);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    white-space: nowrap;
}/* Stats inline en el hero */
.cdc-agrupaciones__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
    border-top: 1px solid var(--cdc-ag-line);
    padding-top: clamp(14px, 1.6vw, 20px);
}

.cdc-agrupaciones__stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 16px;
    border-left: 1px solid var(--cdc-ag-line);
}

.cdc-agrupaciones__stat:first-child { border-left: 0; padding-left: 0; }.cdc-agrupaciones__stat-value em {
    font-style: normal;
    font-size: 0.6em;
    font-family: 'Inter Tight', sans-serif;
    color: var(--cdc-bark);
    margin-left: 6px;
    font-weight: 400;
}

.cdc-agrupaciones__stat-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    margin-top: 6px;
}

.cdc-agrupaciones__stat-label i { font-size: 11px; opacity: 0.75; }
.cdc-agrupaciones__stat--forest .cdc-agrupaciones__stat-label i { color: var(--cdc-forest); }
.cdc-agrupaciones__stat--ochre  .cdc-agrupaciones__stat-label i { color: var(--cdc-ochre); }
.cdc-agrupaciones__stat--sky    .cdc-agrupaciones__stat-label i { color: var(--cdc-sky); }
.cdc-agrupaciones__stat--danger .cdc-agrupaciones__stat-label i { color: var(--cdc-danger); }

/* ── Board ──────────────────────────────────────────────────────────────── */
.cdc-agrupaciones__board {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.6vw, 22px);
}

.cdc-agrupaciones__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, #fff 0%, var(--cdc-ag-paper) 100%);
    border: 1px solid var(--cdc-ag-line);
    border-radius: 14px;
    padding: 10px 12px;
}

.cdc-agrupaciones__search {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 1 1 280px;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--cdc-ag-line);
    border-radius: 10px;
    padding: 0 10px;
    height: 38px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.cdc-agrupaciones__search:focus-within {
    border-color: var(--cdc-forest);
    box-shadow: 0 0 0 3px rgba(13, 124, 62, 0.12);
}

.cdc-agrupaciones__search > i {
    color: var(--cdc-bark);
    margin-right: 8px;
}

.cdc-agrupaciones__search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--cdc-ink);
    height: 100%;
}

.cdc-agrupaciones__search input::placeholder {
    color: var(--cdc-bark);
    opacity: 0.7;
}

.cdc-agrupaciones__search-clear {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--cdc-bark);
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 6px;
}.cdc-agrupaciones__view-toggle {
    display: inline-flex;
    border: 1px solid var(--cdc-ag-line);
    border-radius: 10px;
    background: var(--cdc-ag-paper);
    padding: 3px;
}

.cdc-agrupaciones__view-toggle button {
    appearance: none;
    border: 0;
    background: transparent;
    width: 36px;
    height: 32px;
    border-radius: 7px;
    color: var(--cdc-bark);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 160ms ease, color 160ms ease;
}
.cdc-agrupaciones__view-toggle button:hover { color: var(--cdc-ink); background: rgba(26, 18, 8, 0.04); }
.cdc-agrupaciones__view-toggle button.is-active {
    background: #fff;
    color: var(--cdc-ink);
    box-shadow: 0 1px 2px rgba(26, 18, 8, 0.10);
}

.cdc-agrupaciones__cta {
    appearance: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--cdc-forest-solid) 0%, var(--cdc-forest-deep, #0a5c2e) 100%);
    color: #fff;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 6px 16px rgba(13, 124, 62, 0.28);
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.cdc-agrupaciones__cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 10px 22px rgba(13, 124, 62, 0.34);
}.cdc-agrupaciones__cta i { font-size: 12px; }.cdc-agrupaciones__cta--ghost:hover {
    border-color: var(--cdc-wheat-line);
    box-shadow: 0 4px 10px rgba(26, 18, 8, 0.08);
}.cdc-agrupaciones__count strong {
    color: var(--cdc-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Grid master/detail layout ─────────────────────────────────────────── */
.cdc-agrupaciones__layout {
    display: grid;
    grid-template-columns: minmax(360px, 460px) 1fr;
    gap: clamp(14px, 1.4vw, 22px);
    align-items: start;
}

@container (max-width: 980px) {
    .cdc-agrupaciones__layout { grid-template-columns: 1fr; }
}

/* ── Panel master (lista de cards) ─────────────────────────────────────── */
.cdc-agrupaciones__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 75vh;
    overflow-y: auto;
    padding: 4px 4px 4px 0;
    scrollbar-gutter: stable;
}

.cdc-agrupaciones__list::-webkit-scrollbar { width: 8px; }
.cdc-agrupaciones__list::-webkit-scrollbar-thumb {
    background: rgba(26, 18, 8, 0.18);
    border-radius: 8px;
}
.cdc-agrupaciones__list::-webkit-scrollbar-thumb:hover { background: rgba(26, 18, 8, 0.30); }

/* ── Card de agrupacion ────────────────────────────────────────────────── */
.cdc-ag-card {
    --cdc-ag-band: var(--cdc-wheat);
    --cdc-ag-tone: var(--cdc-forest-soft);

    position: relative;
    /* La lista es flex en columna con max-height; con overflow:hidden el min-height
       automatico es 0 y, sin esto, las cards se encogen hasta cortar el nombre en
       lugar de que la lista haga scroll. */
    flex-shrink: 0;
    display: grid;
    grid-template-rows: auto auto auto auto;
    gap: 10px;
    padding: 14px 14px 12px;
    border: 1px solid var(--cdc-ag-line);
    border-radius: var(--cdc-ag-radius);
    background: linear-gradient(180deg, #fff 0%, var(--cdc-ag-paper) 100%);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform 200ms cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 200ms ease, border-color 200ms ease;
    animation: cdc-ag-fade-up 320ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
    animation-delay: calc(var(--i, 0) * 35ms);
}

@keyframes cdc-ag-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cdc-ag-card[data-finca="true"] {
    --cdc-ag-band: var(--cdc-ochre);
    --cdc-ag-tone: rgba(212, 168, 83, 0.16);
}

.cdc-ag-card[data-empty="true"] {
    --cdc-ag-band: rgba(26, 18, 8, 0.18);
    --cdc-ag-tone: rgba(26, 18, 8, 0.04);
    opacity: 0.85;
}

.cdc-ag-card[data-active="true"] {
    border-color: var(--cdc-forest);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 12px 28px rgba(13, 124, 62, 0.18);
    transform: translateY(-1px);
}

.cdc-ag-card:hover {
    transform: translateY(-2px);
    border-color: var(--cdc-wheat-line);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 10px 24px rgba(26, 18, 8, 0.10);
}

.cdc-ag-card:focus-visible {
    outline: 2px solid var(--cdc-forest);
    outline-offset: 2px;
}

.cdc-ag-card__band {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--cdc-ag-band);
}

.cdc-ag-card__head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-left: 8px;
}

.cdc-ag-card__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--cdc-ag-tone);
    color: var(--cdc-ag-band);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.cdc-ag-card__title-block { min-width: 0; flex: 1; }

.cdc-ag-card__name {
    font-family: 'Fraunces', 'Instrument Serif', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.15;
    margin: 0;
    color: var(--cdc-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cdc-ag-card__sub {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    margin: 4px 0 0 0;
}

.cdc-ag-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-left: 8px;
}

.cdc-ag-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 8px;
    border-radius: 999px;
    background: rgba(26, 18, 8, 0.06);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cdc-bark);
}
.cdc-ag-tag--finca {
    background: var(--cdc-ochre-solid);
    color: #fff;
}
.cdc-ag-tag--vacia {
    background: rgba(26, 18, 8, 0.06);
    color: var(--cdc-bark);
}
.cdc-ag-tag--ok {
    background: rgba(13, 124, 62, 0.10);
    color: var(--cdc-forest);
}

.cdc-ag-card__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 8px 4px;
    margin: 0 4px;
    border-top: 1px solid var(--cdc-ag-line);
}

.cdc-ag-card__metric { display: flex; flex-direction: column; gap: 2px; }

.cdc-ag-card__metric-value {
    font-family: 'Inter Tight', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cdc-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.cdc-ag-card__metric-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--cdc-bark);
}

.cdc-ag-card__progress {
    height: 4px;
    border-radius: 999px;
    background: rgba(26, 18, 8, 0.08);
    overflow: hidden;
    margin: 0 4px;
}
.cdc-ag-card__progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--cdc-forest), var(--cdc-ochre));
    border-radius: inherit;
    transition: width 240ms ease;
}

.cdc-ag-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
    padding-left: 8px;
    border-top: 1px dashed var(--cdc-ag-line);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--cdc-bark);
}

.cdc-ag-card__actions {
    display: inline-flex;
    gap: 4px;
}

.cdc-ag-card__icon-btn {
    appearance: none;
    border: 1px solid var(--cdc-ag-line);
    background: #fff;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--cdc-bark);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 160ms ease;
}
.cdc-ag-card__icon-btn:hover {
    color: var(--cdc-ink);
    border-color: var(--cdc-wheat-line);
}
.cdc-ag-card__icon-btn--danger:hover {
    color: var(--cdc-danger);
    border-color: var(--cdc-danger);
    background: rgba(229, 57, 53, 0.06);
}

/* ── Panel detalle ─────────────────────────────────────────────────────── */
.cdc-agrupaciones__detail {
    position: sticky;
    top: 8px;
    border: 1px solid var(--cdc-ag-line);
    border-radius: var(--cdc-ag-radius);
    background: linear-gradient(180deg, #fff 0%, var(--cdc-ag-paper) 100%);
    overflow: hidden;
    isolation: isolate;
}

.cdc-agrupaciones__detail-head {
    position: relative;
    padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 28px);
    background:
        radial-gradient(ellipse 380px 200px at 100% -50%, rgba(212, 168, 83, 0.18), transparent 60%),
        linear-gradient(180deg, #fbf7ee 0%, #f4ede0 100%);
    border-bottom: 1px solid var(--cdc-ag-line);
}

.cdc-agrupaciones__detail-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    margin-bottom: 8px;
}
.cdc-agrupaciones__detail-eyebrow i { color: var(--cdc-forest); }

.cdc-agrupaciones__detail-title {
    font-family: 'Fraunces', 'Instrument Serif', Georgia, serif;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--cdc-ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cdc-agrupaciones__detail-meta {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--cdc-bark);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.cdc-agrupaciones__detail-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cdc-agrupaciones__detail-meta-item i { color: var(--cdc-bark); opacity: 0.75; }

.cdc-agrupaciones__detail-actions {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cdc-agrupaciones__detail-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0;
    border-bottom: 1px solid var(--cdc-ag-line);
}

.cdc-agrupaciones__detail-kpi {
    padding: 14px 18px;
    border-left: 1px solid var(--cdc-ag-line);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cdc-agrupaciones__detail-kpi:first-child { border-left: 0; }

.cdc-agrupaciones__detail-kpi-value {
    font-family: 'Fraunces', 'Instrument Serif', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--cdc-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.cdc-agrupaciones__detail-kpi-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    margin-top: 4px;
}

.cdc-agrupaciones__detail-body { padding: 18px; }

.cdc-agrupaciones__detail-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    margin: 0 0 12px 0;
}

.cdc-agrupaciones__detail-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--cdc-ag-line);
    border-radius: 8px;
    padding: 0 10px;
    height: 30px;
    font-size: 0.85rem;
    min-width: 200px;
}
.cdc-agrupaciones__detail-search:focus-within { border-color: var(--cdc-forest); }
.cdc-agrupaciones__detail-search > i { color: var(--cdc-bark); margin-right: 6px; font-size: 11px; }
.cdc-agrupaciones__detail-search input {
    border: 0;
    outline: 0;
    background: transparent;
    flex: 1;
    height: 100%;
    font-family: inherit;
    color: var(--cdc-ink);
}.cdc-agrupaciones__detail-empty i { font-size: 32px; color: var(--cdc-wheat); margin-bottom: 12px; }

/* ── Empty state global / loading skeleton ─────────────────────────────── */
.cdc-agrupaciones__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 4vw, 64px) 24px;
    text-align: center;
    background: linear-gradient(180deg, #fff 0%, var(--cdc-ag-paper) 100%);
    border: 1px dashed var(--cdc-ag-line);
    border-radius: var(--cdc-ag-radius);
}

.cdc-agrupaciones__empty-illu {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, var(--cdc-wheat) 0%, var(--cdc-ochre-solid) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 16px;
    box-shadow: 0 8px 22px rgba(212, 168, 83, 0.30);
}.cdc-agrupaciones__skel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.cdc-agrupaciones__skel {
    height: 130px;
    border-radius: var(--cdc-ag-radius);
    background: linear-gradient(110deg, rgba(26, 18, 8, 0.04) 25%, rgba(26, 18, 8, 0.08) 50%, rgba(26, 18, 8, 0.04) 75%);
    background-size: 200% 100%;
    animation: cdc-ag-shimmer 1.4s linear infinite;
    border: 1px solid var(--cdc-ag-line);
}
@keyframes cdc-ag-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .cdc-agrupaciones__hero { padding: 18px 18px; }
    .cdc-agrupaciones__hero-head { align-items: flex-start; }    .cdc-agrupaciones__stat:first-child { padding-left: 0; }
    .cdc-agrupaciones__stat { padding: 0 10px; }
    .cdc-agrupaciones__list { max-height: none; }
    .cdc-agrupaciones__detail { position: static; }
}

@media (prefers-reduced-motion: reduce) {
    .cdc-ag-card { animation: none; }
    .cdc-agrupaciones__skel { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   17 · AGRUPACIONES · Diálogos editoriales (edición + detalle SIGPAC)
   Header con eyebrow + serif title, fieldsets como paper cards, selector
   de parcelas con toolbar + cabecera serif + checkboxes custom + footer
   con totales destacados.
   ═══════════════════════════════════════════════════════════════════════════ */

.cdc-ag-dialog {
    --cdc-ag-line: rgba(26, 18, 8, 0.10);
    --cdc-ag-paper: #fbf7ee;
    --cdc-ag-paper-2: #f4ede0;

    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--cdc-ink);
    font-family: 'Inter Tight', 'Source Sans 3', system-ui, sans-serif;
    container-type: inline-size;
}

/* ── Header del diálogo ──────────────────────────────────────────────── */
.cdc-ag-dialog__head {
    position: relative;
    padding: 18px 24px 16px;
    background:
        radial-gradient(ellipse 380px 200px at 100% -50%, rgba(212, 168, 83, 0.18), transparent 60%),
        linear-gradient(180deg, var(--cdc-ag-paper) 0%, var(--cdc-ag-paper-2) 100%);
    border-bottom: 1px solid var(--cdc-ag-line);
    border-radius: 12px 12px 0 0;
    margin: -16px -16px 0 -16px;
    overflow: hidden;
    isolation: isolate;
}

.cdc-ag-dialog__head::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.18;
    mix-blend-mode: multiply;
    background-image: none;   /* enterprise: sin grano de papel */
}

.cdc-ag-dialog__head > * { position: relative; z-index: 1; }

.cdc-ag-dialog__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    margin-bottom: 6px;
}
.cdc-ag-dialog__eyebrow::before {
    content: '';
    width: 18px;
    height: 1px;
    background: var(--cdc-wheat);
    flex-shrink: 0;
}
.cdc-ag-dialog__eyebrow i { color: var(--cdc-forest); }

.cdc-ag-dialog__title {
    font-family: 'Fraunces', 'Instrument Serif', Georgia, serif;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--cdc-ink);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cdc-ag-dialog__title em {
    font-style: italic;
    font-weight: 400;
    color: var(--cdc-bark);
}

.cdc-ag-dialog__lede {
    margin: 6px 0 0 0;
    font-size: 0.85rem;
    color: var(--cdc-bark);
    max-width: 70ch;
}

/* ── Body scrollable ─────────────────────────────────────────────────── */
.cdc-ag-dialog__body {
    flex: 1 1 auto;
    padding: 18px 4px 4px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    max-height: 70vh;
}
.cdc-ag-dialog__body::-webkit-scrollbar { width: 8px; }
.cdc-ag-dialog__body::-webkit-scrollbar-thumb {
    background: rgba(26, 18, 8, 0.18);
    border-radius: 8px;
}

/* ── Fieldset como "paper card" ──────────────────────────────────────── */
.cdc-ag-fieldset {
    border: 1px solid var(--cdc-ag-line);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff 0%, var(--cdc-ag-paper) 100%);
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.cdc-ag-fieldset__legend {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--cdc-ag-line);
    background: rgba(255, 255, 255, 0.4);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cdc-bark);
}
.cdc-ag-fieldset__legend i { color: var(--cdc-forest); font-size: 12px; }
.cdc-ag-fieldset__legend strong { color: var(--cdc-ink); font-weight: 600; }

.cdc-ag-fieldset__body {
    padding: 16px;
}

.cdc-ag-fieldset__row {
    display: grid;
    gap: 12px;
}
.cdc-ag-fieldset__row--3 { grid-template-columns: 1fr 2fr 130px; }

@container (max-width: 720px) {
    .cdc-ag-fieldset__row--3 { grid-template-columns: 1fr; }
}

/* Field genérico */
.cdc-ag-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cdc-ag-field__label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cdc-bark);
}
.cdc-ag-field__label--required::after {
    content: '*';
    color: var(--cdc-danger);
    margin-left: 4px;
}

/* Checkbox personalizado “Es Finca” */
.cdc-ag-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--cdc-ag-line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: border-color 160ms ease, background 160ms ease;
}
.cdc-ag-checkbox:hover:not([data-disabled="true"]) {
    border-color: var(--cdc-ochre);
    background: rgba(212, 168, 83, 0.06);
}
.cdc-ag-checkbox[data-checked="true"] {
    border-color: var(--cdc-ochre);
    background: var(--cdc-forest-soft);
}
.cdc-ag-checkbox[data-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.cdc-ag-checkbox__icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--cdc-ag-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #fff;
    transition: all 160ms ease;
    font-size: 11px;
}
.cdc-ag-checkbox[data-checked="true"] .cdc-ag-checkbox__icon {
    background: var(--cdc-ochre);
    border-color: var(--cdc-ochre);
}
.cdc-ag-checkbox__text { display: flex; flex-direction: column; gap: 1px; }
.cdc-ag-checkbox__title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cdc-ink);
}
.cdc-ag-checkbox__hint {
    font-size: 11px;
    color: var(--cdc-bark);
}

/* ── Selector de parcelas: toolbar ───────────────────────────────────── */
.cdc-ag-picker__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid var(--cdc-ag-line);
}
.cdc-ag-picker__count {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    background: rgba(26, 18, 8, 0.06);
    padding: 4px 10px;
    border-radius: 999px;
}
.cdc-ag-picker__count strong { color: var(--cdc-ink); font-weight: 700; }

.cdc-ag-picker__search {
    flex: 1 1 220px;
    min-width: 200px;
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--cdc-ag-line);
    border-radius: 10px;
    height: 34px;
    padding: 0 10px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.cdc-ag-picker__search:focus-within {
    border-color: var(--cdc-forest);
    box-shadow: 0 0 0 3px rgba(13, 124, 62, 0.12);
}
.cdc-ag-picker__search i { color: var(--cdc-bark); margin-right: 8px; font-size: 12px; }
.cdc-ag-picker__search input {
    flex: 1; border: 0; outline: 0; background: transparent;
    font-family: inherit; font-size: 0.88rem;
    color: var(--cdc-ink); height: 100%;
}

.cdc-ag-picker__btn {
    appearance: none;
    border: 1px solid var(--cdc-ag-line);
    background: #fff;
    color: var(--cdc-ink);
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 160ms ease;
}
.cdc-ag-picker__btn:hover { border-color: var(--cdc-wheat-line); background: var(--cdc-ag-paper); }
.cdc-ag-picker__btn i { font-size: 11px; color: var(--cdc-bark); }

/* Tabla scrollable de parcelas */
/* Vigencia de la parcela en las rejillas de agrupaciones: la baja canta en ambar
   porque meter en una agrupacion una parcela ya dada de baja es el error facil. */
.cdc-ag-vig { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cdc-ag-vig--baja { color: var(--cdc-amber, #B6791F); }

.cdc-ag-picker__table-wrap {
    border-top: 0;
    max-height: 420px;
    overflow-y: auto;
    background: #fff;
}
.cdc-ag-picker__table-wrap::-webkit-scrollbar { width: 8px; }
.cdc-ag-picker__table-wrap::-webkit-scrollbar-thumb { background: rgba(26, 18, 8, 0.18); border-radius: 8px; }

.cdc-ag-picker__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.cdc-ag-picker__table thead th {
    position: sticky;
    top: 0;
    background: var(--cdc-ag-paper);
    border-bottom: 1px solid var(--cdc-ag-line);
    text-align: left;
    padding: 8px 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    z-index: 1;
}
.cdc-ag-picker__table thead th.cdc-num { text-align: right; }

.cdc-ag-picker__table tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(26, 18, 8, 0.06);
    color: var(--cdc-ink);
    font-variant-numeric: tabular-nums;
}
.cdc-ag-picker__table tbody td.cdc-num { text-align: right; font-family: 'Inter Tight', sans-serif; font-weight: 500; }
.cdc-ag-picker__table tbody td.cdc-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.78rem; }

.cdc-ag-picker__table tbody tr {
    cursor: pointer;
    transition: background 120ms ease;
}
.cdc-ag-picker__table tbody tr:hover { background: rgba(212, 168, 83, 0.08); }
.cdc-ag-picker__table tbody tr[data-selected="true"] {
    background: rgba(13, 124, 62, 0.06);
}
.cdc-ag-picker__table tbody tr[data-selected="true"]:hover {
    background: rgba(13, 124, 62, 0.10);
}

.cdc-ag-row-check {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--cdc-ag-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #fff;
    transition: all 140ms ease;
    font-size: 10px;
}
.cdc-ag-picker__table tr[data-selected="true"] .cdc-ag-row-check {
    background: var(--cdc-forest);
    border-color: var(--cdc-forest);
}

/* Pie del selector con totales */
.cdc-ag-picker__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(180deg, #fff 0%, var(--cdc-ag-paper) 100%);
    border-top: 1px solid var(--cdc-ag-line);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.cdc-ag-picker__foot-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.cdc-ag-picker__foot-total {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cdc-ag-picker__foot-total-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cdc-bark);
}
.cdc-ag-picker__foot-total-value {
    font-family: 'Fraunces', 'Instrument Serif', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--cdc-ink);
    font-variant-numeric: tabular-nums;
}
.cdc-ag-picker__foot-total-value--accent { color: var(--cdc-forest); }

/* ── Pie de acciones ─────────────────────────────────────────────────── */
.cdc-ag-dialog__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 14px 4px 4px 4px;
    border-top: 1px solid var(--cdc-ag-line);
    margin-top: 6px;
}
.cdc-ag-dialog__actions-info {
    margin-right: auto;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--cdc-bark);
}
.cdc-ag-dialog__actions-info--invalid { color: var(--cdc-danger); }

.cdc-ag-btn {
    appearance: none;
    border: 1px solid var(--cdc-ag-line);
    background: #fff;
    color: var(--cdc-ink);
    padding: 9px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 160ms ease;
}
.cdc-ag-btn:hover { border-color: var(--cdc-wheat-line); }
.cdc-ag-btn--primary {
    background: linear-gradient(135deg, var(--cdc-forest-solid) 0%, var(--cdc-forest-deep, #0a5c2e) 100%);
    color: #fff;
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 16px rgba(13, 124, 62, 0.28);
}
.cdc-ag-btn--primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    border-color: transparent;
}
.cdc-ag-btn--primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

/* ── Detalle SIGPAC modal ────────────────────────────────────────────── */
.cdc-ag-detail__head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--cdc-bark);
}
.cdc-ag-detail__head-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cdc-ag-detail__head-meta-item i { color: var(--cdc-bark); opacity: 0.75; }
.cdc-ag-detail__head-meta-item strong {
    color: var(--cdc-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cdc-ag-detail__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0;
    border-top: 1px solid var(--cdc-ag-line);
    border-bottom: 1px solid var(--cdc-ag-line);
}
.cdc-ag-detail__kpi {
    padding: 14px 18px;
    border-left: 1px solid var(--cdc-ag-line);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cdc-ag-detail__kpi:first-child { border-left: 0; }
.cdc-ag-detail__kpi-value {
    font-family: 'Fraunces', 'Instrument Serif', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--cdc-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.cdc-ag-detail__kpi-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .cdc-ag-btn--primary:hover { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   18 · AGRUPACIONES · Avatar dinámico + tabla editorial
   Avatar gradient con hue dinámico (paridad cdc-titular-card__avatar) +
   tabla compacta con header sticky monospace y filas con accent al hover.
   ═══════════════════════════════════════════════════════════════════════════ */

.cdc-ag-card__avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Fraunces', 'Instrument Serif', Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    background:
        linear-gradient(135deg,
            hsl(var(--h, 32) 60% 52%) 0%,
            hsl(calc(var(--h, 32) + 22) 60% 38%) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 4px 12px hsla(var(--h, 32), 50%, 35%, 0.25);
    position: relative;
    overflow: hidden;
}

.cdc-ag-card__avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 50%);
    pointer-events: none;
}

.cdc-ag-card[data-finca="true"] .cdc-ag-card__avatar {
    /* Las fincas usan un override coherente ocre→bark independiente del hue */
    background: linear-gradient(135deg, var(--cdc-ochre) 0%, #a17a36 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 4px 12px rgba(212, 168, 83, 0.30);
}

/* ── Vista Tabla (alternativa a Cards) ─────────────────────────────────── */
.cdc-agrupaciones__table {
    border: 1px solid var(--cdc-ag-line);
    border-radius: var(--cdc-ag-radius);
    background: linear-gradient(180deg, #fff 0%, var(--cdc-ag-paper) 100%);
    overflow: hidden;
}

.cdc-agrupaciones__table .rz-data-grid,
.cdc-agrupaciones__table .rz-grid-table {
    background: transparent !important;
}

.cdc-agrupaciones__table .rz-grid-table thead th {
    background: var(--cdc-ag-paper) !important;
    color: var(--cdc-bark) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 10.5px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--cdc-ag-line) !important;
}

.cdc-agrupaciones__table .rz-grid-table tbody td {
    color: var(--cdc-ink) !important;
    font-size: 0.86rem !important;
    border-bottom: 1px solid rgba(26, 18, 8, 0.06) !important;
}

.cdc-agrupaciones__table .rz-grid-table tbody tr:hover {
    background: rgba(212, 168, 83, 0.08) !important;
}

/* Selector de fila activa en la tabla */
.cdc-agrupaciones__table .rz-grid-table tbody tr.cdc-row-selected {
    background: rgba(13, 124, 62, 0.06) !important;
    box-shadow: inset 3px 0 0 var(--cdc-forest);
}

/* Tag inline cuando va dentro del grid */
.cdc-agrupaciones__table .cdc-ag-tag { font-size: 10px; padding: 2px 7px; }

/* Acciones inline para la tabla */
.cdc-agrupaciones__table .cdc-ag-card__actions { display: inline-flex; gap: 4px; }

/* Bar minigráfica dentro de tabla (% explotación) */
.cdc-agrupaciones__inline-bar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.cdc-agrupaciones__inline-bar-track {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: rgba(26, 18, 8, 0.08);
    overflow: hidden;
    min-width: 60px;
}
.cdc-agrupaciones__inline-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cdc-forest), var(--cdc-ochre));
    border-radius: inherit;
}
.cdc-agrupaciones__inline-bar-value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    color: var(--cdc-bark);
    font-variant-numeric: tabular-nums;
    min-width: 38px;
    text-align: right;
}

/* Refinar el card cuando está activo (master-detail) */
.cdc-ag-card[data-active="true"] .cdc-ag-card__avatar {
    transform: scale(1.04);
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

/* ═══════════════════════════════════════════════════════════════════════
   APLICADORES (Maestras) — extiende el lenguaje editorial de Titulares
   Reusa: .cdc-titulares__*, .cdc-titular-card, .cdc-tipo-chip, .cdc-status-chip
   Añade: estados específicos de carnet ROPO y barra de acciones secundarias.
   ═══════════════════════════════════════════════════════════════════════ */

/* Toolbar de aplicadores: search + filters + view-toggle + actions */
.cdc-aplicadores__toolbar {
    grid-template-columns: minmax(240px, 1fr) auto auto auto;
}

@container (max-width: 1280px) {
    .cdc-aplicadores__toolbar {
        grid-template-columns: minmax(240px, 1fr) auto auto;
    }
    .cdc-aplicadores__actions {
        grid-column: 1 / -1;
        justify-self: end;
        flex-wrap: wrap;
    }
}

@container (max-width: 880px) {
    .cdc-aplicadores__toolbar {
        grid-template-columns: 1fr;
    }
    .cdc-aplicadores__actions {
        grid-column: 1;
        justify-self: stretch;
    }
}

.cdc-aplicadores__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Link/botón secundario (ROPO, REGEPA, PDF) */
.cdc-aplicadores__link {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--cdc-tit-line);
    border-radius: 9px;
    background: var(--cdc-tit-paper);
    color: var(--cdc-bark);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.cdc-aplicadores__link:hover:not(:disabled) {
    color: var(--cdc-ink);
    background: #fff;
    border-color: var(--cdc-wheat-line);
}

.cdc-aplicadores__link:active:not(:disabled) {
    transform: translateY(1px);
}

.cdc-aplicadores__link:disabled {
    opacity: 0.55;
    cursor: progress;
}

.cdc-aplicadores__link i {
    font-size: 12px;
    color: var(--cdc-ochre);
}

/* Chip ROPO — color sky para distinguirlo del chip CIF */
.cdc-tipo-chip--ropo .cdc-tipo-chip__tag {
    background: var(--cdc-sky);
}

/* Bandas superiores del card según estado de carnet */
.cdc-aplicador-card[data-estado="vigente"]      { --cdc-card-band: var(--cdc-forest); }
.cdc-aplicador-card[data-estado="warning"]      { --cdc-card-band: var(--cdc-amber); }
.cdc-aplicador-card[data-estado="enrenovacion"] { --cdc-card-band: var(--cdc-ochre); }
.cdc-aplicador-card[data-estado="caducado"]     { --cdc-card-band: var(--cdc-danger); }
.cdc-aplicador-card[data-estado="noaplica"]     { --cdc-card-band: var(--cdc-mute); }

/* Card seleccionado — anillo + sombra sutil */
.cdc-aplicador-card.is-selected {
    border-color: var(--cdc-forest-line);
    box-shadow:
        0 0 0 2px var(--cdc-forest-soft),
        0 14px 28px -10px rgba(13, 124, 62, 0.20);
}

.cdc-aplicador-card.is-selected .cdc-titular-card__band {
    height: 4px;
}

/* Resumen REGEPA: barra editorial debajo del toolbar */
.cdc-aplicadores__regepa-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--cdc-wheat-line);
    border-radius: 12px;
    background:
        linear-gradient(90deg, var(--cdc-forest-soft) 0%, transparent 60%),
        rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
}

.cdc-aplicadores__regepa-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 99px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid;
    font-variant-numeric: tabular-nums;
}

.cdc-aplicadores__regepa-pill i { font-size: 11px; }

.cdc-aplicadores__regepa-pill--success {
    color: var(--cdc-forest);
    background: var(--cdc-forest-soft);
    border-color: var(--cdc-forest-line);
}

.cdc-aplicadores__regepa-pill--danger {
    color: var(--cdc-danger);
    background: var(--cdc-danger-soft);
    border-color: var(--cdc-danger-line);
}

.cdc-aplicadores__regepa-pill--warning {
    color: var(--cdc-amber);
    background: var(--cdc-amber-soft);
    border-color: rgba(182, 121, 31, 0.32);
}

.cdc-aplicadores__regepa-pill--info {
    color: var(--cdc-sky);
    background: var(--cdc-sky-soft);
    border-color: rgba(91, 140, 190, 0.32);
}

/* Toggle "Solo de esta explotación" */
.cdc-aplicadores__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 10px;
    border: 1px solid var(--cdc-tit-line);
    border-radius: 9px;
    background: var(--cdc-tit-paper);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cdc-bark);
    user-select: none;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.cdc-aplicadores__toggle:hover {
    color: var(--cdc-ink);
    border-color: var(--cdc-wheat-line);
    background: #fff;
}

.cdc-aplicadores__toggle input[type="checkbox"] {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.cdc-aplicadores__toggle-track {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
    border-radius: 999px;
    background: rgba(26, 18, 8, 0.12);
    transition: background 200ms ease;
    flex-shrink: 0;
}

.cdc-aplicadores__toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(26, 18, 8, 0.25);
    transition: transform 200ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

.cdc-aplicadores__toggle:has(input:checked) .cdc-aplicadores__toggle-track {
    background: var(--cdc-forest);
}
.cdc-aplicadores__toggle:has(input:checked) .cdc-aplicadores__toggle-thumb {
    transform: translateX(14px);
}
.cdc-aplicadores__toggle:has(input:checked) {
    color: var(--cdc-ink);
    border-color: var(--cdc-forest-line);
    background: var(--cdc-forest-soft);
}

.cdc-aplicadores__toggle:focus-within {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.32);
}

/* Mobile */
@media (max-width: 640px) {
    .cdc-aplicadores__actions {
        gap: 6px;
    }
    .cdc-aplicadores__link {
        padding: 7px 10px;
        font-size: 12px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   99 · HEADER UNIFICATION · CABECERAS UNIFICADAS A UN SOLO PATRON
   ─────────────────────────────────────────────────────────────────────────
   Antes de esta seccion existian 5 variantes de cabecera distintas:
     · cdc-heading        (73 paginas - PATRON CANONICO)
     · cdc-masas__hero    (1 pagina  - tenia gradient lateral cobalt+forest)
     · cdc-titulares__hero (4 paginas - background propio)
     · cdc-agrupaciones__hero (1 pagina - hero custom)
     · cdc-titular-hero   (1 pagina - franja tricolor + avatar grande + halo)
   Todas redirigen ahora al MISMO aspecto visual que cdc-heading:
     · Sin background decorativo / franja tricolor / paper / halo
     · Eyebrow uppercase 0.72rem letter-spacing 0.04em color bark
     · Title Plus Jakarta Sans 700 clamp(1.625, 1.8vw+0.85, 2.125)rem
     · Lede sans 0.95rem max-width 70ch color soil
     · border-bottom 1px slate-200, padding 0 0 16px, margin 0 0 24px
     · Actions absolutas a la derecha
   La funcionalidad semantica (avatar, breadcrumb, KPI) se preserva pero
   con estilos discretos coherentes con el resto del DS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- 99.1 Reset del wrapper hero a layout cdc-heading ------------------- */
.cdc-masas__hero,
.cdc-titulares__hero,
.cdc-agrupaciones__hero,
.cdc-titular-hero {
    margin: 0 0 24px !important;
    padding: 0 0 16px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--cdc-border) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    position: relative;
    display: block !important;
    overflow: visible !important;
    isolation: auto !important;
    min-height: 0 !important;
}

/* Eliminar TODOS los pseudo-elementos decorativos (franja, gradient, paper) */
.cdc-masas__hero::before,
.cdc-masas__hero::after,
.cdc-titulares__hero::before,
.cdc-titulares__hero::after,
.cdc-agrupaciones__hero::before,
.cdc-agrupaciones__hero::after,
.cdc-titular-hero::before,
.cdc-titular-hero::after,
.cdc-titular-hero__paper,
.cdc-titular-hero__halo {
    display: none !important;
    content: none !important;
}

/* ---- 99.2 Inner / wrappers · neutralizar padding y columnas extra ------ */
.cdc-titulares__hero-head,
.cdc-titulares__hero-text,
.cdc-masas__hero-head,
.cdc-masas__hero-text,
.cdc-agrupaciones__hero-head,
.cdc-agrupaciones__hero-text,
.cdc-titular-hero__main {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
}

/* Inner del Titular · flex con avatar a la izquierda */
.cdc-titular-hero__inner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* ---- 99.3 EYEBROW · uniforme con cdc-heading__eyebrow ------------------ */
.cdc-masas__eyebrow,
.cdc-titulares__eyebrow,
.cdc-agrupaciones__eyebrow,
.cdc-titular-hero__eyebrow {
    font-family: var(--cdc-sans) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--cdc-bark) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    line-height: 1.4 !important;
}
.cdc-masas__eyebrow i,
.cdc-titulares__eyebrow i,
.cdc-agrupaciones__eyebrow i,
.cdc-titular-hero__eyebrow i {
    color: var(--cdc-forest) !important;
    font-size: 0.85em !important;
}
.cdc-titular-hero__crumb {
    color: var(--cdc-bark) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.cdc-titular-hero__crumb strong {
    color: var(--cdc-soil) !important;
    font-weight: 600 !important;
}

/* ---- 99.4 TITLE · uniforme con cdc-heading__title ---------------------- */
.cdc-masas__title,
.cdc-titulares__title,
.cdc-agrupaciones__title,
.cdc-titular-hero__title {
    font-family: var(--cdc-display) !important;
    font-size: clamp(1.625rem, 1.8vw + 0.85rem, 2.125rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--cdc-ink) !important;
    background: transparent !important;
    text-align: left !important;
    text-shadow: none !important;
    text-wrap: balance;
    font-variation-settings: "wght" 700 !important;
    font-style: normal !important;
}
/* Acento gradient forest para palabras enfatizadas (em / .accent) */
.cdc-masas__title em,
.cdc-titulares__title em,
.cdc-agrupaciones__title em,
.cdc-titular-hero__title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--cdc-forest) 0%, var(--cdc-forest-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
}

/* ---- 99.5 LEDE / subtitle · uniforme con cdc-heading__lede ------------- */
.cdc-masas__lede,
.cdc-titulares__lede,
.cdc-agrupaciones__lede,
.cdc-titular-hero__sub,
.cdc-titular-hero__lede {
    font-family: var(--cdc-sans) !important;
    font-style: normal !important;
    font-size: 0.95rem !important;
    color: var(--cdc-soil) !important;
    line-height: 1.55 !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    max-width: 70ch !important;
    font-weight: 400 !important;
    background: transparent !important;
}
.cdc-masas__lede strong,
.cdc-titulares__lede strong,
.cdc-agrupaciones__lede strong,
.cdc-titular-hero__sub strong,
.cdc-titular-hero__lede strong {
    color: var(--cdc-ink) !important;
    font-weight: 600 !important;
}

/* ---- 99.6 SEAL / Badge a la derecha · chip discreto cobalt -------------- */
.cdc-masas__seal,
.cdc-titulares__seal,
.cdc-agrupaciones__seal,
.cdc-titular-hero__flag {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 10px !important;
    font-family: var(--cdc-sans) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--cdc-cobalt-text, var(--cdc-cobalt)) !important;
    background: var(--cdc-cobalt-soft) !important;
    border: 1px solid var(--cdc-cobalt-line) !important;
    border-radius: var(--cdc-radius-pill) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}
.cdc-masas__seal i,
.cdc-titulares__seal i,
.cdc-agrupaciones__seal i,
.cdc-titular-hero__flag i {
    color: inherit !important;
    font-size: 0.85em !important;
}

/* ---- 99.7 ACTIONS · botones a la derecha ------------------------------ */
.cdc-titular-hero__actions {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* ---- 99.8 AVATAR del titular · 40x40 squircle inline ------------------ */
.cdc-titular-hero__avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: var(--cdc-radius-md) !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    border: 1px solid var(--cdc-border) !important;
    background: var(--cdc-forest-soft) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    transform: none !important;
}
.cdc-titular-hero__photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
.cdc-titular-hero__initials {
    font-family: var(--cdc-display) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--cdc-forest-text, var(--cdc-forest)) !important;
    text-shadow: none !important;
    letter-spacing: -0.02em !important;
}

/* ---- 99.9 CHIPS del titular (DNI / VIGENTE) · cdc-chip style ----------- */
.cdc-titular-hero__chips {
    margin-top: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    align-items: center !important;
}
.cdc-titular-hero__code {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 2px 9px !important;
    font-family: var(--cdc-sans) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--cdc-soil) !important;
    background: var(--cdc-surface-card) !important;
    border: 1px solid var(--cdc-border) !important;
    border-radius: var(--cdc-radius-pill) !important;
    box-shadow: none !important;
    line-height: 1.5 !important;
    font-variant-numeric: tabular-nums !important;
}

/* ---- 99.10 STATS KPI dentro de masas · grid debajo del header --------- */
.cdc-masas__stats {
    margin: 18px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 12px !important;
}

/* ---- 99.11 Responsive mobile -------------------------------------------- */
@media (max-width: 767px) {
    .cdc-masas__seal,
    .cdc-titulares__seal,
    .cdc-agrupaciones__seal,
    .cdc-titular-hero__flag,
    .cdc-titular-hero__actions {
        position: static !important;
        margin-top: 12px !important;
    }
    .cdc-titular-hero__inner {
        gap: 10px !important;
    }
}

/* ---- 99.12 Dark mode --------------------------------------------------- */
[data-theme="dark"] .cdc-masas__hero,
[data-theme="dark"] .cdc-titulares__hero,
[data-theme="dark"] .cdc-agrupaciones__hero,
[data-theme="dark"] .cdc-titular-hero {
    border-bottom-color: var(--cdc-border) !important;
}
[data-theme="dark"] .cdc-titular-hero__avatar {
    background: rgba(34, 197, 94, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .cdc-titular-hero__initials {
    color: #4ADE80 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   99B · BODY UNIFICATION · CUERPOS UNIFICADOS A UN SOLO PATRON
   ─────────────────────────────────────────────────────────────────────────
   Igual problema que las cabeceras: cada familia (cdc-aplicadores__,
   cdc-pozos__, cdc-masas__, cdc-titulares__, cdc-agrupaciones__) tiene su
   propia version de:
     · empty state    (cream + dashed amber, slate + dashed slate, gris,
                       cobalt circle, naranja gota...)
     · toolbar        (search + filters + actions con backgrounds distintos)
     · stats grid     (KPI cards con border-radius/shadow distintos)
     · filter chips   (pills oscuros, pills cream, pills slate...)
     · search input   (border cream, border slate, sin border)
   Todos redirigen ahora al MISMO aspecto enterprise:
     · Empty state: bg surface-card + border slate solido + icon squircle
       forest-soft + title display 600 + text sans 0.9rem soil
     · Toolbar: bg surface-card + border slate + padding 12 14
     · Stats: grid auto-fit + ring shadow + accent left
     · Filter chips: pill slate-card (default) / cobalt-soft (active)
     · Search: input slate-border + icon left
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- 99B.1 EMPTY STATE · uniforme con cdc-empty -------------------------- */
.cdc-aplicadores__empty,
.cdc-pozos__empty,
.cdc-masas__empty,
.cdc-titulares__empty,
.cdc-agrupaciones__empty,
.cdc-masas__no-explotacion,
.cdc-agrupaciones__detail-empty {
    text-align: center !important;
    padding: 56px 24px !important;
    background: var(--cdc-surface-card) !important;
    border: 1px solid var(--cdc-border) !important;
    border-style: solid !important;
    border-radius: var(--cdc-radius-lg) !important;
    color: var(--cdc-bark) !important;
    box-shadow: var(--cdc-shadow-xs) !important;
    margin: 16px 0 !important;
    background-image: none !important;
}

.cdc-aplicadores__empty-illu,
.cdc-pozos__empty-illu,
.cdc-masas__empty-illu,
.cdc-titulares__empty-illu,
.cdc-agrupaciones__empty-illu {
    width: 56px !important;
    height: 56px !important;
    border-radius: var(--cdc-radius-lg) !important;
    background: var(--cdc-forest-soft) !important;
    color: var(--cdc-forest) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.3rem !important;
    margin: 0 auto 14px !important;
    border: 1px solid var(--cdc-forest-line) !important;
    box-shadow: none !important;
    background-image: none !important;
}
.cdc-aplicadores__empty-illu i,
.cdc-pozos__empty-illu i,
.cdc-masas__empty-illu i,
.cdc-titulares__empty-illu i,
.cdc-agrupaciones__empty-illu i {
    color: inherit !important;
    font-size: inherit !important;
}

.cdc-aplicadores__empty-title,
.cdc-pozos__empty-title,
.cdc-masas__empty-title,
.cdc-titulares__empty-title,
.cdc-agrupaciones__empty-title {
    font-family: var(--cdc-display) !important;
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    color: var(--cdc-ink) !important;
    margin: 0 0 6px !important;
    letter-spacing: -0.015em !important;
    line-height: 1.3 !important;
    text-shadow: none !important;
    background: transparent !important;
}

.cdc-aplicadores__empty-text,
.cdc-pozos__empty-text,
.cdc-masas__empty-text,
.cdc-titulares__empty-text,
.cdc-agrupaciones__empty-text {
    font-family: var(--cdc-sans) !important;
    font-style: normal !important;
    font-size: 0.9rem !important;
    color: var(--cdc-soil) !important;
    max-width: 56ch !important;
    margin: 0 auto 16px !important;
    line-height: 1.55 !important;
    background: transparent !important;
}

/* ---- 99B.2 TOOLBAR · uniforme con cdc-toolbar --------------------------- */
.cdc-aplicadores__toolbar,
.cdc-masas__toolbar,
.cdc-titulares__toolbar,
.cdc-agrupaciones__toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding: 12px 14px !important;
    background: var(--cdc-surface-card) !important;
    border: 1px solid var(--cdc-border) !important;
    border-radius: var(--cdc-radius-md) !important;
    box-shadow: var(--cdc-shadow-xs) !important;
    margin: 0 0 16px !important;
    background-image: none !important;
}

/* ---- 99B.3 SEARCH · input slate-border + icon left ---------------------- */
.cdc-aplicadores__search,
.cdc-masas__search,
.cdc-titulares__search,
.cdc-agrupaciones__search,
.cdc-agrupaciones__detail-search {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 1 280px !important;
    min-width: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.cdc-aplicadores__search input,
.cdc-masas__search input,
.cdc-titulares__search input,
.cdc-agrupaciones__search input,
.cdc-agrupaciones__detail-search input {
    width: 100% !important;
    padding: 8px 36px 8px 36px !important;
    min-height: 38px !important;
    background: var(--cdc-surface-card) !important;
    border: 1px solid var(--cdc-border) !important;
    border-radius: var(--cdc-radius-md) !important;
    font-family: var(--cdc-sans) !important;
    font-size: 0.9375rem !important;
    color: var(--cdc-ink) !important;
    box-shadow: var(--cdc-shadow-xs) !important;
    transition:
        border-color var(--cdc-dur-fast) var(--cdc-ease-out),
        box-shadow var(--cdc-dur-fast) var(--cdc-ease-out) !important;
}
.cdc-aplicadores__search input:focus,
.cdc-masas__search input:focus,
.cdc-titulares__search input:focus,
.cdc-agrupaciones__search input:focus,
.cdc-agrupaciones__detail-search input:focus {
    outline: none !important;
    border-color: var(--cdc-cobalt) !important;
    box-shadow: var(--cdc-ring-input-cobalt) !important;
}
.cdc-aplicadores__search > i,
.cdc-masas__search > i,
.cdc-titulares__search > i,
.cdc-agrupaciones__search > i,
.cdc-agrupaciones__detail-search > i {
    position: absolute !important;
    left: 12px !important;
    color: var(--cdc-mute) !important;
    font-size: 0.85rem !important;
    pointer-events: none !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.cdc-aplicadores__search-clear,
.cdc-masas__search-clear,
.cdc-titulares__search-clear,
.cdc-agrupaciones__search-clear {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    border: none !important;
    background: var(--cdc-surface-well) !important;
    color: var(--cdc-bark) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.7rem !important;
    transition: background var(--cdc-dur-fast) var(--cdc-ease-out),
                color var(--cdc-dur-fast) var(--cdc-ease-out) !important;
}
.cdc-aplicadores__search-clear:hover,
.cdc-masas__search-clear:hover,
.cdc-titulares__search-clear:hover,
.cdc-agrupaciones__search-clear:hover {
    background: var(--cdc-border-strong) !important;
    color: var(--cdc-ink) !important;
}

/* ---- 99B.4 FILTER PILLS · slate-card / cobalt-soft active --------------- */
.cdc-aplicadores__filters,
.cdc-masas__filters,
.cdc-titulares__filters,
.cdc-agrupaciones__filters {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    background: var(--cdc-surface-well) !important;
    border: 1px solid var(--cdc-border) !important;
    border-radius: var(--cdc-radius-md) !important;
    padding: 3px !important;
}
.cdc-aplicadores__filters > *,
.cdc-masas__filters > *,
.cdc-titulares__filters > *,
.cdc-agrupaciones__filters > * {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 12px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--cdc-radius-sm) !important;
    font-family: var(--cdc-sans) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: var(--cdc-soil) !important;
    cursor: pointer !important;
    transition: background var(--cdc-dur-fast) var(--cdc-ease-out),
                color var(--cdc-dur-fast) var(--cdc-ease-out),
                box-shadow var(--cdc-dur-fast) var(--cdc-ease-out) !important;
    text-shadow: none !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}
.cdc-aplicadores__filters > *:hover,
.cdc-masas__filters > *:hover,
.cdc-titulares__filters > *:hover,
.cdc-agrupaciones__filters > *:hover {
    background: rgba(15, 23, 42, 0.04) !important;
    color: var(--cdc-ink) !important;
}
/* Estado activo · cobalt soft */
.cdc-aplicadores__filters > .is-active,
.cdc-masas__filters > .is-active,
.cdc-titulares__filters > .is-active,
.cdc-agrupaciones__filters > .is-active,
.cdc-aplicadores__filters > [aria-pressed="true"],
.cdc-masas__filters > [aria-pressed="true"],
.cdc-titulares__filters > [aria-pressed="true"],
.cdc-agrupaciones__filters > [aria-pressed="true"] {
    background: var(--cdc-surface-card) !important;
    color: var(--cdc-ink) !important;
    border-color: var(--cdc-border) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 1px 2px rgba(15, 23, 42, 0.04) !important;
    font-weight: 600 !important;
}

/* ---- 99B.5 STATS GRID · uniforme cdc-stat ------------------------------- */
.cdc-masas__stats,
.cdc-titulares__stats,
.cdc-agrupaciones__stats {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 12px !important;
    margin: 16px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
.cdc-masas__stat,
.cdc-titulares__stat,
.cdc-agrupaciones__stat {
    background: var(--cdc-surface-card) !important;
    border: 1px solid var(--cdc-border) !important;
    border-radius: var(--cdc-radius-lg) !important;
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: var(--cdc-shadow-xs) !important;
}
/* Accent left bar · forest default · variantes */
.cdc-masas__stat::before,
.cdc-titulares__stat::before,
.cdc-agrupaciones__stat::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    background: var(--cdc-forest) !important;
}
.cdc-masas__stat--forest::before,
.cdc-titulares__stat--forest::before,
.cdc-agrupaciones__stat--forest::before { background: var(--cdc-forest) !important; }
.cdc-masas__stat--sky::before,
.cdc-titulares__stat--sky::before,
.cdc-agrupaciones__stat--sky::before { background: var(--cdc-cobalt) !important; }
.cdc-masas__stat--ochre::before,
.cdc-titulares__stat--ochre::before,
.cdc-agrupaciones__stat--ochre::before { background: var(--cdc-ochre) !important; }
.cdc-masas__stat--danger::before,
.cdc-titulares__stat--danger::before,
.cdc-agrupaciones__stat--danger::before { background: var(--cdc-danger) !important; }

.cdc-masas__stat-value,
.cdc-titulares__stat-value,
.cdc-agrupaciones__stat-value {
    font-family: var(--cdc-display) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--cdc-ink) !important;
    letter-spacing: -0.025em !important;
    line-height: 1.1 !important;
    font-variant-numeric: tabular-nums !important;
    background: transparent !important;
    text-shadow: none !important;
}
.cdc-masas__stat-value em,
.cdc-titulares__stat-value em,
.cdc-agrupaciones__stat-value em {
    font-style: normal !important;
    font-size: 0.65em !important;
    font-weight: 500 !important;
    color: var(--cdc-bark) !important;
    margin-left: 4px !important;
}
.cdc-masas__stat-label,
.cdc-titulares__stat-label,
.cdc-agrupaciones__stat-label {
    font-family: var(--cdc-sans) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    color: var(--cdc-bark) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: transparent !important;
}
.cdc-masas__stat-label i,
.cdc-titulares__stat-label i,
.cdc-agrupaciones__stat-label i {
    color: var(--cdc-mute) !important;
    font-size: 0.85em !important;
}

/* ---- 99B.6 BOARD / GRID · sin background propio (lo aporta el page bg) - */
.cdc-aplicadores__board,
.cdc-masas__board,
.cdc-titulares__board,
.cdc-agrupaciones__board,
.cdc-masas__grid,
.cdc-titulares__grid {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ---- 99B.7 CTA buttons (Nuevo X / Crear primera Y) · enterprise solid -- */
.cdc-aplicadores__cta,
.cdc-masas__cta,
.cdc-titulares__cta,
.cdc-agrupaciones__cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    min-height: 36px !important;
    background: var(--cdc-forest-solid) !important;
    color: #fff !important;
    border: 1px solid var(--cdc-forest-deep) !important;
    border-radius: var(--cdc-radius-md) !important;
    font-family: var(--cdc-sans) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 1px 2px rgba(21, 128, 61, 0.20) !important;
    transition:
        background var(--cdc-dur-fast) var(--cdc-ease-out),
        box-shadow var(--cdc-dur-fast) var(--cdc-ease-out),
        transform var(--cdc-dur-instant) var(--cdc-ease-out) !important;
    text-shadow: none !important;
    text-transform: none !important;
    touch-action: manipulation !important;
}
.cdc-aplicadores__cta:hover:not(:disabled),
.cdc-masas__cta:hover:not(:disabled),
.cdc-titulares__cta:hover:not(:disabled),
.cdc-agrupaciones__cta:hover:not(:disabled) {
    background: var(--cdc-forest-2) !important;
}
.cdc-aplicadores__cta:active,
.cdc-masas__cta:active,
.cdc-titulares__cta:active,
.cdc-agrupaciones__cta:active {
    transform: scale(0.97) !important;
}
.cdc-masas__cta--outline,
.cdc-aplicadores__cta--ghost,
.cdc-agrupaciones__cta--ghost {
    background: var(--cdc-surface-card) !important;
    color: var(--cdc-ink) !important;
    border: 1px solid var(--cdc-border) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.cdc-masas__cta--outline:hover,
.cdc-aplicadores__cta--ghost:hover,
.cdc-agrupaciones__cta--ghost:hover {
    background: var(--cdc-surface-card-alt) !important;
    border-color: var(--cdc-border-strong) !important;
}

/* ---- 99B.8 COUNT (X de Y aplicadores) · text mute uniforme ------------- */
.cdc-aplicadores__count,
.cdc-masas__count,
.cdc-titulares__count,
.cdc-agrupaciones__count {
    font-family: var(--cdc-sans) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    color: var(--cdc-bark) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: transparent !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: none !important;
    font-variant-numeric: tabular-nums !important;
}

/* ---- 99B.9 APLICADORES · regepa pill chips (slate base + variant color) - */
.cdc-aplicadores__regepa-pill,
.cdc-aplicadores__regepa-pill--success,
.cdc-aplicadores__regepa-pill--warning,
.cdc-aplicadores__regepa-pill--danger,
.cdc-aplicadores__regepa-pill--info {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 2px 9px !important;
    border-radius: var(--cdc-radius-pill) !important;
    font-family: var(--cdc-sans) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.5 !important;
    border: 1px solid var(--cdc-border) !important;
    background: var(--cdc-surface-card) !important;
    color: var(--cdc-soil) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.cdc-aplicadores__regepa-pill--success {
    background: var(--cdc-forest-soft) !important;
    color: var(--cdc-forest) !important;
    border-color: var(--cdc-forest-line) !important;
}
.cdc-aplicadores__regepa-pill--warning {
    background: var(--cdc-amber-soft) !important;
    color: var(--cdc-amber) !important;
    border-color: var(--cdc-amber-line) !important;
}
.cdc-aplicadores__regepa-pill--danger {
    background: var(--cdc-danger-soft) !important;
    color: var(--cdc-danger) !important;
    border-color: var(--cdc-danger-line) !important;
}
.cdc-aplicadores__regepa-pill--info {
    background: var(--cdc-cobalt-soft) !important;
    color: var(--cdc-cobalt) !important;
    border-color: var(--cdc-cobalt-line) !important;
}

/* ---- 99B.10 SKELETONS · mismo shimmer enterprise --------------------- */
.cdc-aplicadores__skel,
.cdc-masas__skel,
.cdc-titulares__skel,
.cdc-agrupaciones__skel {
    background: linear-gradient(90deg,
        var(--cdc-border-subtle) 0%,
        var(--cdc-surface-well) 40%,
        var(--cdc-border-subtle) 80%) !important;
    background-size: 200% 100% !important;
    animation: cdcShimmer 1.2s ease-in-out infinite !important;
    border-radius: var(--cdc-radius-md) !important;
    border: none !important;
    box-shadow: none !important;
}

/* ---- 99B.11 Dark mode ------------------------------------------------- */
[data-theme="dark"] .cdc-aplicadores__empty,
[data-theme="dark"] .cdc-pozos__empty,
[data-theme="dark"] .cdc-masas__empty,
[data-theme="dark"] .cdc-titulares__empty,
[data-theme="dark"] .cdc-agrupaciones__empty,
[data-theme="dark"] .cdc-aplicadores__toolbar,
[data-theme="dark"] .cdc-masas__toolbar,
[data-theme="dark"] .cdc-titulares__toolbar,
[data-theme="dark"] .cdc-agrupaciones__toolbar,
[data-theme="dark"] .cdc-masas__stat,
[data-theme="dark"] .cdc-titulares__stat,
[data-theme="dark"] .cdc-agrupaciones__stat {
    background: var(--cdc-surface-card) !important;
    border-color: var(--cdc-border) !important;
}
[data-theme="dark"] .cdc-aplicadores__filters,
[data-theme="dark"] .cdc-masas__filters,
[data-theme="dark"] .cdc-titulares__filters,
[data-theme="dark"] .cdc-agrupaciones__filters {
    background: var(--cdc-surface-well) !important;
    border-color: var(--cdc-border) !important;
}

/* ---- 99B.12 LIST CARDS · cdc-titular-card / cdc-aplicador-card --------- */
/* Cards de listado (titular, aplicador): unificar avatar a 40px squircle
   slate, cinta superior a forest solido, padding ring shadow consistente. */
.cdc-titular-card,
.cdc-aplicador-card {
    background: var(--cdc-surface-card) !important;
    border: 1px solid var(--cdc-border) !important;
    border-radius: var(--cdc-radius-lg) !important;
    box-shadow: var(--cdc-shadow-sm) !important;
    padding: 16px 18px !important;
    position: relative !important;
    overflow: hidden !important;
    transition:
        box-shadow var(--cdc-dur-base) var(--cdc-ease-out),
        border-color var(--cdc-dur-fast) var(--cdc-ease-out),
        transform var(--cdc-dur-base) var(--cdc-ease-out) !important;
}
@media (hover: hover) and (pointer: fine) {
    .cdc-titular-card:hover,
    .cdc-aplicador-card:hover {
        transform: translateY(-1px) !important;
        border-color: var(--cdc-forest-line) !important;
        box-shadow: var(--cdc-shadow-card-hover) !important;
    }
}

/* Cinta superior · forest unico (no wheat/danger/ochre legacy) */
.cdc-titular-card__band {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: var(--cdc-card-band, var(--cdc-forest)) !important;
    border-radius: var(--cdc-radius-lg) var(--cdc-radius-lg) 0 0 !important;
}
.cdc-aplicador-card[data-estado="vigente"]      { --cdc-card-band: var(--cdc-forest); }
.cdc-aplicador-card[data-estado="warning"]      { --cdc-card-band: var(--cdc-amber); }
.cdc-aplicador-card[data-estado="enrenovacion"] { --cdc-card-band: var(--cdc-cobalt); }
.cdc-aplicador-card[data-estado="caducado"]     { --cdc-card-band: var(--cdc-danger); }
.cdc-aplicador-card[data-estado="noaplica"]     { --cdc-card-band: var(--cdc-mute); }

/* Avatar de card · 40x40 squircle (NO 48px circulo HSL gradient legacy) */
.cdc-titular-card__avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: var(--cdc-radius-md) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--cdc-display) !important;
    font-style: normal !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--cdc-forest-text, var(--cdc-forest)) !important;
    letter-spacing: -0.02em !important;
    background: var(--cdc-forest-soft) !important;
    border: 1px solid var(--cdc-forest-line) !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    text-shadow: none !important;
}

/* Card head/name uniforme */
.cdc-titular-card__name {
    font-family: var(--cdc-display) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: var(--cdc-ink) !important;
    letter-spacing: -0.015em !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}
.cdc-titular-card__sub {
    font-family: var(--cdc-sans) !important;
    font-size: 0.8125rem !important;
    color: var(--cdc-bark) !important;
    margin: 2px 0 0 !important;
    font-style: normal !important;
}

/* Chips badge (NIF / ROPO / DNI) · uniformes pill slate ------------------ */
.cdc-titular-card__chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    list-style: none !important;
    align-items: center !important;
}
.cdc-titular-card__chips > * {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 2px 9px !important;
    font-family: var(--cdc-sans) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: var(--cdc-surface-card) !important;
    color: var(--cdc-soil) !important;
    border: 1px solid var(--cdc-border) !important;
    border-radius: var(--cdc-radius-pill) !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-variant-numeric: tabular-nums !important;
}
.cdc-titular-card__chips > .is-success,
.cdc-titular-card__chips > [data-state="vigente"],
.cdc-titular-card__chips > .chip--success {
    background: var(--cdc-forest-soft) !important;
    color: var(--cdc-forest) !important;
    border-color: var(--cdc-forest-line) !important;
}
.cdc-titular-card__chips > .is-info,
.cdc-titular-card__chips > .chip--info {
    background: var(--cdc-cobalt-soft) !important;
    color: var(--cdc-cobalt) !important;
    border-color: var(--cdc-cobalt-line) !important;
}
.cdc-titular-card__chips > .is-warning,
.cdc-titular-card__chips > .chip--warning {
    background: var(--cdc-amber-soft) !important;
    color: var(--cdc-amber) !important;
    border-color: var(--cdc-amber-line) !important;
}
.cdc-titular-card__chips > .is-danger,
.cdc-titular-card__chips > .chip--danger {
    background: var(--cdc-danger-soft) !important;
    color: var(--cdc-danger) !important;
    border-color: var(--cdc-danger-line) !important;
}

[data-theme="dark"] .cdc-titular-card,
[data-theme="dark"] .cdc-aplicador-card {
    background: var(--cdc-surface-card) !important;
    border-color: var(--cdc-border) !important;
}
[data-theme="dark"] .cdc-titular-card__avatar {
    background: rgba(34, 197, 94, 0.10) !important;
    color: #4ADE80 !important;
    border-color: rgba(34, 197, 94, 0.30) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ISSUE #50 · Refinamiento estetico de RadzenDropDown.

   Rafa reporta 4 problemas en los combos de la edicion del titular (visibles
   tambien en otras pantallas con AllowFiltering):

   1) El input de busqueda (autocompletado) queda pegado a la lista de items
      con doble linea cuando se enfoca.
   2) Los items del combo quedan demasiado pegados al borde izquierdo.
   3) El highlight del item activo desborda el recuadro del panel (sin margen).
   4) El placeholder "Elija X primero" cuando el combo esta disabled aparece
      con un resalte sin espaciado interno y queda mal.

   Los overrides son globales: cualquier RadzenDropDown del proyecto se
   beneficia, sin tocar los componentes consumidores.
   ═══════════════════════════════════════════════════════════════════════════ */

/* (1) Filter input dentro del panel — separar visualmente de la lista */
.rz-dropdown-panel .rz-dropdown-filter-container,
.rz-multiselect-panel .rz-multiselect-filter-container {
    padding: 6px 6px 8px !important;
    border-bottom: 1px solid var(--cdc-border-soft, rgba(0, 0, 0, 0.08)) !important;
    margin-bottom: 4px;
    background: var(--cdc-surface-card, #fff) !important;
    border-radius: 0 !important;
}

.rz-dropdown-panel .rz-dropdown-filter,
.rz-multiselect-panel .rz-multiselect-filter,
.rz-dropdown-panel input.rz-dropdown-filter-input,
.rz-multiselect-panel input.rz-multiselect-filter-input {
    border: 1px solid var(--cdc-border, rgba(0, 0, 0, 0.15)) !important;
    border-radius: var(--cdc-radius-sm, 4px) !important;
    padding: 6px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    outline: none !important;
}

.rz-dropdown-panel .rz-dropdown-filter:focus,
.rz-multiselect-panel .rz-multiselect-filter:focus,
.rz-dropdown-panel input.rz-dropdown-filter-input:focus,
.rz-multiselect-panel input.rz-multiselect-filter-input:focus {
    border-color: var(--cdc-cobalt, #5b8cbe) !important;
    box-shadow: 0 0 0 2px rgba(91, 140, 190, 0.15) !important;
}

/* (2 y 3) Lista de items y highlight — second pass tras review de rafa.
   Rafa reporta que el highlight queda asimétrico (más espacio derecha que
   izquierda) y desborda por la izquierda. El primer intento con margin
   1px 2px no era simétrico porque el contenedor <ul> renderiza un
   scrollbar a la derecha que come ancho. Approach robusto:
   - El UL contenedor lleva padding 4px en TODOS los lados (simetría) y
     box-sizing: border-box para que padding + width sumen al ancho total
     y no se extiendan.
   - Los items NO usan margin lateral. Padding interno propio y ocupan el
     100% del ancho disponible del UL.
   - El highlight es SOLO cambio de background y color. Mismo padding y
     dimensiones que un item normal => alineado perfectamente. */
/* THIRD PASS — rafa probó el segundo intento (commit f61346a) y reporta:
     "El recuadro del resalte sigue saliéndose por la izquierda y por la
      derecha se queda dentro con un margen."

   Diagnóstico definitivo: el panel del DropDown reserva ancho para un
   scrollbar VERTICAL en el UL cuando hay overflow. Ese scrollbar consume
   ancho del lado derecho, dejando los items "centrados" entre el borde
   izquierdo y el borde-menos-scrollbar derecho. Como mi padding/margen no
   sabía nada del scrollbar, el resultado era asimétrico.

   FIX: scrollbar-gutter: stable both-edges. Esto reserva espacio para el
   scrollbar a AMBOS lados (igualando el offset izquierdo al derecho).
   Adicionalmente, el padding del UL es ahora 4px en los 4 lados sin más
   y los items siguen sin margen lateral. El highlight hereda al 100%
   las dimensiones del item normal — alineado siempre. */
/* FOURTH PASS — combinacion del tercer intento de emilio con extras del
   intento paralelo: scrollbar-gutter both-edges (no solo stable) y display:
   flex en items para garantizar que ancho de caja == ancho de UL incluso
   sin scrollbar.
     - `scrollbar-gutter: stable both-edges` reserva espacio a AMBOS lados
       siempre, no solo cuando aparece scrollbar => simetria pixel a pixel
       con o sin overflow.
     - El UL ya no aplica padding propio (lo da el panel exterior); de esa
       forma los items pueden ocupar realmente width:100% sin recalcular.
     - Items con display: flex + align-items: center evitan los reflows
       sutiles que tiene `display: block` con anchos del 100% en webkit. */
.rz-dropdown-items,
.rz-multiselect-items {
    list-style: none !important;
    padding: 0 !important;                /* el panel exterior ya da 4px */
    margin: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-height: 300px;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    /* Override del padding-inline-start: 40px del user-agent para <ul>. */
    padding-inline-start: 0 !important;
}

/* Scrollbar fino y discreto (webkit) — bonus visual coherente con el tema. */
.rz-dropdown-items::-webkit-scrollbar,
.rz-multiselect-items::-webkit-scrollbar { width: 8px; }
.rz-dropdown-items::-webkit-scrollbar-thumb,
.rz-multiselect-items::-webkit-scrollbar-thumb {
    background: var(--cdc-border, rgba(0,0,0,0.18));
    border-radius: 4px;
}

.rz-dropdown-item,
.rz-multiselect-item {
    padding: 8px 14px !important;
    margin: 0 !important;
    border-radius: var(--cdc-radius-sm, 4px) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0;
}

.rz-dropdown-item + .rz-dropdown-item,
.rz-multiselect-item + .rz-multiselect-item {
    margin-top: 1px !important;            /* separacion visual entre items */
}

.rz-dropdown-item.rz-state-highlight,
.rz-multiselect-item.rz-state-highlight,
.rz-dropdown-item.rz-state-focused,
.rz-multiselect-item.rz-state-focused {
    /* IDENTICO box que un item normal — solo background y color. El rect
       del highlight coincide pixel a pixel con el rect del item. */
    background: var(--cdc-cobalt-soft, rgba(91, 140, 190, 0.15)) !important;
    color: var(--cdc-cobalt-deep, #2c5282) !important;
    padding: 8px 14px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.rz-dropdown-item + .rz-dropdown-item.rz-state-highlight,
.rz-dropdown-item + .rz-dropdown-item.rz-state-focused,
.rz-multiselect-item + .rz-multiselect-item.rz-state-highlight,
.rz-multiselect-item + .rz-multiselect-item.rz-state-focused {
    margin-top: 1px !important;
}

/* (4) Label del dropdown y leyenda placeholder — alineación limpia.
   Rafa reporta tras el primer fix:
     "Sigue estando descuadrado el texto del combo con respecto al combo"
     "La leyenda 'Elija X primero' sigue estando descuadrado"
   Causa: Radzen mete el label y el trigger (flecha) dentro del .rz-dropdown
   sin flex centrado vertical en el contenedor; el label aplica padding propio
   sin altura fija y se descentra cuando el placeholder es corto.
   Solución: forzar flex stretch en el contenedor con altura mínima fija; el
   label ocupa el interior con flex centrado y padding consistente. */
.rz-dropdown,
.rz-multiselect {
    display: flex !important;
    align-items: stretch !important;
    padding: 0 !important;
    min-height: 38px;
}

.rz-dropdown .rz-dropdown-label,
.rz-multiselect .rz-multiselect-label,
.rz-dropdown .rz-placeholder,
.rz-multiselect .rz-placeholder {
    flex: 1 1 auto !important;
    padding: 0 14px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 36px;        /* contenedor 38px - 2px del border = 36px de contenido */
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rz-dropdown .rz-dropdown-trigger,
.rz-multiselect .rz-multiselect-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    flex: 0 0 auto !important;
}

.rz-dropdown.rz-state-disabled,
.rz-multiselect.rz-state-disabled {
    background: var(--cdc-surface-paper, rgba(0, 0, 0, 0.02)) !important;
    color: var(--cdc-mute, #888) !important;
    opacity: 0.95;
}

.rz-dropdown.rz-state-disabled .rz-dropdown-label,
.rz-multiselect.rz-state-disabled .rz-multiselect-label,
.rz-dropdown.rz-state-disabled .rz-placeholder,
.rz-multiselect.rz-state-disabled .rz-placeholder {
    color: var(--cdc-mute, #888) !important;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ISSUE #60 · Modal de Agrupacion - refinar layout para que no se descuadre.

   Rafa reporta que la ventana emergente de "Nueva agrupacion" sale con:
   - Titulo descuadrado respecto al recuadro.
   - El bloque de filtros y la tabla de parcelas se ve "sin orden".
   - El cuadro de busqueda mal alineado.
   - El RadzenDatePicker (combo del calendario) "no funciona" / esta roto.
   - Necesidad: trabajar con cientos de parcelas (scroll robusto).

   Causas probables:
   1) El header lleva `margin: -16px -16px 0` asumiendo que el Radzen DialogService
      mete `padding: 16px` interior — si el padding cambia, el header desborda.
   2) `.cdc-ag-fieldset__row--3 { 1fr 2fr 130px }` daba al datepicker un ancho
      tan apretado que el calendario popup salia mal posicionado.
   3) Posible conflicto entre los overrides globales de `.rz-dropdown` (issue #50)
      y la representacion interna del `.rz-datepicker` que tambien usa esa class.

   Fixes (CSS-only, conservador):
   ═══════════════════════════════════════════════════════════════════════════ */

/* (1) Header del dialog: en lugar de "margen negativo" forzar `width: 100%` con
   padding interno propio. Asi independientemente del padding del Radzen Dialog
   el header siempre queda alineado con su contenedor. */
.cdc-ag-dialog__head {
    margin: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    width: 100%;
    box-sizing: border-box;
}

/* Compensar el padding interno del Radzen Dialog que envuelve a esta modal:
   cuando el dialog mete padding 16px, la cabecera ahora se mete bien. */
.rz-dialog-content:has(.cdc-ag-dialog) {
    padding: 0 !important;
}

/* (2) Identificacion: dar al datepicker espacio mas razonable. La fecha es
   un input pequeno pero el popup necesita 280-300px de ancho — si el campo es
   menor, el popup queda mal alineado. Cambio 1fr a min 180px. */
.cdc-ag-fieldset__row--3 {
    grid-template-columns: minmax(180px, 1fr) minmax(280px, 2fr) minmax(160px, auto) !important;
}

@container (max-width: 720px) {
    .cdc-ag-fieldset__row--3 {
        grid-template-columns: 1fr !important;
    }
}

/* (3) Tabla de parcelas: scroll horizontal y vertical robusto para titulares
   con cientos de parcelas. */
.cdc-ag-picker__table-wrap {
    max-height: min(420px, 50vh) !important;
    overflow-x: auto;
    overflow-y: auto;
}

.cdc-ag-picker__table {
    min-width: 720px;          /* obliga scroll horizontal en pantallas estrechas
                                  en lugar de aplastar las celdas */
}

/* (4) Defensa contra interferencias del CSS global de `.rz-dropdown` (issue #50)
   con el RadzenDatePicker. Los selectores de #50 fuerzan `display: flex` y
   `min-height: 38px` en `.rz-dropdown`, que pueden afectar al boton trigger
   del datepicker (envuelto en una clase compartida).
   - Restaurar el datepicker a su estilo nativo (sin flex forzado).
   - El popup del calendario lleva su propio estilo fuera del dialog. */
.rz-datepicker,
.rz-datepicker .rz-inputtext,
.rz-datepicker .rz-button,
.rz-datepicker .rz-dropdown {
    display: inline-flex !important;
    align-items: center !important;
}

.rz-datepicker {
    min-height: 38px;
    width: 100%;
}

.rz-datepicker .rz-inputtext {
    flex: 1 1 auto !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px 10px !important;
    background: transparent !important;
    min-height: auto;
}

/* (5) Trigger del calendario (issue #178): Radzen aplica al trigger
   `position: absolute` implicita (via `top: calc(50% + .4375rem)`) y un
   `width: var(--rz-datepicker-trigger-icon-width)` fijo (~1rem). Eso hace
   que el trigger flote a la derecha del input, con anchura y altura solo
   del icono → zona clicable minima y icono pegado al borde.
   Sacamos el trigger del posicionamiento absoluto para que sea un flex item
   normal del wrapper (que ya es `inline-flex` por el bloque (4)) y centramos
   el icono horizontal + verticalmente:
   - `position: relative; top: auto`  -> vuelve al flow, ya no flota
   - `display: inline-flex`           -> hace que justify-content aplique
   - `justify-content: center`        -> icono centrado horizontalmente
   - `align-self: stretch`            -> ocupa toda la altura del wrapper (38px)
   - `width: auto; min-width: 34px`   -> anchura clicable razonable (no solo icono)
   - `padding: 0 8px`                 -> respiracion horizontal */
.rz-datepicker .rz-datepicker-trigger,
.rz-datepicker .rz-button {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    inset-block-start: auto !important;
    inset-inline-end: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    width: auto !important;
    min-width: 34px !important;
    padding: 0 8px !important;
}

.rz-datepicker-popup {
    z-index: 9999 !important;   /* asegurar que el popup queda por encima del dialog */
}


/* =============================================================================
   100 · EDITORIAL PREMIUM · PORTADA DE ROL  (.cdc-dash)
   -----------------------------------------------------------------------------
   Segundo de los dos lenguajes visuales de la doctrina (/design-system, seccion 0):
   papel crudo, serif Fraunces, versalitas con tracking. Reservado a los tres
   cuadros de mando de rol -- son PORTADAS, no herramientas.

   Por que vive aqui y no en cada dashboard: los tres .razor.css definian su
   propia copia de estos tokens y habian derivado por copia-pega. Medido el
   2026-08-06: de los 44 selectores compartidos por los tres, 40 tenian cuerpo
   distinto, y cada uno redefinia 16-18 tokens CANONICOS con valores propios.
   El resultado visible: la portada del titular salia sepia (ink #1a1208 marron)
   y la del asesor verde (ink #0e1e12), con tres pergaminos que se diferenciaban
   en 1-2 unidades de gris -- nadie eligio eso, se fue heredando.

   Criterio de la paleta unica: papel CALIDO (los tres coincidian en eso y es lo
   que pide la doctrina) + familia de tinta VERDE-NEGRA (la que ya usaban 2 de 3,
   y la que liga las portadas con el forest de la marca y con la tinta fria de
   las pantallas de trabajo). Fuentes y acentos wheat/forest/alert ya eran
   identicos en los tres.
   ============================================================================= */
.cdc-dash {
    /* SUPERFICIES Y TINTA: SE HEREDAN del sistema (:root), no se pisan.
       Antes esta seccion imponia papel crudo (#F9F6EE) y tinta calida, y las
       portadas de rol salian SEPIA mientras el resto de la aplicacion es blanco
       sobre slate con verde. Se veia como otro producto. Heredando, la portada
       cambia con el tema y con el branding del tenant sin tocar nada aqui.

       Acentos: el verde de marca y el slate del sistema. El trigo y la terracota
       dejan de ser cromo (fondo de tarjetas, halos, etiquetas) y se reservan
       para SEMANTICA de aviso, mas abajo. */
    --cdc-ochre-deep:   var(--cdc-amber-2, #D97706);
    --cdc-wheat-soft:   var(--cdc-forest-line, rgba(21, 128, 61, 0.30));
    --cdc-olive-deep:   var(--cdc-forest-deep, #166534);
    --cdc-forest-mist:  var(--cdc-forest-2, #16A34A);
    --cdc-fog:          var(--cdc-border, #E2E8F0);

    /* Texto sobre SUPERFICIE INVERTIDA (.cdc-critical, .cdc-kpi--primary/--feature:
       fondo var(--cdc-ink), que se INVIERTE con el tema). Un valor claro fijo aqui
       se volvia claro-sobre-claro en oscuro: medido 1.01:1 en la portada de la
       cooperativa. Estos si acompanan al tema. */
    --cdc-cream-soft:        rgba(248, 250, 252, 0.74);
    --cdc-wheat-on-ink:      #6EE7A0;
    --cdc-wheat-on-ink-line: rgba(110, 231, 160, 0.35);
    /* Ochre para TEXTO PEQUENO sobre los tintes claros (tags, contadores): el
       ochre de acento se quedaba en 2.42:1 sobre la tarjeta tintada. */
    /* Las ETIQUETAS de las tarjetas (CAMPANA 2021, REALIZADOS, RD 34/2025) usaban
       este token y salian marrones: pasan al slate del sistema. */
    --cdc-ochre-text:        var(--cdc-bark, #475569);
    --cdc-dash-shadow:       rgba(15, 23, 42, 0.14);
    --cdc-dash-grain:        rgba(15, 23, 42, 0.022);
    --cdc-dash-glow-1:       rgba(21, 128, 61, 0.06);
    --cdc-dash-glow-2:       rgba(37, 99, 235, 0.04);
    --cdc-good-text:         var(--cdc-forest-text, #126633);
    --cdc-info-text:         var(--cdc-cobalt-text, #1D4ED8);

    /* Semanticos de la portada (semaforo de cumplimiento) */
    --cdc-alert:        var(--cdc-danger, #B91C1C);
    --cdc-alert-soft:   var(--cdc-danger-soft, rgba(185, 28, 28, 0.08));
    --cdc-warn:         var(--cdc-amber, #B45309);
    --cdc-warn-soft:    var(--cdc-amber-soft, rgba(180, 83, 9, 0.10));
    --cdc-good:         var(--cdc-forest, #15803D);
    --cdc-info:         var(--cdc-cobalt, #2563EB);
    --cdc-info-soft:    var(--cdc-cobalt-soft, rgba(37, 99, 235, 0.08));

    /* Tipografia editorial (las familias se cargan en theme-custom.css) */
    --cdc-display:      'Fraunces', 'Instrument Serif', Georgia, serif;
    --cdc-sans:         'Inter Tight', 'Source Sans 3', system-ui, sans-serif;
    --cdc-mono:         'JetBrains Mono', ui-monospace, monospace;

    /* Armazon comun (era identico en los tres, salvo 4px de padding en admin) */
    position: relative;
    min-height: 100%;
    padding: clamp(20px, 2.4vw, 40px) clamp(16px, 2.4vw, 48px) clamp(32px, 3vw, 56px);
    background: var(--cdc-paper);
    color: var(--cdc-ink);
    font-family: var(--cdc-sans);
    font-feature-settings: "ss01", "cv11";
    container-type: inline-size;
}

/* Oscuro · misma paleta editorial invertida, manteniendo el caracter calido de
   los acentos (no se pasa a slate: el calor es lo que distingue este lenguaje).
   Los tres dashboards ya tenian estos mismos valores salvo el papel, que
   diferia en 2-3 unidades; se unifica al verde-neutro. */
[data-theme="dark"] .cdc-dash {
    /* En oscuro tambien hereda: el bloque [data-theme="dark"] del sistema ya
       invierte superficies y tinta. Aqui solo lo que es propio de la portada. */
    --cdc-cream-soft:        rgba(19, 28, 46, 0.74);
    --cdc-wheat-on-ink:      #14532D;
    --cdc-wheat-on-ink-line: rgba(20, 83, 45, 0.40);
    --cdc-ochre-text:        var(--cdc-bark, #94A3B8);
    --cdc-dash-shadow:       rgba(0, 0, 0, 0.45);
    --cdc-dash-grain:        rgba(241, 245, 249, 0.03);
    --cdc-dash-glow-1:       rgba(34, 197, 94, 0.07);
    --cdc-dash-glow-2:       rgba(96, 165, 250, 0.05);
    --cdc-good-text:         var(--cdc-forest-text, #4ADE80);
    --cdc-info-text:         var(--cdc-cobalt-text, #93C5FD);
}

/* --- 100.1 · Componentes comunes de las tres portadas ------------------------
   Estaban definidos por triplicado en los .razor.css y habian derivado por
   copia-pega (letter-spacing 0.18 vs 0.22em, numero 50 vs 54px, panel sobre
   cream vs paper, radio 3 vs 2px...). Valor canonico = el que compartian 2 de
   3. Lo que una portada necesita distinto sigue en su propio fichero, que por
   ser CSS con ambito (scoped) gana a estas reglas sin !important.
   --------------------------------------------------------------------------- */
.cdc-dash > * {
    position: relative;
    z-index: 1;
}
.cdc-dash__divider {
    opacity: 0.4;
}
.cdc-dash__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--cdc-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    opacity: 0.85;
}
.cdc-dash__foot-center {
    font-family: var(--cdc-display);
    font-style: italic;
    font-weight: 300;
    text-transform: none;
    font-size: 12px;
    letter-spacing: 0;
    color: var(--cdc-bark);
    opacity: 0.75;
    text-align: center;
}
.cdc-dash__headline {
    font-family: var(--cdc-display);
    font-weight: 400;
    font-size: clamp(30px, 4vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--cdc-ink);
    margin: 0;
    font-variation-settings: "opsz" 100, "SOFT" 30;
    max-width: 900px;
}
.cdc-dash__headline-em {
    font-style: italic;
    font-weight: 300;
    color: var(--cdc-bark);
    font-variation-settings: "opsz" 144, "SOFT" 100;
    display: inline-block;
    margin-left: 4px;
}
.cdc-dash__kicker::before {
    content: "▪ ";
    color: var(--cdc-ochre);
    margin-right: 4px;
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--cdc-forest);
    transform: rotate(45deg);
}
.cdc-dash__meta {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(16px, 2.4vw, 40px);
    padding-top: 4px;
}
.cdc-dash__meta-item {
    display: grid;
    gap: 2px;
}
.cdc-dash__meta-label {
    font-family: var(--cdc-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    opacity: 0.7;
}
.cdc-dash__meta-value {
    font-family: var(--cdc-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--cdc-soil);
    text-transform: capitalize;
}
.cdc-dash__meta-value--mono {
    font-family: var(--cdc-mono);
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}
.cdc-dash__rule {
    height: 1px;
    background: linear-gradient(90deg, var(--cdc-ochre) 0, var(--cdc-ochre) 64px, var(--cdc-line) 64px, var(--cdc-line) 100%);
    margin-top: 4px;
}
.cdc-dash .cdc-kpi {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 14px;
    padding: clamp(16px, 1.6vw, 24px);
    background: var(--cdc-cream);
    border: 1px solid var(--cdc-line);
    border-radius: 3px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    min-height: 158px;
}
.cdc-dash .cdc-kpi--primary {
    background: linear-gradient(135deg, var(--cdc-forest-soft) 0%, transparent 100%), var(--cdc-cream);
    border-color: var(--cdc-amber-soft);
}
.cdc-dash .cdc-kpi__bar {
    position: relative;
    width: 100%;
    height: 5px;
    background: var(--cdc-bone);
    border-radius: 100px;
    overflow: hidden;
    flex: 1 1 100%;
}
.cdc-dash .cdc-kpi__bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--cdc-olive) 0%, var(--cdc-forest) 100%);
    border-radius: inherit;
    transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: absolute;
    inset: 0 auto 0 0;
}
.cdc-dash .cdc-kpi__bullet {
    font-size: 12px;
    color: var(--cdc-bark);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--cdc-mono);
    letter-spacing: 0.02em;
}
.cdc-dash .cdc-kpi__bullet--accent {
    color: var(--cdc-good-text, var(--cdc-forest));
    font-weight: 600;
}
.cdc-dash .cdc-kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cdc-dash .cdc-kpi__delta--alert {
    color: var(--cdc-alert);
    font-weight: 600;
}
.cdc-dash .cdc-kpi__delta--good {
    color: var(--cdc-good-text, var(--cdc-good));
}
.cdc-dash .cdc-kpi__delta--warn {
    color: var(--cdc-ochre-text, var(--cdc-warn));
}
.cdc-dash .cdc-kpi__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--cdc-line-soft);
    font-size: 12px;
    color: var(--cdc-bark);
    align-items: center;
    min-height: 20px;
}
.cdc-dash .cdc-kpi__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.cdc-dash .cdc-kpi__label {
    font-family: var(--cdc-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    font-weight: 500;
}
.cdc-dash .cdc-kpi__number {
    font-family: var(--cdc-display);
    font-weight: 400;
    font-size: clamp(34px, 3.6vw, 50px);
    line-height: 1;
    color: var(--cdc-ink);
    letter-spacing: -0.02em;
}
.cdc-dash .cdc-kpi__tag {
    font-family: var(--cdc-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--cdc-ochre-text, var(--cdc-ochre));
    padding: 2px 8px;
    background: var(--cdc-amber-soft);
    border-radius: 100px;
    white-space: nowrap;
    text-transform: uppercase;
    border: 1px solid var(--cdc-line);
}
.cdc-dash .cdc-kpi__unit {
    font-family: var(--cdc-mono);
    font-size: 14px;
    color: var(--cdc-bark);
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}
.cdc-dash .cdc-kpi__value {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.cdc-dash .cdc-mono {
    font-family: var(--cdc-mono);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.cdc-dash .cdc-panel {
    background: var(--cdc-cream);
    border: 1px solid var(--cdc-line);
    padding: clamp(16px, 1.8vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    border-radius: 3px;
    min-width: 0;
    position: relative;
    min-height: 200px;
}
.cdc-dash .cdc-panel__badge {
    font-family: var(--cdc-mono);
    font-size: 11px;
    padding: 4px 10px;
    background: var(--cdc-ink);
    color: var(--cdc-paper);
    border-radius: 100px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cdc-dash .cdc-panel__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cdc-line-soft);
    margin-bottom: 18px;
}
.cdc-dash .cdc-panel__sub {
    font-size: 12px;
    color: var(--cdc-bark);
    margin: 0;
}
.cdc-dash .cdc-panel__title {
    font-family: var(--cdc-display);
    font-size: 20px;
    font-weight: 400;
    margin: 0 0 2px;
    color: var(--cdc-ink);
    letter-spacing: -0.015em;
    font-variation-settings: "opsz" 144;
    line-height: 1.1;
}

/* Estado vacio de los paneles de portada. Acotado a .cdc-dash a proposito: el
   .cdc-empty global del design system (lenguaje enterprise) NO se toca. */
.cdc-dash .cdc-empty {
    padding: 30px;
    font-style: italic;
    opacity: 0.6;
}

/* Atmosfera de la portada y halo de la tarjeta destacada. Estaban en cada
   .razor.css con los rgba de su paleta: el titular tenia el halo DORADO y el
   asesor VERDE, y eso era buena parte de la sensacion de "no es la misma
   pantalla". Una sola definicion, con tokens que acompanan al tema. */
.cdc-dash::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 80% 50% at 100% 0%, var(--cdc-dash-glow-1), transparent 55%),
        radial-gradient(ellipse 60% 40% at 0% 100%, var(--cdc-dash-glow-2), transparent 55%);
}

.cdc-dash .cdc-kpi--primary::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--cdc-wheat-on-ink-line) 0%, transparent 70%);
    pointer-events: none;
}

/* =============================================================================
   101 · POPUP DEL MAPA  (.cdc-map-popup)
   -----------------------------------------------------------------------------
   Ficha que sale al pinchar una parcela en el mapa (overview-map-interop.js).
   Vive aqui y no en estilos inline porque el elemento acaba dentro del contenedor
   de overlays de OpenLayers, en una zona que Blazor rerenderiza, y el atributo
   style se quedaba VACIO: sin ancho, la caja se encogia al de su palabra mas
   larga (medido 84 px) y las filas de cultivo y superficie salian cortadas.

   Se queda CLARA en los dos temas a proposito: flota sobre la ortofoto, que es
   oscura y de contraste irregular; una ficha blanca es lo unico que se lee
   siempre sobre imagen de satelite.
   ============================================================================= */
.cdc-map-popup {
    width: max-content;
    min-width: 190px;
    max-width: 280px;
    box-sizing: border-box;
    padding: 10px 12px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 10px;
    box-shadow:
        0 6px 20px -6px rgba(15, 23, 42, 0.35),
        0 2px 6px rgba(15, 23, 42, 0.12);
    font-family: var(--cdc-sans, 'Inter Tight', system-ui, sans-serif);
    font-size: 0.82rem;
    line-height: 1.35;
    color: #0F172A;
}

.cdc-map-popup__title {
    font-weight: 700;
    font-size: 0.9rem;
    color: #0F172A;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    /* parajes largos no ensanchan la ficha ni la rompen */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cdc-map-popup__row {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 5px;
}

.cdc-map-popup__icon {
    width: 13px;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.78rem;
    color: #64748B;
}
.cdc-map-popup__icon--cultivo { color: #15803D; }
.cdc-map-popup__icon--sup     { color: #2563EB; }
.cdc-map-popup__icon--trat    { color: #B45309; }

.cdc-map-popup__label {
    flex-shrink: 0;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: #475569;
}

.cdc-map-popup__value {
    margin-left: auto;
    text-align: right;
    font-weight: 600;
    color: #0F172A;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
   Cuadernos vigentes (Maestras · Personal). Los KPI son BOTONES: cada
   recuento filtra la tabla, porque un numero que no lleva a las filas
   que lo componen obliga a buscarlas a mano.
   ------------------------------------------------------------------ */
.cdc-vigentes__kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cdc-vigentes__kpi {
    flex: 1 1 160px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rz-base-300, #e2e8f0);
    border-radius: 10px;
    background: var(--rz-base-background-color, #fff);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.cdc-vigentes__kpi:hover { border-color: var(--rz-primary, #2563eb); }

.cdc-vigentes__kpi.is-active {
    border-color: var(--rz-primary, #2563eb);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--rz-primary, #2563eb) 20%, transparent);
}

.cdc-vigentes__kpi-num {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.cdc-vigentes__kpi-lbl {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El recuento que exige accion se distingue del resto sin gritar. */
.cdc-vigentes__kpi--alerta .cdc-vigentes__kpi-num { color: var(--rz-warning, #d97706); }

.cdc-vigentes__limpiar {
    margin-left: 0.75rem;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    color: var(--rz-primary, #2563eb);
    font-size: 0.85rem;
}

.cdc-vigentes__accion {
    border: 1px solid var(--rz-base-300, #e2e8f0);
    border-radius: 6px;
    background: var(--rz-base-background-color, #fff);
    padding: 0.25rem 0.6rem;
    cursor: pointer;
    font-size: 0.8rem;
    white-space: nowrap;
}

.cdc-vigentes__accion:hover { border-color: var(--rz-primary, #2563eb); }

/* =============================================================================
   102 · MAPA DE TRABAJO  (.cdc-map-*)
   -----------------------------------------------------------------------------
   Controles del mapa para uso profesional: pantalla completa, encuadrar,
   exportar a PNG, selector de capas y coordenadas del cursor. El JS que los
   monta vive en js/map-base.js.

   Igual que el popup de la seccion 101, TODO esto se queda claro en los dos
   temas a proposito: flota sobre una ortofoto, que es oscura y de contraste
   irregular. Un control oscuro sobre imagen de satelite nocturna desaparece.

   Los controles se colocan a mano porque las posiciones por defecto de
   OpenLayers se pisan entre si en cuanto se anaden varios: .ol-mouse-position
   y .ol-rotate salen las dos arriba a la derecha, y .ol-overviewmap y
   .ol-scale-line las dos abajo a la izquierda.
   ============================================================================= */

/* =============================================================================
   Lienzo del mapa
   -----------------------------------------------------------------------------
   Las tres pantallas tenian la altura clavada en un style inline: 400 px la
   ficha de parcela (dentro de un dialogo de 85vh, o sea usando menos de la mitad
   del alto disponible), 500 px la vista de explotacion y 350 px la galeria de
   geofotos. En un monitor de 27" el mapa ocupaba una franja mientras sobraba
   pantalla por todos lados.

   Con clamp() la altura crece con la ventana y sigue teniendo suelo y techo: el
   suelo evita que en un portatil pequeno el mapa quede inservible, y el techo
   evita que en un monitor vertical se estire hasta obligar a hacer scroll para
   ver los botones de debajo. Se usa vh -- y no un layout flexible en el
   dialogo -- porque .rz-dialog-content no tiene altura definida y un
   height: 100% ahi dentro colapsaria.
   ============================================================================= */
.cdc-map-lienzo {
    width: 100%;
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
}

/* Ficha de parcela: vive en un dialogo con varias barras de herramientas
   encima, asi que no puede comerse todo el alto. */
.cdc-map-lienzo--ficha { height: clamp(320px, 48vh, 760px); border-radius: 4px; }

/* Vista de explotacion: pagina completa, puede respirar mas. */
.cdc-map-lienzo--pagina { height: clamp(360px, 68vh, 900px); }

/* Pagina dedicada del mapa (/explotacion/mapa): el lienzo ES la pantalla. El resto
   (cabecera de la app + titulo + barras de herramientas del editor) ocupa unos 260px;
   el minimo evita un lienzo aplastado en pantallas bajas. */
.cdc-map-lienzo--completa { height: max(420px, calc(100vh - 260px)); border-radius: 4px; }

/* Galeria de geofotos: comparte sitio con la rejilla de miniaturas. */
.cdc-map-lienzo--galeria { height: clamp(300px, 44vh, 640px); }

/* --- Barra vertical derecha: los cuatro propios y, debajo, el de volver al
       norte de OpenLayers. Ese ultimo se coloca al final y no arriba (que es su
       sitio por defecto) porque solo aparece cuando el mapa esta girado: si
       estuviera primero, al girar empujaria toda la barra y los botones
       cambiarian de sitio bajo el cursor. --- */
.cdc-map-ctrl,
.cdc-map-capas {
    right: 0.5em;
    left: auto;
}

.cdc-map-ctrl--full    { top: 0.5em; }
.cdc-map-ctrl--fit     { top: 2.8em; }
.cdc-map-ctrl--png     { top: 5.1em; }
.cdc-map-ctrl--croquis { top: 7.4em; }
.cdc-map-capas         { top: 9.7em; }

.cdc-map-host .ol-rotate {
    top: 12em;
    right: 0.5em;
}

/* --- Herramientas de campo: a la IZQUIERDA, debajo del zoom y su barra.
       Se separan de la barra derecha (que es "ver el mapa") porque estas
       "actuan sobre el mapa", y mezclarlas hacia elegir a ciegas. --- */
.cdc-map-ctrl--gps      { top: 0.5em;  right: auto; left: 3em; }
.cdc-map-ctrl--dist     { top: 2.8em;  right: auto; left: 3em; }
.cdc-map-ctrl--area     { top: 5.1em;  right: auto; left: 3em; }
.cdc-map-ctrl--limpiar  { top: 7.4em;  right: auto; left: 3em; }
.cdc-map-ctrl--offline  { top: 9.7em;  right: auto; left: 3em; }
.cdc-map-ctrl--vigor    { top: 12em;   right: auto; left: 3em; }
/* Lapiz de seleccion: solo aparece en el mapa del selector de parcelas. */
.cdc-map-ctrl--lapiz    { top: 14.3em; right: auto; left: 3em; }

/* --- Posicion pegada a una masa de agua declarada: la lectura del GPS pasa de
       informativa a aviso. Ambar y no rojo a proposito: la distancia exigible depende de
       la etiqueta del producto, asi que el mapa avisa, no dictamina. --- */
.cdc-map-gps--alerta {
    background: rgba(180, 83, 9, 0.94) !important;
    color: #FFFFFF !important;
    font-weight: 700;
}

/* --- Sin cobertura: aviso de que lo que se ve es lo descargado, no lo que hay.
       Abajo al centro para no tapar los controles de ninguna de las dos columnas. --- */
.cdc-map-sinred {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    align-items: center;
    gap: 7px;
    max-width: calc(100% - 6rem);
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(180, 83, 9, 0.94);
    color: #FFFFFF;
    font-family: var(--cdc-sans, 'Inter Tight', system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.45);
    pointer-events: none;
}
.cdc-map-sinred--visible { display: flex; }
.cdc-map-sinred i { font-size: 0.78rem; flex: none; }

/* --- Panel del indice de vigor: mes, escala de color y el aviso de que el
       indice es relativo. Va junto al boton, no flotando en el mapa, para que se
       lea como parte de la herramienta. --- */
.cdc-map-vigor {
    display: none;
    position: absolute;
    left: calc(100% + 6px);
    top: 0;
    width: 13rem;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.12);
    color: #0F172A;
    font-family: var(--cdc-sans, 'Inter Tight', system-ui, sans-serif);
    box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.35);
    text-align: left;
}
.cdc-map-vigor--visible { display: block; }

.cdc-map-vigor__fila { margin-bottom: 7px; }
.cdc-map-vigor__mes {
    width: 100%;
    font-size: 0.78rem;
    padding: 3px 5px;
    border: 1px solid rgba(15, 23, 42, 0.2);
    border-radius: 4px;
    background: #FFFFFF;
    color: #0F172A;
}

.cdc-map-vigor__escala {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    color: #475569;
}
/* Los cortes de la rampa son los del calculo, no un degradado decorativo. */
.cdc-map-vigor__rampa {
    flex: 1;
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(to right,
        #CA412D 0%, #CA412D 16%,
        #E89137 16%, #E89137 33%,
        #F0CD46 33%, #F0CD46 50%,
        #A5C84B 50%, #A5C84B 63%,
        #5AA53C 63%, #5AA53C 80%,
        #1E732D 80%, #1E732D 100%);
}

.cdc-map-vigor__nota {
    margin-top: 7px;
    font-size: 0.66rem;
    line-height: 1.35;
    color: #64748B;
}
.cdc-map-vigor__nota--titulo {
    margin-top: 0;
    margin-bottom: 6px;
    font-weight: 600;
    color: #0F172A;
    font-size: 0.74rem;
}

/* --- Evolucion del vigor por campana ---------------------------------------
   El panel se ensancha solo en esta vista: la grafica necesita sitio para las
   ocho ventanas del FEGA, pero la vista de mapa no debe crecer por ello. --- */
.cdc-map-vigor--serie { width: 22rem; }

.cdc-map-vigor__tabs {
    display: flex;
    gap: 2px;
    margin: -2px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}
.cdc-map-vigor__tab {
    flex: 1;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 6px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 4px;
    background: #FFFFFF;
    color: #475569;
    cursor: pointer;
}
.cdc-map-vigor__tab:hover { border-color: rgba(15, 23, 42, 0.3); }
.cdc-map-vigor__tab--activa {
    background: #1E732D;
    border-color: #1E732D;
    color: #FFFFFF;
}

.cdc-map-serie__cargando {
    font-size: 0.7rem;
    color: #475569;
    line-height: 1.4;
}
.cdc-map-serie__barra {
    display: block;
    margin-top: 5px;
    height: 4px;
    border-radius: 2px;
    background: rgba(15, 23, 42, 0.1);
    overflow: hidden;
}
.cdc-map-serie__barra > b {
    display: block;
    height: 100%;
    background: #1E732D;
    transition: width 0.2s linear;
}

.cdc-map-serie__svg { display: block; width: 100%; height: auto; }
.cdc-map-serie__rejilla { stroke: rgba(15, 23, 42, 0.12); stroke-width: 1; }
/* Los separadores marcan las cuatro ventanas que publica el FEGA. */
.cdc-map-serie__sep {
    stroke: rgba(15, 23, 42, 0.16);
    stroke-width: 1;
    stroke-dasharray: 2 3;
}
.cdc-map-serie__eje {
    font-size: 8px;
    fill: #64748B;
    font-variant-numeric: tabular-nums;
}
.cdc-map-serie__linea {
    fill: #5AA53C;
    stroke: #5AA53C;
    stroke-width: 1.4;
    stroke-linejoin: round;
}
.cdc-map-serie__linea--act {
    fill: #1E732D;
    stroke: #1E732D;
    stroke-width: 2.2;
}
path.cdc-map-serie__linea { fill: none; }

.cdc-map-serie__anos {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin-top: 4px;
    font-size: 0.66rem;
    color: #64748B;
    font-variant-numeric: tabular-nums;
}
.cdc-map-serie__ano--act { color: #1E732D; font-weight: 700; }

.cdc-map-serie__delta {
    margin-top: 7px;
    padding: 5px 7px;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.05);
    font-size: 0.68rem;
    line-height: 1.3;
    color: #475569;
}
.cdc-map-serie__delta > b {
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    color: #0F172A;
}
/* Solo se colorea cuando la diferencia supera el ruido de la medida. */
.cdc-map-serie__delta--baja { background: #FEF3C7; }
.cdc-map-serie__delta--baja > b { color: #B45309; }
.cdc-map-serie__delta--sube { background: #DCFCE7; }
.cdc-map-serie__delta--sube > b { color: #166534; }
/* Parcela sin recorrido: no es una alerta, es un aviso de que no hay que leer nada. */
.cdc-map-serie__delta--plana {
    background: rgba(15, 23, 42, 0.05);
    color: #64748B;
    font-size: 0.66rem;
}
.cdc-map-serie__delta--plana > b { color: #475569; }

/* --- Aviso de restriccion legal dentro de la ficha de la parcela --- */
.cdc-map-popup__aviso {
    margin: 8px -12px -10px;
    padding: 7px 12px;
    background: #FEF3C7;
    border-top: 1px solid #FCD34D;
    border-radius: 0 0 9px 9px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #78350F;
}
.cdc-map-popup__aviso i { margin-right: 4px; }
.cdc-map-popup__aviso--gris {
    background: rgba(15, 23, 42, 0.04);
    border-top-color: rgba(15, 23, 42, 0.10);
    color: #64748B;
}

/* Estado activo de una herramienta: tiene que verse sin mirar dos veces, porque
   con la medicion activa el clic ya no hace lo de siempre. */
.cdc-map-ctrl--activo button {
    background: var(--rz-primary, #2563eb);
    color: #FFFFFF;
}
.cdc-map-ctrl--siguiendo button {
    background: #15803D;
    color: #FFFFFF;
}

/* Cursor de cruz mientras se mide, y tambien con el lapiz de seleccion puesto: el
   puntero de mano invita a arrastrar el mapa, y con la herramienta activa arrastrar
   dibuja. */
.cdc-map--midiendo,
.cdc-map--midiendo canvas,
.cdc-map--lapiz,
.cdc-map--lapiz canvas { cursor: crosshair; }

/* --- Lectura del GPS: precision y parcela en la que se esta pisando --- */
.cdc-map-gps {
    display: none;
    position: absolute;
    left: calc(100% + 6px);
    top: 0;
    white-space: nowrap;
    padding: 3px 9px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.94);
    color: #0F172A;
    border: 1px solid rgba(15, 23, 42, 0.12);
    font-family: var(--cdc-sans, 'Inter Tight', system-ui, sans-serif);
    font-size: 0.74rem;
    line-height: 1.5;
    pointer-events: none;
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cdc-map-gps--visible { display: block; }

/* --- Globos de medida ---
       Ambar, el mismo color que la linea de medicion, para que se lea como una
       sola herramienta. El "en vivo" va translucido y el fijado opaco: asi se
       distingue lo que aun se esta trazando de lo ya medido. --- */
.cdc-map-medida {
    padding: 2px 8px;
    border-radius: 4px;
    background: #B45309;
    color: #FFFFFF;
    font-family: var(--cdc-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.3);
    pointer-events: none;
}
.cdc-map-medida--vivo { opacity: 0.88; }
.cdc-map-medida:empty { display: none; }

.cdc-map-ctrl button,
.cdc-map-capas > button {
    width: 1.7em;
    height: 1.7em;
    font-size: 0.95em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Coordenadas del cursor: encima de la atribucion, no sobre el boton de
       rotar, que es donde OpenLayers las pone por defecto. --- */
.cdc-map-coords {
    position: absolute;
    right: 0.5em;
    bottom: 2.4em;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.88);
    color: #0F172A;
    font-family: var(--cdc-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
/* Vacio no debe dejar una pastilla blanca flotando sin texto. */
.cdc-map-coords:empty { display: none; }

/* --- Escala y minimapa comparten la esquina inferior izquierda: se separan. --- */
.cdc-map-host .ol-scale-line { left: 3.4em; }

/* =============================================================================
   Selector de capas
   ============================================================================= */
.cdc-map-capas__panel {
    display: none;
    position: absolute;
    top: 0;
    right: calc(100% + 6px);
    width: 13.5rem;
    max-height: 15rem;
    overflow-y: auto;
    padding: 8px 10px 10px;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 6px 20px -6px rgba(15, 23, 42, 0.35);
    font-family: var(--cdc-sans, 'Inter Tight', system-ui, sans-serif);
    color: #0F172A;
    text-align: left;
}

.cdc-map-capas--abierto .cdc-map-capas__panel { display: block; }

/* Comparador con el pasado (ortofotos historicas del IGN): panel del control, cortina y linea. */
.cdc-map-historico__panel { width: 15rem; }
.cdc-map-historico__anio { width: 100%; margin: 4px 0 8px; font: inherit; font-size: 0.8rem; padding: 3px 4px; }
.cdc-map-historico__cortina { width: 100%; }
.cdc-map-historico__pista { margin-top: 4px; font-size: 0.7rem; color: #64748B; }
.cdc-map-historico__linea {
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: 0; border-left: 2px dashed rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.45);
    pointer-events: none; z-index: 2;
}
.cdc-map--comparando .cdc-map-historico button { background: var(--cdc-ink, #1E293B); color: #fff; }
.cdc-map-popup__refcat { color: inherit; text-decoration: underline dotted; }

.cdc-map-capas__titulo {
    margin: 6px 0 3px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748B;
}
.cdc-map-capas__titulo:first-child { margin-top: 0; }

.cdc-map-capas__fila {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 0;
    font-size: 0.8rem;
    line-height: 1.25;
    cursor: pointer;
}

.cdc-map-capas__fila:hover { color: var(--rz-primary, #2563eb); }

.cdc-map-capas__fila input {
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}

/* Capa de restriccion bajando datos: son megas de GeoJSON y sin este aviso
   parece que el interruptor no ha hecho nada. */
.cdc-map-capas__fila--cargando { color: var(--rz-primary, #2563eb); }
.cdc-map-capas__fila--cargando::after {
    content: "";
    width: 9px;
    height: 9px;
    margin-left: auto;
    border: 1.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cdc-map-girando 0.7s linear infinite;
}
@keyframes cdc-map-girando { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .cdc-map-capas__fila--cargando::after { animation: none; opacity: 0.6; }
}

/* =============================================================================
   Pantalla completa
   -----------------------------------------------------------------------------
   Dos mecanismos, porque uno solo no cubre los dos hosts:

   a) Fullscreen API del navegador. Es la buena -- esconde el cromo y gana
      pixeles de verdad -- pero el contenedor lleva la altura en un style inline
      (400 px en la ficha de parcela, 500 px en la explotacion), y ese inline
      gana a cualquier regla normal. De ahi el !important bajo :fullscreen.

   b) Maximizar por CSS dentro de la ventana, para cuando el host rechaza la
      Fullscreen API -- caso tipico del WebView de MAUI. El z-index tiene que
      superar el del dialogo de Radzen, que es donde vive el mapa de la ficha de
      parcela.
   ============================================================================= */
.cdc-map-host:fullscreen {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.cdc-map--maximizado {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    z-index: 3000 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* =============================================================================
   Ficha del recinto SIGPAC
   -----------------------------------------------------------------------------
   Reutiliza .cdc-map-popup de la seccion 101 y solo anade el pie que deja claro
   que el dato es oficial del FEGA y no del cuaderno: al asesor le importa la
   diferencia cuando la superficie declarada y la del SIGPAC no cuadran.
   ============================================================================= */
.cdc-map-popup--sigpac { min-width: 15rem; }

/* Separador entre lo que declara el cuaderno y lo que dice el SIGPAC. La ficha de
   una parcela junta las dos cosas a proposito: el contraste declarado/oficial es
   justo el dato por el que un asesor pincha una parcela. */
.cdc-map-popup__sep {
    margin: 8px -12px 5px;
    padding: 4px 12px 0;
    border-top: 1px solid rgba(15, 23, 42, 0.10);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748B;
}

/* Desviacion de superficie por encima del 10 %: por debajo suele ser el margen
   normal entre superficie cultivada declarada y recinto completo, asi que solo se
   grita cuando merece mirarse. */
.cdc-map-popup__row--alerta .cdc-map-popup__value { color: #B45309; font-weight: 700; }
.cdc-map-popup__icon--alerta { color: #B45309; }

.cdc-map-popup__pie {
    margin-top: 7px;
    padding-top: 5px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 0.67rem;
    letter-spacing: 0.02em;
    color: #64748B;
}


/* ═══════════════════════════════════════════════════════════════════════════
   COMPRAS · Página enterprise (cuaderno · trazabilidad documental)
   Rediseño 2026-08: strip de KPI (cdc-stat), toolbar unificado (cdc-toolbar)
   con buscador instantáneo + pills de stock/tipo + panel de filtros avanzados
   plegable + menú Importar; grid con columna Documento compuesta, resumen de
   productos desde las líneas, mini-barra de % de stock restante y status chips.
   Solo tokens (--cdc-*): hereda dark mode sin overrides propios.
   ═══════════════════════════════════════════════════════════════════════════ */

.cdc-compras { container-type: inline-size; }

/* ---- Strip de KPIs ------------------------------------------------------- */
.cdc-compras__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 12px;
    margin: 4px 0 18px;
}

/* ---- Toolbar: buscador --------------------------------------------------- */
.cdc-compras__toolbar { row-gap: 10px; }

.cdc-compras__search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 240px;
    min-width: 200px;
    max-width: 380px;
    padding: 7px 12px;
    background: var(--cdc-surface-card);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-md);
    color: var(--cdc-bark);
    transition: border-color var(--cdc-dur-fast) var(--cdc-ease-standard),
                box-shadow var(--cdc-dur-fast) var(--cdc-ease-standard);
}
.cdc-compras__search:focus-within {
    border-color: var(--cdc-cobalt-line);
    box-shadow: var(--cdc-ring-cobalt);
}
.cdc-compras__search > i { font-size: 12px; flex-shrink: 0; }
.cdc-compras__search input {
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--cdc-ink);
}
.cdc-compras__search input::placeholder { color: var(--cdc-bark); opacity: 0.65; }
.cdc-compras__search-clear {
    border: 0;
    background: transparent;
    color: var(--cdc-bark);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background var(--cdc-dur-instant) var(--cdc-ease-standard),
                color var(--cdc-dur-instant) var(--cdc-ease-standard);
}
.cdc-compras__search-clear:hover { color: var(--cdc-ink); background: var(--cdc-surface-card-alt); }

/* Botón "Filtros" con panel abierto */
.cdc-compras__advanced-toggle.is-open {
    color: var(--cdc-cobalt);
    border-color: var(--cdc-cobalt-line);
    background: var(--cdc-cobalt-soft);
}

/* ---- Panel de filtros avanzados ------------------------------------------ */
.cdc-compras__advanced {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 12px;
    align-items: end;
    padding: 14px;
    margin: -8px 0 18px;
    background: var(--cdc-surface-card);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-md);
    box-shadow: var(--cdc-shadow-xs);
    animation: cdc-compras-slide 200ms var(--cdc-ease-out);
}
@keyframes cdc-compras-slide {
    from { opacity: 0; transform: translateY(-4px); }
}
.cdc-compras__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cdc-compras__field > label {
    font-family: var(--cdc-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cdc-bark);
}
.cdc-compras__advanced-foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* ---- Línea de recuento ---------------------------------------------------- */
.cdc-compras__count {
    font-size: 0.85rem;
    color: var(--cdc-bark);
    margin: 0 2px 10px;
}
.cdc-compras__count strong { color: var(--cdc-ink); font-variant-numeric: tabular-nums; }

/* ---- Menú Importar (dropdown propio, sin JS externo) ---------------------- */
.cdc-compras__import { position: relative; display: inline-flex; }
.cdc-compras__import-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: default;
}
.cdc-compras__import-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 61;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: var(--cdc-surface-card);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-md);
    box-shadow: var(--cdc-shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.16));
    animation: cdc-compras-slide 160ms var(--cdc-ease-out);
}
.cdc-compras__import-menu button {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--cdc-ink);
    text-align: left;
    transition: background var(--cdc-dur-instant) var(--cdc-ease-standard);
}
.cdc-compras__import-menu button:hover { background: var(--cdc-surface-card-alt); }
.cdc-compras__import-menu button > i { width: 16px; margin-top: 2px; color: var(--cdc-forest); flex-shrink: 0; }
.cdc-compras__import-menu button small {
    display: block;
    color: var(--cdc-bark);
    font-size: 0.72rem;
    font-weight: 400;
    margin-top: 1px;
}

/* ---- Celdas del grid ------------------------------------------------------ */
.cdc-compras__doc { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cdc-compras__doc-num {
    font-family: var(--cdc-mono);
    font-size: 0.8rem;
    color: var(--cdc-ink);
    font-variant-numeric: tabular-nums;
}
.cdc-compras__doc-origen { color: var(--cdc-amber); font-size: 0.8rem; }

.cdc-compras__prod { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; }
.cdc-compras__prod-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Variante apilada (vista por producto): nombre arriba, NRS debajo — evita que el
   nombre compita en horizontal con el chip y salga recortado con sitio de sobra. */
.cdc-compras__prod--stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
}
.cdc-compras__prod--stack .cdc-compras__prod-name {
    max-width: 100%;
    font-weight: 500;
    color: var(--cdc-ink);
}
.cdc-compras__prod-nrs {
    font-family: var(--cdc-mono);
    font-size: 10px;
    letter-spacing: 0.05em;
    color: var(--cdc-bark);
}
.cdc-compras__prod-more {
    flex-shrink: 0;
    font-family: var(--cdc-mono);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 99px;
    background: var(--cdc-cobalt-soft);
    color: var(--cdc-cobalt);
    border: 1px solid var(--cdc-cobalt-line);
}
.cdc-compras__prod-empty { color: var(--cdc-bark); opacity: 0.7; font-style: italic; font-size: 0.85rem; }

.cdc-compras__total { font-variant-numeric: tabular-nums; }

.cdc-compras__stock { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cdc-compras__stock-value { font-variant-numeric: tabular-nums; color: var(--cdc-bark); }
.cdc-compras__stock-value.has-stock { color: var(--cdc-forest); font-weight: 600; }
.cdc-compras__stock-value em { font-style: normal; font-size: 0.72em; color: var(--cdc-bark); }
/* ── Compras: informacion de la cabecera (estado + «se esta usando aqui») ───────
   La rueda girando es la senal que el cuaderno anterior usaba para decir «de esta
   compra ya se ha gastado producto en tratamientos o fertilizaciones». Gira solo
   cuando de verdad hay consumo, para que el movimiento signifique algo. */
.cdc-compras__info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.cdc-compras__uso-gear {
    color: var(--cdc-cobalt, #2f5f9e);
    font-size: .95em;
    animation: cdc-compras-gear 2.6s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes cdc-compras-gear { to { transform: rotate(360deg); } }

/* Quien prefiera no ver movimiento no lo ve: el icono sigue ahi, quieto. */
@media (prefers-reduced-motion: reduce) {
    .cdc-compras__uso-gear { animation: none; }
}

/* Bloques de una ficha de producto: agrupan los campos por lo que responden -quien es,
   como se vende, de que esta hecho- en vez de una lista plana de doce campos seguidos. */
.cdc-ficha__bloque {
    border: 1px solid var(--cdc-mas-line, rgba(86, 65, 42, 0.16));
    border-radius: 8px;
    padding: 12px 14px 14px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cdc-ficha__bloque > legend {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cdc-cobalt, #2f5f9e);
    padding: 0 6px;
}

.cdc-ficha__bloque > legend i { margin-right: .35rem; }

/* Aviso de compra traida del ERP o de un Excel: se consulta, no se edita. */
.cdc-compras__aviso-importada {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: var(--cdc-amber-soft, rgba(182, 121, 31, .08));
    border-left: 3px solid var(--cdc-amber, #B6791F);
    border-radius: 6px;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .88rem;
    line-height: 1.45;
}

.cdc-compras__aviso-importada > i {
    color: var(--cdc-amber, #B6791F);
    font-size: 1.1em;
    margin-top: .1rem;
}

/* Marca de devolucion en la linea de producto de la franja desplegable. */
.cdc-compras__devuelta-marca {
    color: var(--cdc-amber, #B6791F);
    margin-left: .35rem;
    cursor: help;
}

/* ── Selector de parcelas a tratar (prescripcion; despues tratamiento y fertilizacion) ── */
.cdc-selparc { display: flex; flex-direction: column; gap: 1.25rem; }

/* Cabecera: que se busca y cuanto suma. Va arriba porque es lo que el asesor
   comprueba antes de firmar, no un pie de tabla. */
.cdc-selparc__resumen {
    display: flex; flex-direction: column; gap: .75rem;
    background: rgba(86, 65, 42, .04);
    border: 1px solid var(--cdc-mas-line, rgba(86, 65, 42, .14));
    border-radius: 8px; padding: .85rem 1rem;
}

.cdc-selparc__criterio {
    display: flex; gap: .5rem; align-items: baseline;
    font-size: .92rem; line-height: 1.4;
}

.cdc-selparc__criterio > i { color: var(--cdc-mute); }

.cdc-selparc__cifras { display: flex; gap: 2rem; flex-wrap: wrap; }
.cdc-selparc__cifra { display: flex; flex-direction: column; gap: .1rem; }

.cdc-selparc__cifra-num {
    font-size: 1.35rem; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
}

.cdc-selparc__cifra-lbl {
    font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--cdc-mute);
}

.cdc-selparc__cifra--destacada .cdc-selparc__cifra-num { color: var(--rz-primary, #1c6b4a); }

.cdc-selparc__pct {
    display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
    border-top: 1px solid var(--cdc-mas-line, rgba(86, 65, 42, .14));
    padding-top: .7rem;
}

.cdc-selparc__pct-txt { font-size: .9rem; }

.cdc-selparc__pct-nota {
    font-size: .78rem; color: var(--cdc-mute); flex: 1 1 16rem; line-height: 1.35;
}


/* ── Avisos de una parcela (IndicadoresParcela) ─────────────────────────────────────────
   Global y no scoped: el componente se usa desde Parcelas, desde su ficha y desde el editor
   de mapa, y el CSS aislado de Blazor solo alcanza al .razor que lo declara. */
.parcela-avisos { display: inline-flex; align-items: center; gap: .1rem; flex-wrap: wrap; }

/* Los colores de cada aviso. Estaban en Parcelas.razor.css y ahi se quedaron muertos al
   mover los iconos a este componente: el CSS aislado de Blazor reescribe los selectores
   con el atributo [b-xxxxx] de SU .razor, asi que una regla de una pagina no pinta lo que
   dibuja otro componente. Los iconos salieron del color heredado hasta que se movieron. */
.cdc-aviso {
    display: inline-flex;
    align-items: center;
    margin: 0 3px;
    font-size: 0.8rem;
    color: var(--cdc-bark, #64748B);
}

.cdc-aviso--info { color: var(--cdc-cobalt, #2563EB); }
.cdc-aviso--warn { color: var(--cdc-amber, #B45309); }
.cdc-aviso--ok   { color: var(--cdc-forest, #15803D); }

/* Rojo, reservado a lo que hay que ARREGLAR: parcela de baja y sin ecorregimen PAC.
   El ambar de --warn es para lo que hay que tener en cuenta pero no se puede cambiar
   (nitratos, pendiente); mezclarlos quita fuerza a los dos. */
.cdc-aviso--alerta { color: var(--cdc-danger, #B91C1C); }

/* La «N» de nitratos: sin icono que la represente, va como sigla en una pastilla. */
.cdc-aviso--sigla {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid currentColor;
}

/* Con etiqueta: pastillas que se leen, para la ficha y el mapa. */
.parcela-avisos--etiquetas { display: flex; gap: .35rem; }

.parcela-avisos--etiquetas .cdc-aviso {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .55rem; border-radius: 999px;
    border: 1px solid currentColor;
    background: color-mix(in srgb, currentColor 8%, transparent);
    font-size: .78rem; font-weight: 600; margin: 0;
}

.parcela-avisos__ninguno { font-size: .78rem; color: var(--cdc-mute); }

/* Fecha minima de recoleccion en el listado de tratamientos. En verde lo que ya se puede
   recolectar y en ambar lo que todavia espera: es la lectura que se hace de un vistazo
   recorriendo la lista, y el color la da sin leer las fechas una a una. */
.cdc-recoleccion {
    display: inline-flex; align-items: center; gap: .35rem;
    font-variant-numeric: tabular-nums; white-space: nowrap; cursor: help;
}

.cdc-recoleccion--libre  { color: var(--cdc-forest, #15803D); }
.cdc-recoleccion--espera { color: var(--cdc-amber, #B45309); font-weight: 600; }

/* ── Cerrar el panel de detalle de un listado ──────────────────────────────────────────
   Global y no scoped, y con nombre propio: el mismo boton hace falta en Parcelas, en
   Tratamientos y en cualquier listado con panel lateral. Una copia por pantalla es como se
   apagan los iconos —dos veces esta semana—, asi que este vive una sola vez. */
.cdc-detalle { position: relative; }

.cdc-detalle__cerrar {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cdc-surface-card, #fff);
    border: 1px solid var(--cdc-border-strong, #CBD5E1);
    border-radius: 8px;
    color: var(--cdc-bark, #475569);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.cdc-detalle__cerrar:hover {
    background: var(--cdc-surface-well, #F1F5F9);
    color: var(--cdc-ink, #0B1120);
}

/* ── Colores de estado, con dueño ──────────────────────────────────────────────────────
   Los llevaban DOCE bloques <style> sueltos dentro de componentes. Eso no es CSS
   compartido: es doce copias que solo existen mientras su componente esta en pantalla, asi
   que una pantalla que use la clase sin traer su propia copia pinta el icono en negro y no
   se entera nadie. Paso el 2026-09-07 al reescribir TratamientoParcelasTab: la columna de
   avisos del listado de tratamientos se apagaba, aunque el fallo no estaba en el listado.

   `.text-info` era todavia peor: se usa y NO lo definia ninguna de las doce copias.

   Aqui viven una vez, con la paleta del cuaderno. Las copias de los componentes ganan por
   orden en el documento y dicen lo mismo, asi que no cambian nada; al ir cayendo, esto
   sostiene el color. */
.text-success { color: var(--cdc-forest, #15803D); }
.text-warning { color: var(--cdc-amber, #B45309); }
.text-danger  { color: var(--cdc-danger, #B91C1C); }
.text-info    { color: var(--cdc-cobalt, #2563EB); }
.text-muted   { color: var(--cdc-mute, #64748B); }

/* La fila de iconos de aviso de una rejilla: solo separacion, el color lo pone cada icono. */
.cdc-flag-row {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* Aviso de que otra pestana cambio el contexto de trabajo. En ambar: no impide seguir, pero
   hay que leerlo antes de dar de alta nada. Sticky arriba del contenido para que no se
   escape al bajar por una pantalla larga. */
.cdc-otra-pestana {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: flex-start; gap: .75rem;
    margin-bottom: 1rem; padding: .7rem .9rem;
    background: var(--cdc-amber-soft, rgba(180, 83, 9, .08));
    border: 1px solid var(--cdc-amber-line, rgba(180, 83, 9, .28));
    border-radius: 8px;
    font-size: .85rem; line-height: 1.4;
}

.cdc-otra-pestana__icono { color: var(--cdc-amber, #B45309); margin-top: .15rem; }

.cdc-otra-pestana__texto { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 auto; }
.cdc-otra-pestana__texto > span { color: var(--cdc-bark, #475569); }

.cdc-otra-pestana__acc { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }

@media (max-width: 720px) {
    .cdc-otra-pestana { flex-wrap: wrap; }
    .cdc-otra-pestana__acc { width: 100%; justify-content: flex-end; }
}

/* Las que aparta el filtro de fechas. No es un error -es correcto que no salgan-, asi que va
   en el tono de nota, como la casilla de otros cultivos que tiene al lado. */
.cdc-selparc__fuera {
    display: flex; align-items: center; gap: .4rem;
    font-size: .78rem; color: var(--cdc-mute); cursor: help;
}

.cdc-selparc__fuera > i { color: var(--rz-warning, #f79d3c); }

/* El de cultivo no es una advertencia de fecha: va en el verde del cuaderno. */
.cdc-selparc__fuera > .fa-seedling { color: var(--rz-primary, #1c6b4a); }

/* Buscador de parcelas: con cientos de filas, recorrer paginas no es una opcion. */
.cdc-selparc__buscar { display: flex; align-items: center; gap: .4rem; }
.cdc-selparc__buscar > i { color: var(--cdc-mute); font-size: .85em; }

/* Sistema de certificacion, como distintivo corto: PI, ECO, ATRIA… */
.cdc-selparc__cert {
    display: inline-block; padding: .1rem .45rem; border-radius: 999px;
    background: rgba(28, 107, 74, .10); color: var(--rz-primary, #1c6b4a);
    font-size: .78em; font-weight: 700; letter-spacing: .02em;
    cursor: help; white-space: nowrap;
}

/* Que parte de la explotacion entera se trata. Va al lado de las cifras, no debajo: es la
   lectura de conjunto, y en una linea aparte se leia como un dato mas de la lista. */
.cdc-selparc__pct-expl {
    display: flex; flex-direction: column; gap: .1rem;
    margin-left: auto; padding-left: 1.25rem;
    border-left: 2px solid var(--cdc-mas-line, rgba(86, 65, 42, .14));
    text-align: right;
}

.cdc-selparc__pct-expl-num {
    font-size: 1.5rem; font-weight: 800; line-height: 1;
    color: var(--rz-primary, #1c6b4a); font-variant-numeric: tabular-nums;
}

.cdc-selparc__pct-expl-lbl {
    font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--cdc-mute); display: flex; flex-direction: column;
}

.cdc-selparc__pct-expl-lbl > span { text-transform: none; letter-spacing: 0; font-size: .95em; }

/* Las cifras y el porcentaje comparten fila; en estrecho, el porcentaje baja. */
.cdc-selparc__fila-cifras {
    display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
}

.cdc-selparc__fila-cifras > .cdc-selparc__cifras { flex: 1 1 auto; }

@media (max-width: 720px) {
    .cdc-selparc__pct-expl {
        margin-left: 0; padding-left: 0; border-left: none; text-align: left;
        border-top: 1px solid var(--cdc-mas-line, rgba(86, 65, 42, .14)); padding-top: .6rem;
    }
}

.cdc-selparc__cargando {
    display: flex; gap: .6rem; align-items: center;
    font-size: .9rem; color: var(--cdc-mute);
}

.cdc-selparc__aviso {
    display: flex; gap: .6rem; align-items: flex-start;
    background: var(--cdc-amber-soft, rgba(182, 121, 31, .08));
    border-left: 3px solid var(--cdc-amber, #B6791F);
    border-radius: 6px; padding: .65rem .9rem; font-size: .86rem; line-height: 1.4;
}

.cdc-selparc__aviso > i { color: var(--cdc-amber, #B6791F); margin-top: .1rem; }

/* Cada rejilla con su cabecera y sus dos botones de marcado. */
.cdc-selparc__bloque { display: flex; flex-direction: column; gap: .5rem; }

.cdc-selparc__bloque-cab {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; flex-wrap: wrap;
}

.cdc-selparc__bloque-cab h4 {
    margin: 0; font-size: .95rem; font-weight: 700;
    display: flex; align-items: center; gap: .45rem;
}

.cdc-selparc__bloque-cab h4 > i { color: var(--cdc-mute); font-size: .9em; }

.cdc-selparc__contador {
    font-size: .75rem; font-weight: 600; color: var(--cdc-mute);
    background: rgba(86, 65, 42, .08); border-radius: 999px; padding: .1rem .5rem;
}

.cdc-selparc__bloque-acc { display: flex; gap: .4rem; flex-wrap: wrap; }

.cdc-selparc__vacio { color: var(--cdc-mute); font-size: .88rem; margin: 0; line-height: 1.4; }

.cdc-selparc__grid { font-size: .88rem; }

/* Las dos rejillas, lado a lado. La de agrupaciones es un ATAJO -cuatro nombres para
   marcar en bloque- y no necesita el ancho entero; la de parcelas es donde se trabaja.
   Por debajo de 1100px se apilan: en tablet o pantalla partida, dos columnas dejan las
   dos ilegibles. */
.cdc-selparc__rejillas {
    display: grid;
    grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .cdc-selparc__rejillas { grid-template-columns: minmax(0, 1fr); }
}

/* minmax(0, ...) arriba y este min-width: sin ellos una tabla ancha empuja la columna
   del grid y desborda la pagina en vez de hacer scroll dentro de si misma. */
.cdc-selparc__bloque--parcelas { min-width: 0; }
.cdc-selparc__bloque--parcelas .cdc-selparc__grid { overflow-x: auto; }

/* Nombre de la agrupacion y su superficie a dos lineas: en la columna estrecha no caben
   como columnas separadas, y el dato es el mismo. */
.cdc-selparc__uhc { display: flex; flex-direction: column; line-height: 1.25; }
.cdc-selparc__uhc-nom { font-weight: 600; }
.cdc-selparc__uhc-sup { font-size: .8em; color: var(--cdc-mute); font-variant-numeric: tabular-nums; }

/* «finca» se distingue del resto de la linea: no es una medida mas, es lo que dice que
   marcar esta agrupacion equivale a marcarlo todo. */
.cdc-selparc__uhc-finca {
    margin-left: .35rem;
    color: var(--rz-success, #198754);
    font-weight: 600;
    font-variant-numeric: normal;
}

/* Columna de informacion: riego, pendiente, nitratos y agua como iconos. */
.cdc-selparc__info {
    display: flex; gap: .45rem; align-items: center; justify-content: center;
    color: var(--cdc-mute);
}

.cdc-selparc__info > i { cursor: help; }

/* Localizacion a dos lineas: arriba como la llama el agricultor, abajo como la
   identifica la Administracion. */
.cdc-selparc__loc { display: flex; flex-direction: column; line-height: 1.25; }
.cdc-selparc__loc-sitio { font-weight: 600; }
.cdc-selparc__loc-ref { font-size: .8em; color: var(--cdc-mute); }

.cdc-selparc__vig { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cdc-selparc__vig-baja { color: var(--cdc-amber, #B6791F); }

.cdc-selparc__si { color: var(--rz-success, #198754); }
.cdc-selparc__no { color: var(--cdc-mute); }

/* Lo que hay que mirar dos veces antes de firmar: pendiente fuerte, zona vulnerable
   a nitratos, captacion protegida. */
.cdc-selparc__ojo { color: var(--cdc-amber, #B6791F); font-weight: 600; }

/* Marca de «esto es una estimacion, no un dato guardado». */
.cdc-selparc__est { color: var(--cdc-mute); font-size: .8em; margin-left: .2rem; }

.cdc-selparc__mapa {
    width: 100%; height: 460px; border-radius: 8px;
    border: 1px solid var(--cdc-mas-line, rgba(86, 65, 42, .14));
    overflow: hidden;
}

.cdc-selparc__mapa-nota {
    margin: 0 0 .4rem; font-size: .82rem; color: var(--cdc-mute); line-height: 1.4;
}

/* Clip de documento escaneado adjunto a la compra. */
.cdc-compras__docum {
    color: var(--cdc-cobalt, #2f5f9e);
    opacity: .8;
    cursor: help;
}

/* Origen: solo el icono, el nombre va en el title. */
.cdc-compras__origen {
    opacity: .7;
    font-size: 1.05em;
    cursor: help;
}

/* Punto de estado suelto, sin la pastilla de texto: es la version escueta de
   .cdc-status-chip para la columna «i», donde el significado va en el tooltip. */
.cdc-status-dot {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    flex: 0 0 auto;
    cursor: help;
}

.cdc-status-dot--vigente { background: var(--cdc-forest); }
.cdc-status-dot--warn { background: var(--cdc-amber); }
.cdc-status-dot--neutral { background: var(--cdc-mute); }

/* Desglose de existencias por producto: cuando hay mas de uno no se ensena un
   total -sumar kilos de azufre con litros de cobre no da nada-, se ensena cuantos
   productos quedan vivos y el detalle va en el title. */
/* Franja desplegable de la fila de compras: los productos de ese documento. Sustituye
   al panel lateral, que en pantalla estrecha dejaba la parrilla en nada y ademas repetia
   lo que ya se lee en la propia fila. */
/* Tabla de la franja desplegable: una fila por producto con los cuatro movimientos.
   Cabecera propia porque cuatro cantidades seguidas sin rotulo no se distinguen. */
.cdc-compras__fila-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .92em;
}

.cdc-compras__fila-tabla th,
.cdc-compras__fila-tabla td {
    padding: .35rem .6rem;
    text-align: left;
    border-bottom: 1px solid var(--cdc-mas-line, rgba(86, 65, 42, 0.14));
}

.cdc-compras__fila-tabla thead th {
    font-size: .78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cdc-mute);
    border-bottom-width: 2px;
}

.cdc-compras__fila-tabla .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Un cero no compite con las cifras que si dicen algo. */
.cdc-compras__fila-tabla td.cero { color: var(--cdc-mute); }
.cdc-compras__fila-tabla td.vivo { color: var(--cdc-forest); font-weight: 600; }
.cdc-compras__fila-tabla td.ojo { color: var(--cdc-amber); font-weight: 600; }

.cdc-compras__fila-tabla .marcas {
    width: 60px;
    text-align: center;
    white-space: nowrap;
}

.cdc-compras__fila-tabla tfoot td {
    border-bottom: none;
    padding-top: .5rem;
    font-size: .88em;
    color: var(--cdc-mute);
}

.cdc-compras__fila-tabla tfoot td.num { font-weight: 700; color: inherit; }

.cdc-compras__fila-detalle {
    padding: .75rem 1rem 1rem 2.5rem;
    background: rgba(86, 65, 42, 0.035);
}

.cdc-compras__fila-detalle-acciones {
    display: flex;
    justify-content: flex-end;
    margin-top: .5rem;
}

.cdc-compras__stock-multi {
    font-variant-numeric: tabular-nums;
    border-bottom: 1px dotted currentColor;
    cursor: help;
}

.cdc-compras__stock-bar {
    width: 72px;
    height: 4px;
    border-radius: 99px;
    background: var(--cdc-border);
    overflow: hidden;
}
.cdc-compras__stock-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--cdc-forest);
}

.cdc-compras__obs {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cdc-soil);
    font-size: 0.85rem;
}

/* ---- Empty state / detalle ------------------------------------------------ */
.cdc-compras__empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.cdc-compras__detail-sub {
    margin: 14px 0 6px;
    font-family: var(--cdc-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cdc-bark);
}
.cdc-compras__detail-lineas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cdc-compras__detail-lineas li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--cdc-ink);
    border-bottom: 1px dashed var(--cdc-border);
    padding-bottom: 6px;
}
.cdc-compras__detail-lineas li em {
    font-style: normal;
    font-family: var(--cdc-mono);
    font-size: 0.75rem;
    color: var(--cdc-bark);
    white-space: nowrap;
}

/* ---- Toggle de vista Documentos / Productos -------------------------------- */
.cdc-compras__view-toggle {
    display: inline-flex;
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-md);
    background: var(--cdc-surface-card);
    padding: 3px;
    gap: 2px;
}
.cdc-compras__view-toggle button {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 6px 12px;
    border-radius: calc(var(--cdc-radius-md) - 3px);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cdc-bark);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    transition: background var(--cdc-dur-instant) var(--cdc-ease-standard),
                color var(--cdc-dur-instant) var(--cdc-ease-standard);
}
.cdc-compras__view-toggle button:hover { color: var(--cdc-ink); }
.cdc-compras__view-toggle button.is-active {
    background: var(--cdc-forest-soft);
    color: var(--cdc-forest);
    box-shadow: inset 0 0 0 1px var(--cdc-forest-line);
}
.cdc-compras__view-toggle button i { font-size: 11px; }

/* ---- Compras sin anotar ------------------------------------------------------
   Producto comprado que no consta aplicado. El tono sube con la edad de la compra
   y NUNCA llega a rojo: rojo en este cuaderno significa bloqueo, y aquí no hay
   nada bloqueado — el plazo legal corre desde la aplicación, no desde la compra. */
.cdc-sin-anotar { display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.cdc-sin-anotar__fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--cdc-border);
    border-left-width: 4px;
    border-radius: var(--cdc-radius-md);
    background: var(--cdc-surface-card);
}
.cdc-sin-anotar__fila--informativo { border-left-color: var(--cdc-border); }
.cdc-sin-anotar__fila--atencion { border-left-color: var(--cdc-amber-2); }
.cdc-sin-anotar__fila--aviso { border-left-color: var(--cdc-amber); }
.cdc-sin-anotar__datos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cdc-sin-anotar__producto {
    font-weight: 600; color: var(--cdc-ink);
    display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.cdc-sin-anotar__meta {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    font-size: 0.85rem; color: var(--cdc-bark);
}
.cdc-sin-anotar__texto { font-size: 0.85rem; color: var(--cdc-bark); }
.cdc-sin-anotar__acciones {
    display: flex; flex-wrap: wrap; gap: 6px;
    align-items: center; justify-content: flex-end;
}
/* Las etiquetas de las acciones secundarias solo aparecen cuando de verdad caben.
   El lienzo se dibujo sobre un tablero de 1240 px SIN la barra lateral de la
   aplicacion; en la pantalla real el ancho util son ~950 px, y con las cinco
   etiquetas puestas las acciones ocupaban 523 px —el 55 % de la fila—, dejaban 379
   para el texto y partian el producto y la linea de datos en tres renglones: 198 px
   de alto por fila frente a los 86 del diseno. Plegadas a icono (cada una conserva su
   `title`), los datos recuperan el ancho y la fila vuelve a su altura. */
.cdc-sin-anotar__lbl { display: none; }
.cdc-sin-anotar__acciones .rz-button-text { display: none; }
/* Las DOS primeras acciones de la fila no se pliegan nunca: son la salida que se busca
   —«Verificar y crear» y «Ya esta anotada» en un fitosanitario, «Anotar en el mapa» y
   «Avisar» en un abono— y una fila entera de iconos grises no dice donde se aprieta.
   Se cuenta por posicion y no por nombre a proposito: las acciones cambian con el
   producto y con el rol, y lo que importa es que las dos de la izquierda se lean. */
.cdc-sin-anotar__acciones > :nth-child(-n+2) .cdc-sin-anotar__lbl,
.cdc-sin-anotar__acciones > :nth-child(-n+2) .rz-button-text { display: inline; }
@container (min-width: 1120px) {
    .cdc-sin-anotar__lbl { display: inline; }
    .cdc-sin-anotar__acciones .rz-button-text { display: inline; }
}

/* Por debajo de ~900 px las acciones bajan a su propio renglon en vez de robarle
   ancho al texto: con las dos etiquetas puestas ocupaban 463 de 793 y dejaban el
   producto y los datos en 277, que es volver a partirlos en tres lineas. Se mide el
   CONTENEDOR y no la ventana porque el hueco depende de si la barra lateral esta
   plegada. */
@container (max-width: 900px) {
    .cdc-sin-anotar__fila { grid-template-columns: 1fr; }
    .cdc-sin-anotar__acciones { justify-content: flex-start; }
}

/* ---- Fichas (pantallas estrechas) ------------------------------------------ */
.cdc-compras__cards { display: none; }

.cdc-compra-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: var(--cdc-surface-card);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-lg);
    box-shadow: var(--cdc-shadow-xs);
    cursor: pointer;
}
.cdc-compra-card:active { transform: scale(0.99); }
.cdc-compra-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.cdc-compra-card__fecha {
    font-family: var(--cdc-mono);
    font-size: 0.75rem;
    color: var(--cdc-bark);
    font-variant-numeric: tabular-nums;
}
.cdc-compra-card__prod {
    margin: 0;
    font-size: 0.9rem;
    color: var(--cdc-ink);
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.cdc-compra-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--cdc-border);
    font-size: 0.875rem;
}
.cdc-compras__cards-nota {
    margin: 4px 2px 0;
    font-size: 0.8rem;
    color: var(--cdc-bark);
    text-align: center;
}

/* ---- Fichas como vista principal del listado de documentos -----------------
   Antes las fichas solo salian en pantalla estrecha y en ancho mandaba la
   tabla; la tabla enseñaba nueve columnas densas en los ~1.210 px utiles de la
   pagina y ademas se le exigia `min-width: 1240px`, asi que cortaba celdas y
   sacaba barra horizontal hasta en un monitor de 1.600. Ahora la ficha es la
   vista por defecto a cualquier ancho y la tabla vive detras del interruptor.
   La ficha se estira a fila —datos a la izquierda, acciones a la derecha— en
   cuanto hay sitio, igual que la fila de «Sin anotar». */
.cdc-compras__listhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cdc-compras__formato {
    display: inline-flex;
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-md);
    background: var(--cdc-surface-card);
    padding: 3px;
    gap: 2px;
}
.cdc-compras__formato button {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 5px 11px;
    border-radius: 5px;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cdc-bark);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.cdc-compras__formato button.is-active {
    background: var(--cdc-forest-soft);
    color: var(--cdc-forest);
    box-shadow: inset 0 0 0 1px var(--cdc-forest-line);
}

.cdc-compras__tabla--oculta { display: none; }

.cdc-compras__cards--principal {
    display: flex;
    flex-direction: column;
    gap: 10px;
    container-type: inline-size;
}
.cdc-compras__cards--principal .cdc-compra-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 16px;
}
.cdc-compras__cards--principal .cdc-compra-card__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.cdc-compra-card__cuerpo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cdc-compra-card__acciones { display: flex; gap: 6px; align-items: center; }
.cdc-compra-card__empresa {
    color: var(--cdc-bark);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 34ch;
}
.cdc-compra-card__obs {
    margin: 0;
    font-size: 0.8rem;
    color: var(--cdc-bark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cdc-compra-card__borrar:hover { color: var(--cdc-danger); }

/* En la fila ancha, la ficha se lee de izquierda a derecha y sin huecos: el
   `space-between` de la ficha apilada repartia los cuatro datos del pie a lo
   ancho de 1.200 px y quedaban sueltos. La fecha es lo unico que se va a la
   derecha, para poder escanear la columna de fechas de un vistazo. */
@container (min-width: 760px) {
    .cdc-compras__cards--principal .cdc-compra-card__head,
    .cdc-compras__cards--principal .cdc-compra-card__foot {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 14px;
    }
    .cdc-compras__cards--principal .cdc-compra-card__fecha { margin-left: auto; order: 9; }
    .cdc-compras__cards--principal .cdc-compra-card__foot {
        padding-top: 0;
        border-top: 0;
    }
    .cdc-compras__cards--principal .cdc-compra-card__prod { font-weight: 600; }
}

/* Ficha de producto (vista por producto en estrecho) */
.cdc-producto-card__stock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.cdc-producto-card__stock .cdc-compras__stock-bar { flex: 1 1 0; width: auto; }
.cdc-producto-card__stock .cdc-compras__stock-value { font-size: 1rem; white-space: nowrap; }
.cdc-producto-card__meta {
    font-size: 0.78rem;
    color: var(--cdc-bark);
}

/* Las rz-grid-table-fixed al 100% comprimen sus columnas en contenedores estrechos
   y recortan la mitad derecha sin scroll (overflow hidden en la tabla). Con un ancho
   minimo real, .rz-data-grid-data (overflow auto) scrollea en horizontal y la columna
   congelada de la derecha sigue pegada. Documentos (9 columnas) necesita mas que la
   vista por producto (8 mas compactas). */
.cdc-compras__tabla .rz-grid-table { min-width: 1240px; }
.cdc-compras__grid-productos .rz-grid-table { min-width: 900px; }

/* ---- Responsive ------------------------------------------------------------ */
@container (max-width: 820px) {
    /* En movil el conmutador de vista se vuelve PESTAÑAS: fila propia a ancho
       completo encabezando los controles, con subrayado de activa — en vez del
       segmented pequeño que quedaba perdido entre los botones envueltos. */
    .cdc-compras__view-toggle {
        order: -1;
        flex-basis: 100%;
        display: flex;
        padding: 0;
        gap: 0;
        border: 0;
        border-bottom: 1px solid var(--cdc-border);
        border-radius: 0;
        background: transparent;
    }
    .cdc-compras__view-toggle button {
        flex: 1 1 0;
        justify-content: center;
        padding: 11px 10px;
        border-radius: 0;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        font-size: 0.875rem;
    }
    .cdc-compras__view-toggle button.is-active {
        background: transparent;
        box-shadow: none;
        color: var(--cdc-forest);
        border-bottom-color: var(--cdc-forest);
    }

    .cdc-compras__search { max-width: none; flex-basis: 100%; }
    .cdc-compras__toolbar .cdc-toolbar__sep { display: none; }
    /* Los grupos de pills son inline-flex sin wrap: en movil el grupo de estado
       (4 pills, ~440px) estiraba el body y provocaba scroll lateral de pagina. */
    .cdc-compras__toolbar .cdc-toolbar__group { flex-wrap: wrap; }
    .cdc-compras__toolbar .cdc-btn { flex-grow: 1; justify-content: center; }
    /* En estrecho, ambas vistas son FICHAS artesanas: las tablas se apagan y cada
       fila es una tarjeta tocable con los campos curados — mas rica que la ficha
       generica del modo apilado etiquetado (bloque rz-datatable-reflow, al final). */
    .cdc-compras__tabla,
    .cdc-compras__grid-productos { display: none; }
    .cdc-compras__cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cdc-compras__advanced,
    .cdc-compras__import-menu { animation: none; }
}


/* ─────────────────────────────────────────────────────────────────────────
   Dialogo del editor de plantillas de contrato
   ─────────────────────────────────────────────────────────────────────────
   El editor de Word necesita que TODA la cadena de padres tenga altura
   resuelta o su lienzo se queda sin pintar: se ve la barra de herramientas y
   la de estado, y entre medias un hueco en blanco. El CSS con ambito del
   componente no puede llegar hasta el contenedor del dialogo, asi que las
   reglas viven aqui y se activan con la clase que pasa DialogOptions. */
.cdc-dialogo-editor .rz-dialog-content {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cdc-dialogo-editor .rz-dialog-content > * {
    flex: 1;
    min-height: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Mapa de parcela con panel de expediente (/explotacion/mapa)
   ─────────────────────────────────────────────────────────────────────────
   El lienzo y, a su lado, "lo hecho en esta parcela". Solo tokens --cdc-*:
   se redefinen en [data-theme="dark"], asi que el modo oscuro sale gratis.

   min-width: 0 en el lienzo NO es decorativo: sin el, un hijo flex con
   contenido ancho (las tres barras de herramientas del editor) estira el
   contenedor y el panel desborda la pantalla. */
.cdc-mapa-trabajo { display: flex; gap: 0.75rem; align-items: stretch; }

.cdc-mapa-trabajo__lienzo { flex: 1; min-width: 0; }

.cdc-mapa-trabajo__panel {
    width: clamp(320px, 26vw, 420px);
    flex-shrink: 0;
    /* El mismo calculo que .cdc-map-lienzo--completa, para que panel y mapa
       midan igual y el scroll sea del panel, no de la pagina. */
    height: max(420px, calc(100vh - 260px));
    overflow-y: auto;
    background: var(--cdc-surface-card);
    border: 1px solid var(--cdc-border);
    border-radius: 8px;
    padding: 0.75rem;
}

/* Pantallas medias: el panel debajo, a lo ancho. */
@media (max-width: 1100px) {
    .cdc-mapa-trabajo { flex-direction: column; }
    .cdc-mapa-trabajo__panel {
        width: auto;
        height: clamp(280px, 40vh, 520px);
    }
}

/* Movil: el panel es una HOJA INFERIOR fija. Medido el 06/09/2026 a 375 px: el panel
   caia a 944-1.464 px del borde superior, fuera de la pantalla, y el lienzo del editor
   empezaba a 793 px tras trece filas de botones. Cerrada, la hoja es solo el asa (3 rem)
   con el nombre de la parcela; abierta sube hasta el 75 % de la pantalla. Es el mismo
   componente en el mismo sitio del arbol: ni se duplica ni se mueve por JS. */
.cdc-mapa-trabajo__asa { display: none; }

@media (max-width: 768px) {
    .cdc-mapa-trabajo { padding-bottom: 3.5rem; }
    .cdc-mapa-trabajo__panel {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1200;
        width: auto;
        height: auto;
        max-height: 75vh;
        display: flex;
        flex-direction: column;
        padding: 0;
        border-radius: 14px 14px 0 0;
        border-bottom: 0;
        box-shadow: 0 -8px 24px rgba(26, 18, 8, 0.14);
        transform: translateY(calc(100% - 3rem));
        transition: transform 0.25s ease;
        overflow: hidden;
    }
    .cdc-mapa-trabajo__panel.is-abierto { transform: none; }
    .cdc-mapa-trabajo__panel > .cdc-expediente { overflow-y: auto; padding: 0.5rem 0.75rem 0.75rem; }
    .cdc-mapa-trabajo__asa {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        min-height: 3rem;
        padding: 0 1rem;
        border: 0;
        background: var(--cdc-ink, #1E293B);
        color: var(--cdc-surface-card, #fff);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
        text-align: left;
    }
    .cdc-mapa-trabajo__asa-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Barra del editor por grupos (Dibujar / Medir / SIGPAC y PAC): las pastillas solo existen
   en movil y alli se ve un grupo a la vez. En escritorio, todo como siempre. */
.cdc-editor-grupos { display: none; }

@media (max-width: 768px) {
    .cdc-editor-grupos { display: flex; gap: 0.35rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
    .cdc-editor-grupo:not(.is-activo) { display: none !important; }
}

/* --- Contenido del panel: compuesto con primitivas ya unificadas
       (cdc-chip, cdc-status-chip, cdc-empty, cdc-btn) mas estas pocas
       clases de maquetacion. --- */
.cdc-expediente { display: flex; flex-direction: column; gap: 0.6rem; }

.cdc-expediente__ficha {
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--cdc-border);
}

.cdc-expediente__titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--cdc-ink);
}

.cdc-expediente__ref {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--cdc-mute);
}

.cdc-expediente__meta {
    margin: 0.4rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--cdc-ink-soft, var(--cdc-ink));
}

.cdc-expediente__meta i { color: var(--cdc-mute); margin-right: 3px; }

.cdc-expediente__avisos {
    margin: 0.4rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cdc-expediente__resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cdc-expediente__cargando {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    font-size: 0.85rem;
    color: var(--cdc-mute);
}

.cdc-expediente__nota {
    margin: 0;
    font-size: 0.78rem;
    color: var(--cdc-mute);
}

.cdc-expediente__nota--warn { color: var(--cdc-ochre); }

.cdc-expediente__nota i { margin-right: 4px; }

.cdc-expediente__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.cdc-expediente__apunte {
    display: flex;
    gap: 0.6rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--cdc-border);
}

.cdc-expediente__apunte:last-child { border-bottom: none; }

.cdc-expediente__fecha {
    flex-shrink: 0;
    width: 2.4rem;
    text-align: center;
    line-height: 1.1;
}

.cdc-expediente__dia {
    display: block;
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--cdc-ink);
}

.cdc-expediente__mes {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    color: var(--cdc-mute);
}

.cdc-expediente__cuerpo { min-width: 0; flex: 1; }

.cdc-expediente__apunte-titulo {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cdc-ink);
}

.cdc-expediente__apunte-titulo a { color: var(--cdc-cobalt); text-decoration: none; }
.cdc-expediente__apunte-titulo a:hover { text-decoration: underline; }

.cdc-expediente__apunte-icono { margin-right: 5px; color: var(--cdc-mute); }

.cdc-expediente__ambiguo { margin-left: 5px; color: var(--cdc-ochre); cursor: help; }

.cdc-expediente__detalle {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: var(--cdc-mute);
    overflow-wrap: anywhere;
}

.cdc-expediente__pie {
    margin: 4px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--cdc-mute);
}

.cdc-expediente__mas { align-self: flex-start; }

/* Cara "Registrar" del panel del expediente: los verbos en columna, a lo ancho del
   panel, para que se lean con el pulgar en el movil y no se corten en el escritorio. */
.cdc-expediente__caras { margin-bottom: 0.2rem; }

.cdc-expediente__verbos {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cdc-expediente__verbos .cdc-btn { justify-content: flex-start; width: 100%; }

/* Interruptor de escala del mapa de parcelas (conjunto / parcela). */
.cdc-mapa-trabajo__vistas { margin-bottom: 0.5rem; }

/* Barra de la seleccion multiple del conjunto: resumen + verbos de lote, encima del lienzo. */
.cdc-mapa-seleccion {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    margin-bottom: 0.5rem; padding: 0.5rem 0.75rem;
    background: var(--cdc-ink, #1E293B); color: var(--cdc-surface-card, #fff);
    border-radius: 8px;
}
.cdc-mapa-seleccion__resumen { margin-right: auto; display: inline-flex; align-items: center; gap: 0.4rem; }
.cdc-mapa-seleccion .cdc-btn { background: rgba(255, 255, 255, 0.12); color: inherit; border-color: rgba(255, 255, 255, 0.25); }
.cdc-mapa-seleccion .cdc-btn--primary { background: var(--cdc-surface-card, #fff); color: var(--cdc-ink, #1E293B); }

/* Contexto PAC en la ficha del expediente (ecorrégimen, DGC, UHC): chips en fila, que envuelven. */
.cdc-expediente__contexto { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0 0; }

/* Fotos de campo en la ficha del expediente: un boton por foto, coloreado por motivo. */
.cdc-expediente__fotos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--cdc-mute, #64748B); }
.cdc-expediente__foto { border: 1px solid rgba(15, 23, 42, 0.12); background: var(--cdc-surface-card, #fff); color: inherit; border-radius: 999px; padding: 1px 8px; font: inherit; font-size: 0.75rem; cursor: pointer; }
.cdc-expediente__foto--monitorizacion { border-color: #2563EB; color: #1D4ED8; }
.cdc-expediente__foto--plaga { border-color: #DC2626; color: #B91C1C; }
.cdc-expediente__foto--observacion { border-color: #0F766E; color: #0F766E; }

/* Dialogo de foto de parcela. */
.cdc-foto-dialogo { display: flex; flex-direction: column; gap: 0.75rem; }
.cdc-foto-dialogo__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 720px) { .cdc-foto-dialogo__cols { grid-template-columns: 1fr; } }
.cdc-foto-dialogo__preview { width: 100%; max-height: 320px; object-fit: contain; border-radius: 8px; background: #0F172A; }
.cdc-foto-dialogo__vacio { padding: 1.5rem 1rem; border: 1px dashed rgba(15, 23, 42, 0.25); border-radius: 8px; text-align: center; color: var(--cdc-mute, #64748B); }
.cdc-foto-dialogo__vacio i { font-size: 1.8rem; margin-bottom: 0.4rem; display: block; }
.cdc-foto-dialogo__posicion { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-size: 0.8rem; color: var(--cdc-mute, #64748B); }
.cdc-foto-dialogo__campo { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.5rem; font-size: 0.85rem; }
.cdc-foto-dialogo__check { flex-direction: row; align-items: center; gap: 0.5rem; }
.cdc-foto-dialogo__lista { margin-top: 0.5rem; border: 1px solid rgba(15, 23, 42, 0.10); border-radius: 8px; padding: 0.5rem 0.65rem; }
.cdc-foto-dialogo__lista-titulo { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cdc-mute, #64748B); margin-bottom: 0.35rem; }
.cdc-foto-dialogo__req { display: grid; grid-template-columns: 1.1rem 1fr; column-gap: 0.4rem; padding: 0.2rem 0; font-size: 0.8rem; }
.cdc-foto-dialogo__req-detalle { grid-column: 2; font-size: 0.72rem; color: var(--cdc-mute, #64748B); }
.cdc-foto-dialogo__req--ok i { color: #15803D; }
.cdc-foto-dialogo__req--aviso i { color: #B45309; }
.cdc-foto-dialogo__req--falta i { color: #B91C1C; }
.cdc-foto-dialogo__nombre { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--cdc-mute, #64748B); word-break: break-all; }
.cdc-foto-dialogo__acciones { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* Historial de cultivo por ejercicio (BCAM 7): una linea de campañas, la actual resaltada. */
.cdc-expediente__historial { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--cdc-mute, #64748B); }
.cdc-expediente__campana { padding: 1px 6px; border-radius: 999px; background: rgba(15, 23, 42, 0.05); white-space: nowrap; }
.cdc-expediente__campana.is-actual { background: var(--cdc-ink, #1E293B); color: var(--cdc-surface-card, #fff); font-weight: 600; }

/* Caida de vigor empujada al panel del expediente (fase B5). */
.cdc-expediente__vigor { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.35rem 0 0; font-size: 0.78rem; }
.cdc-expediente__vigor-serie { border: 0; background: none; padding: 0; font: inherit; color: var(--rz-info, #0EA5E9); text-decoration: underline; cursor: pointer; }

/* Compartir la parcela (fase C6). */
.cdc-expediente__compartir { border: 0; background: none; padding: 0 0 0 0.4rem; font-size: 0.8em; color: var(--cdc-mute, #64748B); cursor: pointer; vertical-align: middle; }
.cdc-expediente__compartir:hover { color: var(--rz-info, #0EA5E9); }
.cdc-compartir { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.85rem; }
.cdc-compartir__campo { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.72rem; color: var(--cdc-mute, #64748B); }
.cdc-compartir__texto { width: 100%; font-family: inherit; font-size: 0.85rem; line-height: 1.45; padding: 0.5rem 0.6rem; border: 1px solid rgba(15, 23, 42, 0.15); border-radius: 8px; background: var(--rz-base-100, #F8FAFC); color: var(--cdc-ink, #1E293B); resize: vertical; }
.cdc-compartir__aviso { margin: 0; padding: 0.45rem 0.6rem; border-left: 3px solid #B45309; background: rgba(180, 83, 9, 0.08); font-size: 0.78rem; }
.cdc-compartir__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.cdc-compartir__whatsapp i { margin-right: 0.35rem; }

/* Mapa tematico con leyenda (fase C3). */
.cdc-mapa-tema { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.cdc-mapa-tema__campo { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.7rem; color: var(--cdc-mute, #64748B); }
.cdc-mapa-tema__leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.cdc-mapa-tema__entrada { display: inline-flex; align-items: center; gap: 0.3rem; padding: 2px 8px; border: 1px solid rgba(15, 23, 42, 0.14); border-radius: 999px; background: var(--cdc-surface-card, #fff); font-size: 0.75rem; color: var(--cdc-mute, #64748B); cursor: pointer; }
.cdc-mapa-tema__entrada.is-activa { color: var(--cdc-ink, #1E293B); border-color: rgba(15, 23, 42, 0.3); font-weight: 600; }
.cdc-mapa-tema__entrada:not(.is-activa) { opacity: 0.5; }
.cdc-mapa-tema__punto { width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); }
.cdc-mapa-tema__cuenta { font-variant-numeric: tabular-nums; opacity: 0.75; }
.cdc-mapa-tema__todas { border: 0; background: none; padding: 0 0.3rem; font-size: 0.75rem; color: var(--rz-info, #0EA5E9); text-decoration: underline; cursor: pointer; }
.cdc-mapa-tema__vacio { margin: 0; font-size: 0.78rem; color: var(--cdc-mute, #64748B); }

/* Ventana de pulverizacion (fase C2). */
.cdc-ventana { margin: 0.35rem 0 0; font-size: 0.78rem; }
.cdc-ventana__titular { display: flex; align-items: center; gap: 0.35rem; width: 100%; padding: 0.3rem 0.5rem; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 8px; background: var(--rz-base-100, #F8FAFC); font: inherit; color: var(--cdc-ink, #1E293B); cursor: pointer; text-align: left; }
.cdc-ventana[data-estado="con-ventana"] .cdc-ventana__titular i:first-child { color: #15803D; }
.cdc-ventana[data-estado="sin-ventana"] .cdc-ventana__titular i:first-child { color: #B45309; }
.cdc-ventana__cuenta { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--cdc-mute, #64748B); }
.cdc-ventana__flecha { color: var(--cdc-mute, #64748B); font-size: 0.7em; }
.cdc-ventana__horas { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 0.35rem; }
.cdc-ventana__hora { padding: 1px 5px; border-radius: 4px; font-size: 0.72rem; font-variant-numeric: tabular-nums; cursor: default; }
.cdc-ventana__hora--buena { background: rgba(21, 128, 61, 0.16); color: #14532D; }
.cdc-ventana__hora--regular { background: rgba(180, 83, 9, 0.16); color: #7C2D12; }
.cdc-ventana__hora--mala { background: rgba(185, 28, 28, 0.14); color: #7F1D1D; text-decoration: line-through; }
.cdc-ventana__nota { margin: 0.35rem 0 0; font-size: 0.7rem; color: var(--cdc-mute, #64748B); line-height: 1.4; }

/* Boton y hora del radar de lluvia (fase C2). */
.cdc-map-ctrl--radar { position: absolute; }
.cdc-map-ctrl--radar button.is-activo { color: #1D4ED8; }
.cdc-map-radar-hora { font-size: 0.68rem; font-variant-numeric: tabular-nums; text-align: center; padding: 1px 2px; color: var(--cdc-ink, #1E293B); background: rgba(255, 255, 255, 0.85); border-radius: 3px; }

/* Recintos en fichero (fase C1). */
.cdc-recintos-fichero { font-size: 0.85rem; }
.cdc-recintos-fichero__intro { margin: 0.5rem 0; color: var(--cdc-mute, #64748B); }
.cdc-recintos-fichero__aviso-inline { color: #B45309; margin-left: 0.3rem; }
.cdc-recintos-fichero__formatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.5rem; }
.cdc-recintos-fichero__formato { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.7rem; border: 1px solid rgba(15, 23, 42, 0.14); border-radius: 8px; background: var(--cdc-surface-card, #fff); text-align: left; cursor: pointer; font: inherit; }
.cdc-recintos-fichero__formato:hover:not(:disabled) { border-color: var(--rz-info, #0EA5E9); }
.cdc-recintos-fichero__formato:disabled { opacity: 0.5; cursor: not-allowed; }
.cdc-recintos-fichero__formato span { font-size: 0.72rem; color: var(--cdc-mute, #64748B); }
.cdc-recintos-fichero__subir { padding: 0.6rem; border: 1px dashed rgba(15, 23, 42, 0.25); border-radius: 8px; margin-bottom: 0.5rem; }
.cdc-recintos-fichero__aviso { margin: 0 0 0.4rem; padding: 0.4rem 0.6rem; border-left: 3px solid #B45309; background: rgba(180, 83, 9, 0.08); font-size: 0.78rem; }
.cdc-recintos-fichero__estado { margin: 0.5rem 0; color: var(--cdc-mute, #64748B); }
.cdc-recintos-fichero__resumen { margin: 0.5rem 0 0.3rem; font-size: 0.8rem; }
.cdc-recintos-fichero__problemas { color: #B91C1C; }
.cdc-recintos-fichero__tabla { width: 100%; border-collapse: collapse; }
.cdc-recintos-fichero__tabla th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cdc-mute, #64748B); padding: 0.25rem 0.4rem; border-bottom: 1px solid rgba(15, 23, 42, 0.12); }
.cdc-recintos-fichero__tabla td { padding: 0.3rem 0.4rem; border-bottom: 1px solid rgba(15, 23, 42, 0.06); vertical-align: top; }
.cdc-recintos-fichero__fila.is-problema { background: rgba(185, 28, 28, 0.05); }
.cdc-recintos-fichero__ok { color: #15803D; }
.cdc-recintos-fichero__hallazgo { display: block; font-size: 0.75rem; }
.cdc-recintos-fichero__hallazgo[data-gravedad="problema"] { color: #B91C1C; }
.cdc-recintos-fichero__hallazgo[data-gravedad="aviso"] { color: #B45309; }
.cdc-recintos-fichero__llevar { border: 1px solid rgba(15, 23, 42, 0.15); border-radius: 6px; background: var(--cdc-surface-card, #fff); padding: 2px 8px; font: inherit; font-size: 0.75rem; cursor: pointer; white-space: nowrap; }
.cdc-recintos-fichero__nota { margin: 0.5rem 0 0; font-size: 0.72rem; color: var(--cdc-mute, #64748B); line-height: 1.45; }
.cdc-recintos-fichero__acciones { display: flex; justify-content: flex-end; margin-top: 0.5rem; }

/* Traza de labor (fase C4). */
.cdc-traza { margin: 0.35rem 0 0; font-size: 0.78rem; }
.cdc-traza__empezar { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; border: 1px solid rgba(15, 23, 42, 0.15); border-radius: 999px; background: var(--cdc-surface-card, #fff); font: inherit; font-size: 0.78rem; color: var(--cdc-ink, #1E293B); cursor: pointer; }
.cdc-traza__empezar:hover { border-color: #B91C1C; color: #B91C1C; }
.cdc-traza__grabando { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.5rem; border-radius: 8px; background: rgba(185, 28, 28, 0.08); color: #7F1D1D; }
.cdc-traza__punto-vivo { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #DC2626; animation: cdc-traza-late 1.2s ease-in-out infinite; }
@keyframes cdc-traza-late { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.cdc-traza__parar { margin-left: auto; border: 0; background: #DC2626; color: #fff; border-radius: 6px; padding: 2px 8px; font: inherit; font-size: 0.75rem; cursor: pointer; }
.cdc-traza__medida { padding: 0.4rem 0.55rem; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 8px; background: var(--rz-base-100, #F8FAFC); }
.cdc-traza__titular { margin: 0; font-weight: 600; }
.cdc-traza__titular i { color: #B91C1C; margin-right: 0.3rem; }
.cdc-traza__detalle { margin: 0.25rem 0 0; font-size: 0.72rem; color: var(--cdc-mute, #64748B); }
.cdc-traza__aviso { margin: 0.35rem 0 0; padding: 0.35rem 0.5rem; border-left: 3px solid #B45309; background: rgba(180, 83, 9, 0.08); font-size: 0.74rem; }
.cdc-traza__guardar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; margin-top: 0.5rem; }
.cdc-traza__campo { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.7rem; color: var(--cdc-mute, #64748B); }
.cdc-traza__campo--ancho { flex: 1 1 12rem; }

/* Zonas de manejo (fase B): panel inline del editor con la tabla de zonas y la prescripcion. */
.cdc-zonas { margin-bottom: 0.5rem; padding: 0.75rem; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 8px; background: var(--rz-base-100, #F8FAFC); font-size: 0.85rem; }
.cdc-zonas__cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.cdc-zonas__cabecera h5 { margin: 0; font-size: 0.95rem; color: var(--cdc-ink, #1E293B); }
.cdc-zonas__cabecera h5 i { margin-right: 0.35rem; color: var(--rz-info, #0EA5E9); }
.cdc-zonas__controles, .cdc-zonas__prescripcion, .cdc-zonas__acciones { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; }
.cdc-zonas__campo { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.72rem; color: var(--cdc-mute, #64748B); }
.cdc-zonas__campo--ancho { flex: 1 1 14rem; }
.cdc-zonas__estado { margin: 0.6rem 0 0; color: var(--cdc-mute, #64748B); }
.cdc-zonas__estado--vacio { color: #B45309; }
.cdc-zonas__meta { margin: 0.6rem 0 0.3rem; font-size: 0.75rem; color: var(--cdc-mute, #64748B); }
.cdc-zonas__tabla { width: 100%; border-collapse: collapse; margin-bottom: 0.6rem; }
.cdc-zonas__tabla th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cdc-mute, #64748B); padding: 0.25rem 0.4rem; border-bottom: 1px solid rgba(15, 23, 42, 0.12); }
.cdc-zonas__tabla td { padding: 0.25rem 0.4rem; border-bottom: 1px solid rgba(15, 23, 42, 0.06); white-space: nowrap; }
.cdc-zonas__color { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 3px; vertical-align: -2px; margin-right: 0.3rem; border: 1px solid rgba(0,0,0,0.15); }
.cdc-zonas__prescripcion { margin-bottom: 0.6rem; }
.cdc-zonas__descargar { font-size: 0.75rem; color: var(--cdc-mute, #64748B); align-self: center; }
.cdc-zonas__aviso { margin: 0 0 0.5rem; padding: 0.45rem 0.6rem; border-left: 3px solid #B45309; background: rgba(180, 83, 9, 0.08); font-size: 0.78rem; }
.cdc-zonas__estabilidad[data-grado="estable"] { color: #15803D; }
.cdc-zonas__estabilidad[data-grado="variable"] { color: #B45309; }
.cdc-zonas__estabilidad[data-grado="erratica"] { color: #B91C1C; }
@media (max-width: 720px) { .cdc-zonas__tabla td, .cdc-zonas__tabla th { padding: 0.2rem; font-size: 0.78rem; } }


/* En la pagina del mapa el conjunto ocupa lo mismo que el editor: los dos lienzos y el
   panel del expediente miden igual y el scroll es del panel, no de la pagina. */
.cdc-mapa-trabajo__lienzo .cdc-map-lienzo--pagina { height: max(420px, calc(100vh - 300px)); }


/* ═══════════════════════════════════════════════════════════════════════════
   FICHAS MÓVILES DE LAS TABLAS RADZEN (Responsive="true" en RadzenDataGrid)
   ═══════════════════════════════════════════════════════════════════════════
   En estrecho una tabla de 8-12 columnas no entra: o se comprime hasta ser
   ilegible o recorta la mitad derecha. Con Responsive="true" Radzen añade
   rz-datatable-reflow y renderiza dentro de CADA celda un span
   .rz-column-title con el título de su columna (oculto en ancho), así que el
   modo apilado sí puede etiquetarse. Este bloque re-viste ese modo con el
   mismo lenguaje que las fichas de Compras: cada fila es una tarjeta y cada
   celda una línea etiqueta+valor. Solo tokens --cdc-*: el modo oscuro sale
   gratis.

   Radzen apila a max-width:768px; aquí el corte sube a 920px de VIEWPORT para
   cubrir también la tablet en vertical (768px justos) y las ventanas a media
   pantalla, replicando sus reglas estructurales en el tramo 769-920. Los
   selectores llevan .rz-data-grid delante para ganar en especificidad a la
   hoja de Radzen (que carga antes que esta). */
@media (max-width: 920px) {
    /* Estructura: la tabla deja de ser tabla. El min-width anula los anchos
       mínimos por página (p. ej. .cdc-compras__tabla .rz-grid-table) que en
       modo ficha solo producirían scroll lateral. */
    .rz-data-grid.rz-datatable-reflow .rz-data-grid-data > table {
        display: block;
        table-layout: auto;
        min-width: 0 !important;
    }
    .rz-data-grid.rz-datatable-reflow .rz-data-grid-data > table > tbody { display: block; }
    /* La utilidad .cdc-grid-scroll fija min-width tambien en el DIV raiz del
       grid (ver linea ~2045): apilado, ese ancho solo daria scroll lateral. */
    .cdc-grid-scroll > .rz-datatable.rz-datatable-reflow,
    .cdc-grid-scroll > .rz-data-grid.rz-datatable-reflow,
    .cdc-grid-scroll > .cdc-rejilla > .rz-datatable.rz-datatable-reflow,
    .cdc-grid-scroll > .cdc-rejilla > .rz-data-grid.rz-datatable-reflow { min-width: 0; }
    .rz-data-grid.rz-datatable-reflow .rz-grid-table thead { display: none; }
    /* Los totales del pie son cifras sin etiqueta al apilarse: fuera. */
    .rz-data-grid.rz-datatable-reflow .rz-grid-table tfoot { display: none; }
    /* Y por lo mismo el pie de cada grupo (riegos por parcela, desde el 02/10):
       un <tr> sin clase con celdas .rz-column-footer que, apilado, eran nueve
       líneas de 283 px casi vacías y la suma sin decir de qué. */
    .rz-data-grid.rz-datatable-reflow .rz-data-grid-data > table > tbody > tr:has(> td > .rz-column-footer) { display: none; }
    /* El hueco de una lista vacía (RejillaVacia, en el EmptyTemplate de 80
       pantallas): su celda heredaba de la ficha display:flex, white-space:nowrap y
       overflow:hidden, y el texto se cortaba (Variedades, 521 px de contenido en una
       celda de 287; la maquinaria vacía, 238 escondidos; 02/10). */
    .rz-data-grid.rz-datatable-reflow td.rz-datatable-emptymessage {
        display: block !important;
        width: auto !important;
        height: auto !important; /* la de escritorio fija 44 px y el hueco (330) quedaba dentro, con scroll */
        min-width: 0;
        white-space: normal !important;
        text-align: center !important;
        overflow: visible !important;
    }
    /* La cabecera de un grupo, en una línea: el botón de desplegar y el texto al
       lado. Radzen la apilaba en bloques (114 px para una línea) y el título vacío
       de la primera celda empujaba el botón fuera de su celda de 30 px: no se veía
       ni se podía tocar, y los avisos del CUE llegan plegados (fase 1, 02/10). */
    /* Sin la piel de ficha que theme-custom.css (≤767 px) pone a todo <tr>: es el
       título de la sección, encima de las fichas del grupo. */
    .rz-data-grid.rz-datatable-reflow .rz-group-row {
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 8px 0 4px;
        padding: 0 4px !important;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: none;
    }
    .rz-data-grid.rz-datatable-reflow .rz-group-row > td {
        display: block;
        width: auto !important;
        min-width: 0;
        min-height: 0;
        height: auto;
        padding: 0 !important;
        border: none !important;
        background: none !important;
        text-align: left !important;
    }
    .rz-data-grid.rz-datatable-reflow .rz-group-row > td::before { content: none; display: none; }
    .rz-data-grid.rz-datatable-reflow .rz-group-row > td.rz-col-icon { flex: 0 0 auto; }
    .rz-data-grid.rz-datatable-reflow .rz-group-row > td:not(.rz-col-icon) { flex: 1 1 auto; }
    .rz-data-grid.rz-datatable-reflow .rz-group-row > td > .rz-column-title { display: none; }
    .rz-data-grid.rz-datatable-reflow .rz-group-row .rz-cell-data {
        height: auto; /* la regla de escritorio le fija 44px y el texto quedaba arriba */
        padding: 0 !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Cada fila, una ficha (misma piel que .cdc-compra-card). El height:auto
       suelta la altura de fila de escritorio (--tf-grid-row-height), que aquí
       dejaría la tarjeta en 44px con las celdas derramándose fuera. */
    /* Flex con salto de línea y no bloque: así la botonera y el botón de
       desplegar comparten la última línea de la ficha (ver más abajo) y en
       tableta los datos se reparten en dos columnas. */
    .rz-data-grid.rz-datatable-reflow .rz-data-row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        column-gap: 8px;
        height: auto;
        margin: 0 0 10px;
        padding: 4px 14px;
        /* !important: la hoja del tema que se inyecta al arrancar raya las filas pares
           (tr:nth-child(2n) con !important); en fichas sueltas eran tarjetas grises alternas. */
        background: var(--cdc-surface-card) !important;
        border: 1px solid var(--cdc-border);
        border-radius: var(--cdc-radius-lg);
        box-shadow: var(--cdc-shadow-xs);
    }
    /* Salto de línea antes del pie (botón de desplegar y botonera, órdenes 98 y
       99): en tableta, sin él, el pie se colaba junto al último dato. */
    .rz-data-grid.rz-datatable-reflow .rz-data-row::after {
        content: "";
        order: 97;
        flex: 0 0 100%;
        height: 0;
    }
    .rz-data-grid.rz-datatable-reflow .rz-data-row.rz-state-highlight {
        border-color: var(--cdc-forest);
        box-shadow: inset 0 0 0 1px var(--cdc-forest);
    }

    /* Cada celda, una línea etiqueta+valor. position/box-shadow neutralizan
       las columnas congeladas (sticky no pinta nada útil apilado). Los
       !important de padding/borde/altura contrarrestan el traje de escritorio
       de las celdas (editorial ~2063: padding 10/14 y border:none, ambos
       !important, y height:44px que aquí recortaría los valores a dos líneas). */
    /* La etiqueta a la izquierda y el valor a su lado, envolviendo si es largo
       (fase 1.3, 02/10/2026). Antes la etiqueta iba encima del valor: unos 50 px
       por dato y un tratamiento de 645 px en un teléfono de 375. */
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td {
        display: grid;
        grid-template-columns: minmax(84px, 36%) minmax(0, 1fr);
        column-gap: 12px;
        align-items: baseline;
        flex: 1 1 100%;
        min-width: 0;
        width: 100% !important;
        height: auto;
        text-align: left !important;
        white-space: normal !important;
        border: none !important;
        border-bottom: 1px dashed var(--cdc-border) !important;
        padding: 8px 0 !important;
        /* !important: el rayado de filas de Radzen (.rz-grid-table-striped … td)
           pinta la celda con más especificidad, y dentro de una ficha es una franja gris. */
        background: none !important;
        position: static !important;
        /* !important: la columna congelada trae z-index:1 en línea. Con la fila en
           flex, el z-index de un hijo cuenta aunque sea static, y Chromium resolvía
           mal el toque: un botón de la primera ficha lo recibía la celda de acciones
           de la última (medido el 02/10 con elementsFromPoint). */
        z-index: auto !important;
        box-shadow: none;
    }
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td:last-child { border-bottom: none !important; }
    /* theme-custom.css (≤767 px) pone en cada celda un ::before con attr(data-title),
       de un intento anterior de etiquetar el modo apilado; Radzen no escribe ese
       atributo y el pseudoelemento vacío ocupaba la primera casilla de la rejilla. */
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td::before { content: none; display: none; }
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td > .rz-column-title { grid-column: 1; grid-row: 1; }
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td > .rz-cell-data { grid-column: 2; grid-row: 1; }

    /* La celda sin valor no se enseña: era una etiqueta con nada al lado (hasta 7
       de 11 en maquinaria). Radzen deja .rz-cell-data vacío del todo cuando la
       propiedad es nula; una plantilla que pinta «—» sí se ve, porque dice algo. */
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td:has(> .rz-cell-data:empty) { display: none !important; }

    /* La columna de acciones (sus botones son hijos directos de .rz-cell-data) no
       es un dato: va al pie de la ficha, sin el rótulo «ACCIONES», con botones de
       44 px a la derecha. */
    /* Base 0 y no auto: la botonera ocupa lo que deja el botón de desplegar en la
       misma línea, y sus botones se parten dentro (con seis no caben en 375 px). */
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td:has(> .rz-cell-data > .rz-button) {
        display: block;
        order: 99;
        flex: 1 1 0%;
        width: auto !important;
        border-bottom: none !important;
    }
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td:has(> .rz-cell-data > .rz-button) > .rz-column-title { display: none; }
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td > .rz-cell-data:has(> .rz-button) {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }
    /* !important: el normalizador de botones de arriba fija .rz-button-sm a 30 px con !important. */
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td > .rz-cell-data > .rz-button {
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
    }

    /* La columna que identifica el registro (CssClass="cdc-ficha-titulo" en la
       columna: la fecha de tratamientos y fertilizaciones) es el título de la
       ficha: va primera, sin etiqueta, a todo el ancho y en grande. */
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td.cdc-ficha-titulo {
        order: -1;
        flex-basis: 100% !important;
        grid-template-columns: minmax(0, 1fr);
        border-bottom: 1px solid var(--cdc-border) !important;
    }
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td.cdc-ficha-titulo > .rz-column-title { display: none; }
    /* !important: el traje de las celdas de escritorio fija tipo y tamaño con !important. */
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td.cdc-ficha-titulo > .rz-cell-data {
        grid-column: 1 / -1;
        font-family: var(--cdc-display) !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: var(--cdc-ink) !important;
    }

    /* El botón de desplegar la fila (columna .rz-col-icon) se va a la misma línea
       que la botonera, a la izquierda, y también se toca con el dedo. */
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td.rz-col-icon {
        display: flex;
        align-items: center;
        order: 98;
        flex: 0 0 auto;
        width: auto !important;
        border-bottom: none !important;
    }
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td.rz-col-icon > .rz-button {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* El valor: sin el padding de densidad de escritorio y sin truncar con
       puntos suspensivos — en una ficha el valor envuelve. También el que no
       tiene espacios: un correo largo se salía 20 px de su celda, recortado
       («Accesos», medido el 02/10). */
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td .rz-cell-data {
        display: block;
        min-width: 0;
        padding: 0 !important;
        height: auto; /* la regla de escritorio le fija 44px de celda */
        white-space: normal;
        overflow: visible;
        overflow-wrap: anywhere;
        text-overflow: clip;
    }

    /* La etiqueta: el título de la columna en overline, como los <dt> de los
       paneles de detalle. */
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td .rz-column-title {
        display: block;
        margin-bottom: 0;
        font-family: var(--cdc-mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.08em;
        line-height: 1.5;
        text-transform: uppercase;
        color: var(--cdc-bark);
        overflow-wrap: anywhere;
    }
    /* Columnas sin título (checkbox de selección, columna de acciones sin
       rótulo): sin etiqueta fantasma, y el valor ocupa la línea entera. */
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td .rz-column-title:empty { display: none; }
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td:has(> .rz-column-title:empty) > .rz-cell-data { grid-column: 1 / -1; }

    /* Un botón suelto dentro de un dato (no la botonera): que no se pegue al texto. */
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td .rz-button { margin: 2px 8px 2px 0; }

    /* Agrupar por columnas y elegir columnas son gestos de escritorio (arrastrar
       una cabecera que en ficha no existe) y su rótulo sale en inglés. */
    .rz-data-grid.rz-datatable-reflow > .rz-group-header,
    .rz-data-grid.rz-datatable-reflow .rz-column-picker { display: none; }

    /* El paginador ya envuelve (flex-wrap en .rz-pager); centrado queda mejor
       bajo las fichas que repartido a los extremos. Sus botones, de dedo: había
       rejillas con botones de 26 px. */
    .rz-data-grid.rz-datatable-reflow .rz-pager { justify-content: center; }
    .rz-data-grid.rz-datatable-reflow .rz-pager .rz-pager-element {
        min-width: 44px;
        min-height: 44px;
    }
    /* Radzen 12, por debajo de 768 px, pinta la lista del paginador (números y,
       dentro de ella, primera, anterior, siguiente y última) como una rejilla de 9
       columnas iguales. theme-custom.css deja el paginador en fila, así que la lista
       se encogía a 137 px junto al resumen: columnas de 16 px para botones de 44, y
       el último se salía 16 px de la ficha (Histórico, 02/10). La lista va en su
       propia línea, en fila, y baja de línea si no cabe. */
    .rz-data-grid.rz-datatable-reflow .rz-pager .rz-pager-pages {
        display: flex;
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: center;
        max-height: none;
    }
    .rz-data-grid.rz-datatable-reflow .rz-pager .rz-pager-pages > .rz-pager-item { flex: 0 0 auto; }
}

/* Tableta y media pantalla (600-920 px): la ficha tiene sitio para dos columnas
   de datos; con una sola quedaban fichas de 300-650 px con media pantalla vacía. */
@media (min-width: 600px) and (max-width: 920px) {
    .rz-data-grid.rz-datatable-reflow .rz-data-row { column-gap: 24px; }
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td { flex-basis: calc(50% - 12px); }
    .rz-data-grid.rz-datatable-reflow .rz-data-row > td:not(.rz-col-icon):has(> .rz-column-title:empty) { flex-basis: 100%; }
}

/* Tableta: los botones de la barra común no se encogen hasta recortar su texto
   («Generar Certificado» se quedaba en 100 px a 768, 02/10); si no caben, la barra
   baja de línea. */
@media (max-width: 920px) {
    .crud-toolbar { flex-wrap: wrap; }
    .crud-toolbar .rz-button { flex-shrink: 0; }
}

/* Teléfono (≤599 px): la tarjeta que envuelve la rejilla devuelve el ancho a las
   fichas (con 22 px de relleno la ficha se quedaba en 295 de 343 px) y la barra
   común de las maestras se apila en vez de esconder botones y buscador tras un
   desplazamiento lateral dentro de la tarjeta. */
@media (max-width: 599px) {
    .tf-card.crud-grid-wrapper { padding: 12px !important; }
    .crud-toolbar {
        flex-wrap: wrap;
        row-gap: 10px;
        column-gap: 8px;
    }
    .crud-toolbar > .crud-toolbar-count,
    .crud-toolbar > .crud-toolbar-cargando,
    .crud-toolbar > .crud-toolbar-title { flex: 1 1 100%; }
    .crud-toolbar > div {
        flex-wrap: wrap;
        max-width: 100%;
    }
    .crud-toolbar .rz-button {
        flex-shrink: 0;
        max-width: 100%;
    }
}

/* ============================================================
   HISTÓRICO PLURIANUAL (/utilidades/historico) — F2 del rediseño.
   Solo layout propio: pills, stats, gráficas y avisos son las
   primitivas cdc-* de siempre. Tokens únicamente: el dark sale
   gratis de la redefinición de [data-theme="dark"].
   ============================================================ */

/* Tira de campañas: pills de año + botón "Trabajar en..." a la derecha. */
.hist-anios {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 14px;
}
.hist-anios__spacer { flex: 1 1 auto; }
.hist-anios .cdc-pill { font-variant-numeric: tabular-nums; }

/* Totales de la campaña seleccionada (misma retícula que parcelas-stats). */
.hist-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 12px;
    margin: 4px 0 14px;
}

/* Tendencia plurianual: dos tarjetas de gráfico. */
.hist-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 6px;
}
.hist-charts__card { padding: 14px 16px 8px; }
.hist-charts__titulo {
    margin: 0 0 6px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--cdc-ink);
}
.hist-charts__titulo i { color: var(--cdc-forest); margin-right: 6px; }
@media (max-width: 992px) {
    .hist-charts { grid-template-columns: 1fr; }
}

/* Enlace a la lente económica (Comparativa) bajo las gráficas. */
.hist-comparativa-link {
    margin: 0 0 14px;
    font-size: 0.85rem;
}
.hist-comparativa-link a { color: var(--cdc-cobalt); text-decoration: none; }
.hist-comparativa-link a:hover { text-decoration: underline; }
.hist-comparativa-link i { margin-right: 4px; }

/* Avisos de carga parcial / registros sin campaña. */
.hist-aviso {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    margin: 0 0 12px;
    font-size: 0.88rem;
    color: var(--cdc-ink);
    background: var(--cdc-surface-card);
    border: 1px solid var(--cdc-border);
    border-left: 3px solid var(--cdc-cobalt);
    border-radius: 6px;
}
.hist-aviso i { color: var(--cdc-cobalt); margin-top: 2px; }
.hist-aviso--warn { border-left-color: var(--cdc-amber); }
.hist-aviso--warn i { color: var(--cdc-amber); }

/* Esqueleto de carga y contenedor del detalle. */
.hist-skel {
    display: grid;
    gap: 10px;
    margin-top: 6px;
}
.hist-detalle { padding: 10px 12px; }

/* ===========================================================================
   SECCION 101 - PANEL DE AYUDA CONTEXTUAL
   ===========================================================================
   Se compone con las primitivas ya unificadas (cdc-btn, cdc-chip) y SOLO usa
   tokens --cdc-*: el modo oscuro sale gratis por la redefinicion de tema, sin
   bloque propio y sin quedarse fuera de las listas de la seccion 99/99B.

   Lateral y sin backdrop a proposito: la ayuda se lee MIRANDO la pantalla donde
   hay que aplicarla. Arranca bajo la barra (--header-height, que es fixed) para
   que el boton que acabas de pulsar siga a la vista.
   =========================================================================== */

.cdc-ayuda {
    position: fixed;
    top: var(--header-height, 60px);
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 100vw;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    background: var(--cdc-surface-card);
    border-left: 1px solid var(--cdc-border-strong);
    box-shadow: -12px 0 32px -18px rgba(11, 17, 32, .28);
    font-size: 13px;
    animation: cdcAyudaEntra .18s ease-out;
}

@keyframes cdcAyudaEntra {
    from { transform: translateX(16px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cdc-ayuda { animation: none; }
}

/* El contenido se aparta; la barra no, porque es fixed y vive por encima. */
@media (min-width: 1180px) {
    #page-wrapper.ayuda-abierta {
        padding-right: 360px;
        transition: padding-right .18s ease-out;
    }
}

/* En estrecho el panel ocupa todo: competir por el ancho con una tabla no lo gana nadie. */
@media (max-width: 560px) {
    .cdc-ayuda { width: 100vw; border-left: 0; }
}

/* -- Cabecera ------------------------------------------------------------ */
.cdc-ayuda__head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--cdc-border);
    background: var(--cdc-surface-card-alt);
    flex: none;
}

.cdc-ayuda__ttl { font-weight: 600; font-size: 14px; color: var(--cdc-ink); }

.cdc-ayuda__ctx {
    font-family: var(--cdc-mono, ui-monospace, monospace);
    font-size: 10px;
    color: var(--cdc-cobalt-text);
    background: var(--cdc-cobalt-soft);
    border: 1px solid var(--cdc-cobalt-line);
    padding: 2px 6px;
    border-radius: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}

.cdc-ayuda__volver,
.cdc-ayuda__x {
    background: none;
    border: 0;
    color: var(--cdc-mute);
    cursor: pointer;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    border-radius: 6px;
}

.cdc-ayuda__volver { font-weight: 500; color: var(--cdc-cobalt-text); }
.cdc-ayuda__x { margin-left: auto; font-size: 15px; }

.cdc-ayuda__volver:hover,
.cdc-ayuda__x:hover { background: var(--cdc-surface-hover); color: var(--cdc-ink); }

.cdc-ayuda__volver:focus-visible,
.cdc-ayuda__x:focus-visible,
.cdc-ayuda__a:focus-visible { outline: 2px solid var(--cdc-cobalt); outline-offset: 2px; }

/* -- Cuerpo -------------------------------------------------------------- */
.cdc-ayuda__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 13px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cdc-ayuda__lbl {
    font-size: 10px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cdc-mute);
    font-weight: 600;
    margin: 2px 0 -4px;
}

/* -- Buscador ------------------------------------------------------------ */
.cdc-ayuda__find {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid var(--cdc-border-strong);
    border-radius: 8px;
    background: var(--cdc-surface-well);
    color: var(--cdc-mute-2);
    flex: none;
}

.cdc-ayuda__find.is-active {
    border-color: var(--cdc-forest);
    background: var(--cdc-surface-card);
    box-shadow: 0 0 0 3px var(--cdc-forest-soft);
}

.cdc-ayuda__find input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    outline: none;
    font: inherit;
    font-size: 12.5px;
    color: var(--cdc-ink);
}

.cdc-ayuda__find input::placeholder { color: var(--cdc-mute-2); }

/* -- Guia interactiva ---------------------------------------------------- */
.cdc-ayuda__tour {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--cdc-forest-line);
    background: var(--cdc-forest-soft);
    border-radius: 9px;
}

.cdc-ayuda__tour > div:first-child { flex: 1; min-width: 0; }
.cdc-ayuda__tour-t { font-size: 12.5px; font-weight: 600; color: var(--cdc-forest-text); line-height: 1.3; }
.cdc-ayuda__tour-s { font-size: 11px; color: var(--cdc-bark); }

/* -- Lista de articulos -------------------------------------------------- */
.cdc-ayuda__arts { display: flex; flex-direction: column; gap: 7px; }

.cdc-ayuda__a {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--cdc-border);
    border-radius: 9px;
    padding: 10px 12px;
    background: var(--cdc-surface-card);
    cursor: pointer;
    font: inherit;
}

.cdc-ayuda__a:hover { border-color: var(--cdc-border-strong); background: var(--cdc-surface-card-alt); }
.cdc-ayuda__a-t { font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--cdc-ink); }
.cdc-ayuda__a-s { font-size: 11.5px; color: var(--cdc-mute); line-height: 1.45; }
.cdc-ayuda__a-m { display: flex; gap: 6px; align-items: center; margin-top: 3px; flex-wrap: wrap; }

/* -- Sin articulo -------------------------------------------------------- */
.cdc-ayuda__void {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    border: 1px dashed var(--cdc-amber-line);
    background: var(--cdc-amber-soft);
    border-radius: 9px;
    padding: 13px;
}

.cdc-ayuda__void-t { font-weight: 600; font-size: 12.5px; color: var(--cdc-amber-text); }
.cdc-ayuda__void-s { font-size: 11.5px; color: var(--cdc-bark); line-height: 1.5; }

.cdc-ayuda__void-in {
    width: 100%;
    border: 1px solid var(--cdc-border-strong);
    border-radius: 7px;
    background: var(--cdc-surface-card);
    padding: 8px 10px;
    font: inherit;
    font-size: 11.5px;
    color: var(--cdc-ink);
}

.cdc-ayuda__void-in:focus { outline: 2px solid var(--cdc-cobalt); outline-offset: 1px; }
.cdc-ayuda__void-btn { width: 100%; }

/* -- Articulo abierto ---------------------------------------------------- */
.cdc-ayuda__doc { display: flex; flex-direction: column; gap: 9px; color: var(--cdc-ink-2); }

.cdc-ayuda__doc h2 {
    font-family: var(--cdc-display, Georgia, serif);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0;
    color: var(--cdc-ink);
    text-wrap: balance;
}

.cdc-ayuda__doc h3 {
    font-size: 10px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cdc-mute);
    font-weight: 600;
    margin: 6px 0 -2px;
}

.cdc-ayuda__doc h4 { font-size: 12.5px; font-weight: 600; color: var(--cdc-ink); margin: 4px 0 -2px; }
.cdc-ayuda__doc p { margin: 0; font-size: 12.5px; line-height: 1.62; }
.cdc-ayuda__doc strong { color: var(--cdc-ink); font-weight: 600; }
.cdc-ayuda__doc ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.cdc-ayuda__doc li { font-size: 12.5px; line-height: 1.55; }

.cdc-ayuda__doc code {
    font-family: var(--cdc-mono, ui-monospace, monospace);
    font-size: 11px;
    background: var(--cdc-surface-well);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--cdc-ink);
}

.cdc-ayuda__doc table { width: 100%; border-collapse: collapse; font-size: 11.5px; }

.cdc-ayuda__doc th {
    text-align: left;
    padding: 5px 8px 5px 0;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cdc-mute);
    border-bottom: 1px solid var(--cdc-border-strong);
    font-weight: 600;
}

.cdc-ayuda__doc td {
    padding: 6px 8px 6px 0;
    border-bottom: 1px solid var(--cdc-border-subtle);
    vertical-align: top;
    line-height: 1.45;
}

.cdc-ayuda__doc td:last-child,
.cdc-ayuda__doc th:last-child { padding-right: 0; }

.cdc-ayuda__doc blockquote {
    margin: 2px 0;
    border-left: 2px solid var(--cdc-wheat);
    padding: 6px 0 6px 11px;
    font-size: 11.5px;
    color: var(--cdc-bark);
    line-height: 1.55;
}

.cdc-ayuda__normas {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--cdc-amber-text);
    background: var(--cdc-amber-soft);
    border: 1px solid var(--cdc-amber-line);
    border-radius: 7px;
    padding: 6px 10px;
    margin: 2px 0 0;
}

/* -- Pie ----------------------------------------------------------------- */
.cdc-ayuda__foot {
    flex: none;
    border-top: 1px solid var(--cdc-border);
    padding: 11px 14px;
    background: var(--cdc-surface-card-alt);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cdc-ayuda__vote { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--cdc-bark); }
.cdc-ayuda__gracias { font-size: 12px; color: var(--cdc-forest-text); font-weight: 500; }
.cdc-ayuda__escalar { width: 100%; }

.cdc-ayuda__stamp {
    font-size: 10.5px;
    color: var(--cdc-mute-2);
    font-family: var(--cdc-mono, ui-monospace, monospace);
}

/* Listas numeradas dentro de un articulo: mismo ritmo que las de puntos, pero con el
   ordinal fuera del texto para que las lineas largas sangren contra el, no contra el borde. */
.cdc-ayuda__doc ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cdc-ayuda__doc ol li {
  font-size: 13px;
  line-height: 1.62;
  color: var(--cdc-ink-2);
  padding-left: 2px;
}

.cdc-ayuda__doc ol li::marker {
  color: var(--cdc-mute);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Salida al centro de ayuda. Discreta y al final: es la puerta de quien no ha
   encontrado lo suyo aqui, no la accion principal del panel. */
.cdc-ayuda__centro {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  padding: 10px 12px;
  background: var(--cdc-surface-well);
  border: 1px solid var(--cdc-border-subtle);
  border-radius: var(--cdc-radius-md);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cdc-ink-2);
  cursor: pointer;
  transition: border-color var(--cdc-dur-fast) var(--cdc-ease-out),
              color var(--cdc-dur-fast) var(--cdc-ease-out);
}

.cdc-ayuda__centro:hover { border-color: var(--cdc-forest); color: var(--cdc-forest-text); }
.cdc-ayuda__centro span { flex: 1 1 auto; text-align: left; }
.cdc-ayuda__centro-f { font-size: 10px; }

/* ===========================================================================
   SECCION 102 - CENTRO DE AYUDA (/ayuda)
   ===========================================================================
   Hermana de la 101, no una copia: el panel contesta «que hago AQUI» en 360px
   y esta pagina contesta «donde se hace X» a pantalla completa.

   El cuerpo del articulo REUTILIZA .cdc-ayuda__doc de la 101 (el elemento lleva
   las dos clases) y aqui solo se sube la escala tipografica. Duplicar las reglas
   de tabla, cita y codigo habria creado dos verdades que se separan a la primera
   correccion.

   Solo tokens --cdc-*: el modo oscuro sale gratis por la redefinicion de tema.
   =========================================================================== */

.cdc-ayudac {
  display: flex;
  flex-direction: column;
  gap: var(--cdc-space-xl);
  max-width: 1100px;
}

/* --- buscador ------------------------------------------------------------- */

/* Lo primero de la pagina, y grande a proposito: quien llega aqui ya ha probado
   el panel contextual y sigue sin encontrarlo. El indice va debajo. */
.cdc-ayudac__find {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 56px;
  background: var(--cdc-surface-card);
  border: 1px solid var(--cdc-border);
  border-radius: var(--cdc-radius-lg);
  box-shadow: var(--cdc-shadow-sm);
  transition: border-color var(--cdc-dur-fast) var(--cdc-ease-out),
              box-shadow var(--cdc-dur-fast) var(--cdc-ease-out);
}

.cdc-ayudac__find.is-active,
.cdc-ayudac__find:focus-within {
  border-color: var(--cdc-forest);
  box-shadow: var(--cdc-ring-forest);
}

.cdc-ayudac__find > i {
  color: var(--cdc-mute);
  font-size: 16px;
  flex: none;
}

.cdc-ayudac__find input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--cdc-sans);
  font-size: 15px;
  color: var(--cdc-ink);
}

.cdc-ayudac__find input::placeholder {
  color: var(--cdc-mute-2);
  font-size: 14px;
}

.cdc-ayudac__find input::-webkit-search-cancel-button { display: none; }

.cdc-ayudac__find-x {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--cdc-radius-sm);
  background: none;
  color: var(--cdc-mute);
  cursor: pointer;
}

.cdc-ayudac__find-x:hover { background: var(--cdc-surface-hover); color: var(--cdc-ink); }

/* --- secciones ------------------------------------------------------------ */

.cdc-ayudac__sec {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cdc-ayudac__lbl {
  margin: 0;
  font-family: var(--cdc-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cdc-mute);
}

.cdc-ayudac__sub {
  margin: -6px 0 0;
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--cdc-ink-2);
}

.cdc-ayudac__sub strong { color: var(--cdc-ink); font-weight: 600; }

/* --- primeros pasos ------------------------------------------------------- */

/* Van numerados porque SON una secuencia: el orden es la mitad del consejo.
   Numerar tarjetas que no llevan orden es decoracion; esto no lo es. */
.cdc-ayudac__pasos {
  list-style: none;
  counter-reset: paso;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cdc-ayudac__pasos li {
  counter-increment: paso;
  display: flex;
  align-items: stretch;
  gap: 14px;
}

.cdc-ayudac__pasos li::before {
  content: counter(paso);
  flex: none;
  width: 34px;
  display: grid;
  place-items: center;
  font-family: var(--cdc-display);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cdc-forest-text);
  background: var(--cdc-forest-soft);
  border: 1px solid var(--cdc-forest-line);
  border-radius: var(--cdc-radius-md);
}

.cdc-ayudac__paso {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px;
  text-align: left;
  background: var(--cdc-surface-card);
  border: 1px solid var(--cdc-border-subtle);
  border-radius: var(--cdc-radius-md);
  cursor: pointer;
  transition: border-color var(--cdc-dur-fast) var(--cdc-ease-out),
              background var(--cdc-dur-fast) var(--cdc-ease-out);
}

.cdc-ayudac__paso:hover {
  background: var(--cdc-surface-hover);
  border-color: var(--cdc-border-strong);
}

.cdc-ayudac__paso-t { font-size: 14px; font-weight: 600; color: var(--cdc-ink); }
.cdc-ayudac__paso-s { font-size: 12.5px; line-height: 1.5; color: var(--cdc-ink-2); }

/* --- modulos -------------------------------------------------------------- */

.cdc-ayudac__modulos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}

.cdc-ayudac__mod {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  text-align: left;
  background: var(--cdc-surface-card);
  border: 1px solid var(--cdc-border-subtle);
  border-radius: var(--cdc-radius-md);
  cursor: pointer;
  transition: border-color var(--cdc-dur-fast) var(--cdc-ease-out),
              background var(--cdc-dur-fast) var(--cdc-ease-out);
}

.cdc-ayudac__mod:hover {
  background: var(--cdc-surface-hover);
  border-color: var(--cdc-border-strong);
}

.cdc-ayudac__mod-i {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--cdc-radius-sm);
  background: var(--cdc-surface-well);
  color: var(--cdc-mute);
  font-size: 13px;
}

.cdc-ayudac__mod:hover .cdc-ayudac__mod-i { color: var(--cdc-forest-text); }

.cdc-ayudac__mod-t {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cdc-ink);
}

.cdc-ayudac__mod-n {
  flex: none;
  font-family: var(--cdc-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--cdc-mute);
}

/* --- listas de articulos -------------------------------------------------- */

.cdc-ayudac__arts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 8px;
}

.cdc-ayudac__art {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 15px;
  text-align: left;
  background: var(--cdc-surface-card);
  border: 1px solid var(--cdc-border-subtle);
  border-radius: var(--cdc-radius-md);
  cursor: pointer;
  transition: border-color var(--cdc-dur-fast) var(--cdc-ease-out),
              background var(--cdc-dur-fast) var(--cdc-ease-out);
}

.cdc-ayudac__art:hover {
  background: var(--cdc-surface-hover);
  border-color: var(--cdc-border-strong);
}

.cdc-ayudac__art-t { font-size: 14px; font-weight: 600; color: var(--cdc-ink); }
.cdc-ayudac__art-s { font-size: 12.5px; line-height: 1.55; color: var(--cdc-ink-2); }
.cdc-ayudac__art-m { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }

/* --- migas ---------------------------------------------------------------- */

.cdc-ayudac__migas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--cdc-mute);
}

.cdc-ayudac__migas i { font-size: 9px; }

.cdc-ayudac__migas button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--cdc-forest-text);
  cursor: pointer;
}

.cdc-ayudac__migas button:hover { text-decoration: underline; }
.cdc-ayudac__migas > span { color: var(--cdc-ink); font-weight: 600; }

/* --- lectura del articulo ------------------------------------------------- */

/* La columna de texto manda el ancho, y el aparte se pega a ella. Con 1fr, el texto se
   quedaba en su medida de 68 caracteres y el aparte se iba al borde: 300px de hueco muerto
   en medio que parece un fallo de maquetacion. */
.cdc-ayudac__lectura {
  display: grid;
  grid-template-columns: minmax(0, 68ch) minmax(0, 250px);
  gap: var(--cdc-space-xl);
  align-items: start;
}

@media (max-width: 1000px) {
  .cdc-ayudac__lectura { grid-template-columns: minmax(0, 1fr); }
}

/* Sube la escala de la 101, que esta calibrada para 360px de panel. Todo lo demas
   —tablas, citas, codigo, listas— lo sigue poniendo .cdc-ayuda__doc. */
.cdc-ayudac__doc {
  gap: 13px;
}

.cdc-ayudac__doc h2 { font-size: 25px; line-height: 1.2; }
.cdc-ayudac__doc h3 { font-size: 15.5px; margin-top: 10px; }
.cdc-ayudac__doc h4 { font-size: 14px; }
.cdc-ayudac__doc p,
.cdc-ayudac__doc li { font-size: 14.5px; line-height: 1.68; }
.cdc-ayudac__doc table { font-size: 13px; }
.cdc-ayudac__doc ul { padding-left: 22px; gap: 6px; }
.cdc-ayudac__doc ol { padding-left: 24px; gap: 7px; }
.cdc-ayudac__doc ol li { font-size: 14.5px; line-height: 1.68; }

.cdc-ayudac__doc-lede {
  margin: -4px 0 4px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cdc-mute);
  font-style: italic;
}

/* --- aparte del articulo -------------------------------------------------- */

.cdc-ayudac__aparte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 16px;
}

@media (max-width: 1000px) {
  .cdc-ayudac__aparte { position: static; }
}

.cdc-ayudac__ficha,
.cdc-ayudac__voto {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 15px;
  background: var(--cdc-surface-card-alt);
  border: 1px solid var(--cdc-border-subtle);
  border-radius: var(--cdc-radius-md);
}

.cdc-ayudac__ficha-lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cdc-mute-2);
}

.cdc-ayudac__ficha-lbl + * { margin-top: -3px; }
.cdc-ayudac__ficha > .cdc-chip { align-self: flex-start; cursor: pointer; }
.cdc-ayudac__ficha-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cdc-ayudac__ficha-rutas { display: flex; flex-direction: column; gap: 3px; }

.cdc-ayudac__ruta {
  font-family: var(--cdc-mono);
  font-size: 11px;
  color: var(--cdc-ink-2);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.cdc-ayudac__ruta:hover { color: var(--cdc-forest-text); text-decoration: underline; }
.cdc-ayudac__ruta--dlg { color: var(--cdc-mute); cursor: default; }
.cdc-ayudac__ruta--dlg:hover { color: var(--cdc-mute); text-decoration: none; }

.cdc-ayudac__stamp {
  margin-top: 3px;
  font-family: var(--cdc-mono);
  font-size: 10.5px;
  color: var(--cdc-mute-2);
}

.cdc-ayudac__voto { font-size: 12.5px; color: var(--cdc-ink-2); }
.cdc-ayudac__voto-btns { display: flex; gap: 6px; }
.cdc-ayudac__voto-btns .cdc-btn { flex: 1 1 auto; }

.cdc-ayudac__voto-in {
  width: 100%;
  padding: 7px 10px;
  font-family: var(--cdc-sans);
  font-size: 12.5px;
  color: var(--cdc-ink);
  background: var(--cdc-surface-card);
  border: 1px solid var(--cdc-border);
  border-radius: var(--cdc-radius-sm);
  outline: none;
}

.cdc-ayudac__voto-in:focus { border-color: var(--cdc-forest); box-shadow: var(--cdc-ring-input-forest); }
.cdc-ayudac__gracias { color: var(--cdc-forest-text); font-weight: 600; }

/* --- nada encontrado ------------------------------------------------------ */

/* Una caja de texto ensena que alguien escucha; un «sin resultados» a secas
   ensena lo mismo que el boton gris que este trabajo vino a quitar. */
.cdc-ayudac__void {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 20px 22px;
  background: var(--cdc-surface-well);
  border: 1px dashed var(--cdc-border-strong);
  border-radius: var(--cdc-radius-lg);
}

.cdc-ayudac__void > i { font-size: 17px; color: var(--cdc-mute); margin-bottom: 2px; }
.cdc-ayudac__void-t { font-family: var(--cdc-display); font-size: 16px; font-weight: 600; color: var(--cdc-ink); }
.cdc-ayudac__void-s { max-width: 62ch; font-size: 13px; line-height: 1.6; color: var(--cdc-ink-2); }

.cdc-ayudac__void-row {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 520px;
  margin-top: 5px;
}

.cdc-ayudac__void-in {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  font-family: var(--cdc-sans);
  font-size: 13.5px;
  color: var(--cdc-ink);
  background: var(--cdc-surface-card);
  border: 1px solid var(--cdc-border);
  border-radius: var(--cdc-radius-sm);
  outline: none;
}

.cdc-ayudac__void-in:focus { border-color: var(--cdc-forest); box-shadow: var(--cdc-ring-input-forest); }

/* --- lo que falta por escribir -------------------------------------------- */

.cdc-ayudac__faltan {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cdc-ayudac__faltan li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--cdc-surface-card);
  border: 1px solid var(--cdc-border-subtle);
  border-left: 3px solid var(--cdc-border);
  border-radius: var(--cdc-radius-sm);
}

/* Lo que el usuario tecleo pesa mas que una busqueda vacia, y se ve. */
.cdc-ayudac__faltan li.is-escrita {
  border-left-color: var(--cdc-forest);
  background: var(--cdc-forest-soft);
}

.cdc-ayudac__falta-t {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  color: var(--cdc-ink);
  overflow-wrap: anywhere;
}

.cdc-ayudac__falta-m { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; flex: none; }
.cdc-ayudac__falta-r { font-family: var(--cdc-mono); font-size: 10.5px; color: var(--cdc-mute-2); }

.cdc-ayudac__falta-x {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--cdc-radius-sm);
  background: none;
  color: var(--cdc-mute-2);
  cursor: pointer;
}

.cdc-ayudac__falta-x:hover { background: var(--cdc-surface-hover); color: var(--cdc-ink); }

.cdc-ayudac__sec > .cdc-btn--ghost { align-self: flex-start; }

/* ===========================================================================
   SECCION 103 - PISTAS DE CAMPO
   ===========================================================================
   El interrogante al lado de una etiqueta, y el globo con lo que explica.

   EL INTERROGANTE ES UN ::after, NO UN ELEMENTO. Es lo que permite que la ayuda
   por campo no toque el arbol que Blazor renderiza: JS solo pone el atributo
   data-pista sobre la etiqueta que ya existe, y todo lo visible lo dibuja CSS.
   Meter un <span> ahi dentro es como se tumba un circuito (ver el incidente del
   mapa, «removeChild of null»).
   =========================================================================== */

[data-pista] {
  position: relative;
  cursor: help;
}

[data-pista]::after {
  content: "?";
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  margin-left: 5px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--cdc-surface-well);
  border: 1px solid var(--cdc-border);
  color: var(--cdc-mute);
  font-family: var(--cdc-sans);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  transition: background var(--cdc-dur-fast) var(--cdc-ease-out),
              color var(--cdc-dur-fast) var(--cdc-ease-out),
              border-color var(--cdc-dur-fast) var(--cdc-ease-out);
}

[data-pista]:hover::after,
[data-pista]:focus-within::after {
  background: var(--cdc-forest-soft);
  border-color: var(--cdc-forest-line);
  color: var(--cdc-forest-text);
}

/* En la cabecera de una rejilla el sitio es escaso: el interrogante se pega mas. */
.rz-column-title[data-pista]::after {
  width: 12px;
  height: 12px;
  margin-left: 3px;
  font-size: 8px;
}

/* En movil la rejilla se convierte en fichas: se oculta la cabecera y cada fila repite el
   rotulo de cada columna. Sin esto saldrian 23 interrogantes para la misma columna, uno por
   fila. Se deja SOLO el de la primera ficha: una vez por columna, que es lo que hace falta.
   El atributo se queda en todas —el title nativo sigue ahi— pero el simbolo no se repite. */
.rz-data-grid tbody .rz-column-title[data-pista]::after,
.rz-grid-table tbody .rz-column-title[data-pista]::after {
  display: none;
}

.rz-data-grid tbody tr:first-child .rz-column-title[data-pista]::after,
.rz-grid-table tbody tr:first-child .rz-column-title[data-pista]::after {
  display: inline-grid;
}

/* El globo. Uno solo para toda la aplicacion, colgado del final de <body>. */
.cdc-pista-globo {
  position: fixed;
  z-index: 3000;
  max-width: 300px;
  padding: 9px 12px;
  background: var(--cdc-surface-card);
  border: 1px solid var(--cdc-border-strong);
  border-radius: var(--cdc-radius-md);
  box-shadow: var(--cdc-shadow-lg);
  font-family: var(--cdc-sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--cdc-ink-2);
  pointer-events: none;
}

/* Sin animacion para quien la ha desactivado; y el globo nunca se anima al moverse,
   solo al aparecer, para que no persiga al raton por la pantalla. */
@media (prefers-reduced-motion: no-preference) {
  .cdc-pista-globo:not([hidden]) {
    animation: cdc-pista-entra var(--cdc-dur-fast) var(--cdc-ease-out);
  }
}

@keyframes cdc-pista-entra {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

/* Al imprimir el cuaderno no pintamos interrogantes de ayuda. */
@media print {
  [data-pista]::after { display: none; }
  .cdc-pista-globo { display: none; }
}

/* ===========================================================================
   SECCION 104 - HUECO DE LISTA VACIA
   ===========================================================================
   Lo que sale cuando una rejilla no tiene filas y la culpa NO es de la
   explotacion ni del ejercicio (ese caso lo cubre .cdc-empty-state).

   Medido el 2026-09-06: 161 de las 173 rejillas del cuaderno decian «Sin
   registros que mostrar», que no contesta ninguna de las tres cosas que un
   hueco tiene que contestar — que va aqui, para que sirve y cual es el boton
   que lo llena.
   =========================================================================== */

.cdc-rvacia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 34px 24px;
  text-align: center;
}

.cdc-rvacia__icono {
  font-size: 26px;
  color: var(--cdc-mute-2);
  margin-bottom: 3px;
}

.cdc-rvacia__titulo {
  font-family: var(--cdc-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--cdc-ink);
}

.cdc-rvacia__texto {
  max-width: 56ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--cdc-ink-2);
}

.cdc-rvacia__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 9px;
}

/* ===========================================================================
   SECCION 105 - POR DONDE SE EMPIEZA
   ===========================================================================
   La lista de arranque del centro de ayuda. Lo hecho se COMPRUEBA en los datos,
   asi que la barra dice la verdad: una casilla que el usuario se marca a si
   mismo fabrica un progreso que no significa nada.
   =========================================================================== */

.cdc-arranque {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  background: var(--cdc-forest-soft);
  border: 1px solid var(--cdc-forest-line);
  border-radius: var(--cdc-radius-lg);
}

.cdc-arranque__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.cdc-arranque__titulo {
  margin: 0;
  font-family: var(--cdc-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--cdc-ink);
}

.cdc-arranque__sub {
  margin: 3px 0 0;
  max-width: 62ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--cdc-ink-2);
}

.cdc-arranque__marcador {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  min-width: 108px;
}

.cdc-arranque__marcador-n {
  font-family: var(--cdc-display);
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cdc-forest-text);
}

.cdc-arranque__marcador-n span {
  font-size: 13px;
  font-weight: 600;
  color: var(--cdc-mute);
}

.cdc-arranque__barra {
  width: 108px;
  height: 5px;
  border-radius: var(--cdc-radius-pill);
  background: var(--cdc-surface-card);
  overflow: hidden;
}

.cdc-arranque__barra-in {
  height: 100%;
  border-radius: var(--cdc-radius-pill);
  background: var(--cdc-forest);
  transition: width var(--cdc-dur-base) var(--cdc-ease-out);
}

.cdc-arranque__pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cdc-arranque__pasos li {
  display: flex;
  align-items: stretch;
  gap: 11px;
}

.cdc-arranque__marca {
  flex: none;
  width: 22px;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--cdc-mute-2);
}

.cdc-arranque__pasos li.is-hecho .cdc-arranque__marca { color: var(--cdc-forest-text); }

.cdc-arranque__paso {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 13px;
  text-align: left;
  background: var(--cdc-surface-card);
  border: 1px solid var(--cdc-border-subtle);
  border-radius: var(--cdc-radius-md);
  cursor: pointer;
  transition: border-color var(--cdc-dur-fast) var(--cdc-ease-out);
}

.cdc-arranque__paso:hover { border-color: var(--cdc-forest); }

.cdc-arranque__paso-t { font-size: 13.5px; font-weight: 600; color: var(--cdc-ink); }
.cdc-arranque__paso-s { font-size: 12px; line-height: 1.5; color: var(--cdc-ink-2); }

/* Lo hecho se aparta sin desaparecer: sigue siendo el sitio al que volver. */
.cdc-arranque__pasos li.is-hecho .cdc-arranque__paso-t {
  color: var(--cdc-mute);
  text-decoration: line-through;
  text-decoration-color: var(--cdc-border-strong);
}

.cdc-arranque__pasos li.is-hecho .cdc-arranque__paso-s { color: var(--cdc-mute-2); }

.cdc-rvacia__pista {
  max-width: 56ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cdc-mute);
}

/* ===========================================================================
   SECCION 106 - LINEA DE TRATAMIENTO: ALBARANES Y APLICACIONES/ANO
   ===========================================================================
   Dos avisos de la linea de producto de un tratamiento. Van aqui, en la hoja
   global, y NO en un .razor.css: el icono lo pinta SelectorParcelasTratadas y
   el aviso TratamientoDetalle, y una regla con ambito de otro componente no
   los alcanza -es como los iconos de la columna de informacion se quedaron en
   negro dos veces-.

   Solo tokens --cdc-*: un color literal aqui es una pantalla que se ve mal en
   modo oscuro y que nadie mira hasta que se queja alguien.
   =========================================================================== */

/* Paginador del listado de albaranes. Al ofrecer tambien las compras de
   campanas anteriores el listado puede crecer mucho, y sin paginar tapaba la
   zona de dosis que viene justo debajo dentro del mismo dialogo. */
.linea-docs__paginas {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 4px;
  font-size: 13px;
  color: var(--cdc-ink-2);
}

.linea-docs__paginas small {
  color: var(--cdc-mute-2);
}

/* Parcela que ya ha agotado las aplicaciones al ano que el registro autoriza. */
.cdc-selparc__tope {
  color: var(--cdc-danger);
  margin-right: 5px;
  cursor: help;
}

/* Aviso de aplicaciones/ano superadas, encima del listado de lineas. */
.tf-aplicaciones-aviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 14px;
  margin-top: 8px;
  border: 1px solid var(--cdc-amber-line);
  border-radius: var(--cdc-ag-radius-sm);
  background: var(--cdc-amber-soft);
  font-size: 13px;
  color: var(--cdc-ink);
}

.tf-aplicaciones-aviso > i {
  color: var(--cdc-amber-text);
  margin-top: 2px;
}

.tf-aplicaciones-aviso__lista {
  margin: 6px 0 6px 18px;
  padding: 0;
}

.tf-aplicaciones-aviso small {
  color: var(--cdc-ink-2);
}

/* De quien sale una dosis, en las dos listas de la zona de dosis del tratamiento. Van GLOBALES:
   la receta tiene sus equivalentes en su propio .razor.css y reutilizar alli esos nombres desde
   otro componente deja los iconos en negro -el atributo de ambito solo se estampa donde se
   declara la regla-. */
.cdc-origen--mapa { color: var(--cdc-cobalt-text); }
.cdc-origen--cliente { color: var(--cdc-mute-2); }

/* Dosis configurada a la que le falta una de sus tres claves (registro, cultivo, plaga). No se
   ofrece al anotar un tratamiento, y aqui se marca porque esta es la unica pantalla donde se
   puede arreglar o retirar. */
.cdc-dosis-incompleta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--cdc-amber-text);
  cursor: help;
}

/* ===========================================================================
   HISTORIAL METEOROLÓGICO (/meteorologia/historial) · rediseño 2026-09-06
   Solo tokens --cdc-*: el modo oscuro sale de la redefinición de tokens, sin
   bloque propio. Primitivas reutilizadas: cdc-heading, cdc-stat, cdc-pill,
   cdc-chip, cdc-btn, cdc-empty. Aquí solo la disposición y el calendario.
   =========================================================================== */

.cdc-meteo__filtros { margin-bottom: 1.25rem; }
.cdc-meteo__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  align-items: flex-end;
}
.cdc-meteo__fila + .cdc-meteo__fila { margin-top: 0.9rem; }
.cdc-meteo__campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cdc-meteo__campo--parcela { flex: 1 1 320px; max-width: 720px; }

/* El desplegable y el boton del mapa son dos formas de lo mismo -elegir parcela-, asi que
   comparten linea: el que sabe la referencia SIGPAC la teclea y el que reconoce su campo por
   el dibujo abre el mapa. */
.cdc-meteo__parcela-control { display: flex; align-items: center; gap: 8px; }
.cdc-meteo__parcela-control .rz-dropdown { flex: 1 1 auto; min-width: 0; }
.cdc-meteo__mapa-btn { flex: 0 0 auto; white-space: nowrap; }
.cdc-meteo__mapa-btn[aria-pressed="true"] { background: var(--cdc-ink); color: var(--cdc-surface-card); border-color: var(--cdc-ink); }

/* Aqui el mapa es un selector, no la pantalla: con el alto de pagina (68vh) empujaba el
   resultado fuera de la vista cada vez que se pulsaba un recinto. */
.cdc-meteo-mapa .cdc-map-lienzo--pagina { height: clamp(320px, 44vh, 560px); }
.cdc-meteo__campo--fecha { flex: 0 1 170px; }
.cdc-meteo__campo--accion { flex: 0 0 auto; }
.cdc-meteo__periodo { display: flex; flex-wrap: wrap; gap: 4px; }
.cdc-meteo__periodo .cdc-pill { border: 1px solid var(--cdc-border); }
.cdc-meteo__periodo .cdc-pill.is-active { border-color: transparent; }
.cdc-meteo__periodo .cdc-pill:disabled { opacity: 0.5; cursor: not-allowed; }

.cdc-meteo__nota {
  font-family: var(--cdc-sans);
  font-size: 0.78rem;
  color: var(--cdc-mute);
  line-height: 1.5;
}
.cdc-meteo__nota--aviso { color: var(--cdc-ochre); margin: 0 0 0.75rem; }
.cdc-meteo__aviso {
  margin: 0.9rem 0 0;
  font-family: var(--cdc-sans);
  font-size: 0.82rem;
  color: var(--cdc-mute);
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.cdc-meteo__aviso--error { color: var(--cdc-danger); font-weight: 500; }

.cdc-meteo__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 1.25rem;
}
/* Medido a 1440: con seis en fila cada tarjeta se queda en 176 px y cuatro de las seis
   parten la etiqueta ("Viento > 25 km/h: no pulverizar" en tres lineas). El ancho al que
   ninguna parte es 260 px, que en el contenido de 1114 px de un portatil son tres
   columnas; las seis en fila solo caben a partir de ~1950 px de ventana. */
@media (min-width: 1140px) { .cdc-meteo__kpis { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1950px) { .cdc-meteo__kpis { grid-template-columns: repeat(6, 1fr); } }
.cdc-meteo__kpis .cdc-stat__value { font-size: 1.5rem; }
.cdc-meteo__kpis .cdc-stat__delta { color: var(--cdc-mute); font-weight: 500; }

.cdc-meteo__graficas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.cdc-meteo__bloque { margin-bottom: 1.25rem; }
.cdc-meteo__titulo {
  margin: 0 0 0.75rem;
  font-family: var(--cdc-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--cdc-ink);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.cdc-meteo__titulo i { color: var(--cdc-forest); font-size: 0.9em; }
.cdc-meteo__titulo-nota { font-family: var(--cdc-sans); font-size: 0.75rem; font-weight: 400; color: var(--cdc-mute); }
.cdc-meteo__cabecera-tabla {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.cdc-meteo__cabecera-tabla .cdc-meteo__titulo { margin: 0; }
.cdc-meteo__fuente {
  margin: 0.9rem 0 0;
  font-family: var(--cdc-sans);
  font-size: 0.78rem;
  color: var(--cdc-mute);
  line-height: 1.5;
}
.cdc-meteo__fuente i { margin-right: 4px; }
.cdc-meteo__vacio {
  margin: 0;
  font-family: var(--cdc-sans);
  font-size: 0.9rem;
  color: var(--cdc-bark);
}
.cdc-meteo__antes { margin-top: 1.25rem; }

/* Calendario: una celda por día, coloreada por la incidencia dominante. */
.cdc-meteo-cal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.cdc-meteo-cal__mes {
  font-family: var(--cdc-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--cdc-bark);
  margin: 0 4px 0 8px;
  flex-basis: 100%;
}
.cdc-meteo-cal__mes:first-child { margin-left: 0; }
.cdc-meteo-cal__dia,
.cdc-meteo-cal__muestra {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: default;
}
/* Los dias crecen hasta llenar la fila -en escritorio treinta cuadros de 16 px ocupaban
   menos de la mitad de la tarjeta- con tope de 30 px, que es lo que deja caber un mes de
   31 dias en una sola fila del contenido de 1440. Al envolver en movil vuelven a 16. */
.cdc-meteo-cal__dia { flex: 1 1 16px; max-width: 30px; height: auto; aspect-ratio: 1; }
.cdc-meteo-cal__dia--normal       { background: var(--cdc-border); }
.cdc-meteo-cal__dia--sindato      { background: transparent; border: 1px dashed var(--cdc-border-strong); }
.cdc-meteo-cal__dia--helada       { background: var(--cdc-cobalt-deep); }
.cdc-meteo-cal__dia--viento       { background: var(--cdc-danger); }
.cdc-meteo-cal__dia--calor        { background: var(--cdc-ochre); }
.cdc-meteo-cal__dia--lluviafuerte { background: var(--cdc-cobalt-soft); border-color: var(--cdc-cobalt); }
.cdc-meteo-cal__dia--con-actividad::after {
  content: "";
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: var(--cdc-surface-card);
  box-shadow: inset 0 0 0 2px var(--cdc-ink);
}
.cdc-meteo-cal__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 0.9rem;
  font-family: var(--cdc-sans);
  font-size: 0.75rem;
  color: var(--cdc-bark);
}
.cdc-meteo-cal__leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cdc-meteo-cal__muestra { width: 12px; height: 12px; border-radius: 3px; }
.cdc-meteo-cal__muestra.cdc-meteo-cal__dia--con-actividad::after { inset: 2px; }

/* theme-custom.css repite el padding de la celda DENTRO de .rz-column-title, asi que la
   caja del texto se queda en 8-20 px y el titulo sale recortado ("T. min." como "T.")
   aunque la tabla tenga sitio de sobra. Se anula el horizontal solo en esta tabla: el
   alto de 40 px lo sigue fijando la regla global de cabeceras. */
.cdc-meteo-tabla thead .rz-column-title { padding-left: 0 !important; padding-right: 0 !important; }

/* Actividades del cuaderno en el periodo, con su lectura meteorológica. */
.cdc-meteo-act {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.cdc-meteo-act__item {
  display: grid;
  grid-template-columns: 90px 28px minmax(0, 1fr) auto auto;
  gap: 4px 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--cdc-border-subtle);
}
.cdc-meteo-act__item:first-child { border-top: 0; }
.cdc-meteo-act__item--aviso { background: linear-gradient(90deg, var(--cdc-danger-soft), transparent 40%); }
.cdc-meteo-act__fecha {
  font-family: var(--cdc-sans);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--cdc-bark);
}
.cdc-meteo-act__tipo {
  width: 28px;
  height: 28px;
  border-radius: var(--cdc-radius-md);
  background: var(--cdc-forest-soft);
  color: var(--cdc-forest);
  border: 1px solid var(--cdc-forest-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}
.cdc-meteo-act__cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cdc-meteo-act__titulo { font-family: var(--cdc-sans); font-size: 0.9rem; font-weight: 600; color: var(--cdc-ink); }
.cdc-meteo-act__detalle { font-family: var(--cdc-sans); font-size: 0.8rem; color: var(--cdc-bark); }
.cdc-meteo-act__meteo { font-family: var(--cdc-sans); font-size: 0.8rem; color: var(--cdc-mute); }
.cdc-meteo-act__avisos { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

@media (max-width: 720px) {
  .cdc-meteo-act__item {
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-areas:
      "tipo fecha"
      "tipo cuerpo"
      "tipo avisos"
      "tipo ver";
  }
  .cdc-meteo-act__tipo   { grid-area: tipo; align-self: start; }
  .cdc-meteo-act__fecha  { grid-area: fecha; }
  .cdc-meteo-act__cuerpo { grid-area: cuerpo; }
  .cdc-meteo-act__avisos { grid-area: avisos; justify-content: flex-start; }
  .cdc-meteo-act__item > .cdc-btn { grid-area: ver; justify-self: start; }
  .cdc-meteo__mapa-btn span { display: none; }
  .cdc-meteo__campo--fecha { flex: 1 1 140px; }
  .cdc-meteo__campo--accion { flex: 1 1 100%; }
  .cdc-meteo__campo--accion .rz-button { width: 100%; }
}

/* ===========================================================================
   EN QUÉ PARCELA ESTOY (/gps/detect) · rediseño 2026-09-06
   Solo tokens --cdc-*: el modo oscuro sale de la redefinición de tokens, sin
   bloque propio. Primitivas reutilizadas: cdc-heading, cdc-empty, cdc-stat,
   cdc-status-chip, cdc-btn. Aquí solo la disposición del héroe, las cifras,
   la lista de vecinas y el contenedor del expediente.
   =========================================================================== */

.cdc-gps { display: flex; flex-direction: column; gap: 1rem; }
.cdc-gps__skel { display: grid; gap: 10px; margin-top: 6px; }

/* Héroe: la respuesta en una frase. El color del filete dice el grado de certeza. */
.cdc-gps__hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem 1.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--cdc-forest);
}
.cdc-gps__hero--cerca   { border-left-color: var(--cdc-amber); }
.cdc-gps__hero--elegida { border-left-color: var(--cdc-cobalt); }
.cdc-gps__hero-texto { min-width: 0; flex: 1 1 320px; }
.cdc-gps__estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cdc-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cdc-forest);
}
.cdc-gps__hero--cerca .cdc-gps__estado   { color: var(--cdc-amber); }
.cdc-gps__hero--elegida .cdc-gps__estado { color: var(--cdc-cobalt); }
.cdc-gps__nombre {
  margin: 0.25rem 0 0.15rem;
  font-family: var(--cdc-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--cdc-ink);
  overflow-wrap: anywhere;
}
.cdc-gps__ref {
  margin: 0 0 0.6rem;
  font-family: var(--cdc-sans);
  font-size: 0.9rem;
  color: var(--cdc-bark);
}
.cdc-gps__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cdc-gps__acciones { display: flex; flex-direction: column; gap: 8px; align-self: flex-start; }

/* Las cuatro cifras. */
.cdc-gps__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.cdc-gps__stats .cdc-stat__value { font-size: 1.5rem; }
.cdc-gps__stats .cdc-stat__delta { color: var(--cdc-mute); font-weight: 500; }
.cdc-gps__stat-texto { font-size: 1.05rem !important; line-height: 1.25; overflow-wrap: anywhere; }
.cdc-gps__coords {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  font-family: var(--cdc-sans);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--cdc-mute);
}

/* Vecinas y expediente. */
.cdc-gps__vecinas,
.cdc-gps__expediente { padding: 1rem 1.25rem; }
.cdc-gps__titulo {
  margin: 0 0 0.5rem;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--cdc-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--cdc-ink);
}
.cdc-gps__titulo i { color: var(--cdc-forest); font-size: 0.9em; }
.cdc-gps__lista { list-style: none; margin: 0; padding: 0; }
.cdc-gps__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--cdc-border-subtle);
}
.cdc-gps__item:first-child { border-top: 0; }
.cdc-gps__item-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cdc-gps__item-nombre { font-family: var(--cdc-sans); font-size: 0.92rem; font-weight: 600; color: var(--cdc-ink); }
.cdc-gps__item-ref    { font-family: var(--cdc-sans); font-size: 0.8rem; color: var(--cdc-bark); }
.cdc-gps__item-dist {
  font-family: var(--cdc-sans);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--cdc-bark);
}
.cdc-gps__item-dist--dentro { color: var(--cdc-forest); font-weight: 600; }
.cdc-gps__nota { margin: 0.6rem 0 0; font-family: var(--cdc-sans); font-size: 0.78rem; color: var(--cdc-mute); }

/* Estados vacíos propios: buscando señal y acciones del error. */
.cdc-gps__buscando .cdc-empty__icon i { animation: cdcGpsPulso 1.2s ease-in-out infinite; }
@keyframes cdcGpsPulso {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.18); opacity: 0.6; }
}
.cdc-gps__empty-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }

@media (max-width: 720px) {
  .cdc-gps__acciones { flex-direction: row; width: 100%; }
  .cdc-gps__acciones .cdc-btn { flex: 1 1 auto; justify-content: center; }
  .cdc-gps__item { grid-template-columns: minmax(0, 1fr) auto; }
  .cdc-gps__item > .cdc-btn { grid-column: 1 / -1; justify-self: start; }
  /* cierra la media query de /gps: la resolucion del merge del 06/09 se comio esta llave
     y dejo TODO el bloque de la huella dentro de `@media (max-width: 720px)`, inerte en escritorio. */
}

/* =====================================================================
   Huella de carbono (/sostenibilidad) — rediseño 2026-09-07
   Compuesta sobre las primitivas cdc-* (heading, section, card, chip,
   empty) y SOLO con tokens: el tema oscuro sale de la redefinición de
   `--cdc-*`, sin bloque propio.

   Color con significado, no decorativo: la familia «motor» (gasóleo) usa
   la rampa cálida y la familia «suelo» (nitrógeno y carbonatos) la verde,
   así la barra de reparto se lee sin leyenda. Cada bloque declara su
   color una sola vez, en `--hc-seg`, y lo heredan barra, punto e icono.
   ===================================================================== */
[data-bloque="MAQ_OPER"]  { --hc-seg: var(--cdc-ochre); }
[data-bloque="MAQ_TRAT"]  { --hc-seg: var(--cdc-amber); }
[data-bloque="MAQ_FERT"]  { --hc-seg: var(--cdc-wheat); }
[data-bloque="FERT_N2O"]  { --hc-seg: var(--cdc-forest); }
[data-bloque="FERT_UREA"] { --hc-seg: var(--cdc-forest-2); }
[data-bloque="ENMIENDAS"] { --hc-seg: var(--cdc-olive); }
[data-bloque="ELEC"]      { --hc-seg: var(--cdc-cobalt); }
[data-bloque="FITO"]      { --hc-seg: var(--cdc-mute); }

/* ---- Panel de resultado ------------------------------------------------ */
.cdc-hc__resultado {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 28px 40px;
  align-items: start;
  margin-bottom: 4px;
}
.cdc-hc__cifra-eyebrow {
  font-family: var(--cdc-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cdc-mute);
}
.cdc-hc__cifra-valor {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
  font-family: var(--cdc-display);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--cdc-ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "lnum";
}
.cdc-hc__cifra-unidad {
  font-family: var(--cdc-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--cdc-bark);
}
.cdc-hc__cifra-ha {
  margin-top: 8px;
  font-family: var(--cdc-sans);
  font-size: 0.95rem;
  color: var(--cdc-soil);
  font-variant-numeric: tabular-nums;
}
.cdc-hc__delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 4px 10px;
  border-radius: var(--cdc-radius-pill);
  font-family: var(--cdc-sans);
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--cdc-border);
  background: var(--cdc-surface-well);
  color: var(--cdc-soil);
}
.cdc-hc__delta.is-baja {
  background: var(--cdc-forest-soft);
  border-color: var(--cdc-forest-line);
  color: var(--cdc-forest-text, var(--cdc-forest));
}
.cdc-hc__delta.is-sube {
  background: var(--cdc-amber-soft);
  border-color: var(--cdc-amber-line);
  color: var(--cdc-amber-text, var(--cdc-amber));
}
.cdc-hc__delta.is-neutra { font-weight: 500; color: var(--cdc-bark); }

/* Barra de reparto: una sola pieza, segmentos separados por el hueco del track. */
.cdc-hc__reparto-titulo {
  font-family: var(--cdc-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cdc-mute);
  margin-bottom: 10px;
}
.cdc-hc__barra {
  display: flex;
  gap: 2px;
  height: 16px;
  border-radius: var(--cdc-radius-pill);
  background: var(--cdc-surface-well);
  border: 1px solid var(--cdc-border-subtle);
  overflow: hidden;
}
.cdc-hc__barra > i {
  display: block;
  min-width: 3px;
  background: var(--hc-seg, var(--cdc-forest));
  transition: width var(--cdc-dur-slow) var(--cdc-ease-out);
}
.cdc-hc__leyenda {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.cdc-hc__leyenda li {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  font-family: var(--cdc-sans);
  font-size: 0.88rem;
}
/* Una muestra por segmento de la familia: así la gradación de la barra queda explicada
   sin repetir abajo el desglose con sus kilos. */
.cdc-hc__puntos {
  display: inline-flex;
  gap: 3px;
  transform: translateY(1px);
}
.cdc-hc__puntos > i,
.cdc-hc__punto {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--hc-seg, var(--cdc-forest));
}
.cdc-hc__leyenda-nombre { font-weight: 600; color: var(--cdc-ink); }
.cdc-hc__leyenda-nota { color: var(--cdc-bark); font-size: 0.82rem; }
.cdc-hc__leyenda-pct {
  font-family: var(--cdc-display);
  font-weight: 700;
  color: var(--cdc-ink);
  font-variant-numeric: tabular-nums;
}

/* Ficha: los datos de contexto, como el pie de un documento. */
.cdc-hc__ficha {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px 24px;
  margin: 4px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--cdc-border-subtle);
}
.cdc-hc__ficha dt {
  font-family: var(--cdc-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cdc-mute);
}
.cdc-hc__ficha dd {
  margin: 4px 0 0;
  font-family: var(--cdc-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cdc-ink);
  font-variant-numeric: tabular-nums;
}
.cdc-hc__ficha dd small {
  display: block;
  margin-top: 2px;
  font-family: var(--cdc-sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--cdc-bark);
}

/* ---- Bloques por familia ---------------------------------------------- */
.cdc-hc__familia + .cdc-hc__familia { margin-top: 22px; }
.cdc-hc__familia-cabecera {
  display: grid;
  grid-template-columns: 32px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cdc-border-subtle);
}
.cdc-hc__familia-icono {
  width: 32px;
  height: 32px;
  border-radius: var(--cdc-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--hc-seg, var(--cdc-forest));
  background: var(--cdc-surface-well);
  border: 1px solid var(--cdc-border);
}
.cdc-hc__familia-nombre {
  font-family: var(--cdc-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cdc-ink);
}
.cdc-hc__familia-nota { font-family: var(--cdc-sans); font-size: 0.8rem; color: var(--cdc-bark); }
.cdc-hc__familia-total {
  font-family: var(--cdc-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cdc-ink);
  font-variant-numeric: tabular-nums;
}
.cdc-hc__familia-total small { font-size: 0.72rem; font-weight: 500; color: var(--cdc-bark); margin-left: 3px; }

.cdc-hc__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, 200px) 84px 44px;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--cdc-border-subtle);
}
.cdc-hc__fila:last-child { border-bottom: 0; }
.cdc-hc__fila-texto { min-width: 0; }
.cdc-hc__fila-nombre {
  display: block;
  font-family: var(--cdc-sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--cdc-ink);
}
.cdc-hc__fila-nombre .cdc-chip { margin-left: 6px; vertical-align: middle; }
.cdc-hc__fila-detalle {
  display: block;
  margin-top: 2px;
  font-family: var(--cdc-sans);
  font-size: 0.8rem;
  color: var(--cdc-bark);
}
.cdc-hc__fila-barra {
  height: 8px;
  border-radius: var(--cdc-radius-pill);
  background: var(--cdc-surface-well);
  overflow: hidden;
}
.cdc-hc__fila-barra > i {
  display: block;
  height: 100%;
  border-radius: var(--cdc-radius-pill);
  background: var(--hc-seg, var(--cdc-forest));
  transition: width var(--cdc-dur-slow) var(--cdc-ease-out);
}
.cdc-hc__fila-kg {
  font-family: var(--cdc-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--cdc-ink);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cdc-hc__fila-kg small { font-size: 0.7rem; font-weight: 500; color: var(--cdc-bark); margin-left: 3px; }
.cdc-hc__fila-pct {
  font-family: var(--cdc-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cdc-bark);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cdc-hc__sin-registrar {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 0;
  font-family: var(--cdc-sans);
  font-size: 0.82rem;
  color: var(--cdc-mute);
}
.cdc-hc__sin-registrar i { font-size: 0.7rem; }

/* Familia entera sin emisiones: una línea, no una sección con un cero grande. */
.cdc-hc__familia-vacia {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  font-family: var(--cdc-sans);
  font-size: 0.86rem;
  color: var(--cdc-bark);
}
.cdc-hc__familia-vacia strong { color: var(--cdc-ink); font-weight: 600; }
.cdc-hc__familia-vacia .cdc-hc__familia-icono { opacity: 0.75; }

/* Hueco declarado y alcance 3: fuera del total, y con forma distinta para que se note. */
.cdc-hc__hueco,
.cdc-hc__a3 {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px dashed var(--cdc-border-strong);
  border-radius: var(--cdc-radius-md);
  background: var(--cdc-surface-well);
}
.cdc-hc__a3 { margin-top: 10px; }
.cdc-hc__hueco .cdc-hc__familia-icono,
.cdc-hc__a3 .cdc-hc__familia-icono { background: var(--cdc-surface-card); }

/* ---- Tablas ----------------------------------------------------------- */
.cdc-hc__dos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 0 24px;
  align-items: start;
}
.cdc-hc__tabla-wrap { overflow-x: auto; }
.cdc-hc__tabla {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--cdc-sans);
  font-size: 0.9rem;
}
.cdc-hc__tabla th,
.cdc-hc__tabla td {
  padding: 10px 12px 10px 0;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--cdc-border-subtle);
}
.cdc-hc__tabla th {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cdc-mute);
  white-space: nowrap;
}
.cdc-hc__tabla tbody tr:last-child td { border-bottom: 0; }
.cdc-hc__tabla td:last-child,
.cdc-hc__tabla th:last-child { padding-right: 0; }
.cdc-hc__tabla .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
/* La columna del medidor necesita aire por la izquierda: pegada a la cifra anterior,
   el número se leía como parte de esta columna. */
.cdc-hc__tabla .parte { width: 42%; min-width: 170px; padding-left: 24px; }
.cdc-hc__fila-total td { font-weight: 700; color: var(--cdc-ink); }
.cdc-hc__medidor {
  display: block;
  height: 8px;
  border-radius: var(--cdc-radius-pill);
  background: var(--cdc-surface-well);
  overflow: hidden;
}
.cdc-hc__medidor > i {
  display: block;
  height: 100%;
  border-radius: var(--cdc-radius-pill);
  background: var(--cdc-forest);
}
.cdc-hc__medidor-cifra {
  display: block;
  margin-top: 5px;
  font-size: 0.78rem;
  color: var(--cdc-bark);
  font-variant-numeric: tabular-nums;
}

/* ---- Avisos y palancas ------------------------------------------------- */
.cdc-hc__avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cdc-hc__avisos li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px solid var(--cdc-border-subtle);
  font-family: var(--cdc-sans);
  font-size: 0.88rem;
  color: var(--cdc-soil);
  line-height: 1.45;
}
.cdc-hc__avisos li:last-child { border-bottom: 0; }
.cdc-hc__aviso-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--cdc-radius-sm);
  font-family: var(--cdc-display);
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--cdc-surface-well);
  border: 1px solid var(--cdc-border);
  color: var(--cdc-bark);
}
.cdc-hc__aviso-num--icono { font-size: 0.75rem; border-style: none; background: none; color: var(--cdc-cobalt); }
.cdc-hc__avisos li.is-atencion .cdc-hc__aviso-num {
  background: var(--cdc-amber-soft);
  border-color: var(--cdc-amber-line);
  color: var(--cdc-amber-text, var(--cdc-amber));
}
.cdc-hc__avisos li.is-atencion .cdc-hc__aviso-texto { color: var(--cdc-ink); }

.cdc-hc__palancas {
  list-style: none;
  counter-reset: palanca;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.cdc-hc__palancas li {
  counter-increment: palanca;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-family: var(--cdc-sans);
  font-size: 0.88rem;
  color: var(--cdc-soil);
  line-height: 1.5;
}
.cdc-hc__palancas li::before {
  content: counter(palanca);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cdc-display);
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--cdc-forest-soft);
  border: 1px solid var(--cdc-forest-line);
  color: var(--cdc-forest-text, var(--cdc-forest));
}

/* ---- Factores (plegable) ---------------------------------------------- */
.cdc-hc__factores > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--cdc-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--cdc-ink);
  list-style: none;
}
.cdc-hc__factores > summary::-webkit-details-marker { display: none; }
.cdc-hc__factores > summary:focus-visible { outline: none; box-shadow: var(--cdc-ring-forest); border-radius: var(--cdc-radius-sm); }
.cdc-hc__factores > summary > i:first-child { color: var(--cdc-forest); }
.cdc-hc__factores-pista {
  margin-left: auto;
  font-family: var(--cdc-sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--cdc-mute);
}
.cdc-hc__factores-flecha { color: var(--cdc-mute); font-size: 0.8rem; transition: transform var(--cdc-dur-fast) var(--cdc-ease-out); }
.cdc-hc__factores[open] > summary { margin-bottom: 16px; }
.cdc-hc__factores[open] .cdc-hc__factores-flecha { transform: rotate(180deg); }
.cdc-hc__tabla--factores { font-size: 0.84rem; }
.cdc-hc__tabla--factores td { padding-top: 8px; padding-bottom: 8px; }
.cdc-hc__unidad { color: var(--cdc-soil-2); white-space: nowrap; }
.cdc-hc__fuente { color: var(--cdc-bark); font-size: 0.8rem; }
.cdc-hc__nota {
  margin: 16px 0 0;
  font-family: var(--cdc-sans);
  font-size: 0.82rem;
  color: var(--cdc-bark);
  max-width: 76ch;
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .cdc-hc__barra > i,
  .cdc-hc__fila-barra > i,
  .cdc-hc__factores-flecha { transition: none; }
}

/* ---- Estrecho: la rejilla de 4 columnas no cabe ------------------------ */
@media (max-width: 900px) {
  .cdc-hc__resultado { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 620px) {
  .cdc-hc__fila {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "texto kg"
      "barra pct";
    gap: 6px 12px;
  }
  .cdc-hc__fila-texto { grid-area: texto; }
  .cdc-hc__fila-kg { grid-area: kg; }
  .cdc-hc__fila-barra { grid-area: barra; align-self: center; }
  .cdc-hc__fila-pct { grid-area: pct; }
  .cdc-hc__familia-cabecera { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .cdc-hc__familia-nota { display: none; }
  .cdc-hc__leyenda li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cdc-hc__leyenda-nota { display: none; }
  .cdc-hc__factores-pista { display: none; }
  .cdc-hc__tabla .parte { width: auto; min-width: 130px; padding-left: 14px; }
  /* La tabla de factores tiene que DESPLAZARSE, no comprimirse: sin min-width el
     navegador parte «Pulverización de fitosanitarios» en tres líneas y aun así
     recorta la fuente. El wrap ya trae overflow-x: auto. */
  .cdc-hc__tabla--factores { min-width: 560px; }
  .cdc-hc__familia-vacia { align-items: start; }
}

/* ---------------------------------------------------------------------------
   Cabecera de los asistentes (RadzenSteps) en pantalla estrecha
   ---------------------------------------------------------------------------
   Los pasos se reparten en una fila que NO se comprime: con cuatro pasos y la
   tarjeta a 343 px, el contenedor medía 298 px de ancho visible y 505 px de
   contenido, con `overflow-x: visible` y sin scroll de página que lo rescatara.
   Resultado medido el 2026-09-07: el paso 3 salía partido a media palabra y el
   4 no aparecía en absoluto, así que en el móvil el recorrido no se veía
   entero.

   Se resuelve dejándolo DESPLAZARSE en vez de recortarse, que es el mismo
   criterio que ya se aplicó a la tabla de factores de la huella. Afecta a los
   cinco recorridos con pasos, no solo a los asistentes.

   OJO CON EL SELECTOR: Radzen pinta la tira de pasos como un <ul> SIN CLASE
   dentro de `div.rz-steps` (no hay `.rz-steps-header` ni `.rz-steps-list`, que
   es lo primero que se prueba y no casa con nada).
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .rz-steps > ul {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  /* Cada paso conserva su ancho mínimo legible; el que sobra se desplaza. */
  .rz-steps > ul > .rz-steps-item {
    min-width: 8.5rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   101. LISTADO DE TRATAMIENTOS · celdas de dos líneas y ficha desplegable

   La fila pasó de 6 datos a 20 sin ensanchar la tabla: cada celda lleva una
   línea principal y otra de apoyo, y el desplegable abre el registro entero.
   Solo tokens --cdc-*, así que el tema oscuro sale sin bloque propio.
   ═════════════════════════════════════════════════════════════════════════ */

/* Chip de una sola palabra dentro de una celda: el .cdc-chip normal ocupa
   demasiado cuando van tres en 150 px. */
.cdc-chip--xs {
    padding: 0 6px;
    font-size: 0.68rem;
    line-height: 1.7;
}

.cdc-trat-cel {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.cdc-trat-cel--der { align-items: flex-end; }

.cdc-trat-cel__1 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cdc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cdc-trat-cel__2 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: 0.72rem;
    color: var(--cdc-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cdc-trat-cel--falta { color: var(--cdc-amber-text, var(--cdc-amber)); }
.cdc-trat-cel__prod {
    min-width: 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cdc-trat-cel__dosis { font-variant-numeric: tabular-nums; }

/* El número de registro es un identificador, no prosa: va en monoespaciada
   para que dos registros parecidos no se confundan de un vistazo. */
.cdc-trat-nr {
    flex-shrink: 0;
    padding: 0 5px;
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-xs);
    background: var(--cdc-surface-well);
    color: var(--cdc-soil-2);
    font-family: var(--cdc-mono);
    font-size: 0.68rem;
    font-weight: 500;
}

.cdc-trat-exp {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}
.cdc-trat-exp__1,
.cdc-trat-exp__2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

/* La celda «Expediente» lleva DOS lineas de etiquetas (estado + CUE/ZV/+30 d) y la regla
   global de rejilla fija la celda a 44px: la segunda linea se recortaba a media altura.
   Se libera SOLO la fila que contiene este bloque, no la altura de todas las rejillas. */
.rz-data-grid tbody td:has(> .rz-cell-data > .cdc-trat-exp),
.rz-data-grid tbody td:has(> .cdc-trat-exp) {
    height: auto;
    min-height: 44px;
    vertical-align: top;
}
.rz-data-grid tbody td:has(.cdc-trat-exp) .rz-cell-data,
.rz-data-grid tbody td:has(.cdc-trat-exp) > .cdc-trat-exp {
    height: auto;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* ---- La ficha del desplegable ------------------------------------------- */
.cdc-trat-ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--cdc-space-lg);
    padding: var(--cdc-space-lg);
    background: var(--cdc-surface-card-alt);
    border-radius: var(--cdc-radius-md);
    box-shadow: inset 3px 0 0 var(--cdc-forest);
}
.cdc-trat-ficha__bloque {
    display: flex;
    flex-direction: column;
    gap: var(--cdc-space-sm);
    min-width: 0;
}
.cdc-trat-ficha__titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--cdc-border);
    font-family: var(--cdc-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cdc-bark);
}
.cdc-trat-ficha__titulo i { color: var(--cdc-forest); }
.cdc-trat-ficha__dl {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
}
/* Un tratamiento con dos productos lleva dos listas: la raya las separa. */
.cdc-trat-ficha__dl + .cdc-trat-ficha__dl {
    margin-top: var(--cdc-space-sm);
    padding-top: var(--cdc-space-sm);
    border-top: 1px dashed var(--cdc-border);
}
.cdc-trat-ficha__dl > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cdc-space-sm);
}
.cdc-trat-ficha__dl dt {
    font-size: 0.75rem;
    color: var(--cdc-mute);
    white-space: nowrap;
}
.cdc-trat-ficha__dl dd {
    margin: 0;
    min-width: 0;
    text-align: right;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cdc-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Lo que no está declarado se dice en ámbar: un hueco en blanco no se
   distingue de un dato que nadie ha mirado. */
.cdc-trat-ficha__falta { color: var(--cdc-amber-text, var(--cdc-amber)); }
.cdc-trat-ficha__hueco {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--cdc-amber-text, var(--cdc-amber));
}
.cdc-trat-ficha__acciones {
    margin-top: auto;
    padding-top: var(--cdc-space-sm);
}

/* ===========================================================================
   102. LISTADO DE PRESCRIPCIONES · barra de mando, plazo y recorrido

   Reutiliza a proposito las piezas del bloque 101 (.cdc-trat-cel, .cdc-trat-nr,
   .cdc-trat-ficha): son la celda de dos lineas y la ficha desplegable del
   cuaderno, no algo del tratamiento. Aqui solo va lo que no existia: la barra
   de plazo, el recorrido de tres hitos y la barra de mando.

   Anchos: la rejilla NO lleva min-width. Una pagina del cuaderno tiene ~909 px
   utiles en un portatil de 1.280 (medido 11/09/2026), y fijar anchos saca barra
   horizontal y recorta las cabeceras.

   Solo tokens --cdc-*, asi que el tema oscuro sale sin bloque propio.
   ═════════════════════════════════════════════════════════════════════════ */

/* ---- Barra de mando ------------------------------------------------------ */
.cdc-presc-mando {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cdc-space-sm);
    padding: 0.8rem 1rem;
    margin-bottom: 0.75rem;
}

/* El grupo de pildoras es inline-flex sin wrap por defecto: cinco no caben en
   un movil y estiran el body hasta desbordar la cabecera. */
.cdc-presc-mando__filtros {
    flex-wrap: wrap;
    gap: 6px;
}

.cdc-presc-mando__de {
    margin-left: 0.5rem;
    font-size: 0.78rem;
    color: var(--cdc-mute);
}

/* Variantes de pildora que el filtro necesita y la familia no tenia. */
.cdc-pill--amber {
    border-color: var(--cdc-amber-line);
    background: var(--cdc-amber-soft);
    color: var(--cdc-amber-text);
}
.cdc-pill--amber .cdc-pill__count {
    background: var(--cdc-amber-line);
    color: var(--cdc-amber-text);
}
.cdc-pill--danger {
    border-color: var(--cdc-danger-line);
    background: var(--cdc-danger-soft);
    color: var(--cdc-danger);
}
.cdc-pill--danger .cdc-pill__count {
    background: var(--cdc-danger-line);
    color: var(--cdc-danger);
}

/* ---- El aviso de lo que corre prisa -------------------------------------- */
.cdc-presc-aviso {
    display: flex;
    align-items: center;
    gap: var(--cdc-space-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--cdc-amber-line);
    border-radius: var(--cdc-radius-lg);
    background: var(--cdc-amber-soft);
    color: var(--cdc-amber-text);
}
.cdc-presc-aviso > i { flex-shrink: 0; }
.cdc-presc-aviso__texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-grow: 1;
    min-width: 0;
}
.cdc-presc-aviso__texto strong { font-size: 0.86rem; font-weight: 600; }
.cdc-presc-aviso__texto span { font-size: 0.78rem; opacity: 0.88; }

/* ---- El plazo: cuanta ventana de validez queda --------------------------- */
.cdc-presc-plazo__dias { font-weight: 600; }
.cdc-presc-plazo--ok    .cdc-presc-plazo__dias { color: var(--cdc-forest-text); }
.cdc-presc-plazo--warn  .cdc-presc-plazo__dias { color: var(--cdc-amber-text); }
.cdc-presc-plazo--bad   .cdc-presc-plazo__dias { color: var(--cdc-danger); }
.cdc-presc-plazo--neutro .cdc-presc-plazo__dias { color: var(--cdc-mute); }

.cdc-presc-barra {
    display: block;
    width: 100%;
    height: 4px;
    margin-top: 5px;
    border-radius: 999px;
    background: var(--cdc-border);
    overflow: hidden;
}
.cdc-presc-barra > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--cdc-border-strong);
}
.cdc-presc-plazo--ok   .cdc-presc-barra > i { background: var(--cdc-forest); }
.cdc-presc-plazo--warn .cdc-presc-barra > i { background: var(--cdc-amber); }
.cdc-presc-plazo--bad  .cdc-presc-barra > i { background: var(--cdc-danger); }

/* ---- El recorrido: emitida, enviada, anotada ----------------------------- */
.cdc-presc-circuito {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 5px;
}
.cdc-presc-circuito__hito {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--cdc-border-strong);
}
.cdc-presc-circuito__hito.is-hecho { background: var(--cdc-forest); }
.cdc-presc-circuito__hito.is-actual {
    background: var(--cdc-cobalt);
    box-shadow: 0 0 0 3px var(--cdc-cobalt-soft);
}
.cdc-presc-circuito__hito.is-vencido {
    background: var(--cdc-danger);
    box-shadow: 0 0 0 3px var(--cdc-danger-soft);
}
.cdc-presc-circuito__seg {
    display: block;
    width: 12px;
    height: 1px;
    background: var(--cdc-border-strong);
}

/* La celda de estado lleva insignia + recorrido: la regla global fija la fila
   del grid a 44 px y la segunda linea se recortaba a media altura. Se libera
   SOLO la fila que contiene este bloque. */
.rz-data-grid tbody td:has(.cdc-presc-circuito),
.rz-data-grid tbody td:has(.cdc-presc-barra) {
    height: auto;
    min-height: 44px;
}

/* ---- La recomendacion dentro de la ficha --------------------------------- */
.cdc-presc-reco {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--cdc-soil-2);
}

/* La ficha desplegable vive dentro de una celda del grid, y Radzen le impone
   white-space: nowrap heredado: la prosa —el aviso de hueco y la recomendacion
   del asesor— salia en una sola linea y se recortaba contra el borde de la
   columna (medido: pedia 304 px en 271). Solo se libera el texto corrido; los
   <dd> siguen en una linea con elipsis, que es lo que se quiere ahi. */
.rz-data-grid .cdc-trat-ficha__hueco,
.rz-data-grid .cdc-presc-reco {
    white-space: normal;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENLACE A LA FICHA DEL MINISTERIO  (peticion 2, 2026-09-12)
   ───────────────────────────────────────────────────────────────────────────
   El mismo gesto en seis pantallas (fitosanitarios, fitosanitarios Aspafito,
   dosis autorizadas, dosis configuradas, tratamientos y compras) mas la
   pantalla de fichas. Vive aqui y no en un .razor.css porque lo usan siete
   pantallas y porque asi hereda los tokens --cdc-*: el modo oscuro sale solo.

   El COLOR DICE ALGO y no es decoracion:
     · cobalto = la ficha que estaba vigente esa fecha,
     · ambar   = no guardamos la de ese dia; se abre la mas antigua que hay.
   Por eso .cdc-ficha-enlace esta en los :not() de branding-interop.js: sin
   eso el verde de la cooperativa pintaba los dos igual y borraba el aviso.
   ═══════════════════════════════════════════════════════════════════════════ */

.cdc-ficha-enlace {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--cdc-border-strong);
    border-radius: 7px;
    background: var(--cdc-surface-card);
    color: var(--cdc-cobalt-deep);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .12s ease, border-color .12s ease;
}

.cdc-ficha-enlace:hover,
.cdc-ficha-enlace:focus-visible {
    background: var(--cdc-cobalt-soft);
    border-color: var(--cdc-cobalt-line);
    color: var(--cdc-cobalt-deep);
    text-decoration: none;
}

/* No hay ficha de esa fecha: se abre la mas antigua, diciendolo. El ambar es
   la unica senal de que lo que se abre NO es lo que se pidio. */
.cdc-ficha-enlace--aviso {
    color: var(--cdc-amber-text);
    border-color: var(--cdc-amber-line);
    background: var(--cdc-amber-soft);
}

.cdc-ficha-enlace--aviso:hover,
.cdc-ficha-enlace--aviso:focus-visible {
    color: var(--cdc-amber-text);
    border-color: var(--cdc-amber);
    background: var(--cdc-amber-soft);
}

/* Columnas de acciones de las rejillas: ahi no cabe etiqueta, solo el icono.
   El sentido no se pierde porque el title lo cuenta entero. */
.cdc-ficha-enlace--compacto {
    gap: 0;
    padding: 6px 9px;
}

.cdc-ficha-enlace__texto {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* De que version es la ficha que se abriria. En una linea de tratamiento es EL
   dato que justifica todo esto: ensena que el enlace no lleva a la de hoy. */
.cdc-ficha-enlace__version {
    display: block;
    margin-top: 3px;
    font-size: 0.65rem;
    color: var(--cdc-bark);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FICHAS DEL REGISTRO  (/maestras/productos/fichas-registro, peticion 2)
   ───────────────────────────────────────────────────────────────────────────
   EL PRESUPUESTO VERTICAL ES PARTE DEL DISENO. La primera version gastaba
   462 px medidos —titulo, lede de tres renglones, franja de estado y una
   tarjeta de buscador con etiqueta y pista— antes del primer producto: casi
   media ventana de un portatil de 950 px presentandose. Aqui la cabecera, el
   estado y la barra caben en menos de la mitad. Todo lo de abajo esta
   dimensionado para eso; al tocarlo, medir otra vez el `top` de la zona.
   ═══════════════════════════════════════════════════════════════════════════ */

.cdc-fichas {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ── Cabecera: el lede AL LADO del titulo, no debajo ─────────────────────── */

.cdc-fichas__cabecera {
    display: flex;
    align-items: flex-end;
    gap: 1.1rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

.cdc-fichas__eyebrow {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cdc-bark);
}

.cdc-fichas__eyebrow i { color: var(--cdc-forest); }

.cdc-fichas__titulo {
    margin: .1rem 0 0;
    font-family: var(--cdc-display);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--cdc-ink);
}

.cdc-fichas__titulo em {
    font-style: normal;
    color: var(--cdc-forest);
}

.cdc-fichas__lede {
    margin: 0 0 .15rem;
    max-width: 34rem;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--cdc-bark);
    text-wrap: pretty;
}

.cdc-fichas__lede strong { font-weight: 600; color: var(--cdc-soil-2); }

/* ── Estado del archivo: una linea, no un bloque ─────────────────────────── */

.cdc-fichas__estado {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .8rem;
    margin-bottom: .6rem;
    border: 1px solid var(--cdc-forest-line);
    background: var(--cdc-forest-soft);
    border-radius: 7px;
    font-size: .75rem;
    line-height: 1.4;
    color: var(--cdc-soil-2);
}

.cdc-fichas__estado > i { color: var(--cdc-forest-text); flex-shrink: 0; }
.cdc-fichas__estado strong { font-weight: 600; color: var(--cdc-ink); }
.cdc-fichas__estado-texto { flex-grow: 1; min-width: 0; }

.cdc-fichas__estado-fecha {
    flex-shrink: 0;
    font-size: .7rem;
    color: var(--cdc-bark);
    white-space: nowrap;
}

/* La descarga apagada NO es un error, pero tampoco es «al dia»: es ambar. */
.cdc-fichas__estado--parado {
    border-color: var(--cdc-amber-line);
    background: var(--cdc-amber-soft);
}

.cdc-fichas__estado--parado > i,
.cdc-fichas__estado--parado .cdc-fichas__estado-fecha { color: var(--cdc-amber-text); }

/* ── Barra de buscar y filtrar ───────────────────────────────────────────── */

.cdc-fichas__barra {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin-bottom: .7rem;
}

.cdc-fichas__buscador {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: min(300px, 100%);
    padding: .42rem .7rem;
    border: 1px solid var(--cdc-border-strong);
    border-radius: 8px;
    background: var(--cdc-surface-card);
}

.cdc-fichas__buscador:focus-within {
    border-color: var(--cdc-forest);
    box-shadow: 0 0 0 3px var(--cdc-forest-soft);
}

.cdc-fichas__buscador > i { color: var(--cdc-bark); font-size: .78rem; }

.cdc-fichas__buscador input {
    flex-grow: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .8rem;
    color: var(--cdc-ink);
    outline: none;
}

/* El aspa nativa de input[type=search] no existe en todos los navegadores y
   donde existe no se puede estilar: se pone una propia. */
.cdc-fichas__buscador input::-webkit-search-cancel-button { display: none; }

.cdc-fichas__limpiar {
    border: 0;
    background: transparent;
    padding: 0 .1rem;
    cursor: pointer;
    color: var(--cdc-bark);
    font-size: .78rem;
    line-height: 1;
}

.cdc-fichas__limpiar:hover { color: var(--cdc-ink); }

.cdc-fichas__orden {
    margin-left: auto;
    font-size: .68rem;
    color: var(--cdc-bark);
    white-space: nowrap;
}

/* ── Rejilla + historico ─────────────────────────────────────────────────── */

/* El envoltorio es el contenedor y la rejilla va DENTRO: un elemento no puede
   consultar su propio tamano —la consulta mira al ancestro contenedor mas
   cercano—, asi que con container-type y grid-template-columns en el mismo
   div no se cumple nunca y la pantalla se queda a una columna.

   El 1.040 esta MEDIDO, no elegido: en un viewport de 1.500 px con la barra
   lateral desplegada el contenido mide 1.094 px. Un umbral de 1.100 —que
   parece el redondo— dejaba la pantalla en una sola columna justo en el
   tamano de portatil mas comun. */
.cdc-fichas__zona {
    container-type: inline-size;
    min-height: 0;
}

.cdc-fichas__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
    align-items: start;
}

@container (min-width: 1040px) {
    .cdc-fichas__cuerpo {
        grid-template-columns: minmax(0, 1fr) 330px;
    }
}

.cdc-fichas__mono {
    font-family: var(--cdc-mono);
    font-feature-settings: "zero", "ss01";
    font-size: .72rem;
}

.cdc-fichas__tenue { color: var(--cdc-bark); }

/* La autorizacion se acaba este año o ya se acabo. No es un error: es un aviso. */
.cdc-fichas__caduca { color: var(--cdc-amber-text); font-weight: 600; }
.cdc-fichas__sin { color: var(--cdc-border-strong); }

.cdc-fichas__nombre {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

.cdc-fichas__nombre-txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cdc-fichas__cuenta {
    display: inline-block;
    min-width: 1.35rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--cdc-border-subtle);
    color: var(--cdc-bark);
    font-size: .7rem;
    font-weight: 600;
}

/* Mas de una version es la noticia: significa que el ministerio cambio la ficha. */
.cdc-fichas__cuenta--varias {
    background: var(--cdc-amber-soft);
    color: var(--cdc-amber-text);
}

/* ── El panel del historico ──────────────────────────────────────────────── */

.cdc-fichas__historico { padding: .9rem 1rem; }

.cdc-fichas__historico-cab {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cdc-bark);
}

.cdc-fichas__historico-nombre {
    margin-top: .1rem;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cdc-ink);
}

.cdc-fichas__historico-sub {
    font-size: .72rem;
    color: var(--cdc-bark);
}

.cdc-fichas__historico-fechas {
    margin-bottom: .8rem;
    font-size: .7rem;
    color: var(--cdc-bark);
}

.cdc-fichas__nota {
    margin: .2rem 0 0;
    font-size: .74rem;
    line-height: 1.5;
    color: var(--cdc-bark);
    text-wrap: pretty;
}

.cdc-fichas__linea-tiempo { display: flex; flex-direction: column; }

.cdc-fichas__version { display: flex; gap: .65rem; }

.cdc-fichas__carril {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 10px;
    flex-shrink: 0;
}

.cdc-fichas__punto {
    width: 9px;
    height: 9px;
    margin-top: .28rem;
    border-radius: 999px;
    background: var(--cdc-border-strong);
    flex-shrink: 0;
}

.cdc-fichas__punto--vigente { background: var(--cdc-forest); }

.cdc-fichas__hilo {
    width: 1px;
    flex-grow: 1;
    background: var(--cdc-border);
}

.cdc-fichas__version-cuerpo {
    min-width: 0;
    flex-grow: 1;
    padding-bottom: .9rem;
}

.cdc-fichas__version-cab {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.cdc-fichas__rango {
    font-size: .78rem;
    font-weight: 600;
    color: var(--cdc-ink);
}

.cdc-fichas__version-datos {
    margin-top: .1rem;
    font-size: .7rem;
    color: var(--cdc-bark);
}

.cdc-fichas__acciones {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .4rem;
    flex-wrap: wrap;
}

.cdc-fichas__pie {
    margin: .3rem 0 0;
    padding-top: .7rem;
    border-top: 1px solid var(--cdc-border-subtle);
    font-size: .68rem;
    line-height: 1.5;
    color: var(--cdc-bark);
    text-wrap: pretty;
}

/* ── Estrecho: la rejilla de Radzen se apila sin etiquetas de columna, asi
   que por debajo del umbral el historico baja entero y la tabla se deja
   desplazar en horizontal en lugar de recortarse en silencio. ───────────── */
@container (max-width: 1039px) {
    .cdc-fichas__tabla .rz-data-grid-data { overflow-x: auto; }
}

/* ── Densidad: que la pagina QUEPA ───────────────────────────────────────────
   Medido el 12/09 en un portatil de 950 px: doce filas y su pie sumaban 982 px
   para 714 disponibles —268 de mas, con el paginador fuera de la vista—. Una
   maestra en la que hay que bajar para ver el paginador no se puede recorrer.

   Lo que fija esa altura es la regla PREMIUM global de este mismo archivo
   (`.rz-grid-table tbody td, .rz-data-grid tbody td, .rz-cell-data`), que pone
   `height: 44px` y `padding: 10px 14px !important` a TODA rejilla del cuaderno.
   No se toca —la usa media aplicacion—: se acota aqui, para esta tabla, y hace
   falta `!important` para ganarle. Son cinco columnas de una sola linea
   (numero, nombre, titular, un chip y una fecha): no necesitan 44 px de alto.

   Resultado buscado: fila ~40 px, doce filas y pie por debajo de los 714. */

.cdc-fichas__tabla .rz-grid-table tbody td,
.cdc-fichas__tabla .rz-data-grid tbody td,
.cdc-fichas__tabla .rz-cell-data {
    padding: 5px 12px !important;
    height: auto !important;
    font-size: .8rem !important;
    line-height: 1.35;
}

.cdc-fichas__tabla .rz-grid-table thead th,
.cdc-fichas__tabla .rz-data-grid thead th {
    padding-top: .3rem !important;
    padding-bottom: .3rem !important;
    height: auto !important;
}

/* El pie del paginador trae margenes pensados para una pagina que ya termino;
   aqui va pegado a la tabla. */
.cdc-fichas__tabla .rz-paginator {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
    min-height: 0 !important;
}

.cdc-fichas__tabla .rz-paginator-summary { font-size: .72rem; }

/* ── Que cambio de una version a la siguiente ────────────────────────────────
   Verde lo que entro, ambar lo que salio, y el simbolo delante (+ / −) para que
   no dependa SOLO del color: quien no distingue rojo de verde tiene que poder
   leerlo igual. Cada linea es una celda de la ficha del ministerio —producto,
   agente, dosis, plazo—, asi que una linea ya es una unidad con sentido. */

.cdc-fichas__cambios {
    margin-top: .35rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cdc-fichas__cambio {
    padding: 2px 7px;
    border-radius: 4px;
    border-left: 2px solid transparent;
    font-size: .68rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cdc-fichas__cambio--dentro {
    background: var(--cdc-forest-soft);
    border-left-color: var(--cdc-forest);
    color: var(--cdc-forest-text);
}

.cdc-fichas__cambio--fuera {
    background: var(--cdc-amber-soft);
    border-left-color: var(--cdc-amber);
    color: var(--cdc-amber-text);
}

.cdc-fichas__cambio--mas {
    color: var(--cdc-bark);
    font-style: italic;
    white-space: normal;
}

/* «No cambio» y «no se puede saber» se pintan igual de discretos, pero el texto
   los distingue: dar por bueno «no cambio nada» sin poder comprobarlo seria
   afirmar de mas. */
.cdc-fichas__sin-cambio {
    margin-top: .3rem;
    font-size: .66rem;
    color: var(--cdc-bark);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VISOR DE LA FICHA DEL MINISTERIO  (peticion 2)
   ───────────────────────────────────────────────────────────────────────────
   La ficha se abre ENCIMA de donde estabas. El caso que lo justifica: estar
   comprobando un tratamiento de mayo de 2024 y necesitar mirar un plazo de
   seguridad; con una pestana nueva se pierde el tratamiento de vista.

   El documento va en un <iframe> al visor del navegador. Comprobado el
   2026-09-12: el Acceso sirve el PDF con «Content-Type: application/pdf» e
   «inline» y SIN X-Frame-Options ni CSP, asi que se incrusta tal cual. Trae
   de serie zoom, paginacion, buscar dentro, imprimir y guardar; no hacen
   falta ni un paquete ni una licencia mas.
   ═══════════════════════════════════════════════════════════════════════════ */

.cdc-visor {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5vh 2.5vw;
    background: var(--cdc-velo);
    backdrop-filter: blur(2px);
}

.cdc-visor__caja {
    display: flex;
    flex-direction: column;
    width: min(1180px, 100%);
    height: min(92vh, 100%);
    background: var(--cdc-surface-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--cdc-shadow-xl);
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */

.cdc-visor__cab {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--cdc-border);
    flex-shrink: 0;
}

.cdc-visor__icono { color: var(--cdc-cobalt-deep); font-size: .95rem; }

.cdc-visor__quien { min-width: 0; }

.cdc-visor__nombre {
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cdc-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cdc-visor__sub { font-size: .7rem; color: var(--cdc-bark); }

/* El aviso va EN LA CABECERA y no escondido: es lo unico que impide dar un
   documento por otro. */
.cdc-visor__aviso {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
    padding: .25rem .7rem;
    border: 1px solid var(--cdc-amber-line);
    background: var(--cdc-amber-soft);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 500;
    color: var(--cdc-amber-text);
    white-space: nowrap;
}

.cdc-visor__version {
    margin-left: auto;
    font-size: .7rem;
    color: var(--cdc-bark);
    white-space: nowrap;
}

.cdc-visor__acciones {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

.cdc-visor__cerrar {
    border: 0;
    background: transparent;
    padding: .2rem .35rem;
    font-size: 1rem;
    line-height: 1;
    color: var(--cdc-bark);
    cursor: pointer;
    border-radius: 6px;
}

.cdc-visor__cerrar:hover { background: var(--cdc-border-subtle); color: var(--cdc-ink); }

/* ── Cuerpo: la cinta de datos y el documento ─────────────────────────────── */

.cdc-visor__cuerpo {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    flex-grow: 1;
    min-height: 0;
}

.cdc-visor__lado {
    border-right: 1px solid var(--cdc-border);
    padding: .8rem .9rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.cdc-visor__rotulo {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cdc-bark);
    margin-bottom: .2rem;
}

.cdc-visor__dato {
    display: flex;
    flex-direction: column;
    padding: .35rem 0;
    border-bottom: 1px solid var(--cdc-border-subtle);
}

.cdc-visor__dato-r {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cdc-bark);
}

.cdc-visor__dato-v { font-size: .75rem; color: var(--cdc-ink); line-height: 1.35; }

.cdc-visor__hito {
    display: flex;
    flex-direction: column;
    padding: .25rem 0;
    border-bottom: 1px solid var(--cdc-border-subtle);
}

.cdc-visor__hito-fecha { color: var(--cdc-ink); }
.cdc-visor__hito-cambio { font-size: .65rem; color: var(--cdc-bark); }

/* ─────────────────────────────────────────────────────────────────────────────
   El panel del visor · lo que DICE la ficha

   Medido el 2026-09-12 con KARATE ZEON (22398), que es de las mas cargadas del
   registro: el contenido pide unos 1.060 px de alto para los 220 de ancho y los
   ~700 de alto que hay. Se desplaza, y el orden es el que decide que se ve sin
   desplazar: primero si el producto sigue autorizado, luego que lleva, luego el
   plazo de seguridad —lo que hace falta el mismo dia del tratamiento— y al final
   los datos de consulta. Lo NUESTRO (que version guardamos, cuanto pesa) va al
   pie: quien abre esto viene a ver lo que dice el ministerio.
   ───────────────────────────────────────────────────────────────────────────── */

.cdc-visor__lado { gap: .75rem; }

.cdc-visor__vigencia { display: flex; flex-direction: column; gap: .3rem; }

/* La respuesta a la pregunta con la que se ha entrado: que plazo tiene MI cultivo.
   Va arriba del todo y en el color de enlace del cuaderno, porque es lo unico del panel
   que depende de DONDE se ha pulsado. */
.cdc-visor__suyo {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    padding: .55rem .6rem;
    border-radius: 8px;
    background: var(--cdc-cobalt-soft);
    border: 1px solid var(--cdc-cobalt-line);
}

/* Cuando la ficha no nombra el cultivo no se pinta en azul: no hay respuesta que dar. */
.cdc-visor__suyo--sin {
    background: var(--cdc-surface-card-alt);
    border-color: var(--cdc-border);
}

.cdc-visor__suyo-fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
    /* Sin esto, un nombre del catalogo del FEGA —«LIMÓN DULCE DEL MEDITERRÁNEO»— empuja el
       plazo fuera de los 182 px utiles. Medido el 2026-09-12. */
    min-width: 0;
}

.cdc-visor__suyo--sin .cdc-visor__suyo-fila {
    justify-content: flex-start;
    /* Arriba y no centrado: cuando el nombre ocupa dos lineas, el icono acompaña a la primera. */
    align-items: flex-start;
    gap: .3rem;
    color: var(--cdc-bark);
}

.cdc-visor__suyo--sin .cdc-visor__suyo-fila > i { padding-top: .12rem; }

.cdc-visor__suyo-cultivo {
    font-size: .75rem;
    font-weight: 700;
    color: var(--cdc-ink);
    letter-spacing: -.01em;
    /* El nombre cede el ancho; el plazo, nunca: es el dato. */
    min-width: 0;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.cdc-visor__suyo-plazo {
    flex: 0 0 auto;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--cdc-cobalt-text);
}

.cdc-visor__suyo-pie { font-size: .62rem; line-height: 1.4; color: var(--cdc-cobalt-text); }
.cdc-visor__suyo--sin .cdc-visor__suyo-pie { color: var(--cdc-bark); text-wrap: pretty; }

.cdc-visor__estado {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    background: var(--cdc-cobalt-soft);
    color: var(--cdc-cobalt-text);
}

/* El registro dice otra cosa que «Vigente», o la autorizacion esta al caer. */
.cdc-visor__estado--ojo { background: var(--cdc-amber-soft); color: var(--cdc-amber-text); }

.cdc-visor__linea { font-size: .65rem; color: var(--cdc-bark); }
.cdc-visor__linea--ojo { color: var(--cdc-amber-text); font-weight: 600; }

.cdc-visor__bloque {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding-top: .6rem;
    border-top: 1px solid var(--cdc-border-subtle);
}

.cdc-visor__campo { font-size: .78rem; line-height: 1.35; color: var(--cdc-ink); text-wrap: pretty; }
.cdc-visor__campo--fuerte { font-weight: 600; }
.cdc-visor__campo--menudo { font-size: .69rem; line-height: 1.45; color: var(--cdc-bark); }

.cdc-visor__rotulo-fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
}

.cdc-visor__cuenta { font-size: .6rem; color: var(--cdc-bark); }

/* Los plazos se agrupan por dias: la ficha da una lista de cultivos por cada
   plazo, y repetir «3 días» veinte veces seria ilegible en 220 px. */
.cdc-visor__plazos { display: flex; flex-direction: column; gap: .38rem; margin-top: .25rem; }
.cdc-visor__plazo { display: flex; gap: .45rem; }

.cdc-visor__plazo-d {
    flex: 0 0 2rem;
    text-align: right;
    padding-top: .05rem;
    font-size: .78rem;
    font-weight: 500;
    color: var(--cdc-ink);
}

/* «NO PROCEDE», «NP», «NA»: no es un numero, asi que no se pinta como tal. */
.cdc-visor__plazo-d--np { font-size: .62rem; padding-top: .15rem; color: var(--cdc-bark); }

.cdc-visor__plazo-c { font-size: .69rem; line-height: 1.4; color: var(--cdc-ink-2); text-wrap: pretty; }

/* El tramo donde esta la prueba de lo que dice la tira de arriba. Marcarlo permite
   comprobar el dato en su sitio en vez de tener que fiarse. */
.cdc-visor__plazo--suyo {
    margin-left: -.35rem;
    padding: .15rem .35rem;
    border-radius: 5px;
    background: var(--cdc-cobalt-soft);
}

.cdc-visor__plazo--suyo .cdc-visor__plazo-d { font-weight: 600; color: var(--cdc-cobalt-text); }
.cdc-visor__plazo--np .cdc-visor__plazo-c { color: var(--cdc-bark); }

.cdc-visor__empresas { display: flex; flex-direction: column; gap: .5rem; }

.cdc-visor__pie {
    margin-top: auto;
    padding-top: .6rem;
    border-top: 1px solid var(--cdc-border);
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.cdc-visor__pie-fila {
    display: flex;
    justify-content: space-between;
    gap: .4rem;
    font-size: .65rem;
    color: var(--cdc-bark);
}

.cdc-visor__pie-v { color: var(--cdc-ink-2); }

/* La nota ya no empuja: dentro del pie es la ultima linea, no el fondo. */
.cdc-visor__pie .cdc-visor__nota { margin: .35rem 0 0; padding-top: 0; border-top: 0; }

.cdc-visor__nota {
    margin: auto 0 0;
    padding-top: .7rem;
    border-top: 1px solid var(--cdc-border-subtle);
    font-size: .65rem;
    line-height: 1.5;
    color: var(--cdc-bark);
    text-wrap: pretty;
}

/* El fondo gris es el del visor de PDF de los navegadores: que el marco no pelee
   con el documento que lleva dentro. */
.cdc-visor__pdf {
    background: var(--cdc-visor-fondo);
    min-height: 0;
    display: flex;
}

.cdc-visor__pdf iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.cdc-visor__sin {
    margin: auto;
    text-align: center;
    color: var(--cdc-visor-texto);
    font-size: .82rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    align-items: center;
}

.cdc-visor__sin i { font-size: 1.6rem; opacity: .6; }

/* ── Estrecho: el documento manda y la cinta de datos se va arriba ────────── */
@media (max-width: 820px) {
    .cdc-visor { padding: 0; }

    .cdc-visor__caja {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .cdc-visor__cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }

    .cdc-visor__lado {
        border-right: 0;
        border-bottom: 1px solid var(--cdc-border);
        max-height: 40vh;
    }

    /* En movil, el aviso no cabe en una linea junto al titulo. */
    .cdc-visor__aviso { white-space: normal; }
}

/* ── La barra de herramientas del mapa ───────────────────────────────────────────────────
   Envuelve, y sus botones NO se encogen. Medido el 2026-09-13 en la mesa de /conjunto: la
   barra tenía 423 px para siete botones que piden ~700, y al no envolver el navegador los
   estrujaba a 38-56 px cada uno; la etiqueta se partía letra a letra y el botón crecía a 96 px
   de alto. Envolviendo, cada botón conserva su ancho y baja a la línea siguiente. */

.cdc-mapa-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    row-gap: 0.4rem;
    margin-bottom: 8px;
}

.cdc-mapa-barra > .rz-button,
.cdc-mapa-barra > .rz-button-sm {
    flex: 0 0 auto;
    white-space: nowrap;
}

.cdc-mapa-barra__dato {
    font-size: 0.85rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* La pista de los recintos repite lo que ya dice el tooltip del botón de al lado, así que es
   la primera que sobra: en cuanto la barra se estrecha se lleva su propia línea entera en vez
   de robar ancho a los botones. */
.cdc-mapa-barra__pista {
    font-size: 0.8rem;
    flex: 1 1 14rem;
    min-width: 0;
}

/* Los separadores verticales no aportan nada cuando la barra ya va en varias líneas. */
.cdc-mapa-barra > span[style*="border-left"] {
    flex: 0 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL DEDO EN EL TELÉFONO (fase 1.6 del estudio de operatividad, 02/10/2026)
   ═══════════════════════════════════════════════════════════════════════════
   theme-custom.css ya pide 44 px a todo control por debajo de 768 px («MOBILE
   FIRST FOUNDATION»), pero el normalizador de esta hoja fija botones (30-36 px),
   campos y desplegables (38) y el botón del calendario (34) con !important, y
   gana siempre: en la ficha de tratamiento quedaban 96 de 104 controles por
   debajo de 44 px. Aquí, al final de la hoja y con el mismo !important, se
   devuelve el mínimo al teléfono. El escritorio no cambia. Las casillas se tocan
   por su etiqueta y las flechas del numérico se quedan como están: en el
   teléfono el número se escribe con el teclado. */
@media (max-width: 767px) {
    .rz-button,
    .rz-button.rz-button-sm,
    .rz-button.rz-button-md,
    .rz-button.rz-button-lg { min-height: 44px !important; }
    .rz-button.rz-button-icon-only { min-width: 44px !important; }
    .rz-textbox,
    .rz-password,
    .rz-numeric,
    .rz-mask,
    .rz-autocomplete,
    .rz-dropdown,
    .rz-multiselect,
    .rz-datepicker { min-height: 44px !important; }
    .rz-datepicker .rz-datepicker-trigger,
    .rz-datepicker .rz-button { min-width: 44px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DIÁLOGOS EN EL TELÉFONO (fase 1.4 del estudio de operatividad, 02/10/2026)
   ═══════════════════════════════════════════════════════════════════════════
   Radzen ya pone el diálogo a todo el ancho y pegado arriba por debajo de 768
   px. Faltaban dos cosas, medidas a 375 px:
   - un solo scroll: 28 diálogos traen un bloque con max-height en vh y su propio
     overflow dentro del contenido, que ya se desplaza; nueve de catorce
     diálogos abiertos tenían doble scroll. El contenido del diálogo crece hasta
     la altura de la pantalla y es lo único que se desplaza.
   - una columna por debajo de 640 px: las maquetaciones en línea con columnas
     fijas (175 en 23 ficheros) dejaban campos de 68-95 px (en «Nueva
     maquinaria», tres por fila). */
@media (max-width: 767px) {
    .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) > .rz-dialog-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .rz-dialog-content [style*="max-height"][style*="vh"] {
        max-height: none !important;
        overflow-y: visible !important;
    }
    /* El pie con el botón de guardar (la fila del botón de envío que cierra el
       formulario) se queda a la vista mientras se desplaza: en un formulario largo
       no hace falta bajar hasta el final para guardar. */
    .rz-dialog-content form div:has(> .rz-button[type="submit"]):last-child {
        position: sticky;
        bottom: 0;
        z-index: 1;
        margin-top: 8px;
        padding: 12px 0;
        background: var(--cdc-surface-card);
        border-top: 1px solid var(--cdc-border);
    }
}
@media (max-width: 639px) {
    /* Y los formularios de las fichas con pestañas, que tienen el mismo problema:
       la cabecera de la receta va en rejillas de 4, 3 y 4 columnas y dejaba 9 de
       sus 15 campos en 58-89 px, con 86 px escondidos a un lado (02/10). */
    .rz-dialog-content [style*="grid-template-columns"],
    .rz-tabview-panel form [style*="grid-template-columns"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   OTROS DESBORDES DEL TELÉFONO (fase 1.5 del estudio de operatividad, 02/10/2026)
   ═══════════════════════════════════════════════════════════════════════════
   Lo que el recorrido de 112 pantallas a 375 px seguía encontrando después de
   arreglar pestañas, fichas, diálogos y controles. Lo que es de una sola
   pantalla está en su marcado; aquí, lo que se repite. Los pasos de Radzen se
   desplazan a propósito (ver «.rz-steps > ul», decisión del 07/09). */
@media (max-width: 767px) {
    /* Fichas (tratamiento, fertilización): el contenido de cada pestaña traía su
       propio scroll (max-height en vh) dentro de la página, que ya se desplaza:
       doble scroll, igual que en los diálogos. */
    .rz-tabview-panel > [style*="max-height"][style*="vh"] {
        max-height: none !important;
        overflow: visible !important;
    }
    /* RadzenFieldset pinta la leyenda con white-space:nowrap en línea: una leyenda
       larga («Bloque 8 del CUE — actuación fitosanitaria») no se partía y se salía
       31-47 px del panel de la pestaña, escondida tras un desplazamiento lateral
       (medido el 02/10, ya con Radzen 12). */
    .rz-fieldset-legend {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
}
@media (max-width: 599px) {
    /* Ficha del titular: la botonera de la cabecera baja a su propia línea; en
       fila dejaba el nombre y el DNI en una columna de 73 px. */
    .cdc-titular-hero__inner { flex-wrap: wrap !important; }
    .cdc-titular-hero__actions { flex: 1 1 100% !important; }

    /* Fichas con pestañas: el formulario perdía 69 px por lado en capas de relleno
       (página 16, tarjeta 1 + 22, panel de la pestaña 15 y un bloque interior con
       padding:1rem en línea) y se quedaba en 237 de 375 px; en compra y receta, con
       la tarjeta dentro del panel (1.5rem en línea), en 267. En el teléfono basta el
       de la página y uno de 12 px en la tarjeta. */
    .tf-card:has(> .rz-tabview),
    .rz-tabview-panel > .tf-card { padding: 12px !important; }
    .rz-tabview-panel,
    .rz-tabview-panel > div[style*="padding: 1rem"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ===========================================================================
   SECCION 107 - LA CIFRA CON SU UNIDAD
   ===========================================================================
   CampoConUnidad: la unidad elegida en otro campo, o la del producto, pegada a la
   derecha del numero («12,50 L/ha»). No va en la etiqueta para que no cambie su
   texto: las pistas de ayuda se enganchan por el (seccion 103).
   =========================================================================== */
.cdc-campo-unidad {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.cdc-campo-unidad > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.cdc-campo-unidad__unidad {
    color: var(--cdc-mute);
    white-space: nowrap;
}