/* --- Paleta de Colores MPPOP (Incrustada) --- */
:root {
    /* Colores Institucionales */
    --mppop-azul-primario: #1a3b69;
    --mppop-negro-principal: #1c1c1c;
    --mppop-gris-oscuro: #58595b;
    --mppop-gris-claro: #808285;
    
    /* Colores de la Bandera */
    --mppop-amarillo-bandera: #fcd116;
    --mppop-azul-bandera: #003893;
    --mppop-rojo-bandera: #ce1126;

    /* Paleta Semántica */
    --color-primario: var(--mppop-azul-primario);
    --color-secundario: var(--mppop-azul-bandera);
    --color-fondo: #ffffff;
    --color-fondo-secundario: #f5f7fa; /* Gris azulado claro */
    --color-texto: var(--mppop-negro-principal);
    --color-texto-secundario: var(--mppop-gris-oscuro);
    --color-texto-inverso: #ffffff;
    --color-borde: #e0e0e0;
    --color-exito: #28a745;
    
    /* Valores Generales */
    --fuente-principal: 'Inter', sans-serif;
    --radio-borde-medio: 8px;
    --sombra-caja-media: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Clases de colores de fondo */
.bg-mppop-azul-primario { background-color: var(--mppop-azul-primario); }
.bg-mppop-negro-principal { background-color: var(--mppop-negro-principal); }
.bg-mppop-gris-oscuro { background-color: var(--mppop-gris-oscuro); }
.bg-mppop-gris-claro { background-color: var(--mppop-gris-claro); }
.bg-mppop-amarillo-bandera { background-color: var(--mppop-amarillo-bandera); }
.bg-mppop-azul-bandera { background-color: var(--mppop-azul-bandera); }
.bg-mppop-rojo-bandera { background-color: var(--mppop-rojo-bandera); }
.bg-color-primario { background-color: var(--color-primario); }
.bg-color-secundario { background-color: var(--color-secundario); }
.bg-color-fondo { background-color: var(--color-fondo); }
.bg-color-fondo-secundario { background-color: var(--color-fondo-secundario); }
.bg-color-texto { background-color: var(--color-texto); }
.bg-color-texto-secundario { background-color: var(--color-texto-secundario); }
.bg-color-texto-inverso { background-color: var(--color-texto-inverso); }
.bg-color-borde { background-color: var(--color-borde); }
.bg-color-exito { background-color: var(--color-exito); }

/* Clases de colores de texto */
.text-mppop-azul-primario { color: var(--mppop-azul-primario); }
.text-mppop-negro-principal { color: var(--mppop-negro-principal); }
.text-mppop-gris-oscuro { color: var(--mppop-gris-oscuro); }
.text-mppop-gris-claro { color: var(--mppop-gris-claro); }
.text-mppop-amarillo-bandera { color: var(--mppop-amarillo-bandera); }
.text-mppop-azul-bandera { color: var(--mppop-azul-bandera); }
.text-mppop-rojo-bandera { color: var(--mppop-rojo-bandera); }
.text-color-primario { color: var(--color-primario); }
.text-color-secundario { color: var(--color-secundario); }
.text-color-fondo { color: var(--color-fondo); }
.text-color-fondo-secundario { color: var(--color-fondo-secundario); }
.text-color-texto { color: var(--color-texto); }
.text-color-texto-secundario { color: var(--color-texto-secundario); }
.text-color-texto-inverso { color: var(--color-texto-inverso); }
.text-color-borde { color: var(--color-borde); }
.text-color-exito { color: var(--color-exito); }


/* --- Estilos Base --- */
body {
    font-family: var(--fuente-principal);
    background-color: var(--color-fondo-secundario);
    color: var(--color-texto);
}

/* --- Estilos de Componentes Personalizados --- */

/* Contenedor principal de la aplicación */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Estilo del formulario de login */
.login-card {
    background-color: var(--color-fondo);
    border-radius: var(--radio-borde-medio);
    box-shadow: var(--sombra-caja-media);
    transition: all 0.3s ease-in-out;
}

/* Estilo para los inputs */
.form-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde-medio);
    background-color: var(--color-fondo-secundario);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-input:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(26, 59, 105, 0.2);
}

/* Estilo para los selects */
.form-select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde-medio);
    background-color: var(--color-fondo-secundario);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-select:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(26, 59, 105, 0.2);
}

/* Estilo para los botones */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    border-radius: var(--radio-borde-medio);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
.btn-primario {
    background-color: var(--color-primario);
    color: var(--color-texto-inverso);
}
.btn-primario:hover {
    background-color: var(--color-secundario);
}
.btn-primario:disabled {
    background-color: var(--mppop-gris-claro);
    cursor: not-allowed;
}
.btn-secundario {
    background-color: transparent;
    color: var(--color-texto-secundario);
    border-color: var(--color-borde);
}
.btn-secundario:hover {
    background-color: var(--color-fondo-secundario);
    color: var(--color-texto);
}

