/* Paleta de colores base */
:root {
    --bg-main: #121222;
    --bg-element: #1E1E2F;
    --primary-color: #0A2463;
    --accent-color: #3E92CC;
    --text-main: #E0E0E0; 
    --text-secondary: #A0A0B0;
    --border-color: #3A3A4A;
    --sidebar-bg: #171727;
    --sidebar-link-color: var(--text-secondary);
    --sidebar-link-hover-color: var(--text-main);
    --sidebar-link-active-color: var(--accent-color);
    --sidebar-link-active-bg: var(--primary-color);

    --facebook-color: #1877F2;
    --instagram-color: #E4405F;
    --whatsapp-color: #25D366;
    --email-color: #EA4335; 
}

/* --- Estilos Globales y Resets --- */
html, body { height: 100%; margin: 0; padding: 0; overflow-x: hidden; }
body {
    background-color: var(--bg-main); color: var(--text-main);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex; flex-direction: column; 
}

/* --- Login Page Specific --- */
body.login-page-body { }
.login-wrapper { display: flex; flex-grow: 1; width: 100%; overflow: hidden; }
.login-form-section {
    background-color: var(--bg-element); padding: 2rem; display: flex; 
    flex-direction: column; justify-content: center; align-items: center; 
    width: 100%; overflow-y: auto; position: relative; z-index: 1; 
}
.login-image-section {
    background-image: url('../img/login-background.jpg'); background-size: cover;
    background-position: center center; background-repeat: no-repeat;
    width: 0; display: none; 
}
@media (min-width: 992px) { .login-form-section, .login-image-section { width: 50%; display: flex; } }
.login-form-container { width: 100%; max-width: 420px; }
.login-form-container .card {
    background-color: var(--bg-element); border: 1px solid var(--border-color);
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.4); border-radius: 0.5rem; 
}
.login-form-container .card-header {
    background-color: transparent; border-bottom: 1px solid var(--border-color);
    padding-top: 1.5rem; padding-bottom: 1rem; text-align: center;
}
.login-form-container .card-header h3 { color: var(--accent-color); font-weight: bold; margin-top: 0.5rem; }
.login-form-container .card-header img { max-height: 55px; margin-bottom: 0.5rem; }
.login-form-container .card-body { padding: 1.5rem 2rem; }
.login-social-icons {
    text-align: center; margin-top: 1.5rem; padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}
.login-social-icons p { color: var(--text-secondary); margin-bottom: 1rem; font-size: 0.9em; }
.login-social-icons a {
    color: var(--text-secondary); font-size: 1.5rem; margin: 0 0.75rem;
    transition: color 0.2s ease, transform 0.2s ease; 
}
.login-social-icons a:hover { transform: translateY(-2px); }
.login-social-icons a:hover.facebook { color: var(--facebook-color); }
.login-social-icons a:hover.instagram { color: var(--instagram-color); }
.login-social-icons a:hover.whatsapp { color: var(--whatsapp-color); }
.login-social-icons a:hover.email { color: var(--email-color); }
.login-footer {
    text-align: center; margin-top: 2rem; padding-bottom: 1rem; 
    font-size: 0.85em; color: var(--text-secondary);
}
/* --- Fin Login Page Specific --- */

