/* ==========================================================================
   0. DESIGN SYSTEM, TOKENS, BASE & RESET
   ========================================================================== */

:root {
    /* Paleta de colores más natural y cohesiva */
    --cafe: #7A6450;
    --cafe-claro: #958272;
    --cafe-oscuro: #5D4A3A;
    
    /* Verde más natural y menos saturado */
    --verde: #2D8A6E;
    --verde-claro: #4CA688;
    --verde-oscuro: #1E6B56;
    
    /* Azul más suave y equilibrado */
    --azul: #3B82C4;
    --azul-claro: #60A5FA;
    --azul-oscuro: #2563EB;

    /* Fondos más claros y menos opacos */
    --bg: #0C1110;
    --bg-alt: #121716;
    --surface: rgba(15, 20, 25, 0.35);
    --text: #FFFFFF;
    --text-muted: #E2E8F0;
    
    /* Glass effects más sutiles y naturales */
    --glass-bg: rgba(20, 25, 30, 0.18);
    --glass-bg-strong: rgba(20, 25, 30, 0.25);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-border-hover: rgba(45, 138, 110, 0.25);
    --glass-highlight: rgba(255, 255, 255, 0.08);
    --glass-blur: 16px;
    --glass-blur-strong: 20px;
    --glass-saturate: 100%;
    
    /* Colores de acción más suaves */
    --primary: #2D8A6E;
    --primary-glow: rgba(45, 138, 110, 0.12);
    --success: #16A34A;
    --success-glow: rgba(22, 163, 74, 0.12);
    --warning: #D97706;
    --danger: #DC2626;
    --info: #0284C7;
    
    /* Inputs más legibles */
    --input-bg: rgba(255, 255, 255, 0.05);
    --input-border: rgba(255, 255, 255, 0.12);
    --kanban-bg: rgba(20, 25, 30, 0.32);
    
    /* Sombras más sutiles */
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.18);
    --shadow-glass: 0 6px 24px 0 rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --modal-backdrop: rgba(8, 10, 12, 0.50);
    --nav-bg: rgba(12, 16, 20, 0.32);
    
    --radius: 8px;
    --radius-sm: 6px;
    --radius-lg: 12px;
    
    /* Gradientes más sutiles */
    --bg-gradient-1: rgba(45, 138, 110, 0.04);
    --bg-gradient-2: rgba(59, 130, 196, 0.03);
    --bg-overlay: linear-gradient(135deg, rgba(12, 16, 15, 0.08) 0%, rgba(8, 12, 10, 0.15) 100%);

    /* Tokens de infraestructura (deployments, db, hosting) */
    --infra-spacing-xs: 4px;
    --infra-spacing-sm: 8px;
    --infra-spacing-md: 16px;
    --infra-spacing-lg: 24px;
    --infra-font-size-xs: 0.7rem;
    --infra-font-size-sm: 0.8rem;
    --infra-font-size-base: 0.9rem;
    --infra-radius-sm: 6px;
    --infra-radius-md: 10px;
    --infra-transition-fast: all 0.15s ease;
    --infra-transition-base: all 0.25s ease;
    --infra-transition-slow: all 0.4s ease;

    /* Fondo de pista para barras de progreso (cambia con el tema) */
    --track-bg: rgba(255, 255, 255, 0.07);

    /* Tokens de estado (indicadores y badges de infraestructura) - más naturales */
    --status-available: #16A34A;
    --status-available-bg: rgba(22, 163, 74, 0.10);
    --status-available-border: rgba(22, 163, 74, 0.25);
    --status-locked: #DC2626;
    --status-locked-bg: rgba(220, 38, 38, 0.10);
    --status-locked-border: rgba(220, 38, 38, 0.25);
    --status-maintenance: #D97706;
    --status-maintenance-bg: rgba(217, 119, 6, 0.10);
    --status-maintenance-border: rgba(217, 119, 6, 0.25);
    --status-error: #DC2626;
    --status-error-bg: rgba(220, 38, 38, 0.10);
    --status-error-border: rgba(220, 38, 38, 0.25);
}

/* Modo claro con mejor cohesión visual */
[data-theme="light"] {
    --bg: #F1F5F9;
    --bg-alt: #FFFFFF;
    --surface: rgba(255, 255, 255, 0.65);
    --text: #1E293B;
    --text-muted: #475569;
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-bg-strong: rgba(255, 255, 255, 0.70);
    --glass-border: rgba(15, 23, 42, 0.08);
    --bg-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(241, 245, 249, 0.60) 100%);
    --primary: #2D8A6E;
    --primary-glow: rgba(45, 138, 110, 0.15);
    --input-bg: rgba(255, 255, 255, 0.80);
    --input-border: rgba(15, 23, 42, 0.12);
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-glass: 0 6px 24px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.60);
    --modal-backdrop: rgba(15, 23, 42, 0.40);
    --nav-bg: rgba(255, 255, 255, 0.55);
}


