/* public_html/style.css - Versión Maestra v9 (Completa y Optimizada) */

/* =========================================
   1. VARIABLES Y TEMAS DE COLOR
   ========================================= */
:root {
    /* Colores Base */
    --primary-dark-blue: #0A192F;       /* Sidebar, Headers, Textos Oscuros */
    --primary-accent-blue: #007BFF;     /* Botones Principales */
    --primary-accent-blue-hover: #0056b3;
    --secondary-accent-blue: #5A9BEF;   /* Botones Secundarios */
    
    /* Colores de Estado */
    --background-light-grey: #F0F2F5;
    --text-dark: #333333;
    --text-light: #FFFFFF;
    --border-grey: #DDDDDD;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 80px;
}

/* --- TEMAS PERSONALIZADOS (Con Sidebar Vibrante) --- */
body.theme-negro { 
    --primary-dark-blue: #1a1a1a; 
    --primary-accent-blue: #333333; 
    --primary-accent-blue-hover: #555555; 
    --secondary-accent-blue: #666666; 
}
body.theme-verde_militar { 
    --primary-dark-blue: #3A4A30; 
    --primary-accent-blue: #556B2F; 
    --primary-accent-blue-hover: #38471F; 
    --secondary-accent-blue: #8FBC8F; 
}
body.theme-ocre { 
    --primary-dark-blue: #5C4033; 
    --primary-accent-blue: #B8860B; 
    --primary-accent-blue-hover: #8B6508; 
    --secondary-accent-blue: #DAA520; 
}
body.theme-vino_tinto { 
    --primary-dark-blue: #580e22; 
    --primary-accent-blue: #800020; 
    --primary-accent-blue-hover: #520015; 
    --secondary-accent-blue: #A52A2A; 
}
body.theme-morado { 
    --primary-dark-blue: #2E004F; 
    --primary-accent-blue: #663399; 
    --primary-accent-blue-hover: #4B0082; 
    --secondary-accent-blue: #9370DB; 
}
body.theme-fucsia { 
    --primary-dark-blue: #590032; 
    --primary-accent-blue: #C71585; 
    --primary-accent-blue-hover: #8B0A50; 
    --secondary-accent-blue: #FF69B4; 
}
body.theme-cafe { 
    --primary-dark-blue: #4E342E; 
    --primary-accent-blue: #795548; 
    --primary-accent-blue-hover: #5D4037; 
    --secondary-accent-blue: #A1887F; 
}
body.theme-hoja_seca { 
    --primary-dark-blue: #6D4C41; 
    --primary-accent-blue: #A0522D; 
    --primary-accent-blue-hover: #8B4513; 
    --secondary-accent-blue: #CD853F; 
}
body.theme-bronce { 
    --primary-dark-blue: #483C32; 
    --primary-accent-blue: #CD7F32; 
    --primary-accent-blue-hover: #8C5621; 
    --secondary-accent-blue: #D2691E; 
}


/* =========================================
   2. ESTILOS BASE Y LAYOUT
   ========================================= */
body {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    margin: 0; padding: 0;
    background-color: var(--background-light-grey);
    color: var(--text-dark);
    display: flex; min-height: 100vh; flex-direction: column;
    transition: padding-left 0.3s ease-in-out;
}
.main-wrapper { display: flex; flex: 1; width: 100%; }

