/**
 * GESTIÓN QUIMIAPAN V2 - PORTAL DEL CLIENTE (SISTEMA DE DISEÑO)
 * Ubicación: modules/portal/clientes/assets/css/gcafe-portal-clientes.css
 * Descripción: Clases maestras unificadas para un diseño de grado corporativo.
 */

/* ==========================================================================
   00. VARIABLES Y ESTÁNDARES DEL SISTEMA (FASE 3 Y 4)
   ========================================================================== */
:root {
    /* Nueva Paleta Institucional (Profundidad y Elegancia) */
    --q-gold-primary: #B08A3E;
    --q-gold-soft: #C5A15A;
    --q-green-primary: #1E3A25;
    --q-green-deep: #14281A;
    --q-beige-base: #D8CBB0;
    --q-beige-soft: #E5DAC2;
    --q-warm-white: #F8F6F1;
    --q-neutral-dark: #2B2B2B;

    /* Mapeo de compatibilidad con variables base */
    --q-green-main: var(--q-green-primary);
    --q-green-dark: var(--q-green-deep);
    --q-gold: var(--q-gold-primary);
    --q-sand: var(--q-beige-base);
    --q-black: var(--q-neutral-dark);
    --q-white: var(--q-warm-white);
    
    /* Grises y Semánticos suavizados */
    --q-gray-50: #fcfcfc;
    --q-gray-200: #e8e6e1; /* Ajustado al tono cálido */
    --q-gray-400: #a09d96;
    --q-gray-500: #66635c;
    --q-error: #c84040; /* Rojo menos chillón */
    --q-success: #2d8a4e; /* Verde éxito más profundo */
    --q-info: #2b8496;

    /* Tipografía Corporativa */
    --gcafe-font-title: 'Playfair Display', 'Times New Roman', serif; 
    --gcafe-font-data: 'Montserrat', system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Radios Estandarizados (Consistencia) */
    --gcafe-radius-sm: 4px;
    --gcafe-inner-radius: 8px;
    --gcafe-card-radius: 12px;
    --gcafe-card-interactive-radius: 12px;

    /* Sombras Estandarizadas (Profundidad visual, no planas) */
    --gcafe-shadow-sm: 0 2px 8px rgba(30, 58, 37, 0.04);
    --gcafe-shadow-base: 0 8px 24px rgba(30, 58, 37, 0.06);
    --gcafe-shadow-hover: 0 12px 32px rgba(30, 58, 37, 0.12);
    --gcafe-shadow-modal: 0 20px 40px rgba(20, 40, 26, 0.25);
}

/* Forzar la tipografía base en todo el contenedor del cliente */
.gcafe-cl-content-area,
.gcafe-ui-container {
    font-family: var(--gcafe-font-data) !important;
    color: var(--q-black);
}

/* Forzar números y negritas a Sans-Serif moderna */
strong, span, input, textarea {
    font-family: var(--gcafe-font-data);
}

/* ==========================================================================
   01. UTILITIES (Reemplazo absoluto de estilos inline)
   ========================================================================== */
/* Display & Layout */
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block { display: block !important; }
.d-none { display: none !important; }
.flex-column { flex-direction: column !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

/* Gaps */
.gap-5 { gap: 5px !important; }
.gap-10 { gap: 10px !important; }
.gap-12 { gap: 12px !important; }
.gap-15 { gap: 15px !important; }

/* Alineación de Texto */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }
.text-decoration-none { text-decoration: none !important; }

