/* =====================================================================
   PEEC-GT · Capa de tema "Moderno limpio"
   ---------------------------------------------------------------------
   Override sobre assets/css/template.css (DashForge / Bootstrap 4).
   NO edita el vendor minificado: solo redefine apariencia (colores,
   sidebar, header, tarjetas, botones, tablas, formularios, sombras).
   Cargar SIEMPRE despues de template.css.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
    /* Paleta institucional ICAP (derivada del logo de marca) */
    --peec-navy: #001e6c;          /* navy ICAP profundo (#001860/#00246C) */
    --peec-primary: #11489e;       /* azul ICAP medio (primary) */
    --peec-primary-700: #0e3c84;   /* hover */
    --peec-primary-800: #0a2e66;   /* active */
    --peec-accent: #86c1d9;        /* azul cielo ICAP para realces */

    --peec-ink: #1f2a44;           /* texto principal */
    --peec-muted: #64748b;         /* texto secundario */
    --peec-bg: #f3f5fb;            /* fondo de la app */
    --peec-line: #e7ebf3;          /* bordes/divisores suaves */

    --peec-radius: 16px;           /* radio de tarjetas */
    --peec-radius-sm: 10px;        /* radio de inputs/botones */
    --peec-shadow-sm: 0 1px 2px rgba(15, 42, 99, .06);
    --peec-shadow: 0 6px 18px -6px rgba(15, 42, 99, .18), 0 2px 6px -2px rgba(15, 42, 99, .10);
    --peec-shadow-lg: 0 18px 40px -12px rgba(15, 42, 99, .25);
    --peec-sidebar-w: 240px;
}

/* ---------------------------------------------------------------------
   Base / tipografia
   --------------------------------------------------------------------- */
body {
    font-family: "Inter", "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background-color: var(--peec-bg);
    color: var(--peec-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--peec-primary); }
a:hover { color: var(--peec-primary-700); }

/* ---------------------------------------------------------------------
   Sidebar: degradado azul de marca
   --------------------------------------------------------------------- */
.sidebar {
    width: var(--peec-sidebar-w);
    background-color: var(--peec-navy) !important;
    background-image: linear-gradient(195deg, #001a5e 0%, #06318a 52%, #0a3f9e 100%) !important;
    border-right: 0 !important;
    box-shadow: 4px 0 24px -10px rgba(15, 42, 99, .45) !important;
    /* NO redefinir position: el template usa position:fixed (en media query);
       fixed ya crea contexto para los pseudo-elementos decorativos. */
    overflow: hidden;
}

/* Objetos abstractos decorativos del sidebar */
.sidebar::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -100px;
    right: -120px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 32%, rgba(134, 193, 217, .38), rgba(134, 193, 217, 0) 68%);
    pointer-events: none;
}
.sidebar::after {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 90px;
    left: -90px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}
/* Anillo fino abstracto a media altura */
.sidebar-body::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 38%;
    right: -70px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 1.5px solid rgba(134, 193, 217, .18);
    pointer-events: none;
}
/* El contenido siempre por encima de las formas */
.sidebar-header,
.sidebar-body { position: relative; z-index: 1; }
.sidebar-body .nav-sidebar { position: relative; z-index: 1; }