/* Sidebar */
.sidebar { 
    background-color: var(--primary-dark-blue); 
    color: var(--text-light); 
    width: var(--sidebar-width); 
    box-shadow: 2px 0 5px rgba(0,0,0,0.1); 
    flex-shrink: 0; display: flex; flex-direction: column; 
    padding: 0; transition: width 0.3s ease-in-out; 
    white-space: nowrap; overflow-x: hidden; 
}
.sidebar .logo { padding: 20px 15px; text-align: center; background-color: rgba(0,0,0,0.2); }
.sidebar .logo .app-logo { max-width: 180px; height: auto; display: block; margin: 0 auto; transition: opacity 0.3s; }
.sidebar .user-info { padding: 15px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); text-align: center; }
.sidebar .user-info .welcome-text { display: flex; flex-direction: column; gap: 2px; }
.sidebar .user-info span { font-size: 0.9em; opacity: 0.8; }
.sidebar .user-info strong { font-size: 1.1em; font-weight: 600; }
.sidebar h3 { color: rgba(255, 255, 255, 0.7); margin: 0; padding: 25px 20px 10px 20px; font-size: 0.8em; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; }
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar ul:last-of-type { margin-bottom: auto; }
.sidebar ul li a { display: flex; align-items: center; gap: 15px; padding: 14px 25px; color: rgba(255, 255, 255, 0.9); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; border-left: 4px solid transparent; font-size: 1em; }
.sidebar ul li a i { font-size: 1.2em; min-width: 25px; text-align: center; }
.sidebar ul li a:hover { background-color: rgba(0, 0, 0, 0.2); color: #FFFFFF; border-left: 4px solid var(--secondary-accent-blue); }
.sidebar ul li a.active { background-color: rgba(0, 0, 0, 0.3); color: #FFFFFF; font-weight: bold; border-left: 4px solid var(--secondary-accent-blue); }
.sidebar .logout-button-bottom { display: flex; align-items: center; justify-content: center; gap: 15px; width: 100%; padding: 12px; text-align: center; text-decoration: none; color: var(--text-light); background-color: rgba(0, 0, 0, 0.3); border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.1); font-weight: bold; box-sizing: border-box; transition: background-color 0.2s ease, border-color 0.2s ease; }
.sidebar .logout-button-bottom:hover { background-color: var(--danger-color); border-color: var(--danger-color); }

/* Sidebar Colapsado */
body.sidebar-collapsed .sidebar { width: var(--sidebar-width-collapsed); }
body.sidebar-collapsed .sidebar .sidebar-text, body.sidebar-collapsed .sidebar h3 { opacity: 0; visibility: hidden; width: 0; transition: opacity 0.2s; }
body.sidebar-collapsed .sidebar .logo .app-logo { opacity: 0; }
body.sidebar-collapsed .sidebar ul li a { justify-content: center; }
body.sidebar-collapsed .sidebar .user-info { padding: 15px 0; }

/* Contenido Principal */
.content { flex-grow: 1; padding: 30px; width: calc(100% - var(--sidebar-width)); box-sizing: border-box; transition: width 0.3s ease-in-out, margin-left 0.3s ease-in-out; }
body.sidebar-collapsed .content { width: calc(100% - var(--sidebar-width-collapsed)); }
.content h1, .content h2 { color: var(--primary-dark-blue); margin-bottom: 25px; }

.footer { text-align: center; padding: 20px; margin-top: auto; color: #555; font-size: 0.9em; background-color: #fff; border-top: 1px solid var(--border-grey); }
.menu-toggle-button { background-color: var(--primary-dark-blue); color: white; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px; width: 40px; height: 40px; font-size: 1.2em; cursor: pointer; margin-bottom: 20px; }


/* =========================================
   3. BOTONES TEMATIZADOS
   ========================================= */
.button, .add-button, .edit-button, .delete-button, .submit-button, .search-button, .btn, 
.filters-search button { 
    display: inline-block; padding: 10px 18px; text-decoration: none; border-radius: 5px; 
    font-weight: bold; transition: background-color 0.3s ease, opacity 0.2s ease; 
    border: none; cursor: pointer; font-size: 0.95em; text-align: center; white-space: nowrap; 
    color: #fff; 
}
.button:hover, .btn:hover { opacity: 0.85; }

/* 1. Botones Principales */
.button, .add-button, .submit-button, .search-button, .btn-primary, 
.filters-search button { 
    background-color: var(--primary-accent-blue) !important; 
    color: white !important;
}
.button:hover, .add-button:hover, .submit-button:hover, .search-button:hover, .btn-primary:hover, 
.filters-search button:hover { 
    background-color: var(--primary-accent-blue-hover) !important; 
}

/* 2. Botones Secundarios */
.edit-button, .btn-votar { 
    background-color: var(--secondary-accent-blue) !important; 
    color: white !important;
}
.edit-button:hover, .btn-votar:hover { filter: brightness(0.9); }

/* 3. Botones Peligrosos */
.delete-button, .btn-danger, .btn-votado-no { 
    background-color: var(--primary-dark-blue) !important; 
    color: white !important;
    opacity: 0.9;
}
.delete-button:hover, .btn-danger:hover { opacity: 1; filter: brightness(1.2); }

/* Otros Botones */
.btn-success, .btn-votado-diad { background-color: var(--success-color); color: white; }
.btn-secondary { background-color: #6c757d; color: white; }
.btn-votado-user { background-color: var(--warning-color); color: black; }
.whatsapp-btn { background-color: #25D366; color: white; }


/* =========================================
   4. FORMULARIOS Y GRIDS
   ========================================= */
.form-container { background-color: #f9f9f9; padding: 20px; border-radius: 8px; border: 1px solid #e0e0e0; margin-bottom: 30px; }
.form-group { display: flex; flex-direction: column; margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: var(--primary-dark-blue); }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; border: 1px solid var(--border-grey); border-radius: 4px; box-sizing: border-box; font-size: 1em; background-color: white; }
.form-group input[readonly] { background-color: #e9ecef; cursor: not-allowed; }
.required-label::after { content: ' *'; color: red; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .form-group { grid-column: span 1; }
.form-grid .full-width { grid-column: span 2; }

.visual-layout-grid, .capture-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; align-items: end; }
.visual-layout-grid .form-group, .capture-grid .form-group { margin-bottom: 0; }
.visual-layout-grid .span-6 { grid-column: span 6; }
.visual-layout-grid .span-4 { grid-column: span 4; }
.visual-layout-grid .span-2 { grid-column: span 2; }
.search-grid { display: grid; grid-template-columns: 3fr 1fr; gap: 15px; align-items: end; }
.busqueda-externa-grid { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: flex-end; }

.form-step { display: none; }
.form-step.active { display: block; }
#casillas-container, #coordinadores-container, #movilizador-container, #municipio-container { display: none; }
.form-grid select[multiple] { height: 200px; }


/* =========================================
   5. TABLAS Y PAGINACIÓN
   ========================================= */
.list-header, .top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; }
.filters-search, .search-form { display: flex; gap: 10px; }

table { width: 100%; border-collapse: collapse; margin-top: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); background-color: #fff; }
th, td { border: 1px solid var(--border-grey); padding: 12px; text-align: left; vertical-align: middle; }
th { background-color: var(--primary-dark-blue); color: var(--text-light); font-weight: bold; }
tr:nth-child(even) { background-color: #f8f9fa; }
td a { color: var(--primary-accent-blue); text-decoration: none; font-weight: bold; }
td a:hover { text-decoration: underline; }
.actions { white-space: nowrap; }
.actions a { margin: 0 2px; }

/* Iconos de Estado */
td .fa-check-circle { color: var(--success-color); }
td .fa-times-circle { color: var(--danger-color); }

/* Paginación Tematizada */
.pagination { display: flex; justify-content: center; padding: 20px 0; list-style: none; margin: 20px 0 0 0; clear: both; }
.pagination li a { 
    color: var(--primary-dark-blue) !important; 
    padding: 8px 16px; 
    text-decoration: none; 
    border: 1px solid var(--border-grey); 
    margin: 0 4px; 
    border-radius: 4px; 
    transition: all 0.3s; 
    display: block; 
    background-color: white;
}
.pagination li a.active { 
    background-color: var(--primary-accent-blue) !important; 
    color: white !important; 
    border-color: var(--primary-accent-blue) !important; 
}
.pagination li a:hover:not(.active) { 
    background-color: var(--secondary-accent-blue); 
    color: white !important;
}
.pagination li.disabled a { color: #ccc !important; cursor: not-allowed; background-color: #f9f9f9; border-color: #eee; }


/* =========================================
   6. MENSAJES Y UTILIDADES
   ========================================= */
.message-box { padding: 15px; border-radius: 5px; margin-bottom: 20px; text-align: center; font-weight: bold; display: block; }
.success-message { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.error-message { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.no-data, .empty-list-message { text-align: center; padding: 20px; color: #777; background-color: #fff; border-radius: 8px; margin-top: 20px; }


/* =========================================
   7. MÓDULOS ESPECÍFICOS
   ========================================= */
/* --- Dashboard --- */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 30px; }
.stat-card { background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); text-align: center; transition: transform 0.2s ease; }
.stat-card:hover { transform: translateY(-5px); }
.stat-card i { font-size: 2.5em; color: var(--primary-accent-blue); margin-bottom: 15px; opacity: 0.9; }
.stat-card h3 { margin: 0; font-size: 1em; color: #666; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-card .number { font-size: 2.5em; font-weight: bold; color: var(--primary-dark-blue); margin-top: 5px; }

.charts-grid-secondary { display: grid; grid-template-columns: 3fr 7fr; gap: 20px; margin-top: 30px; }
.chart-container, .stats-table-container { background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-top: 30px; }
.stats-table-container { overflow-x: auto; }
.stats-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
.stats-table th, .stats-table td { border: 1px solid var(--border-grey); padding: 10px; text-align: center; font-size: 0.9em; }
.stats-table thead th { background-color: var(--primary-dark-blue); color: white; border-color: var(--primary-dark-blue); }
.stats-table .total-votos-cell { background-color: var(--danger-color); color: white; font-weight: bold; }

.column-filter-container { margin-bottom: 20px; padding: 15px; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 5px; }
.filter-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 10px; }
.filter-checkbox-grid label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.9em; color: var(--text-dark); }
.filter-checkbox-grid input[type="checkbox"] { accent-color: var(--primary-accent-blue); width: 16px; height: 16px; cursor: pointer; }

/* --- Call Center --- */
.callcenter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; }
.call-card { background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.call-card[data-status="diad"], .call-card[data-status="callcenter"] { background: #f0fff0; border-left: 5px solid var(--success-color); }
/* Tarjeta NO VOTO usa color del tema */
.call-card[data-status="ninguno"], .call-card[data-status="user"] { background: #fff; border-left: 5px solid var(--primary-accent-blue); }

.card-header { padding: 15px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.card-body { padding: 15px; }
.card-body .telefono { font-size: 1.2em; font-weight: bold; color: var(--primary-accent-blue); }
.card-body .ultimo-log { font-size: 0.9em; color: #555; background: #f9f9f9; padding: 10px; border-radius: 4px; margin-top: 10px; }

.card-actions { padding: 15px; background: #fdfdfd; border-top: 1px solid #eee; }
.card-actions textarea { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px; }
.card-actions .btn-group { display: flex; gap: 10px; }
.btn-log { flex: 1; background-color: var(--primary-dark-blue); color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer; font-weight: bold; }
.btn-log:hover { opacity: 0.9; }
.btn-vote { flex: 1; background-color: var(--success-color); color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer; font-weight: bold; }
.btn-vote:hover { background-color: #218838; }

.status-badge { padding: 5px 10px; border-radius: 15px; color: white; font-weight: bold; font-size: 0.9em; }
.status-badge.votaron { background: var(--success-color); }
.status-badge.no-votaron { background: var(--primary-accent-blue); } /* Usa color del tema */

.filters { background: #fff; padding: 15px; border-radius: 8px; margin-bottom: 20px; display: flex; gap: 20px; align-items: center; }
.filters input { min-width: 300px; padding: 10px; border: 1px solid var(--border-grey); border-radius: 4px; }

.coordinador-section { margin-bottom: 30px; }
.coordinador-section h2 { border-bottom: 2px solid var(--primary-dark-blue); padding-bottom: 10px; margin-bottom: 20px; color: var(--primary-dark-blue); }

/* --- Tareas y Otros --- */
.tarea-pendiente-item { background-color: #fff; border: 1px solid #ddd; border-left: 5px solid var(--primary-accent-blue); border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); padding: 20px; }
.tarea-pendiente-item h3 { margin-top: 0; margin-bottom: 10px; font-size: 1.3em; color: #333; }
.tarea-pendiente-item .link-tarea { color: var(--primary-accent-blue); text-decoration: none; font-weight: bold; word-break: break-all; }
.tarea-pendiente-item .link-tarea:hover { text-decoration: underline; }
.form-completar { margin-top: 20px; padding-top: 15px; border-top: 1px dashed #ccc; }
.completado-info { font-size: 0.9em; }

/* --- Reporte Día D --- */
.simpatizante-card { width: 100%; border-collapse: collapse; margin-bottom: 20px; border: 2px solid #343a40; background-color: #fff; font-size: 0.9em; }
.simpatizante-card td { border: 1px solid #ccc; padding: 8px 12px; }
.simpatizante-card .field-label { font-weight: bold; color: #555; }
.counter-box { background-color: #343a40; color: white; font-weight: bold; font-size: 1.5em; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.simpatizante-item, .votante-externo-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; border: 1px solid #ccc; background: white; margin-bottom: 10px; border-radius: 5px; }
.resultados-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.vote-card { padding: 25px 20px; border-radius: 8px; text-align: center; color: white; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.vote-card.si { background: linear-gradient(135deg, #28a745, #218838); }
.vote-card.no { background: linear-gradient(135deg, #dc3545, #c82333); }
.vote-card.ninguno { background: linear-gradient(135deg, #6c757d, #5a6268); }
.vote-card.nulo { background: linear-gradient(135deg, #343a40, #23272b); }
.vote-card .label { font-size: 1.2em; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
.vote-card .count { font-size: 3.5em; font-weight: bold; margin: 10px 0; }
.report-item { margin-bottom: 10px; }
.report-container, .list-container { padding: 20px; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9; margin-bottom: 20px; }
#search-simpatizante { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid var(--border-grey); border-radius: 4px; }

/* --- Visor Redes --- */
.municipio-header { font-size: 1.5em; color: var(--primary-dark-blue); margin-top: 30px; margin-bottom: 15px; padding-bottom: 5px; border-bottom: 2px solid var(--primary-dark-blue); }
.accordion-item { margin-bottom: 5px; border-radius: 5px; overflow: hidden; border: 1px solid var(--border-grey); }
.accordion-header { background-color: var(--primary-dark-blue); color: white; cursor: pointer; padding: 15px 20px; width: 100%; border: none; text-align: left; outline: none; font-size: 1.1em; font-weight: bold; transition: background-color 0.3s ease; display: flex; justify-content: space-between; align-items: center; }
.accordion-header:hover { filter: brightness(1.1); }
.accordion-header.level-2 { background-color: #f8f9fa; color: #333; font-size: 1em; border-top: 1px solid #e0e0e0; }
.accordion-header.level-3 { background-color: #f8f9fa; color: #333; font-size: 0.95em; border-top: 1px solid #e0e0e0; }
.accordion-panel { padding: 0; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
.level-2 + .accordion-panel { padding-left: 15px; background-color: #fdfdff; }
.level-3 + .accordion-panel { padding-left: 30px; background-color: #ffffff; }
.persona-list { list-style: none; padding: 15px 20px; margin: 0; }
.persona-list li { padding: 10px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
.item-count { font-size: 0.85em; font-weight: normal; color: #ccc; margin-left: 10px; }
.level-2 .item-count, .level-3 .item-count { color: #666; }
.admin-tool-item { display: grid; grid-template-columns: 2fr 3fr; gap: 10px; align-items: center; margin-bottom: 10px; }

/* --- Modales --- */
.modal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); }
.modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 500px; border-radius: 8px; text-align: center; }
.modal-close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.modal-actions button, .modal-actions a { margin: 5px; }


/* =========================================
   8. RESPONSIVE
   ========================================= */
@media (max-width: 992px) { .charts-grid-secondary { grid-template-columns: 1fr; } }

/* Ajustes MÓVIL y TABLET (Menores a 992px) */
@media (max-width: 991px) {
    body { padding-left: 0 !important; }
    
    /* 1. OCULTAR SIDEBAR ESCRITORIO (Para mostrar el del footer) */
    .sidebar { display: none !important; }
    
    /* 2. AJUSTAR CONTENIDO */
    .content { width: 100% !important; margin-left: 0 !important; padding: 15px; padding-bottom: 80px; }
    
    /* 3. LIMPIEZA GENERAL */
    .menu-toggle-button { position: fixed; top: 15px; left: 15px; z-index: 1001; margin-bottom: 0; }
    .main-wrapper::after { display: none !important; }
    
    /* 4. GRIDS EN UNA COLUMNA */
    .visual-layout-grid, .capture-grid, .search-grid, .resultados-grid, .busqueda-externa-grid, .form-grid { grid-template-columns: 1fr !important; }
    .simpatizante-item, .votante-externo-item { flex-direction: column; align-items: flex-start; gap: 10px; }
    .card-actions { text-align: left; margin-top: 10px; }
    .vote-card .count { font-size: 2.8em; }
    
    /* 5. TABLAS RESPONSIVAS */
    table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* =========================================
   9. ESTILOS PÁGINA DE LOGIN
   ========================================= */
body.login-page { overflow-x: hidden; background-color: #f4f6f9; }
.main-container { display: flex; flex-direction: column; width: 100vw; min-height: 100vh; position: relative; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); }
.main-container::before, .main-container::after { display: none; }
.content-wrapper { display: flex; flex: 1; width: 100%; justify-content: center; align-items: center; }
.left-panel { width: 50%; padding: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.header-logos { margin-bottom: 0; }
.header-logos img { height: 180px; filter: invert(1) brightness(0); opacity: 0.8; }
.right-panel { width: 50%; padding: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.login-container { width: 100%; max-width: 400px; background-color: #ffffff; padding: 40px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.login-header { text-align: center; margin-bottom: 30px; }
.login-header .icon { font-size: 2.5em; border: 2px solid var(--primary-dark-blue); border-radius: 50%; width: 70px; height: 70px; display: inline-flex; justify-content: center; align-items: center; margin-bottom: 20px; color: var(--primary-dark-blue); background-color: rgba(0,0,0,0.03); }
.login-header h2 { font-size: 1.5em; font-weight: 700; letter-spacing: 1px; color: var(--text-dark); margin: 0; }
.login-container .form-group input { width: 100%; background-color: #f9f9f9; border: 1px solid #eee; border-radius: 8px; padding: 15px; color: #333; font-size: 1em; transition: all 0.3s ease; }
.login-container .form-group input:focus { background-color: #fff; border-color: var(--primary-accent-blue); outline: none; box-shadow: 0 0 0 3px rgba(0,123,255,0.1); }
.login-button { display: block; width: 100%; background-color: var(--primary-dark-blue); color: #fff; border: none; border-radius: 8px; padding: 15px; font-size: 1em; font-weight: bold; cursor: pointer; margin-top: 20px; transition: transform 0.2s ease, opacity 0.2s ease; }
.login-button:hover { opacity: 0.9; transform: translateY(-2px); }
.site-footer { width: 100%; padding: 20px; text-align: center; font-size: 0.85em; color: #888; background: transparent; border: none; position: absolute; bottom: 0; }

@media (max-width: 1024px) {
    body.login-page { overflow-y: auto; background: #fff; }
    .main-container { background: #fff; height: auto; min-height: 100vh; }
    .content-wrapper { flex-direction: column; padding-top: 20px; padding-bottom: 60px; }
    .left-panel { width: 100%; padding: 20px; height: auto; margin-bottom: -20px; }
    .header-logos img { height: 100px; }
    .right-panel { width: 100%; padding: 20px; height: auto; }
    .login-container { box-shadow: none; padding: 10px; width: 100%; }
    .site-footer { position: relative; padding-bottom: 20px; }
}

/* =========================================
   10. PÁGINAS STANDALONE (add_data.php)
   ========================================= */
.standalone-body { font-family: Arial, sans-serif; padding: 20px; background-color: var(--background-light-grey); }
.standalone-container { max-width: 600px; margin: auto; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.standalone-container h1 { text-align: center; color: var(--text-dark); }
.back-link { display: block; text-align: center; margin-top: 20px; color: var(--primary-accent-blue); text-decoration: none; }
.standalone-container input[type="text"], .standalone-container input[type="number"], .standalone-container textarea { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid var(--border-grey); border-radius: 4px; box-sizing: border-box; }
.standalone-container label { display: block; margin-bottom: 5px; font-weight: bold; }
.standalone-container button { background-color: var(--primary-accent-blue); color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; width: 100%; }
.standalone-container button:hover { background-color: var(--primary-accent-blue-hover); }