/* Reset y Variables */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-green: #2d8659;
    --color-green-light: #4aaf7a;
    --color-yellow: #f4c430;
    --color-yellow-light: #ffd700;
    --color-blue: #1e3a8a;
    --color-blue-light: #3b82f6;
    --color-white: #ffffff;
    --color-black: #1a1a1a;
    --color-gray: #6b7280;
    --color-gray-light: #f3f4f6;
    --color-red: #ef4444;
    --color-red-light: #fee2e2;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--color-gray-light);
    color: var(--color-black);
    line-height: 1.6;
}

/* ========== LOGIN ========== */
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--color-green) 0%, var(--color-blue) 100%);
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.login-box {
    background: var(--color-white);
    border-radius: 12px;
    padding: 40px;
    box-shadow: var(--shadow-lg);
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header h1 {
    color: var(--color-green);
    font-size: 2.5em;
    margin-bottom: 10px;
}

.login-logo {
    max-width: 200px;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.login-header p {
    color: var(--color-gray);
    font-size: 0.9em;
}

.login-form {
    margin-top: 30px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-black);
    font-weight: 500;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1em;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-green);
}

.error-message {
    background-color: var(--color-red-light);
    color: var(--color-red);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
}

.btn-login {
    width: 100%;
    padding: 12px;
    background: var(--color-green);
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-login:hover {
    background: var(--color-green-light);
}

.login-footer {
    margin-top: 20px;
    text-align: center;
    font-size: 0.85em;
    color: var(--color-gray);
}

/* ========== SIDEBAR OVERLAY ========== */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* ========== SIDEBAR ========== */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 280px;
    background: linear-gradient(180deg, var(--color-green) 0%, #1e5d3f 100%);
    color: var(--color-white);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.sidebar-header {
    padding: 25px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-header h2 {
    font-size: 1.5em;
    font-weight: 700;
    margin: 0;
}

.sidebar-logo {
    max-width: 140px;
    width: 100%;
    height: auto;
    display: block;
    filter: brightness(0) invert(1);
    opacity: .92;
}

.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 1.3em;
    cursor: pointer;
    padding: 5px;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle i {
    font-size: 1.2em;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 20px 0;
}

.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-item {
    margin: 5px 0;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.3s;
    border-left: 3px solid transparent;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-left-color: var(--color-white);
    color: var(--color-white);
}

.nav-item.active .nav-link {
    background: rgba(255, 255, 255, 0.15);
    border-left-color: var(--color-yellow);
    color: var(--color-white);
    font-weight: 600;
}

.nav-icon {
    font-size: 1.2em;
    margin-right: 15px;
    width: 20px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-text {
    font-size: 1em;
}

.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-yellow);
    color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2em;
}

.user-details {
    flex: 1;
}

.user-name {
    font-weight: 600;
    font-size: 0.95em;
}

.user-role {
    font-size: 0.8em;
    opacity: 0.8;
}

.logout-link {
    border-left: none !important;
}

.logout-link:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* ========== MAIN WRAPPER ========== */
.main-wrapper {
    margin-left: 280px;
    min-height: 100vh;
    background: var(--color-gray-light);
    transition: margin-left 0.3s ease;
}

/* ========== DASHBOARD HEADER ========== */
.dashboard-header {
    background: var(--color-white);
    padding: 20px 40px;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.3em;
    cursor: pointer;
    padding: 5px 10px;
    color: var(--color-green);
    align-items: center;
    justify-content: center;
}

.mobile-menu-toggle i {
    font-size: 1.2em;
}

.dashboard-header h1 {
    color: var(--color-green);
    font-size: 2em;
    margin: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Campanita de notificaciones ── */
.header-notif-menu {
    position: relative;
}

.header-notif-btn {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid var(--color-gray-light);
    background: var(--color-white);
    color: var(--color-gray);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.header-notif-btn:hover {
    border-color: var(--color-green-light);
    color: var(--color-green);
    transform: scale(1.05);
}

.header-notif-btn:focus-visible {
    outline: 2px solid var(--color-green);
    outline-offset: 3px;
}

.header-notif-menu.is-open .header-notif-btn {
    border-color: var(--color-green);
    color: var(--color-green);
}

/* Badge de conteo */
.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--color-red);
    color: var(--color-white);
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-white);
    line-height: 1;
    transition: transform 0.2s ease;
}

.notif-badge.is-hidden {
    display: none;
}

.notif-badge.pop {
    animation: notif-pop 0.3s ease;
}

@keyframes notif-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* Dropdown */
.header-notif-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    width: 360px;
    background: var(--color-white);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(0,0,0,.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 110;
    overflow: hidden;
}

.header-notif-dropdown::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 18px;
    width: 12px;
    height: 12px;
    background: var(--color-white);
    border-left: 1px solid rgba(0,0,0,.06);
    border-top:  1px solid rgba(0,0,0,.06);
    transform: rotate(45deg);
}

.header-notif-menu.is-open .header-notif-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Cabecera del dropdown */
.notif-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.notif-dropdown-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-black);
}

.notif-mark-all {
    background: none;
    border: none;
    font-size: 0.78rem;
    color: var(--color-green);
    cursor: pointer;
    font-weight: 500;
    padding: 0;
    transition: opacity 0.15s;
}

.notif-mark-all:hover { opacity: 0.7; }

/* Lista de notificaciones */
.notif-list {
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Ítem de notificación */
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(0,0,0,.04);
    cursor: pointer;
    transition: background 0.15s ease;
    position: relative;
}

.notif-item:last-child { border-bottom: none; }

.notif-item:hover { background: var(--color-gray-light); }

.notif-item.is-unread {
    background: #f0fdf4;
}

.notif-item.is-unread:hover { background: #dcfce7; }

/* Punto azul de no leído */
.notif-item.is-unread::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-green);
}

/* Ícono del tipo */
.notif-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.notif-icon--alerta     { background: #fef2f2; color: var(--color-red); }
.notif-icon--mercado    { background: #f0fdf4; color: var(--color-green); }
.notif-icon--clima      { background: #eff6ff; color: var(--color-blue-light); }
.notif-icon--sistema    { background: #fefce8; color: #a16207; }
.notif-icon--info       { background: #f5f3ff; color: #7c3aed; }

.notif-content { flex: 1; min-width: 0; padding-right: 14px; }

.notif-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 3px;
    line-height: 1.3;
}

.notif-body {
    font-size: 0.8rem;
    color: var(--color-gray);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-time {
    font-size: 0.72rem;
    color: var(--color-gray);
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Estado vacío */
.notif-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--color-gray);
}

.notif-empty i {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
    opacity: 0.35;
}

.notif-empty p { font-size: 0.88rem; }

/* Pie del dropdown */
.notif-dropdown-footer {
    padding: 12px 18px;
    border-top: 1px solid rgba(0,0,0,.06);
    text-align: center;
}

.notif-dropdown-footer a {
    color: var(--color-green);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}

.notif-dropdown-footer a:hover { opacity: 0.7; }

/* Menú de usuario (header) */
.header-user-menu {
    position: relative;
}

.header-avatar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid var(--color-gray-light);
    background: var(--color-white);
    cursor: pointer;
    border-radius: 50%;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.header-avatar-btn:hover {
    transform: scale(1.04);
    border-color: var(--color-green-light);
    box-shadow: var(--shadow-lg);
}

.header-avatar-btn:focus-visible {
    outline: 2px solid var(--color-green);
    outline-offset: 3px;
}

.header-avatar-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.header-avatar-fallback {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-yellow);
    color: var(--color-black);
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.15rem;
}

.header-avatar-btn--fallback .header-avatar-img {
    display: none;
}

.header-avatar-btn--fallback .header-avatar-fallback {
    display: flex;
}

.header-user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    min-width: 240px;
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 110;
}

.header-user-dropdown::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 20px;
    width: 12px;
    height: 12px;
    background: var(--color-white);
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    transform: rotate(45deg);
}

.header-user-menu.is-open .header-user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-user-dropdown-profile {
    padding: 12px 16px 10px;
}

.header-user-dropdown-name {
    display: block;
    font-weight: 600;
    color: var(--color-black);
    font-size: 0.95rem;
}

.header-user-dropdown-role {
    display: block;
    font-size: 0.82rem;
    color: var(--color-gray);
    margin-top: 2px;
}

.header-user-dropdown-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 6px 12px;
}

.header-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    color: var(--color-black);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.15s ease;
}

.header-dropdown-item:hover {
    background: var(--color-gray-light);
}

.header-dropdown-item--danger {
    color: var(--color-red);
}

.header-dropdown-item--danger:hover {
    background: var(--color-red-light);
}

.header-dropdown-item i {
    width: 1.1em;
    text-align: center;
    opacity: 0.9;
}

/* ========== DASHBOARD MAIN ========== */
.dashboard-main {
    padding: 30px 40px;
    max-width: 1600px;
    margin: 0 auto;
}

.section-title {
    font-size: 1.5em;
    margin-bottom: 25px;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ========== SECCIÓN VERDE (Simulación de Campaña) ========== */
.section-green {
    background: linear-gradient(135deg, var(--color-green) 0%, var(--color-green-light) 100%);
    color: var(--color-white);
    padding: 40px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-lg);
}

.campaign-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.panel-left h3,
.panel-right h3 {
    margin-bottom: 20px;
    font-size: 1.2em;
    font-weight: 600;
}

