/* --- Estilos Generales --- */

body {

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

background-color: #f4f7f9;

color: #333;

margin: 0;

padding: 0; /* Quitamos el padding del body para un mejor control */

}

.container {

max-width: 980px;
margin: 20px auto;
padding: 25px;
background-color: #fff;

border-radius: 8px;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

}



/* --- Cabecera Principal --- */

.main-header {

display: flex;

justify-content: space-between;

align-items: center;

padding: 1rem 2rem;

background-color: #ffffff;

border-bottom: 1px solid #dee2e6;

margin-bottom: 20px;

}



.logo-container img {

max-height: 60px;

width: auto;

}



.title-container h1 {

margin: 0;

font-size: 1.75rem;

color: #343a40;

text-align: center;

white-space: nowrap;

padding: 0 1rem;

}



/* --- Formularios y Botones --- */

.form-group {

margin-bottom: 20px;

}



label {

display: block;

font-weight: 600;

margin-bottom: 8px;

color: #555;

}



input[type="email"],

input[type="file"],

input[type="date"],

input[type="text"],

input[type="password"],

select {

width: 100%;

padding: 12px;

border: 1px solid #ccc;

border-radius: 5px;

box-sizing: border-box;

background-color: #fdfdfd;

}



button, .button-new-search {

background-color: #007bff;

color: white;

padding: 12px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 16px;

font-weight: 600;

transition: background-color 0.2s;

text-decoration: none;

display: inline-block;

text-align: center;

}



button:hover {

background-color: #0056b3;

}



/* --- Panel de Administrador Específico --- */

.hidden {

display: none !important; /* Usamos !important para asegurar que se oculte */

}



.mapping-grid {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 20px;

}



/* --- Mensajes de Feedback --- */

.message {

padding: 15px;

margin-top: 20px;

border-radius: 5px;

border: 1px solid transparent;

}

.message.info { color: #004085; background-color: #cce5ff; border-color: #b8daff; }

.message.success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }

.message.error { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }



/* --- Estilos del Panel de Reporte --- */

.report-container {

display: flex;

flex-wrap: wrap;

gap: 20px;

}

.user-panel {

flex: 1;

min-width: 280px;

background-color: #f8f9fa;

padding: 20px;

border-radius: 8px;

height: fit-content;

}

.classes-panel {

flex: 3;

min-width: 320px; /* Reducido para mejor ajuste en móviles */

}

.user-panel h3 { margin-top: 0; }

.user-panel p { margin: 5px 0 15px; }

.user-panel span { color: #555; }



/* --- SECCIÓN DE PESTAÑAS (CORREGIDA Y UNIFICADA) --- */

.tabs {

display: flex;

border-bottom: 2px solid #dee2e6;

margin-bottom: 15px;



/* Habilita el desplazamiento horizontal en móviles */

overflow-x: auto;



/* Oculta la barra de scroll visualmente */

-ms-overflow-style: none;

scrollbar-width: none;

}



.tabs::-webkit-scrollbar {

display: none;

}



.tab-button {

padding: 10px 15px;

border: none;

background-color: transparent;

cursor: pointer;

font-size: 16px;

border-bottom: 3px solid transparent;

margin-bottom: -2px;

color: #6c757d;

transition: all 0.2s ease-in-out;



/* Evita que el texto de un botón se parta en dos líneas */

white-space: nowrap;

}



.tab-button:hover {

color: #343a40;

background-color: #e9ecef;

}



.tab-button.active {

font-weight: 600;

color: #007bff;

border-bottom-color: #007bff;

background-color: transparent;

}



.tab-content { display: none; }

.tab-content.active { display: block; }

.tab-content ul { list-style-type: none; padding-left: 0; }

.tab-content li { padding: 10px; border-bottom: 1px solid #eef2f5; }

.tab-content li:last-child { border-bottom: none; }



/* --- Botón de Nueva Búsqueda --- */

.button-new-search {

display: block;

width: 100%;

background-color: #6c757d;

margin-top: 25px;

}



.button-new-search:hover {

background-color: #5a6268;

color: white;

}



/* --- Barra de Progreso --- */

.progress-bar-background {

width: 100%;

background-color: #e9ecef;

border-radius: .25rem;

height: 20px;

overflow: hidden;

border: 1px solid #dee2e6;

}



.progress-bar-foreground {

height: 100%;

width: 0%;

background-color: #007bff;

transition: width 0.4s ease;

}



#progress-counter {

text-align: center;

margin-top: 5px;

font-weight: bold;

color: #495057;

}



/* --- Media Queries para Móviles --- */

@media (max-width: 768px) {

.main-header {

flex-direction: column;

gap: 15px;

}

.title-container h1 {

font-size: 1.4rem;

white-space: normal;

}

.mapping-grid {

grid-template-columns: 1fr;

}

}