/* ==========================================================================
   Trámites — UX Mobile + Escritorio
   --------------------------------------------------------------------------
   Consume los tokens centrales de `static/core/base/css/brand-tokens.css`.
   Mobile-first: el grid arranca en 1 columna y crece. Hover/animaciones
   solo en pointer:fine para no entorpecer touch. `prefers-reduced-motion`
   apaga animaciones. Color y radio NO se hardcodean — siempre var(--*).
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO — gradient navy con curva inferior y stats de confianza
   -------------------------------------------------------------------------- */
.tramites-hero {
    position: relative;
    background:
        radial-gradient(circle at 20% 0%, rgba(255,214,10,.12) 0%, transparent 45%),
        radial-gradient(circle at 90% 80%, rgba(227,6,19,.18) 0%, transparent 50%),
        linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%);
    color: var(--text-on-dark);
    padding: 64px 0 80px;
    margin-bottom: -32px; /* la curva del bottom se superpone con el siguiente bloque */
    overflow: hidden;
}
/* Curva inferior que conecta visualmente el hero navy con la zona blanca
   del toolbar. Mantenemos un radio amplio que se vea suave en mobile
   sin requerir scaleX (que en pantallas chicas dejaba un "corte" raro
   en los bordes laterales). */
.tramites-hero::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -1px;
    height: 40px;
    background: var(--surface-page);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.tramites-hero h1 {
    font-weight: 700;
    letter-spacing: -.025em;
    margin: 0 0 12px;
    font-size: clamp(28px, 5vw, 44px);
}
.tramites-hero .lead {
    opacity: .9;
    max-width: 720px;
    font-size: clamp(15px, 2.2vw, 18px);
    margin: 0 0 24px;
}

/* --------------------------------------------------------------------------
   HERO con imagen de fondo (categoría / servicio)
   --------------------------------------------------------------------------
   La imagen de la categoría/servicio se usa como fondo difuminado para dar
   identidad visual sin sacrificar legibilidad: capa de imagen borrosa +
   velo navy semitransparente encima. Se activa con la clase `--image` y la
   imagen va en un hijo `.tramites-hero-bg` (se inyecta vía style inline).
   Si no hay imagen, el hero conserva el gradient navy original. */
.tramites-hero-bg {
    position: absolute;
    /* `inset` (abreviado) no llega a iOS Safari < 14.5; sin dimensiones el
       div queda 0×0 y la imagen no se ve. Usamos los 4 lados explícitos. */
    top: -24px;
    right: -24px;
    bottom: -24px;
    left: -24px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(4px) brightness(.72) saturate(1.1);   /* menos blur = más definida */
    transform: scale(1.06);
    z-index: 0;
    pointer-events: none;
}
.tramites-hero--image::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Velo navy ligero: deja ver la imagen. El texto se protege con
       text-shadow (abajo), no oscureciendo toda la imagen. */
    background: linear-gradient(135deg, rgba(10, 38, 88, .46) 0%, rgba(6, 26, 64, .62) 100%);
    z-index: 1;
    pointer-events: none;
}
.tramites-hero--image > .container {
    position: relative;
    z-index: 2;
    /* Sombra suave: legibilidad del texto blanco sobre zonas claras. */
    text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}
/* La curva inferior debe quedar por encima de la imagen y del velo. */
.tramites-hero--image::after {
    z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
    .tramites-hero-bg { transform: none; }
}

/* Pills de confianza debajo del lead */
.tramites-trust {
    display: flex; flex-wrap: wrap; gap: 8px 12px;
    list-style: none; padding: 0; margin: 0;
}
.tramites-trust li {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    border: 1px solid rgba(255,255,255,.12);
}
.tramites-trust .icon { color: var(--brand-yellow); }

/* --------------------------------------------------------------------------
   SEARCH + CATEGORY CHIPS — sticky bajo el hero
   -------------------------------------------------------------------------- */
