/* ===================================================================
   ESTILOS GENERALES - SISTEMA DE GESTIÓN DE CONVOCATORIAS
   Diseño serio, profesional y corporativo
   =================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Colores corporativos serios */
    --color-primario: #1e3a5f;      /* Azul oscuro corporativo */
    --color-secundario: #2d5a8c;    /* Azul medio */
    --color-acento: #0056b3;        /* Azul más claro */
    --color-gris-oscuro: #2c3e50;   /* Gris oscuro */
    --color-gris-medio: #34495e;    /* Gris medio */
    --color-gris-claro: #ecf0f1;    /* Gris muy claro */
    --color-blanco: #ffffff;
    --color-exito: #27ae60;          /* Verde */
    --color-error: #c0392b;          /* Rojo */
    --color-advertencia: #f39c12;    /* Naranja */
    --color-info: #3498db;           /* Azul info */
    
    /* Fuentes */
    --fuente-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /* Espaciado */
    --espaciado-xs: 5px;
    --espaciado-sm: 10px;
    --espaciado-md: 15px;
    --espaciado-lg: 20px;
    --espaciado-xl: 30px;
}

body {
    font-family: var(--fuente-principal);
    background-color: #f5f5f5;
    color: var(--color-gris-oscuro);
    line-height: 1.6;
}

/* ===================================================================
   HEADER Y NAVEGACIÓN
   =================================================================== */

.header {
    background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-gris-oscuro) 100%);
    color: var(--color-blanco);
    padding: var(--espaciado-lg) var(--espaciado-xl);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header h1 {
    font-size: 1.8em;
    font-weight: 600;
}

.header-info {
    display: flex;
    gap: var(--espaciado-lg);
    align-items: center;
}

.usuario-info {
    text-align: right;
    font-size: 0.95em;
}

.usuario-info strong {
    display: block;
    margin-bottom: var(--espaciado-xs);
}

.btn-logout {
    background-color: var(--color-error);
    color: var(--color-blanco);
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}

.btn-logout:hover {
    background-color: #a93226;
}

/* ===================================================================
   CONTENEDOR PRINCIPAL
   =================================================================== */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--espaciado-xl);
}

.sidebar {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    width: 250px;
    position: fixed;
    left: 0;
    top: 80px;
    height: calc(100vh - 80px);
    overflow-y: auto;
    padding: var(--espaciado-lg) 0;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.sidebar ul {
    list-style: none;
}

.sidebar li {
    padding: 0;
}

.sidebar a {
    display: block;
    padding: 12px var(--espaciado-lg);
    color: var(--color-blanco);
    text-decoration: none;
    transition: background-color 0.3s ease;
    border-left: 4px solid transparent;
}

.sidebar a:hover,
.sidebar a.activo {
    background-color: var(--color-secundario);
    border-left-color: var(--color-acento);
}

.main-content {
    margin-left: 250px;
    padding: var(--espaciado-xl);
    min-height: calc(100vh - 80px);
}

/* ===================================================================
   FORMULARIOS
   =================================================================== */

.formulario {
    background-color: var(--color-blanco);
    padding: var(--espaciado-xl);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    max-width: 600px;
    margin: 0 auto;
}

.formulario h2 {
    margin-bottom: var(--espaciado-lg);
    color: var(--color-primario);
    border-bottom: 2px solid var(--color-gris-claro);
    padding-bottom: var(--espaciado-md);
}

.form-group {
    margin-bottom: var(--espaciado-lg);
}

label {
    display: block;
    margin-bottom: var(--espaciado-sm);
    font-weight: 600;
    color: var(--color-gris-oscuro);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: var(--fuente-principal);
    font-size: 0.95em;
    transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 5px rgba(0, 86, 179, 0.2);
}

textarea {
    resize: vertical;
    min-height: 100px;
}

/* ===================================================================
   BOTONES
   =================================================================== */

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-family: var(--fuente-principal);
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-primario {
    background-color: var(--color-primario);
    color: var(--color-blanco);
}

.btn-primario:hover {
    background-color: var(--color-secundario);
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
}

.btn-secundario {
    background-color: var(--color-gris-medio);
    color: var(--color-blanco);
}

.btn-secundario:hover {
    background-color: var(--color-gris-oscuro);
}

.btn-exito {
    background-color: var(--color-exito);
    color: var(--color-blanco);
}

.btn-exito:hover {
    background-color: #229954;
}

.btn-error {
    background-color: var(--color-error);
    color: var(--color-blanco);
}

.btn-error:hover {
    background-color: #a93226;
}

.btn-advertencia {
    background-color: var(--color-advertencia);
    color: var(--color-blanco);
}

.btn-advertencia:hover {
    background-color: #d68910;
}

.btn-bloque {
    display: block;
    width: 100%;
    margin-top: var(--espaciado-lg);
}

.btn-grupo {
    display: flex;
    gap: var(--espaciado-md);
    margin-top: var(--espaciado-lg);
}

.btn-grupo .btn {
    flex: 1;
}

/* ===================================================================
   MENSAJES Y ALERTAS
   =================================================================== */

.alerta {
    padding: 15px 20px;
    border-radius: 4px;
    margin-bottom: var(--espaciado-lg);
    border-left: 4px solid;
}

.alerta-exito {
    background-color: #d4edda;
    color: #155724;
    border-color: var(--color-exito);
}

.alerta-error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: var(--color-error);
}

