:root {
    /* Sisgop Agros — design tokens */
    --sa-green-950: #1a3d1f;
    --sa-green-900: #244a2a;
    --sa-green-800: #2f6b3a;
    --sa-green-700: #3d7d49;
    --sa-green-600: #4f8a57;
    --sa-green-500: #52ed6e;
    --sa-green-100: #e7f0e8;
    --sa-green-50: #f3f7f3;
    --sa-brown-700: #8b6914;
    --sa-brown-500: #c4a35a;
    --sa-cream: #f6f3ec;
    --sa-surface: #ffffff;
    --sa-ink: #1f2a1f;
    --sa-muted: #5c6b5e;
    --sa-line: #d9e3da;
    --sa-danger: #b42318;
    --sa-warning: #b54708;
    --sa-info: #026aa2;
    --sa-radius: 12px;
    --sa-radius-lg: 20px;
    --sa-shadow: 0 10px 30px rgba(26, 61, 31, 0.08);
    --sa-shadow-sm: 0 4px 14px rgba(26, 61, 31, 0.06);
    --sa-font: "Outfit", "Segoe UI", sans-serif;
    --sa-side-w: 260px;
    --sa-side-rail: 72px;
    --sa-top-h: 64px;
    --sa-scroll-size: 6px;
    --sa-scroll-thumb: #a8bbaa;
    --sa-scroll-thumb-hover: #7f977f;
    --sa-scroll-track: transparent;

    /* Compatibilidad con estilos previos */
    --primary-green: 130 40% 22%;
    --secondary-green: 130 30% 35%;
    --accent-green: 130 35% 42%;
    --earth-brown: 40 70% 30%;
    --soil-brown: 25 45% 25%;
    --sky-blue: 200 80% 45%;
    --sun-yellow: 45 100% 50%;
    --warning-orange: 30 100% 45%;
    --light-green: 120 25% 94%;
    --cream: 40 30% 95%;
    --white: 0 0% 100%;
    --gray-100: 210 11% 98%;
    --gray-300: 210 11% 85%;
    --gray-600: 210 11% 45%;
    --gray-800: 130 10% 18%;
}

/* Scrollbars más estrechos (toda la app) */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--sa-scroll-thumb) var(--sa-scroll-track);
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--sa-scroll-thumb) var(--sa-scroll-track);
}
*::-webkit-scrollbar {
    width: var(--sa-scroll-size);
    height: var(--sa-scroll-size);
}
*::-webkit-scrollbar-track {
    background: var(--sa-scroll-track);
}
*::-webkit-scrollbar-thumb {
    background: var(--sa-scroll-thumb);
    border-radius: 999px;
    border: 1px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--sa-scroll-thumb-hover);
}
*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Estilos para notas de cultivos */
.cultivo-notas {
    line-height: 1.6;
    font-size: 0.95rem;
}

.cultivo-notas strong {
    color: #155724;
    font-weight: 600;
    display: block;
    margin-top: 15px;
    margin-bottom: 8px;
    font-size: 1.05rem;
}

.cultivo-notas strong:first-child {
    margin-top: 0;
}

/* Estilos para análisis de IA en fotos */
.analisis-ia-content {
    line-height: 1.6;
    font-size: 0.95rem;
}

.analisis-ia-content strong {
    color: #0d4a0d;
    font-weight: 600;
    display: block;
    margin-top: 15px;
    margin-bottom: 8px;
    font-size: 1.05rem;
}

.analisis-ia-content strong:first-child {
    margin-top: 0;
}

/* Base Styling */
body {
    background: var(--sa-cream);
    /*min-height: 100vh;*/
    font-family: var(--sa-font);
    color: var(--sa-ink);
}

/* Navigation Styling */
.navbar {
    background: linear-gradient(90deg, hsl(var(--primary-green)) 0%, hsl(var(--secondary-green)) 100%) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.3rem;
}

.navbar-nav .nav-link {
    font-weight: 500;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

/* Floating toast notifications (right side, overlay) */
.toast-container {
    position: fixed;
    top: 4.5rem;
    right: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: min(360px, calc(100vw - 2rem));
    pointer-events: none;
}

.toast-container .toast-alert {
    pointer-events: auto;
    margin: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    animation: toast-slide-in 0.25s ease-out;
}

@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(1.25rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, hsl(var(--light-green)) 0%, hsl(var(--white)) 50%, hsl(var(--cream)) 100%);
    min-height: 75vh;
    display: flex;
    align-items: center;
}

.min-vh-75 {
    min-height: 75vh;
}

/* Card Styling */
.card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    background: hsl(var(--white));
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* Feature Cards */
.feature-card {
    border-top: 4px solid hsl(var(--accent-green));
}

.feature-card .card-body {
    padding: 2rem;
}

.feature-icon {
    font-size: 3rem;
}

/* Statistics Cards */
.stats-card {
    background: linear-gradient(135deg, hsl(var(--white)) 0%, hsl(var(--gray-100)) 100%);
    border-left: 5px solid hsl(var(--accent-green));
}

.stats-card:hover {
    border-left-color: hsl(var(--primary-green));
}

/* Farm Cards */
.farm-card {
    background: linear-gradient(135deg, hsl(var(--white)) 0%, hsl(var(--light-green)) 100%);
    border: 2px solid hsl(var(--accent-green) / 0.3);
}

.farm-card:hover {
    border-color: hsl(var(--accent-green));
}

.stat-item {
    padding: 0.5rem;
    border-radius: 8px;
    background: hsl(var(--white) / 0.7);
}

/* Lote Cards */
.lote-card {
    background: linear-gradient(135deg, hsl(var(--white)) 0%, hsl(var(--cream)) 100%);
    border: 2px solid hsl(var(--earth-brown) / 0.3);
}

.lote-card:hover {
    border-color: hsl(var(--earth-brown));
}

/* Cultivo Cards — estilos modernos en .cultivos-page */

/* Photo Cards */
.photo-card {
    overflow: hidden;
}

.photo-card img {
    transition: transform 0.3s ease;
}

.photo-card:hover img {
    transform: scale(1.05);
}

/* Weather Cards */
.weather-card {
    background: linear-gradient(135deg, hsl(var(--white)) 0%, hsl(var(--sky-blue) / 0.1) 100%);
}

.weather-card.border-primary {
    border-color: hsl(var(--primary-green)) !important;
    border-width: 3px !important;
}

.weather-icon {
    padding: 1rem;
    background: hsl(var(--white) / 0.8);
    border-radius: 50%;
    display: inline-block;
}

.temp-item {
    padding: 0.5rem;
    border-radius: 8px;
    background: hsl(var(--white) / 0.6);
}

/* Analysis Result */
.analysis-result .alert {
    border-radius: 10px;
    border: none;
    font-size: 0.9rem;
}

/* Buttons */
.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 0.45rem 0.9rem;    
}
.btn-xs {
    padding: 0.15rem 0.3rem !important;
    font-size: 0.6rem !important;
}

.btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
}
.btn-lg {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
}
.btn-xl {
    padding: 1rem 2rem !important;
    font-size: 1.2rem !important;
}

.btn-primary {
    background: linear-gradient(135deg, hsl(var(--primary-green)) 0%, hsl(var(--secondary-green)) 100%);
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, hsl(var(--secondary-green)) 0%, hsl(var(--primary-green)) 100%);
    transform: translateY(-1px);
}

.btn-success {
    background: linear-gradient(135deg, hsl(var(--accent-green)) 0%, hsl(var(--secondary-green)) 100%);
    border: none;
}

.btn-success:hover {
    background: linear-gradient(135deg, hsl(var(--secondary-green)) 0%, hsl(var(--accent-green)) 100%);
    transform: translateY(-1px);
}

.btn-warning {
    background: linear-gradient(135deg, hsl(var(--sun-yellow)) 0%, hsl(var(--warning-orange)) 100%);
    border: none;
    color: hsl(var(--gray-800));
}

.btn-warning:hover {
    background: linear-gradient(135deg, hsl(var(--warning-orange)) 0%, hsl(var(--sun-yellow)) 100%);
    transform: translateY(-1px);
}

.btn-info {
    background: linear-gradient(135deg, hsl(var(--sky-blue)) 0%, hsl(var(--primary-green)) 100%);
    border: none;
}

.btn-info:hover {
    background: linear-gradient(135deg, hsl(var(--primary-green)) 0%, hsl(var(--sky-blue)) 100%);
    transform: translateY(-1px);
}

/* Form Styling */
.form-control {
    border: 2px solid hsl(var(--gray-300));
    border-radius: 8px;
    padding: 0.4rem .4rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: hsl(var(--accent-green));
    box-shadow: 0 0 0 0.25rem hsl(var(--accent-green) / 0.25);
}

.password-toggle {
    border: 2px solid hsl(var(--gray-300));
    border-left: 0;
    color: hsl(var(--gray-600));
}

.password-toggle:hover,
.password-toggle:focus {
    background-color: hsl(var(--gray-100));
    border-color: hsl(var(--gray-300));
    color: hsl(var(--primary-green));
}

.input-group:focus-within .password-toggle {
    border-color: hsl(var(--accent-green));
}

.form-select {
    border: 2px solid hsl(var(--gray-300));
    border-radius: 8px;
    padding: 0.4rem .4rem;
}

.form-select:focus {
    border-color: hsl(var(--accent-green));
    box-shadow: 0 0 0 0.25rem hsl(var(--accent-green) / 0.25);
}

/* Badges */
.badge {
    border-radius: 6px;
    font-weight: 500;
    padding: 0.4rem 0.7rem;
}

.badge-sm {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}

/* Alerts */
.alert {
    border: none;
    border-radius: 10px;
    border-left: 4px solid;
}

.alert-success {
    background: hsl(var(--accent-green) / 0.1);
    border-left-color: hsl(var(--accent-green));
    color: hsl(var(--primary-green));
}

.alert-warning {
    background: hsl(var(--warning-orange) / 0.1);
    border-left-color: hsl(var(--warning-orange));
    color: hsl(var(--earth-brown));
}

.alert-info {
    background: hsl(var(--sky-blue) / 0.1);
    border-left-color: hsl(var(--sky-blue));
    color: hsl(var(--primary-green));
}

.alert-danger {
    background: hsl(0 100% 50% / 0.1);
    border-left-color: hsl(0 100% 50%);
    color: hsl(0 70% 35%);
}

/* Breadcrumb */
.breadcrumb {
    background: hsl(var(--white) / 0.8);
    border-radius: 10px;
    padding: 1rem 1.5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: hsl(var(--accent-green));
    font-weight: bold;
}

/* Footer */
footer {
    background: linear-gradient(90deg, hsl(var(--soil-brown)) 0%, hsl(var(--earth-brown)) 100%) !important;
    margin-top: auto;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-section {
        min-height: 60vh;
        text-align: center;
    }
    
    .display-4 {
        font-size: 2.5rem;
    }
    
    .card-body {
        padding: 1.5rem;
    }
    
    .feature-card .card-body {
        padding: 1.5rem;
    }
    
    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .navbar-brand {
        font-size: 1.1rem;
    }
    
    .display-4 {
        font-size: 2rem;
    }
    
    .feature-icon {
        font-size: 2.5rem;
    }
    
    .btn-group {
        flex-direction: column;
    }
    
    .btn-group .btn {
        border-radius: 8px !important;
        margin-bottom: 0.25rem;
    }
}

/* Analytics Dashboard Styles */
.bg-gradient-success {
    background: linear-gradient(45deg, #28a745, #20c997) !important;
}

.bg-gradient-primary {
    background: linear-gradient(45deg, #007bff, #6610f2) !important;
}

.bg-gradient-warning {
    background: linear-gradient(45deg, #ffc107, #fd7e14) !important;
}

.bg-gradient-info {
    background: linear-gradient(45deg, #17a2b8, #6f42c1) !important;
}

.analytics-card {
    transition: transform 0.2s ease-in-out;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.analytics-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.chart-container {
    position: relative;
    height: 300px;
    margin: 20px 0;
}

.apexcharts-canvas {
    margin: 0 auto;
}

.apexcharts-legend {
    justify-content: center !important;
}

.apexcharts-tooltip {
    background: rgba(0, 0, 0, 0.8) !important;
    color: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.metrics-card .card-body {
    padding: 1.5rem;
}

.metrics-item {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

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

.progress {
    height: 8px;
    border-radius: 4px;
}

.table-analytics {
    font-size: 0.9rem;
}

.table-analytics th {
    background-color: #f8f9fa;
    border-top: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.badge-state {
    font-size: 0.75rem;
    padding: 4px 8px;
}

/* Custom Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Loading States */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, hsl(var(--white) / 0.6), transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Utility Classes */
.text-primary {
    color: hsl(var(--primary-green)) !important;
}

.text-success {
    color: hsl(var(--accent-green)) !important;
}

.text-warning {
    color: hsl(var(--warning-orange)) !important;
}

.text-info {
    color: hsl(var(--sky-blue)) !important;
}

.bg-primary {
    background: linear-gradient(135deg, hsl(var(--primary-green)) 0%, hsl(var(--secondary-green)) 100%) !important;
}

.bg-success {
    background: hsl(var(--accent-green)) !important;
}

.bg-warning {
    background: hsl(var(--sun-yellow)) !important;
}

.bg-info {
    background: hsl(var(--sky-blue)) !important;
}

/* Print Styles */
@media print {
    .navbar,
    .btn,
    .btn-mock,
    footer,
    .app-topbar,
    .app-side,
    .app-side__backdrop,
    .banner-soporte,
    .toast-container,
    .auth-top,
    .auth-bottom,
    .auth-lang,
    .no-print,
    .pay-result__acts,
    .pay-result__mark,
    .app-topbar__toggle,
    .app-topbar__nav,
    .app-topbar__actions {
        display: none !important;
        visibility: hidden !important;
    }

    .app-frame {
        display: block !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }

    .app-main,
    .print-main {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    body.print-doc {
        background: #fff !important;
    }
    body.print-doc aside,
    body.print-doc header.app-topbar {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    body.print-doc .ui-page {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid hsl(var(--gray-300));
    }

    body,
    .app-body,
    .print-body {
        background: white !important;
    }
}

.print-body {
    background: #fff;
    margin: 0;
}
.print-main {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
}

.auth-card--wide {
    width: min(460px, 100%);
}
.auth-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    border: 1px solid #d7dee6;
    background: #fff;
    color: #334039;
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
}
.auth-cta-secondary:hover {
    background: var(--sa-green-50);
    color: var(--sa-green-900);
}

/* Finca form (mockup) */
.ui-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--sa-muted);
    font-size: 0.9rem;
}
.ui-breadcrumb a { color: var(--sa-green-800); text-decoration: none; font-weight: 600; }
.finca-form-page__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.finca-form-page__head {
    margin-bottom: 1.25rem;
}
.finca-form-page__head h1 {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 800;
    color: #5c4632;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.finca-form-page__head h1 i { color: #6b5230; }
.finca-form-page__head p {
    margin: 0.35rem 0 0;
    color: var(--sa-muted);
}
.finca-form__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.85fr);
    gap: 1.15rem;
    align-items: start;
}
.finca-section {
    background: #fff;
    border: 1px solid var(--sa-line);
    border-radius: 16px;
    box-shadow: var(--sa-shadow-sm);
    margin-bottom: 1.15rem;
    overflow: hidden;
}
.finca-section__head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.95rem 1.15rem;
    border-bottom: 1px solid var(--sa-line);
}
.finca-section__head--plain { border-bottom: 1px solid var(--sa-line); }
.finca-section__head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #5c4632;
}
.finca-section__num {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--sa-green-700);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex: 0 0 auto;
}
.finca-section__body { padding: 1.1rem 1.15rem 1.2rem; }
.finca-grid { display: grid; gap: 0.9rem; margin-bottom: 0.9rem; }
.finca-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.finca-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finca-form .ui-field { margin-bottom: 0; }
.finca-form .form-control,
.finca-form .form-select {
    border-radius: 10px;
    border-color: #d7dee6;
    min-height: 42px;
}
.finca-form .form-control:focus,
.finca-form .form-select:focus {
    border-color: var(--sa-green-600);
    box-shadow: 0 0 0 3px rgba(47, 107, 58, 0.12);
}
.input-with-suffix,
.input-with-prefix,
.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}
.input-with-suffix input { padding-right: 2.6rem; }
.input-with-suffix span {
    position: absolute;
    right: 0.75rem;
    color: var(--sa-muted);
    font-size: 0.85rem;
    font-weight: 600;
}
.input-with-prefix span {
    position: absolute;
    left: 0.75rem;
    color: var(--sa-muted);
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 1;
}
.input-with-prefix input { padding-left: 2.6rem; }
.input-with-icon i {
    position: absolute;
    left: 0.85rem;
    color: var(--sa-muted);
    z-index: 1;
}
.input-with-icon input { padding-left: 2.4rem; }
.char-count {
    text-align: right;
    font-size: 0.75rem;
    color: var(--sa-muted);
    margin-top: 0.25rem;
}
.finca-checks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem 0.75rem;
}
.finca-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--sa-ink);
}
.finca-map__search { margin-bottom: 0.75rem; }
.finca-map__search > i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sa-muted);
    z-index: 2;
}
.finca-map__search .form-control { padding-left: 2.35rem; }
.finca-map__canvas {
    position: relative;
    width: 100%;
    min-height: 320px;
    height: 320px;
    border: 1px solid var(--sa-line);
    border-radius: 12px;
    overflow: hidden;
    background: #dfe8e1;
    z-index: 1;
}
.finca-map__canvas .leaflet-container {
    width: 100%;
    height: 100%;
    min-height: 320px;
    font: inherit;
    background: #dfe8e1;
}
.finca-map__error {
    height: 100%;
    min-height: 320px;
    display: grid;
    place-items: center;
    padding: 1rem;
    text-align: center;
    color: #8a3b32;
    background: #fdf2f0;
    font-size: 0.9rem;
}
.finca-map__hint {
    font-size: 0.78rem;
    color: var(--sa-muted);
}
.finca-map__marker {
    background: transparent;
    border: 0;
}
.search-suggestions {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    background: #fff;
    border: 1px solid var(--sa-line);
    border-radius: 10px;
    box-shadow: var(--sa-shadow);
    z-index: 1200;
    max-height: 220px;
    overflow: auto;
}
.search-suggestion {
    cursor: pointer;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid #f0f2f0;
}
.search-suggestion:hover { background: var(--sa-green-50); }
.search-suggestion:last-child { border-bottom: 0; }
.finca-upload {
    display: grid;
    gap: 0.75rem;
    justify-items: center;
    text-align: center;
    border: 1.5px dashed #c5d3c8;
    border-radius: 14px;
    padding: 1.25rem 1rem;
    background: #f8faf8;
}
.finca-upload__placeholder i {
    font-size: 1.8rem;
    color: var(--sa-green-700);
    margin-bottom: 0.35rem;
}
.finca-upload__placeholder strong {
    display: block;
    font-size: 0.92rem;
}
.finca-upload__placeholder small {
    color: var(--sa-muted);
}
.finca-upload__preview {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 10px;
}
.finca-form__actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.5rem;
    padding: 0.85rem 1rem;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--sa-line);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    z-index: 5;
}
.farm-card__img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-bottom: 1px solid var(--sa-line);
}