/* Cabecera con panel claro para que el logo a color quede legible */
.sidebar-header {
    background: #ffffff;
    margin: 12px 12px 6px;
    height: auto !important;
    padding: 12px 10px;
    border-radius: var(--peec-radius);
    box-shadow: var(--peec-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-img { height: auto !important; max-height: 46px; width: auto; margin: 0 !important; }

.sidebar-body { padding: 14px 12px; }

/* Etiquetas de grupo */
.nav-sidebar .nav-label .content-label,
.content-label {
    color: rgba(255, 255, 255, .55) !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10.5px !important;
    font-weight: 700 !important;
}

/* Items */
.nav-sidebar .nav-link {
    color: rgba(255, 255, 255, .80) !important;
    border-radius: 10px;
    padding: 9px 12px !important;
    margin-bottom: 2px;
    font-weight: 500;
    transition: background-color .2s, color .2s;
}
.nav-sidebar .nav-link i { color: rgba(255, 255, 255, .65); transition: color .2s; }

.nav-sidebar .nav-link:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, .10);
}
.nav-sidebar .nav-link:hover i { color: #fff; }

/* Activo: realce claro + barra de acento, sin el gradiente viejo */
.nav-sidebar .nav-link.active {
    background-image: none !important;
    background-color: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    box-shadow: inset 3px 0 0 0 var(--peec-accent);
    font-weight: 600;
}
.nav-sidebar .nav-link.active i { color: var(--peec-accent); }

/* Subitems */
.nav-sub-link { color: rgba(255, 255, 255, .68) !important; border-radius: 8px; }
.nav-sub-link:hover { color: #fff !important; background-color: rgba(255, 255, 255, .08); }
.nav-sub-link.active { color: #fff !important; font-weight: 600; }
.nav-sub-link.active i { color: var(--peec-accent); }

/* Scrollbar del sidebar (perfect-scrollbar / nativo) */
.sidebar-body .ps__thumb-y,
.sidebar-body ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); }

/* Logo institucional al pie (uvg) sobre fondo azul */
div.footer-img img {
    background: rgba(255, 255, 255, .92);
    padding: 6px 8px;
    border-radius: 10px;
    box-shadow: var(--peec-shadow-sm);
}

/* ---------------------------------------------------------------------
   Header superior
   --------------------------------------------------------------------- */
.header {
    background: #ffffff;
    border-bottom: 1px solid var(--peec-line);
    box-shadow: 0 1px 0 rgba(15, 42, 99, .03);
}
.header-name-app {
    color: var(--peec-navy) !important;
    font-weight: 600 !important;
}
.header-date { color: var(--peec-muted); }
.header-date .fa-calendar-day { color: var(--peec-primary); }

.header-right .dropdown-loggeduser .avatar img {
    border: 2px solid #fff;
    box-shadow: var(--peec-shadow-sm);
}

/* ---------------------------------------------------------------------
   Breadcrumb / titulo de contenido
   --------------------------------------------------------------------- */
.content.content-page .content-header { padding-bottom: 10px; }
.breadcrumb {
    background-color: transparent !important;
    padding: 0 !important;
    margin-bottom: .35rem !important;
    font-size: 12.5px;
}
.breadcrumb-item a { color: var(--peec-muted); }
.breadcrumb-item.active { color: var(--peec-primary); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: #c2cbdb; }

.content-title {
    color: var(--peec-navy) !important;
    font-weight: 600 !important;
    letter-spacing: -.2px;
}

/* ---------------------------------------------------------------------
   Tarjetas
   --------------------------------------------------------------------- */
.card {
    border: 1px solid var(--peec-line) !important;
    border-radius: var(--peec-radius) !important;
    box-shadow: var(--peec-shadow) !important;
    overflow: hidden;
}
.card-header {
    background-color: #fff !important;
    border-bottom: 1px solid var(--peec-line) !important;
    padding: 1rem 1.25rem !important;
    font-weight: 600;
    color: var(--peec-ink);
}
.card-footer { background-color: #fff !important; border-top: 1px solid var(--peec-line) !important; }

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */
.btn {
    border-radius: var(--peec-radius-sm);
    font-weight: 500;
    transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background-color: var(--peec-primary) !important;
    border-color: var(--peec-primary) !important;
    box-shadow: 0 6px 14px -6px rgba(17, 72, 158, .55);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--peec-primary-700) !important;
    border-color: var(--peec-primary-700) !important;
}

.btn-outline-primary {
    color: var(--peec-primary) !important;
    border-color: var(--peec-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--peec-primary) !important;
    border-color: var(--peec-primary) !important;
    color: #fff !important;
}

.btn-success { box-shadow: 0 6px 14px -6px rgba(40, 167, 69, .55); }
.btn-danger  { box-shadow: 0 6px 14px -6px rgba(220, 53, 69, .55); }

/* Columna de acciones: iconos siempre en una fila, centrados y sin
   apilarse. Usa la clase reutilizable .acciones-tabla en el wrapper;
   se mantiene el selector de <div align="center"> como compatibilidad. */
.acciones-tabla,
td div[align="center"] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
/* Variantes de alineacion opcionales para la columna de acciones */
.acciones-tabla.acciones-start { justify-content: flex-start; }
.acciones-tabla.acciones-end   { justify-content: flex-end; }

.acciones-tabla form,
td div[align="center"] form { margin: 0; line-height: 0; }
.acciones-tabla .btn-icon,
td div[align="center"] .btn-icon { margin: 0; }

/* Botones de accion (iconos) en tablas: cuadrados redondeados,
   "soft" en reposo y rellenos en hover, con leve elevacion. */
.btn-icon {
    width: 34px;
    height: 34px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    border-width: 1px;
    line-height: 1;
    margin: 0 2px;
    vertical-align: middle;
    transition: transform .12s ease, box-shadow .15s ease,
                background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-icon.btn-sm { width: 32px; height: 32px; }
.btn-icon i { font-size: 13.5px; line-height: 1; }
.btn-icon:hover { transform: translateY(-1px); }
.btn-icon:active { transform: translateY(0); }
.btn-icon:focus { box-shadow: 0 0 0 3px rgba(17, 72, 158, .15); }

/* Variante: Ver (info) */
.btn-icon.btn-outline-info { color: #0e7fa8; border-color: #cfe6f3; background: #eef7fc; }
.btn-icon.btn-outline-info:hover {
    color: #fff; background: #0ea5cf; border-color: #0ea5cf;
    box-shadow: 0 5px 12px -4px rgba(14, 165, 207, .6);
}
/* Variante: Editar (primary) */
.btn-icon.btn-outline-primary { border-color: #cdd9f0; background: #eef2fb; }
.btn-icon.btn-outline-primary:hover {
    box-shadow: 0 5px 12px -4px rgba(17, 72, 158, .6);
}
/* Variante: Inactivar / eliminar (danger) */
.btn-icon.btn-outline-danger { color: #d23a48; border-color: #f6d2d6; background: #fdeef0; }
.btn-icon.btn-outline-danger:hover {
    color: #fff; background: #e0303f; border-color: #e0303f;
    box-shadow: 0 5px 12px -4px rgba(224, 48, 63, .6);
}
/* Variante: Activar / confirmar (success) */
.btn-icon.btn-outline-success { color: #0f7a43; border-color: #cdebd9; background: #eef9f2; }
.btn-icon.btn-outline-success:hover {
    color: #fff; background: #1aa35a; border-color: #1aa35a;
    box-shadow: 0 5px 12px -4px rgba(26, 163, 90, .6);
}
/* Variante: secundaria */
.btn-icon.btn-outline-secondary { color: #5a6677; border-color: #dfe4ec; background: #f3f5f9; }
.btn-icon.btn-outline-secondary:hover {
    color: #fff; background: #6b7280; border-color: #6b7280;
    box-shadow: 0 5px 12px -4px rgba(107, 114, 128, .5);
}
/* Variante: advertencia (warning) */
.btn-icon.btn-outline-warning { color: #9a6a00; border-color: #f3e2b0; background: #fff7e3; }
.btn-icon.btn-outline-warning:hover {
    color: #fff; background: #e8930a; border-color: #e8930a;
    box-shadow: 0 5px 12px -4px rgba(232, 147, 10, .55);
}
/* Variante: morado (purple) */
.btn-icon.btn-outline-purple { color: #6a3fb5; border-color: #ddd0f2; background: #f3eefc; }
.btn-icon.btn-outline-purple:hover {
    color: #fff; background: #6f42c1; border-color: #6f42c1;
    box-shadow: 0 5px 12px -4px rgba(111, 66, 193, .6);
}
/* Variante: oscura (dark / navy) */
.btn-icon.btn-outline-dark { color: var(--peec-navy); border-color: #cfd6e4; background: #eef1f7; }
.btn-icon.btn-outline-dark:hover {
    color: #fff; background: var(--peec-navy); border-color: var(--peec-navy);
    box-shadow: 0 5px 12px -4px rgba(0, 30, 108, .55);
}
/* Variante: clara (light) */
.btn-icon.btn-outline-light { color: #5a6677; border-color: #e6e9f0; background: #f7f9fc; }
.btn-icon.btn-outline-light:hover {
    color: var(--peec-ink); background: #e7ecf4; border-color: #d8dfeb;
}

/* Botones solidos de iconos (sin "outline"): respetan el color de marca */
.btn-icon.btn-primary,
.btn-icon.btn-secondary,
.btn-icon.btn-success,
.btn-icon.btn-danger,
.btn-icon.btn-warning,
.btn-icon.btn-info,
.btn-icon.btn-purple,
.btn-icon.btn-dark { color: #fff; }
.btn-icon.btn-primary:hover,
.btn-icon.btn-secondary:hover,
.btn-icon.btn-success:hover,
.btn-icon.btn-danger:hover,
.btn-icon.btn-warning:hover,
.btn-icon.btn-info:hover,
.btn-icon.btn-purple:hover,
.btn-icon.btn-dark:hover { box-shadow: 0 5px 12px -4px rgba(15, 42, 99, .45); }

/* ---------------------------------------------------------------------
   Color "purple" (no existe en Bootstrap): boton solido y outline
   --------------------------------------------------------------------- */
.btn-purple {
    color: #fff !important;
    background-color: #6f42c1 !important;
    border-color: #6f42c1 !important;
    box-shadow: 0 6px 14px -6px rgba(111, 66, 193, .6);
}
.btn-purple:hover, .btn-purple:focus {
    background-color: #5e34a8 !important;
    border-color: #5e34a8 !important;
}
.btn-outline-purple {
    color: #6f42c1 !important;
    border-color: #6f42c1 !important;
    background-color: transparent;
}
.btn-outline-purple:hover {
    color: #fff !important;
    background-color: #6f42c1 !important;
    border-color: #6f42c1 !important;
}
.badge-purple { color: #fff !important; background-color: #6f42c1 !important; }
.text-purple { color: #6f42c1 !important; }
.bg-purple { background-color: #6f42c1 !important; }

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */
.form-control,
.custom-select {
    border: 1px solid #d3dbe7 !important;
    border-radius: var(--peec-radius-sm) !important;
    color: var(--peec-ink) !important;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus,
.custom-select:focus {
    border-color: var(--peec-primary) !important;
    box-shadow: 0 0 0 3px rgba(17, 72, 158, .15) !important;
}
.form-control::placeholder { color: #9aa6bd; }

label { color: var(--peec-ink); font-weight: 500; }

/* Autocomplete jQuery UI */
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background: var(--peec-primary) !important;
}

/* ---------------------------------------------------------------------
   Tablas / DataTables
   --------------------------------------------------------------------- */
.table thead th {
    background-color: #f4f7fc;
    color: var(--peec-muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .05em;
    font-weight: 700;
    padding: 12px 14px;
    border-bottom: 1px solid var(--peec-line) !important;
    border-top: 0 !important;
    white-space: nowrap;
}
.table tbody td {
    vertical-align: middle;
    padding: 11px 14px;
    border-top: 1px solid #eef1f7;
    color: var(--peec-ink);
    font-size: 13.5px;
}
/* Anula la densidad de "compact"/"table-sm" para un look mas aireado */
table.dataTable.compact tbody td,
table.dataTable.compact thead th,
.table-sm td, .table-sm th { padding: 11px 14px; }

/* Zebra + hover */
.table tbody tr:nth-child(even) td { background-color: #fafbfe; }
.table tbody tr:hover td,
.table-hover tbody tr:hover { background-color: rgba(17, 72, 158, .06); }
.table tbody tr { transition: background-color .12s ease; }
.table tbody tr:last-child td { border-bottom: 0; }

/* Esquinas redondeadas del encabezado dentro del panel */
table.dataTable thead th:first-child { border-top-left-radius: 10px; }
table.dataTable thead th:last-child  { border-top-right-radius: 10px; }

/* Iconos de orden mas discretos y con color de marca al activarse */
table.dataTable thead th { position: relative; }
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after { opacity: .28; font-size: .8em; }
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after { opacity: 1; color: var(--peec-primary); }

/* Panel tipo card para los listados (DataTables), coherente con el
   template: el listado va dentro de un panel blanco, igual que los
   formularios que ya usan .card. Aplica a todas las vistas index. */
.content-body .table-responsive { overflow: visible; }
@media (max-width: 767.98px) { .content-body .table-responsive { overflow-x: auto; } }
.content-body .dataTables_wrapper {
    background: #fff;
    border: 1px solid var(--peec-line);
    border-radius: var(--peec-radius);
    box-shadow: var(--peec-shadow);
    padding: 18px 20px 14px;
    margin-top: 14px;
}
.content-body .dataTables_wrapper .dataTables_length,
.content-body .dataTables_wrapper .dataTables_filter { margin-bottom: 14px; }
.content-body .dataTables_wrapper .dataTables_info,
.content-body .dataTables_wrapper .dataTables_paginate { margin-top: 14px; }
.content-body .dataTables_wrapper .table { margin-bottom: 0; }

/* Etiquetas de los controles */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--peec-muted);
    font-weight: 500;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* Selector "registros/pagina" */
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #d3dbe7;
    border-radius: var(--peec-radius-sm);
    padding: 6px 28px 6px 10px;
    color: var(--peec-ink);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* Buscador con icono de lupa */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #d3dbe7;
    border-radius: var(--peec-radius-sm);
    padding: 7px 12px 7px 34px;
    min-width: 240px;
    color: var(--peec-ink);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='9' cy='9' r='6' stroke='%2394a3b8' stroke-width='1.6'/%3E%3Cpath d='M14 14l3.5 3.5' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 16px;
    margin-left: 0;
}
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    outline: 0;
    border-color: var(--peec-primary);
    box-shadow: 0 0 0 3px rgba(17, 72, 158, .15);
}

/* Texto informativo y "sin resultados" */
.dataTables_wrapper .dataTables_info { color: var(--peec-muted); font-size: 12.5px; }
table.dataTable .dataTables_empty,
td.dataTables_empty { padding: 28px 12px; color: var(--peec-muted); font-style: italic; }

/* Indicador de procesamiento como tarjeta flotante */
.dataTables_wrapper .dataTables_processing {
    background: #fff !important;
    border: 1px solid var(--peec-line);
    border-radius: var(--peec-radius);
    box-shadow: var(--peec-shadow-lg);
    color: var(--peec-navy);
    font-weight: 600;
    padding: 14px 18px;
    box-sizing: border-box;
}

/* Paginacion */
.page-link { color: var(--peec-primary) !important; border-color: var(--peec-line) !important; }
.page-item.active .page-link,
.paginate_button.current {
    background-color: var(--peec-primary) !important;
    border-color: var(--peec-primary) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--peec-primary) !important;
    border: 1px solid var(--peec-primary) !important;
    border-radius: 9px;
    color: #fff !important;
    box-shadow: 0 4px 10px -4px rgba(17, 72, 158, .55);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 9px;
    border: 1px solid transparent;
    padding: 6px 12px;
    margin: 0;
    min-width: 36px;
    text-align: center;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #eef2fb !important;
    border: 1px solid var(--peec-line) !important;
    color: var(--peec-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: #c2cbdb !important;
    cursor: default;
}

/* ---------------------------------------------------------------------
   Dropdowns / badges
   --------------------------------------------------------------------- */
.dropdown-menu {
    border: 1px solid var(--peec-line);
    border-radius: var(--peec-radius);
    box-shadow: var(--peec-shadow-lg);
    padding: .4rem;
}
.dropdown-item { border-radius: 9px; padding: .5rem .75rem; }
.dropdown-item:hover, .dropdown-item:focus {
    background-color: #eef2fb;
    color: var(--peec-primary);
}
.dropdown-item i { width: 18px; text-align: center; }

/* ---------------------------------------------------------------------
   Badges / etiquetas tipo "pill" con colores suaves
   --------------------------------------------------------------------- */
.badge {
    border-radius: 999px;
    padding: .4em .72em;
    font-weight: 600;
    font-size: 75%;
    letter-spacing: .015em;
    line-height: 1.15;
    vertical-align: middle;
}
.badge-pill { border-radius: 999px; }
.badge-primary   { color: #fff !important;     background-color: var(--peec-primary) !important; }
.badge-success   { color: #0f7a43 !important;  background-color: #e3f6ec !important; }
.badge-secondary { color: #5a6677 !important;  background-color: #eef1f6 !important; }
.badge-danger    { color: #c5303f !important;  background-color: #fde9ec !important; }
.badge-warning   { color: #9a6a00 !important;  background-color: #fff3d6 !important; }
.badge-info      { color: #0e6aa8 !important;  background-color: #e4f1fb !important; }
.badge-light     { color: #5a6677 !important;  background-color: #f3f6fb !important; }
.badge-dark      { color: #fff !important;     background-color: var(--peec-navy) !important; }

/* ---------------------------------------------------------------------
   Alerts redondeadas
   --------------------------------------------------------------------- */
.alert {
    border-radius: var(--peec-radius);
    border: 1px solid transparent;
    box-shadow: var(--peec-shadow-sm);
}

/* ---------------------------------------------------------------------
   Tarjetas: encabezado con esquinas redondeadas y leve realce
   --------------------------------------------------------------------- */
.card-header {
    border-top-left-radius: var(--peec-radius) !important;
    border-top-right-radius: var(--peec-radius) !important;
}
.card-header strong { color: var(--peec-navy); }

/* ---------------------------------------------------------------------
   Select2 (formularios) acorde al estilo redondeado
   --------------------------------------------------------------------- */
.select2-container--default .select2-selection--single {
    height: calc(1.5em + .874rem + 2px) !important;
    border: 1px solid #d3dbe7 !important;
    border-radius: var(--peec-radius-sm) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + .874rem) !important;
    color: var(--peec-ink);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + .874rem) !important;
}
.select2-container--open .select2-selection--single {
    border-color: var(--peec-primary) !important;
    box-shadow: 0 0 0 3px rgba(17, 72, 158, .15);
}
.select2-dropdown {
    border: 1px solid #d3dbe7;
    border-radius: var(--peec-radius-sm);
    box-shadow: var(--peec-shadow);
    overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--peec-primary);
}

/* ---------------------------------------------------------------------
   Input groups / addons
   --------------------------------------------------------------------- */
.input-group-text {
    border: 1px solid #d3dbe7;
    background-color: #f3f6fb;
    color: var(--peec-muted);
}

/* ---------------------------------------------------------------------
   Modales (incluye bootbox) y notificaciones
   --------------------------------------------------------------------- */
.modal-content {
    border: 0;
    border-radius: var(--peec-radius);
    box-shadow: var(--peec-shadow-lg);
    overflow: hidden;
}
.modal-header, .modal-footer { border-color: var(--peec-line); }
.modal-header { background-color: #fff; }

#toast-container > div { border-radius: 12px; box-shadow: var(--peec-shadow); }

/* Progreso / list-group redondeados */
.progress { border-radius: 999px; }
.list-group { border-radius: var(--peec-radius); overflow: hidden; }

/* ---------------------------------------------------------------------
   Scrollbar global
   --------------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c4cee0; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #9fb0cf; background-clip: content-box; }