body {
    font-size: .875rem;
    background-color: #f4f6fa;
}

/* =====================================================
   PALETA DE COLORES DE LA INTERFAZ
   Cada tarjeta define su color y su tinte; se reutilizan en
   tarjetas, indicadores y encabezados de grupo.
   ===================================================== */
.nav-card, .kpi-card, .nav-modulo-icono, .grupo-titulo {
    --nav-color: #0d6efd;
    --nav-tint:  #e7f1ff;
    --nav-ink:   #0a58ca;
}

.nav-card--primary, .kpi-card--primary, .grupo-titulo--primary   { --nav-color:#0d6efd; --nav-tint:#e7f1ff; --nav-ink:#0a58ca; }
.nav-card--secondary, .kpi-card--secondary, .grupo-titulo--secondary { --nav-color:#6c757d; --nav-tint:#eef0f2; --nav-ink:#495057; }
.nav-card--success, .kpi-card--success, .grupo-titulo--success   { --nav-color:#198754; --nav-tint:#e4f5ec; --nav-ink:#146c43; }
.nav-card--danger, .kpi-card--danger, .grupo-titulo--danger      { --nav-color:#dc3545; --nav-tint:#fdeaec; --nav-ink:#b02a37; }
.nav-card--warning, .kpi-card--warning, .grupo-titulo--warning   { --nav-color:#e0a106; --nav-tint:#fff6e0; --nav-ink:#a97c00; }
.nav-card--info, .kpi-card--info, .grupo-titulo--info            { --nav-color:#0aa2c0; --nav-tint:#e2f6fa; --nav-ink:#087990; }
.nav-card--dark, .kpi-card--dark, .grupo-titulo--dark            { --nav-color:#343a40; --nav-tint:#eceef0; --nav-ink:#1d2124; }
.nav-card--purple, .grupo-titulo--purple  { --nav-color:#6f42c1; --nav-tint:#efe9fb; --nav-ink:#59359a; }
.nav-card--teal, .grupo-titulo--teal      { --nav-color:#0f766e; --nav-tint:#e0f4f1; --nav-ink:#0b5c56; }
.nav-card--orange, .grupo-titulo--orange  { --nav-color:#d9480f; --nav-tint:#fdece1; --nav-ink:#b23a0c; }
.nav-card--pink, .grupo-titulo--pink      { --nav-color:#c2255c; --nav-tint:#fdeaf1; --nav-ink:#a11d4c; }
.nav-card--indigo, .grupo-titulo--indigo  { --nav-color:#3b3bb3; --nav-tint:#e9e9fb; --nav-ink:#2f2f8f; }
.nav-card--slate, .grupo-titulo--slate    { --nav-color:#475569; --nav-tint:#eaeef4; --nav-ink:#364152; }
.nav-card--cyan, .grupo-titulo--cyan      { --nav-color:#0e7490; --nav-tint:#e1f3f8; --nav-ink:#0b5b70; }

/* =====================================================
   TARJETAS DE NAVEGACIÓN (PRIMER Y SEGUNDO NIVEL)
   ===================================================== */
.nav-card {
    position: relative;
    border: 1px solid #e6e9ef;
    border-top: 4px solid var(--nav-color);
    border-radius: .75rem;
    background: #fff;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.nav-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, var(--nav-tint) 0%, transparent 60%);
    opacity: .8;
    pointer-events: none;
}

.nav-card:hover {
    transform: translateY(-3px);
    border-color: var(--nav-color);
    box-shadow: 0 .5rem 1rem rgba(33, 37, 41, .12);
}

.nav-card__link {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    height: 100%;
    padding: 1.15rem .85rem 1rem;
    text-align: center;
    text-decoration: none;
    color: #212529;
}

.nav-card__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 1rem;
    background: var(--nav-tint);
    color: var(--nav-color);
    font-size: 1.75rem;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}

.nav-card__icono--sm {
    width: 48px;
    height: 48px;
    font-size: 1.45rem;
    border-radius: .85rem;
}

.nav-card__nombre {
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.25;
    color: #1f2937;
}

.nav-card__mas {
    font-size: .75rem;
    color: var(--nav-ink);
    opacity: .85;
}

.nav-card__fav {
    position: absolute;
    top: .35rem;
    right: .35rem;
    z-index: 3;
}

.btn-star {
    border: 0;
    background: rgba(255, 255, 255, .85);
    color: #c3c9d2;
    padding: .2rem .4rem;
    line-height: 1;
    font-size: 1.1rem;
    border-radius: .35rem;
    transition: color .15s ease, transform .15s ease, background .15s ease;
}

.btn-star:hover,
.btn-star:focus-visible {
    color: #f0a500;
    background: #fff8e6;
    transform: scale(1.12);
}

.btn-star.is-fav {
    color: #f0a500;
    text-shadow: 0 0 1px rgba(240, 165, 0, .5);
}

/* Tarjetas de acción (segundo nivel): algo más compactas */
.nav-card--accion {
    border-top-width: 2px;
}

.nav-card--accion .nav-card__link {
    padding: .95rem .8rem;
}

/* Encabezado de módulo */
.nav-modulo-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: .85rem;
    background: var(--nav-tint);
    color: var(--nav-color);
    font-size: 1.5rem;
}

/* Título de grupo con marca de color */
.grupo-titulo {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--nav-ink) !important;
}

.grupo-titulo::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--nav-color);
    display: inline-block;
}

/* =====================================================
   INDICADORES
   ===================================================== */
.kpi-card {
    border: 1px solid #e6e9ef;
    border-left: 5px solid var(--nav-color) !important;
    border-radius: .75rem;
    background: linear-gradient(180deg, var(--nav-tint) 0%, #ffffff 70%);
}

.kpi-card__label {
    color: #5c636a;
    font-size: .8rem;
    line-height: 1.2;
}

.kpi-card__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: .6rem;
    background: #fff;
    color: var(--nav-color);
    font-size: 1.05rem;
}

.kpi-card__valor {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--nav-ink);
    margin: .35rem 0 .25rem;
}

.kpi-card__link {
    font-size: .8rem;
    text-decoration: none;
    color: var(--nav-ink);
    font-weight: 600;
}

/* =====================================================
   CABECERA: ACCESOS RÁPIDOS Y MIGAS DE PAN
   Contraste alto: barra más oscura, "Inicio" con borde y
   favoritos como chips blancos con texto azul.
   ===================================================== */
.navbar.bg-primary {
    background-color: #0b4ea2 !important;   /* blanco sobre este azul ≈ 7,4:1 */
}

.accesos-rapidos .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #ffffff;
    font-weight: 600;
    font-size: .85rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .75);
    background-color: rgba(255, 255, 255, .10);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* "Inicio": pastilla con borde, texto blanco puro */
.accesos-rapidos .nav-item:first-child .nav-link {
    background-color: rgba(255, 255, 255, .18);
}

.accesos-rapidos .nav-link:hover,
.accesos-rapidos .nav-link:focus-visible {
    background-color: #ffffff;
    color: #0b4ea2;
    border-color: #ffffff;
    outline: none;
}

/* Favoritos: chip blanco con texto e icono azul (máximo contraste) */
.accesos-rapidos .nav-link.is-fav {
    background-color: #ffffff;
    color: #0b4ea2;
    border-color: #ffffff;
}

.accesos-rapidos .nav-link.is-fav i {
    color: #b8860b;   /* estrella implícita en ámbar para distinguirlos de Inicio */
}

.accesos-rapidos .nav-link.is-fav:hover,
.accesos-rapidos .nav-link.is-fav:focus-visible {
    background-color: #e7f1ff;
    color: #0b4ea2;
    border-color: #b6d4fe;
}

.migas-barra {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: .5rem;
}

.migas-barra .breadcrumb {
    margin-bottom: 0;
}

/* Aviso flotante al fijar/quitar accesos rápidos */
.aviso-flotante {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    min-width: 260px;
    max-width: 340px;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .18);
}

/* =====================================================
   AYUDA: BOTÓN FLOTANTE Y VENTANA DE CHAT
   ===================================================== */
.ayuda-boton {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1070;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: #0b4ea2;
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    box-shadow: 0 .5rem 1rem rgba(11, 78, 162, .35);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.ayuda-boton:hover,
.ayuda-boton:focus-visible {
    background: #0a4290;
    transform: translateY(-2px);
    box-shadow: 0 .75rem 1.4rem rgba(11, 78, 162, .45);
    color: #fff;
}

.ayuda-boton i {
    font-size: 1.15rem;
}

.ayuda-ventana {
    position: fixed;
    right: 1.25rem;
    bottom: 5.2rem;
    z-index: 1080;
    width: min(390px, calc(100vw - 2rem));
    height: min(560px, calc(100vh - 8rem));
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: .85rem;
    box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, .28);
    overflow: hidden;
}

.ayuda-ventana[hidden] {
    display: none;
}

.ayuda-ventana__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .65rem .85rem;
    background: #0b4ea2;
    color: #fff;
    font-weight: 600;
    font-size: .92rem;
}

.ayuda-ventana__cuerpo {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .85rem;
    background: #f6f8fc;
}

.ayuda-form--ventana {
    border-top: 1px solid #e9ecef;
    padding: .6rem .7rem;
    background: #fff;
}

.ayuda-mensajes {
    max-height: 55vh;
    overflow-y: auto;
    padding: .5rem;
    background: #f6f8fc;
    border-radius: .5rem;
}

.ayuda-burbuja {
    display: flex;
    gap: .55rem;
    margin-bottom: .85rem;
    align-items: flex-start;
}

.ayuda-burbuja--user {
    justify-content: flex-end;
}

.ayuda-avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e7f1ff;
    color: #0b4ea2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}

.ayuda-avatar--user {
    background: #e9ecef;
    color: #495057;
}

.ayuda-texto {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: .65rem;
    padding: .55rem .7rem;
    font-size: .86rem;
    line-height: 1.45;
    color: #212529;
    max-width: 84%;
    overflow-wrap: anywhere;
}

.ayuda-burbuja--user .ayuda-texto {
    background: #0b4ea2;
    border-color: #0b4ea2;
    color: #fff;
    max-width: 80%;
}

.ayuda-enlace {
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ayuda-chips .ayuda-chip {
    margin: 0 .25rem .35rem 0;
    border-radius: 999px;
}

.ayuda-sugerencias {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.ayuda-sugerencia {
    border-radius: 999px;
    font-size: .78rem;
    text-align: left;
}

.ayuda-panel .card-body {
    min-height: 320px;
}

@media (max-width: 575.98px) {
    .ayuda-boton__texto { display: none; }
    .ayuda-boton { padding: .75rem; }
    .ayuda-ventana { right: .5rem; left: .5rem; width: auto; }
}

/* =====================================================
   ADJUNTOS: GALERÍA DE FOTOS Y EVIDENCIAS
   ===================================================== */
.adjuntos-galeria {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.adjuntos-item {
    width: 150px;
    margin: 0;
    border: 1px solid #e6e9ef;
    border-radius: .5rem;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.adjuntos-item > a {
    display: block;
    aspect-ratio: 4 / 3;
    background: #f1f3f7;
    overflow: hidden;
}

.adjuntos-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .15s ease;
}

.adjuntos-item > a:hover img {
    transform: scale(1.05);
}

.adjuntos-item figcaption {
    padding: .35rem .45rem;
    font-size: .72rem;
    line-height: 1.25;
}

.adjuntos-item figcaption .text-truncate {
    display: block;
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .adjuntos-item { width: calc(50% - .4rem); }
}

/* =====================================================
   COMPONENTES GENERALES
   ===================================================== */
.card {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
}

.table th {
    background-color: #f1f3f5;
    font-weight: 600;
}

.btn-action {
    padding: .15rem .4rem;
    font-size: .8rem;
}

.alert {
    border: none;
}