.rentability-controls {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.cultivo-selector,
.rinde-input {
    flex: 1;
    min-width: 200px;
}

.cultivo-selector label,
.rinde-input label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.cultivo-selector select,
.rinde-input input {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    background: var(--color-white);
    color: var(--color-black);
}

.precio-display {
    text-align: center;
    margin: 20px 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

.precio-label {
    font-size: 0.9em;
    opacity: 0.9;
    margin-bottom: 8px;
}

.precio-value {
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 5px;
}

.precio-info {
    font-size: 0.85em;
    opacity: 0.8;
    font-style: italic;
}

.tipo-cambio-display {
    text-align: center;
    margin: 15px 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

.tc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.tc-label {
    font-size: 0.85em;
    opacity: 0.9;
    flex: 1;
    text-align: left;
}

.btn-refresh-tc {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-refresh-tc:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(180deg);
}

.btn-refresh-tc i {
    font-size: 0.9em;
}

.tc-value {
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 4px;
}

.tc-info {
    font-size: 0.75em;
    opacity: 0.7;
    font-style: italic;
}

.margen-display {
    text-align: center;
    margin: 30px 0;
    padding: 30px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.margen-value {
    font-size: 3em;
    font-weight: 700;
    margin-bottom: 10px;
}

.margen-label {
    font-size: 1.1em;
    opacity: 0.9;
}

.action-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.btn-primary,
.btn-secondary {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    flex: 1;
}

.btn-primary {
    background: var(--color-white);
    color: var(--color-green);
}

.btn-primary:hover {
    background: var(--color-gray-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    border: 2px solid var(--color-white);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.3);
}

.chart-container {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    height: 300px;
    position: relative;
}

.chart-container canvas {
    max-height: 100% !important;
}

/* ========== SECCIÓN AMARILLA (Análisis de Mercado) ========== */
.section-yellow {
    background: linear-gradient(135deg, var(--color-yellow) 0%, var(--color-yellow-light) 100%);
    color: var(--color-black);
    padding: 40px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-lg);
}

.market-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.panel-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.risk-gauge-container {
    width: 100%;
    text-align: center;
}

.risk-gauge {
    position: relative;
    width: 200px;
    height: 100px;
    margin: 0 auto 20px;
    background: var(--color-white);
    border-radius: 100px 100px 0 0;
    overflow: hidden;
}

.risk-gauge::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        #10b981 0%, 
        #fbbf24 50%, 
        #ef4444 100%);
}

.gauge-needle {
    position: absolute;
    width: 4px;
    height: 80px;
    background: var(--color-black);
    bottom: 0;
    left: 50%;
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(-45deg);
    z-index: 10;
    transition: transform 0.5s ease;
}

.gauge-labels {
    position: absolute;
    width: 100%;
    bottom: 10px;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    font-size: 0.8em;
    font-weight: 600;
    z-index: 5;
}

.risk-status {
    font-size: 1.3em;
    font-weight: 700;
    text-transform: uppercase;
}

.financial-figures {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.figure-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: var(--color-white);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.figure-item.positive .figure-arrow {
    color: #10b981;
}

.figure-item.negative .figure-arrow {
    color: var(--color-red);
}

.figure-value {
    font-size: 1.2em;
    font-weight: 700;
    flex: 1;
}

.figure-label {
    font-size: 0.9em;
    color: var(--color-gray);
}

.scenarios-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.scenario-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: var(--color-white);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.scenario-name {
    font-weight: 600;
}

.scenario-value {
    font-size: 1.2em;
    font-weight: 700;
    color: #10b981;
}

.scenario-value.negative {
    color: var(--color-red);
}

/* ========== SECCIÓN AZUL (Alertas y Noticias) ========== */
.section-blue {
    background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-light) 100%);
    color: var(--color-white);
    padding: 40px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}

.section-blue-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.section-title--inline {
    margin-bottom: 0;
    text-align: left;
}

.section-blue-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.noticias-fuente {
    font-size: 0.82rem;
    opacity: 0.85;
    max-width: 280px;
    text-align: right;
    line-height: 1.3;
}

.noticias-lead {
    font-size: 0.92rem;
    opacity: 0.9;
    margin: 0 0 20px;
    line-height: 1.45;
}

.btn-icon-refresh {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.btn-icon-refresh:hover {
    background: rgba(255, 255, 255, 0.35);
}

.btn-icon-refresh:active {
    transform: scale(0.96);
}

.btn-icon-refresh.is-spinning i {
    animation: spin-noticias 0.85s linear infinite;
}

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

.alerts-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.alert-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border-left: 4px solid var(--color-yellow);
}

.alert-item.news {
    border-left-color: var(--color-white);
}

.alert-icon {
    font-size: 1.5em;
    flex-shrink: 0;
}

.alert-content {
    flex: 1;
}

.alert-text {
    font-size: 1.1em;
    margin-bottom: 8px;
    font-weight: 500;
}

.alert-time {
    font-size: 0.9em;
    opacity: 0.8;
}

.alert-link {
    color: inherit;
    text-decoration: none;
    display: block;
}

.alert-link:hover .alert-text {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.alert-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 6px;
}

.alert-source {
    font-size: 0.82em;
    opacity: 0.75;
}

.alert-tag {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.18);
    font-weight: 600;
}

.alert-tag--comercio { background: rgba(244, 196, 48, 0.35); }
.alert-tag--clima { background: rgba(59, 130, 246, 0.35); }
.alert-tag--geopolitica { background: rgba(239, 68, 68, 0.35); }
.alert-tag--mercado { background: rgba(16, 185, 129, 0.35); }
.alert-tag--insumos { background: rgba(167, 139, 250, 0.35); }
.alert-tag--macro { background: rgba(251, 191, 36, 0.28); }
.alert-tag--general { background: rgba(255, 255, 255, 0.15); }

.noticias-loading-msg {
    opacity: 0.95;
}

.noticias-error-msg .alert-text {
    color: #fecaca;
}

.modal-content--noticias {
    max-width: 720px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.noticias-modal-meta {
    color: var(--color-gray);
    font-size: 0.9rem;
    margin: 0 0 16px;
}

.noticias-modal-list {
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 6px;
}

.noticia-modal-row {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--color-gray-light);
}

.noticia-modal-row a {
    color: var(--color-blue);
    font-weight: 600;
    text-decoration: none;
}

.noticia-modal-row a:hover {
    text-decoration: underline;
}

.noticia-modal-row .noticia-modal-meta-line {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--color-gray);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}

/* ========== MODAL ========== */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: var(--color-white);
    margin: 5% auto;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: var(--shadow-lg);
    position: relative;
}

.close {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 2em;
    font-weight: bold;
    color: var(--color-gray);
    cursor: pointer;
    transition: color 0.3s;
}

.close:hover {
    color: var(--color-black);
}

.modal-form {
    margin-top: 20px;
}

.modal-form .form-group {
    margin-bottom: 20px;
}

.modal-form .form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-black);
    font-weight: 500;
}

.modal-form .form-group input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1em;
}

.modal-form .form-group input:focus {
    outline: none;
    border-color: var(--color-green);
}

/* ── Modal impacto cambiario ── */
.modal-content--impacto {
    max-width: 600px;
}

.impacto-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f0f0f0;
}

.impacto-header-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-light) 100%);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.impacto-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 3px;
    color: var(--color-black);
}

.impacto-sub {
    font-size: .84rem;
    color: var(--color-gray);
    margin: 0;
}

.impacto-base-info {
    background: var(--color-gray-light);
    border-radius: 10px;
    padding: 13px 16px;
    margin-bottom: 18px;
    font-size: .88rem;
    color: var(--color-gray);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.impacto-base-info strong { color: var(--color-black); }

.impacto-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    margin-bottom: 8px;
}

.impacto-table th {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-gray);
    padding: 0 14px 4px;
    text-align: left;
}

.impacto-table th:not(:first-child) { text-align: right; }

.impacto-table td {
    padding: 14px;
    background: var(--color-gray-light);
    font-size: .92rem;
}

.impacto-table td:first-child {
    border-radius: 10px 0 0 10px;
    font-weight: 700;
}

.impacto-table td:last-child {
    border-radius: 0 10px 10px 0;
    text-align: right;
    font-weight: 700;
}

.impacto-table td:not(:first-child):not(:last-child) {
    text-align: right;
}

