/* ============================================================
   MEC Enhancements — Fase 3 (componentes ricos) + Fase 4 (tipografía / motion / microajustes)
   Se carga DESPUÉS de Hope-UI y light-theme-override para ganar especificidad
   sin necesidad de !important.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
    --mec-font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --mec-radius: 0.75rem;
    --mec-radius-sm: 0.5rem;
    --mec-radius-xs: 0.375rem;
    --mec-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --mec-shadow-md: 0 2px 8px rgba(15, 23, 42, .06);
    --mec-shadow-lg: 0 8px 24px rgba(15, 23, 42, .08);
    --mec-accent: #3a57e8;
    --mec-accent-soft: rgba(58, 87, 232, .12);
    --mec-success: #198754;
    --mec-warning: #f5a623;
    --mec-danger: #dc3545;
    --mec-info: #0d6efd;
    --mec-border-soft: rgba(15, 23, 42, .06);
}

/* ============================================================
   FASE 4 — Tipografía global Manrope
   ============================================================ */
body,
.navbar, .sidebar-base, .iq-sidebar,
.btn, .form-control, .form-select, .input-group-text,
.card, .card-title, .card-header, .card-body,
.dropdown-menu, .dropdown-item,
.table, .alert, .breadcrumb, .badge, .nav-link,
.modal-title, .modal-body, .toast {
    font-family: var(--mec-font-family);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--mec-font-family);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