.tramites-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    /* Sin background plano: el input y los chips ya tienen su propio
       fondo sólido, así que el toolbar puede ser transparente. Antes
       tenía `background: var(--surface-page)` que dibujaba un rectángulo
       con esquinas cuadradas debajo de la curva del hero. */
    background: transparent;
    padding: 16px 0 8px;
    margin-bottom: 16px;
}
.tramites-search {
    position: relative;
    max-width: 560px;
}
.tramites-search input {
    width: 100%;
    border: 1px solid var(--surface-muted);
    border-radius: var(--radius-pill);
    padding: 14px 18px 14px 46px;
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
    font-size: 15px;
    color: var(--text-body);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    /* iOS/Android aplican estilos nativos a input[type=search] que
       sobrescriben border-radius y padding. Hay que desactivarlos
       explícitamente para que el pill se vea correcto en mobile. */
    appearance: none;
    -webkit-appearance: none;
}
/* WebKit (iOS) sigue dibujando el botón "x" decorativo del search
   nativo a la derecha — ocultarlo porque ya tenemos `.clear` custom. */
.tramites-search input::-webkit-search-decoration,
.tramites-search input::-webkit-search-cancel-button,
.tramites-search input::-webkit-search-results-button,
.tramites-search input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none;
}
.tramites-search input:focus {
    border-color: var(--brand-navy);
    box-shadow: 0 0 0 4px rgba(10,38,88,.08);
}
.tramites-search .icon {
    position: absolute;
    left: 18px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none;
}
.tramites-search .clear {
    position: absolute;
    right: 8px; top: 50%; transform: translateY(-50%);
    border: none; background: transparent;
    color: var(--text-muted);
    width: 32px; height: 32px; border-radius: 50%;
    display: none; align-items: center; justify-content: center;
}
.tramites-search input:not(:placeholder-shown) ~ .clear { display: inline-flex; }
.tramites-search .clear:hover { background: var(--surface-muted); }

.tramites-chips {
    display: flex; gap: 8px;
    overflow-x: auto; overflow-y: hidden;
    padding: 12px 0 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tramites-chips::-webkit-scrollbar { display: none; }
.tramites-chip {
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    border: 1px solid var(--surface-muted);
    color: var(--text-body);
    font-size: 14px; font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    user-select: none;
}
.tramites-chip:hover {
    border-color: var(--brand-navy-soft);
    color: var(--brand-navy);
}
.tramites-chip.is-active {
    background: var(--brand-navy);
    color: var(--text-on-dark);
    border-color: var(--brand-navy);
    box-shadow: var(--shadow-icon-navy);
}
.tramites-chip .count {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    opacity: .75;
}

/* --------------------------------------------------------------------------
   GRID + CARDS
   -------------------------------------------------------------------------- */
.tramites-section { margin-bottom: 32px; }
.tramites-section-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px;
}
.tramites-section-header .icon-wrap {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-soft));
    color: var(--text-on-dark);
    box-shadow: var(--shadow-icon-navy);
    font-size: 18px;
}
.tramites-section-header h2 {
    margin: 0; font-weight: 600;
    color: var(--text-strong);
    font-size: clamp(18px, 3vw, 22px);
}
.tramites-section-header .subtitle {
    color: var(--text-muted); font-size: 13px;
    margin: 2px 0 0;
}

.tramites-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 576px) { .tramites-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 992px) { .tramites-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.tramites-card {
    position: relative;
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 22px 22px 20px;
    display: flex; flex-direction: column;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(10, 38, 88, .05);
    overflow: hidden;
    isolation: isolate;
}
.tramites-card::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--brand-navy) 0%, var(--brand-red) 100%);
    transform: scaleX(0); transform-origin: left;
    transition: transform .25s ease;
    z-index: 1;
}
@media (pointer: fine) {
    .tramites-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
    .tramites-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-card-hover);
        border-color: rgba(10,38,88,.12);
        color: inherit;
    }
    .tramites-card:hover::before { transform: scaleX(1); }
}

.tramites-card .card-hero-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: 14px;
    background: var(--surface-muted);
}

.tramites-card .icon-wrap {
    width: 56px; height: 56px;
    border-radius: var(--radius-circle);
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-soft) 100%);
    color: var(--text-on-dark);
    box-shadow: var(--shadow-icon-navy);
    margin-bottom: 16px;
    font-size: 22px;
}
.tramites-card.is-popular .icon-wrap {
    background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
    box-shadow: var(--shadow-cta-red);
}

.tramites-card h3 {
    font-size: 17px; font-weight: 600;
    margin: 0 0 6px;
    color: var(--text-strong);
    line-height: 1.3;
}
.tramites-card p {
    color: var(--text-muted);
    font-size: 13.5px;
    margin: 0 0 14px;
    flex-grow: 1;
    line-height: 1.45;
}
.tramites-card .meta {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid var(--surface-muted);
    padding-top: 12px;
    gap: 8px;
}
.tramites-card .price {
    font-weight: 700;
    color: var(--brand-red);
    font-size: 15px;
    display: inline-flex; align-items: center; gap: 4px;
}
.tramites-card .price .currency {
    font-weight: 500; color: var(--text-muted); font-size: 11px;
}
.tramites-card .sla {
    color: var(--text-muted);
    font-size: 11.5px;
    display: inline-flex; align-items: center; gap: 4px;
}

