/* CPA Sistema - Hoja de estilos central del sistema web.
   Paleta y tipografía tomadas del sitio institucional real (cpados_repo):
   rojo #E20613, escala de grises #222-#f9f9f9, tipografía Montserrat.
   El sistema no tiene naranja/azul/navy institucional: esas variables
   quedan como alias apuntando a la escala de grises para no romper
   vistas existentes que las referencian. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

:root {
    /* Paleta institucional real */
    --cpa-red: #E20613;
    --cpa-red-hover: #B9000B;
    --cpa-red-dark: #A10000;
    --cpa-rojo: #E20613;

    --cpa-green: #166534;
    --cpa-green-bg: #F0FDF4;
    --cpa-green-border: #BBE5C4;

    /* Escala de grises (cpados_repo) */
    --cpa-text: #444444;
    --cpa-text-muted: #636363;
    --cpa-text-soft: #838383;
    --cpa-border: #E0E0E0;
    --cpa-border-light: #EEEEEE;
    --cpa-bg: #FFFFFF;
    --cpa-bg-alt: #F5F5F5;
    --cpa-bg-soft: #F9F9F9;
    --cpa-card-bg: #FFFFFF;
    --cpa-light-bg: #F8F8F8;

    /* Alias de compatibilidad: sin naranja/azul/navy real -> gris neutro */
    --cpa-orange: #444444;
    --cpa-orange-dark: #2C2C2C;
    --cpa-orange-hover: #2C2C2C;
    --cpa-orange-light: #F5F5F5;
    --cpa-orange-border: #E0E0E0;
    --cpa-naranja: #444444;
    --cpa-navy: #444444;
    --cpa-navy-dark: #2C2C2C;
    --cpa-azul: #444444;
    --cpa-azul-oscuro: #2C2C2C;
    --cpa-slate: #636363;
    --cpa-slate-dark: #2C2C2C;
}

body.cpa-redesign {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--cpa-bg-alt);
    color: var(--cpa-text);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Global Override of Legacy Bootstrap Blue Elements */
a {
    color: var(--cpa-red);
    text-decoration: none;
}

a:hover {
    color: var(--cpa-red-hover);
}

.text-primary {
    color: var(--cpa-red) !important;
}

.text-info {
    color: var(--cpa-text) !important;
}

.btn-primary,
.bg-primary {
    background-color: var(--cpa-red) !important;
    border-color: var(--cpa-red) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.bg-primary:hover {
    background-color: var(--cpa-red-hover) !important;
    border-color: var(--cpa-red-hover) !important;
}

.btn-info,
.bg-info {
    background-color: var(--cpa-text) !important;
    border-color: var(--cpa-text) !important;
    color: #ffffff !important;
}

.alert-primary {
    background-color: var(--cpa-bg-alt) !important;
    color: var(--cpa-text) !important;
    border-color: var(--cpa-border) !important;
}

/* Header & Top Bar */
.cpa-topbar {
    background-color: #2c2c2c !important;
    color: #ffffff !important;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 3px solid var(--cpa-red) !important;
}

.cpa-topbar div,
.cpa-topbar p,
.cpa-topbar strong,
.cpa-topbar font {
    color: #ffffff !important;
}

.cpa-topbar .badge-light {
    background-color: #ffffff !important;
    color: #2c2c2c !important;
}

.cpa-topbar .badge-danger {
    background-color: var(--cpa-red) !important;
    color: #ffffff !important;
}

.cpa-topbar i {
    color: #ffffff !important;
    opacity: 0.85;
}

.cpa-topbar a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    opacity: 0.9;
}

.cpa-topbar a:hover {
    opacity: 1;
    color: #ffffff !important;
    text-decoration: underline !important;
}

#header,
#header-wrap,
.cpa-main-header {
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 3px solid var(--cpa-red) !important;
}

.cpa-brand-logo {
    max-height: 52px;
    width: auto;
}

/* Sub-page Header Banner: rojo institucional sólido, sin degrade */
.cpa-page-banner {
    background: var(--cpa-red);
    color: #ffffff;
    padding: 28px 0 34px 0;
    position: relative;
    margin-bottom: 25px;
}