body {
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   FASE 4 — Microajustes (sombras + radius)
   ============================================================ */
.card {
    border-radius: var(--mec-radius);
    box-shadow: var(--mec-shadow-md);
    border-color: var(--mec-border-soft);
    transition: box-shadow .2s ease, transform .2s ease;
}

.card:hover {
    box-shadow: var(--mec-shadow-lg);
}

.btn {
    border-radius: var(--mec-radius-xs);
}

.form-control, .form-select, .input-group-text {
    border-radius: var(--mec-radius-xs);
}

.badge {
    border-radius: var(--mec-radius-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.alert {
    border-radius: var(--mec-radius-sm);
    border: 1px solid var(--mec-border-soft);
}

/* ============================================================
   FASE 4 — Animaciones page-load (CSS-only, sin librerías)
   ============================================================ */
@keyframes mecFadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Sólo dentro del main y sólo cards directas en una row, para no animar
   cards anidadas o de modales/dropdowns */
.main-content .row > [class*="col-"] > .card {
    animation: mecFadeInUp .4s ease both;
}

.main-content .row > [class*="col-"]:nth-child(1) > .card { animation-delay:   0ms; }
.main-content .row > [class*="col-"]:nth-child(2) > .card { animation-delay:  40ms; }
.main-content .row > [class*="col-"]:nth-child(3) > .card { animation-delay:  80ms; }
.main-content .row > [class*="col-"]:nth-child(4) > .card { animation-delay: 120ms; }
.main-content .row > [class*="col-"]:nth-child(5) > .card { animation-delay: 160ms; }
.main-content .row > [class*="col-"]:nth-child(6) > .card { animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
    .main-content .row > [class*="col-"] > .card { animation: none; }
    .card { transition: none; }
}

/* ============================================================
   FASE 3 — Alinear cards en row (igual altura)
   Soluciona los KPI cards de dashboards y programa/show que
   tenían distintas alturas según contenido extra (badges, fechas).
   ============================================================ */
/* Stretch SOLO cuando:
   1. El col tiene una .card o .mec-kpi como hijo directo (sino es form generico)
   2. El col NO es un "full-width single" (col-12, col-sm-12, col solo) que
      tipicamente se usa como contenedor vertical de pagina (ej envios/show).
   Sin esta combinacion, los cols envoltura de pagina entera se vuelven flex
   y sus hijos colapsan en columnas. */
.main-content .row > [class*="col-"]:not(.col-12):not(.col-sm-12):not(.col):has(> .card),
.main-content .row > [class*="col-"]:not(.col-12):not(.col-sm-12):not(.col):has(> .mec-kpi),
.main-content .row > [class*="col-"]:not(.col-12):not(.col-sm-12):not(.col):has(> a > .card),
.main-content .row > [class*="col-"]:not(.col-12):not(.col-sm-12):not(.col):has(> a > .mec-kpi) {
    display: flex;
}
.main-content .row > [class*="col-"]:not(.col-12):not(.col-sm-12):not(.col) > .card,
.main-content .row > [class*="col-"]:not(.col-12):not(.col-sm-12):not(.col) > .mec-kpi,
.main-content .row > [class*="col-"]:not(.col-12):not(.col-sm-12):not(.col) > a:has(> .card),
.main-content .row > [class*="col-"]:not(.col-12):not(.col-sm-12):not(.col) > a:has(> .mec-kpi),
.main-content .row > [class*="col-"]:not(.col-12):not(.col-sm-12):not(.col) > a > .card,
.main-content .row > [class*="col-"]:not(.col-12):not(.col-sm-12):not(.col) > a > .mec-kpi {
    width: 100%;
    height: 100%;
    display: block;
}
.main-content .row > [class*="col-"]:not(.col-12):not(.col-sm-12):not(.col) > .card > .card-body,
.main-content .row > [class*="col-"]:not(.col-12):not(.col-sm-12):not(.col) > a > .card > .card-body {
    display: flex;
    flex-direction: column;
}
/* Empuja sub-info (badges, fechas) al fondo para que el bloque
   superior (label + valor) quede alineado en todas */
.main-content .row > [class*="col-"] > .card > .card-body > .mt-2:last-child,
.main-content .row > [class*="col-"] > .card > .card-body > div + .mt-2 {
    margin-top: auto;
    padding-top: 0.5rem;
}

/* ============================================================
   FASE 3 — KPI cards ricos (dashboard + programa show)
   ============================================================ */
.mec-kpi {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.mec-kpi .mec-kpi-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.mec-kpi .mec-kpi-label {
    font-size: .8rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    margin: 0 0 .25rem 0;
}

.mec-kpi .mec-kpi-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    color: #1f2937;
    font-variant-numeric: tabular-nums;
}

.mec-kpi.mec-kpi-primary .mec-kpi-value {
    font-size: 2.4rem;
}

.mec-kpi .mec-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    font-weight: 600;
    padding: .15rem .45rem;
    border-radius: 999px;
    margin-top: .5rem;
}

.mec-kpi .mec-kpi-trend.up   { background: rgba(25,135,84,.1);  color: #146c43; }
.mec-kpi .mec-kpi-trend.down { background: rgba(220,53,69,.1);  color: #b02a37; }
.mec-kpi .mec-kpi-trend.flat { background: rgba(108,117,125,.1);color: #6c757d; }

/* Icon-box prominente para KPI */
.mec-icon-box {
    width: 52px;
    height: 52px;
    border-radius: var(--mec-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.mec-kpi.mec-kpi-primary .mec-icon-box {
    width: 64px;
    height: 64px;
    font-size: 1.7rem;
}

.mec-icon-box.bg-primary-soft { background: rgba(58,87,232,.12);  color: #3a57e8; }
.mec-icon-box.bg-success-soft { background: rgba(25,135,84,.12);  color: #198754; }
.mec-icon-box.bg-warning-soft { background: rgba(245,166,35,.15); color: #b9770e; }
.mec-icon-box.bg-info-soft    { background: rgba(13,110,253,.10); color: #0d6efd; }
.mec-icon-box.bg-danger-soft  { background: rgba(220,53,69,.10);  color: #dc3545; }
.mec-icon-box.bg-secondary-soft { background: rgba(108,117,125,.10); color: #495057; }

/* Sparkline decorativo: absoluto al fondo, no empuja layout
   → KPI cards mantienen misma altura natural sin importar si tienen sparkline. */
.mec-sparkline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    pointer-events: none;
    opacity: .9;
}
.mec-sparkline canvas {
    width: 100% !important;
    height: 100% !important;
}
/* Padding inferior extra en la card primary para que el sparkline no toque el trend pill */
.mec-kpi.mec-kpi-primary .card-body {
    padding-bottom: 3rem;
}

/* KPI clickable: lift sutil al hover */
a.text-decoration-none > .mec-kpi { transition: transform .2s ease, box-shadow .2s ease; }
a.text-decoration-none:hover > .mec-kpi { transform: translateY(-2px); }

/* ============================================================
   FASE 3 — Header de programa con gradient sutil + status pills animados
   ============================================================ */
.mec-program-header {
    background: linear-gradient(135deg, rgba(58,87,232,.06) 0%, rgba(58,87,232,.01) 60%, rgba(255,255,255,0) 100%);
    border: 1px solid var(--mec-border-soft);
}

.mec-program-header .mec-program-title {
    font-weight: 700;
    color: var(--mec-accent);
    margin-bottom: .25rem;
}

/* Pill con dot animado */
.mec-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.mec-status-pill .mec-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    position: relative;
}

.mec-status-pill.mec-status-active .mec-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .35;
    animation: mecPulse 1.8s ease-out infinite;
}

@keyframes mecPulse {
    0%   { transform: scale(.6); opacity: .55; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

.mec-status-pill.mec-status-success { background: rgba(25,135,84,.10);  color: #146c43; }
.mec-status-pill.mec-status-warning { background: rgba(245,166,35,.15); color: #b9770e; }
.mec-status-pill.mec-status-danger  { background: rgba(220,53,69,.10);  color: #b02a37; }
.mec-status-pill.mec-status-muted   { background: rgba(108,117,125,.10);color: #6c757d; }
.mec-status-pill.mec-status-info    { background: rgba(13,110,253,.10); color: #0a58ca; }
.mec-status-pill.mec-status-primary { background: rgba(58,87,232,.10);  color: #2a3eb1; }

@media (prefers-reduced-motion: reduce) {
    .mec-status-pill .mec-dot::after { animation: none; }
}

/* ============================================================
   FASE 4 — Quick Nav (shortcuts a secciones de la pagina)
   Cards horizontales compactos con icon-box + label.
   Scroll-spy: marca .is-active el shortcut de la seccion visible.
   ============================================================ */
.mec-quick-nav {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}
.mec-quick-nav .mec-nav-card {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .9rem;
    background: #ffffff;
    border: 1px solid var(--mec-border-soft);
    border-radius: var(--mec-radius);
    box-shadow: var(--mec-shadow-md);
    text-decoration: none;
    color: #6b7280;
    font-weight: 600;
    font-size: .85rem;
    transition: transform .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
    min-width: 150px;
}
.mec-quick-nav .mec-nav-card:hover {
    transform: translateY(-1px);
    color: #1f2937;
    border-color: rgba(58,87,232,.30);
    box-shadow: 0 6px 18px rgba(15,23,42,.08);
}
.mec-quick-nav .mec-nav-card.is-active {
    color: #1f2937;
    border-color: rgba(58,87,232,.45);
    box-shadow: 0 4px 14px rgba(58,87,232,.18);
}
.mec-quick-nav .mec-nav-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}
.mec-quick-nav .mec-nav-label {
    white-space: nowrap;
}
@media (max-width: 575px) {
    .mec-quick-nav .mec-nav-card { min-width: 0; flex: 1; }
    .mec-quick-nav .mec-nav-label { display: none; }
}

/* ============================================================
   FASE 4 — Override global: badges saturados → pills suaves
   Aplica el estilo "pill" a todos los `.badge bg-*` del sistema sin
   tener que migrar 50+ vistas. Se excluyen:
   - Badges posicionados (counters de notificaciones sobre iconos):
     :not(.position-absolute) y :not(.rounded-pill.position-absolute)
   - Badges dentro de botones (no deberian existir pero por las dudas)
   - Badges con clase explicita .mec-keep-saturated (escape hatch)
   ============================================================ */
.badge.bg-primary:not(.position-absolute):not(.mec-keep-saturated),
.badge.bg-secondary:not(.position-absolute):not(.mec-keep-saturated),
.badge.bg-success:not(.position-absolute):not(.mec-keep-saturated),
.badge.bg-danger:not(.position-absolute):not(.mec-keep-saturated),
.badge.bg-warning:not(.position-absolute):not(.mec-keep-saturated),
.badge.bg-info:not(.position-absolute):not(.mec-keep-saturated),
.badge.bg-light:not(.position-absolute):not(.mec-keep-saturated),
.badge.bg-dark:not(.position-absolute):not(.mec-keep-saturated) {
    /* base pill */
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.1;
    border: 1px solid transparent;
    text-shadow: none;
}

/* No badges dentro de botones (algunos toolbars los usan como counters
   contextuales). Restauramos look bootstrap original ahi. */
.btn .badge,
button .badge {
    display: inline-block;
    padding: .25em .4em;
    border-radius: .25rem;
    border: 0;
    font-size: .75em;
    font-weight: 700;
}

/* Paleta suave (translucido + texto saturado) */
.badge.bg-primary:not(.position-absolute):not(.mec-keep-saturated) {
    background: rgba(58,87,232,.12)   !important;
    color: #2a3eb1                    !important;
}
.badge.bg-secondary:not(.position-absolute):not(.mec-keep-saturated) {
    background: rgba(108,117,125,.12) !important;
    color: #495057                    !important;
}
.badge.bg-success:not(.position-absolute):not(.mec-keep-saturated) {
    background: rgba(25,135,84,.12)   !important;
    color: #146c43                    !important;
}
.badge.bg-danger:not(.position-absolute):not(.mec-keep-saturated) {
    background: rgba(220,53,69,.12)   !important;
    color: #b02a37                    !important;
}
.badge.bg-warning:not(.position-absolute):not(.mec-keep-saturated) {
    background: rgba(245,166,35,.18)  !important;
    color: #b9770e                    !important;
}
.badge.bg-info:not(.position-absolute):not(.mec-keep-saturated) {
    background: rgba(13,110,253,.12)  !important;
    color: #0a58ca                    !important;
}
.badge.bg-light:not(.position-absolute):not(.mec-keep-saturated) {
    background: rgba(248,249,250,1)   !important;
    color: #495057                    !important;
    border-color: rgba(0,0,0,.06)     !important;
}
.badge.bg-dark:not(.position-absolute):not(.mec-keep-saturated) {
    background: rgba(33,37,41,.10)    !important;
    color: #212529                    !important;
}

/* En tablas, los badges con bg-warning text-dark / text-white quedan con
   texto forzado de bootstrap. Lo reseteamos para que herede del override. */
.badge.bg-warning.text-dark:not(.position-absolute):not(.mec-keep-saturated),
.badge.bg-success.text-white:not(.position-absolute):not(.mec-keep-saturated),
.badge.bg-info.text-white:not(.position-absolute):not(.mec-keep-saturated),
.badge.bg-primary.text-white:not(.position-absolute):not(.mec-keep-saturated),
.badge.bg-danger.text-white:not(.position-absolute):not(.mec-keep-saturated) {
    color: inherit !important;
}

/* ============================================================
   FASE 3 — Cards TDR refinadas (reportes/componentes)
   Sobreescriben las reglas de .reporte-card de la vista para
   darles más jerarquía sin romper.
   ============================================================ */
.reporte-card {
    border-radius: var(--mec-radius-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    width: 100%;
    box-sizing: border-box;
}

/* Asegurar que el contenedor col tambien estire el contenido a 100%
   (en algunos casos el flex de Bootstrap no estira <a> hijos). */
.row > [class*="col-"] > .reporte-card {
    width: 100%;
    display: block;
}

.reporte-card:hover,
.reporte-card:focus {
    transform: translateY(-3px);
    box-shadow: var(--mec-shadow-lg);
    border-color: var(--mec-accent);
}

.reporte-card .icono {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
    border-radius: var(--mec-radius-xs);
}

.reporte-card .reporte-titulo {
    font-size: 1rem;
    line-height: 1.25;
    color: #1f2937;
}

.reporte-card .reporte-metric {
    font-size: .8rem;
    color: #4b5563;
    font-weight: 500;
    margin-top: .15rem;
}

.reporte-card .tdr-tag {
    display: inline-block;
    background: var(--mec-accent-soft);
    color: var(--mec-accent);
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    margin-bottom: .35rem;
}

.reporte-card .ver-detalle {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-weight: 600;
    transition: gap .18s ease;
}

.reporte-card:hover .ver-detalle {
    gap: .5rem;
}

/* ============================================================
   FASE 3 — Tablas: hover de fila con border-left accent
   Aplica a tablas listado server-side y similares.
   ============================================================ */
.table.table-hover > tbody > tr {
    transition: background-color .15s ease, box-shadow .15s ease;
}

.table.table-hover > tbody > tr:hover > * {
    background-color: rgba(58, 87, 232, .035);
}

.table.table-hover > tbody > tr:hover > td:first-child {
    box-shadow: inset 3px 0 0 var(--mec-accent);
}

/* Botones de acción en celdas más compactos visualmente */
.table td .btn-group > .btn,
.table td .btn-sm {
    border-radius: var(--mec-radius-xs);
}

/* ============================================================
   Misc — focus visible mejorado
   ============================================================ */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.reporte-card:focus-visible {
    outline: 2px solid var(--mec-accent);
    outline-offset: 2px;
}

/* ============================================================
   FASE 3 — Section cards (dashboard de instrumento)
   ============================================================ */
.mec-section-card {
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--mec-radius, .75rem);
    background: #fff;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: box-shadow .2s ease;
    /* Simetría: misma altura entre cards de la misma fila + footer de acciones al fondo */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mec-section-card:hover {
    box-shadow: var(--mec-shadow-md);
}

.mec-section-card .mec-section-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem;
}

.mec-section-card .mec-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: .5rem;
    background: rgba(13,110,253,.08);
    color: #0d6efd;
    font-size: 1.25rem;
}

.mec-section-card .mec-section-title {
    font-weight: 700;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #1f2937;
    margin: 0;
}

.mec-section-card .mec-section-desc {
    color: #6b7280;
    font-size: .95rem;
    margin: .5rem 0 1rem;
    line-height: 1.5;
}

.mec-section-card .mec-section-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    /* Empuja las acciones al fondo del card para alinear botones entre cards de la misma fila */
    margin-top: auto;
}

.mec-section-card.mec-section-danger {
    border-color: rgba(220,53,69,.2);
}