/* Badge "Popular" superpuesto */
.tramites-card .badge-popular {
    position: absolute;
    top: 14px; right: 14px;
    background: var(--brand-yellow);
    color: var(--brand-navy-dark);
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Empty state cuando filtros no traen nada */
.tramites-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 16px;
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
}
.tramites-empty .icon { font-size: 48px; opacity: .4; margin-bottom: 12px; }

/* --------------------------------------------------------------------------
   "Cómo funciona" — 4 pasos
   -------------------------------------------------------------------------- */
.tramites-howit {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 28px 24px;
    margin: 40px 0;
}
.tramites-howit h2 {
    text-align: center;
    font-weight: 600;
    color: var(--text-strong);
    margin: 0 0 6px;
}
.tramites-howit .lead {
    text-align: center;
    color: var(--text-muted);
    margin: 0 0 28px;
}
.tramites-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 768px) { .tramites-steps { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.tramites-step {
    text-align: center;
    position: relative;
}
.tramites-step .num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--radius-circle);
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-soft));
    color: var(--text-on-dark);
    font-weight: 700; font-size: 17px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-icon-navy);
}
.tramites-step h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-strong);
    margin: 0 0 4px;
}
.tramites-step p {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0;
    line-height: 1.45;
}
@media (min-width: 768px) {
    .tramites-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 22px; right: -8px;
        width: calc(100% - 44px); height: 2px;
        background: var(--surface-muted);
        z-index: 0;
    }
}

/* --------------------------------------------------------------------------
   "Por qué Brasender" — features
   -------------------------------------------------------------------------- */
.tramites-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 40px;
}
@media (min-width: 576px) { .tramites-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .tramites-features { grid-template-columns: repeat(4, 1fr); } }

.tramites-feature {
    background: var(--surface-card);
    border-radius: var(--radius-md);
    padding: 18px;
    display: flex; gap: 12px; align-items: flex-start;
    border: 1px solid var(--surface-muted);
}
.tramites-feature .icon {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: var(--radius-md);
    background: var(--brand-red-soft);
    color: var(--brand-red);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.tramites-feature h4 {
    font-size: 14px; font-weight: 600;
    color: var(--text-strong);
    margin: 0 0 2px;
}
.tramites-feature p {
    color: var(--text-muted); font-size: 12.5px;
    margin: 0; line-height: 1.45;
}

/* FAB de WhatsApp eliminado: el contacto por WhatsApp ahora vive
   dentro del asistente virtual flotante (Brasi), evitando dos botones
   flotantes superpuestos. */

/* ==========================================================================
   DETALLE — sticky CTA en mobile + summary mejorado
   ========================================================================== */
.tramite-detail .summary {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 24px;
}
.tramite-detail .summary + .summary { margin-top: 16px; }
.tramite-detail h2.section-title {
    font-size: 18px; font-weight: 600; margin: 0 0 14px;
    color: var(--text-strong);
    display: flex; align-items: center; gap: 8px;
}
.tramite-detail h2.section-title .icon {
    color: var(--brand-navy);
    background: rgba(10,38,88,.08);
    width: 32px; height: 32px;
    border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
}

.tramite-detail .price-card {
    background:
        radial-gradient(circle at 80% 0%, rgba(255,214,10,.18) 0%, transparent 45%),
        linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-soft) 100%);
    color: var(--text-on-dark);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    text-align: center;
    box-shadow: var(--shadow-icon-navy);
    position: sticky;
    top: 24px;
}
.tramite-detail .price-card .currency { font-size: 14px; opacity: .8; }
.tramite-detail .price-card .amount {
    font-size: clamp(28px, 5vw, 38px); font-weight: 700; line-height: 1;
}
.tramite-detail .price-card .cta {
    display: inline-flex; align-items: center; gap: 8px; justify-content: center;
    background: var(--brand-red); color: var(--text-on-dark);
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-cta-red);
    text-decoration: none; font-weight: 600;
    margin-top: 18px;
    width: 100%;
    transition: background .15s, transform .15s;
}
.tramite-detail .price-card .cta:hover {
    background: var(--brand-red-dark); color: var(--text-on-dark);
    transform: translateY(-1px);
}