.impacto-table tr.row--opt td  { background: #f0fdf4; }
.impacto-table tr.row--base td { background: #fefce8; }
.impacto-table tr.row--pes td  { background: #fef2f2; }

.impacto-escenario-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 7px;
}

.dot--opt  { background: #22c55e; }
.dot--base { background: #f59e0b; }
.dot--pes  { background: #ef4444; }

.impacto-margen--pos { color: var(--color-green); }
.impacto-margen--neg { color: var(--color-red); }

/* ── Modal confirmación genérico ── */
.confirm-modal-overlay {
    align-items: center;
    justify-content: center;
}

.confirm-modal-box {
    background: var(--color-white);
    border-radius: 24px;
    padding: 40px 36px 32px;
    width: 92%;
    max-width: 420px;
    box-shadow: 0 24px 70px rgba(0,0,0,.22);
    text-align: center;
    animation: confirmPop .22s cubic-bezier(.34,1.56,.64,1);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

@keyframes confirmPop {
    from { transform: scale(.84) translateY(12px); opacity: 0; }
    to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

/* Ícono */
.confirm-modal-icon {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: var(--color-red-light);
    color: var(--color-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 22px;
    flex-shrink: 0;
}

.confirm-modal-icon--warn {
    background: #fef9c3;
    color: #a16207;
}

/* Textos */
.confirm-modal-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-black);
    margin: 0 0 10px;
    line-height: 1.25;
}

.confirm-modal-msg {
    font-size: .9rem;
    color: var(--color-gray);
    line-height: 1.6;
    margin: 0 0 28px;
    max-width: 320px;
}

/* Botón acción (destructivo) */
.confirm-btn-ok {
    width: 100%;
    padding: 14px 20px;
    background: var(--color-red);
    color: var(--color-white);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .01em;
    transition: background .15s ease, transform .1s ease;
    margin-bottom: 12px;
}

.confirm-btn-ok:hover  { background: #dc2626; }
.confirm-btn-ok:active { transform: scale(.98); }

.confirm-btn-ok--warn            { background: #f59e0b; }
.confirm-btn-ok--warn:hover      { background: #d97706; }

/* Botón cancelar (texto discreto) */
.confirm-btn-cancel {
    width: 100%;
    padding: 10px;
    background: none;
    border: none;
    font-size: .92rem;
    font-weight: 600;
    color: var(--color-gray);
    cursor: pointer;
    border-radius: 10px;
    transition: color .15s ease, background .15s ease;
}

.confirm-btn-cancel:hover {
    color: var(--color-black);
    background: var(--color-gray-light);
}

/* ── Modal próximamente ── */
.modal-content--prox {
    max-width: 480px;
    text-align: center;
}

.prox-body {
    padding: 10px 0 6px;
}

.prox-icon {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-green) 0%, var(--color-green-light) 100%);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 18px;
}

.prox-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-black);
    margin: 0 0 8px;
}

.prox-desc {
    font-size: .9rem;
    color: var(--color-gray);
    line-height: 1.55;
    margin: 0 0 22px;
}

.prox-features {
    list-style: none;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 26px;
    background: var(--color-gray-light);
    border-radius: 12px;
    padding: 16px 20px;
}

.prox-features li {
    font-size: .88rem;
    color: var(--color-black);
    display: flex;
    align-items: center;
    gap: 10px;
}

.prox-features li i {
    color: var(--color-green);
    width: 16px;
    text-align: center;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1200px) {
    .campaign-content,
    .market-content {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   NUEVO DASHBOARD HOME
============================================================ */

/* — Saludo — */
.db-greeting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg, var(--color-green) 0%, #1b5e3b 100%);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 28px;
    color: var(--color-white);
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.db-greeting::before {
    content: '';
    position: absolute;
    right: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
}

.db-greeting::after {
    content: '';
    position: absolute;
    right: 60px;
    bottom: -80px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
}

.db-greeting-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 6px;
}

.db-greeting-sub {
    font-size: 0.92rem;
    opacity: 0.85;
    margin: 0;
}

.db-greeting-right {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.db-greeting-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 0.88rem;
    white-space: nowrap;
}

.db-greeting-badge--tc { background: rgba(244,196,48,.25); border-color: rgba(244,196,48,.4); }

/* — KPI Row — */
.db-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.db-kpi-card {
    background: var(--color-white);
    border-radius: 14px;
    padding: 22px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow);
    border-top: 4px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
    position: relative;
}

.db-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.db-kpi--green  { border-top-color: var(--color-green); }
.db-kpi--blue   { border-top-color: var(--color-blue-light); }
.db-kpi--yellow { border-top-color: var(--color-yellow); }
.db-kpi--purple { border-top-color: #8b5cf6; }

.db-kpi-icon-wrap {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.db-kpi--green  .db-kpi-icon-wrap { background: #dcfce7; color: var(--color-green); }
.db-kpi--blue   .db-kpi-icon-wrap { background: #dbeafe; color: var(--color-blue-light); }
.db-kpi--yellow .db-kpi-icon-wrap { background: #fef9c3; color: #a16207; }
.db-kpi--purple .db-kpi-icon-wrap { background: #ede9fe; color: #7c3aed; }

.db-kpi-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.db-kpi-label {
    font-size: 0.78rem;
    color: var(--color-gray);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.db-kpi-value {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--color-black);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-kpi-sub {
    font-size: 0.78rem;
    color: var(--color-gray);
}

.db-kpi-sub--up   { color: var(--color-green); font-weight: 600; }
.db-kpi-sub--down { color: var(--color-red);   font-weight: 600; }

/* — Grid principal — */
.db-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 20px;
}

/* Cards base */
.db-card {
    background: var(--color-white);
    border-radius: 16px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.db-card--span2 { grid-column: span 2; }

.db-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 0;
    gap: 12px;
    flex-wrap: wrap;
}

.db-card-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.db-card-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.db-card-icon { font-size: 1.05rem; }

.db-card-title {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--color-black);
    margin: 0;
}

.db-card-subtitle {
    font-size: 0.75rem;
    color: var(--color-gray);
    margin-left: 4px;
}

.db-card-link {
    font-size: 0.8rem;
    color: var(--color-green);
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.db-card-link:hover { opacity: 0.7; }

.db-card-refresh {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: var(--color-white);
    color: var(--color-gray);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.15s ease;
}
.db-card-refresh:hover { background: var(--color-gray-light); color: var(--color-black); }

.db-card-body {
    padding: 16px 22px 20px;
    flex: 1;
}

/* — Toggles chart — */
.db-chart-toggles {
    display: flex;
    gap: 4px;
    background: var(--color-gray-light);
    border-radius: 8px;
    padding: 4px;
}

.db-chart-toggle {
    padding: 5px 13px;
    border-radius: 6px;
    border: none;
    background: transparent;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-gray);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.db-chart-toggle.is-active {
    background: var(--color-white);
    color: var(--color-green);
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

/* — Pizarra — */
.db-pizarra {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.db-pizarra-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 22px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.12s ease;
    cursor: default;
}

.db-pizarra-row:last-child { border-bottom: none; }
.db-pizarra-row:hover { background: var(--color-gray-light); }

.db-pizarra-cultivo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.db-pizarra-emoji {
    font-size: 1.2rem;
    width: 32px;
    text-align: center;
}

.db-pizarra-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-black);
}

.db-pizarra-info {
    font-size: 0.72rem;
    color: var(--color-gray);
}

.db-pizarra-right {
    text-align: right;
}

.db-pizarra-precio {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-black);
    display: block;
}

.db-pizarra-usd {
    font-size: 0.75rem;
    color: var(--color-gray);
}

.db-pizarra-var {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    margin-top: 2px;
}

.db-pizarra-var--up   { background: #dcfce7; color: #166534; }
.db-pizarra-var--down { background: #fee2e2; color: #991b1b; }
.db-pizarra-var--flat { background: #f3f4f6; color: var(--color-gray); }

/* — Campaña activa — */
.db-camp-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.db-camp-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.db-camp-emoji {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #dcfce7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.db-camp-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-black);
    margin: 0 0 4px;
}

.db-camp-sub {
    font-size: 0.82rem;
    color: var(--color-gray);
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-camp-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--color-gray);
    margin-bottom: 6px;
}

.db-camp-progress-label strong { color: var(--color-green); }

.db-camp-progress-wrap {
    background: #f0f0f0;
    border-radius: 8px;
    height: 10px;
    overflow: hidden;
}

.db-camp-progress-fill {
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--color-green), var(--color-green-light));
    transition: width 0.8s ease;
}

.db-camp-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 4px;
}

.db-camp-kpi {
    background: var(--color-gray-light);
    border-radius: 10px;
    padding: 12px 14px;
    text-align: center;
}

.db-camp-kpi-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-black);
    display: block;
}

.db-camp-kpi-val--green { color: var(--color-green); }

.db-camp-kpi-lbl {
    font-size: 0.72rem;
    color: var(--color-gray);
    display: block;
    margin-top: 3px;
}

/* — Riesgo en dashboard — */
.db-risk-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.db-risk-body .risk-gauge-container {
    width: 100%;
}

.db-escenarios {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.db-escenario-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 9px;
    background: var(--color-gray-light);
}

.db-escenario-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.db-escenario-dot--opt  { background: #22c55e; }
.db-escenario-dot--base { background: var(--color-yellow); }
.db-escenario-dot--pes  { background: var(--color-red); }

.db-escenario-nombre { font-size: 0.85rem; font-weight: 600; flex: 1; }

.db-escenario-val {
    font-size: 0.85rem;
    font-weight: 700;
}

.db-escenario-val--pos { color: var(--color-green); }
.db-escenario-val--neg { color: var(--color-red); }

/* ── Riesgo breakdown ── */
.db-riesgo-breakdown {
    width: 100%;
}

.db-riesgo-score {
    font-size: 2.2rem;
    font-weight: 800;
    text-align: center;
    line-height: 1;
    margin-bottom: 14px;
}

.db-riesgo-score span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-gray);
}

.db-riesgo-factors {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.db-riesgo-factor-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: default;
}

.db-riesgo-factor-row:hover .db-riesgo-factor-bar {
    filter: brightness(1.1);
}

.db-riesgo-factor-head {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 3px;
}

.db-riesgo-factor-label {
    font-size: .72rem;
    color: var(--color-black);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
}

.db-riesgo-factor-label i {
    color: var(--color-gray);
    font-size: .65rem;
    width: 10px;
}

.db-riesgo-factor-peso {
    font-size: .68rem;
    color: var(--color-gray);
}

.db-riesgo-factor-row {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
}

.db-riesgo-factor-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-riesgo-factor-bar-wrap {
    flex: 1;
    height: 6px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.db-riesgo-factor-bar {
    height: 100%;
    border-radius: 4px;
    transition: width .5s ease;
}

.db-riesgo-factor-val {
    font-size: .7rem;
    font-weight: 700;
    color: var(--color-gray);
    min-width: 22px;
    text-align: right;
}

/* — Noticias en grid — */
.db-noticias-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.db-noticia-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.db-noticia-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
    border-color: var(--color-green);
}

.db-noticia-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: 5px;
    align-self: flex-start;
}

.db-noticia-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-black);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.db-noticia-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--color-gray);
    margin-top: auto;
}

.db-noticia-source {
    font-weight: 600;
    color: var(--color-gray);
}

.db-noticias-loading {
    grid-column: 1 / -1;
    padding: 30px;
    text-align: center;
    color: var(--color-gray);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-toggle {
        display: flex;
    }

    .main-wrapper {
        margin-left: 0;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .dashboard-main {
        padding: 20px;
    }

    .section-green,
    .section-yellow,
    .section-blue {
        padding: 25px;
    }

    .margen-value {
        font-size: 2em;
    }

    .action-buttons {
        flex-direction: column;
    }

    .header-actions {
        flex-wrap: wrap;
    }

    .section-blue-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-title--inline {
        text-align: center;
        width: 100%;
    }

    .section-blue-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .noticias-fuente {
        text-align: left;
        max-width: none;
        flex: 1;
    }

    /* Alertas responsive */
    .an-stats-row { grid-template-columns: 1fr 1fr; }
    .an-layout { grid-template-columns: 1fr; }
    .an-noticias-grid { grid-template-columns: 1fr; }
    .an-page-header { flex-direction: column; align-items: flex-start; }

    /* Dashboard home responsive */
    .db-greeting { padding: 20px; }
    .db-greeting-title { font-size: 1.2rem; }
    .db-greeting-right { display: none; }
    .db-kpi-row { grid-template-columns: 1fr 1fr; }
    .db-main-grid { grid-template-columns: 1fr; }
    .db-card--span2 { grid-column: span 1; }
    .db-noticias-grid { grid-template-columns: 1fr; }
    .db-camp-kpis { grid-template-columns: 1fr 1fr; }

    /* Notificaciones responsive */
    .header-notif-dropdown {
        width: 300px;
        right: -40px;
    }

    /* Campañas responsive */
    .camp-stats-row {
        grid-template-columns: 1fr 1fr;
    }

    .camp-grid {
        grid-template-columns: 1fr;
    }

    .camp-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .camp-form-grid {
        grid-template-columns: 1fr;
    }

    .camp-form-full {
        grid-column: span 1;
    }

    .camp-card-metrics {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   SIMULACIONES
============================================================ */

.section-simulacion { animation: fadeInCamp .25s ease; }

/* — Cabecera — */
.sim-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.sim-page-title {
    font-size: 1.9em;
    font-weight: 700;
    color: var(--color-green);
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sim-page-sub { font-size: .95rem; color: var(--color-gray); margin: 0; }

.sim-header-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* — Grid principal 2 cols — */
.sim-main-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 22px;
    margin-bottom: 22px;
    align-items: start;
}

/* — Card base — */
.sim-card {
    background: var(--color-white);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 20px;
}

.sim-card:last-child { margin-bottom: 0; }
.sim-card--full { margin-bottom: 0; }

.sim-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap;
}

.sim-card-header h3 {
    font-size: .97rem;
    font-weight: 700;
    color: var(--color-black);
    margin: 0;
    flex: 1;
}

/* — Formulario — */
.sim-form-section {
    padding: 16px 22px;
    border-bottom: 1px solid #f9f9f9;
}

.sim-form-section:last-child { border-bottom: none; }

.sim-section-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-gray);
    margin: 0 0 12px;
}

.sim-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.sim-field { display: flex; flex-direction: column; gap: 6px; }

.sim-field label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-black);
}

