/* =====================================================================
   Sistema visual "Atlassian" -- lienzo blanco, paneles oscuros con confeti
   geométrico, un solo azul de acción, tarjetas de 20px y botones píldora.

   TODO cuelga de la clase .atl: una vista lo adopta envolviendo su contenido en
   <div class="atl"> (y .atl-page para limitarlo a 1200px). Nada fuera de ese
   contenedor cambia, así que se puede ir migrando módulo por módulo.

   Reglas del sistema (ver referencia):
   - #1868db es el ÚNICO color de acción (botones, enlaces, foco, pestaña activa).
   - Amarillo, violeta, azul claro y verde son DECORATIVOS (confeti, marco del
     avatar, subrayado); el único botón amarillo vive sobre el panel oscuro.
   - Sin sombras pesadas: la profundidad sale del radio y de la inversión de color.
   - Sombra, cuando hace falta, con el tinte navy rgba(9,30,66,...), nunca negra.
   - Charlie Display / Text no son públicas: se sustituyen por Manrope / Inter.
   ===================================================================== */

@import url("https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5/index.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource-variable/manrope@5/index.css");

.atl {
    /* Color */
    --atl-blue: #1868db;
    --atl-blue-hover: #1558bc;
    --atl-blue-press: #123263;
    --atl-blue-tint: #e9f2fe;
    --atl-ink: #101214;
    --atl-edge: #292a2e;
    --atl-slate: #1c2b42;
    --atl-muted: #42526e;
    --atl-fog: #f0f1f2;
    --atl-ash: #b7b9be;
    --atl-yellow: #fca700;
    --atl-yellow-hover: #e59900;
    --atl-lavender: #eed7fc;
    --atl-violet: #bf63f3;
    --atl-sky: #4d8ced;
    --atl-leaf: #22a06b;

    /* Forma */
    --atl-radius-card: 20px;
    --atl-radius-btn: 28px;
    --atl-radius-input: 8px;
    --atl-radius-img: 5px;
    --atl-shadow: rgba(9, 30, 66, 0.31) 0 0 1px 0, rgba(9, 30, 66, 0.25) 0 1px 1px 0;

    /* Tipografía */
    --atl-font-text: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --atl-font-display: "Manrope Variable", "Manrope", "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;

    font-family: var(--atl-font-text);
    font-size: 16px;
    line-height: 1.5;
    color: var(--atl-ink);
    -webkit-font-smoothing: antialiased;
}

.atl-page {
    max-width: 1200px;
    margin-inline: auto;
}

.atl .min-w-0 { min-width: 0; }

/* ---------- Texto ---------- */
.atl h1, .atl h2, .atl h3, .atl h4, .atl h5, .atl h6 {
    font-family: var(--atl-font-display);
    font-weight: 500;
    color: var(--atl-ink);
}

.atl .text-muted { color: var(--atl-muted) !important; }
.atl a:not(.btn):not(.dropdown-item):not(.nav-link) { color: var(--atl-blue); }
.atl a:not(.btn):not(.dropdown-item):not(.nav-link):hover { color: var(--atl-blue-hover); }
.atl strong, .atl .fw-semibold { font-weight: 600; }

.atl-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 14px;
    font-size: 20px;
    line-height: 1.4;
}

/* Subrayado amarillo "a mano" bajo la palabra clave (recurso editorial de la marca) */
.atl-scribble {
    padding-bottom: 7px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5 C 15 1, 25 8, 40 4 S 70 1, 99 5' fill='none' stroke='%23fca700' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100% / 100% 8px;
}

/* ---------- Panel oscuro (hero) con confeti geométrico ---------- */
.atl-hero {
    --atl-confetti-w: clamp(56px, 6vw, 110px);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: 24px;
    padding: 32px calc(var(--atl-confetti-w) + 20px);
    background: var(--atl-ink);
    color: #fff;
    border-radius: var(--atl-radius-card);
}

.atl-hero__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
}

/* La identidad cede espacio (el texto se parte) antes de que el bloque de vacaciones baje de línea */
.atl-hero__who {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1 1 420px;
    min-width: 0;
}

.atl-hero__eyebrow {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.atl .atl-hero__name {
    margin: 4px 0 6px;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.14;
    letter-spacing: 0.012em;
    color: #fff;
    overflow-wrap: anywhere;
}

.atl-hero__role {
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
}

.atl-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.atl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 10000px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.atl-chip .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--atl-leaf);
}