/* Márgenes y Paddings */
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 2px !important; }
.mb-4 { margin-bottom: 4px !important; }
.mb-5 { margin-bottom: 5px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-15 { margin-bottom: 15px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-25 { margin-bottom: 25px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-40 { margin-bottom: 40px !important; }

.mt-4 { margin-top: 4px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }

.ml-10 { margin-left: 10px !important; }
.p-15 { padding: 15px !important; }

/* Tipografía y Pesos */
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fst-italic { font-style: italic !important; }
.lh-1 { line-height: 1 !important; }
.lh-1-1 { line-height: 1.1 !important; }
.lh-1-2 { line-height: 1.2 !important; }
.lh-1-6 { line-height: 1.6 !important; }
.ff-mono { font-family: var(--font-mono) !important; }

/* Colores de Texto */
.text-gray-400 { color: var(--q-gray-400) !important; }
.text-gray-500 { color: var(--q-gray-500) !important; }
.text-green-dark { color: var(--q-green-dark) !important; }
.text-gold { color: var(--q-gold) !important; }
.text-error { color: var(--q-error) !important; }
.text-black { color: var(--q-black) !important; }
.text-success { color: var(--q-success) !important; }
.text-white { color: var(--q-white) !important; }

/* Tamaños de Fuente Específicos */
.text-xs { font-size: 0.7rem !important; }
.text-sm { font-size: 0.85rem !important; }
.text-md { font-size: 1.05rem !important; }
.text-lg { font-size: 1.15rem !important; }
.text-xl { font-size: 1.3rem !important; }
.text-1-6rem { font-size: 1.6rem !important; }

/* ==========================================================================
   02. LAYOUT Y CONTENEDOR PRINCIPAL
   ==========================================================================
   Un solo ancho canónico: 1100px tope, padding lateral responsivo.
   Las clases .wide/.standard quedan como alias para no romper vistas que
   todavía las usen — emiten el mismo comportamiento.
*/
/* Reserva el espacio del scrollbar siempre para evitar el micro-salto lateral
   al navegar entre vistas con contenido de distinta altura. */
html { scrollbar-gutter: stable; }

/* Ancho fluido, no fijo: TODO el bloque de contenido del portal (tabs
   principales + título + tarjetas) usa el 100% del ancho útil hasta llegar a un
   ancho de lectura cómodo (~1280px), y a partir de ahí se CENTRA en vez de
   seguir estirándose. Esto NO es un breakpoint duro — min(100%, 1280px) escala
   de forma continua en cualquier dispositivo: en móvil/tablet ocupa todo el
   ancho (y las tablas colapsan a tarjetas por sus media queries); en monitores
   anchos deja de desparramarse. La topbar sí queda edge-to-edge (la pinta
   .gcafe-portal-main), solo el contenido de lectura se acota.

   El acotado va en .gcafe-cl-content-area (el padre que envuelve tabs +
   contenido) y NO en .gcafe-ui-container, para que los tabs principales queden
   alineados con las tarjetas. Si se acotara solo el ui-container, los tabs
   —que son sus hermanos— se estirarían más anchos y "Quimiapan" sobresaldría. */
.gcafe-cl-content-area {
    max-width: min(100%, 1280px);
    margin-left: auto;
    margin-right: auto;
}
.gcafe-ui-container {
    margin: 0 auto 50px auto;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
.gcafe-ui-container > * { min-width: 0; }

@media (max-width: 992px) {
    .gcafe-ui-container { padding: 0 12px 40px 12px; }
}

/* =========================================================================
   Tabs principales del portal cliente — fila persistente arriba del header
   de cada vista. Sirve como acceso rápido a las 4 áreas vivas (contrato,
   zona, quimiapan, mensajes) desde cualquier subvista del portal sin
   depender del sidebar (clave en móvil donde el sidebar está colapsado).
   ========================================================================= */
.gcafe-cl-maintabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 18px;
    padding: 6px;
    background: var(--q-gray-100, #f7f6f1);
    border: 1px solid var(--q-gray-200, #ececec);
    border-radius: 10px;
}
.gcafe-cl-maintab {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    color: var(--q-gray-500, #6b6b6b);
    background: transparent;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.2;
    transition: background .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
}
.gcafe-cl-maintab .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 1;
}
.gcafe-cl-maintab:hover {
    color: var(--q-black, #1a1a1a);
    background: rgba(255,255,255,.6);
}
.gcafe-cl-maintab.is-active {
    color: var(--q-black, #1a1a1a);
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px var(--q-gray-200, #ececec);
}
.gcafe-cl-maintab.is-active .dashicons {
    color: var(--q-gold, #b38a2e);
}

/* Mobile: las labels se reservan para pantallas más anchas. En móvil
   solo se ve el icono — caben las 4 tabs sin desbordar. */
@media (max-width: 560px) {
    .gcafe-cl-maintab { padding: 10px 6px; gap: 0; }
    .gcafe-cl-maintab-label { display: none; }
    .gcafe-cl-maintab .dashicons { font-size: 22px; width: 22px; height: 22px; }
}

/* Header de página unificado — emitido por QM_UI_Frontend::header().
   Las vistas del portal (cliente, operarios) heredan el mismo
   aspecto: título grande + subtítulo opcional + acciones a la derecha. */
.qm-page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 20px 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--q-gray-200);
    text-align: center;
}
.qm-page-header-text { width: 100%; }
.qm-page-title {
    font-family: var(--gcafe-font-title) !important;
    font-size: clamp(1.4rem, 3.2vw, 1.9rem);
    color: var(--q-green-dark);
    font-weight: 700;
    letter-spacing: 1.5px;
    margin: 0;
    line-height: 1.15;
    text-align: center;
}
.qm-page-subtitle {
    margin: 6px 0 0;
    color: var(--q-gray-500);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}
.qm-header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
@media (max-width: 520px) {
    .qm-header-actions { width: 100%; }
    .qm-header-actions .qm-btn { flex: 1 1 auto; justify-content: center; }
}

/* Grillas Universales */
.gcafe-ui-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.gcafe-ui-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.gcafe-grid-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Estado Vacío Universal */
.gcafe-ui-empty-state {
    text-align: center;
    padding: 40px;
    color: var(--q-gray-500);
    background: var(--q-gray-50);
    border: 1px dashed var(--q-gray-400);
    border-radius: var(--gcafe-card-radius);
    font-weight: 500;
    margin-bottom: 20px;
}

/* ==========================================================================
   03. JERARQUÍA TIPOGRÁFICA
   ========================================================================== */
.gcafe-ui-section-title {
    font-family: var(--gcafe-font-title) !important;
    font-size: 1.25rem;
    color: var(--q-green-main);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--q-sand);
    text-align: center;
}
.gcafe-ui-section-title.inactive { color: var(--q-gray-400); border-color: var(--q-gray-200); }
.gcafe-ui-section-title.center-no-border { text-align: center; border-bottom: none; }

.gcafe-ui-card-title {
    font-family: var(--gcafe-font-title) !important;
    font-size: 1.1rem;
    color: var(--q-green-dark);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
}

.gcafe-ui-data-subtitle {
    font-family: var(--gcafe-font-data) !important;
    font-size: 0.85rem;
    color: var(--q-gray-500);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
}

/* ==========================================================================
   04. SISTEMA DE TARJETAS (CARDS)
   ========================================================================== */
.gcafe-ui-card {
    background: var(--q-white);
    border: 1px solid var(--q-gray-200);
    border-radius: var(--gcafe-card-radius);
    box-shadow: var(--gcafe-shadow-base);
    padding: 20px 25px;
    margin-bottom: 25px;
    overflow: hidden;
}

.gcafe-ui-card.flush { padding: 0; }
.gcafe-ui-card-body { padding: 25px 25px 10px 25px; }

.gcafe-ui-card-header-dark {
    background: var(--q-green-dark);
    color: var(--q-white);
    padding: 15px 25px;
    border-bottom: 3px solid var(--q-sand);
    text-align: center;
}
.gcafe-ui-card-header-dark h3 {
    margin: 0;
    font-family: var(--gcafe-font-title) !important;
    font-size: 1.25rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.gcafe-ui-card:not(.flush) > .gcafe-ui-card-header-dark {
    margin: -20px -25px 20px -25px; 
}
.gcafe-ui-card.flush > .gcafe-ui-card-header-dark {
    margin: 0;
    border-radius: calc(var(--gcafe-card-radius) - 1px) calc(var(--gcafe-card-radius) - 1px) 0 0;
}

/* Tarjeta Interactiva (Limpiada y Alineada a Fase 4) */
.gcafe-ui-card-interactive {
    display: block;
    text-decoration: none;
    background: var(--q-white);
    border: 1px solid var(--q-gray-200);
    border-bottom: 3px solid var(--q-beige-soft);
    border-right: 2px solid var(--q-beige-soft);
    border-radius: var(--gcafe-card-interactive-radius);
    box-shadow: var(--gcafe-shadow-sm); 
    padding: 15px 20px;
    margin-bottom: 15px;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: inherit;
}

.gcafe-ui-card-interactive:hover {
    transform: translateY(-3px) translateX(-1px);
    box-shadow: var(--gcafe-shadow-hover);
    border-bottom-color: var(--q-gold-primary);
    border-right-color: var(--q-gold-soft);
}

.gcafe-ui-card-interactive.inactive {
    background: var(--q-gray-50);
    border-color: var(--q-gray-200);
    opacity: 0.8;
}

.gcafe-ui-inner-box {
    background: var(--q-gray-50);
    border: 1px solid var(--q-gray-200);
    border-radius: var(--gcafe-inner-radius);
    padding: 20px;
    text-align: center;
}
.gcafe-ui-inner-box.left { text-align: left; }
.gcafe-ui-inner-box.compact { padding: 10px 20px; }

/* Separadores y Bordes */
.gcafe-ui-divider { border-bottom: 1px solid var(--q-gray-200); padding-bottom: 12px; margin-bottom: 12px; }
.gcafe-ui-divider:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.gcafe-ui-divider-top { border-top: 1px solid var(--q-gray-200); padding-top: 12px; margin-top: 12px; }
.border-right-light { border-right: 1px solid var(--q-gray-200); }

/* ==========================================================================
   05. BLOQUES DE MÉTRICAS (Data Blocks)
   ========================================================================== */
.gcafe-ui-metric-group { text-align: center; }
.gcafe-ui-metric-label {
    font-size: 0.75rem;
    color: var(--q-gray-500);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.gcafe-ui-metric-value {
    font-family: var(--gcafe-font-data) !important;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--q-black);
    line-height: 1.1;
}
.gcafe-ui-metric-unit { font-size: 0.9rem; color: var(--q-gray-500); font-weight: 600; }

.gcafe-ui-metric-value.green { color: var(--q-green-dark); }
.gcafe-ui-metric-value.gold { color: var(--q-gold); }
.gcafe-ui-metric-value.red { color: var(--q-error); }

/* Iconos de Sistema UI */
.gcafe-ui-icon-sm { font-size: 14px !important; width: 14px !important; height: 14px !important; vertical-align: text-top; }
.gcafe-ui-icon-md { font-size: 32px !important; width: 32px !important; height: 32px !important; }
.gcafe-ui-icon-lg { font-size: 30px; width: 30px; height: 30px; margin-bottom: 15px; }
.gcafe-ui-icon-xl { font-size: 40px; width: 40px; height: 40px; margin-bottom: 15px; }

/* ==========================================================================
   06. ETIQUETAS DE ESTADO Y GUÍAS (BADGES)
   ========================================================================== */
.gcafe-ui-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: 0.5px;
}
.gcafe-ui-badge.success { background-color: rgba(45, 138, 78, 0.15); color: var(--q-success); }
.gcafe-ui-badge.info { background-color: rgba(43, 132, 150, 0.15); color: var(--q-info); }
.gcafe-ui-badge.error { background-color: rgba(200, 64, 64, 0.15); color: var(--q-error); }
.gcafe-ui-badge.warning { background-color: rgba(176, 138, 62, 0.15); color: var(--q-gold-primary); }
.gcafe-ui-badge.neutral { background-color: var(--q-gray-200); color: var(--q-gray-500); border: 1px solid var(--q-gray-400); }
.gcafe-ui-badge.prod { background-color: var(--q-sand); color: var(--q-black); }
.gcafe-ui-badge.infra { background-color: var(--q-gray-50); color: var(--q-black); border: 1px solid var(--q-gray-400); }

/* Nuevo Badge para Guías (Monoespaciado) */
.gcafe-guide-badge {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    background: var(--q-white);
    padding: 6px 10px;
    border-radius: var(--gcafe-radius-sm);
    border: 1px solid var(--q-gray-200);
    letter-spacing: 1px;
}

/* ==========================================================================
   07. COMPONENTES ESPECÍFICOS: TIMELINE (Trazabilidad)
   ========================================================================== */
.gcafe-ui-timeline {
    border-radius: var(--gcafe-card-radius);
    overflow: hidden;
}

/* ==========================================================================
   INVENTARIO — chips de filtro, cards de lote, cards de trilla
   Vistas tontas; estos selectores evitan inline styles dispersos.
   ========================================================================== */
.gcafe-inv-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 4px 0;
}
.gcafe-inv-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--q-green-main);
    border: 1.5px solid var(--q-gray-300);
    padding: 9px 20px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.1s, box-shadow 0.18s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    cursor: pointer;
    user-select: none;
    min-width: 84px;
}
.gcafe-inv-chip:hover {
    background: var(--q-sand);
    border-color: var(--q-green-main);
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
.gcafe-inv-chip:active { transform: translateY(1px); }
.gcafe-inv-chip.active {
    background: var(--q-green-main);
    color: #fff;
    border-color: var(--q-green-main);
    box-shadow: 0 3px 10px rgba(27, 58, 34, 0.25);
}
.gcafe-inv-chip.active:hover {
    background: var(--q-green-dark);
    border-color: var(--q-green-dark);
}

.gcafe-inv-proceso-group {
    margin-bottom: 28px;
    /* Acento lateral por proceso: una banda izquierda fina conecta el
       título con los lotes del grupo. El color lo define la regla
       [data-proceso=...] de abajo. */
    border-left: 3px solid var(--gcafe-proc-accent, var(--q-gray-200, #ececec));
    padding-left: 14px;
}
.gcafe-inv-proceso-group:last-child { margin-bottom: 0; }

/* Título del proceso: jerarquía superior al nombre del lote.
   Antes era un "label" minúsculo (0.72rem uppercase gris). Ahora se lee
   como encabezado de sección — más grande, serif editorial, con el color
   semántico del proceso. */
.gcafe-inv-proceso-label {
    color: var(--gcafe-proc-accent, var(--q-black));
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 1.45rem;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    margin: 0 0 12px 0;
    padding: 0;
}

/* Identidad cromática por proceso:
   - Lavado  → azul agua (proceso húmedo, lavado con agua)
   - Honey   → ámbar miel (miel residual del mucílago)
   - Natural → café rojizo (cereza secada con pulpa)
   - Bola    → verde oliva (subproducto, categoría secundaria)
   - Blend   → dorado neutro (mezcla)
   - General → gris (sin proceso definido) */
.gcafe-inv-proceso-group[data-proceso="lavado"]  { --gcafe-proc-accent: #2e6fa3; }
.gcafe-inv-proceso-group[data-proceso="honey"]   { --gcafe-proc-accent: #b38a2e; }
.gcafe-inv-proceso-group[data-proceso="natural"] { --gcafe-proc-accent: #8a3a2e; }
.gcafe-inv-proceso-group[data-proceso="bola"]    { --gcafe-proc-accent: #6b7a3a; }
.gcafe-inv-proceso-group[data-proceso="blend"]   { --gcafe-proc-accent: #b38a2e; }
.gcafe-inv-proceso-group[data-proceso="general"] { --gcafe-proc-accent: #6b6b6b; }

.gcafe-inv-lote { padding: 15px; }
.gcafe-inv-lote-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; gap: 10px; }
.gcafe-inv-lote-sku { flex: 1; min-width: 0; }
.gcafe-inv-lote-sku strong { font-size: 0.95rem; font-weight: 800; color: var(--q-black); display: block; line-height: 1.1; margin-bottom: 4px; }
.gcafe-inv-lote-variedad {
    font-size: 0.7rem;
    color: var(--q-gold);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gcafe-inv-lote-score {
    font-weight: 800;
    display: flex;
    align-items: center;
    font-size: 0.7rem;
    flex-shrink: 0;
    background: rgba(214,205,186,0.15);
    padding: 4px 8px;
    border-radius: 6px;
}
.gcafe-inv-lote-score .dashicons { margin-right: 4px; margin-top: 2px; }
.gcafe-inv-lote-kg {
    color: var(--q-green-dark);
    font-weight: 800;
    margin-bottom: 15px;
    font-size: 1.6rem;
    line-height: 1;
}
.gcafe-inv-lote-kg span {
    font-size: 0.8rem;
    color: var(--q-gray-500);
    font-weight: 600;
}
.gcafe-inv-lote-meta {
    display: flex;
    gap: 20px;
    font-size: 0.72rem;
    color: var(--q-gray-500);
    font-weight: 600;
    padding-top: 10px;
}
.gcafe-inv-lote-meta .dashicons { opacity: 0.7; }

.gcafe-inv-trilla { padding: 15px; margin-bottom: 10px; display: block; }
.gcafe-inv-trilla-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; gap: 10px; flex-wrap: wrap; }
.gcafe-inv-trilla-head strong { font-size: 0.95rem; font-weight: 800; color: var(--q-black); display: block; }
.gcafe-inv-trilla-origen { font-size: 0.72rem; color: var(--q-gray-500); margin-top: 4px; }
.gcafe-inv-trilla-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--q-gray-500);
    font-weight: 600;
}

/* ==========================================================================
   PERFIL — Silos del contrato (silo-stage, silo-tube, silo-fill, metrics)
   Extraídos desde <style> embebido en la vista (2026-04-23 vistas tontas).
   ========================================================================== */
.gcafe-silo-card-top { border-radius: 12px 12px 0 0; border-bottom: none; margin-bottom: 0; }
.gcafe-silo-card-top > .gcafe-ui-card-header-dark { border-radius: 12px 12px 0 0; flex-wrap: wrap; gap: 10px; }
.gcafe-silo-card-top > .gcafe-ui-card-header-dark h3 { margin: 0; }
.gcafe-silo-badge-ciclo { color: #fff !important; background-color: rgba(255,255,255,0.2) !important; border: none; }

.gcafe-silo-body { padding: 20px; }

.gcafe-silo-stage {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 30px 10px;
    background: #fafafa;
    border-radius: 12px;
    height: 380px;
    margin-bottom: 0;
    border: 1px solid var(--q-gray-200);
}
.gcafe-silo-container {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}
.gcafe-silo-tube {
    width: 130px;
    height: 300px;
    background: #e5e7eb;
    border-radius: 70px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border: 6px solid #ffffff;
    box-shadow: inset 0 15px 25px rgba(0,0,0,0.08), inset 0 -5px 15px rgba(255,255,255,0.8), 0 10px 15px rgba(0,0,0,0.05);
}
.gcafe-silo-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transition: height 1.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: inset 0 10px 15px rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}
.gcafe-silo-fill.cafe   { background: linear-gradient(180deg, #8B5A2B 0%, #5C3A21 100%); }
.gcafe-silo-fill.dinero { background: linear-gradient(180deg, #10b981 0%, #059669 100%); }
.gcafe-silo-label {
    font-size: 14px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    margin-bottom: 20px;
}
.gcafe-silo-pct {
    color: #ffffff !important;
    font-weight: bold;
    font-size: 22px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9) !important;
}

.gcafe-silo-metrics-footer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 10px 20px 20px 20px;
    background: #fafafa;
    border-radius: 0 0 12px 12px;
    border: 1px solid var(--q-gray-200);
    border-top: none;
    margin-top: -1px;
    margin-bottom: 40px;
}
.gcafe-silo-metric-card { text-align: center; padding: 10px; }
.gcafe-silo-value { font-size: 26px; font-weight: 800; color: #111827; line-height: 1.2; margin-top: 5px; }
.gcafe-silo-target { font-size: 14px; color: #9ca3af; font-weight: 500; }

/* Bloques de preparación EU/AM dentro del card del contrato */
.gcafe-perfil-preps { display: flex; flex-direction: column; gap: 20px; margin-bottom: 25px; }
.gcafe-perfil-prep {
    background: var(--q-gray-50);
    border: 1px solid var(--q-gray-200);
    border-radius: 8px;
    padding: 15px;
}
.gcafe-perfil-prep-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid var(--q-gray-200);
    padding-bottom: 10px;
}
.gcafe-perfil-prep-head .precio-am { color: var(--q-info); }
.gcafe-perfil-prep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 15px; }
.gcafe-perfil-prep-grid .text-am { color: var(--q-info); }

.gcafe-perfil-resumen-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}
.gcafe-perfil-resumen-card {
    background: var(--q-gray-50);
    border: 1px solid var(--q-gray-200);
    box-shadow: none;
    margin-bottom: 0;
}
.gcafe-perfil-resumen-card.positivo { background: #f0fdf4; border-color: #bbf7d0; }
.gcafe-perfil-resumen-card.negativo { background: #fef2f2; border-color: #fecaca; }
.gcafe-perfil-resumen-card .saldo-label { color: var(--q-success); }
.gcafe-perfil-resumen-card.negativo .saldo-label,
.gcafe-perfil-resumen-card.negativo .saldo-value { color: var(--q-error); }
.gcafe-perfil-resumen-card.positivo .saldo-label,
.gcafe-perfil-resumen-card.positivo .saldo-value { color: var(--q-success); }

.gcafe-perfil-terminos {
    background: var(--q-beige-soft);
    border: 1px solid var(--q-gold-soft);
    padding: 15px;
    border-radius: 8px;
}
.gcafe-perfil-terminos p { white-space: pre-wrap; }

/* ==========================================================================
   FINCA — clima modal, biodiversidad, listado de zonas
   ========================================================================== */

/* -------- Clima: bloque "Condiciones Actuales" rico (finca) -------- */
.gcafe-climaf-updated {
    color: var(--q-gray-500);
    font-size: 0.82rem;
    font-style: italic;
    margin: 4px 0 0 0;
}
.gcafe-climaf-now {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    padding: 20px;
}
.gcafe-climaf-card {
    background: linear-gradient(135deg, #fdfcf7 0%, #f4ede0 100%);
    border: 1px solid var(--q-gold-soft);
    border-radius: 10px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.gcafe-climaf-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(27, 58, 34, 0.12);
}
.gcafe-climaf-card .gcafe-climaf-val {
    font-family: var(--gcafe-font-title), 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--q-green-dark);
    line-height: 1;
}
.gcafe-climaf-card .gcafe-climaf-val .u {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--q-gray-500);
    margin-left: 4px;
    letter-spacing: 0.5px;
}
.gcafe-climaf-card .gcafe-climaf-lab {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--q-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 6px;
}
.gcafe-climaf-card .gcafe-climaf-sub {
    font-size: 0.7rem;
    color: var(--q-gray-500);
    font-style: italic;
    margin-top: 2px;
}
.gcafe-climaf-card.temp  { border-top: 3px solid #C0392B; }
.gcafe-climaf-card.hum   { border-top: 3px solid #4aa3df; }
.gcafe-climaf-card.wind  { border-top: 3px solid #9CA3AF; }
.gcafe-climaf-card.rain  { border-top: 3px solid #5fa3c7; }
.gcafe-climaf-card.press { border-top: 3px solid #B08A3E; }
.gcafe-climaf-card.uv    { border-top: 3px solid #E8A33D; }
.gcafe-climaf-card.solar { border-top: 3px solid #D4B772; }

/* KPIs históricos (90d) */
.gcafe-climaf-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    padding: 0 20px 18px 20px;
}
.gcafe-climaf-kpi {
    background: #fff;
    border: 1px solid var(--q-gray-200);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gcafe-climaf-kpi-val {
    font-family: var(--gcafe-font-title), 'Playfair Display', serif;
    font-weight: 700;
    color: var(--q-green-dark);
    font-size: 1.05rem;
    line-height: 1.1;
}
.gcafe-climaf-kpi-lab {
    font-size: 0.68rem;
    color: var(--q-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Gráficas de clima (Chart.js) */
.gcafe-climaf-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    padding: 0 20px 18px 20px;
}
.gcafe-climaf-chart-card {
    background: #fff;
    border: 1px solid var(--q-gray-200);
    border-radius: 10px;
    padding: 14px 16px;
    min-width: 0;
}
.gcafe-climaf-chart-title {
    font-family: var(--gcafe-font-title), 'Playfair Display', serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--q-green-dark);
    margin: 0 0 10px 0;
    text-align: left;
}
.gcafe-climaf-chart-wrap {
    position: relative;
    height: 200px;
    min-width: 0;
}

@media (max-width: 600px) {
    .gcafe-climaf-now { padding: 14px; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    .gcafe-climaf-card .gcafe-climaf-val { font-size: 1.35rem; }
    .gcafe-climaf-kpis { padding: 0 14px 14px 14px; }
    .gcafe-climaf-charts { padding: 0 14px 14px 14px; }
    .gcafe-climaf-chart-wrap { height: 180px; }
}

/* Weather modal */
.gcafe-weather-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--q-gray-300);
    border-radius: 6px;
    font-size: 0.95rem;
    background: #fff;
    color: var(--q-black);
    cursor: pointer;
}
.gcafe-weather-select:focus { outline: none; border-color: var(--q-gold-primary); }
.gcafe-weather-modal .gcafe-ui-modal-body { max-height: 75vh; overflow-y: auto; }

.gcafe-weather-more { padding: 0 15px 20px 15px; }
.gcafe-weather-more a { font-size: 0.95rem; letter-spacing: 0.5px; }

/* Biodiversidad */
.gcafe-biodiv-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 520px) { .gcafe-biodiv-grid-2 { grid-template-columns: 1fr; } }
.gcafe-biodiv-card { padding: 12px; }
.gcafe-biodiv-photo {
    width: 100%;
    height: 120px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 6px;
    margin-bottom: 8px;
}
.gcafe-biodiv-ns { font-style: italic; }

/* Listado de zonas (productiva / servicio / inactiva) — mismo layout compartido */
.gcafe-zonas-list { display: flex; flex-direction: column; gap: 10px; }
.gcafe-zona-row { padding: 15px; }
.gcafe-zona-row .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
.gcafe-zona-row .zona-nombre {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gcafe-zona-row .zona-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.gcafe-zona-row .zona-ha {
    width: 65px;
    text-align: right;
    font-weight: 700;
}
.gcafe-zona-row .gcafe-ui-badge { white-space: nowrap; }

/* ==========================================================================
   DASHBOARD (Mis Compras) — notas, subproductos, badges reforzados
   ========================================================================== */
.gcafe-dash-notas {
    background-color: var(--q-beige-soft);
    border-color: var(--q-gold-soft);
}

.gcafe-dash-sub-hint {
    color: var(--q-gray-500);
    font-size: 12px;
    font-style: italic;
    margin: -8px 0 14px;
}
.gcafe-dash-sub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 30px;
}
.gcafe-dash-sub-card { padding: 16px 18px; }
.gcafe-dash-sub-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}
.gcafe-dash-sub-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 10px;
    border-top: 1px dashed #EEE;
}
.gcafe-dash-sub-price { font-style: italic; }

/* Badges reforzados (entrega contrato, pagado total) — fondo sólido */
.gcafe-ui-badge.badge-solid-success {
    background-color: #2e7d32;
    color: #fff;
}

/* ==========================================================================
   ANALYTICS — métricas con divisor, charts, matriz de conversión, top lotes
   ========================================================================== */
/* Card-métrica pequeña usada en fila de KPIs (flush + padding 15 + margen 0) */
.gcafe-ana-metric {
    margin-bottom: 0;
}
.gcafe-ana-metric.with-divider {
    border-right: 1px solid var(--q-gray-200);
}
@media (max-width: 520px) {
    .gcafe-ana-metric.with-divider { border-right: none; border-bottom: 1px solid var(--q-gray-200); }
}

/* Chart containers — altura reservada */
.gcafe-ana-chart {
    position: relative;
    width: 100%;
}
.gcafe-ana-chart.h-250 { height: 250px; }
.gcafe-ana-chart.h-200 { height: 200px; }

/* Ranking botánico / Top lotes — lista con padding horizontal limpio */
.gcafe-ana-rank-card {
    padding-left: 0;
    padding-right: 0;
}
.gcafe-ana-rank-list {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    gap: 0;
}
.gcafe-ana-rank-list.gap-10 { gap: 10px; }
.gcafe-ana-rank-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}
.gcafe-ana-rank-row.with-border { border-bottom: 1px solid var(--q-gray-100); padding-bottom: 10px; }
.gcafe-ana-rank-row .col-name { flex: 1; }
.gcafe-ana-rank-row .col-meta { text-align: right; }

.gcafe-ana-rank-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--q-gold-soft);
    min-width: 30px;
}
.gcafe-ana-rank-score {
    font-size: 1.3rem;
    font-weight: 800;
}
.gcafe-ana-rank-body {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* =========================================================================
   ANALYTICS · FLUJO EDITORIAL "De 1 tonelada a tu taza" (Sankey) + split EU/AM
   Diseño premium alineado con Green Luxury: verde oscuro, dorado, crema.
   ========================================================================= */
.gcafe-ana-flow-card {
    background: linear-gradient(135deg, #fdfcf7 0%, #f4ede0 100%);
    border-color: var(--q-gold-soft);
}
.gcafe-ana-flow-card .gcafe-ui-card-title { margin-bottom: 8px; }
.gcafe-ana-flow-intro {
    color: var(--q-gray-500);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 24px;
    max-width: 640px;
}

/* Sankey en un único SVG: el contenedor solo provee fondo y el SVG escala
   proporcionalmente con width:100%. Sin preserveAspectRatio="none", así que
   mantiene forma a cualquier zoom. Todos los textos son <text> dentro del
   SVG — escalan junto con los paths, no se desalinean nunca. */
.gcafe-ana-flow {
    background: #fff;
    border: 1px solid var(--q-gray-200);
    border-radius: 10px;
    padding: 18px 22px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
}
.gcafe-ana-flow-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 360px;
}
.gcafe-ana-flow-svg .gcafe-ana-flow-kg {
    font-family: var(--gcafe-font-title), 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    fill: #fff;
    paint-order: stroke;
    stroke: rgba(0,0,0,0.25);
    stroke-width: 0.5;
}
.gcafe-ana-flow-svg .gcafe-ana-flow-kg.featured { font-size: 20px; }
.gcafe-ana-flow-svg .gcafe-ana-flow-u {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    fill: #fff;
    opacity: 0.75;
}
.gcafe-ana-flow-svg .gcafe-ana-flow-label {
    font-family: var(--gcafe-font-title), 'Playfair Display', serif;
    font-size: 13px;
    font-weight: 600;
    fill: #1B3A22;
}
.gcafe-ana-flow-svg .gcafe-ana-flow-label.featured { fill: #0D1E12; }
.gcafe-ana-flow-svg .gcafe-ana-flow-sub {
    font-size: 10px;
    font-style: italic;
    fill: #6b7280;
}
.gcafe-ana-flow-svg .gcafe-ana-flow-merma {
    font-family: var(--gcafe-font-title), 'Playfair Display', serif;
    font-size: 13px;
    font-weight: 700;
    fill: #C84040;
}

.gcafe-ana-flow-delta-wrap {
    text-align: center;
    margin-top: 12px;
}
.gcafe-ana-flow-delta {
    font-size: 0.82rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    display: inline-block;
    white-space: nowrap;
}
.gcafe-ana-flow-delta.delta-up   { background: rgba(45, 138, 78, 0.14);  color: var(--q-success); }
.gcafe-ana-flow-delta.delta-down { background: rgba(200, 64, 64, 0.14);  color: var(--q-error); }

.gcafe-ana-flow-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 18px;
    font-size: 0.72rem;
    color: var(--q-gray-500);
}
.gcafe-ana-flow-legend .item { display: flex; align-items: center; gap: 6px; }
.gcafe-ana-flow-legend .dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}
.gcafe-ana-flow-legend .dot.cereza    { background: #C0392B; }
.gcafe-ana-flow-legend .dot.pergamino { background: #B08A3E; }
.gcafe-ana-flow-legend .dot.verde     { background: #1B3A22; }
.gcafe-ana-flow-legend .dot.tostado   { background: #3E2723; }
.gcafe-ana-flow-legend .item.dashed .line {
    width: 22px;
    height: 0;
    border-top: 2px dashed #B08A3E;
    display: inline-block;
}

.gcafe-ana-flow-summary {
    margin-top: 20px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--q-gold-soft);
    border-radius: 8px;
    text-align: center;
    font-size: 0.92rem;
    color: var(--q-black);
    line-height: 1.55;
}
.gcafe-ana-flow-summary strong {
    color: var(--q-green-dark);
    font-size: 1.05rem;
}
.gcafe-ana-flow-summary .industria {
    color: var(--q-gray-500);
    font-size: 0.82rem;
    font-style: italic;
}
.gcafe-ana-flow-summary .delta {
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.82rem;
}
.gcafe-ana-flow-summary .delta.delta-up   { background: rgba(45, 138, 78, 0.14);  color: var(--q-success); }
.gcafe-ana-flow-summary .delta.delta-down { background: rgba(200, 64, 64, 0.14);  color: var(--q-error); }

@media (max-width: 600px) {
    .gcafe-ana-flow { padding: 12px 10px; }
    .gcafe-ana-flow-svg { max-height: 260px; }
    .gcafe-ana-flow-svg .gcafe-ana-flow-kg { font-size: 16px; }
    .gcafe-ana-flow-svg .gcafe-ana-flow-kg.featured { font-size: 17px; }
    .gcafe-ana-flow-svg .gcafe-ana-flow-label { font-size: 11px; }
    .gcafe-ana-flow-svg .gcafe-ana-flow-sub { font-size: 9px; }
    .gcafe-ana-flow-svg .gcafe-ana-flow-merma { font-size: 11px; }
}

/* =========================================================================
   ANALYTICS · SPLIT EU/AM  "¿Qué llega a ti?"
   Infografía editorial con barra segmentada + tarjetas por clasificación.
   ========================================================================= */
.gcafe-ana-split-card {
    background: #fff;
    border-color: var(--q-gray-200);
}
.gcafe-ana-split-card .gcafe-ui-card-title { margin-bottom: 8px; }
.gcafe-ana-split-intro {
    color: var(--q-gray-500);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 22px;
    max-width: 640px;
}

.gcafe-ana-split-bar {
    display: flex;
    width: 100%;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.15);
    margin-bottom: 20px;
}
.gcafe-ana-split-bar .seg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    position: relative;
    transition: flex 0.8s ease;
}
.gcafe-ana-split-bar .seg-eu  { background: linear-gradient(135deg, #B08A3E 0%, #7A5D1F 100%); }
.gcafe-ana-split-bar .seg-am  { background: linear-gradient(135deg, #2B8496 0%, #1A5A68 100%); }
.gcafe-ana-split-bar .seg-alt { background: linear-gradient(135deg, #8A8078 0%, #5E5650 100%); }
.gcafe-ana-split-bar .seg-val { text-shadow: 0 1px 3px rgba(0,0,0,0.35); }

.gcafe-ana-split-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.gcafe-ana-split-item {
    background: #fafaf7;
    border: 1px solid var(--q-gray-200);
    border-radius: 10px;
    padding: 16px 18px;
    position: relative;
    border-top: 4px solid var(--q-gray-300);
}
.gcafe-ana-split-item.eu  { border-top-color: #B08A3E; }
.gcafe-ana-split-item.am  { border-top-color: #2B8496; }
.gcafe-ana-split-item.alt { border-top-color: #8A8078; }

.gcafe-ana-split-item .head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.gcafe-ana-split-item .head .swatch {
    width: 12px; height: 12px; border-radius: 3px;
}
.gcafe-ana-split-item.eu  .swatch { background: #B08A3E; }
.gcafe-ana-split-item.am  .swatch { background: #2B8496; }
.gcafe-ana-split-item.alt .swatch { background: #8A8078; }
.gcafe-ana-split-item .name {
    font-family: var(--gcafe-font-title), serif;
    color: var(--q-green-dark);
    font-weight: 600;
    font-size: 0.95rem;
}
.gcafe-ana-split-item .kg {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--q-black);
    line-height: 1;
    margin: 4px 0 8px;
    font-family: var(--gcafe-font-title), serif;
}
.gcafe-ana-split-item .kg .u {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--q-gray-500);
    margin-left: 3px;
}
.gcafe-ana-split-item .precio {
    font-size: 0.75rem;
    color: var(--q-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}
.gcafe-ana-split-item .valor {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--q-gold-primary);
    margin-top: 4px;
}
.gcafe-ana-split-item.am  .valor { color: var(--q-info); }
.gcafe-ana-split-item .desc {
    font-size: 0.76rem;
    color: var(--q-gray-500);
    line-height: 1.4;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--q-gray-200);
    font-style: italic;
}

.gcafe-ana-split-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #1B3A22 0%, #0D1E12 100%);
    border-radius: 10px;
    color: #fff;
    flex-wrap: wrap;
    margin-top: 10px;
}
.gcafe-ana-split-total .lbl {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--q-sand);
    font-weight: 600;
}
.gcafe-ana-split-total .val {
    font-family: var(--gcafe-font-title), serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--q-gold-primary);
}

/* Eficiencia (métrica grande centrada) */
.gcafe-ana-eficiencia {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.gcafe-ana-eficiencia .gcafe-ui-metric-value.xl {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
}
.gcafe-ui-timeline-stage {
    background: var(--q-white);
    border: 1px solid var(--q-gray-200);
    padding: 20px 30px;
    border-bottom: none;
    transition: background 0.3s;
}
.gcafe-ui-timeline-stage:last-child { border-bottom: 1px solid var(--q-gray-200); }
.gcafe-ui-timeline-stage:hover { background: var(--q-gray-50); }

.gcafe-ui-timeline-stage.pending { background: var(--q-white); opacity: 0.6; }
.gcafe-ui-timeline-title {
    font-family: var(--gcafe-font-title) !important;
    font-size: 1.1rem;
    color: var(--q-green-dark);
    border-bottom: 1px solid var(--q-gray-200);
    padding-bottom: 8px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.gcafe-ui-timeline-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    color: var(--q-black);
    margin-bottom: 10px;
}
.gcafe-ui-timeline-row span { font-weight: 600; color: var(--q-gray-500); }
.gcafe-ui-timeline-row strong { font-weight: 700; text-align: right; }
.gcafe-ui-timeline-row:last-child { margin-bottom: 0; }

/* ==========================================================================
   08. COMPONENTES ESPECÍFICOS: FORMULARIOS DE PERFIL
   ========================================================================== */
.gcafe-ui-form-group { margin-bottom: 20px; }
.gcafe-ui-input-wrapper { position: relative; display: block; }

.gcafe-ui-edit-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--q-gray-500);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
textarea ~ .gcafe-ui-edit-icon { top: 15px; transform: none; }

.gcafe-ui-input {
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--gcafe-inner-radius);
    transition: all 0.3s ease;
    color: var(--q-black) !important;
    font-family: var(--gcafe-font-data);
}

.gcafe-ui-input:disabled {
    background: transparent !important;
    border: 1px solid transparent !important;
    opacity: 1 !important;
    padding: 10px 0 !important;
    cursor: default;
}

.gcafe-ui-input:not(:disabled) {
    background: var(--q-gray-50) !important;
    border: 1px solid var(--q-gray-200) !important;
    padding: 10px 40px 10px 12px !important;
}

.gcafe-ui-input-wrapper input:not(:disabled) ~ .gcafe-ui-edit-icon,
.gcafe-ui-input-wrapper textarea:not(:disabled) ~ .gcafe-ui-edit-icon {
    opacity: 1;
}

.gcafe-ui-input:not(:disabled):focus {
    background: var(--q-white) !important;
    border-color: var(--q-gold) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(176, 138, 62, 0.2) !important;
}

.gcafe-ui-input.rs { font-weight: 700; font-size: 1.1rem; }
.gcafe-ui-input.rfc { font-family: var(--font-mono); font-weight: 700; letter-spacing: 1px; }

/* ==========================================================================
   09. COMPONENTES ESPECÍFICOS: MODALES Y GALERÍA
   ========================================================================== */
.gcafe-ui-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-bottom: 30px; }
.gcafe-ui-gallery-item { display: block; border-radius: var(--gcafe-inner-radius); overflow: hidden; box-shadow: var(--gcafe-shadow-sm); transition: transform 0.2s; cursor: pointer; aspect-ratio: 1/1; position: relative; }
.gcafe-ui-gallery-item:hover { transform: translateY(-3px); box-shadow: var(--gcafe-shadow-hover); }
.gcafe-ui-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.gcafe-ui-gallery-item:hover img { transform: scale(1.05); }
.gcafe-ui-gallery-title { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(20,40,26,0.8), transparent); color: var(--q-white); padding: 15px 10px 8px; font-size: 0.75rem; font-weight: 600; text-align: center; opacity: 0; transition: opacity 0.2s; }
.gcafe-ui-gallery-item:hover .gcafe-ui-gallery-title { opacity: 1; }

/* Modales */
.gcafe-ui-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(20,40,26,0.6); z-index: 9999; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.gcafe-ui-modal-box { background: var(--q-white); width: 90%; max-width: 500px; border-radius: var(--gcafe-card-radius); box-shadow: var(--gcafe-shadow-modal); overflow: hidden; }
.gcafe-ui-modal-header { background: var(--q-green-dark); color: var(--q-white); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
.gcafe-ui-modal-title { margin: 0; font-family: var(--gcafe-font-title) !important; font-size: 1.15rem; letter-spacing: 1px; text-transform: uppercase; }
.gcafe-ui-modal-close { background: transparent; border: none; color: var(--q-white); cursor: pointer; font-size: 24px; line-height: 1; transition: color 0.2s; }
.gcafe-ui-modal-close:hover { color: var(--q-gold-primary); }
.gcafe-ui-modal-body { padding: 20px; max-height: 60vh; overflow-y: auto; }
.gcafe-ui-modal-footer { padding: 15px 20px; border-top: 1px solid var(--q-gray-200); text-align: right; background: var(--q-gray-50); }

/* Lightbox */
.gcafe-ui-lightbox { display: none; position: fixed; z-index: 99999; top: 0; left: 0; width: 100%; height: 100%; background: rgba(20, 40, 26, 0.95); align-items: center; justify-content: center; flex-direction: column; }
.gcafe-ui-lightbox.active { display: flex; }
.gcafe-ui-lightbox img { max-width: 90%; max-height: 80vh; border-radius: 4px; box-shadow: var(--gcafe-shadow-modal); }
.gcafe-ui-lightbox-caption { color: var(--q-white); margin-top: 15px; font-size: 1rem; font-family: var(--gcafe-font-title); letter-spacing: 1px; }
.gcafe-lightbox-close { position: absolute; top: 20px; right: 30px; font-size: 40px; color: var(--q-white); cursor: pointer; transition: color 0.3s; }
.gcafe-lightbox-close:hover { color: var(--q-gold-primary); }

/* ==========================================================================
   10. COMPONENTES DEL HOME, ALERTAS Y BOTONES UI
   ========================================================================== */
.gcafe-ui-flex-between { display: flex; justify-content: space-between; align-items: center; }

/* Botones Adicionales */
.gcafe-ui-top-btn-container { text-align: right; margin-bottom: 20px; }
.gcafe-ui-btn-custom { background: var(--q-white) !important; border-color: var(--q-green-main) !important; color: var(--q-green-main) !important; }
.gcafe-ui-btn-transparent { background: transparent !important; color: var(--q-white) !important; border-color: rgba(248,246,241,0.5) !important; }
.gcafe-ui-btn-transparent:hover { background: rgba(248,246,241,0.1) !important; border-color: var(--q-white) !important; }

/* Mapas */
.gcafe-ui-map-wrapper { border-radius: var(--gcafe-card-radius); margin-bottom: 30px; box-shadow: var(--gcafe-shadow-sm); overflow: hidden; border: 1px solid var(--q-gray-200); }
.gcafe-map-canvas { height: 450px; width: 100%; z-index: 1; }
.gcafe-ui-map-footer { background: var(--q-green-dark); padding: 10px; text-align: center; color: var(--q-sand); font-weight: 700; letter-spacing: 2px; font-size: 0.8rem; font-family: var(--gcafe-font-data); }

/* Clases exclusivas del HOME */
.gcafe-ui-home-header { color: var(--q-green-dark); opacity: 0.6; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; border-bottom: 1px dashed var(--q-gray-200); padding-bottom: 8px; margin: 10px 0 20px 0; }

.gcafe-warning-box-danger {
    background: rgba(200, 64, 64, 0.05);
    border: 2px solid rgba(200, 64, 64, 0.3);
    padding: 15px 20px;
    border-radius: var(--gcafe-card-radius);
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    text-align: left;
    max-width: 800px;
    margin: 40px auto 0 auto;
    box-shadow: var(--gcafe-shadow-sm);
}

.gcafe-home-btn { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 15px !important; }
.gcafe-home-icon { font-size: 40px; width: 40px; height: 40px; color: var(--q-green-main); margin-bottom: 15px; transition: color 0.3s; display: flex; align-items: center; justify-content: center; }
.gcafe-home-btn:hover .gcafe-home-icon { color: var(--q-gold-primary); }

/* Tarjeta Mensajes — badge de no-leídos sobre el icono. */
.gcafe-home-btn-msgs { position: relative; }
.gcafe-home-msg-badge {
    position: absolute;
    top: 18px;
    right: calc(50% - 28px);
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: #d62828;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
    letter-spacing: 0;
    pointer-events: none;
}

/* Hero de bienvenida (home) */
.gcafe-home-hero {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 36px;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(212, 183, 114, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 80%, rgba(27, 58, 34, 0.35) 0%, transparent 60%),
        linear-gradient(135deg, #1B3A22 0%, #0D1E12 55%, #3E2723 100%);
    box-shadow: 0 10px 30px rgba(13, 30, 18, 0.18);
}
.gcafe-home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.04) 0%, transparent 40%),
        radial-gradient(circle at 80% 60%, rgba(255,255,255,0.03) 0%, transparent 40%);
    pointer-events: none;
}
.gcafe-home-hero-inner {
    position: relative;
    padding: 56px 40px;
    text-align: center;
    z-index: 1;
}
.gcafe-home-hero-logo {
    margin: 0 auto 14px auto;
    display: flex;
    justify-content: center;
    opacity: 0.9;
}
.gcafe-home-hero-logo img {
    height: 52px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.75;
}
@media (max-width: 600px) {
    .gcafe-home-hero-logo img { height: 42px; }
}
.gcafe-home-hero-eyebrow {
    color: var(--q-gold-soft);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin: 0 0 14px 0;
}
.gcafe-home-hero-title {
    font-family: var(--gcafe-font-title), 'Playfair Display', serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 600;
    color: #fdfcf7;
    line-height: 1.15;
    margin: 0 0 12px 0;
    letter-spacing: 0.2px;
}
.gcafe-home-hero-title span {
    color: var(--q-gold-primary);
    font-style: italic;
}
.gcafe-home-hero-sub {
    color: rgba(253, 252, 247, 0.78);
    font-size: 1rem;
    font-style: italic;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.55;
}
@media (max-width: 600px) {
    .gcafe-home-hero-inner { padding: 40px 20px; }
    .gcafe-home-hero-sub  { font-size: 0.92rem; }
}

/* Grid de 4 botones centrado (no más alineados a la izquierda) */
.gcafe-home-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    max-width: 880px;
    margin: 0 auto 40px auto;
}
@media (max-width: 520px) {
    .gcafe-home-actions { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Link discreto al pie + modal de información confidencial */
.gcafe-home-footer-note {
    text-align: center;
    padding: 30px 0 10px 0;
}
.gcafe-home-confidencial-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--q-gray-500);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.3px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}
.gcafe-home-confidencial-link:hover {
    color: var(--q-green-dark);
    background: rgba(27, 58, 34, 0.05);
}
.gcafe-home-confidencial-link .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}
.gcafe-home-modal-confidencial { max-width: 520px; }

/* ==========================================================================
   11. COMPONENTES JS Y ESTADOS INTERACTIVOS (Reemplazo de Element.Style)
   ========================================================================== */
/* Tooltip de Leaflet Limpio */
.gcafe-map-tooltip-container { text-align: center; font-family: var(--gcafe-font-data); }
.gcafe-map-tooltip-title { color: var(--q-green-dark); font-size: 14px; text-transform: uppercase; font-weight: bold; margin: 0 0 2px 0; }
.gcafe-map-tooltip-desc { color: var(--q-gray-500); font-size: 12px; }
.gcafe-map-tooltip-status { color: var(--q-error); font-size: 10px; display: block; margin-top: 2px; }
.gcafe-map-tooltip-action { color: var(--q-green-main); font-size: 10px; font-weight: bold; margin-top: 4px; display: block; }

/* Estado Guardado Perfil JS */
.is-saved-state {
    background-color: var(--q-success) !important;
    border-color: var(--q-success) !important;
    color: var(--q-white) !important;
    pointer-events: none !important;
}

/* ==========================================================================
   12. SECNAV — Nav sticky con scrollspy (reusable por vistas largas).
   Markup: <nav class="gcafe-ui-secnav"><div class="gcafe-ui-secnav-inner">
              <a href="#sec-id" class="gcafe-ui-secnav-link">Label</a>...
           </div></nav>
   ========================================================================== */
.gcafe-ui-secnav {
    /* Sticky CSS no funcionaba consistentemente dentro del scope dark
       (probable interacción con border-radius/padding del .gcafe-qcedc-theme +
       wrappers flex del portal). Usamos JS fixed-on-scroll: por defecto
       position: relative; cuando el JS detecta scroll, agrega .is-stuck que
       lo fija al borde superior con position: fixed. El placeholder vacío
       conserva la altura para evitar el "salto" visual. */
    position: relative;
    z-index: 1000;
    background: var(--q-white);
    border-bottom: 1px solid var(--q-gray-200);
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.gcafe-ui-secnav.is-stuck {
    position: fixed;
    top: 0;
    /* left/width los aporta el JS leyendo el placeholder, para respetar el
       ancho del .gcafe-portal-content en lugar del viewport completo. */
}
.gcafe-ui-secnav-spacer { display: none; }
.gcafe-ui-secnav.is-stuck + .gcafe-ui-secnav-spacer { display: block; }
.gcafe-ui-secnav-inner {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 12px;
    max-width: 1400px;
    margin: 0 auto;
}
.gcafe-ui-secnav-inner::-webkit-scrollbar { display: none; }
.gcafe-ui-secnav-link {
    position: relative;
    padding: 14px 18px;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--q-gray-500);
    white-space: nowrap;
    text-decoration: none;
    transition: color .18s ease;
}
.gcafe-ui-secnav-link:hover { color: var(--q-gold-primary); }
.gcafe-ui-secnav-link::after {
    content: '';
    position: absolute;
    left: 18px; right: 18px; bottom: 6px;
    height: 2px;
    background: var(--q-gold-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s ease;
}
.gcafe-ui-secnav-link.is-active { color: var(--q-gold-primary); }
.gcafe-ui-secnav-link.is-active::after { transform: scaleX(1); }

/* Mobile: oculta el listado horizontal, muestra un botón "Secciones ▾" que
   despliega la lista vertical. Evita el horizontal scroll que se veía con
   9 items en pantallas chicas. */
.gcafe-ui-secnav-toggle {
    display: none;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 14px 18px;
    color: var(--q-gray-500);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    font-family: inherit;
}
.gcafe-ui-secnav-toggle .gcafe-ui-secnav-toggle-current {
    color: var(--q-gold-primary);
    flex: 1;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gcafe-ui-secnav-toggle .dashicons {
    transition: transform .18s ease;
    font-size: 16px; width: 16px; height: 16px;
}
.gcafe-ui-secnav-toggle[aria-expanded="true"] .dashicons { transform: rotate(180deg); }

@media (max-width: 720px) {
    .gcafe-ui-secnav-toggle { display: flex; }
    .gcafe-ui-secnav-inner {
        display: none;
        flex-direction: column;
        gap: 0;
        padding: 0;
        border-top: 1px solid var(--q-gray-200);
    }
    .gcafe-ui-secnav.is-open .gcafe-ui-secnav-inner { display: flex; }
    .gcafe-ui-secnav-link {
        padding: 12px 18px;
        border-bottom: 1px solid var(--q-gray-200);
    }
    .gcafe-ui-secnav-link:last-child { border-bottom: 0; }
    .gcafe-ui-secnav-link::after { display: none; }
    .gcafe-ui-secnav-link.is-active {
        background: rgba(212,168,67,.1);
    }
}

/* ==========================================================================
   13. THEME DARK QC-EDC — Scope que repinta containers, cards, badges, links
   y headers para la vista exclusiva QC-EDC sin duplicar componentes.
   Aplicar añadiendo `.gcafe-qcedc-theme` al wrapper raíz de la vista.
   ========================================================================== */
/* 2026-05-15: theme QC-EDC convertido de dark editorial a paleta CLARA
   del portal. Las 53 reglas heredadas siguen aplicando, pero ahora pintan
   sobre fondo claro porque las variables `--gqd-*` se reasignaron a los
   tokens del portal. Conserva tipografía editorial y layout co-branded.
   La identidad QC-EDC vive ahora en los acentos dorados/verdes, no en
   un theme dark completo. */
.gcafe-qcedc-theme {
    --gqd-bg:         #ffffff;
    --gqd-bg-alt:     #faf9f4;
    --gqd-surface:    #ffffff;
    --gqd-surface-2:  #faf9f4;
    --gqd-text:       #1a1a1a;
    --gqd-text-dim:   #4a4a4a;
    --gqd-text-mute:  #8a8a8a;
    --gqd-line:       #ececec;
    --gqd-gold:       #b38a2e;
    --gqd-green:      #2e5a3a;
    --gqd-radius:     6px;
    background: var(--gqd-bg);
    color: var(--gqd-text);
    font-family: inherit;  /* hereda fuente del portal en vez de forzar Inter */
    border-radius: 0;
    padding: 0;
}
.gcafe-qcedc-theme a { color: inherit; }
.gcafe-qcedc-theme strong { color: var(--gqd-text); }
.gcafe-qcedc-theme .gcafe-ui-card {
    background: var(--gqd-surface);
    color: var(--gqd-text);
    border: 1px solid var(--gqd-line);
    border-radius: var(--gqd-radius);
}
.gcafe-qcedc-theme .gcafe-ui-card-body { color: var(--gqd-text-dim); }
.gcafe-qcedc-theme .gcafe-ui-section-title {
    color: var(--gqd-text);
    border-bottom-color: var(--gqd-line);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
}
.gcafe-qcedc-theme .gcafe-ui-section-title.center-no-border { border-bottom: 0; text-align: center; }
.gcafe-qcedc-theme .gcafe-ui-data-subtitle { color: var(--gqd-text-dim); }
.gcafe-qcedc-theme .gcafe-ui-badge.warning,
.gcafe-qcedc-theme .gcafe-ui-badge.gold {
    background: rgba(212,168,67,.16);
    color: var(--gqd-gold);
    border: 1px solid rgba(212,168,67,.35);
}
.gcafe-qcedc-theme .gcafe-ui-badge.neutral {
    background: var(--gqd-surface-2);
    color: var(--gqd-text-dim);
    border: 1px solid var(--gqd-line);
}
.gcafe-qcedc-theme .gcafe-ui-secnav {
    background: rgba(14,20,16,.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gqd-line);
    box-shadow: 0 8px 22px -18px rgba(0,0,0,.6);
}
.gcafe-qcedc-theme .gcafe-ui-secnav-link { color: var(--gqd-text-dim); }
.gcafe-qcedc-theme .gcafe-ui-secnav-link:hover { color: var(--gqd-gold); }
.gcafe-qcedc-theme .gcafe-ui-secnav-link.is-active { color: var(--gqd-gold); }
.gcafe-qcedc-theme .gcafe-ui-secnav-link.is-active::after { background: var(--gqd-gold); }
.gcafe-qcedc-theme .gcafe-ui-secnav-toggle { color: var(--gqd-text-dim); }
.gcafe-qcedc-theme .gcafe-ui-secnav-toggle .gcafe-ui-secnav-toggle-current { color: var(--gqd-gold); }
@media (max-width: 720px) {
    .gcafe-qcedc-theme .gcafe-ui-secnav-inner { border-top-color: var(--gqd-line); }
    .gcafe-qcedc-theme .gcafe-ui-secnav-link { border-bottom-color: var(--gqd-line); }
    .gcafe-qcedc-theme .gcafe-ui-secnav-link.is-active { background: rgba(212,168,67,.12); }
}

/* Tipografía grande de títulos en QC-EDC: el usuario pidió que los títulos
   de sección ("Decisión de siembra", "Cuánto va a producir"...) y subtítulos
   ("Cuántas plantas caben...", "Timeline anual...") se vieran como titulares
   fuertes. Solo aplica dentro del scope dark, no afecta a /taza pública. */
.gcafe-qcedc-theme .tl-section-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(2.2rem, 5.5vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
}
.gcafe-qcedc-theme .tl-eyebrow {
    font-size: 12px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gqd-gold);
    margin-bottom: 14px;
}
.gcafe-qcedc-theme .tl-section-sub {
    font-size: 1.05rem;
    color: var(--gqd-text-dim);
    line-height: 1.55;
    max-width: 720px;
    margin: 14px auto 0;
}
.gcafe-qcedc-theme .gcafe-qcedc-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(1.7rem, 3.5vw, 2.2rem);
    line-height: 1.2;
    color: var(--gqd-text);
    margin: 36px 0 18px;
    text-align: center;
}

/* Header co-branded: Quimiapan (light) en esquina superior izquierda,
   título centrado, EDC en esquina superior derecha. Logos chicos (50% del
   tamaño original) para no robar protagonismo al título QC-EDC. */
.gcafe-qcedc-theme .gcafe-qcedc-header {
    position: relative;
    text-align: center;
    padding: 28px 0 8px;
}
.gcafe-qcedc-theme .gcafe-qcedc-lockup {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(28px, 4.5vw, 55px);
    margin-bottom: 14px;
}
.gcafe-qcedc-theme .gcafe-qcedc-lockup-logo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: clamp(28px, 4.5vw, 55px);
    width: auto;
    object-fit: contain;
    display: block;
}
.gcafe-qcedc-theme .gcafe-qcedc-lockup-logo-finca   { left: 0; }
.gcafe-qcedc-theme .gcafe-qcedc-lockup-logo-cliente { right: 0; }
.gcafe-qcedc-theme .gcafe-qcedc-title {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(2.6rem, 7vw, 4.8rem);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--gqd-text);
}
.gcafe-qcedc-theme .gcafe-qcedc-sub {
    max-width: 720px;
    margin: 14px auto 0;
    color: var(--gqd-text-dim);
    font-size: 1rem;
    line-height: 1.55;
    text-align: center;
}
@media (max-width: 720px) {
    .gcafe-qcedc-theme .gcafe-qcedc-lockup-logo { height: 26px; }
}

/* El mapa Leaflet debe quedar SIEMPRE por debajo del secnav sticky cuando
   se monten visualmente. Por defecto Leaflet usa z-index hasta 700 en sus
   controles, lo que hacía que asomaran encima del nav al hacer scroll. */
.gcafe-qcedc-theme .leaflet-container,
.gcafe-qcedc-theme .leaflet-pane,
.gcafe-qcedc-theme .leaflet-top,
.gcafe-qcedc-theme .leaflet-bottom,
.gcafe-qcedc-theme .leaflet-control { z-index: 1; }
.gcafe-qcedc-theme .leaflet-tile-pane    { z-index: 200; }
.gcafe-qcedc-theme .leaflet-overlay-pane { z-index: 400; }
.gcafe-qcedc-theme .leaflet-marker-pane  { z-index: 600; }
.gcafe-qcedc-theme .leaflet-tooltip-pane { z-index: 650; }
.gcafe-qcedc-theme .leaflet-popup-pane   { z-index: 700; }
/* Caps absolutos: nada del mapa pasa de 900, secnav sticky vive en 1000+ */
.gcafe-qcedc-theme .leaflet-control-zoom,
.gcafe-qcedc-theme .leaflet-control-attribution { z-index: 800; }

/* Bloque "Cómo llegar a Quimiapan" — lista compacta de orígenes con su
   modo, distancia y tiempo. Tarjeta estrecha y discreta: la página tiene
   info más importante, esto es referencia rápida. */
.gcafe-qcedc-distancias {
    display: flex;
    flex-direction: column;
    max-width: 560px;
    margin: 0 auto;
    background: var(--gqd-surface);
    border: 1px solid var(--gqd-line);
    border-radius: var(--gqd-radius);
    padding: 6px 16px;
    font-size: 0.82rem;
}
.gcafe-qcedc-distrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--gqd-line);
}
.gcafe-qcedc-distrow:last-child { border-bottom: 0; }
.gcafe-qcedc-distfrom {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--gqd-text);
    font-size: 0.85rem;
    line-height: 1.35;
}
.gcafe-qcedc-distfrom small {
    font-size: 0.7rem;
    color: var(--gqd-text-mute);
    line-height: 1.4;
    font-style: italic;
}
.gcafe-qcedc-distmode {
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gqd-gold);
    font-weight: 600;
}
.gcafe-qcedc-distmeta {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
    text-align: right;
    color: var(--gqd-text-mute);
    font-size: 0.7rem;
    white-space: nowrap;
}
.gcafe-qcedc-distmeta strong {
    color: var(--gqd-text);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-weight: 500;
}
.gcafe-qcedc-distmeta strong + span { margin-left: 1px; margin-right: 4px; }
.gcafe-qcedc-distrow-multi .gcafe-qcedc-distmeta { flex-direction: row; }
@media (max-width: 600px) {
    .gcafe-qcedc-distrow {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .gcafe-qcedc-distmeta {
        justify-content: flex-start;
        text-align: left;
    }
}

/* Link de descarga del PDF del polígono (debajo del Leaflet). */
.gcafe-qcedc-pdf-link-wrap {
    text-align: center;
    margin: 18px 0 28px;
}
.gcafe-qcedc-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--gqd-gold);
    border-radius: 999px;
    color: var(--gqd-gold);
    font-size: 0.85rem;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}
.gcafe-qcedc-pdf-link:hover {
    background: var(--gqd-gold);
    color: var(--gqd-bg);
}
.gcafe-qcedc-pdf-link .dashicons {
    font-size: 16px; width: 16px; height: 16px;
}

/* Tarjeta de inversión inicial: bloques desmonte + costo de planta. */
.gcafe-qcedc-investment {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    max-width: 900px;
    margin: 0 auto;
}
.gcafe-qcedc-invblock {
    background: var(--gqd-surface);
    border: 1px solid var(--gqd-line);
    border-radius: var(--gqd-radius);
    padding: 22px 24px;
}
.gcafe-qcedc-invlabel {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gqd-gold);
    font-weight: 600;
    margin-bottom: 16px;
}
.gcafe-qcedc-invrows {
    display: flex;
    flex-direction: column;
}
.gcafe-qcedc-invrow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--gqd-line);
    color: var(--gqd-text-dim);
    font-size: 0.9rem;
    gap: 12px;
}
.gcafe-qcedc-invrow:last-child { border-bottom: 0; }
.gcafe-qcedc-invrow strong {
    color: var(--gqd-text);
    font-weight: 600;
    text-align: right;
}
.gcafe-qcedc-invrow-result {
    background: rgba(212,168,67,.06);
    margin: 0 -10px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 6px;
}
.gcafe-qcedc-invrow-final {
    border-top: 2px solid var(--gqd-gold);
    margin-top: 6px;
    padding-top: 14px;
}
.gcafe-qcedc-invrow-final strong {
    color: var(--gqd-gold);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 500;
}
.gcafe-qcedc-invfoot {
    margin: 14px 0 0;
    font-size: 11.5px;
    color: var(--gqd-text-mute);
    font-style: italic;
    text-align: center;
}
.gcafe-qcedc-invplaceholder {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0;
    text-align: center;
}
.gcafe-qcedc-invplaceholder strong {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--gqd-text);
}
.gcafe-qcedc-invplaceholder span {
    color: var(--gqd-text-dim);
    font-size: 0.88rem;
    line-height: 1.55;
}
.gcafe-qcedc-theme .qm-btn-outline {
    background: transparent;
    color: var(--gqd-gold);
    border: 1px solid var(--gqd-gold);
}
.gcafe-qcedc-theme .qm-btn-outline:hover {
    background: var(--gqd-gold);
    color: var(--gqd-bg);
}
.gcafe-qcedc-theme .gcafe-ui-grid-auto,
.gcafe-qcedc-theme .gcafe-grid-2,
.gcafe-qcedc-theme .gcafe-grid-3,
.gcafe-qcedc-theme .gcafe-grid-4 {
    color: var(--gqd-text-dim);
}

/* =====================================================================
 * SECCIÓN 14 — Bandeja de mensajes (vista comunicaciones)
 * Componente reusable: lista de items tipo notificación con icono, título,
 * fecha y resumen. Usa .gcafe-ui-card-interactive como base; estos selectores
 * solo aportan layout interno (icon + body + fecha) y el acento dorado de
 * "no leído". Nada de colores hardcodeados — todo via var(--q-*).
 * ===================================================================== */
.gcafe-msg-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--q-cream, var(--q-white));
    border-left: 4px solid var(--q-green-main);
    border-radius: var(--gcafe-card-radius);
    margin-bottom: 18px;
}
.gcafe-msg-summary-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--q-gray-500);
    font-weight: 600;
}
.gcafe-msg-summary-count {
    font-size: 1.4rem;
    color: var(--q-green-main);
    font-family: var(--font-mono);
    font-weight: 700;
}
.gcafe-msg-list { display: flex; flex-direction: column; gap: 10px; }
.gcafe-msg-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    position: relative;
}
.gcafe-msg-row.unread { border-left: 4px solid var(--q-sand); }
.gcafe-msg-row.unread::after {
    content: '';
    position: absolute;
    top: 14px;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--q-sand);
}
.gcafe-msg-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--q-cream, var(--q-gray-50));
    color: var(--q-green-main);
}
.gcafe-msg-icon .dashicons { font-size: 22px; width: 22px; height: 22px; }
.gcafe-msg-icon.is-contract { background: rgba(45, 138, 78, 0.12); color: var(--q-success); }
.gcafe-msg-icon.is-process  { background: rgba(43, 132, 150, 0.12); color: var(--q-info); }
.gcafe-msg-icon.is-proposal { background: rgba(176, 138, 62, 0.15); color: var(--q-gold-primary); }
.gcafe-msg-body { flex: 1; min-width: 0; line-height: 1.35; }
.gcafe-msg-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.gcafe-msg-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--q-black);
    margin: 0;
    flex: 1;
    min-width: 0;
}
.gcafe-msg-date {
    font-size: 0.7rem;
    color: var(--q-gray-500);
    font-family: var(--font-mono);
    white-space: nowrap;
}
.gcafe-msg-resumen {
    font-size: 0.85rem;
    color: var(--q-gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.gcafe-msg-resumen .gcafe-ui-badge { margin-right: 6px; }

/* -----------------------------------------------------------------------
 * Detalle de un mensaje (vista mensaje_detalle).
 * Header del engine arriba + meta (badge + fecha) + resumen + cuerpo HTML.
 * ----------------------------------------------------------------------- */
.gcafe-msg-detail-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 0.85rem;
    color: var(--q-gray-500, #6b6b6b);
}
.gcafe-msg-detail-fecha {
    font-variant-numeric: tabular-nums;
}
.gcafe-msg-detail-resumen {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--q-gray-500, #6b6b6b);
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--q-gray-200, #ececec);
}
.gcafe-msg-detail-cuerpo {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--q-black, #1a1a1a);
}
.gcafe-msg-detail-cuerpo p { margin: 0 0 14px; }
.gcafe-msg-detail-cuerpo ul, .gcafe-msg-detail-cuerpo ol { padding-left: 22px; margin: 0 0 14px; }
.gcafe-msg-detail-cuerpo strong { color: var(--q-black, #1a1a1a); }
.gcafe-msg-detail-cuerpo a { color: var(--q-gold, #b38a2e); }
.gcafe-msg-detail-empty {
    font-style: italic;
    color: var(--q-gray-500, #6b6b6b);
}

/* -----------------------------------------------------------------------
 * Mensajes-propuesta del embudo QC-EDC (estado encendido).
 *
 * Cuando un cliente elige una propuesta, ese mensaje se queda "encendido"
 * — borde dorado + fondo crema + flag "✓ ELEGIDA" al lado del título.
 * El resto sigue siendo un row normal de la bandeja. La selección es
 * radio group: solo una a la vez.
 * ----------------------------------------------------------------------- */
.gcafe-msg-row-esc.is-selected {
    border-color: var(--q-gold, #b38a2e);
    background: linear-gradient(180deg, #fffaef 0%, #ffffff 70%);
    box-shadow: 0 0 0 1px var(--q-gold, #b38a2e), 0 4px 14px rgba(179, 138, 46, 0.14);
}
.gcafe-msg-row-esc.is-selected .gcafe-msg-icon {
    background: var(--q-gold, #b38a2e);
    color: #ffffff;
}
.gcafe-msg-selected-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--q-gold, #b38a2e);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
    line-height: 1.4;
}
.gcafe-msg-selected-flag .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
}

/* =====================================================================
 * SECCIÓN 15 — Secuencia de producción (detalle de lote, portal cliente)
 * Etapas como <details> expandibles + reskin de los .gcafe-trace-* del helper
 * compartido para que armonicen con la paleta del portal cliente
 * (cream/green/sand) en lugar del aspecto neutro del backend.
 * ===================================================================== */
.gcafe-cl-trace-card { padding-bottom: 10px; }

.gcafe-cl-trace-stages {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Cada etapa: <details> con header tipo card del portal */
.gcafe-cl-trace-stage {
    background: var(--q-cream, #faf9f6);
    border: 1px solid var(--q-gray-200);
    border-radius: var(--gcafe-card-radius, 10px);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gcafe-cl-trace-stage[open] {
    border-color: var(--q-green-main);
    box-shadow: 0 4px 14px rgba(29, 54, 33, 0.06);
}
.gcafe-cl-trace-stage.is-empty {
    background: var(--q-gray-50, #f5f3ee);
    opacity: 0.75;
}
.gcafe-cl-trace-stage > summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    user-select: none;
    background: transparent;
    transition: background 0.15s ease;
}
.gcafe-cl-trace-stage > summary:hover { background: rgba(29, 54, 33, 0.03); }
.gcafe-cl-trace-stage > summary::-webkit-details-marker { display: none; }
.gcafe-cl-trace-stage[open] > summary {
    border-bottom: 1px solid var(--q-gray-200);
    background: var(--q-white);
}

.gcafe-cl-trace-stage-title {
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--q-green-dark);
    font-weight: 600;
    flex-shrink: 0;
    min-width: 200px;
}
.gcafe-cl-trace-stage-resumen {
    flex: 1;
    color: var(--q-gray-500);
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gcafe-cl-trace-stage[open] .gcafe-cl-trace-stage-resumen {
    color: var(--q-green-main);
    font-weight: 600;
}
.gcafe-cl-trace-stage > summary > .gcafe-trace-collapse-arrow {
    color: var(--q-gray-500);
    font-size: 0.85rem;
    transition: transform 0.18s ease;
}
.gcafe-cl-trace-stage[open] > summary > .gcafe-trace-collapse-arrow {
    transform: rotate(180deg);
    color: var(--q-green-main);
}
.gcafe-cl-trace-stage-body {
    padding: 14px 18px 18px;
    background: var(--q-white);
}
.gcafe-cl-trace-pending {
    text-align: center;
    color: var(--q-gray-500);
    font-style: italic;
    font-size: 0.88rem;
    padding: 12px 0;
}

/* Acentos por etapa (banda izquierda) — paleta del portal cliente */
.gcafe-cl-trace-stage-cereza     { border-left: 4px solid var(--q-error, #c0392b); }
.gcafe-cl-trace-stage-despulpado { border-left: 4px solid var(--q-info, #2980b9); }
.gcafe-cl-trace-stage-secado     { border-left: 4px solid var(--q-gold-primary, #b08a3e); }
.gcafe-cl-trace-stage-almacen    { border-left: 4px solid var(--q-success, #1a6b3c); }
.gcafe-cl-trace-stage-trilla     { border-left: 4px solid var(--q-green-main); }
.gcafe-cl-trace-stage-tostado    { border-left: 4px solid var(--q-black, #1a1a1a); }
.gcafe-cl-trace-stage.is-empty   { border-left-color: var(--q-gray-400, #b8b1a3); }

/* Reskin de los .gcafe-trace-item-collapse del helper compartido para que
   adopten la paleta del portal cliente. El backend mantiene su look neutro
   propio porque carga este CSS solo dentro del scope del portal. */
.gcafe-cl-trace-card .gcafe-trace-item-collapse {
    margin-top: 8px;
    background: var(--q-cream, #faf9f6);
    border: 1px solid var(--q-gray-200);
    border-radius: 6px;
    overflow: hidden;
}
.gcafe-cl-trace-card .gcafe-trace-item-collapse[open] {
    border-color: var(--q-sand);
    background: var(--q-white);
}
.gcafe-cl-trace-card .gcafe-trace-item-collapse > summary {
    cursor: pointer;
    list-style: none;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    user-select: none;
}
.gcafe-cl-trace-card .gcafe-trace-item-collapse > summary::-webkit-details-marker { display: none; }
.gcafe-cl-trace-card .gcafe-trace-item-collapse[open] > summary {
    border-bottom: 1px solid var(--q-gray-200);
    background: var(--q-cream);
}
.gcafe-cl-trace-card .gcafe-trace-item-sku {
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--q-green-dark);
}
.gcafe-cl-trace-card .gcafe-trace-item-summary-meta {
    flex: 1;
    color: var(--q-gray-500);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gcafe-cl-trace-card .gcafe-trace-item-collapse[open] .gcafe-trace-collapse-arrow {
    transform: rotate(180deg);
}
.gcafe-cl-trace-card .gcafe-trace-item-body {
    padding: 12px 14px 16px;
    background: var(--q-white);
}
.gcafe-cl-trace-card .gcafe-trace-item-fecha {
    font-size: 0.7rem;
    color: var(--q-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 10px;
    font-family: var(--font-mono, monospace);
}

/* Chips dentro del portal: paleta del portal cliente */
.gcafe-cl-trace-card .gcafe-trace-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.gcafe-cl-trace-card .gcafe-trace-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.3;
    background: var(--q-cream);
    border: 1px solid var(--q-gray-200);
}
.gcafe-cl-trace-card .gcafe-trace-chip .gcafe-chip-label {
    color: var(--q-gray-500);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.gcafe-cl-trace-card .gcafe-trace-chip .gcafe-chip-value {
    font-weight: 700;
    color: var(--q-black);
}
.gcafe-cl-trace-card .gcafe-chip-in {
    background: var(--q-cream);
    border-color: rgba(176, 138, 62, 0.18);
}
.gcafe-cl-trace-card .gcafe-chip-in .gcafe-chip-value { color: var(--q-gold-primary); }
.gcafe-cl-trace-card .gcafe-chip-out {
    background: rgba(45, 138, 78, 0.10);
    border-color: rgba(45, 138, 78, 0.25);
}
.gcafe-cl-trace-card .gcafe-chip-out .gcafe-chip-value { color: var(--q-success); }
.gcafe-cl-trace-card .gcafe-chip-accent {
    background: rgba(214, 168, 67, 0.12);
    border-color: rgba(214, 168, 67, 0.3);
}
.gcafe-cl-trace-card .gcafe-chip-accent .gcafe-chip-value { color: var(--q-gold-primary); }
.gcafe-cl-trace-card .gcafe-chip-info {
    background: rgba(43, 132, 150, 0.10);
    border-color: rgba(43, 132, 150, 0.25);
}
.gcafe-cl-trace-card .gcafe-chip-info .gcafe-chip-value { color: var(--q-info); }

/* Secciones internas (padres, cortadores, resultados de trilla) */
.gcafe-cl-trace-card .gcafe-trace-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--q-gray-200);
}
.gcafe-cl-trace-card .gcafe-trace-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--q-gray-500);
    margin-bottom: 8px;
    font-family: var(--font-mono, monospace);
}
.gcafe-cl-trace-card .gcafe-trace-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gcafe-cl-trace-card .gcafe-trace-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    background: var(--q-cream);
    border-radius: 4px;
    font-size: 0.85rem;
}
.gcafe-cl-trace-card .gcafe-trace-list-label {
    font-weight: 600;
    color: var(--q-green-dark);
    font-family: var(--font-mono, monospace);
}
.gcafe-cl-trace-card .gcafe-trace-list-value {
    color: var(--q-gray-500);
    text-align: right;
    white-space: nowrap;
}
.gcafe-cl-trace-card .gcafe-trace-list-value strong { color: var(--q-black); }
.gcafe-cl-trace-card .gcafe-trace-list-value small { color: var(--q-gray-500); font-weight: normal; }

.gcafe-cl-trace-card .gcafe-trace-cortadores {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.gcafe-cl-trace-card .gcafe-trace-tag {
    background: var(--q-cream);
    border: 1px solid var(--q-gray-200);
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 0.78rem;
    color: var(--q-green-dark);
}

@media (max-width: 600px) {
    .gcafe-cl-trace-stage > summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 12px 14px;
    }
    .gcafe-cl-trace-stage-title { min-width: 0; }
    .gcafe-cl-trace-stage-resumen { width: 100%; white-space: normal; }
    .gcafe-cl-trace-stage > summary > .gcafe-trace-collapse-arrow {
        position: absolute;
        right: 14px;
        top: 14px;
    }
    .gcafe-cl-trace-stage > summary { position: relative; }
}

/* =============================================================================
 * TABS de "Quimiapan" — sub-navegación Mapa | Inventario | Analytics
 *
 * Misma identidad visual que las main tabs del portal (pill crema con activo
 * blanco + ícono dorado), pero más compactas y centradas. Quedan subordinadas
 * jerárquicamente a las main tabs sin romper el lenguaje visual.
 * ============================================================================= */
.gcafe-finca-tabs {
    display: inline-flex;        /* ancho según contenido */
    flex-wrap: wrap;
    gap: 3px;
    margin: 0 auto 18px;
    padding: 4px;
    background: var(--q-gray-100, #f7f6f1);
    border: 1px solid var(--q-gray-200, #ececec);
    border-radius: 8px;
}
/* Wrapper para centrar la barra (inline-flex no se centra por sí solo). */
.gcafe-finca-tabs-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}
.gcafe-finca-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 6px;
    color: var(--q-gray-500, #6b6b6b);
    background: transparent;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1.2;
    transition: background .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
}
.gcafe-finca-tab .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    line-height: 1;
}
.gcafe-finca-tab:hover {
    color: var(--q-black, #1a1a1a);
    background: rgba(255,255,255,.6);
}
.gcafe-finca-tab.is-active {
    color: var(--q-black, #1a1a1a);
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px var(--q-gray-200, #ececec);
}
.gcafe-finca-tab.is-active .dashicons {
    color: var(--q-gold, #b38a2e);
}
@media (max-width: 560px) {
    .gcafe-finca-tab { padding: 7px 10px; font-size: 0.78rem; }
    .gcafe-finca-tab .dashicons { font-size: 14px; width: 14px; height: 14px; }
}

/* =============================================================================
 * RESUMEN DEL INICIO (2026-05-15) — Saldo del día + Qué hay nuevo
 * Reemplaza la grilla de 5 botones-duplicados-del-menú con info viva.
 * ============================================================================= */
.gcafe-home-resumen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 22px auto 18px;
    max-width: 1100px;
    padding: 0 16px;
}
.gcafe-home-resumen-card {
    padding: 18px 20px;
}
.gcafe-home-resumen-lbl {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--q-gray-500, #6b6b6b);
    margin-bottom: 8px;
}
.gcafe-home-resumen-val {
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.gcafe-home-resumen-sub {
    margin-top: 6px;
    font-size: 12px;
    color: var(--q-gray-500, #6b6b6b);
}

.gcafe-home-novedades-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gcafe-home-novedades-list li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    color: var(--q-black, #1a1a1a);
    text-decoration: none;
    font-size: 13px;
    border-bottom: 1px dotted var(--q-gray-200, #ececec);
}
.gcafe-home-novedades-list li:last-child a { border-bottom: none; }
.gcafe-home-novedades-list li a:hover {
    color: var(--q-gold, #b38a2e);
}
.gcafe-home-novedades-list .dashicons {
    color: var(--q-gold, #b38a2e);
    font-size: 18px;
    width: 18px;
    height: 18px;
}
.gcafe-home-novedades-empty {
    color: var(--q-gray-400, #9a9a9a);
    font-style: italic;
    font-size: 12px;
    padding: 6px 0;
}

/* Accesos compactos abajo del resumen */
.gcafe-home-actions-compact {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}
.gcafe-home-actions-compact .gcafe-home-btn {
    padding: 16px 12px;
}
.gcafe-home-actions-compact .dashicons {
    font-size: 22px;
    width: 22px;
    height: 22px;
    color: var(--q-green-dark, #2e5a3a);
    margin-bottom: 6px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

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

/* =============================================================================
 * Home v2 (2026-05-15) — grid 3 cards: Saldo · Quimiapan ahora · Novedades
 * ============================================================================= */
.gcafe-home-resumen-grid {
    grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 1000px) {
    .gcafe-home-resumen-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .gcafe-home-resumen-grid { grid-template-columns: 1fr; }
}

/* Balance: 2 columnas (Depositado · Café entregado) */
.gcafe-home-balance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.gcafe-home-balance-col {
    text-align: left;
}
.gcafe-home-balance-sub {
    font-size: 11px;
    font-weight: 600;
    color: var(--q-gray-500, #6b6b6b);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 3px;
}
.gcafe-home-balance-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--q-black, #1a1a1a);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.gcafe-home-balance-unit {
    font-size: 12px;
    font-weight: 500;
    color: var(--q-gray-500, #6b6b6b);
}

/* Próxima entrega — chip al pie de la card de balance */
.gcafe-home-proxima {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dotted var(--q-gray-200, #ececec);
    font-size: 12px;
    color: var(--q-gray-500, #6b6b6b);
    display: flex;
    align-items: center;
    gap: 6px;
}
.gcafe-home-proxima .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--q-gold, #b38a2e);
}
.gcafe-home-proxima strong {
    color: var(--q-black, #1a1a1a);
}

/* Card de telemetría viva — clickeable, lleva a Finca */
a.gcafe-home-clima {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform .15s ease, box-shadow .15s ease;
}
a.gcafe-home-clima:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.gcafe-home-clima-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin-top: 4px;
}
.gcafe-home-clima-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}
.gcafe-home-clima-ico {
    font-size: 18px;
    line-height: 1;
}
.gcafe-home-clima-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--q-black, #1a1a1a);
}
.gcafe-home-clima-foot {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dotted var(--q-gray-200, #ececec);
    font-size: 11px;
    color: var(--q-gray-500, #6b6b6b);
}

/* =============================================================================
 * Vista "Mi zona" (2026-05-15) — uniforme con el resto del portal cliente.
 * Las cajas son `gcafe-ui-card flush` + `gcafe-ui-card-header-dark` (mismo patrón).
 * ============================================================================= */
.gcafe-clz-box-body {
    padding: 18px 20px;
}

/* Estado actual — grid de telemetría */
.gcafe-clz-clima-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 24px;
}
.gcafe-clz-clima-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.gcafe-clz-clima-ico {
    font-size: 24px;
    line-height: 1;
}
.gcafe-clz-clima-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--q-black, #1a1a1a);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.gcafe-clz-clima-lbl {
    font-size: 11px;
    color: var(--q-gray-500, #6b6b6b);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 2px;
}
.gcafe-clz-clima-foot {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dotted var(--q-gray-200, #ececec);
    font-size: 11px;
    color: var(--q-gray-500, #6b6b6b);
}
@media (max-width: 720px) {
    .gcafe-clz-clima-grid { grid-template-columns: 1fr 1fr; }
}

/* Cámara placeholder */
.gcafe-clz-camara-placeholder {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--q-gray-50, #f9f8f4);
    border: 1px dashed var(--q-gray-300, #d4cfb8);
    border-radius: 6px;
}
.gcafe-clz-camara-placeholder .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    color: var(--q-gray-400, #9a9a9a);
}

/* Factor real */
.gcafe-clz-factor {
    padding: 14px 16px;
    background: #faf6ec;
    border-left: 3px solid var(--q-gold, #b38a2e);
    border-radius: 4px;
}
.gcafe-clz-factor-lbl {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #8a6d1f;
    letter-spacing: .06em;
}
.gcafe-clz-factor-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--q-black, #1a1a1a);
    font-variant-numeric: tabular-nums;
    margin-top: 3px;
}

/* Biodiversidad */
.gcafe-clz-biodiv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}
.gcafe-clz-biodiv-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--q-gray-500, #6b6b6b);
}
.gcafe-clz-biodiv-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gcafe-clz-biodiv-list li {
    font-size: 13px;
    padding: 4px 0;
    border-bottom: 1px dotted var(--q-gray-200, #ececec);
}
.gcafe-clz-biodiv-list li:last-child { border-bottom: none; }
@media (max-width: 720px) {
    .gcafe-clz-biodiv-grid { grid-template-columns: 1fr; }
}

/* Accesos directos: pasa de 3 → 4 columnas si entra "Mi zona" */
.gcafe-home-actions-compact:has(.gcafe-home-btn:nth-child(4)) {
    grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 720px) {
    .gcafe-home-actions-compact,
    .gcafe-home-actions-compact:has(.gcafe-home-btn:nth-child(4)) {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* =====================================================================
 * SECCIÓN 16 — Propuesta QC-EDC (vista zona-qcedc-view)
 * ---------------------------------------------------------------------
 * Estilos específicos de la propuesta editorial QC-EDC. Vivían como
 * <style> in-line de 641 líneas dentro del PHP (theme dark legacy con
 * fallbacks --tl-*). Extraídos a CSS cacheado y reescritos contra las
 * variables --gqd-* (paleta clara reasignada en §13) para que la vista
 * herede la uniformidad del portal sin pelearse con colores hardcoded.
 *
 * Todo va scoped bajo .gcafe-qcedc-theme — ningún rule pinta fuera.
 * ===================================================================== */

.gcafe-qcedc-theme .gcafe-qcedc-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 36px 24px 8px;
    scroll-margin-top: 130px;
}
.gcafe-qcedc-theme .gcafe-qcedc-map-wrap {
    max-width: 1100px;
    margin: 0 auto;
}
.gcafe-qcedc-theme .gcafe-qcedc-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--gqd-text);
    margin: 28px 0 14px;
    text-align: center;
}

/* Variedades */
.gcafe-qcedc-theme .gcafe-qcedc-varieties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.gcafe-qcedc-theme .gcafe-qcedc-varieties-2 {
    max-width: 820px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.gcafe-qcedc-theme .gcafe-qcedc-vcard {
    background: var(--gqd-surface);
    border: 1px solid var(--gqd-line);
    border-radius: var(--gqd-radius);
    padding: 24px;
    position: relative;
}
.gcafe-qcedc-theme .gcafe-qcedc-vcard-recommended {
    border-color: var(--gqd-gold);
    box-shadow: 0 0 0 1px var(--gqd-gold), 0 14px 40px rgba(0,0,0,.08);
}
.gcafe-qcedc-theme .gcafe-qcedc-vbadge {
    display: inline-block;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gqd-text-mute);
    border: 1px solid var(--gqd-line);
    border-radius: 999px;
    padding: 4px 10px;
    margin-bottom: 12px;
}
.gcafe-qcedc-theme .gcafe-qcedc-vbadge.gold {
    color: var(--gqd-gold);
    border-color: var(--gqd-gold);
}
.gcafe-qcedc-theme .gcafe-qcedc-vtitle {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.9rem;
    font-weight: 500;
    margin: 4px 0 6px;
    color: var(--gqd-text);
}
.gcafe-qcedc-theme .gcafe-qcedc-vsub {
    font-style: italic;
    font-size: 13.5px;
    color: var(--gqd-text-dim);
    margin: 0 0 12px;
}
.gcafe-qcedc-theme .gcafe-qcedc-vbody {
    font-size: 13.5px;
    color: var(--gqd-text-dim);
    line-height: 1.6;
    margin: 0 0 14px;
}
.gcafe-qcedc-theme .gcafe-qcedc-vmeta {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--gqd-line);
}
.gcafe-qcedc-theme .gcafe-qcedc-vmeta li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--gqd-line);
    font-size: 12.5px;
}
.gcafe-qcedc-theme .gcafe-qcedc-vmeta li span { color: var(--gqd-text-mute); }
.gcafe-qcedc-theme .gcafe-qcedc-vmeta li strong { color: var(--gqd-text); }
.gcafe-qcedc-theme .gcafe-qcedc-vfootnote {
    margin-top: 18px;
    padding: 14px 18px;
    font-size: 12.5px;
    color: var(--gqd-text-mute);
    border: 1px dashed var(--gqd-line);
    border-radius: var(--gqd-radius);
    text-align: center;
}
.gcafe-qcedc-theme .gcafe-qcedc-vfootnote strong {
    color: var(--gqd-text-dim);
    margin-right: 8px;
}

/* Cards de proyección */
.gcafe-qcedc-theme .gcafe-qcedc-cards-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.gcafe-qcedc-theme .gcafe-qcedc-card {
    background: var(--gqd-surface);
    border: 1px solid var(--gqd-line);
    border-radius: var(--gqd-radius);
    padding: 22px;
    text-align: center;
}
.gcafe-qcedc-theme .gcafe-qcedc-card-flag {
    border-color: var(--gqd-gold);
    box-shadow: 0 0 0 1px rgba(179,138,46,.25) inset;
}
.gcafe-qcedc-theme .gcafe-qcedc-card-low { opacity: .82; }
.gcafe-qcedc-theme .gcafe-qcedc-card-eyebrow {
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gqd-text-mute);
    margin-bottom: 12px;
}
.gcafe-qcedc-theme .gcafe-qcedc-card-eyebrow.gold { color: var(--gqd-gold); }
.gcafe-qcedc-theme .gcafe-qcedc-card-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.4rem;
    line-height: 1.05;
    color: var(--gqd-text);
    font-variant-numeric: tabular-nums;
}
.gcafe-qcedc-theme .gcafe-qcedc-card-num span {
    font-size: .5em;
    color: var(--gqd-text-dim);
    margin-left: 4px;
    font-weight: 400;
}
.gcafe-qcedc-theme .gcafe-qcedc-card-num-text { font-size: 1.3rem; line-height: 1.3; }
.gcafe-qcedc-theme .gcafe-qcedc-card-lab {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--gqd-text-dim);
}
.gcafe-qcedc-theme .gcafe-qcedc-card-foot {
    margin-top: 8px;
    font-size: 11px;
    color: var(--gqd-text-mute);
    font-style: italic;
}

/* Flow visual cereza → verde */
.gcafe-qcedc-theme .gcafe-qcedc-flow {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 18px;
    background: var(--gqd-surface);
    border: 1px solid var(--gqd-line);
    border-radius: var(--gqd-radius);
    overflow-x: auto;
}
.gcafe-qcedc-theme .gcafe-qcedc-flow-step {
    flex: 1 1 0;
    min-width: 110px;
    padding: 14px;
    text-align: center;
    border: 1px solid var(--gqd-line);
    border-radius: 10px;
    background: var(--gqd-bg-alt);
}
.gcafe-qcedc-theme .gcafe-qcedc-flow-final {
    border-color: var(--gqd-gold);
    background: rgba(179,138,46,.06);
}
.gcafe-qcedc-theme .gcafe-qcedc-flow-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    color: var(--gqd-text);
    font-variant-numeric: tabular-nums;
}
.gcafe-qcedc-theme .gcafe-qcedc-flow-lab {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gqd-text-mute);
    margin-top: 4px;
}
.gcafe-qcedc-theme .gcafe-qcedc-flow-arrow {
    font-size: 12px;
    color: var(--gqd-gold);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.gcafe-qcedc-theme .gcafe-qcedc-tr-total td {
    background: rgba(179,138,46,.06);
    border-top: 1px solid rgba(179,138,46,.35);
}
.gcafe-qcedc-theme .gcafe-qcedc-foot {
    text-align: center;
    font-size: 12px;
    color: var(--gqd-text-mute);
    font-style: italic;
    margin-top: 14px;
}

/* Tareas */
.gcafe-qcedc-theme .gcafe-qcedc-tareas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.gcafe-qcedc-theme .gcafe-qcedc-tarea-card {
    padding: 14px 16px;
    background: var(--gqd-surface);
    border: 1px solid var(--gqd-line);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gcafe-qcedc-theme .gcafe-qcedc-tarea-card strong { color: var(--gqd-text); font-size: 13.5px; }
.gcafe-qcedc-theme .gcafe-qcedc-tarea-card span { color: var(--gqd-text-mute); font-size: 11.5px; }

/* Biodiv items dentro del masterCard */
.gcafe-qcedc-theme .tl-biodiv-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--gqd-line);
}
.gcafe-qcedc-theme .tl-biodiv-item:last-child { border-bottom: 0; }
.gcafe-qcedc-theme .tl-biodiv-item strong { display: block; color: var(--gqd-text); font-size: 13px; }
.gcafe-qcedc-theme .tl-biodiv-item em {
    display: block;
    color: var(--gqd-text-mute);
    font-size: 11.5px;
    font-style: italic;
    margin: 2px 0 4px;
}
.gcafe-qcedc-theme .tl-biodiv-item p {
    margin: 0;
    color: var(--gqd-text-dim);
    font-size: 12px;
    line-height: 1.5;
}

/* Checklist */
.gcafe-qcedc-theme .gcafe-qcedc-checklist {
    list-style: none;
    padding: 0;
    max-width: 720px;
    margin: 0 auto;
}
.gcafe-qcedc-theme .gcafe-qcedc-checklist li {
    padding: 12px 16px 12px 36px;
    position: relative;
    background: var(--gqd-surface);
    border: 1px solid var(--gqd-line);
    border-radius: 10px;
    margin-bottom: 8px;
    font-size: 13.5px;
    color: var(--gqd-text-dim);
}
.gcafe-qcedc-theme .gcafe-qcedc-checklist li::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gqd-gold);
    transform: translateY(-50%);
}
.gcafe-qcedc-theme .gcafe-qcedc-checklist strong { color: var(--gqd-text); }
.gcafe-qcedc-theme .gcafe-qcedc-checklist code {
    background: rgba(179,138,46,.10);
    color: var(--gqd-gold);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

.gcafe-qcedc-theme .gcafe-qcedc-cta {
    text-align: center;
    margin: 28px auto 0;
}
.gcafe-qcedc-theme .gcafe-qcedc-btn-back {
    display: inline-block;
    padding: 12px 22px;
    background: transparent;
    color: var(--gqd-gold);
    border: 1px solid var(--gqd-gold);
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.gcafe-qcedc-theme .gcafe-qcedc-btn-back:hover {
    background: var(--gqd-gold);
    color: #ffffff;
}

@media (max-width: 720px) {
    .gcafe-qcedc-theme .gcafe-qcedc-flow { flex-direction: column; }
    .gcafe-qcedc-theme .gcafe-qcedc-flow-step { width: 100%; }
    .gcafe-qcedc-theme .gcafe-qcedc-flow-arrow { transform: rotate(90deg); }
}

/* Cálculo de plantas */
.gcafe-qcedc-theme .gcafe-qcedc-plantas {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 18px;
    background: var(--gqd-surface);
    border: 1px solid var(--gqd-line);
    border-radius: var(--gqd-radius);
    overflow-x: auto;
    margin-bottom: 6px;
}
.gcafe-qcedc-theme .gcafe-qcedc-plantas-step {
    flex: 1 1 0;
    min-width: 160px;
    padding: 16px 14px;
    border: 1px solid var(--gqd-line);
    border-radius: 10px;
    background: var(--gqd-bg-alt);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.gcafe-qcedc-theme .gcafe-qcedc-plantas-final {
    border-color: var(--gqd-gold);
    background: rgba(179,138,46,.06);
}
.gcafe-qcedc-theme .gcafe-qcedc-plantas-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.9rem;
    line-height: 1.05;
    color: var(--gqd-text);
    font-variant-numeric: tabular-nums;
}
.gcafe-qcedc-theme .gcafe-qcedc-plantas-lab {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gqd-text-mute);
    margin-top: 6px;
}
.gcafe-qcedc-theme .gcafe-qcedc-plantas-foot {
    font-size: 11px;
    color: var(--gqd-text-dim);
    margin-top: 6px;
    line-height: 1.35;
}
.gcafe-qcedc-theme .gcafe-qcedc-plantas-arrow {
    align-self: center;
    font-size: 12px;
    color: var(--gqd-gold);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    padding: 0 4px;
}

/* Roadmap años 1-5 */
.gcafe-qcedc-theme .gcafe-qcedc-roadmap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.gcafe-qcedc-theme .gcafe-qcedc-rmstep {
    background: var(--gqd-surface);
    border: 1px solid var(--gqd-line);
    border-left: 3px solid var(--gqd-text-mute);
    border-radius: 10px;
    padding: 16px;
}
.gcafe-qcedc-theme .gcafe-qcedc-rmstep-on { border-left-color: var(--gqd-green); }
.gcafe-qcedc-theme .gcafe-qcedc-rmstep-peak {
    border-left-color: var(--gqd-gold);
    background: rgba(179,138,46,.05);
}
.gcafe-qcedc-theme .gcafe-qcedc-rmyear {
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gqd-gold);
    margin-bottom: 6px;
}
.gcafe-qcedc-theme .gcafe-qcedc-rmtitle {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--gqd-text);
    margin-bottom: 6px;
}
.gcafe-qcedc-theme .gcafe-qcedc-rmbody {
    font-size: 12.5px;
    color: var(--gqd-text-dim);
    line-height: 1.5;
}

/* Timeline mensual */
.gcafe-qcedc-theme .gcafe-qcedc-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}
@media (min-width: 1100px) {
    .gcafe-qcedc-theme .gcafe-qcedc-timeline { grid-template-columns: repeat(6, 1fr); }
}
.gcafe-qcedc-theme .gcafe-qcedc-tlcell {
    background: var(--gqd-surface);
    border: 1px solid var(--gqd-line);
    border-top: 3px solid var(--gqd-text-mute);
    border-radius: 8px;
    padding: 12px 14px;
}
.gcafe-qcedc-theme .gcafe-qcedc-tlcell-cosecha { border-top-color: #c66; }
.gcafe-qcedc-theme .gcafe-qcedc-tlcell-fert    { border-top-color: var(--gqd-gold); }
.gcafe-qcedc-theme .gcafe-qcedc-tlcell-mantto  { border-top-color: var(--gqd-green); }
.gcafe-qcedc-theme .gcafe-qcedc-tlmonth {
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gqd-text-mute);
    margin-bottom: 6px;
}
.gcafe-qcedc-theme .gcafe-qcedc-tlhead {
    font-size: 13px;
    font-weight: 600;
    color: var(--gqd-text);
    margin-bottom: 6px;
}
.gcafe-qcedc-theme .gcafe-qcedc-tlbody {
    font-size: 11.5px;
    color: var(--gqd-text-dim);
    line-height: 1.45;
}
.gcafe-qcedc-theme .gcafe-qcedc-tllegend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 14px;
    padding: 10px 14px;
    font-size: 11.5px;
    color: var(--gqd-text-dim);
}
.gcafe-qcedc-theme .gcafe-qcedc-tllegend-item { display: inline-flex; align-items: center; gap: 6px; }
.gcafe-qcedc-theme .gcafe-qcedc-tllegend-sw {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}
.gcafe-qcedc-theme .gcafe-qcedc-tllegend-sw.cosecha { background: #c66; }
.gcafe-qcedc-theme .gcafe-qcedc-tllegend-sw.fert    { background: var(--gqd-gold); }
.gcafe-qcedc-theme .gcafe-qcedc-tllegend-sw.mantto  { background: var(--gqd-green); }

/* Cards de 4 columnas para costo operativo */
.gcafe-qcedc-theme .gcafe-qcedc-cards-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.gcafe-qcedc-theme .gcafe-qcedc-cards-4 .gcafe-qcedc-card { padding: 18px 14px; }
.gcafe-qcedc-theme .gcafe-qcedc-cards-4 .gcafe-qcedc-card-num { font-size: 1.9rem; }

/* Card de cortesía: beneficio húmedo+seco aportado por Quimiapan */
.gcafe-qcedc-theme .gcafe-qcedc-card-courtesy {
    background: rgba(95,163,199,0.08);
    border-color: #5fa3c7;
    box-shadow: 0 0 0 1px rgba(95,163,199,0.25) inset;
}
.gcafe-qcedc-theme .gcafe-qcedc-card-courtesy .gcafe-qcedc-card-eyebrow { color: #3d7a99; }
.gcafe-qcedc-theme .gcafe-qcedc-card-courtesy .gcafe-qcedc-card-num { color: #2c5970; }
.gcafe-qcedc-theme .gcafe-qcedc-card-courtesy .gcafe-qcedc-card-foot { color: rgba(44,89,112,.65); }

/* Narrativa de la propuesta */
.gcafe-qcedc-theme .gcafe-qcedc-narr {
    max-width: 760px;
    margin: 0 auto 28px;
    padding: 0 8px;
}
.gcafe-qcedc-theme .gcafe-qcedc-narr p {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--gqd-text-dim);
    margin: 0 0 18px;
}
.gcafe-qcedc-theme .gcafe-qcedc-narr p strong { color: var(--gqd-text); font-weight: 500; }
.gcafe-qcedc-theme .gcafe-qcedc-narr p:first-child::first-letter {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.4rem;
    font-weight: 500;
    float: left;
    line-height: 0.95;
    margin: 4px 10px 0 0;
    color: var(--gqd-gold);
}

/* Términos del acuerdo */
.gcafe-qcedc-theme .gcafe-qcedc-terms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}
.gcafe-qcedc-theme .gcafe-qcedc-term {
    display: flex;
    gap: 18px;
    align-items: stretch;
    background: var(--gqd-surface);
    border: 1px solid var(--gqd-line);
    border-radius: var(--gqd-radius);
    padding: 20px 20px;
}
.gcafe-qcedc-theme .gcafe-qcedc-term-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--gqd-gold);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
    align-self: center;
}
.gcafe-qcedc-theme .gcafe-qcedc-term-num small {
    font-size: .42em;
    margin-left: 2px;
    opacity: .8;
}
.gcafe-qcedc-theme .gcafe-qcedc-term-body { flex: 1 1 auto; }
.gcafe-qcedc-theme .gcafe-qcedc-term-body strong {
    display: block;
    color: var(--gqd-text);
    font-size: 14px;
    margin-bottom: 4px;
}
.gcafe-qcedc-theme .gcafe-qcedc-term-body span {
    display: block;
    color: var(--gqd-text-dim);
    font-size: 12.5px;
    line-height: 1.55;
}

/* Grid de features GV2 */
.gcafe-qcedc-theme .gcafe-qcedc-gv2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.gcafe-qcedc-theme .gcafe-qcedc-gv2-card {
    background: var(--gqd-surface);
    border: 1px solid var(--gqd-line);
    border-radius: var(--gqd-radius);
    padding: 22px;
    transition: border-color .2s, transform .2s;
}
.gcafe-qcedc-theme .gcafe-qcedc-gv2-card:hover {
    border-color: rgba(179,138,46,.45);
    transform: translateY(-2px);
}
.gcafe-qcedc-theme .gcafe-qcedc-gv2-icon {
    font-size: 1.8rem;
    margin-bottom: 10px;
}
.gcafe-qcedc-theme .gcafe-qcedc-gv2-card strong {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--gqd-text);
    margin-bottom: 8px;
}
.gcafe-qcedc-theme .gcafe-qcedc-gv2-card p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--gqd-text-dim);
}

/* Cláusulas del contrato */
.gcafe-qcedc-theme .gcafe-qcedc-clauses {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 880px;
    margin: 0 auto;
}
@media (min-width: 760px) {
    .gcafe-qcedc-theme .gcafe-qcedc-clauses { grid-template-columns: repeat(2, 1fr); }
}
.gcafe-qcedc-theme .gcafe-qcedc-clause {
    display: flex;
    gap: 16px;
    background: var(--gqd-surface);
    border: 1px solid var(--gqd-line);
    border-left: 3px solid rgba(179,138,46,.45);
    border-radius: 10px;
    padding: 18px;
}
.gcafe-qcedc-theme .gcafe-qcedc-clause-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--gqd-gold);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
    padding-top: 2px;
}
.gcafe-qcedc-theme .gcafe-qcedc-clause-body { flex: 1 1 auto; }
.gcafe-qcedc-theme .gcafe-qcedc-clause-body h4 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--gqd-text);
    margin: 0 0 6px;
}
.gcafe-qcedc-theme .gcafe-qcedc-clause-body p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--gqd-text-dim);
}
.gcafe-qcedc-theme .gcafe-qcedc-clause-body strong { color: var(--gqd-text); font-weight: 500; }
.gcafe-qcedc-theme .gcafe-qcedc-clause-body code {
    background: rgba(179,138,46,.10);
    color: var(--gqd-gold);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11.5px;
}
.gcafe-qcedc-theme .gcafe-qcedc-clause-body em { color: var(--gqd-text); font-style: italic; }

/* Factor real de finca */
.gcafe-qcedc-theme .gcafe-qcedc-factor {
    background: var(--gqd-surface);
    border: 1px solid var(--gqd-line);
    border-radius: var(--gqd-radius);
    padding: 8px 18px;
}
.gcafe-qcedc-theme .gcafe-qcedc-factor-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gqd-line);
    font-size: 13px;
}
.gcafe-qcedc-theme .gcafe-qcedc-factor-row:last-child { border-bottom: 0; }
.gcafe-qcedc-theme .gcafe-qcedc-factor-row span { color: var(--gqd-text-dim); }
.gcafe-qcedc-theme .gcafe-qcedc-factor-row strong { color: var(--gqd-text); font-variant-numeric: tabular-nums; }
.gcafe-qcedc-theme .gcafe-qcedc-factor-row-final strong { color: var(--gqd-gold); font-size: 1.05rem; }

/* Pequeñas: dos cosméticos que vivían como style="" en el PHP. */
.gcafe-qcedc-theme .gcafe-qcedc-foot-tight { margin-top: -6px; margin-bottom: 18px; }

/* ===========================================================================
 * PORTAL CLIENTE — alinear las secciones unificadas (Plan de pagos / Café por
 * entregar) con las cajas legacy del contrato (.gcafe-ui-card-body usa 25px de
 * padding lateral). En admin estas secciones usan 16px; aquí se igualan a 25px
 * para que el contenido quede a la misma sangría que la ficha del contrato.
 * =========================================================================== */
.gcafe-clpv3-stack .gcafe-ct2-plan,
.gcafe-clpv3-stack .gcafe-ct2-porentregar,
.gcafe-clpv3-stack .gcafe-ct2-depositos {
    padding: 20px 25px;
    border-radius: 12px;
}
@media (max-width: 760px) {
    .gcafe-clpv3-stack .gcafe-ct2-plan,
    .gcafe-clpv3-stack .gcafe-ct2-porentregar,
    .gcafe-clpv3-stack .gcafe-ct2-depositos {
        padding: 14px 16px;
    }
}

/* ===========================================================================
 * PORTAL CLIENTE — bloques rediseñados (historial pedidos/muestras,
 * subproductos, línea de tiempo) con el estilo nuevo. Mismas secciones blancas
 * que Plan de pagos / Café por entregar.
 * =========================================================================== */
.gcafe-clpv3-stack .gcafe-clpv3-stack-sec {
    padding: 20px 25px;
    border-radius: 12px;
}
@media (max-width: 760px) {
    .gcafe-clpv3-stack .gcafe-clpv3-stack-sec { padding: 14px 16px; }
}
/* Filas del historial (pedidos / muestras) */
.gcafe-hist-lista { display: flex; flex-direction: column; gap: 8px; }
.gcafe-hist-row {
    display: flex; align-items: center; gap: 12px; text-decoration: none;
    background: #fff; border: 1px solid #ece6d6; border-radius: 10px;
    padding: 12px 14px; color: #2a2a2a;
    transition: border-color .15s ease, background .15s ease;
}
.gcafe-hist-row:hover { border-color: #d9b76a; background: #fffdf6; color: #1a1a1a; }
.gcafe-hist-l { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; flex: 1 1 auto; min-width: 0; }
.gcafe-hist-tit { font-size: 14px; font-weight: 700; color: #1a1a1a; }
.gcafe-hist-r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.gcafe-hist-monto { font-size: 15px; font-weight: 700; color: #b38a2e; font-variant-numeric: tabular-nums; }
.gcafe-hist-fecha { font-size: 12px; color: #8a8a8a; text-transform: uppercase; letter-spacing: .3px; }
.gcafe-hist-go { font-size: 18px; color: #ccc; flex: 0 0 auto; }
.gcafe-hist-row:hover .gcafe-hist-go { color: #d9b76a; }

/* =========================================================================
   DASHBOARD DEL CLIENTE (.gcafe-dash-*) — home view rediseñada 2026-06-12.
   Tu café este ciclo (entregado/por entregar) + telemetría viva + feed +
   plan de pagos mensual + accesos a color. Sin conceptos de saldo.
   ========================================================================= */
.gcafe-dash{ --d-verde:#1f3a24; --d-verde2:#2e5234; --d-crema:#f3efe6; --d-crema2:#ece6d6;
  --d-blanco:#fffdf9; --d-oro:#bd9a4a; --d-oro-l:#d4af6a; --d-gris:#8a8a8a; --d-ok:#2e7d32;
  --d-linea:#e6e0d2; --d-azul:#2c5878; --d-azul2:#3a6f93; }
.gcafe-dash-hello-h,.gcafe-dash-hero-num,.gcafe-dash-sec-h,.gcafe-dash-tel-temp,.gcafe-dash-act .at,.gcafe-dash-hello-d{font-family:Georgia,'Times New Roman',serif}

/* saludo */
.gcafe-dash-hello{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:8px 2px 22px}
.gcafe-dash-hello-l{display:flex;align-items:center;gap:16px}
.gcafe-dash-hello-logo{height:54px;width:auto;max-width:120px;object-fit:contain}
.gcafe-dash-hello-h{font-size:38px;line-height:1.05;font-weight:400;color:#1a1a1a;margin:0}
.gcafe-dash-hello-h b{display:block;font-style:italic;font-weight:600;color:var(--d-oro)}
.gcafe-dash-hello-date{text-align:right;color:var(--d-gris);font-size:13px;flex:0 0 auto}
.gcafe-dash-hello-d{font-size:20px;color:#1a1a1a}

/* grid */
.gcafe-dash-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px;align-items:start}

/* eyebrow común */
.gcafe-dash-eye{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;display:flex;align-items:center;gap:8px}

/* héroe café */
.gcafe-dash-hero{background:linear-gradient(165deg,var(--d-verde) 0%,var(--d-verde2) 100%);color:var(--d-crema);border-radius:22px;padding:24px;position:relative;overflow:hidden;box-shadow:0 16px 40px rgba(31,58,36,.16)}
.gcafe-dash-hero::after{content:"";position:absolute;right:-50px;bottom:-50px;width:200px;height:200px;background:radial-gradient(circle,rgba(189,154,74,.18),transparent 70%)}
.gcafe-dash-hero .gcafe-dash-eye{color:rgba(243,239,230,.6)}
.gcafe-dash-hero-top{display:flex;justify-content:space-between;align-items:flex-start;margin-top:14px}
.gcafe-dash-hero-num{font-size:42px;font-weight:800;letter-spacing:-1px}
.gcafe-dash-hero-label{color:var(--d-oro-l);font-weight:700;font-size:15px;margin-top:2px}
.gcafe-dash-hero-sub{font-size:12px;color:rgba(243,239,230,.6);margin-top:4px}
.gcafe-dash-donut{width:104px;height:104px;flex:0 0 auto;position:relative}
.gcafe-dash-donut svg{width:104px;height:104px}
.gcafe-dash-donut-pct{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1}
.gcafe-dash-donut-pct b{font-size:23px;font-weight:800;line-height:1}
.gcafe-dash-donut-pct span{font-size:8px;letter-spacing:.2px;text-transform:uppercase;color:rgba(243,239,230,.7);margin-top:3px}
.gcafe-dash-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(189,154,74,.18);border:1px solid rgba(189,154,74,.3);border-radius:99px;padding:8px 14px;font-size:13px;margin:16px 0 4px;color:var(--d-crema)}
.gcafe-dash-hero-break{display:flex;gap:18px;border-top:1px solid rgba(255,255,255,.12);margin-top:16px;padding-top:14px}
.gcafe-dash-bcol .l{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:rgba(243,239,230,.55)}
.gcafe-dash-bcol .v{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.gcafe-dash-bcol .v.o{color:var(--d-oro-l)}

/* telemetría */
.gcafe-dash-tel{display:block;text-decoration:none;background:linear-gradient(165deg,var(--d-azul),var(--d-azul2));color:#eaf2f8;border-radius:22px;padding:22px;position:relative;overflow:hidden;box-shadow:0 12px 32px rgba(44,88,120,.16)}
.gcafe-dash-tel .gcafe-dash-eye{color:rgba(234,242,248,.65)}
.gcafe-dash-tel-temp{font-size:46px;font-weight:300;margin:8px 0 2px}
.gcafe-dash-tel-temp sup{font-size:20px}
.gcafe-dash-tel-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;margin-top:18px}
.gcafe-dash-tel-it .l{font-size:11px;color:rgba(234,242,248,.6)}
.gcafe-dash-tel-it .v{font-size:17px;font-weight:700;margin-top:1px}
.gcafe-dash-tel-spark{margin-top:14px;display:block}
.gcafe-dash-tel-foot{font-size:11px;color:rgba(234,242,248,.55);margin-top:14px;display:flex;align-items:center;gap:6px}
.gcafe-dash-tel-live{width:7px;height:7px;border-radius:50%;background:#7ed492;box-shadow:0 0 8px #7ed492;animation:gcafe-dash-pl 2s infinite}
@keyframes gcafe-dash-pl{0%,100%{opacity:1}50%{opacity:.4}}

/* feed */
.gcafe-dash-feed{background:var(--d-blanco);border:1px solid var(--d-linea);border-radius:22px;padding:22px;box-shadow:0 8px 24px rgba(31,58,36,.05)}
.gcafe-dash-feed .gcafe-dash-eye{color:var(--d-gris)}
.gcafe-dash-feed-list{margin-top:14px;display:flex;flex-direction:column}
.gcafe-dash-fitem{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--d-crema2);text-decoration:none}
.gcafe-dash-fitem:last-child{border-bottom:none}
.gcafe-dash-fico{width:36px;height:36px;border-radius:10px;background:var(--d-crema);display:grid;place-items:center;font-size:16px;flex:0 0 auto}
.gcafe-dash-fbody{flex:1;display:flex;flex-direction:column}
.gcafe-dash-fbody .ft{font-weight:600;font-size:14px;color:#1a1a1a}
.gcafe-dash-fbody .fs{font-size:12px;color:var(--d-gris);margin-top:1px}
.gcafe-dash-fbadge{font-size:10px;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:99px;font-weight:600;white-space:nowrap}
.gcafe-dash-fbadge.hoy{background:#e8f3ea;color:var(--d-ok)}
.gcafe-dash-fbadge.date{background:var(--d-crema2);color:var(--d-gris)}
.gcafe-dash-fbadge.live{background:#fdf3dc;color:var(--d-oro)}
.gcafe-dash-fempty{color:var(--d-gris);font-style:italic;padding:14px 0}

/* pagos */
.gcafe-dash-pagos{margin-top:18px;background:var(--d-blanco);border:1px solid var(--d-linea);border-radius:22px;padding:24px;box-shadow:0 8px 24px rgba(31,58,36,.05)}
.gcafe-dash-pagos-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px;flex-wrap:wrap;gap:8px}
.gcafe-dash-sec-h{font-size:24px;color:var(--d-verde)}
.gcafe-dash-sec-h b{font-style:italic;color:var(--d-oro)}
.gcafe-dash-pagos-meta{font-size:13px;color:var(--d-gris)}
.gcafe-dash-cuotas{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.gcafe-dash-cuota{border:1px solid var(--d-linea);border-radius:14px;padding:14px 12px;text-align:center;background:var(--d-crema)}
.gcafe-dash-cuota.next{border-color:var(--d-ok);background:#f0f7f0;box-shadow:0 0 0 1px var(--d-ok)}
.gcafe-dash-cuota.concil{border-color:var(--d-oro);background:#fdf6e3}
.gcafe-dash-cuota .cm{font-size:13px;font-weight:700;color:var(--d-verde)}
.gcafe-dash-cuota .cd{font-size:10px;color:var(--d-gris);text-transform:uppercase;letter-spacing:.4px}
.gcafe-dash-cuota .ca{font-size:16px;font-weight:800;margin-top:8px;color:#1a1a1a;font-variant-numeric:tabular-nums}
.gcafe-dash-cuota .ctag{font-size:9px;text-transform:uppercase;letter-spacing:.4px;margin-top:6px;font-weight:700}
.gcafe-dash-cuota.next .ctag{color:var(--d-ok)}
.gcafe-dash-cuota.concil .ctag{color:var(--d-oro)}
.gcafe-dash-cuota .ctag.plain{color:transparent}
.gcafe-dash-pagos-note{font-size:12px;color:var(--d-verde2);background:rgba(189,154,74,.1);border-left:3px solid var(--d-oro);padding:10px 14px;border-radius:6px;margin-top:18px;line-height:1.5}

/* accesos */
.gcafe-dash-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.gcafe-dash-act{border-radius:20px;padding:22px;color:#fff;text-decoration:none;position:relative;overflow:hidden;min-height:140px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .2s}
.gcafe-dash-act:hover{transform:translateY(-3px)}
.gcafe-dash-act.green{background:linear-gradient(150deg,var(--d-verde2),var(--d-verde))}
.gcafe-dash-act.blue{background:linear-gradient(150deg,var(--d-azul2),var(--d-azul))}
.gcafe-dash-act.gold{background:linear-gradient(150deg,var(--d-oro-l),var(--d-oro))}
.gcafe-dash-act .aico{position:absolute;top:18px;left:18px;width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:18px}
.gcafe-dash-act .aarrow{position:absolute;top:24px;right:20px;font-size:18px;opacity:.8}
.gcafe-dash-act .at{font-size:20px;font-weight:700}
.gcafe-dash-act .as{font-size:12px;opacity:.85;margin-top:3px}
.gcafe-dash-act .azp{position:absolute;top:18px;right:18px;text-align:right;font-size:11px;opacity:.9}
.gcafe-dash-act .azp b{font-size:16px;display:block}

/* footer */
.gcafe-dash-footer{text-align:center;margin-top:24px}
.gcafe-dash-confidencial{color:var(--d-gris);font-size:12px;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.gcafe-dash-confidencial:hover{color:var(--d-oro)}

/* responsive */
@media(max-width:900px){.gcafe-dash-grid{grid-template-columns:1fr}}
@media(max-width:760px){
  .gcafe-dash-hello{flex-direction:row;align-items:center}
  .gcafe-dash-hello-h{font-size:26px}
  .gcafe-dash-hello-logo{height:42px}
  .gcafe-dash-hello-d{font-size:16px}
  .gcafe-dash-cuotas{grid-template-columns:repeat(3,1fr)}
  .gcafe-dash-actions{grid-template-columns:1fr}
  .gcafe-dash-hero-num{font-size:36px}
}
@media(max-width:420px){
  .gcafe-dash-hello-logo{display:none}
  .gcafe-dash-cuotas{grid-template-columns:repeat(2,1fr)}
}

/* ─── Comunicaciones: archivo de documentos del cliente (2026-06-15) ─────── */
.gcafe-cl-docs-list{display:flex;flex-direction:column;gap:14px}
.gcafe-cl-doc-card{display:flex;align-items:center;gap:18px;background:#fff;
  border:1px solid var(--q-gray-200);border-radius:14px;padding:18px 20px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);transition:box-shadow .15s,border-color .15s}
.gcafe-cl-doc-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.07);border-color:var(--q-gold-soft)}
.gcafe-cl-doc-icon{flex-shrink:0;width:52px;height:52px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--q-gold-soft);color:var(--q-green-deep)}
.gcafe-cl-doc-icon .dashicons{font-size:26px;width:26px;height:26px}
.gcafe-cl-doc-body{flex:1;min-width:0}
.gcafe-cl-doc-tipo{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.8px;color:var(--q-gold-primary);margin-bottom:3px}
.gcafe-cl-doc-titulo{font-size:16px;font-weight:600;color:var(--q-black);margin:0 0 4px}
.gcafe-cl-doc-desc{font-size:13px;color:var(--q-gray-500);margin:0 0 6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcafe-cl-doc-fecha{font-size:12.5px;color:var(--q-gray-400);display:flex;align-items:center;gap:5px}
.gcafe-cl-doc-fecha .dashicons{font-size:15px;width:15px;height:15px}
.gcafe-cl-doc-actions{flex-shrink:0;display:flex;gap:8px}
.gcafe-cl-doc-actions .dashicons{font-size:16px;width:16px;height:16px;vertical-align:text-bottom}
@media(max-width:560px){
  .gcafe-cl-doc-card{flex-wrap:wrap}
  .gcafe-cl-doc-icon{width:44px;height:44px}
  .gcafe-cl-doc-actions{width:100%;margin-top:6px}
  .gcafe-cl-doc-actions .qm-btn{flex:1;text-align:center}
}