/* =========================================
   IMPORTAR FUENTE MODERNA
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* =========================================
   VARIABLES DE COLOR (Tu Paleta Personalizada)
   ========================================= */
:root {
    /* Modo Claro */
    --bg-main: #F4F7F9;       
    --bg-card: #FFFFFF;       
    --text-main: #2C3E50;     
    --accent-primary: #009788; /* Teal principal */
    --accent-secondary: #26A69A; /* Teal secundario */
    --shadow-subtle: 0 4px 12px rgba(0,0,0,0.05);
    --sidebar-bg: #FFFFFF;
    --sidebar-border: #E1E8ED;
}

/* =========================================
   ESTILOS BASE (MODO CLARO)
   ========================================= */
body {
    font-family: 'Poppins', sans-serif !important;
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    background-image: none !important; 
}

/* HEADER PRINCIPAL */
#header {
    background: var(--accent-primary) !important;
    color: white !important;
    padding: 20px 30px !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(0, 151, 136, 0.3) !important;
}

#header a:link, #header a:visited, #branding h1 {
    color: white !important;
    font-weight: 600 !important;
    font-size: 1.2rem !important;
}

div.breadcrumbs {
    background: var(--bg-main) !important;
    padding: 15px 30px !important;
    border-bottom: 1px solid #E1E8ED !important;
    color: #5F7D95 !important;
}

/* =========================================
   SIDEBAR NAVIGATION (EL MENÚ LATERAL REDISEÑADO)
   ========================================= */
#nav-sidebar {
    background: var(--sidebar-bg) !important;
    border-right: 1px solid var(--sidebar-border) !important;
    padding: 20px !important;
    box-shadow: var(--shadow-subtle);
}

/* Buscador del sidebar */
#nav-sidebar .module.search {
    background: transparent !important;
    border: none !important;
    padding: 0 0 20px 0 !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid var(--sidebar-border) !important;
}

#nav-sidebar #searchbar {
    width: 100%;
    padding: 12px 15px !important;
    border-radius: 8px !important;
    border: 1px solid var(--sidebar-border) !important;
    background: var(--bg-main) !important;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
}
#nav-sidebar #searchbar:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 151, 136, 0.2);
}

/* Títulos de las Apps en el sidebar */
#nav-sidebar .module caption,
#nav-sidebar .app-label {
    background: transparent !important;
    color: var(--accent-primary) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem !important;
    padding: 10px 5px !important;
    margin-top: 15px !important;
}

/* Filas del menú (Modelos) como "Píldoras" */
#nav-sidebar table { border-spacing: 0 5px !important; }

#nav-sidebar tr {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 8px;
    transition: all 0.2s ease;
}
#nav-sidebar tr:hover {
    background: rgba(38, 166, 154, 0.1) !important; /* Color secundario muy suave al pasar el mouse */
    transform: translateX(5px);
}

/* Enlaces de los modelos */
#nav-sidebar th {
    padding: 10px !important;
    font-weight: 500 !important;
}
#nav-sidebar th a:link, #nav-sidebar th a:visited {
    color: var(--text-main) !important;
}
#nav-sidebar tr:hover th a {
    color: var(--accent-primary) !important;
}

/* BOTONES DE "AGREGAR" (+ Add) */
#nav-sidebar td.addlink {
    text-align: right;
    padding: 8px !important;
}

#nav-sidebar td.addlink a.addlink {
    background: var(--accent-secondary) !important;
    color: white !important;
    padding: 6px 12px !important;
    border-radius: 20px !important; /* Forma de pastilla */
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

/* Inyectar icono de "+" con CSS */
#nav-sidebar td.addlink a.addlink::before {
    content: '+';
    margin-right: 5px;
    font-size: 1.1rem;
    line-height: 0.8;
}

#nav-sidebar td.addlink a.addlink:hover {
    background: var(--accent-primary) !important;
    box-shadow: 0 4px 8px rgba(0, 151, 136, 0.3);
    transform: translateY(-1px);
}


/* =========================================
   CONTENIDO PRINCIPAL Y TARJETAS
   ========================================= */
/* El envoltorio derecho (mapa + acciones) */
.right-column-wrapper .map-dashboard-wrapper,
.right-column-wrapper .module {
    background: var(--bg-card) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-subtle) !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    padding: 25px !important;
    margin-bottom: 30px !important;
}