.alerta-advertencia {
    background-color: #fff3cd;
    color: #856404;
    border-color: var(--color-advertencia);
}

.alerta-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border-color: var(--color-info);
}

/* ===================================================================
   TABLAS
   =================================================================== */

.tabla {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-blanco);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    overflow: hidden;
}

.tabla thead {
    background-color: var(--color-primario);
    color: var(--color-blanco);
}

.tabla th {
    padding: 15px;
    text-align: left;
    font-weight: 600;
}

.tabla td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--color-gris-claro);
}

.tabla tbody tr:hover {
    background-color: #f9f9f9;
}

.tabla tbody tr:last-child td {
    border-bottom: none;
}

/* ===================================================================
   TARJETAS
   =================================================================== */

.tarjeta {
    background-color: var(--color-blanco);
    padding: var(--espaciado-xl);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: var(--espaciado-lg);
    transition: box-shadow 0.3s ease;
}

.tarjeta:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tarjeta h3 {
    margin-top: 0;
    margin-bottom: var(--espaciado-md);
    color: var(--color-primario);
}

/* ===================================================================
   GRID Y LAYOUT
   =================================================================== */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--espaciado-lg);
    margin-bottom: var(--espaciado-xl);
}

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

/* ===================================================================
   FOOTER
   =================================================================== */

.footer {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    text-align: center;
    padding: var(--espaciado-lg);
    margin-top: var(--espaciado-xl);
    font-size: 0.9em;
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */

@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        position: relative;
        height: auto;
        top: 0;
    }
    
    .main-content {
        margin-left: 0;
    }
    
    .header {
        flex-direction: column;
        gap: var(--espaciado-md);
        text-align: center;
    }
    
    .grid-2 {
        grid-template-columns: 1fr;
    }
    
    .btn-grupo {
        flex-direction: column;
    }
}

/* ===================================================================
   UTILIDADES
   =================================================================== */

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-muted {
    color: #999;
}

.mt-1 { margin-top: var(--espaciado-sm); }
.mt-2 { margin-top: var(--espaciado-md); }
.mt-3 { margin-top: var(--espaciado-lg); }

.mb-1 { margin-bottom: var(--espaciado-sm); }
.mb-2 { margin-bottom: var(--espaciado-md); }
.mb-3 { margin-bottom: var(--espaciado-lg); }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }

.justify-between {
    justify-content: space-between;
}

.gap-2 {
    gap: var(--espaciado-md);
}