.tramite-detail .req-list { list-style: none; padding: 0; margin: 0; }
.tramite-detail .req-list li {
    padding: 12px 0;
    border-bottom: 1px solid var(--surface-muted);
    display: flex; gap: 12px; align-items: flex-start;
}
.tramite-detail .req-list li:last-child { border-bottom: none; }
.tramite-detail .req-list .icon {
    color: var(--brand-navy); flex: 0 0 auto;
    margin-top: 2px;
}
.tramite-detail .accordion-button:not(.collapsed) {
    background: rgba(10,38,88,.04);
    color: var(--brand-navy); font-weight: 600;
    box-shadow: none;
}

/* Sticky CTA mobile — barra inferior con precio + botón */
.tramite-cta-mobile {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 50;
    background: var(--surface-card);
    border-top: 1px solid var(--surface-muted);
    padding: 12px 16px;
    box-shadow: 0 -8px 24px rgba(10,38,88,.08);
    align-items: center; gap: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.tramite-cta-mobile .price {
    flex: 1;
    line-height: 1.1;
}
.tramite-cta-mobile .price .label {
    color: var(--text-muted); font-size: 11px;
    display: block;
}
.tramite-cta-mobile .price .amount {
    color: var(--brand-red); font-weight: 700; font-size: 18px;
}
.tramite-cta-mobile a.btn {
    background: var(--brand-red); color: var(--text-on-dark);
    border-radius: var(--radius-pill);
    padding: 12px 20px; font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-cta-red);
}
@media (max-width: 991.98px) {
    .tramite-cta-mobile { display: flex; }
    .tramite-detail .price-card { position: static; }
    /* Compensar el espacio que ocupa el sticky para que no tape el contenido */
    .tramite-detail { padding-bottom: 88px; }
}

/* ==========================================================================
   Wizard — sin cambios funcionales, solo refinar
   ========================================================================== */
.wizard-steps {
    display: flex; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none;
}
.wizard-steps li {
    flex: 1; padding: 12px 8px;
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text-muted);
    text-align: center; font-weight: 600; font-size: 13px;
    transition: all .2s;
}
@media (min-width: 576px) { .wizard-steps li { padding: 14px; font-size: 14px; } }
.wizard-steps li.active {
    background: var(--brand-navy); color: var(--text-on-dark);
    box-shadow: var(--shadow-icon-navy);
}
.wizard-steps li.done {
    background: var(--brand-red-soft); color: var(--brand-red);
}

.wizard-card {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 24px;
}

.req-item {
    display: flex; flex-direction: column; gap: 12px;
    border: 1px dashed var(--surface-muted);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 12px;
}
@media (min-width: 768px) { .req-item { flex-direction: row; justify-content: space-between; align-items: center; } }
.req-item.done {
    border-style: solid; border-color: var(--brand-navy);
    background: rgba(10, 38, 88, .03);
}

/* ==========================================================================
   Timeline visual del estado del trámite (área cliente)
   ========================================================================== */
.timeline-card .t-timeline {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    counter-reset: t-step;
}
@media (min-width: 768px) {
    .timeline-card .t-timeline {
        grid-template-columns: repeat(6, 1fr);
        gap: 0;
        position: relative;
    }
}

.timeline-card .t-step {
    display: flex; align-items: center; gap: 12px;
    counter-increment: t-step;
    position: relative;
}
@media (min-width: 768px) {
    .timeline-card .t-step {
        flex-direction: column;
        text-align: center;
    }
    /* Línea conectora horizontal entre pasos (desktop) */
    .timeline-card .t-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 18px; left: calc(50% + 22px); right: calc(-50% + 22px);
        height: 3px;
        background: var(--surface-muted);
        z-index: 0;
    }
    .timeline-card .t-step.is-done:not(:last-child)::after {
        background: var(--brand-navy);
    }
}

