/* public_html/psl/css/estilos.css */
/* VERSIÓN 4.2: RESPONSIVE Y FLUIDEZ */
@import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;600;700&display=swap');

:root {
    --primary: #0056b3;
    --primary-dark: #004494;
    --accent: #0099ff;
    --bg-body: #eef2f7;
    --text-main: #1a202c;
    --white: #ffffff;
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 80px;
    --transition-speed: 0.3s;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    font-family: 'Segoe UI', sans-serif; 
    background-color: var(--bg-body); 
    color: var(--text-main); 
    font-size: 16px; 
    min-height: 100vh; 
    display: flex; 
    overflow-x: hidden; /* Evita scroll horizontal en toda la página */
}

/* --- SIDEBAR --- */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--primary);
    color: white;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    transition: width var(--transition-speed);
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: nowrap;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}

/* Logo Sidebar */
.sidebar-logo {
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: var(--primary-dark);
}

.sidebar-logo .logo-img {
    height: auto;
    object-fit: contain;
}

.sidebar-logo .logo-full {
    width: 100%;
    display: block;
}

.sidebar-logo .logo-mini {
    display: none;
    width: 68px;
    margin: 4px auto;
}

/* Estado Colapsado */
.sidebar.collapsed { width: var(--sidebar-collapsed-width); }
.sidebar.collapsed .sidebar-logo { padding: 12px 5px; }
.sidebar.collapsed .logo-full { display: none; }
.sidebar.collapsed .logo-mini { display: block; }
.sidebar.collapsed .link-text, .sidebar.collapsed .menu-arrow { display: none; }
.sidebar.collapsed .sidebar-header h4 { display: none; }
/* --- CONTENEDOR PRINCIPAL FLUIDO --- */
.main-wrapper {
    margin-left: var(--sidebar-width);
    /* IMPORTANTE: Quitamos width fijo calculado. Usamos flex-grow o width: 100% relativo al margen */
    width: calc(100% - var(--sidebar-width)); 
    min-width: 0; /* Truco Flexbox para evitar desbordamientos */
    transition: margin-left var(--transition-speed), width var(--transition-speed);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-wrapper.expanded {
    margin-left: var(--sidebar-collapsed-width);
    width: calc(100% - var(--sidebar-collapsed-width));
}

/* MENÚ DE NAVEGACIÓN */
.sidebar nav { padding: 15px 10px; }
.nav-item { margin-bottom: 5px; }
.nav-link {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-radius: 8px;
    transition: background 0.2s;
    cursor: pointer;
    font-size: 1.05rem;
}
.nav-link:hover, .nav-link.active { background: rgba(255,255,255,0.15); color: white; font-weight: 600; }
.nav-link i { font-size: 1.3rem; min-width: 35px; text-align: center; }

/* SUBMENÚS */
.submenu { display: none; padding-left: 20px; background: rgba(0,0,0,0.15); border-radius: 8px; margin-top: 5px; }
.submenu.open { display: block; }
.submenu a { font-size: 0.95rem; padding: 10px 10px 10px 45px; color: rgba(255,255,255,0.7); display: block; text-decoration: none; position: relative; }
.submenu a::before { content: '•'; position: absolute; left: 25px; color: rgba(255,255,255,0.5); }
.submenu a:hover { color: white; background: rgba(255,255,255,0.05); }
.menu-arrow { margin-left: auto; font-size: 0.8rem; transition: transform 0.3s; }
.nav-item.open .menu-arrow { transform: rotate(180deg); }

/* HEADER SUPERIOR */
.top-header {
    background: white;
    padding: 15px 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 0; z-index: 900;
}

/* CONTENIDO Y TABLAS */
.content-area { padding: 30px; flex-grow: 1; overflow-x: hidden; }

/* Contenedores de Tablas con Scroll Horizontal */
.table-container {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-top: 20px;
    overflow-x: auto; /* ESTO ES CLAVE: Permite scroll si la tabla es muy ancha */
}

.data-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 600px; /* Asegura un ancho mínimo legible */ }
.data-table th { background: var(--primary); color: white; padding: 15px; text-align: left; white-space: nowrap; }
.data-table th:first-child { border-top-left-radius: 8px; }
.data-table th:last-child { border-top-right-radius: 8px; }
.data-table td { padding: 15px; border-bottom: 1px solid #e2e8f0; vertical-align: middle;color: var(--text-main); }
.badge { padding: 6px 12px; border-radius: 6px; font-size: 0.85em; font-weight: bold; display: inline-block; }
.badge-ok { background: #d4edda; color: #155724; }
.badge-ko { background: #f8d7da; color: #721c24; }
.badge-role { background: #e3f2fd; color: #0d47a1; padding: 6px 12px; border-radius: 6px; font-weight: 700; border: 1px solid #bbdefb; }

/* Formularios */
.form-card { background: white; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); padding: 40px; border-top: 5px solid var(--primary); max-width: 100%; }
h1, h2 { color: var(--primary-dark); font-weight: 700; margin-bottom: 20px; font-size: 1.8rem; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Columnas automáticas responsive */ gap: 30px; margin-bottom: 20px; }
.form-group { margin-bottom: 20px; }
label { display: block; font-weight: 600; margin-bottom: 8px; color: var(--primary-dark); }
input, select, textarea { width: 100%; padding: 12px; border: 2px solid #dfe3e8; border-radius: 8px; font-size: 1rem; background: #f9fafb; transition: 0.3s; }
input:focus, select:focus { border-color: var(--accent); background: white; outline: none; }
.btn { padding: 12px 25px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 1rem; display: inline-block; text-decoration: none; text-align: center; }
.btn:hover { opacity: 0.9; }

.password-wrapper { position: relative; }
.password-wrapper input { padding-right: 45px; }
.toggle-password { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #64748b; font-size: 1.2rem; }
select[multiple] { height: auto; min-height: 120px; background-image: none; padding: 5px; }
select[multiple] option { padding: 8px; border-bottom: 1px solid #eee; }
select[multiple] option:checked { background: var(--primary); color: white; }

/* --- RESPONSIVE MEDIA QUERIES --- */

/* Tablet y pantallas medianas (menos de 992px) */
@media (max-width: 992px) {
    .sidebar { width: var(--sidebar-collapsed-width); }
    .sidebar .logo-img { max-height: 35px; }
    .sidebar .link-text, .sidebar .menu-arrow { display: none; }
    .sidebar .sidebar-logo { padding: 15px 5px; }
    .sidebar:hover { width: var(--sidebar-width); } /* Expandir al pasar ratón opcional */
    
    .main-wrapper {
        margin-left: var(--sidebar-collapsed-width);
        width: calc(100% - var(--sidebar-collapsed-width));
    }
}

/* Móvil (menos de 768px) */
@media (max-width: 768px) {
    .sidebar { width: 0; overflow: hidden; padding: 0; } /* Ocultar sidebar por defecto en móvil */
    .main-wrapper { margin-left: 0; width: 100%; }
    
    /* Clase especial para abrir sidebar en móvil si se requiere JS */
    .sidebar.mobile-open { width: var(--sidebar-width); padding: 20px; }
    
    .top-header { padding: 10px 15px; }
    .content-area { padding: 15px; }
    .form-card { padding: 20px; }
    .form-row { grid-template-columns: 1fr; gap: 15px; } /* Una sola columna en form */
}

/* NUEVO: Botón Elegante (Outline) */
.btn-outline-primary {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    padding: 8px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s;
}

.btn-outline-primary:hover {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 10px rgba(0, 86, 179, 0.2);
    transform: translateY(-1px);
}

.btn-outline-primary i {
    margin-right: 8px;
    font-size: 1.1rem;
}
/* --- BADGES ESPECÍFICOS PSL --- */
.badge-afch { background-color: #0dcaf0; color: #000; font-weight: 700; border: 1px solid #0aa2c0; } /* Azul clarito */
.badge-acs { background-color: #dc3545; color: #fff; font-weight: 700; border: 1px solid #b02a37; } /* Rojo */
.badge-riesgo-alto { background-color: #dc3545; color: white; }
.badge-riesgo-medio { background-color: #198754; color: white; } /* Verde/Medio */

.img-thumbnail-table {
    width: 50px; height: 50px; object-fit: cover; border-radius: 6px; border: 1px solid #ddd;
    cursor: pointer; transition: transform 0.2s;
}
.img-thumbnail-table:hover { transform: scale(1.5); }
.sidebar-section-label {
    padding: 16px 20px 6px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.4);
    font-weight: 700;
}
.sidebar.collapsed .sidebar-section-label { display: none; }