*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    min-width: 320px;
}

body {
    font-family: 'Inter', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--bg);
    background-image:
        var(--bg-overlay),
        url("../../fondo.jpeg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text);
    min-height: 100vh;
    transition: background 0.35s ease, color 0.35s ease;
    line-height: 1.6;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.015;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

::selection {
    background: var(--primary);
    color: #fff;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text); }

a { color: var(--primary); text-decoration: none; transition: opacity 0.2s; }
a:hover { opacity: 0.8; }

hr { border-color: var(--glass-border); opacity: 0.5; }

img, svg { max-width: 100%; vertical-align: middle; }

/* ==========================================================================
   TIPOGRAFÍA Y COHESIÓN VISUAL DE LETRAS (HIERARCHY & KERNING)
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.modal-title,
.fw-bold {
    font-family: 'Outfit', 'Inter', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.025em;
    line-height: 1.25;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.50);
}

h1, .h1 { font-size: clamp(1.85rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.035em; }
h2, .h2 { font-size: clamp(1.5rem, 2.5vw, 1.9rem); font-weight: 700; letter-spacing: -0.028em; }
h3, .h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 700; letter-spacing: -0.022em; }
h4, .h4 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.018em; }
h5, .h5 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; }
h6, .h6 { font-size: 0.925rem; font-weight: 600; letter-spacing: -0.01em; }

p, .text-muted, .text-secondary, label, .form-label, .small, small, .db-stat-label {
    font-family: 'Inter', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    letter-spacing: -0.005em;
    color: var(--text-muted) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.50);
}

.text-light, .text-white {
    color: #FFFFFF !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.60);
}

.btn,
.badge,
label,
.form-label,
th,
.db-stat-label,
.small,
small {
    font-family: 'Inter', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
    letter-spacing: 0.015em;
}

.badge,
th,
.text-uppercase,
.db-stat-label {
    letter-spacing: 0.045em;
    font-weight: 600;
    text-transform: uppercase;
}

.btn {
    font-weight: 600;
    letter-spacing: 0.01em;
}

code, pre, .font-monospace, .db-url, .deployment-url {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace !important;
    font-size: 0.9em;
    letter-spacing: 0;
}

#main-app {
    min-height: 100vh;
}

main.container-fluid {
    width: min(100%, 1480px);
    margin-inline: auto;
    padding-bottom: 2rem;
}

button,
input,
select,
textarea {
    font: inherit;
}

.text-secondary,
.text-muted {
    color: var(--text-muted) !important;
}

.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-info { color: var(--info) !important; }

/* Botones más naturales y menos saturados */
.btn-primary {
    background: linear-gradient(135deg, #2D8A6E 0%, #1E6B56 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #F8FAFC !important;
    box-shadow: 0 3px 10px rgba(45, 138, 110, 0.15) !important;
    text-shadow: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #4CA688 0%, #2D8A6E 100%) !important;
    box-shadow: 0 4px 14px rgba(45, 138, 110, 0.22) !important;
    transform: translateY(-2px);
}

.badge.bg-secondary {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #F8FAFC !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Cohesión de color de texto y tipografía en modo claro */
[data-theme="light"] .text-light,
[data-theme="light"] .text-white {
    color: var(--text) !important;
    text-shadow: none !important;
}
[data-theme="light"] .text-muted,
[data-theme="light"] .text-secondary {
    color: var(--text-muted) !important;
    text-shadow: none !important;
}
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .fw-bold,
[data-theme="light"] .modal-title {
    text-shadow: none !important;
}
[data-theme="light"] p,
[data-theme="light"] .small,
[data-theme="light"] small {
    text-shadow: none !important;
}
[data-theme="light"] .badge.bg-secondary {
    background-color: rgba(71, 85, 105, 0.15) !important;
    color: #000000 !important;
}
[data-theme="light"] .border-secondary,
[data-theme="light"] .border-light {
    border-color: rgba(15, 23, 42, 0.15) !important;
}
[data-theme="light"] .btn-outline-light {
    color: var(--text);
    border-color: var(--glass-border);
}
[data-theme="light"] .kanban-col h6,
[data-theme="light"] .kanban-card-header,
[data-theme="light"] .modal-title,
[data-theme="light"] .card-title {
    color: var(--text) !important;
    text-shadow: none;
}
[data-theme="light"] .nav-tabs .nav-link,
[data-theme="light"] .nav-pills .nav-link {
    color: var(--text) !important;
}
[data-theme="light"] .sidebar .nav-link {
    color: var(--text) !important;
    text-shadow: none;
}
[data-theme="light"] .sidebar .nav-header {
    color: var(--primary) !important;
    text-shadow: none;
}
[data-theme="light"] .sidebar .nav-link i {
    color: var(--primary);
}
[data-theme="light"] .sidebar .nav-link.active,
[data-theme="light"] .sidebar .nav-link.active i {
    color: #FFFFFF !important;
}

/* Opacidades de fondo Bootstrap complementarias (bg-opacity-20) */
.bg-opacity-20 { --bs-bg-opacity: 0.20; }

/* Cohesión modo claro: superficies oscuras fijas de Bootstrap → claras */
[data-theme="light"] .bg-dark,
[data-theme="light"] .bg-black {
    background-color: rgba(71, 85, 105, 0.15) !important;
    color: var(--text) !important;
}
[data-theme="light"] .badge.bg-dark,
[data-theme="light"] .badge.bg-black {
    background-color: rgba(71, 85, 105, 0.15) !important;
    color: var(--text) !important;
    border: 1px solid rgba(15, 23, 42, 0.15);
}
[data-theme="light"] .sidebar .nav-link:hover {
    color: var(--text) !important;
}

.table-dark {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-hover-bg: var(--primary-glow);
    --bs-table-hover-color: var(--text);
    color: var(--text);
}

.table-responsive {
    border-radius: var(--radius-sm);
}

.hidden { display: none; }

/* ==========================================================================
   SISTEMA UNIVERSAL DE GLASSMORPHISM (FROSTED GLASS)
   Aplica estética de vidrio esmerilado en todo el CSS sin alterar layout ni funcionalidad
   ========================================================================== */

/* NIVEL 1: Contenedores, columnas y paneles de fondo del módulo */
.card,
.glass-card,
.deployment-overview,
.deployment-group,
.kanban-col,
.table-responsive,
.modal-content,
.dropdown-menu {
    background: rgba(10, 15, 20, 0.20) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* NIVEL 2: Tarjetas internas interactivas dentro de los módulos */
.kanban-card,
.account-card,
.service-card,
.info-card,
.kpi-card,
.deployment-card,
.list-group-item:not(.active),
.glass-card .glass-card,
.card .card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* MODO CLARO - JERARQUÍA EN 2 NIVELES */
[data-theme="light"] .card,
[data-theme="light"] .glass-card,
[data-theme="light"] .deployment-overview,
[data-theme="light"] .deployment-group,
[data-theme="light"] .kanban-col,
[data-theme="light"] .table-responsive,
[data-theme="light"] .modal-content,
[data-theme="light"] .dropdown-menu {
    background: rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .kanban-card,
[data-theme="light"] .account-card,
[data-theme="light"] .service-card,
[data-theme="light"] .info-card,
[data-theme="light"] .kpi-card,
[data-theme="light"] .deployment-card,
[data-theme="light"] .list-group-item:not(.active),
[data-theme="light"] .glass-card .glass-card,
[data-theme="light"] .card .card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.58) 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}

.sidebar {
    background: var(--nav-bg);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    backdrop-filter: blur(28px) saturate(200%);
    border-right: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass);
}

.mobile-topbar {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    color: var(--text);
}

.table tr, .table th, .table td {
    background: transparent !important;
    border-color: var(--glass-border);
    color: var(--text);
}

.table tbody tr:hover {
    background: var(--glass-highlight) !important;
}

.btn-outline-secondary,
.btn-outline-primary,
.badge {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Resplandor y nitidez en navegación y tarjetas Kanban */
.kanban-col h6,
.kanban-card-header,
.modal-title,
.card-title {
    color: #FFFFFF !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.60);
    font-weight: 700;
}

/* Las tarjetas internas usan la jerarquía cristalina de NIVEL 2 (arriba):
   gradiente translúcido + borde superior iluminado, coherente en todo el sistema. */

.nav-tabs .nav-link,
.nav-pills .nav-link {
    color: #E2E8F0 !important;
    font-weight: 600;
}
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    color: #F8FAFC !important;
    background: linear-gradient(135deg, #2D8A6E 0%, #1E6B56 100%) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 3px 10px rgba(45, 138, 110, 0.18);
}

/* ==========================================================================
   BLOSS DECORATIVOS DE FONDO (index.html) y SUPERFICIE DE VIDRIO GENÉRICA
   ========================================================================== */
.bg-blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.35;
    pointer-events: none;
    z-index: -1;
}
.blob-1 { width: 520px; height: 520px; top: -160px; right: -140px; background: radial-gradient(circle, rgba(45, 138, 110, 0.20) 0%, transparent 70%); }
.blob-2 { width: 480px; height: 480px; bottom: -160px; left: -140px; background: radial-gradient(circle, rgba(59, 130, 196, 0.16) 0%, transparent 70%); }
.blob-3 { width: 400px; height: 400px; top: 35%; left: -180px; background: radial-gradient(circle, rgba(122, 100, 80, 0.14) 0%, transparent 70%); }
.blob-4 { width: 440px; height: 440px; bottom: -120px; right: 8%; background: radial-gradient(circle, rgba(45, 138, 110, 0.12) 0%, transparent 70%); }

.bg-glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
}