.timeline-card .t-step-icon {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: var(--radius-circle);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    background: var(--surface-muted);
    color: var(--text-muted);
    z-index: 1; position: relative;
    transition: all .25s;
}
.timeline-card .t-step.is-done .t-step-icon {
    background: var(--brand-navy);
    color: var(--text-on-dark);
    box-shadow: var(--shadow-icon-navy);
}
.timeline-card .t-step.is-active .t-step-icon {
    background: var(--brand-red);
    color: var(--text-on-dark);
    box-shadow: var(--shadow-cta-red);
    animation: t-pulse 1.8s infinite;
}
@keyframes t-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(227, 6, 19, .45); }
    50%      { box-shadow: 0 0 0 10px rgba(227, 6, 19, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .timeline-card .t-step.is-active .t-step-icon { animation: none; }
}

.timeline-card .t-step-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}
.timeline-card .t-step.is-done .t-step-label,
.timeline-card .t-step.is-active .t-step-label {
    color: var(--text-strong);
    font-weight: 600;
}
@media (min-width: 768px) {
    .timeline-card .t-step-label {
        margin-top: 8px;
        font-size: 12px;
    }
}

/* Doc rechazado: borde rojo suave */
.req-item.rejected-doc {
    border-style: solid;
    border-color: var(--brand-red);
    background: var(--brand-red-soft);
}

/* Botón eliminar documento — solo icono. NO usa `.btn` de Bootstrap a
   propósito: base.css repinta TODO `.btn` con fondo rojo y texto
   blanco, así que un icono `text-danger` quedaba rojo sobre rojo
   (invisible — el "óvalo rojo vacío" reportado). */
.doc-del-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--brand-red);
    font-size: 16px;
    line-height: 1;
    border-radius: var(--radius-circle);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.doc-del-btn:hover,
.doc-del-btn:focus-visible {
    background: var(--brand-red-soft);
    color: var(--brand-red-dark);
}

/* ==========================================================================
   Estado / badges (compartido con admin custom y customer detail)
   ========================================================================== */
.status-pill {
    display: inline-block; padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
}
.status-pill.success  { background: #DCFCE7; color: #166534; }
.status-pill.warning  { background: #FEF3C7; color: #92400E; }
.status-pill.info     { background: #DBEAFE; color: #1E40AF; }
.status-pill.primary  { background: rgba(10,38,88,.1); color: var(--brand-navy); }
.status-pill.danger   { background: var(--brand-red-soft); color: var(--brand-red); }
.status-pill.secondary{ background: var(--surface-muted); color: var(--text-muted); }

/* ==========================================================================
   Tabla de revisión (paso 3) — valores largos sin espacios (email,
   nombres, respuestas del formulario) ya no se salen de la caja.
   `table-layout: fixed` fija el ancho de la etiqueta y el valor parte
   línea con `overflow-wrap`.
   ========================================================================== */
.tramite-review-table {
    table-layout: fixed;
    width: 100%;
}
.tramite-review-table th {
    width: 35%;
}
.tramite-review-table th,
.tramite-review-table td {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ==========================================================================
   Wizard de trámites — botones compactos + feedback de carga.
   El `.btn` global (base.css) los pinta rojos/pill/grandes con
   elevación; aquí, SOLO dentro de .tramite-wizard, se compactan y se
   respeta jerarquía (CTA rojo vs secundario discreto). No afecta el
   resto de la app ni la página de pago (.pix-pay).
   ========================================================================== */
.tramite-wizard .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: .85rem;
    font-weight: 600;
    box-shadow: none;
}
.tramite-wizard .btn:hover { transform: none; box-shadow: none; opacity: .92; }
.tramite-wizard .btn:disabled { opacity: .55; }
.tramite-wizard .btn i { font-size: .9em; }
.tramite-wizard .btn-lg { padding: 10px 18px; font-size: .92rem; }

/* Secundarios discretos (Atrás / Continuar deshabilitado): no rojo */
.tramite-wizard .btn-light,
.tramite-wizard .btn-secondary {
    background: var(--surface-muted, #E2E8F0) !important;
    color: var(--text-strong, #0F172A) !important;
}

/* Overlay de carga: el submit de subir documento / confirmar recarga
   la página; sin esto el usuario (PDF pesado, mala conexión) no sabe
   si está procesando. */
.tramite-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(6, 26, 64, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.tramite-loading-overlay.show { display: flex; }
.tramite-loading-overlay .box {
    background: #fff;
    border-radius: 14px;
    padding: 22px 26px;
    text-align: center;
    max-width: 280px;
    box-shadow: 0 16px 40px rgba(6, 26, 64, .35);
}
.tramite-loading-overlay .spinner-border { color: var(--brand-red, #E30613); }
.tramite-loading-overlay p {
    margin: 12px 0 0;
    font-size: .9rem;
    color: var(--text-strong, #0F172A);
}