/* --- Estilos Generales del Sistema --- */
.card { 
    background-color: var(--bg-element); border: 1px solid var(--border-color);
    color: var(--text-main); margin-bottom: 1.5rem; 
}
.card-header { 
    background-color: var(--primary-color); color: var(--text-main) !important;
    border-bottom: 1px solid var(--border-color); padding: 0.75rem 1.25rem;
}
.card-header h6 { color: var(--text-main) !important; }
.card-body { color: var(--text-main); }
.card-body p, .card-body small, .card-body label { color: var(--text-secondary); } 
.card-body strong, .card-body .h5, .card-body .h6 { color: var(--text-main); } 
.form-control, .form-select {
    background-color: #2a2a3a; color: var(--text-main);
    border: 1px solid var(--border-color); border-radius: 0.25rem; 
}
.input-group-text { 
    background-color: #2a2a3a !important; border: 1px solid var(--border-color) !important;
    border-right: none !important; color: var(--text-secondary);
}
.input-group .form-control { border-left: none; }
.form-control:focus, .form-select:focus {
    background-color: #3a3a4a; color: #FFFFFF; border-color: var(--accent-color);
    box-shadow: 0 0 0 0.25rem rgba(62, 146, 204, 0.25);
}
.form-control::placeholder { color: var(--text-secondary); }
.form-label { margin-bottom: 0.5rem; color: var(--text-secondary); } 
.form-check-input:checked { background-color: var(--accent-color); border-color: var(--accent-color); }
.form-check-label{ color: var(--text-secondary); }
.btn-primary {
    background-color: var(--primary-color); border-color: var(--primary-color); color: #FFFFFF;
    padding: 0.6rem 1rem; font-size: 1rem; font-weight: 500;
    border-radius: 0.25rem; transition: background-color 0.2s ease, border-color 0.2s ease;
}
.btn-primary:hover, .btn-primary:focus { background-color: var(--accent-color); border-color: var(--accent-color); color: #FFFFFF; }
.alert { border-radius: 0.25rem; padding: 0.75rem 1.25rem; }
.alert-danger { background-color: rgba(220, 53, 69, 0.2); color: #f8d7da; border: 1px solid rgba(220, 53, 69, 0.5); }
.alert-success { background-color: rgba(40, 167, 69, 0.2); color: #d4edda; border: 1px solid rgba(40, 167, 69, 0.5); }

/* --- Layout con Sidebar --- */
#wrapper { display: flex; flex-grow: 1; position: relative; overflow-x: hidden; }
#sidebar-wrapper {
    min-height: 100vh; width: 250px; background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color); display: flex; flex-direction: column;
    position: fixed; left: -250px; top: 0; bottom: 0; z-index: 1030; 
    transition: left 0.3s ease-in-out;
}
#sidebar-wrapper.toggled { left: 0; }
#page-content-wrapper {
    flex: 1; min-width: 0; padding: 0; display: flex; flex-direction: column;
    margin-left: 0; transition: margin-left 0.3s ease-in-out; width: 100%;
}
@media (min-width: 992px) { 
    #sidebar-wrapper { left: 0; }
    #sidebar-wrapper.toggled { left: -250px; }
    #page-content-wrapper { margin-left: 250px; }
    #sidebar-wrapper.toggled + #page-content-wrapper { margin-left: 0; }
}
.sidebar-heading {
    padding: 0.5rem 1.25rem; border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem; text-align: center; 
}
.sidebar-heading a { color: var(--text-main); text-decoration: none; display: block; }
.sidebar-heading img { max-height: 50px; margin-top: 5px; margin-bottom: 5px; }
.list-group-item {
    background-color: transparent; border: none; color: var(--sidebar-link-color);
    padding: 0.75rem 1.25rem; border-left: 3px solid transparent;
}
.list-group-item-action:hover, .list-group-item-action:focus {
    background-color: rgba(255, 255, 255, 0.05); color: var(--sidebar-link-hover-color); text-decoration: none;
}
.list-group-item.active {
    background-color: var(--sidebar-link-active-bg); color: var(--sidebar-link-active-color);
    border-left-color: var(--accent-color); font-weight: bold;
}
.list-group-item i { margin-right: 0.75rem; width: 20px; text-align: center; }
.sidebar-admin-title {
    padding: 0.5rem 1.25rem; font-size: 0.9rem; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: .05em; margin-top: 1rem;
}
.navbar-page { 
    background-color: var(--bg-element); border-bottom: 1px solid var(--border-color);
    color: var(--text-main); padding: 0.5rem 1rem; position: sticky; top: 0; z-index: 1020; 
}
.navbar-page .nav-link, .navbar-page .btn { color: var(--text-main); }
.navbar-page .nav-link:hover, .navbar-page .btn:hover { color: var(--accent-color); }
.navbar-page .dropdown-menu { background-color: var(--bg-element); border: 1px solid var(--border-color); }
.navbar-page .dropdown-item { color: var(--text-main); }
.navbar-page .dropdown-item:hover, .navbar-page .dropdown-item:focus { background-color: var(--primary-color); color: var(--text-main); }
.navbar-page .dropdown-divider { border-top: 1px solid var(--border-color); }
.main-content-padding { padding: 1.5rem; flex-grow: 1; overflow-y: auto; }
.footer-custom {
    background-color: var(--bg-element); color: var(--text-secondary);
    padding: 1rem 0; font-size: 0.9em; border-top: 1px solid var(--border-color);
}
.footer-custom a { color: var(--text-main); text-decoration: none; }
.footer-custom a:hover { color: var(--accent-color); }

/* --- DataTables Customization --- */
.dataTables_wrapper { color: var(--text-secondary); }
table.dataTable { border-collapse: collapse !important; width: 100% !important; }
table.dataTable thead th, 
table.dataTable thead.table-dark th {
    background-color: var(--primary-color) !important; color: var(--text-main) !important;
    border-bottom: 2px solid var(--accent-color) !important; padding: 0.75rem !important;
}
table.dataTable tbody tr { background-color: transparent; }
table.dataTable tbody tr:hover { background-color: rgba(62, 146, 204, 0.1) !important; } /* --accent-color con opacidad */

/* ---- INICIO CAMBIO IMPORTANTE PARA COLOR DE TEXTO EN CELDAS ---- */
table.dataTable tbody td {
    color: #000000 !important; /* TEXTO DE CELDA CAMBIADO A NEGRO */
    border: 1px solid var(--border-color) !important;
    padding: 0.75rem !important; 
    vertical-align: middle;
}
/* ---- FIN CAMBIO IMPORTANTE ---- */

table.dataTable tbody td .badge { color: #fff !important; }
table.dataTable tbody td .badge.bg-success { background-color: #28a745 !important; }
table.dataTable tbody td .badge.bg-danger { background-color: #dc3545 !important; }
table.dataTable tbody td .badge.bg-warning { background-color: #ffc107 !important; color: #212529 !important; }
table.dataTable tbody td .badge.bg-info { background-color: var(--accent-color) !important; }
table.dataTable th { color: var(--text-main); } /* Color de texto para TH si se usa en tbody o tfoot */

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-main) !important; background: var(--bg-element) !important;
    border: 1px solid var(--border-color) !important; margin: 0 2px !important;
    padding: 0.4em 0.8em !important; border-radius: 0.2rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #fff !important; background: var(--primary-color) !important;
    border-color: var(--accent-color) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important; background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--text-secondary) !important; background: var(--bg-element) !important;
    border-color: var(--border-color) !important; opacity: 0.5;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--text-secondary) !important; padding-top: 0.75em !important;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input[type="search"] {
    color: var(--text-main) !important; background-color: #2a2a3a !important; 
    border: 1px solid var(--border-color) !important; padding: 0.375rem 0.75rem !important;
    margin-left: 0.5em !important; border-radius: 0.25rem !important;
    display: inline-block; width: auto; 
}
.dataTables_wrapper .dataTables_filter input[type="search"] { min-width: 200px; }