.atl-chip--off .dot { background: var(--atl-ash); }
.atl-chip--warn .dot { background: var(--atl-yellow); }
.atl-chip--bad .dot { background: #f15b50; }

.atl-hero__aside {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.atl-hero__stat-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.atl-hero__stat-value {
    font-family: var(--atl-font-display);
    font-size: 56px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.012em;
}

.atl-hero__stat-unit {
    font-family: var(--atl-font-text);
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}

/* Marco del avatar: el gradiente cónico violeta -> amarillo -> azul de la marca (una sola vez, no se repite) */
.atl-avatar-ring {
    flex: 0 0 auto;
    padding: 4px;
    border-radius: 50%;
    background: conic-gradient(var(--atl-violet) 170deg, var(--atl-yellow) 171deg, var(--atl-yellow) 230deg, var(--atl-sky) 231deg, var(--atl-sky) 360deg);
}

.atl-avatar-ring > img,
.atl-avatar-ring > div {
    display: block;
    border: 4px solid var(--atl-ink) !important;
}

/* Fragmentos "rasgados" que sangran por los bordes del panel */
.atl-confetti {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
    width: var(--atl-confetti-w);
    pointer-events: none;
}

.atl-confetti--l { left: 0; }
.atl-confetti--r { right: 0; }
.atl-confetti i { position: absolute; display: block; }

.atl-confetti--l i:nth-child(1) { top: -6%;  left: -12%; width: 78%; height: 34%; background: var(--atl-violet); clip-path: polygon(0 0, 100% 0, 72% 46%, 100% 100%, 0 100%); }
.atl-confetti--l i:nth-child(2) { top: 22%;  left: -8%;  width: 56%; height: 30%; background: var(--atl-yellow); clip-path: polygon(0 0, 86% 12%, 100% 58%, 52% 100%, 0 84%); }
.atl-confetti--l i:nth-child(3) { top: 50%;  left: -14%; width: 84%; height: 28%; background: var(--atl-sky);    clip-path: polygon(0 8%, 100% 0, 64% 52%, 94% 100%, 0 100%); }
.atl-confetti--l i:nth-child(4) { top: 74%;  left: -6%;  width: 50%; height: 32%; background: var(--atl-leaf);   clip-path: polygon(0 0, 100% 20%, 60% 100%, 0 100%); }

.atl-confetti--r i:nth-child(1) { top: -8%;  right: -6%;  width: 34%; height: 22%; background: var(--atl-leaf);   clip-path: polygon(100% 0, 0 0, 60% 100%, 100% 78%); }
.atl-confetti--r i:nth-child(2) { top: 8%;   right: -10%; width: 60%; height: 30%; background: var(--atl-yellow); clip-path: polygon(100% 0, 0 18%, 44% 62%, 0 100%, 100% 100%); }
.atl-confetti--r i:nth-child(3) { top: 36%;  right: -14%; width: 82%; height: 30%; background: var(--atl-sky);    clip-path: polygon(100% 0, 10% 6%, 58% 50%, 20% 100%, 100% 100%); }
.atl-confetti--r i:nth-child(4) { top: 64%;  right: -8%;  width: 56%; height: 28%; background: var(--atl-violet); clip-path: polygon(100% 0, 30% 16%, 74% 100%, 100% 100%); }

@media (max-width: 767.98px) {
    .atl-confetti { display: none; }
    .atl-hero { padding: 28px 20px; }
    .atl-hero__who { flex-wrap: wrap; }
    /* El bloque de vacaciones ocupa todo el ancho y sus botones se parten en líneas en vez de salirse del panel */
    .atl-hero__aside { flex: 1 1 100%; min-width: 0; align-items: stretch; }
}

/* ---------- Botones (píldora) ---------- */
.atl .btn {
    font-family: var(--atl-font-text);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.25;
    padding: 10px 22px;
    border-width: 1px;
    border-radius: var(--atl-radius-btn);
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.atl .btn-sm { font-size: 14px; padding: 6px 16px; }

.atl .btn:focus,
.atl .btn:active:focus,
.atl .btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--atl-blue);
}

/* Acción principal: azul plano. "Autorizar" también lo es. */
.atl .btn-primary,
.atl .btn-success {
    background-color: var(--atl-blue);
    border-color: var(--atl-blue);
    color: #fff;
}

.atl .btn-primary:hover,
.atl .btn-success:hover { background-color: var(--atl-blue-hover); border-color: var(--atl-blue-hover); color: #fff; }
.atl .btn-primary:active,
.atl .btn-success:active { background-color: var(--atl-blue-press) !important; border-color: var(--atl-blue-press) !important; }
.atl .btn-primary:disabled,
.atl .btn-success:disabled,
.atl .btn.disabled { opacity: 0.45; }

.atl .btn-secondary {
    background-color: var(--atl-fog);
    border-color: var(--atl-fog);
    color: var(--atl-ink);
}

.atl .btn-secondary:hover { background-color: #e2e4e6; border-color: #e2e4e6; color: var(--atl-ink); }

/* Fantasma: borde fino de tinta, sin relleno */
.atl .btn-outline-secondary,
.atl .btn-outline-primary,
.atl .btn-outline-success,
.atl .btn-outline-dark {
    background: transparent;
    border-color: var(--atl-ink);
    color: var(--atl-ink);
}

.atl .btn-outline-secondary:hover,
.atl .btn-outline-primary:hover,
.atl .btn-outline-success:hover,
.atl .btn-outline-dark:hover { background: var(--atl-fog); border-color: var(--atl-ink); color: var(--atl-ink); }

.atl .btn-outline-danger { background: transparent; border-color: #ae2e24; color: #ae2e24; }
.atl .btn-outline-danger:hover { background: #ffeceb; border-color: #ae2e24; color: #ae2e24; }

/* Los botones "light" viven en cabeceras que ahora son claras */
.atl .btn-outline-light { background: transparent; border-color: var(--atl-blue); color: var(--atl-blue); }
.atl .btn-outline-light:hover { background: var(--atl-blue-tint); border-color: var(--atl-blue); color: var(--atl-blue); }

/* Sobre panel oscuro: CTA amarillo (único lugar donde aparece) y fantasma blanco */
.atl .atl-btn-yellow { background: var(--atl-yellow); border-color: var(--atl-yellow); color: var(--atl-ink); }
.atl .atl-btn-yellow:hover { background: var(--atl-yellow-hover); border-color: var(--atl-yellow-hover); color: var(--atl-ink); }
.atl .atl-btn-ghost-light { background: transparent; border-color: #fff; color: #fff; }
.atl .atl-btn-ghost-light:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; color: #fff; }

/* Variante compacta del panel oscuro para páginas de lista/formulario (sin avatar) */
.atl-hero--compact { padding-top: 24px; padding-bottom: 24px; }
.atl-hero--compact .atl-hero__name { margin: 2px 0 4px; font-size: clamp(26px, 3.4vw, 36px); }

/* ---------- Filtros en píldora (nav-pills) ---------- */
.atl .nav-pills { gap: 8px; }
.atl .nav-pills .nav-link {
    padding: 8px 18px;
    border-radius: 10000px;
    background: var(--atl-fog);
    color: var(--atl-ink);
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.atl .nav-pills .nav-link:hover { background: #e2e4e6; }
.atl .nav-pills .nav-link.active { background: var(--atl-blue); color: #fff; }

/* ---------- Paginación ---------- */
.atl .pagination { gap: 4px; }
.atl .pagination .page-link { margin: 0; padding: 6px 12px; border: 1px solid var(--atl-fog); border-radius: 8px; color: var(--atl-blue); font-size: 14px; font-weight: 500; }
.atl .pagination .page-link:hover { background: var(--atl-blue-tint); border-color: var(--atl-blue-tint); color: var(--atl-blue); }
.atl .pagination .page-item.active .page-link { background: var(--atl-blue); border-color: var(--atl-blue); color: #fff; }
.atl .pagination .page-item.disabled .page-link { color: var(--atl-ash); background: transparent; }

/* ---------- Pestañas ---------- */
.atl .nav-tabs {
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 1px solid var(--atl-fog);
    scrollbar-width: thin;
}

.atl .nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -1px;
    padding: 12px 16px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--atl-muted);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.atl .nav-tabs .nav-link:hover { background: var(--atl-fog); color: var(--atl-ink); }
.atl .nav-tabs .nav-link.active { background: transparent; color: var(--atl-blue); border-bottom-color: var(--atl-blue); }
.atl .nav-tabs .nav-link:focus-visible { box-shadow: inset 0 0 0 2px var(--atl-blue); }

.atl .tab-content.atl-tab-content { padding: 24px 0 8px; border: 0; background: transparent; box-shadow: none; }

/* ---------- Tarjetas ---------- */
.atl .card {
    background: #fff;
    border: 1px solid var(--atl-fog);
    border-radius: var(--atl-radius-card);
    box-shadow: var(--atl-shadow) !important;
    overflow: hidden;
}

.atl .card-header,
.atl .card-header.bg-dark {
    padding: 20px 24px 4px;
    background: transparent !important;
    border-bottom: 0;
    color: var(--atl-ink) !important;
    font-family: var(--atl-font-display);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
}

.atl .card-header .bi { color: var(--atl-blue); }
/* Los botones dentro de una cabecera conservan el color de su propio texto */
.atl .card-header .btn .bi { color: inherit; }

/* Dato secundario a la derecha de una cabecera (contadores, resúmenes): texto normal, no título */
.atl .card-header.d-flex > span + span { font-family: var(--atl-font-text); font-size: 14px; font-weight: 400; color: var(--atl-muted); }
.atl .card-body { padding: 16px 24px 24px; }
.atl .card-footer { padding: 14px 24px; background: transparent; border-top: 1px solid var(--atl-fog); color: var(--atl-muted); font-size: 13px; }

/* Etiqueta / valor de los datos del expediente */
.atl .card-body .row > [class*="col-"] > .text-muted.small { font-size: 12px; font-weight: 500; letter-spacing: 0.02em; }
.atl .card-body .row > [class*="col-"] > .fw-semibold { font-size: 15px; }

/* ---------- Bloques de dato (Cardex) ---------- */
.atl-tile {
    height: 100%;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--atl-fog);
    border-radius: var(--atl-radius-card);
    box-shadow: var(--atl-shadow);
}

.atl-tile__label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--atl-muted); }
.atl-tile__label .bi { font-size: 15px; }
.atl-tile__value { margin-top: 6px; font-family: var(--atl-font-display); font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: 0.012em; color: var(--atl-ink); }
.atl-tile__hint { margin-top: 2px; font-size: 13px; color: var(--atl-muted); }

/* Lavanda: banda editorial (cumpleaños) -- texto oscuro sobre lavanda, nunca blanco */
.atl-tile--lavender { background: var(--atl-lavender); border-color: transparent; box-shadow: none; }
.atl-tile--lavender .atl-tile__label, .atl-tile--lavender .atl-tile__hint { color: var(--atl-slate); }
.atl-tile--lavender .bi { color: var(--atl-ink); }

/* Informativo: tinte azul con el valor en azul, tamaño normal (a diferencia de --tint, que agranda el número) */
.atl-tile--info { background: var(--atl-blue-tint); border-color: transparent; box-shadow: none; }
.atl-tile--info .atl-tile__label, .atl-tile--info .atl-tile__hint { color: var(--atl-slate); }
.atl-tile--info .atl-tile__value { color: var(--atl-blue); }

/* Aviso (por vencer) y alerta (vencido): tintes suaves con texto oscuro */
.atl-tile--warn { background: #fff7d6; border-color: transparent; box-shadow: none; }
.atl-tile--warn .atl-tile__label, .atl-tile--warn .atl-tile__hint { color: #533f04; }
.atl-tile--bad { background: #ffeceb; border-color: transparent; box-shadow: none; }
.atl-tile--bad .atl-tile__label, .atl-tile--bad .atl-tile__hint { color: #5d1f1a; }
.atl-tile--bad .atl-tile__value { color: #ae2e24; }

/* Avance por pasos (p. ej. contratos 1 a 4): una barra por paso, azul cuando ya se cumplió */
.atl-steps { display: flex; gap: 8px; margin-top: 14px; }
.atl-step { flex: 1; min-width: 0; }
.atl-step__bar { height: 8px; border-radius: 10000px; background: rgba(9, 30, 66, 0.12); }
.atl-step--done .atl-step__bar { background: var(--atl-blue); }
.atl-step__label { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--atl-muted); white-space: nowrap; }
.atl-step--done .atl-step__label { color: var(--atl-ink); }
.atl-step--done .atl-step__label .bi { color: var(--atl-blue); }

/* Tinte azul: dato clave (vacaciones disponibles) */
.atl-tile--tint { background: var(--atl-blue-tint); border-color: transparent; box-shadow: none; }
.atl-tile--tint .atl-tile__value { font-size: 56px; line-height: 1; color: var(--atl-blue); }

/* ---------- Píldoras ---------- */
.atl .badge {
    padding: 4px 10px;
    border-radius: 10000px;
    font-family: var(--atl-font-text);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
}

.atl .badge.bg-secondary { background: var(--atl-fog) !important; color: var(--atl-muted) !important; }
.atl .badge.bg-light { background: #fff !important; color: var(--atl-ink) !important; }
.atl .badge.border { border-color: var(--atl-ash) !important; }
.atl .badge.bg-primary,
.atl .badge.bg-info { background: var(--atl-blue-tint) !important; color: var(--atl-blue) !important; }
.atl .badge.bg-success { background: #dcfff1 !important; color: #164b35 !important; }
.atl .badge.bg-warning { background: #fff7d6 !important; color: #7f5f01 !important; }
.atl .badge.bg-danger { background: #ffeceb !important; color: #ae2e24 !important; }

/* ---------- Avisos ---------- */
.atl .alert { padding: 14px 18px; border: 0; border-radius: 12px; font-size: 14px; }
.atl .alert.shadow-sm { box-shadow: none !important; }
.atl .alert-warning { background: #fff7d6; color: #533f04; }
.atl .alert-info { background: var(--atl-blue-tint); color: var(--atl-slate); }
.atl .alert-danger { background: #ffeceb; color: #5d1f1a; }
.atl .alert-secondary { background: var(--atl-fog); color: var(--atl-ink); }

/* ---------- Tablas ---------- */
.atl .table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--atl-fog);
    --bs-table-border-color: var(--atl-fog);
    margin-bottom: 0;
    font-size: 14px;
}

.atl .table-light,
.atl .table-dark {
    --bs-table-bg: transparent;
    --bs-table-color: var(--atl-muted);
    --bs-table-border-color: var(--atl-fog);
}

.atl .table thead th {
    padding: 12px 16px;
    background: transparent;
    border-bottom: 1px solid var(--atl-fog);
    color: var(--atl-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.atl .table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--atl-fog); vertical-align: middle; }
.atl .table tbody tr:last-child td { border-bottom: 0; }
/* Tablas compactas con muchas columnas (listas): menos relleno para que los nombres no se partan */
.atl .table-sm thead th { padding: 10px 10px; }
.atl .table-sm tbody td { padding: 10px 10px; }
.atl .card .table-sm th:first-child, .atl .card .table-sm td:first-child { padding-left: 24px; }
.atl .card .table-sm th:last-child, .atl .card .table-sm td:last-child { padding-right: 24px; }
.atl .table-hover tbody tr:hover { background-color: transparent; }
.atl .card .table th:first-child, .atl .card .table td:first-child { padding-left: 24px; }
.atl .card .table th:last-child, .atl .card .table td:last-child { padding-right: 24px; }

/* ---------- Formularios ---------- */
.atl .form-label { margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--atl-muted); }

.atl .form-control,
.atl .form-select {
    padding: 10px 12px;
    background-color: #fff;
    border: 1px solid var(--atl-edge);
    border-radius: var(--atl-radius-input);
    color: var(--atl-ink);
    font-size: 15px;
}

/* Campos compactos (filtros): conservan su tamaño pequeño */
.atl .form-control-sm,
.atl .form-select-sm { padding: 6px 10px; font-size: 14px; }

.atl .form-control:hover,
.atl .form-select:hover { border-color: var(--atl-blue); }

.atl .form-control:focus,
.atl .form-select:focus {
    border-color: var(--atl-blue);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(24, 104, 219, 0.5);
}

/* ---------- Modal ---------- */
.atl .modal-content { overflow: hidden; border: 0; border-radius: var(--atl-radius-card); box-shadow: rgba(9, 30, 66, 0.31) 0 0 1px, rgba(9, 30, 66, 0.25) 0 8px 12px; }
.atl .modal-header, .atl .modal-footer { border: 0; padding: 20px 24px; }
.atl .modal-body { padding: 4px 24px 8px; }

/* ---------- Documentos (acordeón de tipos) ---------- */
.atl .border.rounded { border-color: var(--atl-fog) !important; border-radius: 12px !important; }
.atl .border-success-subtle { border-color: #b7ebd2 !important; }
.atl .documento-toggle { border-radius: 12px; }
.atl .documento-toggle:hover { background: var(--atl-fog); }
.atl .bg-light { background: var(--atl-fog) !important; }

/* ---------- Casillas, código en línea y avisos claros ---------- */
.atl .form-check-input { border-color: var(--atl-edge); }
.atl .form-check-input:checked { background-color: var(--atl-blue); border-color: var(--atl-blue); }
.atl .form-check-input:focus { border-color: var(--atl-blue); box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(24, 104, 219, 0.5); }
.atl code { padding: 2px 6px; border-radius: var(--atl-radius-img); background: var(--atl-fog); color: var(--atl-slate); font-size: 0.875em; }
.atl .alert-light { background: var(--atl-fog); color: var(--atl-ink); }

/* ---------- Auto-guardado de campos: el borde de estado gana al borde de tinta ---------- */
.atl .form-control.is-valid, .atl .form-select.is-valid { border-color: var(--atl-leaf); }
.atl .form-control.is-invalid, .atl .form-select.is-invalid { border-color: var(--bs-danger); }
.atl .form-control.is-valid:focus, .atl .form-select.is-valid:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(var(--bs-success-rgb), 0.45); }
.atl .form-control.is-invalid:focus, .atl .form-select.is-invalid:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(var(--bs-danger-rgb), 0.45); }
.atl .form-text { color: var(--atl-muted); font-size: 12px; }
.atl .input-group-text { background: var(--atl-fog); border: 1px solid var(--atl-edge); color: var(--atl-muted); font-size: 15px; }

/* Peligro sólido (confirmar una baja o un rechazo) */
.atl .btn-danger { background-color: #c9372c; border-color: #c9372c; color: #fff; }
.atl .btn-danger:hover { background-color: #ae2e24; border-color: #ae2e24; color: #fff; }

/* Cabeceras de modal de cualquier color: planas, y el color pasa al ícono del título */
.atl .modal-header[class*="bg-"] { background: transparent !important; color: var(--atl-ink) !important; }
.atl .modal-header .modal-title { font-family: var(--atl-font-display); font-size: 20px; font-weight: 500; }
.atl .modal-header .modal-title .bi { color: var(--atl-blue); }
.atl .modal-header.bg-danger .modal-title .bi { color: #ae2e24; }
.atl .modal-header.bg-success .modal-title .bi { color: var(--bs-success); }
.atl .modal-header.bg-warning .modal-title .bi { color: #b58105; }
.atl .modal-header.bg-info .modal-title .bi { color: #0aa2c0; }
.atl .modal-header.bg-secondary .modal-title .bi,
.atl .modal-header.bg-dark .modal-title .bi { color: var(--atl-muted); }
.atl .btn-close-white { filter: none; }

/* =====================================================================
   Modo .atl-native: conserva la PALETA ORIGINAL de la pantalla (colores de botones,
   insignias y tarjetas) y aplica solo la forma, la tipografía y los íconos del sistema.
   Se activa añadiendo .atl-native junto a .atl. Los tokens de confeti pasan a la paleta
   que ya usa el portal (amarillo, cian, verde y el azul claro del menú lateral).
   ===================================================================== */
.atl.atl-native {
    --atl-blue: var(--bs-primary);
    --atl-blue-hover: #0b5ed7;
    --atl-blue-tint: #e3f0ff;
    --atl-ink: #1a1f36;
    --atl-muted: #6b7280;
    --atl-violet: #90caf9;
    --atl-yellow: #ffc107;
    --atl-sky: #0dcaf0;
    --atl-leaf: #198754;
}

.atl.atl-native .btn-primary { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.atl.atl-native .btn-primary:hover { background-color: #0b5ed7; border-color: #0a58ca; }
.atl.atl-native .btn-success { background-color: var(--bs-success); border-color: var(--bs-success); color: #fff; }
.atl.atl-native .btn-success:hover { background-color: #157347; border-color: #146c43; }
.atl.atl-native .btn-info { background-color: var(--bs-info); border-color: var(--bs-info); color: #000; }
.atl.atl-native .btn-info:hover { background-color: #31d2f2; border-color: #25cff2; color: #000; }
.atl.atl-native .btn-warning { background-color: var(--bs-warning); border-color: var(--bs-warning); color: #000; }
.atl.atl-native .btn-warning:hover { background-color: #ffca2c; border-color: #ffc720; color: #000; }
.atl.atl-native .btn-danger { background-color: var(--bs-danger); border-color: var(--bs-danger); color: #fff; }
.atl.atl-native .btn-danger:hover { background-color: #bb2d3b; border-color: #b02a37; }
.atl.atl-native .btn-outline-primary { border-color: var(--bs-primary); color: var(--bs-primary); }
.atl.atl-native .btn-outline-primary:hover { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.atl.atl-native .btn-outline-danger { border-color: var(--bs-danger); color: var(--bs-danger); }
.atl.atl-native .btn-outline-danger:hover { background: var(--bs-danger); border-color: var(--bs-danger); color: #fff; }

.atl.atl-native .badge.bg-primary { background: var(--bs-primary) !important; color: #fff !important; }
.atl.atl-native .badge.bg-success { background: var(--bs-success) !important; color: #fff !important; }
.atl.atl-native .badge.bg-danger { background: var(--bs-danger) !important; color: #fff !important; }
.atl.atl-native .badge.bg-info { background: var(--bs-info) !important; color: #000 !important; }
.atl.atl-native .badge.bg-warning { background: var(--bs-warning) !important; color: #000 !important; }
.atl.atl-native .badge.bg-secondary { background: var(--bs-secondary) !important; color: #fff !important; }

.atl.atl-native .btn-secondary { background-color: var(--bs-secondary); border-color: var(--bs-secondary); color: #fff; }
.atl.atl-native .btn-secondary:hover { background-color: #5c636a; border-color: #565e64; color: #fff; }
.atl .alert-success { background: #dcfff1; color: #164b35; }

/* ---------- Menú de un módulo (tarjetas por sección, cada una con su color) ---------- */
.atl-menu .card.border-primary { --mod: var(--bs-primary); }
.atl-menu .card.border-success { --mod: var(--bs-success); }
.atl-menu .card.border-info { --mod: var(--bs-info); }
.atl-menu .card.border-warning { --mod: var(--bs-warning); }
.atl-menu .card.border-danger { --mod: var(--bs-danger); }
.atl-menu .card.border-dark { --mod: var(--bs-dark); }
.atl-menu .card.border-secondary { --mod: var(--bs-secondary); }

/* La cabecera de color sólido pasa a cabecera clara: el color sigue en el contorno, el ícono y el botón de cada tarjeta */
.atl-menu .modulo-card,
.atl-menu .hover-card { border-radius: var(--atl-radius-card); }
.atl-menu .modulo-card:hover,
.atl-menu .hover-card:hover { transform: translateY(-2px); box-shadow: rgba(9, 30, 66, 0.31) 0 0 1px 0, rgba(9, 30, 66, 0.25) 0 4px 8px 0 !important; }
.atl-menu .modulo-card .card-header,
.atl-menu .modulo-card .card-header[class*="bg-"] {
    padding: 22px 24px 0;
    background: transparent !important;
    border-bottom: 0 !important;
    color: var(--atl-ink) !important;
}
.atl-menu .modulo-card .card-header h5 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-family: var(--atl-font-display);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--atl-ink);
}
.atl-menu .modulo-card .card-header h5 > i.bi:first-child {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.25rem;
    color: var(--mod, var(--atl-blue));
    background: color-mix(in srgb, var(--mod, var(--atl-blue)) 14%, transparent);
}
.atl-menu .modulo-card .card-body { padding: 14px 24px 24px; }
.atl-menu .modulo-card .card-text { margin-bottom: 18px; color: var(--atl-muted); font-size: 14px; }

/* Botones de contorno: en modo nativo conservan su color original (no el gris de tinta del sistema) */
.atl.atl-native .btn-outline-secondary { border-color: var(--bs-secondary); color: var(--bs-secondary); }
.atl.atl-native .btn-outline-secondary:hover { background: var(--bs-secondary); border-color: var(--bs-secondary); color: #fff; }
.atl.atl-native .btn-outline-success { border-color: var(--bs-success); color: var(--bs-success); }
.atl.atl-native .btn-outline-success:hover { background: var(--bs-success); border-color: var(--bs-success); color: #fff; }
.atl.atl-native .btn-outline-warning { background: transparent; border-color: var(--bs-warning); color: var(--bs-warning); }
.atl.atl-native .btn-outline-warning:hover { background: var(--bs-warning); border-color: var(--bs-warning); color: #000; }
.atl.atl-native .btn-outline-dark { border-color: var(--bs-dark); color: var(--bs-dark); }
.atl.atl-native .btn-outline-dark:hover { background: var(--bs-dark); border-color: var(--bs-dark); color: #fff; }

/* Estado seleccionado / activo de los botones de contorno (radios .btn-check, .active): mismo relleno que el hover.
   Sin esto, el color de contorno fijado arriba le gana al de Bootstrap y el texto queda del mismo color que el fondo. */
.atl.atl-native .btn-check:checked + .btn-outline-primary, .atl.atl-native .btn-outline-primary.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.atl.atl-native .btn-check:checked + .btn-outline-secondary, .atl.atl-native .btn-outline-secondary.active { background: var(--bs-secondary); border-color: var(--bs-secondary); color: #fff; }
.atl.atl-native .btn-check:checked + .btn-outline-success, .atl.atl-native .btn-outline-success.active { background: var(--bs-success); border-color: var(--bs-success); color: #fff; }
.atl.atl-native .btn-check:checked + .btn-outline-danger, .atl.atl-native .btn-outline-danger.active { background: var(--bs-danger); border-color: var(--bs-danger); color: #fff; }
.atl.atl-native .btn-check:checked + .btn-outline-warning, .atl.atl-native .btn-outline-warning.active { background: var(--bs-warning); border-color: var(--bs-warning); color: #000; }
.atl.atl-native .btn-check:checked + .btn-outline-dark, .atl.atl-native .btn-outline-dark.active { background: var(--bs-dark); border-color: var(--bs-dark); color: #fff; }

/* =====================================================================
   Modo .atl-solid-headers (junto a .atl-native): las cabeceras de tarjeta y de modal
   CONSERVAN su color sólido original (oscuro, azul, verde...) y solo cambian de forma:
   esquinas de 20 px, relleno y tipografía.
   ===================================================================== */
.atl .card > .card-header:first-child {
    border-top-left-radius: calc(var(--atl-radius-card) - 1px);
    border-top-right-radius: calc(var(--atl-radius-card) - 1px);
}
.atl.atl-solid-headers .card-header[class*="bg-"] {
    padding: 14px 22px;
    border-bottom: 0 !important;
    font-family: var(--atl-font-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}
.atl.atl-solid-headers .card-header.bg-dark { background: var(--bs-dark) !important; color: #fff !important; }
.atl.atl-solid-headers .card-header.bg-primary { background: var(--bs-primary) !important; color: #fff !important; }
.atl.atl-solid-headers .card-header.bg-success { background: var(--bs-success) !important; color: #fff !important; }
.atl.atl-solid-headers .card-header.bg-danger { background: var(--bs-danger) !important; color: #fff !important; }
.atl.atl-solid-headers .card-header.bg-info { background: var(--bs-info) !important; color: #fff !important; }
.atl.atl-solid-headers .card-header.bg-warning { background: var(--bs-warning) !important; color: #212529 !important; }
.atl.atl-solid-headers .card-header.bg-secondary { background: var(--bs-secondary) !important; color: #fff !important; }
/* Modo .atl-tema-headers (junto a .atl-solid-headers): en las pantallas que cargan _TemaStyles, las cabeceras de color
   (primary, info, success, danger, warning) siguen el color de tema de la base de datos activa (--color-tema), igual que
   antes de migrarlas. dark, secondary y light conservan su color propio. */
.atl.atl-solid-headers.atl-tema-headers .card-header.bg-primary,
.atl.atl-solid-headers.atl-tema-headers .card-header.bg-info,
.atl.atl-solid-headers.atl-tema-headers .card-header.bg-success,
.atl.atl-solid-headers.atl-tema-headers .card-header.bg-danger,
.atl.atl-solid-headers.atl-tema-headers .card-header.bg-warning { background: var(--color-tema, #212529) !important; color: #fff !important; }
.atl.atl-solid-headers .card-header[class*="bg-"] .bi { color: inherit; }
/* Los títulos (h1-h6) dentro de una cabecera sólida toman el color de esa cabecera, no el de tinta de los títulos del sistema */
.atl.atl-solid-headers .card-header[class*="bg-"] :is(h1, h2, h3, h4, h5, h6),
.atl.atl-solid-headers .modal-header[class*="bg-"] .modal-title { color: inherit; }

.atl.atl-solid-headers .modal-header[class*="bg-"] .modal-title .bi { color: inherit; }
.atl.atl-solid-headers .modal-header .modal-title { font-family: var(--atl-font-text); font-size: 17px; font-weight: 600; }
.atl.atl-solid-headers .modal-header.bg-dark { background: var(--bs-dark) !important; color: #fff !important; }
.atl.atl-solid-headers .modal-header.bg-primary { background: var(--bs-primary) !important; color: #fff !important; }
.atl.atl-solid-headers .modal-header.bg-success { background: var(--bs-success) !important; color: #fff !important; }
.atl.atl-solid-headers .modal-header.bg-danger { background: var(--bs-danger) !important; color: #fff !important; }
.atl.atl-solid-headers .modal-header.bg-info { background: var(--bs-info) !important; color: #fff !important; }
.atl.atl-solid-headers .modal-header.bg-warning { background: var(--bs-warning) !important; color: #212529 !important; }
.atl.atl-solid-headers .modal-header.bg-secondary { background: var(--bs-secondary) !important; color: #fff !important; }
.atl.atl-solid-headers .modal-header .btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }

/* Número de paso en la cabecera de una tarjeta (flujos de varios pasos) */
.atl .atl-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* Encabezado fijo (sticky) de una tabla con scroll: lleva fondo para que las filas no pasen por debajo del texto */
.atl .table thead[style*="sticky"] th,
.atl .table thead.sticky-top th { background: #fff; }

/* Pie fijo (sticky) de una tarjeta: no se recorta la tarjeta (overflow) para que siga pegado al borde de la pantalla, y lleva fondo para no transparentar el contenido que pasa por debajo */
.atl .card.atl-card-visible { overflow: visible; }
.atl .card.atl-card-visible > .card-footer:last-child {
    border-bottom-left-radius: calc(var(--atl-radius-card) - 1px);
    border-bottom-right-radius: calc(var(--atl-radius-card) - 1px);
}
.atl .card-footer[style*="position: sticky"] { background: #fff; }

/* ---------- Inicio ---------- */
/* El saludo conserva su degradado azul actual */
.atl-hero--brand { background: linear-gradient(135deg, #1565c0 0%, #283593 100%); }

/* Tarjetas de acceso rápido: ícono en cuadro redondeado del color del módulo, a la izquierda del nombre */
.atl-inicio .modulo-card {
    border: 1px solid var(--atl-fog);
    border-radius: var(--atl-radius-card);
    box-shadow: var(--atl-shadow);
    background: #fff;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.atl-inicio .modulo-card:hover { transform: translateY(-2px); box-shadow: rgba(9, 30, 66, 0.31) 0 0 1px 0, rgba(9, 30, 66, 0.25) 0 4px 8px 0; }
.atl-inicio .modulo-card .card-body { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.atl-inicio .modulo-icon { flex: 0 0 auto; width: 44px; height: 44px; margin: 0; border-radius: 12px; font-size: 1.25rem; }
.atl-inicio .modulo-card h6 { margin: 0 !important; font-family: var(--atl-font-display); font-size: 15px; font-weight: 600; color: var(--atl-ink); }

/* Avisos y pendientes: mismas tarjetas, y el ícono del título pasa a un cuadro tenue del color que ya tenía */
.atl-inicio .noticia-card { border-radius: var(--atl-radius-card); box-shadow: var(--atl-shadow); }
/* La franja de color (border-start) sigue siendo solo del lado izquierdo, en el color de cada tarjeta; el resto del borde es fino y neutro */
.atl-inicio .noticia-card.border-start {
    border-top-width: 1px !important;
    border-right-width: 1px !important;
    border-bottom-width: 1px !important;
    border-left-width: 4px !important;
    border-top-color: var(--atl-fog) !important;
    border-right-color: var(--atl-fog) !important;
    border-bottom-color: var(--atl-fog) !important;
}
.atl-inicio .noticia-card .card-body { padding: 18px 22px; }
.atl-inicio .noticia-card h6 { font-family: var(--atl-font-display); font-weight: 600; color: var(--atl-ink); }
.atl-inicio .noticia-card h6 > i.bi:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 8px !important;
    border-radius: 8px;
    font-size: 15px;
    vertical-align: middle;
    background: color-mix(in srgb, currentColor 14%, transparent);
}
.atl-inicio .noticia-adjunto-imagen img, .atl-inicio .noticia-adjunto-archivo { border-radius: 8px; }
/* Los adjuntos conservan su gris original (la regla general de enlaces los pondría azules) */
.atl-inicio a.noticia-adjunto-archivo { color: #495057; }
.atl-inicio a.noticia-adjunto-archivo:hover { color: #212529; }

/* Ícono en su cuadro tenue (títulos de sección y de tarjeta): toma el color del texto en que se use, p. ej. text-primary */
.atl .atl-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 16px;
    background: color-mix(in srgb, currentColor 14%, transparent);
}

/* Variante grande del cuadro de ícono (fichas de resumen): 56 px con el ícono centrado */
.atl .atl-icon-chip--lg { width: 56px; height: 56px; border-radius: 16px; font-size: 1.75rem; }

/* Lista de registros recientes (list-group con filas-enlace): filas amplias, separador suave y resalte al pasar el cursor.
   El texto conserva el color de tinta (la regla general de enlaces lo pondría azul). */
.atl .list-group.atl-list { --bs-list-group-border-color: var(--atl-fog); --bs-list-group-bg: transparent; }
.atl .list-group.atl-list .list-group-item { padding: 14px 24px; }
.atl .list-group.atl-list > a.list-group-item.list-group-item-action { color: var(--atl-ink); }
.atl .list-group.atl-list > a.list-group-item.list-group-item-action:hover { background: var(--atl-blue-tint); color: var(--atl-ink); }

/* ---------- Pedidos (Listar / Detalle / Crear): componentes propios del módulo ----------
   Solo cambian la forma (esquinas, relleno, tipografía): las superficies, el acento azul de los
   campos y los colores de los botones PDF / correo siguen siendo los de pedidos-botones.css. */
.atl .pedido-panel { border-color: var(--atl-fog); border-radius: var(--atl-radius-card); box-shadow: var(--atl-shadow); }
.atl .pedido-panel-title { padding: 16px 24px; font-family: var(--atl-font-display); font-size: 18px; font-weight: 500; }
.atl .pedido-panel-body { padding: 20px 24px 24px; }
.atl .pedido-field { border-radius: 12px; }
.atl .pedido-label { font-size: 12px; font-weight: 600; }
.atl .pedido-resumen-compacto,
.atl .pedido-anticipo-card { border-color: var(--atl-fog); border-radius: var(--atl-radius-card); box-shadow: var(--atl-shadow); }
.atl .pedido-vacio { border-radius: 12px; }
/* Botón "+" de 44 px: sin el relleno de los botones del sistema para que el ícono no se recorte */
.atl .pedido-btn-agregar-icono { padding: 0; }
/* Los botones PDF y correo llevan !important en su forma: se iguala con la píldora del sistema */
.atl .btn.btn-pdf, .atl a.btn.btn-pdf,
.atl .btn.btn-email, .atl a.btn.btn-email { border-radius: 10000px !important; }

/* Select2 (tema bootstrap-5): mismo alto y forma que los demás campos del sistema */
.atl .select2-container--bootstrap-5 .select2-selection { min-height: 44px; border-color: var(--atl-edge); border-radius: var(--atl-radius-input); font-size: 15px; }
.atl .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.atl .select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--atl-blue); box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(24, 104, 219, 0.5); }

/* Movimiento reducido: sin transiciones */
@media (prefers-reduced-motion: reduce) {
    .atl .btn, .atl .nav-tabs .nav-link { transition: none; }
}