/* Pequeño spinner para botones */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--color-texto-inverso);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.btn-secundario .spinner {
        border: 2px solid var(--mppop-gris-claro);
        border-top-color: var(--color-primario);
}

/* Header (Copiado) */
.dashboard-header {
    background-color: var(--color-fondo);
    box-shadow: var(--sombra-caja-media);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Pestañas */
.tab-button {
    padding: 10px 16px;
    font-weight: 500;
    color: var(--color-texto-secundario);
    border-bottom: 3px solid transparent;
    cursor: pointer;
    display: inline-block;
}
.tab-button.active {
    color: var(--color-primario);
    font-weight: 600;
    border-bottom-color: var(--color-primario);
}


@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Barra de la bandera (para el card de login) */
.bandera-bar {
    display: flex;
    width: 100%;
    height: 8px;
    border-radius: var(--radio-borde-medio) var(--radio-borde-medio) 0 0;
    overflow: hidden;
}
.bandera-bar > div {
    height: 100%;
    width: 33.33%;
}

/* Barra de la bandera (full width para el dashboard) */
.bandera-bar-full {
    display: flex;
    width: 100%;
    height: 8px;
    /* Sin border-radius */
}
.bandera-bar-full > div {
    height: 100%;
    width: 33.33%;
}

/* --- Estilos del Dashboard (Menú) --- */
.dashboard-header {
    background-color: var(--color-fondo);
    box-shadow: var(--sombra-caja-media);
}

.menu-card {
    background-color: var(--color-fondo);
    border-radius: var(--radio-borde-medio);
    box-shadow: var(--sombra-caja-media);
    padding: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: var(--color-primario);
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    border: 1px solid var(--color-borde);
}
.menu-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    color: var(--color-secundario);
}
.menu-card svg {
    width: 48px;
    height: 48px;
    stroke-width: 1.5;
}

/* Estilo para las tablas */
.tabla-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    background-color: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde-medio);
    box-shadow: var(--sombra-caja-media);
}
table {
    width: 100%;
    min-width: 700px; /* Asegura que en móvil haya scroll */
}
th {
    padding: 12px 16px;
    background-color: var(--color-fondo-secundario);
    text-align: left;
    font-weight: 600;
    color: var(--color-texto-secundario);
    border-bottom: 2px solid var(--color-borde);
}
td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-borde);
    vertical-align: middle;
}
tbody tr:last-child td {
    border-bottom: none;
}
tbody tr:hover {
    background-color: #fcfcfd;
}

/* Estado (Pill) */
.pill {
    padding: 4px 10px;
    border-radius: 99px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}
.pill-exito {
    background-color: #e9f7ec;
    color: #2e7d32;
}
.pill-bloqueado {
    background-color: #fdf8e7;
    color: #b4800c;
}
.pill-eliminado {
    background-color: #fbe9e9;
    color: #c62828;
}

/* Modal */
#modalBackdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40;
}
.modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-fondo);
    border-radius: var(--radio-borde-medio);
    box-shadow: var(--sombra-caja-media);
    z-index: 50;
    width: 90%;
    max-width: 500px;
}

/* Estilos para los alertas */
.alert {
    padding: 12px;
    border-radius: var(--radio-borde-medio);
    font-weight: 600;
    text-align: center;
}
.alert-error {
    background-color: var(--mppop-rojo-bandera);
    color: white;
}
.alert-error-light {
    background-color: rgba(206, 17, 38, 0.1);
    color: var(--mppop-rojo-bandera);
}
.alert-success {
    background-color: var(--color-exito);
    color: var(--color-texto-inverso);
}
.alert-success-light {
    background-color: rgba(40, 167, 69, 0.1);
    color: var(--color-exito);
}
.alert-warning {
    background-color: var(--mppop-amarillo-bandera);
    color: var(--color-texto);
}
.alert-warning-light {
    background-color: rgba(252, 209, 22, 0.1);
    color: var(--mppop-amarillo-bandera);
}
.alert-info {
    background-color: var(--mppop-azul-bandera);
    color: var(--color-texto-inverso);
}
.alert-info-light {
    background-color: rgba(0, 85, 164, 0.1);
    color: var(--color-texto-inverso);
}
.alert-light {
    background-color: var(--color-fondo);
    color: var(--color-texto);
}
.alert-dark {
    background-color: var(--color-texto);
    color: var(--color-texto-inverso);
}

/* ─── Validación de formularios ──────────────────────────────────── */

/* Asterisco rojo en labels de campos obligatorios */
.campo-requerido-marca {
    color: var(--mppop-rojo-bandera);
    margin-left: 2px;
    font-weight: 700;
    line-height: 1;
}

/* Borde rojo en campos inválidos */
.campo-invalido,
.campo-invalido:focus {
    border-color: var(--mppop-rojo-bandera) !important;
    box-shadow: 0 0 0 3px rgba(206, 17, 38, 0.15) !important;
    outline: none;
}

/* Mensaje de error debajo del campo */
.campo-error-msg {
    display: block;
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--mppop-rojo-bandera);
    font-weight: 500;
}