.cpa-page-banner h1 {
    font-weight: 800;
    font-size: 24px;
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.cpa-page-banner p {
    color: #ffe5e5;
    margin: 0;
    font-size: 13px;
}

/* Cards & Containers */
.cpa-card {
    background: var(--cpa-card-bg);
    border-radius: 6px;
    border: 1px solid var(--cpa-border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
    overflow: hidden;
}

.cpa-card-header {
    background: #ffffff;
    border-bottom: 2px solid var(--cpa-bg-alt);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cpa-card-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--cpa-text);
    margin: 0;
    text-transform: uppercase;
}

.cpa-card-body {
    padding: 20px;
}

/* Tables */
.cpa-table-container {
    overflow-x: auto;
    border-radius: 6px;
    border: 1px solid var(--cpa-border);
}

.cpa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cpa-table th {
    background: var(--cpa-red);
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    text-align: left;
}

.cpa-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--cpa-border);
    color: var(--cpa-text);
}

.cpa-table tbody tr:hover {
    background-color: var(--cpa-bg-soft);
}

/* Status Badges: paleta reducida a 3 acentos (rojo / verde / gris neutro) */
.cpa-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cpa-badge-pendiente,
.cpa-badge-observado,
.cpa-badge-rechazado {
    background-color: #fdecea;
    color: var(--cpa-red-hover);
}

.cpa-badge-aprobado {
    background-color: var(--cpa-green-bg);
    color: var(--cpa-green);
}

.cpa-badge-neutral,
.cpa-badge-modulo {
    background-color: var(--cpa-bg-alt);
    color: var(--cpa-text);
    border: 1px solid var(--cpa-border);
}

/* Variantes solidas (sobre fondo oscuro, ej. topbar) */
.cpa-badge-red-inverse {
    background-color: var(--cpa-red);
    color: #ffffff;
    font-weight: 700;
    padding: 4px 8px;
}

.cpa-badge-neutral-inverse {
    background-color: #ffffff;
    color: var(--cpa-text);
    font-weight: 700;
    padding: 4px 8px;
}

/* Form Inputs & Buttons */
.cpa-form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--cpa-border);
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cpa-form-control:focus {
    outline: none;
    border-color: var(--cpa-red);
    box-shadow: 0 0 0 3px rgba(226, 6, 19, 0.12);
}

.cpa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    border: none;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
}

.cpa-btn-primary {
    background-color: var(--cpa-red);
    color: #ffffff !important;
}

.cpa-btn-primary:hover {
    background-color: var(--cpa-red-hover);
}

/* cpa-btn-accent: alias histórico, mismo estilo solido que primary (sin degrade) */
.cpa-btn-accent {
    background: var(--cpa-red);
    color: #ffffff !important;
}

.cpa-btn-accent:hover {
    background: var(--cpa-red-hover);
}

.cpa-btn-outline {
    background-color: transparent;
    border: 2px solid var(--cpa-red);
    color: var(--cpa-red) !important;
}

.cpa-btn-outline:hover {
    background-color: var(--cpa-red);
    color: #ffffff !important;
}

/* Quick Access Box Grid */
.cpa-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.cpa-quick-box {
    background: #ffffff;
    border: 1px solid var(--cpa-border);
    border-top: 3px solid var(--cpa-red);
    border-radius: 6px;
    padding: 18px 12px;
    text-align: center;
    text-decoration: none !important;
    color: var(--cpa-text) !important;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    transition: border-color 0.2s ease, color 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.cpa-quick-box:hover {
    border-color: var(--cpa-red);
    color: var(--cpa-red) !important;
}

.cpa-quick-box img {
    height: 42px;
    width: auto;
    object-fit: contain;
}

.cpa-quick-box-orange {
    border-top-color: var(--cpa-text) !important;
}

.cpa-quick-box-orange:hover {
    border-color: var(--cpa-text) !important;
    color: var(--cpa-text) !important;
}

/* Alias históricos "orange" -> gris neutro (el sistema no tiene naranja institucional) */
.text-cpa-orange {
    color: var(--cpa-text) !important;
}

.bg-cpa-orange {
    background-color: var(--cpa-text) !important;
    color: #ffffff !important;
}

.cpa-btn-orange,
.cpa-btn-secondary {
    background-color: var(--cpa-text);
    color: #ffffff !important;
}

.cpa-btn-orange:hover,
.cpa-btn-secondary:hover {
    background-color: #2c2c2c;
}

.cpa-btn-outline-orange {
    background-color: transparent;
    border: 2px solid var(--cpa-text);
    color: var(--cpa-text) !important;
}

.cpa-btn-outline-orange:hover {
    background-color: var(--cpa-text);
    color: #ffffff !important;
}

.cpa-badge-orange {
    background-color: var(--cpa-bg-alt);
    color: var(--cpa-text);
    border: 1px solid var(--cpa-border);
}

.cpa-alert-orange {
    background-color: var(--cpa-bg-alt);
    color: var(--cpa-text);
    border: 1px solid var(--cpa-border);
    border-radius: 4px;
    padding: 16px 20px;
}