@media (max-width: 1100px) {
    .finca-form__layout { grid-template-columns: 1fr; }
    .finca-grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .finca-grid--3,
    .finca-grid--2,
    .finca-checks { grid-template-columns: 1fr; }
    .finca-form-page__nav { flex-direction: column; align-items: flex-start; }
    .finca-form__actions { justify-content: stretch; }
    .finca-form__actions .btn { width: 100%; }
}

/* Detail pages (finca / lotes) */
.detail-page { max-width: 100%; }
.detail-hero {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin: 0.75rem 0 1rem;
}
.detail-hero__identity { display: flex; gap: 0.9rem; align-items: center; }
.detail-hero__avatar {
    width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
    background: var(--sa-green-100); color: var(--sa-green-800);
    display: grid; place-items: center; flex: 0 0 auto; font-size: 1.4rem;
}
.detail-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero h1 {
    margin: 0; font-size: 1.55rem; font-weight: 800; color: var(--sa-ink);
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
.detail-hero p { margin: 0.3rem 0 0; color: var(--sa-muted); }
.detail-hero__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.detail-meta {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
}
.detail-meta > div {
    background: #fff; border: 1px solid var(--sa-line); border-radius: 12px;
    padding: 0.7rem 0.8rem; display: flex; gap: 0.55rem; align-items: flex-start;
}
.detail-meta i { color: var(--sa-green-700); margin-top: 0.15rem; }
.detail-meta small { display: block; color: var(--sa-muted); font-size: 0.72rem; }
.detail-meta strong { display: block; font-size: 0.9rem; line-height: 1.25; }
.detail-kpis { margin-bottom: 1rem; }
.detail-kpis .ui-kpi { min-height: 110px; }
.detail-kpis small { font-size: 0.75rem; }
.detail-tabs {
    display: flex; flex-wrap: wrap; gap: 0.15rem;
    border-bottom: 1px solid var(--sa-line); margin-bottom: 1rem;
}
.detail-tabs__item {
    padding: 0.7rem 0.9rem; color: var(--sa-muted); text-decoration: none;
    font-size: 0.9rem; font-weight: 600; border-bottom: 2px solid transparent;
}
.detail-tabs__item:hover { color: var(--sa-green-800); }
.detail-tabs__item.is-active { color: var(--sa-green-800); border-bottom-color: var(--sa-green-700); }
.detail-tabs__item.is-disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.detail-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 0.95fr;
    gap: 1rem;
    align-items: start;
}
.detail-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.detail-stack { display: grid; gap: 1rem; }
.info-list { margin: 0; }
.info-list > div {
    display: grid; grid-template-columns: 42% 1fr; gap: 0.5rem;
    padding: 0.45rem 0; border-bottom: 1px solid #eef2ee;
}
.info-list > div:last-child { border-bottom: 0; }
.info-list dt { margin: 0; color: var(--sa-muted); font-size: 0.82rem; font-weight: 500; }
.info-list dd { margin: 0; font-weight: 600; font-size: 0.9rem; }
.info-list--compact > div { grid-template-columns: 48% 1fr; padding: 0.35rem 0; }
.detail-map {
    border-radius: 12px; overflow: hidden; border: 1px solid var(--sa-line);
    height: 220px; background: #eef3ef;
}
.detail-map iframe { width: 100%; height: 100%; border: 0; }
.detail-map__empty { height: 100%; display: grid; place-items: center; color: var(--sa-muted); }
.detail-map__meta { margin: 0.65rem 0; font-size: 0.82rem; color: var(--sa-muted); }
.detail-meta__link {
    color: inherit;
    text-decoration: none;
}
.detail-meta__link:hover {
    color: var(--sa-green-800);
    text-decoration: underline;
}
.info-list a {
    color: var(--sa-green-800);
    font-weight: 600;
    text-decoration: none;
}
.info-list a:hover { text-decoration: underline; }
.detail-chart-wrap {
    position: relative;
    width: min(100%, 240px);
    height: 180px;
    margin: 0 auto 0.85rem;
}
.detail-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
}
@media (min-width: 1024px) {
    .detail-chart-wrap {
        width: min(100%, 260px);
        height: 200px;
    }
}
@media (max-width: 640px) {
    .detail-chart-wrap {
        width: min(100%, 200px);
        height: 160px;
    }
}
.dist-legend { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.dist-legend li { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.82rem; }
.timeline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.timeline-list li { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; }
.timeline-list strong { display: block; font-size: 0.9rem; }
.timeline-list small { color: var(--sa-muted); }
.detail-subtitle { margin: 1rem 0 0.5rem; font-size: 0.95rem; font-weight: 700; color: #5c4632; }
.filter-bar {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, minmax(0, 0.8fr)) auto auto;
    gap: 0.55rem;
    background: #fff; border: 1px solid var(--sa-line); border-radius: 14px;
    padding: 0.85rem; margin-bottom: 1rem; align-items: center;
}
.filter-bar__search { position: relative; }
.filter-bar__search i {
    position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--sa-muted);
}
.filter-bar__search .form-control { padding-left: 2.2rem; }
.detail-table thead th {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--sa-muted); background: #f7faf7; border-bottom-color: var(--sa-line);
}
.detail-table td { font-size: 0.9rem; }
.crop-cell { display: flex; gap: 0.5rem; align-items: center; }
.crop-cell__icon {
    width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--sa-green-100);
    color: var(--sa-green-800); display: grid; place-items: center; flex: 0 0 auto;
}
.crop-cell strong { display: block; font-size: 0.88rem; }
.crop-cell small { color: var(--sa-muted); }
.table-actions { white-space: nowrap; }
.table-footer {
    padding: 0.75rem 1rem; color: var(--sa-muted); font-size: 0.85rem;
    border-top: 1px solid var(--sa-line);
}
.ui-pill--neutral { background: #eef2ee; color: var(--sa-muted); }

@media (max-width: 1200px) {
    .detail-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .detail-grid, .detail-grid--3 { grid-template-columns: 1fr; }
    .filter-bar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .detail-meta { grid-template-columns: 1fr 1fr; }
    .detail-hero { flex-direction: column; }
    .filter-bar { grid-template-columns: 1fr; }
}

/* Cultivos page */
.cultivos-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    background: #fff;
    border: 1px solid var(--sa-line);
    border-radius: 14px;
    padding: 0.75rem 0.85rem;
    margin: 0 0 1rem;
}
.cultivos-toolbar__views { flex: 0 0 auto; }
.cultivos-toolbar__views .btn.active {
    background: var(--sa-green-700) !important;
    border-color: var(--sa-green-700) !important;
    color: #fff !important;
}
.cultivos-toolbar__search {
    position: relative;
    flex: 1 1 180px;
    min-width: 160px;
}
.cultivos-toolbar__search i {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sa-muted);
    font-size: 0.8rem;
    pointer-events: none;
}
.cultivos-toolbar__search .form-control { padding-left: 2rem; }
.cultivos-toolbar .form-select {
    flex: 0 1 140px;
    min-width: 120px;
    max-width: 180px;
}
.cultivo-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--sa-line);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cultivo-card:hover {
    border-color: #c5d8c5;
    box-shadow: 0 6px 18px rgba(28, 56, 36, 0.06);
}
.cultivo-card__head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.95rem 1rem 0.55rem;
}
.cultivo-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--sa-ink);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.cultivo-card__title i { color: var(--sa-green-700); font-size: 0.95rem; }
.cultivo-card__title .badge {
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    padding: 0;
}
.cultivo-card__var {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: var(--sa-muted);
}
.cultivo-card__body { padding: 0 1rem 0.75rem; flex: 1; }
.cultivo-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 0.9rem;
    font-size: 0.8rem;
    color: var(--sa-muted);
    margin-bottom: 0.55rem;
}
.cultivo-card__meta i { color: var(--sa-green-700); margin-right: 0.25rem; }
.cultivo-card__notes {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: #4a5a4e;
}
.cultivo-card__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--sa-line);
    background: #fafcfa;
}
.cultivos-list {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 1rem;
}
.cultivo-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1.2fr) auto;
    gap: 0.75rem;
    align-items: center;
    background: #fff;
    border: 1px solid var(--sa-line);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
}
.cultivo-row__main {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}
.cultivo-row__main strong { display: block; font-size: 0.92rem; }
.cultivo-row__main small { color: var(--sa-muted); font-size: 0.78rem; }
.cultivo-row__notes {
    margin: 0;
    font-size: 0.82rem;
    color: var(--sa-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cultivo-row__actions {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
}
.cultivos-empty__icon {
    font-size: 2.4rem;
    color: var(--sa-green-600);
    margin-bottom: 0.75rem;
}
.cultivo-notas {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #3d4a40;
    max-height: 280px;
    overflow: auto;
    padding: 0.75rem;
    background: #f7faf7;
    border-radius: 10px;
    border: 1px solid var(--sa-line);
}
.cultivo-modal .modal-header {
    border-bottom-color: var(--sa-line);
}
.cultivo-modal .modal-title {
    font-weight: 700;
    color: var(--sa-ink);
}
@media (max-width: 900px) {
    .cultivo-row {
        grid-template-columns: 1fr auto;
    }
    .cultivo-row__notes { grid-column: 1 / -1; white-space: normal; }
    .cultivo-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 700px) {
    .cultivos-toolbar .form-select { max-width: none; flex: 1 1 100%; }
}

/* Mis Cultivos (listado global) */
.miscultivos-page .ui-page-header { margin-top: 0.35rem; }
.miscultivos-kpis { margin-bottom: 1rem; }
.miscultivos-kpis .ui-kpi {
    min-height: 0;
    gap: 0.55rem;
}
.miscultivos-kpis .ui-kpi__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sa-ink);
}
.miscultivos-kpis .ui-kpi__value { font-size: 1.65rem; }
.miscultivos-filters {
    grid-template-columns: 1.5fr repeat(4, minmax(0, 0.85fr)) auto auto;
}
.crop-cell__icon--lg {
    width: 2.35rem;
    height: 2.35rem;
    font-size: 0.95rem;
}
.crop-cell__sci {
    display: block;
    font-style: italic;
    color: var(--sa-muted);
    font-size: 0.75rem;
}
.lote-cell {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
}
.lote-cell > i {
    color: var(--sa-green-700);
    margin-top: 0.2rem;
}
.lote-cell a {
    color: var(--sa-ink);
    font-weight: 600;
    text-decoration: none;
}
.lote-cell a:hover { color: var(--sa-green-800); text-decoration: underline; }
.lote-cell small { display: block; color: var(--sa-muted); font-size: 0.75rem; }
.crop-progress { display: grid; gap: 0.25rem; }
.crop-progress > span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sa-muted);
}
.crop-progress .progress {
    height: 0.45rem;
    background: #e8efe8;
    border-radius: 999px;
}
.crop-progress .progress-bar {
    background: var(--sa-green-700) !important;
    border-radius: 999px;
}
.miscultivos-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.miscultivos-pager {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.miscultivos-pager__page {
    min-width: 1.75rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
}
.miscultivos-tip {
    margin-top: 1rem;
    border: 1px solid #cfe5d3;
    background: #f1f8f2;
    color: #2f5a3a;
    border-radius: 12px;
}
.miscultivos-tip a { color: var(--sa-green-800); font-weight: 600; }
@media (max-width: 1200px) {
    .ui-grid--kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .miscultivos-filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .ui-grid--kpi { grid-template-columns: 1fr 1fr; }
    .miscultivos-filters { grid-template-columns: 1fr; }
}

/* Detalle de cultivo */
.cultivo-detalle-hero__leaf {
    color: var(--sa-green-700);
    font-size: 0.95rem;
    margin-right: 0.15rem;
}
.cultivo-detalle-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.1rem;
    margin: 0.4rem 0 0;
    color: var(--sa-muted);
    font-size: 0.88rem;
}
.cultivo-detalle-hero__meta i { color: var(--sa-green-700); margin-right: 0.3rem; }
.cultivo-detalle-hero__meta a {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}
.cultivo-detalle-hero__meta a:hover {
    color: var(--sa-green-800);
    text-decoration: underline;
}
.detail-meta__sub {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--sa-muted);
    margin-top: 0.1rem;
}
.cultivo-detalle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}
.cultivo-detalle-col {
    display: grid;
    gap: 1rem;
}
.cultivo-detalle-page .ui-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}
.info-list__notes {
    font-weight: 500 !important;
    white-space: pre-wrap;
    line-height: 1.45;
}
.cultivo-progress {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1rem;
    align-items: center;
}
.cultivo-progress__chart {
    position: relative;
    width: 140px;
    height: 140px;
}
.cultivo-progress__chart canvas {
    width: 100% !important;
    height: 100% !important;
}
.cultivo-progress__center {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    pointer-events: none;
}
.cultivo-progress__center strong {
    font-size: 1.25rem;
    line-height: 1.1;
    color: var(--sa-ink);
}
.cultivo-progress__center small {
    color: var(--sa-muted);
    font-size: 0.72rem;
}
.cultivo-progress__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}
.cultivo-progress__facts li {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.84rem;
}
.cultivo-progress__facts span { color: var(--sa-muted); }
.cultivo-progress__facts strong { text-align: right; }
.cultivo-prod__main {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--sa-green-800);
    line-height: 1.1;
}
.cultivo-prod__main small {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sa-muted);
}
.cultivo-prod__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}
.cultivo-prod__metrics > div {
    background: #f5f9f5;
    border-radius: 10px;
    padding: 0.7rem 0.75rem;
}
.cultivo-prod__metrics small {
    display: block;
    color: var(--sa-muted);
    font-size: 0.72rem;
    margin-bottom: 0.2rem;
}
.cultivo-prod__metrics strong { font-size: 0.92rem; }
.cultivo-clima-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}
.cultivo-clima-kpis > div {
    text-align: center;
    background: #f5f9f5;
    border-radius: 10px;
    padding: 0.55rem 0.35rem;
}
.cultivo-clima-kpis i {
    display: block;
    color: var(--sa-green-700);
    margin-bottom: 0.2rem;
}
.cultivo-clima-kpis strong { display: block; font-size: 0.92rem; }
.cultivo-clima-kpis small { color: var(--sa-muted); font-size: 0.7rem; }
.cultivo-clima-chart {
    position: relative;
    height: 150px;
}
.cultivo-panel-soon {
    text-align: center;
}
.cultivo-soon-chart {
    width: 110px;
    height: 110px;
    margin: 0.25rem auto 0.85rem;
    border-radius: 50%;
    border: 12px solid #e8efe8;
    display: grid;
    place-items: center;
    color: var(--sa-muted);
    font-weight: 700;
}
.cultivo-detalle-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.cultivo-consejo {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: #eef6fb;
    border: 1px solid #d5e7f3;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    max-width: 640px;
    color: #2f4f63;
}
.cultivo-consejo > i {
    color: #3b7ea8;
    margin-top: 0.15rem;
}
.cultivo-consejo strong { display: block; font-size: 0.88rem; margin-bottom: 0.2rem; }
.cultivo-consejo p { margin: 0; font-size: 0.86rem; line-height: 1.45; }
.cultivo-fab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--sa-green-800);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 999px;
    padding: 0.7rem 1.1rem;
    font-weight: 600;
    font-size: 0.88rem;
    box-shadow: 0 8px 20px rgba(28, 56, 36, 0.2);
}
.cultivo-fab:hover { background: var(--sa-green-900); color: #fff; }
.cultivo-foto-thumb {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--sa-line);
    aspect-ratio: 1;
    background: #eef3ef;
}
.cultivo-foto-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cultivo-act-list, .cultivo-cost-list {
    list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem;
}
.cultivo-act-list li, .cultivo-cost-list li {
    display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start;
    padding-bottom: 0.55rem; border-bottom: 1px solid #eef2ee;
}
.cultivo-act-list li:last-child, .cultivo-cost-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.cultivo-act-list strong, .cultivo-cost-list strong { display: block; font-size: 0.9rem; }
.cultivo-act-list small, .cultivo-cost-list small { color: var(--sa-muted); font-size: 0.75rem; }
.cultivo-costos-layout {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr;
    gap: 1rem;
    align-items: start;
}
.cultivo-costos-side { display: grid; gap: 1rem; }
.cultivo-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1rem; align-items: start; }
.costos-kpis { margin-bottom: 1rem; }
.costos-grid .form-control-sm { font-size: 0.8rem; }
.cultivo-foto-card {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #eef3ef;
    border-bottom: 1px solid var(--sa-line);
}
.cultivo-foto-card img { width: 100%; height: 100%; object-fit: cover; }
.cultivo-foto-card__date {
    position: absolute; top: 0.5rem; right: 0.5rem;
    background: rgba(20, 40, 28, 0.7); color: #fff;
    font-size: 0.72rem; padding: 0.2rem 0.45rem; border-radius: 6px;
}
@media (max-width: 1100px) {
    .cultivo-detalle-grid { grid-template-columns: 1fr 1fr; }
    .cultivo-costos-layout, .cultivo-split { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .cultivo-detalle-grid { grid-template-columns: 1fr; }
    .cultivo-progress { grid-template-columns: 1fr; justify-items: center; }
    .cultivo-progress__facts { width: 100%; }
    .cultivo-detalle-footer { flex-direction: column; align-items: stretch; }
    .cultivo-fab { justify-content: center; }
}

.cultivo-ia-last {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 0.85rem;
    align-items: start;
}
.cultivo-ia-last__thumb {
    display: block;
    width: 88px;
    height: 88px;
    border-radius: 10px;
    overflow: hidden;
    background: #eef3ef;
}
.cultivo-ia-last__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cultivo-foto-preview img { max-height: 220px; width: auto; }
.cultivo-ia-memoria {
    background: #f5f8f5;
    border: 1px dashed #c5d9c8;
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
}
.cultivo-ia-memoria summary { cursor: pointer; font-weight: 600; font-size: 0.85rem; }
.cultivo-ia-memoria pre {
    margin-top: 0.5rem;
    max-height: 240px;
    overflow: auto;
    background: #fff;
    padding: 0.5rem;
    border-radius: 8px;
}
.sensor-kpis--cultivo { margin-bottom: 0; }
.cultivo-prod-compare {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}
.cultivo-prod-compare > div {
    background: #f5f9f5;
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
}
.cultivo-prod-compare small { display: block; color: var(--sa-muted); font-size: 0.75rem; }
.cultivo-prod-compare strong { font-size: 1rem; color: var(--sa-ink); }
.cultivo-event-list { list-style: none; margin: 0; padding: 0; }
.cultivo-event-list__item {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--sa-line);
    border-left: 3px solid #c5d9c8;
}
.cultivo-event-list__item--baja { border-left-color: #3d7ea6; }
.cultivo-event-list__item--media { border-left-color: #c47b17; }
.cultivo-event-list__item--alta,
.cultivo-event-list__item--critica { border-left-color: #b42318; }
.cultivo-event-list__head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 0.2rem;
}
.cultivo-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}
.cultivo-timeline__item {
    display: grid;
    grid-template-columns: 2.2rem 1fr;
    gap: 0.85rem;
    position: relative;
    padding: 0 0 1.15rem 0.2rem;
}
.cultivo-timeline__item:last-child { padding-bottom: 0; }
.cultivo-timeline__item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 0.95rem;
    top: 2.1rem;
    bottom: 0;
    width: 2px;
    background: #d7eadb;
}
.cultivo-timeline__icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eef6ef;
    color: var(--sa-green-800);
    font-size: 0.8rem;
    position: relative;
    z-index: 1;
}
.cultivo-timeline__item--warning .cultivo-timeline__icon { background: #fff6e8; color: #9a5b12; }
.cultivo-timeline__item--info .cultivo-timeline__icon { background: #eaf3fa; color: #2f5f9e; }
.cultivo-timeline__item--danger .cultivo-timeline__icon { background: #fef2f1; color: #b42318; }
.cultivo-timeline__item--neutral .cultivo-timeline__icon { background: #f1f3f2; color: #5b6b60; }
.cultivo-timeline__meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.15rem;
}
.cultivo-timeline__meta time { font-size: 0.78rem; color: var(--sa-muted); }
.cultivo-timeline__item strong { display: block; font-size: 0.95rem; }
.cultivo-timeline__item p { margin: 0.2rem 0 0.25rem; font-size: 0.85rem; color: #3d4a40; }
@media (max-width: 800px) {
    .cultivo-prod-compare { grid-template-columns: 1fr 1fr; }
    .cultivo-ia-last { grid-template-columns: 1fr; }
}

.sensor-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 1rem;
}
.sensor-kpi {
    background: #f5f9f5;
    border-radius: 10px;
    padding: 0.65rem 0.7rem;
}
.sensor-kpi i { color: var(--sa-green-700); display: block; margin-bottom: 0.2rem; }
.sensor-kpi small { display: block; color: var(--sa-muted); font-size: 0.72rem; }
.sensor-kpi strong { display: block; font-size: 1.05rem; }
.sensor-kpi strong span { font-size: 0.72rem; font-weight: 600; color: var(--sa-muted); }
.sensor-kpi em { font-style: normal; font-size: 0.7rem; color: var(--sa-muted); }
.sensor-chart-wrap { position: relative; height: 200px; margin-bottom: 1rem; }
.sensor-forms { display: grid; gap: 0.85rem; }
.sensor-form h3 { font-size: 0.9rem; margin: 0 0 0.45rem; }
.sensor-measure-toolbar { display: flex; align-items: center; gap: .5rem; }
.sensor-form[hidden] { display: none !important; }
.sensor-token { font-size: 0.75rem; word-break: break-all; }
.sensor-alerts { display: grid; gap: 0.4rem; margin-bottom: 0.85rem; }
.sensor-alert {
    border-radius: 10px; padding: 0.55rem 0.75rem; font-size: 0.85rem;
    background: #f8efd8; color: #7a5a18;
}
.sensor-alert--info { background: #e6f3fa; color: #2f4f63; }
.sensor-alert--warning { background: #f8efd8; color: #7a5a18; }
.sensor-alert--danger { background: #fef2f1; color: #b42318; }
.sensor-alert--ok { background: #eef6ef; color: #2f6b3a; }
@media (max-width: 1100px) {
    .sensor-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .sensor-kpis { grid-template-columns: 1fr 1fr; }
}



/* ========== Sisgop Agros UI system ========== */
.brand-mark { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--sa-green-900); text-decoration: none; }
.brand-mark__icon { color: var(--sa-green-700); }
.brand-mark--light, .brand-mark--light .brand-mark__icon { color: #fff; }
.brand-mark--lg { font-size: 1.35rem; }
.brand-mark--lg .brand-mark__icon { font-size: 1.5rem; }
.brand-mark--lg .brand-mark__text { font-size: 1.35rem; letter-spacing: -0.01em; }

.btn-primary {
    background: var(--sa-green-800) !important;
    border-color: var(--sa-green-800) !important;
    box-shadow: none;
}
.btn-primary:hover { background: var(--sa-green-900) !important; border-color: var(--sa-green-900) !important; transform: none; }
.btn-success { background: var(--sa-green-700) !important; border-color: var(--sa-green-700) !important; }
.btn-outline-success { color: var(--sa-green-800); border-color: var(--sa-green-600); }

.ui-field { margin-bottom: 1rem; }
.ui-field__label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; color: var(--sa-ink); }
.ui-field__help {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--sa-muted);
}
.ui-field__help i {
    color: var(--sa-green-700);
    margin-right: 0.3rem;
    font-size: 0.72rem;
}
.ui-field__label--tip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}
.ui-field__tip {
    border: 0;
    background: transparent;
    color: var(--sa-green-700);
    padding: 0;
    line-height: 1;
    cursor: help;
}
.ui-field__tip:hover { color: var(--sa-green-900); }
.ui-req {
    color: #b42318;
    text-decoration: none;
    font-weight: 700;
}
.form-help-banner {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    background: #eef6ef;
    border: 1px solid #d4e5d7;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    color: #3d4a40;
    font-size: 0.9rem;
}
.form-help-banner i { color: var(--sa-green-700); margin-top: 0.15rem; }
.form-help-banner--autofill {
    background: #eef4fb;
    border-color: #c9daf0;
}
.form-help-banner--autofill i { color: #2f5f9e; }

.reco-panel__hint { font-size: 0.9rem; }
.reco-status {
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.reco-status--loading { background: #eef4fb; color: #2f5f9e; border: 1px solid #c9daf0; }
.reco-status--ok { background: #eef6ef; color: #2f6b3a; border: 1px solid #d4e5d7; }
.reco-status--error { background: #fef2f1; color: #b42318; border: 1px solid #f5c2c0; }
.reco-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}
.reco-card {
    border: 1px solid var(--sa-line);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    background: #fff;
    border-left: 3px solid var(--sa-green-600);
}
.reco-card--action {
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.reco-card--action:hover, .reco-card--action:focus {
    outline: none;
    border-color: var(--sa-green-700);
    box-shadow: 0 8px 22px rgba(35, 92, 55, .12);
    transform: translateY(-1px);
}
.reco-card__cta {
    margin-top: .65rem;
    padding-top: .55rem;
    border-top: 1px dashed #d7eadb;
    font-size: .78rem;
    font-weight: 600;
    color: var(--sa-green-800);
}
.reco-card__cta i { margin-right: .3rem; }
.reco-card--alta { border-left-color: #2f6b3a; }
.reco-card--media { border-left-color: #3d7ea6; }
.reco-card--baja { border-left-color: #b54708; }
.reco-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.reco-card h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--sa-ink);
}
.reco-card h3 small { font-weight: 500; color: var(--sa-muted); }
.reco-card > p { margin: 0 0 0.5rem; font-size: 0.9rem; color: #3d4a40; }
.reco-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
    font-size: 0.82rem;
}
.reco-meta li { display: flex; gap: 0.5rem; color: #3d4a40; }
.reco-meta li span {
    min-width: 4.2rem;
    color: var(--sa-muted);
    font-weight: 600;
}
.reco-evitar {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.9rem;
}
.reco-tip {
    background: #eef6ef;
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    margin: 0;
    font-size: 0.9rem;
}
.reco-ctx { font-size: 0.92rem; }
@media (max-width: 1280px) {
    .reco-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .reco-list { grid-template-columns: 1fr; }
}

.ui-field__control { position: relative; }
.ui-field__icon { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--sa-muted); }
.ui-field__input {
    width: 100%; border: 1px solid var(--sa-line); border-radius: 10px; padding: .75rem .95rem .75rem 2.4rem;
    background: #fff; font: inherit; color: var(--sa-ink);
}
.ui-field__input:focus { outline: none; border-color: var(--sa-green-600); box-shadow: 0 0 0 3px rgba(47,107,58,.15); }
.ui-field__action {
    position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; color: var(--sa-muted); width: 2.2rem; height: 2.2rem; border-radius: 8px;
}
.ui-field__action:hover { background: var(--sa-green-50); color: var(--sa-green-800); }

.ui-kpi {
    background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: var(--sa-radius);
    box-shadow: var(--sa-shadow-sm); padding: 1rem 1rem .85rem; display: flex; flex-direction: row; gap: .65rem; min-height: 132px;
}
.ui-kpi__icon {
    width: 2.4rem; height: 2.4rem; border-radius: 10px; display: grid; place-items: center;
    background: var(--sa-green-100); color: var(--sa-green-800);
}
.ui-kpi--success .ui-kpi__icon { background: #e4f4e7; }
.ui-kpi--warning .ui-kpi__icon { background: #f8efd8; color: var(--sa-brown-700); }
.ui-kpi--danger .ui-kpi__icon { background: #fde8e6; color: var(--sa-danger); }
.ui-kpi--info .ui-kpi__icon { background: #e6f3fa; color: var(--sa-info); }
.ui-kpi__value { font-size: 1.55rem; font-weight: 700; margin: 0; line-height: 1.1; }
.ui-kpi__label { margin: 0; color: var(--sa-muted); font-size: .9rem; }
.ui-kpi__hint { display: block; margin-top: 0.15rem; color: var(--sa-muted); font-size: 0.75rem; }
.ui-kpi__link { margin-top: auto; font-size: .82rem; font-weight: 600; color: var(--sa-green-800); text-decoration: none; }
.ui-kpi__link:hover { text-decoration: underline; }

.ui-panel {
    background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: var(--sa-radius);
    box-shadow: var(--sa-shadow-sm); display: flex; flex-direction: column; smin-height: 100%;
}
.ui-panel__head, .ui-panel__foot { padding: .9rem 1.1rem; border-bottom: 1px solid var(--sa-line); }
.ui-panel__foot { border-bottom: 0; border-top: 1px solid var(--sa-line); }
.ui-panel__foot a { color: var(--sa-green-500); font-weight: 600; font-size: .88rem; text-decoration: none; }
.ui-panel__title { margin: 0; font-size: 1rem; font-weight: 700; display: flex; align-items: center; }
.ui-panel__body { padding: 1rem 1.1rem 1.15rem; flex: 1; }
.ui-panel--wide { margin-top: 1rem; }
.ui-panel--wide .ui-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

.ui-pill {
    display: inline-flex; align-items: center; border-radius: 999px; padding: .2rem .65rem;
    font-size: .72rem; font-weight: 600; background: #eef2ee; color: var(--sa-muted);
}
.ui-pill--success { background: #e4f4e7; color: var(--sa-green-800); }
.ui-pill--warning { background: #f8efd8; color: var(--sa-warning); }
.ui-pill--danger { background: #fde8e6; color: var(--sa-danger); }
.ui-pill--info { background: #e6f3fa; color: var(--sa-info); }

.ui-page-header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; }
.ui-page-header__title { margin: 0; font-size: 1.45rem; font-weight: 700; display: flex; align-items: center; gap: .55rem; }
.ui-page-header__title i { color: var(--sa-green-700); }
.ui-page-header__sub { margin: .35rem 0 0; color: var(--sa-muted); }

.ui-grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
.ui-grid--kpi { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ui-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ui-feed, .ui-crop-list, .ui-task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.ui-feed li, .ui-crop-list li, .ui-task-list li { display: flex; gap: .75rem; align-items: flex-start; }
.ui-feed__icon, .ui-crop-list__avatar {
    width: 2rem; height: 2rem; border-radius: 50%; background: var(--sa-green-100); color: var(--sa-green-800);
    display: grid; place-items: center; flex: 0 0 auto;
}
.ui-feed strong, .ui-crop-list strong, .ui-task-list strong { display: block; font-size: .92rem; }
.ui-feed small, .ui-crop-list small, .ui-task-list small { color: var(--sa-muted); }
.ui-feed time { margin-left: auto; color: var(--sa-muted); font-size: .75rem; white-space: nowrap; }
.ui-crop-list li, .ui-task-list li { justify-content: space-between; align-items: center; }
.ui-crop-list li > div, .ui-task-list li > div { flex: 1; }

.ui-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
.ui-metrics > div {
    background: var(--sa-green-50); border-radius: 10px; padding: .85rem; text-align: center;
}
.ui-metrics i { color: var(--sa-green-700); margin-bottom: .35rem; }
.ui-metrics strong { display: block; font-size: 1.05rem; }
.ui-metrics span { color: var(--sa-muted); font-size: .78rem; }

.ui-empty {
    margin-top: 1rem; text-align: center; background: #fff; border: 1px dashed var(--sa-line);
    border-radius: var(--sa-radius-lg); padding: 2.5rem 1.5rem; color: var(--sa-muted);
}
.ui-empty h2 { color: var(--sa-ink); margin: 1rem 0 .5rem; font-size: 1.25rem; }

.dash-chart-wrap { position: relative; }
.dash-chart-note { margin: .75rem 0 0; font-size: .8rem; color: var(--sa-muted); }
.dash-weather__place { margin: 0; color: var(--sa-muted); font-size: .9rem; }
.dash-weather__temp { margin: .35rem 0; font-size: 2.4rem; font-weight: 700; color: var(--sa-green-900); line-height: 1; }
.dash-weather__desc { margin: 0 0 .85rem; text-transform: capitalize; }
.dash-weather__meta { display: flex; flex-wrap: wrap; gap: .75rem 1rem; color: var(--sa-muted); font-size: .85rem; }

/* Auth layout — login mockup */
.auth-body {
    margin: 0;
    min-height: 100vh;
    background: #e8efe6;
}
.auth-shell {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--sa-ink);
    overflow: hidden;
}
.auth-shell__media {
    position: absolute;
    inset: 0;
    background:
        url("../img/login-bg.png") center / cover no-repeat;
    transform: scale(1.02);
}
.auth-shell__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, rgba(246, 248, 244, 0.92) 0%, rgba(246, 248, 244, 0.78) 42%, rgba(246, 248, 244, 0.35) 68%, rgba(246, 248, 244, 0.18) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 28%, transparent 72%, rgba(255, 255, 255, 0.35) 100%);
}
.auth-top,
.auth-shell__grid,
.auth-bottom {
    position: relative;
    z-index: 1;
}
.auth-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.15rem 1.75rem 0.5rem;
    gap: 1rem;
}
.auth-top__brand {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-decoration: none;
    color: inherit;
}
.auth-top__brand .brand-mark {
    color: var(--sa-green-900);
}
.auth-top__brand .brand-mark__icon {
    color: #3f8f46;
}
.auth-top__tagline {
    display: block;
    margin-left: 2.1rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7a6d;
    max-width: 28rem;
    line-height: 1.35;
}
.auth-lang {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.88);
    color: var(--sa-ink);
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 4px 14px rgba(20, 40, 22, 0.08);
    cursor: default;
}
.auth-lang .fa-chevron-down {
    font-size: 0.65rem;
    opacity: 0.7;
}

.auth-shell__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 1.5rem 2rem;
    padding: 0.35rem 1.75rem 1.25rem;
    align-items: center;
    flex: 1;
}

.auth-hero__title {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 3.8vw, 3.15rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.auth-hero__line {
    display: block;
}
.auth-hero__line em {
    font-style: normal;
    font-weight: 800;
}
.auth-hero__line--green { color: #244f2c; }
.auth-hero__line--green em { color: #2f6b3a; }
.auth-hero__line--brown { color: #5c4632; }
.auth-hero__line--brown em { color: #6b4f35; }
.auth-hero__line--ink { color: #4a3d2e; }
.auth-hero__accent { color: #3d9a45 !important; }

.auth-hero__lead {
    max-width: 34rem;
    margin: 0 0 1.35rem;
    color: #4f5d52;
    font-size: 0.98rem;
    line-height: 1.55;
}

.auth-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.15rem;
    max-width: 42rem;
}
.auth-feature {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(210, 222, 212, 0.95);
    border-radius: 14px;
    padding: 0.85rem 0.75rem;
    backdrop-filter: blur(8px);
}
.auth-feature__icon {
    display: inline-grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 10px;
    border: 1.5px solid #4f8a57;
    color: #2f6b3a;
    margin-bottom: 0.55rem;
    background: rgba(255, 255, 255, 0.7);
}
.auth-feature h3 {
    margin: 0 0 0.3rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: #244f2c;
}
.auth-feature p {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.4;
    color: #5c6b5e;
}

.auth-trust {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(220, 230, 222, 0.95);
    border-radius: 18px;
    padding: 1rem 1.15rem 0.95rem;
    max-width: 42rem;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 28px rgba(26, 61, 31, 0.06);
}
.auth-trust h3 {
    margin: 0 0 0.9rem;
    font-size: 0.98rem;
    font-weight: 700;
    color: #2f6b3a;
}
.auth-trust__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}
.auth-trust__stat {
    text-align: center;
}
.auth-trust__stat i {
    color: #3d7d49;
    margin-bottom: 0.35rem;
    font-size: 1rem;
}
.auth-trust__stat strong {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    color: #1f2a1f;
    line-height: 1.1;
}
.auth-trust__stat span {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: #5c6b5e;
    line-height: 1.3;
}
.auth-trust__note {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.95rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(217, 227, 218, 0.9);
    font-size: 0.76rem;
    color: #5c6b5e;
    line-height: 1.4;
}
.auth-trust__note i {
    color: #3d7d49;
    margin-top: 0.1rem;
}

.auth-panel {
    display: flex;
    justify-content: center;
    align-items: center;
}
.auth-card {
    width: min(420px, 100%);
    background: #fff;
    color: var(--sa-ink);
    border-radius: 24px;
    box-shadow: 0 22px 55px rgba(20, 40, 22, 0.18);
    padding: 1.75rem 1.55rem 1.4rem;
}
.auth-card__logo {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.65rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eef6ef;
    color: #3d7d49;
    font-size: 1.35rem;
}
.auth-card__title {
    text-align: center;
    color: #2f6b3a;
    margin: 0;
    font-size: 1.7rem;
    font-weight: 800;
}
.auth-card__sub {
    text-align: center;
    color: #7a8780;
    margin: 0.35rem 0 1.2rem;
    font-size: 0.9rem;
}
.auth-form .ui-field__label {
    color: #3d4a40;
}
.auth-form .ui-field__input {
    background: #f7f9fb;
    border-color: #d7dee6;
    padding-right: 2.6rem;
}
.auth-form .ui-field__input:focus {
    background: #fff;
    border-color: #4f8a57;
}
.auth-form__row {
    display: flex;
    justify-content: flex-end;
    margin: -0.35rem 0 1rem;
}
.auth-link {
    color: #3d7d49;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 600;
}
.auth-link:hover { text-decoration: underline; }
.auth-link--strong { font-weight: 700; color: #2f6b3a; }

.auth-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border: 0;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, #2f6b3a 0%, #3d5c2e 55%, #6b5230 100%);
    box-shadow: 0 8px 18px rgba(47, 107, 58, 0.28);
    transition: filter 0.15s ease, transform 0.15s ease;
}
.auth-submit:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.15rem 0 0.9rem;
    color: #8a958c;
    font-size: 0.8rem;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8e3;
}
.auth-social {
    display: grid;
    gap: 0.55rem;
}
.auth-social__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    border: 1px solid #d7dee6;
    background: #fff;
    color: #334039;
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: not-allowed;
    opacity: 0.92;
}
.auth-card__footer {
    text-align: center;
    margin: 1.15rem 0 0;
    color: #6b776e;
    font-size: 0.9rem;
}

.auth-bottom {
    margin-top: auto;
    padding: 0.85rem 1.75rem 0.75rem;
    background: rgba(255, 255, 255, 0.72);
    border-top: 1px solid rgba(220, 228, 221, 0.9);
    backdrop-filter: blur(10px);
}
.auth-bottom__items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 0.55rem;
}
.auth-bottom__item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}
.auth-bottom__item > i {
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    border: 1.5px solid #4f8a57;
    color: #2f6b3a;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.75);
}
.auth-bottom__item strong {
    display: block;
    font-size: 0.82rem;
    color: #ffffff;
    line-height: 1.25;
}
.auth-bottom__item span {
    display: block;
    font-size: 0.72rem;
    color: #ececec;
}
.auth-bottom__copy {
    margin: 0;
    font-size: 0.72rem;
    color: #ffffff;
}

@media (max-width: 1200px) {
    .auth-features,
    .auth-trust__stats,
    .auth-bottom__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
    .auth-shell__grid {
        grid-template-columns: 1fr;
        padding-top: 0.25rem;
    }
    .auth-hero { order: 2; }
    .auth-panel { order: 1; }
    .auth-top__tagline { max-width: 18rem; }
    .auth-features { max-width: none; }
    .auth-trust { max-width: none; }
}
@media (max-width: 640px) {
    .auth-top { padding: 1rem 1rem 0.35rem; }
    .auth-shell__grid { padding: 0.25rem 1rem 1rem; }
    .auth-bottom { padding: 0.85rem 1rem 0.75rem; }
    .auth-trust__stats,
    .auth-bottom__items,
    .auth-features { grid-template-columns: 1fr; }
    .auth-hero__title { font-size: 1.75rem; }
    .auth-top__tagline { margin-left: 0; }
}

.app-body { background: var(--sa-cream); }
.app-frame { min-height: 100vh; display: grid; grid-template-columns: var(--sa-side-w) 1fr; grid-template-rows: var(--sa-top-h) 1fr; }
.app-topbar {
    grid-column: 1 / -1; height: var(--sa-top-h); background: var(--sa-green-900); color: #fff;
    display: flex; align-items: center; gap: 1rem; padding: 0 1rem; position: sticky; top: 0; z-index: 40;
}
.app-topbar__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 0;
    border-radius: 10px;
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.app-topbar__toggle:hover { background: rgba(255,255,255,.18); }
.app-topbar__brand { text-decoration: none; margin-right: .5rem; }
.app-topbar__nav { display: flex; align-items: center; gap: .25rem; flex: 1; }
.app-topbar__link {
    color: rgba(255,255,255,.88); text-decoration: none; padding: .45rem .7rem; border-radius: 8px; font-size: .9rem; font-weight: 500;
}
.app-topbar__link:hover, .app-topbar__link.is-active { background: rgba(255,255,255,.12); color: #fff; }
.app-topbar__actions { display: flex; align-items: center; gap: .55rem; margin-left: auto; }
.app-icon-btn {
    position: relative; width: 2.3rem; height: 2.3rem; border-radius: 999px; border: 0; background: rgba(255,255,255,.1); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.app-icon-btn__badge {
    position: absolute; top: -2px; right: -2px; background: var(--sa-green-600); color: #fff;
    border-radius: 999px; font-size: .65rem; min-width: 1rem; height: 1rem; display: grid; place-items: center;
}
.app-user {
    display: flex; align-items: center; gap: .55rem; border: 0; background: rgba(255,255,255,.08);
    color: #fff; border-radius: 999px; padding: .25rem .65rem .25rem .3rem;
}
.app-user__avatar {
    width: 2rem; height: 2rem; border-radius: 50%; background: var(--sa-green-600); display: grid; place-items: center; font-weight: 700;
}
.app-user__meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.app-user__meta strong { font-size: .82rem; }
.app-user__meta small { font-size: .68rem; opacity: .8; }
.app-notify { width: min(340px, 90vw); }

.app-side {
    background: #fbfaf6; border-right: 1px solid var(--sa-line); padding: 1rem .75rem 1.25rem;
    overflow: auto; position: sticky; top: var(--sa-top-h); height: calc(100vh - var(--sa-top-h));
    display: flex; flex-direction: column;
    width: var(--sa-side-w);
    box-sizing: border-box;
    transition: width .18s ease, box-shadow .18s ease, padding .18s ease;
}
.app-side__group {
    margin: .85rem .55rem .35rem; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--sa-muted); font-weight: 700;
}
.app-side__link {
    display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: 10px;
    color: var(--sa-ink); text-decoration: none; font-size: .9rem; margin-bottom: .15rem;
}
.app-side__link i { width: 1.1rem; color: var(--sa-muted); }
.app-side__link:hover { background: var(--sa-green-50); }
.app-side__link.is-active { background: var(--sa-green-100); color: var(--sa-green-900); box-shadow: inset 3px 0 0 var(--sa-green-800); }
.app-side__link.is-active i { color: var(--sa-green-800); }
.app-side__link--disabled { opacity: .55; cursor: default; }
.app-side__badge {
    margin-left: auto; background: var(--sa-green-700); color: #fff; border-radius: 999px;
    font-size: .68rem; min-width: 1.15rem; height: 1.15rem; display: grid; place-items: center; padding: 0 .3rem;
}
.app-side__soon { margin-left: auto; font-size: .65rem; color: var(--sa-muted); }
.app-side__help,
.app-side__plan {
    margin: auto .4rem 0; padding: .9rem; border-radius: 12px; background: #fff; border: 1px solid var(--sa-line);
}
.app-side__help strong, .app-side__plan strong { display: block; }
.app-side__help small, .app-side__plan small { display: block; color: var(--sa-muted); margin: .2rem 0 .7rem; }
.app-side__plan strong { display: block; }
.app-side__plan small { color: var(--sa-muted); }
.app-side__backdrop { display: none; }
.app-main { padding: 1.25rem 1.35rem 2rem; min-width: 0; }

@media (min-width: 1024px) {
    body.sidebar-collapsed .app-frame {
        grid-template-columns: var(--sa-side-rail) 1fr;
    }
    body.sidebar-collapsed .app-side {
        width: var(--sa-side-rail);
        padding-left: .45rem;
        padding-right: .45rem;
        overflow-x: hidden;
        justify-self: start;
        z-index: 36;
    }
    body.sidebar-collapsed .app-side__group,
    body.sidebar-collapsed .app-side__link > span,
    body.sidebar-collapsed .app-side__badge,
    body.sidebar-collapsed .app-side__soon,
    body.sidebar-collapsed .app-side__promo,
    body.sidebar-collapsed .app-side__plan,
    body.sidebar-collapsed .app-side__help {
        display: none;
    }
    body.sidebar-collapsed .app-side__link {
        justify-content: center;
        padding-left: .45rem;
        padding-right: .45rem;
    }
    body.sidebar-collapsed .app-side__link i { margin: 0; }
    body.sidebar-collapsed .app-side:hover,
    body.sidebar-collapsed .app-side:focus-within {
        width: var(--sa-side-w);
        padding-left: .75rem;
        padding-right: .75rem;
        box-shadow: 10px 0 28px rgba(26, 61, 31, 0.14);
        overflow-x: hidden;
        overflow-y: auto;
    }
    body.sidebar-collapsed .app-side:hover .app-side__group,
    body.sidebar-collapsed .app-side:focus-within .app-side__group {
        display: block;
    }
    body.sidebar-collapsed .app-side:hover .app-side__link > span,
    body.sidebar-collapsed .app-side:focus-within .app-side__link > span,
    body.sidebar-collapsed .app-side:hover .app-side__badge,
    body.sidebar-collapsed .app-side:focus-within .app-side__badge,
    body.sidebar-collapsed .app-side:hover .app-side__soon,
    body.sidebar-collapsed .app-side:focus-within .app-side__soon {
        display: initial;
    }
    body.sidebar-collapsed .app-side:hover .app-side__badge,
    body.sidebar-collapsed .app-side:focus-within .app-side__badge {
        display: grid;
    }
    body.sidebar-collapsed .app-side:hover .app-side__promo,
    body.sidebar-collapsed .app-side:focus-within .app-side__promo,
    body.sidebar-collapsed .app-side:hover .app-side__plan,
    body.sidebar-collapsed .app-side:focus-within .app-side__plan,
    body.sidebar-collapsed .app-side:hover .app-side__help,
    body.sidebar-collapsed .app-side:focus-within .app-side__help {
        display: block;
    }
    body.sidebar-collapsed .app-side:hover .app-side__link,
    body.sidebar-collapsed .app-side:focus-within .app-side__link {
        justify-content: flex-start;
        padding-left: .7rem;
        padding-right: .7rem;
    }
}

input.is-loading-altitude {
    background-image: linear-gradient(90deg, transparent, rgba(47,107,58,.08), transparent);
    background-size: 200% 100%;
    animation: sa-alt-pulse 1.1s linear infinite;
}
@keyframes sa-alt-pulse {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.toast-container { top: 5rem; }

@media (max-width: 1200px) {
    .ui-grid--kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ui-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .auth-features, .auth-trust__stats, .auth-bottom__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
    .app-frame {
        grid-template-columns: 1fr;
        grid-template-rows: var(--sa-top-h) 1fr;
    }
    .app-topbar { grid-column: 1; grid-row: 1; }
    .app-main { grid-column: 1; grid-row: 2; padding: .25rem;}
    .app-topbar__nav { display: none; }
    .app-topbar__toggle { display: inline-flex; }
    .app-user__meta { display: none; }
    .app-side {
        position: fixed;
        left: 0;
        top: var(--sa-top-h);
        bottom: 0;
        width: min(280px, 86vw);
        z-index: 1050;
        height: auto;
        transform: translateX(-110%);
        transition: transform .22s ease;
        box-shadow: none;
        grid-column: 1;
        grid-row: 2;
        /* Fuera del flujo visual del grid */
        margin: 0;
    }
    body.sidebar-open .app-side {
        transform: translateX(0);
        box-shadow: 8px 0 28px rgba(26, 61, 31, 0.18);
    }
    .app-side__backdrop {
        display: none !important;
        position: fixed;
        inset: var(--sa-top-h) 0 0 0;
        background: rgba(15, 30, 18, 0.45);
        z-index: 1040;
        border: 0;
        padding: 0;
        margin: 0;
        width: 100%;
        height: auto;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    body.sidebar-open .app-side__backdrop:not([hidden]) {
        display: block !important;
    }
    body.sidebar-open { overflow: hidden; }
    .ui-grid--3 { grid-template-columns: 1fr; }
    .auth-shell__grid { grid-template-columns: 1fr; padding-top: 0; }
    .auth-hero { order: 2; }
    .auth-panel { order: 1; }
    .auth-features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .ui-grid--kpi { grid-template-columns: 1fr 1fr; }
    .ui-metrics { grid-template-columns: 1fr 1fr; }
    .auth-trust__stats, .auth-bottom__items, .auth-features { grid-template-columns: 1fr; }
    .auth-hero__title { font-size: 1.7rem; }
}

.vert-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.85rem;
    margin: 0 0 1.25rem;
}
.vert-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    background: var(--sa-card, #fff);
    border: 1px solid var(--sa-line, #e4ebe3);
    text-decoration: none;
    color: inherit;
}
.vert-block i { color: var(--sa-green, #2f6b3a); font-size: 1.2rem; }
.vert-block span { color: #6a7a6c; font-size: 0.85rem; }
.vert-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.vert-rubros { display: grid; gap: 0.65rem; }
.vert-rubro {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #d7e2d6;
    border-radius: 10px;
    cursor: pointer;
}
.vert-rubro small { display: block; color: #6a7a6c; }

.ui-page { padding: 0.25rem 0 2rem; }
.ui-pagehead { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; flex-wrap: wrap; }
.ui-kicker { text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; color: #6a7a6c; margin: 0 0 .25rem; }
.ui-card { background: #fff; border: 1px solid #e4ebe3; border-radius: 12px; padding: 1rem 1.15rem; }
.ui-stat { background: #fff; border: 1px solid #e4ebe3; border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; gap: .2rem; }
.ui-stat span { color: #6a7a6c; font-size: .85rem; }
.ui-stat strong { font-size: 1.45rem; }
.banner-soporte { background: #fff3cd; border-bottom: 1px solid #f0d78c; padding: .55rem 1rem; font-size: .9rem; }

/* —— Mockups plataforma: planes —— */
.plat-title { font-size: 1.7rem; font-weight: 700; margin: 0 0 .25rem; color: var(--sa-ink); }
.plat-title i, .dash-card__head h2 i { color: var(--sa-green-800); margin-right: .35rem; }
.plat-bc { display: flex; align-items: center; gap: .4rem; font-size: .86rem; margin: 0 0 .45rem; color: var(--sa-muted); }
.plat-bc a { color: var(--sa-green-800); text-decoration: none; font-weight: 600; }
.plat-bc em { font-style: normal; color: var(--sa-ink); }
.ui-pagehead { align-items: center; }
.ui-pagehead .text-muted { color: var(--sa-muted) !important; }
.plat-head-actions { display: flex; align-items: center; gap: .55rem; }

.btn-mock {
    display: inline-flex; align-items: center; gap: .45rem;
    border-radius: 10px; padding: .55rem 1rem; font-weight: 600; font-size: .9rem;
    text-decoration: none; border: 1px solid transparent; cursor: pointer;
    font-family: inherit; line-height: 1.2; appearance: none;
}
.btn-mock--primary { background: var(--sa-green-800); color: #fff; }
.btn-mock--primary:hover { background: var(--sa-green-900); color: #fff; }
.btn-mock--ghost { background: #fff; color: var(--sa-ink); border-color: var(--sa-line); }
.btn-mock--ghost:hover { background: #f4f7f4; color: var(--sa-ink); }
.btn-mock--block { width: 100%; justify-content: center; }

.plat-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.15rem;
}
.plat-kpi {
    background: #fff;
    border: 1px solid var(--sa-line);
    border-radius: 14px;
    padding: 0.95rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    box-shadow: var(--sa-shadow-sm);
}
.plat-kpi small { display: block; color: var(--sa-muted); font-size: .78rem; }
.plat-kpi strong { display: block; font-size: 1.4rem; line-height: 1.2; color: var(--sa-ink); margin: .15rem 0; }
.plat-kpi em { display: block; font-style: normal; color: #8a9a8c; font-size: .75rem; }
.plat-kpi__icon {
    width: 2.45rem; height: 2.45rem; border-radius: 10px;
    display: grid; place-items: center; flex: 0 0 auto; font-size: 1rem;
}
.plat-kpi__icon--green { background: #e7f5ea; color: var(--sa-green-800); }
.plat-kpi__icon--blue { background: #e7f0fb; color: #2a6f97; }
.plat-kpi__icon--purple { background: #f0e8fb; color: #6d4cae; }
.plat-kpi__icon--gold { background: #fff4d6; color: #b8860b; }
.plat-kpi__icon--teal { background: #e4f4f1; color: #2a7a6d; }
.plat-kpi__icon--orange { background: #fff1dc; color: #c27803; }
.plat-kpi em.is-up { color: var(--sa-green-800); font-weight: 600; }
.plat-kpi strong span { font-size: .8rem; font-weight: 600; color: var(--sa-muted); }
.plat-kpi__bar {
    display: block; height: 6px; background: #e6eee7; border-radius: 999px;
    overflow: hidden; margin-top: .55rem; max-width: 9rem;
}
.plat-kpi__bar i { display: block; height: 100%; background: var(--sa-green-700); }
.plat-kpi__bar--warn i { background: #c27803; }

.plan-card {
    background: #fff;
    border: 1px solid var(--sa-line);
    border-radius: 16px;
    padding: 1rem 1.15rem;
    margin-bottom: 0.85rem;
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 1.15rem;
    align-items: stretch;
    box-shadow: var(--sa-shadow-sm);
}
.plan-id {
    border: 1px solid #d5e8d8;
    background: #f4faf5;
    border-radius: 12px;
    padding: .85rem .65rem .75rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}
.plan-id i { color: var(--sa-green-800); font-size: 1.35rem; }
.plan-id strong { display: block; font-size: .98rem; color: var(--sa-green-800); line-height: 1.2; }
.plan-id span {
    display: inline-block;
    background: var(--sa-green-800);
    color: #fff;
    border-radius: 999px;
    padding: .18rem .65rem;
    font-size: .72rem;
    font-weight: 600;
}
.plan-body { min-width: 0; display: flex; flex-direction: column; gap: .55rem; }
.plan-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .55rem .75rem;
}
.plan-metrics span { display: block; color: var(--sa-muted); font-size: .72rem; margin-bottom: .15rem; }
.plan-metrics b { font-size: .95rem; font-weight: 700; color: var(--sa-ink); }
.plan-metrics em { font-style: normal; font-weight: 500; color: #7a8a7c; font-size: .78rem; }
.plan-desc { margin: 0; color: #5c6b5e; font-size: .88rem; }
.plan-bottom { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.plan-row__mods { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.plan-card__count {
    display: inline-block; background: #e7f5ea; color: var(--sa-green-800);
    border-radius: 999px; padding: .15rem .55rem; font-size: .75rem; font-weight: 600;
}
.mod-tag {
    background: #f3f8f3; border: 1px solid #d7e6d8; color: var(--sa-green-800);
    border-radius: 999px; padding: .15rem .55rem; font-size: .78rem;
}
.mod-tag i { font-size: .65rem; margin-right: .15rem; }
.mod-more { font-size: .78rem; color: var(--sa-green-800); font-weight: 600; text-decoration: none; }
.plan-pill { font-weight: 600; font-size: .82rem; }
.plan-pill--on { color: var(--sa-green-800); }
.plan-pill--on i { font-size: .7rem; margin-right: .2rem; }
.plan-pill--off { color: #8a6a2a; }
.plan-pill--off i { font-size: .7rem; margin-right: .2rem; }
.plan-row__actions { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.btn-row {
    display: inline-flex; align-items: center; gap: .35rem;
    border: 1px solid #d5e0d6; background: #fff; color: var(--sa-ink);
    border-radius: 8px; padding: .38rem .65rem; font-size: .82rem; text-decoration: none; font-weight: 500;
}
.btn-row:hover { background: #f4f8f4; color: var(--sa-ink); }
.btn-row--icon { width: 2rem; height: 2rem; justify-content: center; padding: 0; }
.plan-foot {
    display: flex; justify-content: space-between; align-items: center;
    color: var(--sa-muted); font-size: .85rem; margin-top: .5rem;
}
.plan-pager { display: flex; gap: .35rem; }
.plan-pager button {
    width: 2rem; height: 2rem; border-radius: 8px; border: 1px solid var(--sa-line); background: #fff;
}
.plan-pager button.is-active { background: var(--sa-green-800); color: #fff; border-color: var(--sa-green-800); }

.mock-form { display: grid; gap: 1rem; }
.mock-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mock-field--full { grid-column: 1 / -1; }
.mock-card {
    background: #fff;
    border: 1px solid var(--sa-line);
    border-radius: 14px;
    padding: 1.1rem 1.2rem 1.25rem;
    box-shadow: var(--sa-shadow-sm);
}
.mock-card h2 {
    font-size: 1.02rem; margin: 0 0 1rem; color: var(--sa-green-900); font-weight: 700;
}
.mock-card h2 i { color: var(--sa-green-800); margin-right: .4rem; }
.mock-field { margin-bottom: .85rem; }
.mock-field:last-child { margin-bottom: 0; }
.mock-field label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: .35rem; }
.mock-field label span { color: #c0392b; }
.mock-field input, .mock-field textarea, .mock-field select {
    width: 100%; border: 1px solid #d7e0d8; border-radius: 10px;
    padding: .55rem .7rem; background: #fff; font: inherit; color: var(--sa-ink);
}
.mock-field input:focus, .mock-field textarea:focus, .mock-field select:focus {
    outline: 2px solid #cfe3d1; border-color: var(--sa-green-700);
}
.mock-field small { display: block; color: #7a8a7c; margin-top: .3rem; font-size: .78rem; }
.mock-inline { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.plan-hint {
    border-radius: 10px; padding: .7rem .85rem; font-size: .88rem; margin-top: .35rem;
}
.plan-hint--green { background: #eef7ef; border: 1px solid #cfe3d1; color: #24532c; }
.plan-switch {
    display: inline-flex; align-items: center; gap: .55rem;
    font-weight: 600; margin-top: .35rem;
}
.plan-switch input { display: none; }
.plan-switch span {
    width: 2.4rem; height: 1.25rem; border-radius: 999px;
    background: #c5d0c6; position: relative; display: inline-block;
}
.plan-switch span::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 1rem; height: 1rem; border-radius: 50%; background: #fff; transition: .15s;
}
.plan-switch input:checked + span { background: var(--sa-green-700); }
.plan-switch input:checked + span::after { left: 1.15rem; }

.xfer { display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; align-items: stretch; }
.xfer__col {
    border: 1px solid var(--sa-line); border-radius: 12px; padding: .7rem;
    min-height: 280px; background: #fcfdfc; position: relative;
}
.xfer__title { font-weight: 700; font-size: .86rem; margin-bottom: .5rem; }
.xfer__search { position: relative; margin-bottom: .55rem; }
.xfer__search i { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: #8a9a8c; font-size: .8rem; }
.xfer__search input {
    width: 100%; border: 1px solid #d7e0d8; border-radius: 8px; padding: .4rem .6rem .4rem 1.8rem; font: inherit;
}
.xfer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; max-height: 280px; overflow: auto; }
.xfer__list li label {
    display: flex; gap: .55rem; align-items: flex-start;
    padding: .55rem .6rem; border: 1px solid #e4ebe3; border-radius: 10px;
    background: #fff; cursor: pointer; margin: 0;
}
.xfer__list li label:hover { border-color: #b7d0ba; }
.xfer__list i { color: var(--sa-green-800); margin-top: .15rem; }
.xfer__list strong { display: block; font-size: .9rem; }
.xfer__list small { display: block; color: var(--sa-muted); font-size: .76rem; }
.xfer__btns { display: flex; flex-direction: column; justify-content: center; gap: .45rem; }
.xfer-arrow {
    width: 2.1rem; height: 2.1rem; border-radius: 8px; border: 0;
    background: var(--sa-green-800); color: #fff;
}
.xfer-arrow--ghost { background: #fff; color: var(--sa-ink); border: 1px solid var(--sa-line); }
.xfer__empty {
    position: absolute; inset: 2.4rem .7rem .7rem;
    display: grid; place-content: center; text-align: center; color: #8a9a8c;
}
.xfer__empty i { font-size: 1.6rem; margin-bottom: .35rem; }
.xfer__empty p { margin: 0; }
.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem 1.5rem; }
.feat-item { display: flex; align-items: center; gap: .5rem; font-weight: 500; margin: 0; cursor: pointer; }
.feat-item input { width: 1rem; height: 1rem; accent-color: var(--sa-green-800); }

@media (max-width: 1100px) {
    .plat-kpis { grid-template-columns: repeat(2, 1fr); }
    .plan-card, .plan-metrics, .mock-grid-2, .mock-inline, .feat-grid { grid-template-columns: 1fr; }
    .cfg-layout { grid-template-columns: 1fr; }
    .cfg-tabs { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 900px) {
    .xfer { grid-template-columns: 1fr; }
    .xfer__btns { flex-direction: row; justify-content: center; }
}
@media (max-width: 720px) {
    .plat-kpis, .cfg-fields { grid-template-columns: 1fr; }
}

/* —— Configuración (tabs verticales) —— */
.cfg-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
    min-height: 520px;
}
.cfg-tabs {
    background: #fff;
    border: 1px solid var(--sa-line);
    border-radius: 14px;
    padding: .45rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    box-shadow: var(--sa-shadow-sm);
}
.cfg-tab {
    display: flex; align-items: center; gap: .65rem;
    padding: .7rem .8rem; border-radius: 10px;
    color: var(--sa-ink); text-decoration: none; font-weight: 500;
}
.cfg-tab i { width: 1.1rem; color: var(--sa-green-800); text-align: center; }
.cfg-tab:hover { background: var(--sa-green-50); }
.cfg-tab.is-active { background: #e7f5ea; color: var(--sa-green-900); font-weight: 600; }
.cfg-panel {
    background: #fff;
    border: 1px solid var(--sa-line);
    border-radius: 14px;
    padding: 1.2rem 1.35rem 1.4rem;
    box-shadow: var(--sa-shadow-sm);
}
.cfg-panel__head h2 { font-size: 1.2rem; margin: 0 0 .25rem; }
.cfg-panel__head h2 i { color: var(--sa-green-800); margin-right: .35rem; }
.cfg-panel__head p { color: var(--sa-muted); margin: 0 0 1.1rem; }
.cfg-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1rem; }
.cfg-field label { display: flex; justify-content: space-between; font-weight: 600; font-size: .86rem; margin-bottom: .3rem; }
.cfg-field label em { font-style: normal; font-weight: 500; color: var(--sa-green-800); font-size: .75rem; }
.cfg-field small { display: block; color: #7a8a7c; margin-top: .25rem; }
.cfg-actions { display: flex; gap: .6rem; margin-top: 1.2rem; flex-wrap: wrap; }
.cfg-test { margin-top: 1.2rem; border-radius: 12px; padding: .9rem 1rem; border: 1px solid var(--sa-line); background: #f7faf7; }
.cfg-test.is-ok { border-color: #b7ddbe; background: #f1faf3; }
.cfg-test.is-bad { border-color: #f0c4c0; background: #fdf4f3; }
.cfg-test h3 { font-size: 1rem; margin: 0 0 .5rem; }
.cfg-test ul { margin: 0; padding: 0; list-style: none; }
.cfg-test li { padding: .2rem 0; }
.cfg-test li.ok { color: var(--sa-green-800); }
.cfg-test li.bad { color: var(--sa-danger); }

@media (max-width: 1100px) {
    .plat-kpis { grid-template-columns: repeat(2, 1fr); }
    .plan-card { grid-template-columns: 1fr 1fr; }
    .cfg-layout { grid-template-columns: 1fr; }
    .cfg-tabs { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 720px) {
    .plat-kpis, .plan-card, .cfg-fields, .plan-mod-grid { grid-template-columns: 1fr; }
}

/* —— Consola superusuario —— */
.dash-date {
    position: relative;
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff; border: 1px solid var(--sa-line); border-radius: 10px;
    padding: .5rem .85rem; font-weight: 600; color: var(--sa-ink); cursor: pointer;
}
.dash-date i { color: var(--sa-green-800); }
.dash-date input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.dash-kpis {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem; margin-bottom: 1.1rem;
}
.dash-kpi {
    background: #fff; border: 1px solid var(--sa-line); border-radius: 16px;
    padding: 1rem 1.1rem .85rem; box-shadow: var(--sa-shadow-sm);
}
.dash-kpi__top { display: flex; align-items: center; gap: .55rem; }
.dash-kpi__top small { color: var(--sa-muted); font-weight: 600; }
.dash-kpi__ico {
    width: 2.15rem; height: 2.15rem; border-radius: 10px;
    display: grid; place-items: center;
}
.dash-kpi__ico--green { background: #e7f5ea; color: var(--sa-green-800); }
.dash-kpi__ico--blue { background: #e7f0fb; color: #2a6f97; }
.dash-kpi__ico--orange { background: #fff1dc; color: #c27803; }
.dash-kpi__ico--purple { background: #f0e8fb; color: #6d4cae; }
.dash-kpi strong { display: block; font-size: 1.7rem; margin: .55rem 0 .35rem; line-height: 1.1; }
.dash-kpi strong span { font-size: .85rem; font-weight: 600; color: var(--sa-muted); }
.dash-kpi__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; }
.dash-kpi__foot em { font-style: normal; font-size: .78rem; color: var(--sa-muted); }
.dash-kpi__foot em.is-up { color: var(--sa-green-800); font-weight: 600; }
.dash-kpi__foot em.is-blue { color: #2a6f97; }
.dash-kpi__foot em.is-orange { color: #c27803; }
.dash-kpi__foot em.is-purple { color: #6d4cae; }
.dash-spark { width: 96px; height: 28px; flex: 0 0 auto; }

.dash-tabs {
    display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.1rem;
}
.dash-tabs a {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1px solid var(--sa-line); background: #fff; color: var(--sa-ink);
    border-radius: 999px; padding: .42rem .9rem; text-decoration: none; font-weight: 600; font-size: .86rem;
}
.dash-tabs a.is-active { background: var(--sa-green-800); color: #fff; border-color: var(--sa-green-800); }

.dash-widgets {
    display: grid; grid-template-columns: 1.15fr .95fr .95fr; gap: .9rem; margin-bottom: 1.1rem;
}
.dash-card {
    background: #fff; border: 1px solid var(--sa-line); border-radius: 16px;
    padding: 1rem 1.15rem 1.1rem; box-shadow: var(--sa-shadow-sm);
}
.dash-card__head {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: .85rem;
}
.dash-card__head h2 { margin: 0; font-size: 1.02rem; }
.dash-card__head a { color: var(--sa-green-800); font-weight: 600; text-decoration: none; font-size: .86rem; }

.dash-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.dash-feed li { display: grid; grid-template-columns: 2.1rem 1fr auto; gap: .65rem; align-items: start; }
.dash-feed__empty { color: var(--sa-muted); display: block !important; }
.dash-feed__ico {
    width: 2.1rem; height: 2.1rem; border-radius: 10px; display: grid; place-items: center;
}
.dash-feed__ico--green { background: #e7f5ea; color: var(--sa-green-800); }
.dash-feed__ico--blue { background: #e7f0fb; color: #2a6f97; }
.dash-feed__ico--purple { background: #f0e8fb; color: #6d4cae; }
.dash-feed__ico--gold { background: #fff4d6; color: #b8860b; }
.dash-feed strong { display: block; font-size: .88rem; }
.dash-feed small, .dash-feed a { color: var(--sa-muted); font-size: .78rem; text-decoration: none; }
.dash-feed a:hover { color: var(--sa-green-800); }
.dash-feed time { color: var(--sa-muted); font-size: .75rem; white-space: nowrap; }

.dash-gauge { position: relative; height: 140px; }
.dash-gauge svg { width: 100%; height: 140px; }
.dash-gauge__label {
    position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
    text-align: center;
}
.dash-gauge__label b { display: block; font-size: 1.15rem; }
.dash-gauge__label span { color: var(--sa-muted); font-size: .78rem; }

.dash-legend { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .4rem; }
.dash-legend li { display: flex; align-items: center; gap: .45rem; font-size: .84rem; }
.dash-legend i { width: .65rem; height: .65rem; border-radius: 50%; display: inline-block; background: #c5d0c6; }
.dash-legend i.is-green { background: #3d7d49; }
.dash-legend i.is-blue { background: #2a6f97; }
.dash-legend i.is-purple { background: #6d4cae; }
.dash-legend i.is-gold { background: #c27803; }
.dash-legend i.is-teal { background: #2a7a6d; }
.dash-legend i.is-muted { background: #c5d0c6; }
.dash-legend b { margin-left: auto; }
.dash-legend em { font-style: normal; color: var(--sa-muted); min-width: 2.4rem; text-align: right; }
.dash-hint {
    margin: .85rem 0 0; background: #eef7ef; border: 1px solid #cfe3d1;
    color: #24532c; border-radius: 10px; padding: .7rem .85rem; font-size: .84rem;
}

.dash-donut { position: relative; width: 150px; height: 150px; margin: .2rem auto .5rem; }
.dash-donut svg { width: 150px; height: 150px; }
.dash-donut circle.dash-donut--green { stroke: #3d7d49; }
.dash-donut circle.dash-donut--blue { stroke: #2a6f97; }
.dash-donut circle.dash-donut--purple { stroke: #6d4cae; }
.dash-donut circle.dash-donut--gold { stroke: #c27803; }
.dash-donut circle.dash-donut--teal { stroke: #2a7a6d; }
.dash-donut__label {
    position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.dash-donut__label small { color: var(--sa-muted); }
.dash-donut__label b { font-size: 1.35rem; }

.dash-table-wrap { overflow: auto; }
.dash-table { width: 100%; border-collapse: collapse; }
.dash-table th {
    text-align: left; font-size: .75rem; color: var(--sa-muted); font-weight: 600;
    padding: .45rem .5rem; border-bottom: 1px solid #e8efe8;
}
.dash-table td { padding: .7rem .5rem; border-bottom: 1px solid #f0f4f0; font-size: .88rem; vertical-align: middle; }
.dash-org { display: inline-flex; align-items: center; gap: .45rem; }
.dash-org i { color: var(--sa-green-800); }
.dash-org a { color: var(--sa-ink); font-weight: 600; text-decoration: none; }
.dash-plan {
    display: inline-block; border-radius: 999px; padding: .18rem .6rem; font-size: .75rem; font-weight: 600;
}
.dash-plan--green { background: #e7f5ea; color: #2f6b3a; }
.dash-plan--blue { background: #e7f0fb; color: #2a6f97; }
.dash-plan--purple { background: #f0e8fb; color: #6d4cae; }
.dash-plan--gold { background: #fff4d6; color: #8a6a2a; }
.dash-plan--teal { background: #e4f4f1; color: #2a7a6d; }
.dash-plan--muted { background: #f1f3f1; color: #6a7a6c; }
.dash-estado { font-weight: 600; font-size: .82rem; }
.dash-estado--on { color: var(--sa-green-800); }
.dash-estado--on i { font-size: .7rem; margin-right: .2rem; }
.dash-estado--warn { color: #8a6a2a; }
.dash-row-actions { display: flex; gap: .3rem; }

.app-side__promo {
    margin-top: auto; margin-left: .4rem; margin-right: .4rem;
    background: #1a3d1f; color: #fff; border-radius: 14px; overflow: hidden;
}
.app-side__promo-art { display: block; width: 100%; height: 78px; }
.app-side__promo strong, .app-side__promo small, .app-side__promo a { display: block; margin: 0 .85rem; }
.app-side__promo strong { margin-top: .55rem; }
.app-side__promo small { color: rgba(255,255,255,.78); margin: .3rem .85rem .7rem; }
.app-side__promo a {
    margin: 0 .85rem 1rem; background: #fff; color: #1a3d1f; text-align: center;
    border-radius: 999px; padding: .45rem .7rem; font-weight: 700; text-decoration: none; font-size: .82rem;
}

@media (max-width: 1200px) {
    .dash-widgets { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .dash-kpis { grid-template-columns: 1fr 1fr; }
    .dash-widgets { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .dash-kpis { grid-template-columns: 1fr; }
}

.off-panel { width: min(320px, 92vw); padding: .9rem 1rem 1rem; }
.off-panel__head { display: grid; gap: .15rem; margin-bottom: .75rem; }
.off-panel__head small { color: var(--sa-muted); }
.off-panel__auto {
    display: flex; align-items: flex-start; gap: .5rem;
    font-size: .84rem; margin-bottom: .75rem; cursor: pointer;
}
.off-panel__auto input { margin-top: .2rem; accent-color: var(--sa-green-800); }
.off-panel__hint { margin: .7rem 0 0; font-size: .75rem; color: var(--sa-muted); }
body.is-offline .app-main { position: relative; }
body.is-offline .app-main::before {
    content: 'Sin conexión. Los cambios se guardan en este dispositivo y se sincronizarán al recuperar red.';
    display: block; background: #fff4d6; color: #6a5310; border: 1px solid #ead7a0;
    border-radius: 10px; padding: .55rem .8rem; margin-bottom: 1rem; font-size: .86rem;
}

/* —— Perfil —— */
.pf-page { max-width: 100%; }
.pf-grid {
    display: grid;
    grid-template-columns: minmax(260px, .88fr) minmax(0, 1.32fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
.pf-summary { text-align: center; padding: 1.4rem 1.2rem 1.15rem; }
.pf-avatar-wrap { position: relative; width: 108px; height: 108px; margin: 0 auto 1rem; }
.pf-avatar {
    width: 108px; height: 108px; border-radius: 50%; object-fit: cover;
    display: grid; place-items: center;
}
.pf-avatar--letter {
    background: var(--sa-green-800); color: #fff;
    font-size: 2.4rem; font-weight: 700;
}
.pf-avatar-cam {
    position: absolute; right: 2px; bottom: 2px; margin: 0;
}
.pf-avatar-cam label {
    width: 1.85rem; height: 1.85rem; border-radius: 50%;
    background: #fff; border: 1px solid var(--sa-line);
    display: grid; place-items: center; cursor: pointer;
    box-shadow: 0 2px 6px rgba(20,40,20,.12); color: var(--sa-green-800);
}
.pf-summary h2 { font-size: 1.2rem; margin: 0 0 .45rem; }
.pf-contact { list-style: none; margin: 1rem 0 .85rem; padding: 0; text-align: left; display: grid; gap: .45rem; }
.pf-contact li { color: #4a5a4c; font-size: .88rem; display: flex; gap: .55rem; align-items: center; }
.pf-contact i { color: var(--sa-green-800); width: 1rem; text-align: center; }
.pf-member { margin: 0; color: var(--sa-muted); font-size: .78rem; }
.pf-form-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.mock-field input[readonly], .mock-field select:disabled {
    background: #f4f7f4; color: #5a6a5c;
}
.pf-sec, .pf-notif, .pf-list { list-style: none; margin: 0; padding: 0; display: grid; }
.pf-sec li, .pf-notif li, .pf-list li {
    display: flex; align-items: center; gap: .75rem;
    padding: .85rem 0; border-bottom: 1px solid #eef3ee;
}
.pf-sec li:last-child, .pf-notif li:last-child, .pf-list li:last-child { border-bottom: 0; }
.pf-sec li > div, .pf-notif li > div, .pf-list li > div { flex: 1; min-width: 0; }
.pf-sec strong, .pf-notif strong { display: block; font-size: .92rem; }
.pf-sec small, .pf-notif small, .pf-list small { color: var(--sa-muted); font-size: .78rem; }
.pf-arrow { color: #8a9a8c; text-decoration: none; padding: .35rem; }
.pf-arrow:hover { color: var(--sa-green-800); }
.pf-subform { margin-top: .75rem; padding-top: .85rem; border-top: 1px dashed #dbe5dc; }
.pf-secret { display: block; background: #f4f7f4; border-radius: 8px; padding: .55rem .7rem; letter-spacing: .08em; }
.pf-notif .plan-switch { margin-top: 0; }
.pf-offline { display: grid; gap: .75rem; }
.pf-offline__meta { display: flex; flex-wrap: wrap; gap: .75rem 1.2rem; color: var(--sa-muted); font-size: .8rem; }
.pf-org {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem;
}
.pf-org > div { display: grid; align-content: start; gap: .25rem; }
.pf-org span { color: var(--sa-muted); font-size: .78rem; font-weight: 600; }
.pf-org strong { font-size: 1rem; }
.pf-org small { color: var(--sa-muted); font-size: .78rem; }
.pf-mods { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .25rem; }
.pf-mods span {
    display: inline-flex; align-items: center; gap: .3rem;
    background: #eef6ef; color: #2f6b3a; border-radius: 8px;
    padding: .28rem .5rem; font-size: .75rem; font-weight: 600;
}
.pf-bar { height: 8px; background: #e6eee7; border-radius: 999px; overflow: hidden; margin-top: .4rem; }
.pf-bar i { display: block; height: 100%; background: var(--sa-green-700); border-radius: inherit; }
.pf-help { margin: 1.2rem 0 0; color: var(--sa-muted); font-size: .82rem; text-align: center; }
.pf-help a { color: var(--sa-green-800); }

/* —— Facturas plataforma —— */
.inv-range {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #fff; border: 1px solid var(--sa-line); border-radius: 10px;
    padding: .35rem .55rem;
}
.inv-range input[type=date] { border: 0; background: transparent; font: inherit; color: var(--sa-ink); }
.inv-search {
    display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem;
}
.inv-search input, .inv-search select, .cli-per select {
    flex: 1; border: 1px solid var(--sa-line); border-radius: 10px;
    padding: .5rem .75rem; font: inherit; background: #fff;
}
.inv-search select { flex: 0 1 11rem; }
.inv-toolbar { display: flex; align-items: center; gap: .45rem; margin-left: auto; }
.inv-toolbar .is-active, .btn-row.is-active {
    background: var(--sa-green-800); color: #fff; border-color: var(--sa-green-800);
}
.inv-pill {
    display: inline-block; border-radius: 999px; padding: .18rem .65rem;
    font-size: .75rem; font-weight: 600;
}
.inv-pill--pagada { background: #e8f8ef; color: #148f3a; }   /* verde vivo */
.inv-pill--emitida { background: #e8effe; color: #2563eb; }  /* azul */
.inv-pill--pend { background: #fff4e5; color: #d97706; }     /* ámbar */
.inv-pill--vencida { background: #fde8e8; color: #c62828; }  /* rojo */
.inv-pill--anulada { background: #f1f3f5; color: #6b7280; } /* gris */
.inv-ring { width: 36px; height: 36px; }
.inv-meta {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(200px, .9fr);
    gap: .75rem; background: #fff; border: 1px solid var(--sa-line);
    border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1rem;
    box-shadow: var(--sa-shadow-sm);
}
.inv-meta > div { display: grid; gap: .2rem; }
.inv-meta i { color: var(--sa-green-800); }
.inv-meta span { color: var(--sa-muted); font-size: .75rem; font-weight: 600; }
.inv-meta b { font-size: .92rem; }
.inv-meta__total {
    border-left: 1px solid #e8efe8; padding-left: 1rem;
}
.inv-meta__total strong { font-size: 1.45rem; display: block; }
.inv-meta__total small { color: var(--sa-muted); }
.inv-split { display: grid; grid-template-columns: 1.4fr .85fr; gap: 1rem; }
.inv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; }
.inv-card {
    background: #fff; border: 1px solid var(--sa-line); border-radius: 14px;
    padding: .9rem 1rem; box-shadow: var(--sa-shadow-sm);
}
.inv-card a { font-weight: 700; color: #2a6f97; text-decoration: none; }

/* —— Mi suscripción —— */
.sub-head-ico { color: #c9a227; margin-left: .35rem; }
.sub-top { display: grid; grid-template-columns: 1.45fr .7fr; gap: 1rem; margin-bottom: 1rem; }
.sub-plan { display: grid; grid-template-columns: .9fr 1.1fr; gap: 1.1rem; align-items: start; }
.sub-plan__id { display: flex; gap: .85rem; }
.sub-plan__mark {
    position: relative; width: 64px; height: 64px; flex: 0 0 auto;
    border-radius: 50%; background: #e7f5ea; color: var(--sa-green-800);
    display: grid; place-items: center; font-size: 1.45rem;
}
.sub-plan__crown {
    position: absolute; right: -2px; top: -4px; color: #c9a227; font-size: .85rem;
    background: #fff; border-radius: 50%; width: 1.15rem; height: 1.15rem;
    display: grid; place-items: center;
}
.sub-plan__id h2 { margin: 0 0 .35rem; font-size: 1.25rem; }
.sub-plan__id p { margin: .55rem 0 0; color: var(--sa-muted); font-size: .86rem; }
.sub-dl { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.sub-dl li { display: grid; grid-template-columns: 9.5rem 1fr; gap: .4rem; font-size: .88rem; align-items: center; }
.sub-dl span { color: var(--sa-muted); display: inline-flex; align-items: center; gap: .4rem; }
.sub-dl i { color: #8a9a8c; width: .95rem; }
.sub-pay {
    background: #fff8ea; border: 1px solid #ead7a0; border-radius: 16px;
    padding: 1.05rem 1.1rem; display: grid; align-content: start; gap: .45rem;
}
.sub-pay h3 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: .4rem; color: #8a6a2a; }
.sub-pay p { margin: 0; color: #6a5310; font-size: .84rem; }
.sub-pay strong { font-size: 1.55rem; }
.sub-pay .btn-mock { justify-content: center; }
.sub-pay a { color: var(--sa-green-800); font-weight: 600; font-size: .84rem; text-decoration: none; }
.sub-ok {
    background: #eef7ef; border: 1px solid #cfe3d1; border-radius: 16px;
    padding: 1.05rem 1.1rem; color: #24532c;
}
.sub-low { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: 1rem; }
.sub-low > * { min-width: 0; }
.sub-invoices {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.sub-invoices__table { min-width: 36rem; }
.sub-invoices__table th:last-child,
.sub-invoices__table td:last-child { text-align: right; white-space: nowrap; }
.sub-invoices__table th:nth-child(4),
.sub-invoices__table td:nth-child(4) { white-space: nowrap; }
.sub-use { display: grid; gap: .7rem; }
.sub-use li { list-style: none; }
.sub-use__row { display: flex; justify-content: space-between; font-size: .84rem; margin-bottom: .25rem; }
.sub-use__row span { color: var(--sa-muted); }
.sub-use__bar { height: 8px; background: #e6eee7; border-radius: 999px; overflow: hidden; }
.sub-use__bar i { display: block; height: 100%; background: var(--sa-green-700); }
.sub-help {
    margin-top: 1.15rem; background: #fff; border: 1px solid var(--sa-line);
    border-radius: 16px; padding: 1rem 1.15rem; display: flex;
    justify-content: space-between; align-items: center; gap: 1rem;
    box-shadow: var(--sa-shadow-sm);
}
.sub-help__id { display: flex; gap: .75rem; align-items: center; }
.sub-help__id span {
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    background: #e7f5ea; color: var(--sa-green-800); display: grid; place-items: center;
}
.sub-help__id h3 { margin: 0; font-size: 1rem; }
.sub-help__id p { margin: .15rem 0 0; color: var(--sa-muted); font-size: .82rem; }
.sub-help__acts { display: flex; flex-wrap: wrap; gap: .45rem; }
.ayuda-list { display: grid; gap: .85rem; }
.ayuda-list details {
    background: #fff; border: 1px solid var(--sa-line); border-radius: 12px; padding: .85rem 1rem;
}
.ayuda-list summary { font-weight: 700; cursor: pointer; }
.ayuda-list p { margin: .55rem 0 0; color: #4a5a4c; }

@media (max-width: 1100px) {
    .pf-grid, .sub-top, .sub-low, .inv-split, .pf-org, .sub-plan { grid-template-columns: 1fr; }
    .inv-meta { grid-template-columns: 1fr 1fr; }
    .inv-meta__total { border-left: 0; padding-left: 0; border-top: 1px solid #e8efe8; padding-top: .7rem; }
    .sub-help { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
    .pf-grid { grid-template-columns: 1fr; }
    .sub-invoices { overflow: visible; }
    .sub-invoices__table { min-width: 0; }
    .sub-invoices__table thead { display: none; }
    .sub-invoices__table tbody,
    .sub-invoices__table tr,
    .sub-invoices__table td { display: block; width: 100%; }
    .sub-invoices__table tr {
        background: #f8fbf8;
        border: 1px solid #e4eee6;
        border-radius: 12px;
        padding: .65rem .8rem;
        margin-bottom: .65rem;
    }
    .sub-invoices__table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        padding: .4rem 0;
        border-bottom: 1px dashed #e6eee7;
        text-align: right;
        white-space: normal;
    }
    .sub-invoices__table td:last-child { border-bottom: 0; text-align: right; }
    .sub-invoices__table td::before {
        content: attr(data-label);
        font-size: .75rem;
        font-weight: 600;
        color: var(--sa-muted);
        text-align: left;
        flex: 0 0 42%;
    }
    .sub-invoices__empty td { display: block; text-align: center; }
    .sub-invoices__empty td::before { display: none; }
}

/* —— Clientes plataforma —— */
.cli-filters { flex-wrap: wrap; }
.cli-org, .cli-cell { display: grid; gap: .15rem; }
.cli-org {
    display: flex; align-items: center; gap: .65rem; text-align: left;
}
.cli-org a { color: #2a6f97; font-weight: 700; text-decoration: none; }
.cli-org a:hover { text-decoration: underline; }
.cli-org small, .cli-cell small { color: var(--sa-muted); font-size: .78rem; display: block; }
.cli-cell b { font-weight: 600; }
.cli-av {
    width: 2.35rem; height: 2.35rem; border-radius: 50%;
    background: #e7f5ea; color: var(--sa-green-800);
    display: grid; place-items: center; font-weight: 700; font-size: .78rem;
    flex: 0 0 auto;
}
.cli-pager { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.cli-ellipsis { color: var(--sa-muted); padding: 0 .15rem; }
.cli-per { margin: 0; }
.cli-per select { flex: 0 0 auto; }
.cli-table td:last-child, .cli-table th:last-child { text-align: right; }
.cli-hero {
    background: #fff; border: 1px solid var(--sa-line); border-radius: 16px;
    padding: 1.15rem 1.25rem; display: flex; justify-content: space-between;
    align-items: flex-start; gap: 1rem; margin-bottom: 1rem;
    box-shadow: var(--sa-shadow-sm);
}
.cli-hero__id { display: flex; gap: 1rem; min-width: 0; }
.cli-hero__av {
    width: 72px; height: 72px; border-radius: 50%;
    background: #e7f5ea; color: var(--sa-green-800);
    display: grid; place-items: center; font-weight: 700; font-size: 1.35rem;
    flex: 0 0 auto;
}
.cli-hero h2 {
    margin: 0; font-size: 1.35rem; display: flex; align-items: center;
    gap: .55rem; flex-wrap: wrap;
}
.cli-hero__meta {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem 1.5rem; margin-top: .7rem;
}
.cli-hero__meta span { display: block; color: var(--sa-muted); font-size: .75rem; font-weight: 600; }
.cli-hero__meta b { font-size: .92rem; word-break: break-word; }
.cli-stats {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .85rem; margin-bottom: 1rem;
}
.cli-stat {
    background: #fff; border: 1px solid var(--sa-line); border-radius: 16px;
    padding: .95rem 1rem; box-shadow: var(--sa-shadow-sm); min-width: 0;
}
.cli-stat small { display: block; color: var(--sa-muted); font-size: .78rem; font-weight: 600; margin: .5rem 0 .2rem; }
.cli-stat strong { display: block; font-size: 1.12rem; }
.cli-stat strong a { color: inherit; text-decoration: none; }
.cli-stat strong a:hover { color: #2a6f97; }
.cli-stat em { display: block; font-style: normal; color: var(--sa-muted); font-size: .78rem; margin-top: .25rem; }
.cli-stat em.is-warn { color: #c27803; }
.cli-stat em.is-up { color: var(--sa-green-800); font-weight: 600; }
.cli-flag {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: .25rem; padding: .15rem .45rem; border-radius: 6px;
    font-size: .72rem; font-weight: 600; width: fit-content;
}
.cli-flag--alta { background: #fde8e8; color: #9b1c1c; }
.cli-flag--media { background: #fef3c7; color: #92400e; }
.cli-abuse { border-color: #f0d9a8; }
.cli-abuse__list { list-style: none; margin: 0; padding: 0 1rem 0.5rem; display: grid; gap: .45rem; }
.cli-abuse__list .cli-flag { width: 100%; padding: .55rem .75rem; }
.cli-abuse__policy { margin: 0 1rem 1rem; font-size: .82rem; color: var(--sa-muted); }
.cli-stat a { color: var(--sa-green-800); font-weight: 600; font-size: .82rem; text-decoration: none; }
.cli-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 1rem; align-items: start; }
.cli-col { display: grid; gap: 1rem; min-width: 0; }
.cli-kv {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 2rem;
}
.cli-kv span { display: block; color: var(--sa-muted); font-size: .78rem; margin-bottom: .15rem; }
.cli-kv b { font-size: .95rem; }
.cli-kv a { color: var(--sa-green-800); text-decoration: none; }
.cli-members { list-style: none; margin: 0; padding: 0; }
.cli-members li {
    display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto auto;
    gap: .65rem; align-items: center; padding: .7rem 0;
    border-bottom: 1px solid #f0f4f0;
}
.cli-members li:last-child { border-bottom: 0; }
.cli-members b { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .9rem; }
.cli-members small { color: var(--sa-muted); font-size: .78rem; }
.cli-phone { color: var(--sa-muted); font-size: .82rem; white-space: nowrap; }
.cli-note {
    background: #fbf6ea; border-radius: 12px; padding: .85rem 1rem; margin-bottom: .65rem;
}
.cli-note__top { display: flex; justify-content: space-between; gap: .75rem; color: var(--sa-muted); font-size: .78rem; }
.cli-note p { margin: .45rem 0 0; color: #3d4a3e; }
.cli-more {
    display: inline-block; margin-top: .75rem; color: var(--sa-green-800);
    font-weight: 600; font-size: .86rem; text-decoration: none;
}
.rbac-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: .35rem .75rem; margin-bottom: .5rem;
}

@media (max-width: 1200px) {
    .cli-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cli-hero__meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) {
    .cli-grid, .cli-kv { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .cli-stats { grid-template-columns: 1fr; }
    .cli-hero { flex-direction: column; }
    .cli-members li { grid-template-columns: 2.4rem 1fr auto; }
    .cli-phone { grid-column: 2; }
}

/* —— Pago factura (mockup) —— */
.pay-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1rem; align-items: start; }
.pay-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pay-meta li { display: grid; grid-template-columns: 1.2rem 7rem 1fr; gap: .5rem; align-items: center; }
.pay-meta i { color: var(--sa-green-800); }
.pay-meta span { color: var(--sa-muted); font-size: .82rem; }
.pay-box h2 { margin: 0 0 .35rem; font-size: 1.05rem; }
.pay-box > p { margin: 0; color: var(--sa-muted); }
.pay-box > strong { display: block; font-size: 1.85rem; margin: .35rem 0 .7rem; }
.pay-secure { display: inline-flex; align-items: center; gap: .4rem; color: #2f6b3a; font-size: .84rem; margin-bottom: .85rem; }
.pay-trust { display: flex; justify-content: space-between; gap: .4rem; margin-top: .9rem; color: var(--sa-muted); font-size: .75rem; }
.pay-payer { margin-top: .35rem; }
.pay-payer .btn-mock { margin-top: .35rem; }
.pay-locked {
    display: flex; align-items: flex-start; gap: .5rem; margin: .35rem 0 0;
    padding: .75rem .85rem; border-radius: 10px; background: #f4f7f4;
    border: 1px dashed #c9d8cb; color: #5a6b5c; font-size: .86rem;
}
.pay-locked i { margin-top: .15rem; color: var(--sa-green-800); }
.btn-mock--sm { padding: .3rem .65rem; font-size: .8rem; }
.pay-result { max-width: 520px; margin: 1.5rem auto; text-align: center; }
.pay-result h1 { margin: .8rem 0 .35rem; }
.pay-result__mark {
    width: 88px; height: 88px; border-radius: 50%; margin: 0 auto;
    background: var(--sa-green-800); color: #fff; display: grid; place-items: center; font-size: 2rem;
}
.pay-result__mark--bad { background: #b42318; }
.cfg-copy { display: flex; gap: .5rem; align-items: stretch; }
.cfg-copy input { flex: 1; }
.cfg-field--wide { grid-column: 1 / -1; }
.cfg-logo__preview { margin: .4rem 0 .8rem; }
.cfg-logo__preview img { max-height: 72px; max-width: 220px; object-fit: contain; background: #fff; padding: .35rem; border: 1px solid #d7eadb; border-radius: 8px; }
.doc-brand {
    display: flex; align-items: center; gap: .85rem; text-align: left;
    margin: 0 auto 1.1rem; max-width: 520px;
}
.doc-brand--logo {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: .35rem; margin-bottom: 1.25rem;
}
.doc-brand__logo { max-height: 64px; max-width: 180px; object-fit: contain; }
.doc-brand--logo .doc-brand__logo { max-height: 110px; max-width: 280px; }
.doc-brand strong { display: block; color: var(--sa-green-900); }
.doc-brand small { color: var(--sa-muted); font-size: .82rem; }
.doc-brand__lema { font-size: .85rem; color: var(--sa-muted); font-style: normal; }
.cfg-vis { width: 100%; }
.cfg-vis th, .cfg-vis td { vertical-align: middle; }
.cfg-vis input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--sa-green-800); }
@media print {
    .pay-result__acts, .no-print, .app-topbar, .app-side, .plat-bc, .banner-soporte {
        display: none !important; visibility: hidden !important;
    }
    .pay-comprobante, .dash-card { box-shadow: none !important; border-color: #ccc !important; }
    .doc-brand { max-width: 100%; margin-bottom: .8rem; }
    .doc-brand--logo .doc-brand__logo { max-height: 120px; max-width: 300px; }
    .pay-result h1 { font-size: 1.35rem; margin: .4rem 0 .2rem; }
}
.pay-result__sprout {
    position: relative; width: 110px; height: 110px; margin: 0 auto;
    border-radius: 50%; background: #e7f5ea; color: var(--sa-green-800);
    display: grid; place-items: center; font-size: 2.4rem;
}
.pay-result__mini {
    position: absolute; right: 10px; bottom: 10px; font-size: .85rem;
    background: var(--sa-green-800); color: #fff; width: 1.4rem; height: 1.4rem;
    border-radius: 50%; display: grid; place-items: center;
}
.pay-bar { height: 8px; background: #e6eee7; border-radius: 999px; overflow: hidden; margin: 1rem auto; max-width: 280px; }
.pay-bar i { display: block; width: 62%; height: 100%; background: var(--sa-green-700); }
.pay-receipt { text-align: left; margin: 1rem 0; }
.pay-result__acts { display: flex; justify-content: center; gap: .55rem; flex-wrap: wrap; }
@media (max-width: 900px) { .pay-grid { grid-template-columns: 1fr; } }

/* CMS landing pública (tema claro, acorde mockups) */
.cms-landing-body { background: #eef5ef; color: #1a2e22; font-size: 16px; font-family: Outfit, system-ui, sans-serif; }
.cms-site--boxed { background: #cfe0d2; }
.cms-site--boxed .cms-frame {
  width: min(1280px, 100%);
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
  box-shadow: 0 0 0 1px #d7eadb, 0 24px 70px rgba(35,92,55,.14);
}
.cms-ancho-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cms-ancho-opt { border: 2px solid #d7eadb; border-radius: 16px; padding: 1rem; cursor: pointer; background: #fff; display: block; }
.cms-ancho-opt.is-on, .cms-ancho-opt:has(input:checked) { border-color: var(--sa-green-700); background: #e8f6ea; }
.cms-ancho-opt strong { display: block; color: #163a24; margin-bottom: .2rem; }
.cms-ancho-opt small { display: block; color: #5a7562; }
.cms-ancho-preview { display: block; height: 78px; border-radius: 10px; background: #dce8de; margin-bottom: .75rem; position: relative; overflow: hidden; }
.cms-ancho-preview--full { background: linear-gradient(180deg, #fff 18%, #e8f6ea 18% 38%, #fff 38% 62%, #2f6b3a 62% 78%, #fff 78%); }
.cms-ancho-preview--boxed::before { content: ""; position: absolute; inset: 8px 20%; background: #fff; border-radius: 6px; box-shadow: 0 4px 12px rgba(35,92,55,.12); }
.cms-ancho-preview--boxed::after { content: ""; position: absolute; inset: 14px 24%; background: linear-gradient(180deg, #e8f6ea, #fff 40%, #2f6b3a 70%, #fff); border-radius: 4px; }
@media (max-width: 700px) { .cms-ancho-pick { grid-template-columns: 1fr; } }
.cms-seo { margin-top: .4rem; padding-top: .85rem; border-top: 1px dashed #d7eadb; }
.cms-seo__title { margin: 0 0 .2rem; font-weight: 700; color: #163a24; }
.cms-seo__hint { margin: 0 0 .85rem; color: #5a7562; font-size: .82rem; }
.cms-seo-panel { margin-top: .35rem; }
.cms-seo-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 1px solid #d7eadb;
    background: #f7fbf7;
    color: #163a24;
    border-radius: 12px;
    padding: .7rem .9rem;
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.cms-seo-toggle:hover { border-color: var(--sa-green-700); background: #eef8ef; }
.cms-seo-toggle.is-open { border-color: var(--sa-green-700); background: #e8f6ea; }
.cms-seo-toggle__left { display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.cms-seo-toggle__left i { color: var(--sa-green-800); }
.cms-seo-toggle__label { font-size: .82rem; font-weight: 600; color: var(--sa-green-800); white-space: nowrap; }
.cms-seo-badge {
    font-style: normal;
    font-size: .72rem;
    font-weight: 700;
    color: #1d5c2e;
    background: #d9f0de;
    border-radius: 999px;
    padding: .15rem .5rem;
}
.cms-seo-panel__body {
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px dashed #d7eadb;
}
.cms-wrap { width: min(1180px, calc(100% - 2.5rem)); margin: 0 auto; }
.cms-wrap--narrow { width: min(760px, calc(100% - 2.5rem)); }
.cms-wrap--article { width: min(820px, calc(100% - 2.5rem)); }
.cms-bleed { position: relative; background-color: #fff; background-image: var(--cms-bg, none); background-size: cover; background-position: center; }
.cms-bleed--boxed { width: min(1180px, calc(100% - 2.5rem)); margin: 1.25rem auto; border-radius: 24px; overflow: hidden; box-shadow: 0 18px 40px rgba(35,92,55,.08); }
.cms-bleed--full { width: 100%; }
.cms-bleed::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.cms-bleed > * { position: relative; z-index: 1; }
.cms-bleed--none::before { display: none; }
.cms-bleed--light::before { background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(247,251,247,.88) 42%, rgba(255,255,255,.28) 100%); }
.cms-bleed--mint::before { background: linear-gradient(180deg, rgba(232,246,234,.92), rgba(247,251,247,.95)); }
.cms-bleed--alt::before { background: linear-gradient(180deg, rgba(240,248,242,.96), rgba(232,242,234,.96)); }
.cms-bleed--green::before { background: linear-gradient(135deg, rgba(47,107,58,.92) 0%, rgba(61,125,73,.88) 55%, rgba(46,138,78,.84) 100%); }
.cms-bleed--dark::before { background: linear-gradient(90deg, rgba(22,58,36,.88) 0%, rgba(22,58,36,.55) 100%); }
.cms-nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.97); border-bottom: 1px solid #e6f2e6; box-shadow: 0 8px 24px rgba(35,92,55,.05); }
.cms-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.cms-nav__brand { text-decoration: none; flex-shrink: 0; }
.cms-nav__toggle { display: none; width: 42px; height: 42px; border: 1px solid #d7eadb; border-radius: 10px; background: #fff; color: #2f5f3f; }
.cms-nav__panel { display: flex; align-items: center; gap: 1.05rem; }
.cms-nav__panel a { color: #2f5f3f; text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; }
.cms-nav__panel a.is-active { color: var(--sa-green-800); box-shadow: inset 0 -2px 0 var(--sa-green-700); padding-bottom: .15rem; }
.cms-nav__login { border: 1px solid var(--sa-green-700); border-radius: 999px; padding: .4rem 1rem !important; }
.cms-nav__cta { border-radius: 999px !important; padding: .45rem 1.05rem !important; font-weight: 600; }
.cms-hero-band { min-height: 560px; display: flex; align-items: center; }
.cms-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; padding: 4.5rem 0 5rem; align-items: center; }
.cms-hero__badge { display: inline-block; background: #e8f6ea; color: var(--sa-green-800); border-radius: 999px; padding: .4rem 1rem; font-size: 13px; font-weight: 600; margin-bottom: 1.15rem; }
.cms-hero__line { display: block; font-size: clamp(2.35rem, 4.6vw, 3.35rem); line-height: 1.08; font-weight: 800; color: #163a24; letter-spacing: -.03em; }
.cms-hero__line em { font-style: normal; }
.cms-hero__line--green em { color: var(--sa-green-700); }
.cms-hero__line--brown em { color: #8b6b3f; }
.cms-hero__line--ink em { color: #2e6b41; }
.cms-hero__lead { margin: 1.25rem 0 1.75rem; color: #4f6f58; max-width: 36rem; font-size: 18px; line-height: 1.6; }
.cms-hero__cta { display: flex; gap: .85rem; flex-wrap: wrap; }
.cms-hero__cta .btn-lg { border-radius: 999px; padding: .85rem 1.6rem; font-weight: 600; font-size: 16px; }
.cms-hero__trust { display: flex; gap: 1.35rem; flex-wrap: wrap; list-style: none; padding: 1.4rem 0 0; margin: 0; color: #5a7a64; font-size: 14px; }
.cms-hero__trust i { color: var(--sa-green-700); margin-right: .35rem; }
.cms-hero__media img, .cms-hero__media iframe { width: 100%; border-radius: 22px; min-height: 340px; height: 380px; border: 0; box-shadow: 0 22px 48px rgba(35,92,55,.16); object-fit: cover; }
.cms-hero__media--placeholder { background: linear-gradient(160deg, #dff3e3, #f7fbf7); border-radius: 22px; min-height: 340px; display: grid; place-items: center; box-shadow: 0 22px 48px rgba(35,92,55,.1); }
.cms-hero__devices { display: flex; gap: 1rem; align-items: flex-end; color: var(--sa-green-700); }
.cms-hero__device { background: #fff; border-radius: 18px; box-shadow: 0 14px 30px rgba(35,92,55,.12); display: grid; place-items: center; }
.cms-hero__device--desk { width: 210px; height: 150px; font-size: 3.2rem; }
.cms-hero__device--phone { width: 78px; height: 150px; font-size: 2.2rem; border-radius: 22px; }
.cms-section { padding: 4.25rem 0; }
.cms-section--center { text-align: center; }
.cms-section--center .cms-section__lead { margin-left: auto; margin-right: auto; }
.cms-section--alt, .cms-bleed--alt { background-color: #f0f8f2; }
.cms-section--mint, .cms-bleed--mint { background-color: #eef8f0; }
.cms-section h2, .cms-page-hero h1 { margin: 0 0 .55rem; font-size: clamp(1.85rem, 3.2vw, 2.35rem); font-weight: 800; color: #163a24; letter-spacing: -.02em; }
.cms-section__lead { color: #4b6f5a; margin-bottom: 2.25rem; max-width: 680px; font-size: 17px; line-height: 1.55; }
.cms-section__head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-end; margin-bottom: 1.5rem; text-align: left; }
.cms-section__head .cms-section__lead { margin-bottom: 0; }
.cms-grid { display: grid; gap: 1.25rem; }
.cms-grid--features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cms-card { background: #fff; border: 1px solid #e6f2e6; border-radius: 18px; padding: 1.6rem 1.15rem 1.4rem; box-shadow: 0 12px 28px rgba(35,92,55,.06); text-align: center; }
.cms-card__icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 16px; background: #e8f6ea; color: var(--sa-green-700); display: grid; place-items: center; font-size: 1.7rem; }
.cms-card h3 { font-size: 17px; font-weight: 700; margin-bottom: .45rem; color: #163a24; }
.cms-card p { font-size: 14px; color: #5a7562; margin: 0; line-height: 1.5; }
.cms-stats { color: #fff; padding: 2.4rem 0; }
.cms-stats__inner { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; text-align: center; }
.cms-stats i { font-size: 1.7rem; margin-bottom: .45rem; display: block; }
.cms-stats strong { display: block; font-size: 1.55rem; font-weight: 800; }
.cms-stats span { font-size: 13px; opacity: .92; }
.cms-how { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 0; }
.cms-how li { background: #fff; border: 1px solid #e6f2e6; border-radius: 18px; padding: 1.35rem 1rem 1.2rem; position: relative; }
.cms-how__n { position: absolute; top: .7rem; left: .8rem; width: 28px; height: 28px; border-radius: 50%; background: var(--sa-green-700); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.cms-how__icon { font-size: 1.8rem; color: var(--sa-green-700); display: block; margin: .4rem 0 .7rem; }
.cms-how h3 { font-size: 16px; margin: 0 0 .35rem; color: #163a24; }
.cms-how p { margin: 0; font-size: 13px; color: #5a7562; line-height: 1.45; }
.cms-about__text { text-align: left; color: #4f6f58; line-height: 1.7; font-size: 16px; }
.cms-values { list-style: none; padding: 1.2rem 0 0; margin: 0; display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.cms-values li { background: #fff; border: 1px solid #e6f2e6; border-radius: 999px; padding: .5rem 1rem; font-weight: 600; color: var(--sa-green-800); font-size: 14px; }
.cms-values i { margin-right: .35rem; }
.cms-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; text-align: left; }
.cms-benefits article { background: #fff; padding: 1.5rem 1.3rem; border-radius: 18px; border: 1px solid #e6f2e6; box-shadow: 0 12px 28px rgba(35,92,55,.05); }
.cms-benefits .cms-card__icon { margin: 0 0 1rem; }
.cms-benefits h3 { font-size: 18px; font-weight: 700; color: #163a24; margin-bottom: .4rem; }
.cms-benefits p { color: #5a7562; margin: 0; font-size: 15px; }
.cms-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.15rem; text-align: left; }
.cms-plan { background: #fff; color: #1a2e22; border-radius: 18px; padding: 1.5rem 1.25rem; border: 1px solid #e6f2e6; box-shadow: 0 12px 28px rgba(35,92,55,.06); display: flex; flex-direction: column; gap: .7rem; }
.cms-plan h3 { font-size: 18px; font-weight: 700; margin: 0; color: #163a24; }
.cms-plan__price { margin: 0; font-size: 15px; color: #5a7562; }
.cms-plan__price strong { font-size: 1.55rem; color: var(--sa-green-800); }
.cms-plan__desc { font-size: 14px; color: #5a7562; flex: 1; margin: 0; }
.cms-plan .btn { border-radius: 999px; align-self: flex-start; font-weight: 600; }
.cms-testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; text-align: left; }
.cms-quote { background: #fff; border: 1px solid #e6f2e6; border-radius: 18px; padding: 1.2rem; margin: 0; box-shadow: 0 12px 28px rgba(35,92,55,.05); }
.cms-quote__photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; margin-bottom: .5rem; }
.cms-ad-banner { padding: 3.25rem 0; color: #fff; }
.cms-ad-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.cms-ad-banner__copy { display: flex; gap: 1.25rem; align-items: center; }
.cms-ad-banner__photo { width: 120px; height: 120px; object-fit: cover; border-radius: 18px; box-shadow: 0 12px 24px rgba(0,0,0,.18); }
.cms-ad-banner h2 { margin: 0 0 .5rem; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: #fff; }
.cms-ad-banner p { margin: 0 0 .85rem; color: #eaffe9; font-size: 16px; }
.cms-ad-banner__checks { list-style: none; padding: 0; margin: 0; }
.cms-ad-banner__checks li { margin-bottom: .35rem; font-size: 15px; }
.cms-ad-banner__checks i { margin-right: .4rem; }
.cms-ad-banner__cta { display: flex; gap: .75rem; flex-wrap: wrap; }
.cms-ad-banner__cta .btn { border-radius: 999px; font-weight: 600; }
.cms-values-bar { background: #fff; border-top: 1px solid #e6f2e6; padding: 2.1rem 0; }
.cms-values-bar__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.15rem; }
.cms-values-bar article { display: flex; gap: .85rem; align-items: flex-start; }
.cms-values-bar i { font-size: 1.65rem; color: var(--sa-green-700); margin-top: .1rem; }
.cms-values-bar strong { display: block; font-size: 15px; color: #163a24; }
.cms-values-bar span { font-size: 13px; color: #5a7562; }
.cms-pub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.cms-pub-grid--list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cms-pub-card { background: #fff; border: 1px solid #e6f2e6; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 28px rgba(35,92,55,.06); display: flex; flex-direction: column; text-align: left; }
.cms-pub-card__media { display: block; height: 160px; background: #e8f6ea; }
.cms-pub-card__media img { width: 100%; height: 160px; object-fit: cover; }
.cms-pub-card__ph { display: grid; place-items: center; height: 160px; color: var(--sa-green-700); font-size: 1.8rem; }
.cms-pub-card__body { padding: 1.1rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.cms-pub-card__tag { text-transform: uppercase; font-size: 11px; letter-spacing: .06em; color: var(--sa-green-800); font-weight: 700; }
.cms-pub-card h3 { font-size: 17px; margin: 0; }
.cms-pub-card h3 a { color: #163a24; text-decoration: none; }
.cms-pub-card p { margin: 0; color: #5a7562; font-size: 14px; }
.cms-pub-card__meta { font-size: 13px; color: #6b8572; display: flex; gap: .7rem; flex-wrap: wrap; }
.cms-pub-card__more { color: var(--sa-green-800); font-weight: 600; text-decoration: none; font-size: 14px; margin-top: auto; }
.cms-empty { grid-column: 1 / -1; background: #fff; border: 1px dashed #cfe5d2; border-radius: 16px; padding: 1.2rem; color: #5a7562; }
.cms-page-hero { padding: 2.6rem 0 1.6rem; }
.cms-page-hero__kicker { font-size: 13px; color: #6b8572; margin-bottom: .45rem; }
.cms-page-hero__kicker a { color: var(--sa-green-800); text-decoration: none; font-weight: 600; }
.cms-page__cover { width: 100%; max-height: 360px; object-fit: cover; border-radius: 18px; margin-bottom: 1.25rem; }
.cms-footer { padding: 2rem 0; text-align: center; border-top: 1px solid #e6f2e6; background: #f7fbf7; color: #4f6f58; }
.cms-footer__links { display: flex; justify-content: center; gap: 1.1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.cms-footer__links a { color: var(--sa-green-800); text-decoration: none; font-weight: 500; }
.cms-footer p { margin: 0; font-size: 14px; }
.cms-quill-wrap { margin-bottom: .5rem; }
.cms-quill-wrap .ql-editor { min-height: 180px; }
.cms-diff-table { overflow-x: auto; font-size: .85rem; }
.cms-diff-table table.diff { width: 100%; border-collapse: collapse; }
.cms-diff-table .diff_add { background: #d4edda; }
.cms-diff-table .diff_chg { background: #fff3cd; }
.cms-diff-table .diff_sub { background: #f8d7da; }
@media (max-width: 1100px) {
  .cms-grid--features, .cms-how, .cms-pub-grid, .cms-pub-grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cms-stats__inner, .cms-values-bar__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cms-hero { grid-template-columns: 1fr; padding: 2.4rem 0 2.8rem; gap: 1.6rem; }
  .cms-hero-band { min-height: 0; }
  .cms-nav__toggle { display: inline-grid; place-items: center; }
  .cms-nav__panel { display: none; position: absolute; top: 72px; left: 0; right: 0; background: #fff; border-bottom: 1px solid #e6f2e6; flex-direction: column; align-items: stretch; padding: .75rem 1.25rem 1rem; gap: .35rem; box-shadow: 0 16px 30px rgba(35,92,55,.08); }
  .cms-nav__panel.is-open { display: flex; }
  .cms-nav__panel a { padding: .7rem .35rem; border-bottom: 1px solid #f0f6f1; }
  .cms-nav__panel a.is-active { box-shadow: none; color: var(--sa-green-800); font-weight: 700; }
  .cms-nav__login, .cms-nav__cta { text-align: center; margin-top: .25rem; }
  .cms-benefits, .cms-how, .cms-grid--features, .cms-pub-grid, .cms-values-bar__inner { grid-template-columns: 1fr; }
  .cms-ad-banner__inner, .cms-ad-banner__copy, .cms-section__head { flex-direction: column; align-items: flex-start; }
}
/* Plantillas de mensajes (config) */
.tpl-layout { display: grid; grid-template-columns: 280px 1fr; gap: 1.25rem; align-items: start; }
.tpl-vars { background: #fff; border: 1px solid var(--sa-line); border-radius: 14px; padding: 1rem; position: sticky; top: 1rem; }
.tpl-var-list { list-style: none; padding: 0; margin: 0; max-height: 420px; overflow: auto; }
.tpl-var-list li { margin-bottom: .65rem; }
.tpl-var-btn { width: 100%; text-align: left; border: 1px dashed #cfe5d2; background: #f7fbf7; border-radius: 8px; padding: .35rem .5rem; cursor: pointer; }
.tpl-var-btn.is-copied { border-color: var(--sa-green-700); background: #e8f6ea; }
.tpl-var-list small { display: block; color: #6b8572; margin-top: .15rem; font-size: .78rem; }
.tpl-canales { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tpl-canal-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 999px; border: 1px solid #dcefe0; background: #fff; color: #2f5f3f; text-decoration: none; font-size: .88rem; }
.tpl-canal-tab.is-active { background: var(--sa-green-800); color: #fff; border-color: var(--sa-green-800); }
.tpl-dot { width: 8px; height: 8px; border-radius: 50%; background: #ccc; display: inline-block; }
.tpl-dot.ok { background: #52ed6e; }
.tpl-preview { background: #f7fbf7; border: 1px solid #e6f2e6; border-radius: 10px; padding: .75rem; font-size: .88rem; max-height: 240px; overflow: auto; }
.tpl-preview-html div { border-top: 1px solid #e6f2e6; margin-top: .5rem; padding-top: .5rem; }
@media (max-width: 900px) { .tpl-layout { grid-template-columns: 1fr; } .tpl-vars { position: static; } }
.cms-page { max-width: 800px; margin: 2rem auto; padding: 0 1rem; color: #1a2e22; }
.cms-page__head a { color: var(--sa-green-800); text-decoration: none; font-weight: 600; }
.cms-page__head h1 { margin: .75rem 0 1.25rem; font-size: clamp(1.6rem, 3vw, 2.1rem); color: #163a24; }
.cms-page__body { line-height: 1.65; background: #fff; border: 1px solid #e6f2e6; border-radius: 16px; padding: 1.5rem 1.4rem; box-shadow: 0 10px 26px rgba(35,92,55,.05); }
.cms-page__body h2 { margin: 1.4rem 0 .55rem; font-size: 1.15rem; color: #163a24; }
.cms-page__body p, .cms-page__body li { color: #3f5f4a; }
.cms-page__body ul, .cms-page__body ol { padding-left: 1.2rem; margin-bottom: 1rem; }
.cms-page__body em { color: #5a7562; }
.cms-list-item { padding: 1rem 0; border-bottom: 1px solid var(--sa-line); }
.cms-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.cms-media-item img { width: 100%; height: 100px; object-fit: cover; border-radius: 8px; background: #eee; }
.cms-media-item figcaption { font-size: .78rem; margin-top: .35rem; word-break: break-word; }
.cms-media-item figcaption strong { display: block; }
.cms-media-item figcaption small { display: block; color: #6b8572; margin-bottom: .35rem; }
.cms-media-item__file { display: grid; place-items: center; height: 100px; background: #e8f6ea; border-radius: 8px; color: var(--sa-green-700); font-size: 1.8rem; }
.mock-form .cms-pick__preview,
.mock-field img,
.mock-form img {
  width: 96px;
  height: 96px;
  max-width: 96px;
  object-fit: cover;
  margin-top: .5rem;
  display: block;
  border-radius: 8px;
  background: #eef5ef;
}
.cms-quill-wrap .ql-editor img {
  width: 96px;
  max-width: 96px;
  height: auto;
  border-radius: 8px;
}
.cms-media-modal { position: fixed; inset: 0; z-index: 80; background: rgba(16, 36, 22, .45); display: grid; place-items: center; padding: 1rem; }
.cms-media-modal[hidden] { display: none !important; }
.cms-media-modal__box { background: #fff; border-radius: 16px; width: min(860px, 100%); max-height: 86vh; overflow: auto; padding: 1rem 1.1rem 1.2rem; box-shadow: 0 24px 60px rgba(16,36,22,.2); }
.cms-media-modal__head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.cms-media-modal__head h3 { margin: 0; font-size: 1.1rem; color: #163a24; }
.cms-media-modal__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .7rem; }
.cms-media-modal__item { border: 1px solid #e6f2e6; border-radius: 12px; background: #fff; padding: .4rem; text-align: left; cursor: pointer; }
.cms-media-modal__item:hover { border-color: var(--sa-green-700); }
.cms-media-modal__item img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; display: block; background: #eef5ef; }
.cms-media-modal__item i { display: grid; place-items: center; height: 90px; color: var(--sa-green-700); font-size: 1.6rem; }
.cms-media-modal__item span { display: block; font-size: .72rem; margin-top: .3rem; color: #3f5f4a; word-break: break-word; }