/* Títulos del área principal */
.right-column-wrapper h2, 
.right-column-wrapper h3,
.right-column-wrapper .module caption {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--accent-primary) !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    border: none !important;
}

ul.actionlist, ul.actionlist li {
    background: transparent !important;
    border: none !important;
    padding-left: 0 !important;
}

/* =========================================
   ENLACES Y BOTONES (Área Principal)
   ========================================= */
a:link, a:visited {
    color: var(--accent-secondary);
    text-decoration: none;
    font-weight: 500;
}
a:hover { color: var(--accent-primary); }

/* Botones principales */
.button, input[type=submit], input[type=button], .submit-row input {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;       
    line-height: normal !important; 
    box-sizing: border-box !important;
    
    background: var(--accent-secondary) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 25px !important;
    color: white !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(38, 166, 154, 0.2);
    cursor: pointer !important;
}

.button:hover, input[type=submit]:hover, input[type=button]:hover {
    background: var(--accent-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(0, 151, 136, 0.4);
}

.submit-row input.deletelink { background: #E74C3C !important; color: white !important; }


/* =========================================
   MODO OSCURO (Tu paleta Neón #64feda)
   ========================================= */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-main: #0F111A; 
        --bg-card: #1A1D2E; 
        --text-main: #E2E8F0;
        --accent-neon: #64feda; /* Tu color neón */
        --sidebar-bg: #141726;
        --sidebar-border: #2D3748;
    }

    body { background-color: var(--bg-main) !important; color: var(--text-main) !important;}

    #header {
        background: #141726 !important;
        border-bottom: 2px solid var(--accent-neon) !important;
    }

    div.breadcrumbs { background: transparent !important; border-bottom: 1px solid #2D3748 !important; }

    /* SIDEBAR OSCURO */
    #nav-sidebar {
        background: var(--sidebar-bg) !important;
        border-right: 1px solid var(--sidebar-border) !important;
    }
    #nav-sidebar #searchbar {
        background: var(--bg-main) !important;
        border-color: var(--sidebar-border) !important;
        color: var(--accent-neon) !important;
    }
    #nav-sidebar #searchbar:focus {
        border-color: var(--accent-neon) !important;
        box-shadow: 0 0 0 3px rgba(100, 254, 218, 0.2) !important;
    }

    #nav-sidebar .module caption,
    #nav-sidebar .app-label,
    #nav-sidebar tr:hover th a {
        color: var(--accent-neon) !important;
    }

    #nav-sidebar th a:link, #nav-sidebar th a:visited { color: var(--text-main) !important; }

    #nav-sidebar tr:hover {
        background: rgba(100, 254, 218, 0.1) !important; /* Glow neón suave al pasar el mouse */
    }

    /* Botones de Agregar Neón */
    #nav-sidebar td.addlink a.addlink {
        background: transparent !important;
        border: 1px solid var(--accent-neon) !important;
        color: var(--accent-neon) !important;
        box-shadow: 0 0 5px rgba(100, 254, 218, 0.1);
    }
    #nav-sidebar td.addlink a.addlink:hover {
        background: var(--accent-neon) !important;
        color: #0F111A !important;
        box-shadow: 0 0 15px rgba(100, 254, 218, 0.4);
    }


    /* CONTENIDO PRINCIPAL OSCURO */
    .right-column-wrapper .map-dashboard-wrapper,
    .right-column-wrapper .module,
    .object-tools, 
    tbody tr {
        background: var(--bg-card) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
        border: 1px solid rgba(100, 254, 218, 0.1) !important;
    }

    /* Títulos neón */
    h1, h2, h3, a:link, a:visited,
    .module caption, 
    .right-column-wrapper h2,
    .right-column-wrapper h3 {
        color: var(--accent-neon) !important;
        background: transparent !important;
    }

    /* Botones principales Neón (Outline) */
    .button, input[type=submit], input[type=button], .submit-row input {
        background: transparent !important;
        border: 2px solid var(--accent-neon) !important;
        color: var(--accent-neon) !important;
        box-shadow: 0 0 10px rgba(100, 254, 218, 0.1);
    }

    .button:hover, input[type=submit]:hover, input[type=button]:hover {
        background: var(--accent-neon) !important;
        color: #0F111A !important; 
        box-shadow: 0 0 20px rgba(100, 254, 218, 0.4);
    }

    input[type=text], input[type=password], textarea, select {
        background-color: #0F111A !important;
        border: 1px solid #2D3748 !important;
        color: var(--accent-neon) !important;
    }
}