.sim-field input[type="number"],
.sim-field select {
    width: 100%;
    padding: 9px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 9px;
    font-size: .92rem;
    background: var(--color-white);
    color: var(--color-black);
    transition: border-color .15s;
}

.sim-field input:focus,
.sim-field select:focus {
    outline: none;
    border-color: var(--color-green);
}

/* Botones cultivo */
.sim-cultivo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sim-cultivo-btn {
    padding: 10px 8px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: var(--color-white);
    font-size: .88rem;
    font-weight: 600;
    color: var(--color-gray);
    cursor: pointer;
    transition: all .15s ease;
    text-align: center;
}

.sim-cultivo-btn:hover { border-color: var(--color-green); color: var(--color-green); background: #f0fdf4; }

.sim-cultivo-btn.is-active {
    border-color: var(--color-green);
    background: var(--color-green);
    color: var(--color-white);
}

/* Slider */
.sim-slider-wrap { display: flex; flex-direction: column; gap: 6px; }

.sim-slider-wrap input[type="range"] {
    width: 100%;
    accent-color: var(--color-green);
    cursor: pointer;
    height: 4px;
}

.sim-slider-value-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sim-slider-value-row input[type="number"] {
    width: 100px;
    padding: 7px 10px;
    font-size: .88rem;
}

/* Input con unidad */
.sim-input-unit {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sim-input-unit input { flex: 1; }

.sim-unit {
    font-size: .82rem;
    color: var(--color-gray);
    font-weight: 600;
    white-space: nowrap;
}

.sim-unit--prefix {
    padding: 9px 10px;
    background: var(--color-gray-light);
    border: 2px solid #e5e7eb;
    border-right: none;
    border-radius: 9px 0 0 9px;
    line-height: 1;
}

.sim-input-badge-wrap { display: flex; flex-direction: column; gap: 5px; }

.sim-price-info {
    font-size: .74rem;
    color: var(--color-green);
    font-weight: 600;
    padding: 2px 8px;
    background: #dcfce7;
    border-radius: 5px;
    align-self: flex-start;
}

/* TC refresh */
.sim-tc-wrap { position: relative; }

.sim-refresh-tc {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 2px solid #e5e7eb;
    border-radius: 9px;
    background: var(--color-white);
    color: var(--color-gray);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    transition: all .15s ease;
}

.sim-refresh-tc:hover { border-color: var(--color-green); color: var(--color-green); }

/* — KPI resultados — */
.sim-result-kpis {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.sim-kpi-card {
    background: var(--color-white);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow);
    border-left: 5px solid var(--color-green);
    transition: transform .15s ease;
}

.sim-kpi-card:hover { transform: translateY(-2px); }
.sim-kpi-card--costs { border-left-color: var(--color-red); }
.sim-kpi-card--net   { border-left-color: var(--color-blue-light); }
.sim-kpi-card--usd   { border-left-color: var(--color-yellow); }

.sim-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.sim-kpi-card .sim-kpi-icon          { background: #dcfce7; color: var(--color-green); }
.sim-kpi-card--costs .sim-kpi-icon   { background: #fee2e2; color: var(--color-red); }
.sim-kpi-card--net .sim-kpi-icon     { background: #dbeafe; color: var(--color-blue-light); }
.sim-kpi-card--usd .sim-kpi-icon     { background: #fef9c3; color: #a16207; }

.sim-kpi-body { flex: 1; min-width: 0; }

.sim-kpi-label {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-gray);
    display: block;
    margin-bottom: 3px;
}

.sim-kpi-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-black);
    display: block;
    line-height: 1.1;
}

.sim-kpi-sub {
    font-size: .76rem;
    color: var(--color-gray);
    display: block;
    margin-top: 3px;
}

.sim-kpi-badge {
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 5px;
    white-space: nowrap;
    align-self: flex-start;
}

.sim-kpi-badge--pos { background: #dcfce7; color: #166534; }
.sim-kpi-badge--neg { background: #fee2e2; color: #991b1b; }
.sim-kpi-badge--warn { background: #fef9c3; color: #a16207; }

.sim-chart-wrap { padding: 0 16px 16px; }

/* — Matriz de sensibilidad — */
.sim-matriz-legend {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

.sim-leg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 5px;
}

.sim-leg--neg   { background: #fee2e2; color: #991b1b; }
.sim-leg--warn  { background: #fef9c3; color: #a16207; }
.sim-leg--ok    { background: #dcfce7; color: #166534; }
.sim-leg--great { background: #d1fae5; color: #064e3b; }

.sim-matriz-wrap { overflow-x: auto; padding: 20px 22px; }

.sim-matriz-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    min-width: 560px;
}

.sim-matriz-table th {
    font-size: .75rem;
    font-weight: 700;
    color: var(--color-gray);
    text-align: center;
    padding: 6px 10px;
    white-space: nowrap;
}

.sim-matriz-table td {
    text-align: center;
    padding: 10px 8px;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    min-width: 90px;
    transition: transform .1s ease;
    cursor: default;
}

.sim-matriz-table td:hover { transform: scale(1.04); box-shadow: var(--shadow); }

.sim-matriz-row-label {
    font-size: .75rem;
    font-weight: 700;
    color: var(--color-gray);
    text-align: right;
    padding-right: 12px;
    white-space: nowrap;
}

.sim-cell--neg   { background: #fecaca; color: #7f1d1d; }
.sim-cell--warn  { background: #fef08a; color: #713f12; }
.sim-cell--ok    { background: #bbf7d0; color: #14532d; }
.sim-cell--great { background: #6ee7b7; color: #064e3b; }
.sim-cell--base  { outline: 2px solid var(--color-green); outline-offset: -2px; }

/* — Historial — */
.sim-historial-wrap { padding: 0; }

.sim-hist-table {
    width: 100%;
    border-collapse: collapse;
}

.sim-hist-table thead tr {
    background: var(--color-gray-light);
}

.sim-hist-table th {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-gray);
    padding: 11px 16px;
    text-align: left;
}

.sim-hist-table td {
    padding: 13px 16px;
    font-size: .88rem;
    color: var(--color-black);
    border-bottom: 1px solid #f3f4f6;
}

.sim-hist-table tbody tr:hover { background: var(--color-gray-light); }
.sim-hist-table tbody tr:last-child td { border-bottom: none; }

.sim-hist-margen--pos { color: var(--color-green); font-weight: 700; }
.sim-hist-margen--neg { color: var(--color-red); font-weight: 700; }

.sim-hist-actions { display: flex; gap: 6px; }

.sim-hist-btn {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: var(--color-white);
    font-size: .78rem;
    cursor: pointer;
    color: var(--color-gray);
    transition: all .12s ease;
}

.sim-hist-btn:hover { background: var(--color-gray-light); color: var(--color-black); }
.sim-hist-btn--load { border-color: var(--color-green); color: var(--color-green); }
.sim-hist-btn--load:hover { background: #dcfce7; }

/* Responsive */
@media (max-width: 1100px) {
    .sim-main-grid { grid-template-columns: 1fr; }
    .sim-result-kpis { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   ANÁLISIS DE MERCADO (IA + ERA5)
============================================================ */

.section-mercado { animation: fadeInCamp .25s ease; }

/* ── Cabecera ──────────────────────────────────────────────── */
.merc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #1e1b4b 0%, #3730a3 50%, #6366f1 100%);
    border-radius: 18px;
    padding: 28px 32px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.merc-header::before {
    content: '';
    position: absolute;
    right: -40px; top: -40px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
}

.merc-header::after {
    content: '';
    position: absolute;
    right: 80px; bottom: -70px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
}

.merc-title {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 6px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
}

.merc-title i { opacity: .9; }

.merc-ia-badge {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .1em;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    padding: 3px 9px;
    border-radius: 6px;
}

.merc-sub {
    font-size: .88rem;
    color: rgba(255,255,255,.8);
    margin: 0;
    max-width: 520px;
}

.merc-btn-analizar {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,.15) !important;
    border: 1.5px solid rgba(255,255,255,.4) !important;
    color: #fff !important;
    backdrop-filter: blur(8px);
    font-size: .95rem !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    white-space: nowrap;
    transition: background .2s ease, transform .15s ease !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.merc-btn-analizar:hover {
    background: rgba(255,255,255,.28) !important;
    transform: translateY(-1px) !important;
}

/* ── Tag IA en cards ───────────────────────────────────────── */
.merc-ia-tag {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    padding: 2px 9px;
    border-radius: 5px;
    margin-left: auto;
}

/* ── Setup alert ───────────────────────────────────────────── */
.merc-setup-alert {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fffbeb;
    border: 1.5px solid #fbbf24;
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 24px;
}

.merc-setup-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fef9c3;
    color: #d97706;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.merc-setup-body { font-size: .88rem; color: #92400e; line-height: 1.65; }
.merc-setup-body strong { font-size: .95rem; display: block; margin-bottom: 8px; }
.merc-setup-body ol { padding-left: 18px; margin: 0; }
.merc-setup-body li { margin-bottom: 4px; }
.merc-setup-body a  { color: #1d4ed8; font-weight: 600; }
.merc-setup-body code {
    background: rgba(0,0,0,.08);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .82rem;
    font-family: monospace;
}

/* ── Layout ────────────────────────────────────────────────── */
.merc-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 24px;
    align-items: start;
}

/* ── Card base ─────────────────────────────────────────────── */
.merc-card {
    background: var(--color-white);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 18px;
    transition: box-shadow .15s ease;
}

.merc-card:last-child { margin-bottom: 0; }
.merc-card:hover      { box-shadow: var(--shadow-lg); }

.merc-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px 14px;
    border-bottom: 1px solid #f3f4f6;
}

.merc-card-header i   { font-size: 1rem; }
.merc-card-header h3  { font-size: .95rem; font-weight: 700; color: var(--color-black); margin: 0; flex: 1; }

.merc-card-body { padding: 18px 22px; }

/* ── Panel izquierdo — formulario ──────────────────────────── */
.merc-form-section {
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
}

.merc-form-section:last-child { border-bottom: none; padding-bottom: 20px; }

.merc-section-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #9ca3af;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.merc-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-black);
    display: block;
    margin-bottom: 5px;
}

/* Selector cultivo */
.merc-cultivo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 10px;
}

.merc-cultivo-btn {
    padding: 9px 6px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: var(--color-white);
    font-size: .83rem;
    font-weight: 600;
    color: var(--color-gray);
    cursor: pointer;
    transition: all .15s ease;
    text-align: center;
    line-height: 1.3;
}

.merc-cultivo-btn:hover {
    border-color: #6366f1;
    color: #6366f1;
    background: #eef2ff;
}

.merc-cultivo-btn.is-active {
    border-color: #6366f1;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 2px 8px rgba(99,102,241,.3);
}

/* Select campo */
.merc-select {
    width: 100%;
    padding: 9px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: .9rem;
    background: var(--color-white);
    color: var(--color-black);
    cursor: pointer;
    transition: border-color .15s ease;
}

.merc-select:focus { outline: none; border-color: #6366f1; }

/* Inputs fecha */
.merc-dates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.merc-date-input {
    width: 100%;
    padding: 8px 10px;
    border: 2px solid #e5e7eb;
    border-radius: 9px;
    font-size: .85rem;
    transition: border-color .15s;
}

.merc-date-input:focus { outline: none; border-color: #6366f1; }

/* Variables de mercado */
.merc-var-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid #f9f9f9;
}

.merc-var-row:last-child { border-bottom: none; }

.merc-var-label {
    font-size: .82rem;
    color: var(--color-black);
    font-weight: 500;
    flex: 1;
}

.merc-var-input {
    width: 100px;
    flex-shrink: 0;
    padding: 6px 10px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: .88rem;
    text-align: right;
    color: var(--color-black);
    transition: border-color .15s;
}

.merc-var-input:focus { outline: none; border-color: #6366f1; }

/* Riesgo compacto */
.merc-riesgo-compacto { display: flex; flex-direction: column; gap: 8px; }

.merc-riesgo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
}

.merc-riesgo-item-label { flex: 1; color: var(--color-black); font-weight: 500; }

.merc-riesgo-item-bar-wrap {
    width: 70px;
    height: 6px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.merc-riesgo-item-bar { height: 100%; border-radius: 4px; transition: width .5s ease; }
.merc-riesgo-item-val { width: 22px; text-align: right; color: var(--color-gray); font-size: .72rem; font-weight: 700; }

/* ── Estado vacío ──────────────────────────────────────────── */
.merc-empty-state {
    background: var(--color-white);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 60px 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.merc-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 22px;
    background: linear-gradient(135deg, #1e1b4b, #6366f1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 22px;
    box-shadow: 0 8px 24px rgba(99,102,241,.35);
}

.merc-empty-state h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-black);
    margin: 0 0 10px;
}

.merc-empty-state > p {
    color: var(--color-gray);
    font-size: .92rem;
    line-height: 1.6;
    margin: 0 0 26px;
    max-width: 360px;
}

.merc-empty-features {
    list-style: none;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--color-gray-light);
    border-radius: 12px;
    padding: 18px 22px;
    width: 100%;
    max-width: 380px;
}

.merc-empty-features li {
    font-size: .88rem;
    color: var(--color-black);
    display: flex;
    align-items: center;
    gap: 10px;
}

.merc-empty-features li i {
    color: #6366f1;
    font-size: .8rem;
    width: 16px;
    text-align: center;
}

/* ── Loading ───────────────────────────────────────────────── */
.merc-loading {
    background: var(--color-white);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 60px 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.merc-loading-spinner {
    position: relative;
    width: 72px;
    height: 72px;
    margin-bottom: 6px;
}

.merc-spinner-ring {
    position: absolute;
    inset: 0;
    border: 4px solid #e5e7eb;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: mercSpin .9s linear infinite;
}

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

.merc-spinner-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #6366f1;
}

.merc-loading h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-black);
    margin: 18px 0 22px;
}

.merc-loading-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 320px;
    text-align: left;
}

.merc-loading-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .86rem;
    color: #9ca3af;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--color-gray-light);
    transition: all .3s ease;
}

.merc-loading-step.is-active {
    color: #6366f1;
    background: #eef2ff;
    font-weight: 600;
}

.merc-loading-step.is-done {
    color: var(--color-green);
    background: #dcfce7;
}

.merc-loading-step i { width: 16px; text-align: center; flex-shrink: 0; }

/* ── Cards de resultado ────────────────────────────────────── */

/* Diagnóstico */
.merc-card--diagnostico {
    border: none;
    background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 100%);
    color: #fff;
}

.merc-card--diagnostico .merc-card-header {
    border-bottom-color: rgba(255,255,255,.12);
    padding-bottom: 14px;
}

.merc-card--diagnostico .merc-card-header h3 { color: #fff; }
.merc-card--diagnostico .merc-card-header i  { color: rgba(255,255,255,.7); }

.merc-ia-tag {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    padding: 3px 9px;
    border-radius: 6px;
    margin-left: auto;
}

.merc-diagnostico-text {
    font-size: .96rem;
    color: rgba(255,255,255,.92);
    line-height: 1.7;
    padding: 18px 22px 14px;
    margin: 0;
}

.merc-score-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255,255,255,.1);
    border-top: 1px solid rgba(255,255,255,.1);
}

.merc-score-item {
    padding: 16px 12px;
    text-align: center;
    background: rgba(255,255,255,.04);
}

.merc-score-val {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}

.merc-score-lbl {
    display: block;
    font-size: .7rem;
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Oportunidades y riesgos */
.merc-list {
    list-style: none;
    padding: 14px 20px 18px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.merc-list li {
    font-size: .88rem;
    color: var(--color-black);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 9px;
    background: var(--color-gray-light);
}

.merc-list--pos li { background: #f0fdf4; }
.merc-list--neg li { background: #fef2f2; }

.merc-list--pos li::before {
    content: '✓';
    color: #16a34a;
    font-weight: 800;
    flex-shrink: 0;
    font-size: .9rem;
}

.merc-list--neg li::before {
    content: '!';
    color: #dc2626;
    font-weight: 800;
    flex-shrink: 0;
    font-size: .85rem;
    width: 18px;
    height: 18px;
    background: #fecaca;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Recomendación */
.merc-card--recomendacion {
    background: linear-gradient(135deg, #451a03, #92400e);
    color: #fff;
    border: none;
}

.merc-card--recomendacion .merc-card-header { border-bottom-color: rgba(255,255,255,.12); }
.merc-card--recomendacion .merc-card-header h3 { color: #fff; }
.merc-card--recomendacion .merc-card-header i  { color: var(--color-yellow); }

.merc-recomendacion-text {
    font-size: .96rem;
    color: rgba(255,255,255,.92);
    line-height: 1.7;
    padding: 16px 22px 12px;
    margin: 0;
}

.merc-venta-badge {
    margin: 4px 22px 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 20px;
    font-size: .88rem;
    font-weight: 700;
    border: 1.5px solid transparent;
}

.merc-venta--ahora   { background: #dcfce7; color: #166534; }
.merc-venta--esperar { background: #fef9c3; color: #a16207; }
.merc-venta--parcial { background: #dbeafe; color: #1e40af; }

/* Clima card */
.merc-clima-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.merc-clima-item {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}

.merc-clima-val {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    color: #1e40af;
}

.merc-clima-lbl {
    display: block;
    font-size: .72rem;
    color: #3b82f6;
    margin-top: 4px;
    font-weight: 500;
}

.merc-anomalia {
    margin-top: 12px;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: .84rem;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.merc-anomalia--pos { background: #dcfce7; color: #166534; }
.merc-anomalia--neg { background: #fee2e2; color: #991b1b; }
.merc-anomalia--ok  { background: #f0fdf4; color: var(--color-green); }

/* Rinde IA */
.merc-rinde-val {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--color-green);
    display: block;
    margin-bottom: 6px;
    letter-spacing: -.02em;
}

.merc-rinde-confianza {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.conf--alta  { background: #dcfce7; color: #166534; }
.conf--media { background: #fef9c3; color: #a16207; }
.conf--baja  { background: #fee2e2; color: #991b1b; }

.merc-rinde-just {
    font-size: .85rem;
    color: var(--color-gray);
    line-height: 1.55;
    margin: 0;
    border-top: 1px solid #f3f4f6;
    padding-top: 10px;
}

/* Footer IA */
.merc-ia-footer {
    text-align: right;
    font-size: .74rem;
    color: var(--color-gray);
    margin-top: 12px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.merc-ia-footer::before {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

/* Grid 2 columnas para resultados */
.merc-2col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .merc-layout    { grid-template-columns: 1fr; }
    .merc-header    { padding: 22px 24px; }
    .merc-2col-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   REPORTES
============================================================ */

.section-reportes { animation: fadeInCamp .25s ease; }

/* ── Cabecera ── */
.rep-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.rep-title {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--color-black);
    margin: 0 0 5px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.rep-title i { color: var(--color-gray); }

.rep-sub {
    font-size: .92rem;
    color: var(--color-gray);
    margin: 0;
}

.rep-acciones-header { display: flex; }

.rep-btn-nuevo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    background: var(--color-white);
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-gray);
    cursor: pointer;
    transition: all .15s ease;
}

.rep-btn-nuevo:hover { border-color: var(--color-black); color: var(--color-black); }

.rep-btn-print {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 10px;
    border: none;
    background: var(--color-black);
    color: var(--color-white);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}

.rep-btn-print:hover { background: #374151; }

/* ── Grid de tipos ── */
.rep-types-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.rep-type-card {
    background: var(--color-white);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 24px 22px 20px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rep-type-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.rep-type-card.is-selected {
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99,102,241,.12);
}

.rep-type-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.rep-type-icon--purple { background: #ede9fe; color: #7c3aed; }
.rep-type-icon--green  { background: #dcfce7; color: var(--color-green); }
.rep-type-icon--blue   { background: #dbeafe; color: var(--color-blue-light); }
.rep-type-icon--yellow { background: #fef9c3; color: #a16207; }

.rep-type-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-black);
    margin: 0;
}

.rep-type-card > p {
    font-size: .83rem;
    color: var(--color-gray);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.rep-type-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rep-type-list li {
    font-size: .78rem;
    color: var(--color-gray);
    display: flex;
    align-items: center;
    gap: 7px;
}

.rep-type-list li::before {
    content: '·';
    font-weight: 900;
    color: #9ca3af;
}

.rep-type-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}

.rep-type-tag {
    font-size: .72rem;
    font-weight: 600;
    color: var(--color-gray);
    background: var(--color-gray-light);
    padding: 3px 9px;
    border-radius: 5px;
}

.rep-type-card .rep-btn-generar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1.5px solid #e5e7eb;
    background: var(--color-white);
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-gray);
    cursor: pointer;
    transition: all .12s ease;
}

.rep-type-card.is-selected .rep-btn-generar,
.rep-type-card:hover .rep-btn-generar {
    border-color: #6366f1;
    color: #6366f1;
    background: #eef2ff;
}

/* ── Params box ── */
.rep-params-box {
    background: var(--color-white);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 22px 28px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.rep-params-box--center { justify-content: center; }

.rep-params-box h4 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-black);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.rep-select {
    flex: 1;
    min-width: 220px;
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: .92rem;
    background: var(--color-white);
    cursor: pointer;
    transition: border-color .15s;
}

.rep-select:focus { outline: none; border-color: #6366f1; }

.rep-btn-generar-main {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 28px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: var(--color-white);
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(99,102,241,.35);
    transition: transform .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}

.rep-btn-generar-main:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,.4); }
.rep-btn-generar-main:disabled { opacity: .6; transform: none; cursor: not-allowed; }

/* ── Loading ── */
.rep-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    background: var(--color-white);
    border-radius: 18px;
    box-shadow: var(--shadow);
    margin-bottom: 24px;
}

.rep-loading-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--color-gray);
    font-weight: 600;
}

.rep-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: mercSpin .8s linear infinite;
    flex-shrink: 0;
}

/* ── Reporte generado ── */
.rep-resultado {
    background: var(--color-white);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* Cabecera del reporte (dentro del resultado) */
.rep-doc-header {
    background: linear-gradient(135deg, var(--color-green), #1b5e3b);
    color: var(--color-white);
    padding: 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.rep-doc-header--purple { background: linear-gradient(135deg, #1e1b4b, #6366f1); }
.rep-doc-header--blue   { background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.rep-doc-header--amber  { background: linear-gradient(135deg, #78350f, #d97706); }

.rep-doc-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.3rem;
    font-weight: 800;
    opacity: .95;
}

.rep-doc-logo i { font-size: 1.5rem; }

.rep-doc-meta { text-align: right; }

.rep-doc-meta .rep-doc-tipo {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .8;
    margin-bottom: 4px;
}

.rep-doc-meta .rep-doc-nombre {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.rep-doc-meta .rep-doc-fecha {
    font-size: .82rem;
    opacity: .75;
}

/* Body del reporte */
.rep-doc-body { padding: 32px 40px; }

/* KPI row en reportes */
.rep-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.rep-kpi-card {
    background: var(--color-gray-light);
    border-radius: 12px;
    padding: 18px 16px;
    text-align: center;
    border-top: 4px solid transparent;
}

.rep-kpi-card--green  { border-top-color: var(--color-green); }
.rep-kpi-card--blue   { border-top-color: var(--color-blue-light); }
.rep-kpi-card--yellow { border-top-color: var(--color-yellow); }
.rep-kpi-card--red    { border-top-color: var(--color-red); }
.rep-kpi-card--purple { border-top-color: #7c3aed; }

.rep-kpi-val {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: 4px;
}

.rep-kpi-lbl {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-gray);
}

/* Secciones del reporte */
.rep-section {
    margin-bottom: 32px;
}

.rep-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-black);
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Tabla de reporte */
.rep-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.rep-table th {
    background: var(--color-gray-light);
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-gray);
    padding: 10px 14px;
    text-align: left;
    white-space: nowrap;
}

.rep-table td {
    padding: 11px 14px;
    border-bottom: 1px solid #f3f4f6;
    color: var(--color-black);
}

.rep-table tbody tr:last-child td { border-bottom: none; }
.rep-table tbody tr:hover { background: var(--color-gray-light); }

.rep-table .td-pos { color: var(--color-green); font-weight: 700; }
.rep-table .td-neg { color: var(--color-red); font-weight: 700; }
.rep-table .td-mono { font-family: monospace; }

/* Rows de campaña */
.rep-camp-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--color-gray-light);
    border-radius: 12px;
    margin-bottom: 10px;
}

.rep-camp-emoji {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.rep-camp-info { flex: 1; min-width: 0; }
.rep-camp-nombre { font-weight: 700; font-size: .95rem; color: var(--color-black); margin-bottom: 3px; }
.rep-camp-meta   { font-size: .78rem; color: var(--color-gray); }
.rep-camp-margen { text-align: right; }
.rep-camp-margen-val { display: block; font-size: 1.1rem; font-weight: 800; color: var(--color-green); }
.rep-camp-margen-lbl { font-size: .72rem; color: var(--color-gray); }

/* Progress bar en reporte */
.rep-progress-wrap { background: #f0f0f0; border-radius: 6px; height: 8px; overflow: hidden; margin-top: 6px; }
.rep-progress-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--color-green), var(--color-green-light)); }

/* Grid 2-3 cols en reporte */
.rep-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.rep-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }

/* Escenarios */
.rep-escenario {
    padding: 16px;
    border-radius: 12px;
    text-align: center;
}

.rep-escenario--opt { background: #dcfce7; }
.rep-escenario--base { background: #fef9c3; }
.rep-escenario--pes  { background: #fee2e2; }

.rep-escenario-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-gray); margin-bottom: 8px; }
.rep-escenario-val   { font-size: 1.3rem; font-weight: 800; color: var(--color-black); margin-bottom: 4px; }
.rep-escenario-sub   { font-size: .78rem; color: var(--color-gray); }

/* Costos bar */
.rep-costo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.rep-costo-label { width: 140px; flex-shrink: 0; font-size: .84rem; color: var(--color-black); font-weight: 500; }
.rep-costo-bar-wrap { flex: 1; height: 8px; background: #f0f0f0; border-radius: 5px; overflow: hidden; }
.rep-costo-bar { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.rep-costo-val { font-size: .82rem; font-weight: 700; color: var(--color-black); width: 42px; text-align: right; }

/* Badge de status */
.rep-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rep-badge--en_curso     { background: #dcfce7; color: #166534; }
.rep-badge--planificacion { background: #dbeafe; color: #1e40af; }
.rep-badge--cosechada    { background: #f0fdf4; color: #15803d; border: 1px solid #86efac; }
.rep-badge--cancelada    { background: #fee2e2; color: #991b1b; }

/* Insight box */
.rep-insight {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    border-radius: 12px;
    padding: 18px 20px;
    border-left: 4px solid #7c3aed;
    margin-bottom: 16px;
}

.rep-insight-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #7c3aed; margin-bottom: 6px; }
.rep-insight p { font-size: .9rem; color: #1e1b4b; line-height: 1.55; margin: 0; }

/* ══════════════════════════════════════════════════════════════
   MEMBRETE (pantalla + impresión)
══════════════════════════════════════════════════════════════ */

/* Franja de color superior */
.rep-lh-stripe {
    height: 8px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, #2d8659 0%, #4aaf7a 100%);
}

.rep-lh-stripe--ejecutivo    { background: linear-gradient(90deg, #1e1b4b, #6366f1); }
.rep-lh-stripe--campana      { background: linear-gradient(90deg, #14532d, #2d8659); }
.rep-lh-stripe--rentabilidad { background: linear-gradient(90deg, #1e3a8a, #3b82f6); }
.rep-lh-stripe--simulaciones { background: linear-gradient(90deg, #78350f, #d97706); }

/* Contenedor membrete */
.rep-letterhead {
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    border-bottom: 2px solid #f0f0f0;
}

/* Cabecera del membrete */
.rep-lh-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 36px 20px;
    background: #fff;
    flex-wrap: wrap;
}

/* Logo + marca */
.rep-lh-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rep-lh-logo {
    height: 52px;
    width: auto;
    object-fit: contain;
    display: block;
}

.rep-lh-logo-fallback {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-green);
    letter-spacing: -.02em;
}

.rep-lh-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 2px solid #e5e7eb;
    padding-left: 14px;
}

.rep-lh-brand-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-black);
    letter-spacing: -.01em;
}

.rep-lh-brand-tagline {
    font-size: .72rem;
    color: var(--color-gray);
    letter-spacing: .01em;
}

/* Datos del documento */
.rep-lh-docinfo {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rep-lh-docinfo-tipo {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-gray);
}

.rep-lh-docinfo-fecha {
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-black);
}

.rep-lh-docinfo-id {
    font-size: .7rem;
    color: #9ca3af;
    font-family: monospace;
    letter-spacing: .04em;
}

/* Divisor con gradiente */
.rep-lh-divider {
    padding: 0 36px;
    margin-bottom: 0;
}

.rep-lh-divider-line {
    height: 1px;
    background: linear-gradient(90deg, #e5e7eb 0%, #d1d5db 40%, #e5e7eb 100%);
}

/* Título del reporte */
.rep-lh-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 36px 24px;
    background: #fafafa;
}

.rep-lh-title-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.rep-lh-title-icon--ejecutivo    { background: #ede9fe; color: #7c3aed; }
.rep-lh-title-icon--campana      { background: #dcfce7; color: var(--color-green); }
.rep-lh-title-icon--rentabilidad { background: #dbeafe; color: var(--color-blue-light); }
.rep-lh-title-icon--simulaciones { background: #fef9c3; color: #a16207; }

.rep-lh-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--color-black);
    margin: 0 0 3px;
    letter-spacing: -.01em;
}

.rep-lh-generated {
    font-size: .8rem;
    color: var(--color-gray);
    margin: 0;
}

/* Pie de página del documento */
.rep-lh-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 36px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 18px 18px;
    flex-wrap: wrap;
}

.rep-lh-footer-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .75rem;
    color: var(--color-gray);
    font-weight: 500;
}

.rep-lh-footer-logo {
    height: 22px;
    width: auto;
    opacity: .7;
    object-fit: contain;
}

.rep-lh-footer-center {
    font-size: .73rem;
    color: #9ca3af;
    text-align: center;
    flex: 1;
}

.rep-lh-footer-right {
    font-size: .72rem;
    color: #9ca3af;
    font-style: italic;
}

/* ── Print styles ─────────────────────────────────────────── */
@media print {
    /* Ocultar toda la UI de la app */
    .sidebar,
    .sidebar-overlay,
    .dashboard-header,
    .rep-header,
    #repSelector,
    #repLoading,
    .rep-btn-print,
    .rep-btn-nuevo,
    .rep-acciones-header,
    .rep-types-grid,
    .rep-params-box { display: none !important; }

    /* Reset de layout */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
    .main-wrapper  { margin-left: 0 !important; }
    .dashboard-main { padding: 0 !important; max-width: none !important; }
    .section-reportes { animation: none !important; }

    /* Resultado ocupa toda la página */
    .rep-resultado {
        box-shadow: none !important;
        border-radius: 0 !important;
        width: 100% !important;
    }

    /* Membrete en impresión */
    .rep-letterhead {
        border-radius: 0 !important;
        border-bottom: 1.5px solid #000 !important;
    }

    .rep-lh-stripe { border-radius: 0 !important; height: 6px !important; }

    .rep-lh-header {
        padding: 16px 24px 14px !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    .rep-lh-logo  { height: 44px !important; }

    .rep-lh-title-row { padding: 14px 24px 18px !important; background: #f9fafb !important; }
    .rep-lh-title      { font-size: 1.25rem !important; }

    .rep-lh-divider { padding: 0 24px !important; }

    /* Cuerpo del reporte */
    .rep-doc-body {
        padding: 20px 24px 16px !important;
    }

    /* Tablas */
    .rep-table th { background: #f3f4f6 !important; }
    .rep-table td, .rep-table th { padding: 7px 10px !important; font-size: .82rem !important; }

    /* KPIs */
    .rep-kpi-row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; gap: 10px !important; }
    .rep-kpi-card { padding: 12px !important; }
    .rep-kpi-val  { font-size: 1.15rem !important; }

    /* Evitar cortes en elementos clave */
    .rep-kpi-card,
    .rep-camp-row,
    .rep-escenario,
    .rep-costo-row,
    .rep-insight { break-inside: avoid; }

    .rep-section    { break-inside: avoid; margin-bottom: 20px !important; }
    .rep-grid-2,
    .rep-grid-3     { break-inside: avoid; }

    /* Pie del documento */
    .rep-lh-footer {
        border-radius: 0 !important;
        padding: 10px 24px !important;
        border-top: 1.5px solid #000 !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff !important;
    }

    .rep-lh-footer-logo { height: 18px !important; }
}

/* Responsive reportes */
@media (max-width: 1100px) {
    .rep-types-grid { grid-template-columns: 1fr 1fr; }
    .rep-grid-2 { grid-template-columns: 1fr; }
    .rep-grid-3 { grid-template-columns: 1fr 1fr; }
    .rep-doc-header { flex-direction: column; align-items: flex-start; }
    .rep-doc-meta { text-align: left; }
    .rep-doc-body { padding: 22px 24px; }
}

/* ============================================================
   ALERTAS Y NOTICIAS
============================================================ */

.section-alertas {
    animation: fadeInCamp 0.25s ease;
}

/* — Cabecera — */
.an-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.an-page-title-area { display: flex; flex-direction: column; gap: 4px; }

.an-page-title {
    font-size: 1.9em;
    font-weight: 700;
    color: var(--color-blue);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.an-page-icon { font-size: .85em; }

.an-page-sub {
    font-size: .95rem;
    color: var(--color-gray);
    margin: 0;
}

.an-btn-refresh {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* — Stats — */
.an-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 26px;
}

.an-stat-card {
    background: var(--color-white);
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow);
    border-left: 5px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease;
}

.an-stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.an-stat--red   { border-left-color: var(--color-red); }
.an-stat--blue  { border-left-color: var(--color-blue-light); }
.an-stat--green { border-left-color: var(--color-green); }
.an-stat--gray  { border-left-color: var(--color-gray); }

.an-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.an-stat--red   .an-stat-icon { background: var(--color-red-light);  color: var(--color-red); }
.an-stat--blue  .an-stat-icon { background: #dbeafe;                  color: var(--color-blue-light); }
.an-stat--green .an-stat-icon { background: #dcfce7;                  color: var(--color-green); }
.an-stat--gray  .an-stat-icon { background: #f3f4f6;                  color: var(--color-gray); }

.an-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--color-black); line-height: 1.2; }
.an-stat-label { font-size: .8rem; color: var(--color-gray); margin-top: 2px; }

/* — Layout 2 columnas — */
.an-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 22px;
    align-items: start;
}

/* — Card base — */
.an-card {
    background: var(--color-white);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 20px;
}

.an-card:last-child { margin-bottom: 0; }

.an-card--alerts { }
.an-card--sources { }
.an-card--topics { }

.an-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap;
}

.an-card-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-black);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.an-fuente-badge {
    font-size: .75rem;
    color: var(--color-gray);
    background: var(--color-gray-light);
    padding: 3px 10px;
    border-radius: 20px;
}

.an-mark-all {
    background: none;
    border: none;
    font-size: .78rem;
    color: var(--color-green);
    cursor: pointer;
    font-weight: 500;
    padding: 0;
    transition: opacity .15s;
}
.an-mark-all:hover { opacity: .7; }

/* — Filtros — */
.an-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 22px;
    border-bottom: 1px solid #f0f0f0;
}

.an-filter-btn {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid #e5e7eb;
    background: var(--color-white);
    font-size: .83rem;
    font-weight: 500;
    color: var(--color-gray);
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}

.an-filter-btn:hover { border-color: var(--color-blue-light); color: var(--color-blue-light); }

.an-filter-btn.is-active {
    border-color: var(--color-blue);
    background: var(--color-blue);
    color: var(--color-white);
}

.an-filter-count {
    background: rgba(255,255,255,.25);
    border-radius: 8px;
    padding: 0 6px;
    font-size: .75rem;
    font-weight: 700;
    margin-left: 4px;
}

.an-filter-btn:not(.is-active) .an-filter-count {
    background: rgba(0,0,0,.08);
    color: var(--color-gray);
}

/* — Grid de noticias (columna principal) — */
.an-noticias-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 18px 22px;
}

.an-noticia-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .15s, transform .15s, border-color .15s;
    text-decoration: none;
    color: inherit;
    background: var(--color-white);
}

.an-noticia-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
    border-color: var(--color-blue-light);
}

.an-noticia-card--alerta { border-left: 4px solid var(--color-red); }
.an-noticia-card--clima  { border-left: 4px solid var(--color-blue-light); }
.an-noticia-card--geopolitica { border-left: 4px solid #f97316; }
.an-noticia-card--mercado    { border-left: 4px solid var(--color-green); }
.an-noticia-card--insumos    { border-left: 4px solid #8b5cf6; }
.an-noticia-card--macro      { border-left: 4px solid var(--color-yellow); }
.an-noticia-card--comercio   { border-left: 4px solid #0ea5e9; }
.an-noticia-card--general    { border-left: 4px solid #9ca3af; }

.an-noticia-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 9px;
    border-radius: 5px;
    align-self: flex-start;
}

.an-noticia-title {
    font-size: .92rem;
    font-weight: 600;
    color: var(--color-black);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.an-noticia-title:hover { color: var(--color-blue); }

.an-noticia-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .75rem;
    color: var(--color-gray);
    margin-top: auto;
    flex-wrap: wrap;
}

.an-noticia-source { font-weight: 600; }

/* Loading y vacío */
.an-loading-msg {
    grid-column: 1 / -1;
    padding: 50px 20px;
    text-align: center;
    color: var(--color-gray);
}

.an-loading-msg i { font-size: 2rem; display: block; margin-bottom: 12px; opacity: .4; }

/* — Cargar más — */
.an-load-more {
    padding: 18px 22px;
    text-align: center;
    border-top: 1px solid #f0f0f0;
}

/* — Alertas del sistema (sidebar) — */
.an-alerts-list { padding: 0; }

.an-alert-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #f3f4f6;
    transition: background .12s ease;
    cursor: pointer;
    position: relative;
}

.an-alert-item:last-child { border-bottom: none; }
.an-alert-item:hover { background: var(--color-gray-light); }

.an-alert-item.is-unread { background: #f0fdf4; }
.an-alert-item.is-unread:hover { background: #dcfce7; }

.an-alert-item.is-unread::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-green);
}

.an-alert-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
}

.an-alert-icon--alerta  { background: #fef2f2; color: var(--color-red); }
.an-alert-icon--mercado { background: #dcfce7; color: var(--color-green); }
.an-alert-icon--clima   { background: #dbeafe; color: var(--color-blue-light); }
.an-alert-icon--sistema { background: #fef9c3; color: #a16207; }

.an-alert-content { flex: 1; min-width: 0; padding-right: 14px; }

.an-alert-title {
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 3px;
    line-height: 1.3;
}

.an-alert-body {
    font-size: .78rem;
    color: var(--color-gray);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.an-alert-time {
    font-size: .7rem;
    color: var(--color-gray);
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* — Fuentes — */
.an-sources-list { padding: 10px 0; }

.an-source-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-bottom: 1px solid #f3f4f6;
}

.an-source-row:last-child { border-bottom: none; }

.an-source-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.an-source-dot--on  { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.an-source-dot--off { background: var(--color-gray); }

.an-source-info { flex: 1; min-width: 0; }

.an-source-name {
    display: block;
    font-size: .86rem;
    font-weight: 600;
    color: var(--color-black);
}

.an-source-desc {
    display: block;
    font-size: .74rem;
    color: var(--color-gray);
    margin-top: 1px;
}

.an-source-status {
    font-size: .72rem;
    font-weight: 600;
    color: #22c55e;
    background: #dcfce7;
    padding: 2px 8px;
    border-radius: 5px;
    white-space: nowrap;
}

/* — Tópicos — */
.an-topics-wrap {
    padding: 14px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.an-topic-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .8rem;
    padding: 5px 12px;
    border-radius: 20px;
    background: var(--color-gray-light);
    color: var(--color-black);
    font-weight: 500;
    border: 1px solid #e5e7eb;
}

/* ========== CAMPAÑAS ========== */

.section-campanas {
    animation: fadeInCamp 0.25s ease;
}

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

/* — Cabecera de página — */
.camp-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.camp-page-title-area {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.camp-page-title {
    font-size: 1.9em;
    font-weight: 700;
    color: var(--color-green);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.camp-page-icon {
    font-size: 0.85em;
}

.camp-page-sub {
    font-size: 0.95rem;
    color: var(--color-gray);
    margin: 0;
}

.camp-btn-nueva {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* — Stats — */
.camp-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.camp-stat-card {
    background: var(--color-white);
    border-radius: 14px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: var(--shadow);
    border-left: 5px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.camp-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.camp-stat-card--green  { border-left-color: var(--color-green); }
.camp-stat-card--yellow { border-left-color: var(--color-yellow); }
.camp-stat-card--blue   { border-left-color: var(--color-blue-light); }
.camp-stat-card--gray   { border-left-color: var(--color-gray); }

.camp-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.camp-stat-card--green  .camp-stat-icon { background: rgba(45,134,89,.12);  color: var(--color-green); }
.camp-stat-card--yellow .camp-stat-icon { background: rgba(244,196,48,.18); color: #a16207; }
.camp-stat-card--blue   .camp-stat-icon { background: rgba(59,130,246,.12); color: var(--color-blue-light); }
.camp-stat-card--gray   .camp-stat-icon { background: rgba(107,114,128,.1); color: var(--color-gray); }

.camp-stat-value {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--color-black);
    line-height: 1.2;
}

.camp-stat-label {
    font-size: 0.82rem;
    color: var(--color-gray);
    margin-top: 3px;
}

/* — Filtros — */
.camp-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.camp-filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 30px;
    border: 2px solid #e5e7eb;
    background: var(--color-white);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-gray);
    cursor: pointer;
    transition: all 0.15s ease;
}

.camp-filter-btn:hover {
    border-color: var(--color-green);
    color: var(--color-green);
}

.camp-filter-btn.is-active {
    border-color: var(--color-green);
    background: var(--color-green);
    color: var(--color-white);
}

.camp-filter-count {
    background: rgba(0,0,0,.12);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.78rem;
    font-weight: 700;
}

.camp-filter-btn.is-active .camp-filter-count {
    background: rgba(255,255,255,.3);
}

/* — Grilla de tarjetas — */
.camp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* — Tarjeta de campaña — */
.camp-card {
    background: var(--color-white);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.camp-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.camp-card-top {
    padding: 20px 22px 16px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.camp-cultivo-badge {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.camp-cultivo-badge--soja    { background: #dcfce7; }
.camp-cultivo-badge--maiz    { background: #fef9c3; }
.camp-cultivo-badge--trigo   { background: #fef3c7; }
.camp-cultivo-badge--girasol { background: #fff7ed; }
.camp-cultivo-badge--otro    { background: #f3f4f6; }

.camp-card-title-area {
    flex: 1;
    min-width: 0;
}

.camp-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-black);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.camp-card-campo {
    font-size: 0.82rem;
    color: var(--color-gray);
    display: flex;
    align-items: center;
    gap: 5px;
}

.camp-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: auto;
    flex-shrink: 0;
}

.camp-status-badge--en_curso      { background: #dcfce7; color: #166534; }
.camp-status-badge--planificacion { background: #dbeafe; color: #1e40af; }
.camp-status-badge--cosechada     { background: #f0fdf4; color: #15803d; border: 1.5px solid #86efac; }
.camp-status-badge--cancelada     { background: #fee2e2; color: #991b1b; }

/* — Sección de fechas y progreso — */
.camp-card-dates {
    padding: 14px 22px 10px;
}

.camp-dates-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--color-gray);
    margin-bottom: 10px;
}

.camp-dates-row span strong {
    color: var(--color-black);
    font-weight: 600;
}

.camp-progress-bar-wrap {
    background: #f0f0f0;
    border-radius: 6px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 5px;
}

.camp-progress-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease;
    background: linear-gradient(90deg, var(--color-green) 0%, var(--color-green-light) 100%);
}

.camp-progress-bar-fill--done {
    background: linear-gradient(90deg, #6b7280 0%, #9ca3af 100%);
}

.camp-progress-bar-fill--plan {
    background: linear-gradient(90deg, var(--color-blue) 0%, var(--color-blue-light) 100%);
}

.camp-progress-pct {
    font-size: 0.78rem;
    color: var(--color-gray);
    text-align: right;
}

/* — Métricas — */
.camp-card-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #f0f0f0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.camp-metric-item {
    background: var(--color-white);
    padding: 14px 12px;
    text-align: center;
}

.camp-metric-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-black);
    display: block;
    line-height: 1.2;
}

.camp-metric-value--positive { color: var(--color-green); }
.camp-metric-value--negative { color: var(--color-red); }

.camp-metric-label {
    font-size: 0.72rem;
    color: var(--color-gray);
    margin-top: 3px;
    display: block;
}

/* — Acciones de tarjeta — */
.camp-card-actions {
    padding: 14px 18px;
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.camp-btn-detail {
    flex: 1;
    padding: 9px 14px;
    background: var(--color-green);
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background 0.15s ease;
}

.camp-btn-detail:hover { background: var(--color-green-light); }

.camp-btn-edit {
    padding: 9px 14px;
    background: var(--color-gray-light);
    color: var(--color-black);
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease;
}

.camp-btn-edit:hover { background: #e5e7eb; }

.camp-btn-more {
    padding: 9px 12px;
    background: transparent;
    color: var(--color-gray);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.camp-btn-more:hover {
    background: var(--color-gray-light);
    color: var(--color-black);
}

/* — Estado vacío — */
.camp-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 70px 30px;
    color: var(--color-gray);
}

.camp-empty i {
    font-size: 3rem;
    margin-bottom: 18px;
    display: block;
    opacity: 0.4;
}

.camp-empty h3 {
    margin-bottom: 8px;
    font-size: 1.15rem;
    color: var(--color-black);
}

/* — Modal nueva campaña — */
.modal-content--campana,
.modal-content--detalle {
    max-width: 680px;
    max-height: 90vh;
    overflow-y: auto;
}

.camp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.camp-form-full {
    grid-column: span 2;
}

.camp-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    transition: border-color 0.15s ease;
}

.camp-form textarea:focus {
    outline: none;
    border-color: var(--color-green);
}

.camp-form select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--color-white);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.camp-form select:focus {
    outline: none;
    border-color: var(--color-green);
}

.camp-form .form-group label {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-black);
    margin-bottom: 6px;
}

.camp-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
}

/* — Modal detalle — */
.det-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.det-title {
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--color-black);
}

.det-sub {
    font-size: 0.88rem;
    color: var(--color-gray);
    margin: 0;
}

.det-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

.det-metric-card {
    background: var(--color-gray-light);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.det-metric-card .val {
    font-size: 1.3rem;
    font-weight: 700;
    display: block;
    color: var(--color-black);
}

.det-metric-card .lbl {
    font-size: 0.8rem;
    color: var(--color-gray);
    margin-top: 3px;
    display: block;
}

.det-section-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-gray);
    margin: 0 0 14px;
}

.det-costs-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.det-cost-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.det-cost-label {
    font-size: 0.9rem;
    color: var(--color-black);
    width: 160px;
    flex-shrink: 0;
}

.det-cost-bar-wrap {
    flex: 1;
    background: #f0f0f0;
    border-radius: 6px;
    height: 10px;
    overflow: hidden;
}

.det-cost-bar-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--color-green) 0%, var(--color-green-light) 100%);
}

.det-cost-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-black);
    width: 60px;
    text-align: right;
    flex-shrink: 0;
}

.det-timeline {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 22px;
    position: relative;
}

.det-timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.det-timeline-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 14px;
    width: 100%;
    height: 2px;
    background: #e5e7eb;
    z-index: 0;
}

.det-timeline-step.is-done:not(:last-child)::after { background: var(--color-green); }

.det-timeline-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid #e5e7eb;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    z-index: 1;
    position: relative;
}

.det-timeline-step.is-done .det-timeline-dot {
    border-color: var(--color-green);
    background: var(--color-green);
    color: var(--color-white);
}

.det-timeline-step.is-current .det-timeline-dot {
    border-color: var(--color-yellow);
    background: var(--color-yellow);
    color: var(--color-black);
}

.det-timeline-lbl {
    font-size: 0.72rem;
    color: var(--color-gray);
    margin-top: 8px;
    text-align: center;
    max-width: 70px;
}

.det-timeline-date {
    font-size: 0.68rem;
    color: var(--color-gray);
    text-align: center;
    max-width: 70px;
}