/**
 * mod_actualizar_rentas · calculadora.css  v3.0
 * Design System: LegalTech Premium
 * Tipografías: Fraunces (serif editorial) + Figtree (sans geométrica)
 * Compatible: Bootstrap 5, Joomla 5, PHP 8.2
 *
 * Convención BEM: .mar-[bloque]__[elemento]--[modificador]
 * Prefijo: mar = mod_actualizar_rentas
 */

/* ═══════════════════════════════════════════════════════════════════
   TOKENS DE DISEÑO
═══════════════════════════════════════════════════════════════════ */
.mar-root {
    /* Colores principales */
    --mar-c-bg:        #eef2f7;
    --mar-c-card:      #ffffff;
    --mar-c-surface:   #f8fafd;
    --mar-c-border:    #e2e8f1;
    --mar-c-border2:   #cbd5e1;
    --mar-c-text:      #0f172a;
    --mar-c-muted:     #64748b;
    --mar-c-light:     #94a3b8;

    /* Teal (IRAV) */
    --mar-c-teal:      #0d9488;
    --mar-c-teal-m:    #14b8a6;
    --mar-c-teal-l:    rgba(13,148,136,0.12);

    /* Azul (IPC) */
    --mar-c-blue:      #1e40af;
    --mar-c-blue-m:    #3b82f6;
    --mar-c-blue-l:    rgba(59,130,246,0.10);

    /* Ámbar (IGC) */
    --mar-c-amber:     #d97706;
    --mar-c-amber-m:   #f59e0b;
    --mar-c-amber-l:   rgba(217,119,6,0.10);

    /* Verde (positivo) */
    --mar-c-green:     #10b981;

    /* Rojo (negativo) */
    --mar-c-red:       #ef4444;
    --mar-c-red-m:     #f87171;
    --mar-c-red-l:     rgba(239,68,68,0.10);

    /* Tipografías */
    --mar-ff-h:        'Fraunces', Georgia, 'Times New Roman', serif;
    --mar-ff-b:        'Figtree', 'Segoe UI', system-ui, sans-serif;

    /* Radios */
    --mar-r:           20px;
    --mar-r-sm:        12px;
    --mar-r-xs:        8px;

    /* Sombras */
    --mar-shadow-md:   0 4px 16px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.06);
    --mar-shadow-lg:   0 12px 40px rgba(15,23,42,0.14), 0 4px 12px rgba(15,23,42,0.08);
    --mar-shadow-xl:   0 24px 64px rgba(15,23,42,0.18), 0 8px 24px rgba(15,23,42,0.10);

    /* Transiciones */
    --mar-dur-fast:    0.18s;
    --mar-dur-med:     0.30s;
    --mar-dur-slow:    0.50s;
    --mar-ease:        cubic-bezier(0.22,1,0.36,1);
    --mar-ease-spring: cubic-bezier(0.34,1.56,0.64,1);

    /* Layout */
    font-family: var(--mar-ff-b);
    display: block;
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
   ANIMACIONES DE ENTRADA
═══════════════════════════════════════════════════════════════════ */
@keyframes marFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@keyframes marScaleIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1);    }
}
@keyframes marPulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(13,148,136,0.18); }
    50%      { box-shadow: 0 0 0 6px rgba(13,148,136,0.06); }
}
@keyframes marBlink {
    50% { opacity: 0; }
}
@keyframes marSlideDown {
    from { opacity: 0; max-height: 0; transform: translateY(-10px); }
    to   { opacity: 1; max-height: 800px; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   TARJETA PRINCIPAL
═══════════════════════════════════════════════════════════════════ */
.mar-card {
    background: var(--mar-c-card);
    border-radius: var(--mar-r);
    border: 1px solid var(--mar-c-border);
    box-shadow: var(--mar-shadow-xl);
    overflow: hidden;
    animation: marScaleIn var(--mar-dur-slow) var(--mar-ease) both;
}

/* ── Cabecera ── */
.mar-card__header {
    padding: 32px 36px 28px;
    background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}
.mar-card__header::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13,148,136,0.22) 0%, transparent 70%);
    pointer-events: none;
}
.mar-card__header::after {
    content: '';
    position: absolute;
    bottom: -40px; left: 30%;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30,64,175,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.mar-header__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(13,148,136,0.18);
    border: 1px solid rgba(13,148,136,0.35);
    border-radius: 100px;
    padding: 5px 12px;
    font-family: var(--mar-ff-b);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--mar-c-teal-m);
    text-transform: uppercase;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.mar-header__dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--mar-c-teal-m);
    animation: marBlink 2s step-start infinite;
    flex-shrink: 0;
}

.mar-header__title {
    font-family: var(--mar-ff-h);
    font-size: clamp(1.5rem, 4.5vw, 2.1rem);
    font-weight: 700;
    line-height: 1.12;
    color: #fff;
    letter-spacing: -0.03em;
    margin: 0 0 10px;
    position: relative;
    z-index: 1;
}
.mar-header__title em {
    font-style: italic;
    font-weight: 400;
    color: var(--mar-c-teal-m);
}

.mar-header__sub {
    font-family: var(--mar-ff-b);
    font-size: 0.82rem;
    font-weight: 300;
    color: rgba(255,255,255,0.48);
    letter-spacing: 0.01em;
    margin: 0;
    position: relative;
    z-index: 1;
}

.mar-header__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    position: relative;
    z-index: 1;
}
.mar-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 100px;
    padding: 4px 10px;
    font-family: var(--mar-ff-b);
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(255,255,255,0.50);
}

/* ── Cuerpo ── */
.mar-card__body {
    padding: 28px 36px 30px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* ── Pie ── */
.mar-card__footer {
    border-top: 1px solid var(--mar-c-border);
    padding: 14px 36px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--mar-c-surface);
}
.mar-footer__ine {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mar-ff-b);
    font-size: 0.7rem;
    color: var(--mar-c-light);
    flex: 1;
    min-width: 180px;
}
.mar-footer__dot {
    display: inline-block;
    vertical-align: middle;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--mar-c-green);
    box-shadow: 0 0 6px rgba(16,185,129,0.55);
    animation: marPulse 2.5s ease-in-out infinite;
    margin-right: 7px;
    flex-shrink: 0;
}
.mar-footer__legal {
    font-family: var(--mar-ff-b);
    font-size: 0.68rem;
    color: var(--mar-c-light);
    text-align: right;
    line-height: 1.5;
}
/* -- Descargo de responsabilidad -- */
.mar-disclaimer {
    margin-top: 10px;
    padding: 6px 14px 10px;
    text-align: center;
}
.mar-disclaimer__text {
    font-family: var(--mar-ff-b);
    font-size: 0.68rem;
    color: var(--mar-c-light);
    line-height: 1.6;
    font-style: italic;
    margin: 0;
}
.mar-disclaimer__text strong em {
    font-style: normal;
}
.mar-disclaimer__text a {
    color: var(--mar-c-teal-m);
    text-decoration: none;
    font-weight: 600;
    font-style: normal;
}
.mar-disclaimer__text a:hover {
    text-decoration: underline;
}

/* ── Nota burofax en modales carta/prórroga ── */
.mar-carta__burofax-nota {
    margin: 0 1rem 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
    color: var(--mar-c-gray, #64748b);
    background: #f8fafc;
    border-left: 3px solid #94a3b8;
    border-radius: 0 4px 4px 0;
}

/* ── Nota Registro en wizard gran tenedor ── */
.mar-wizard__gt-nota {
    margin: 0.75rem 0 0;
    font-size: 0.78rem;
    color: var(--mar-c-light, #64748b);
    line-height: 1.4;
    text-align: center;
}

/* ── Toggle actualizaciones acumuladas ── */
.mar-acum-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}
.mar-acum-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.83rem;
    color: rgba(255,255,255,0.75);
    user-select: none;
}
.mar-acum-toggle__check {
    cursor: pointer;
    accent-color: var(--mar-c-teal-m, #0d9488);
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}
.mar-acum-toggle__label {
    line-height: 1.2;
}
.mar-acum-toggle__select {
    font-size: 0.82rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    cursor: pointer;
}

/* ── Tabla de desglose acumulado ── */
.mar-acum-table {
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(255,255,255,0.12);
}
.mar-acum__title {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 0.4rem;
}
.mar-acum__tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}
.mar-acum__tbl th {
    text-align: left;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.45);
    font-weight: 600;
    font-size: 0.75rem;
}
.mar-acum__tbl th:last-child {
    text-align: right;
}
.mar-acum__tbl td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.80);
}
.mar-acum__tbl tr:last-child td {
    border-bottom: none;
    font-weight: 700;
    color: #fff;
}
.mar-acum__pct    { color: #5eead4; font-variant-numeric: tabular-nums; }
.mar-acum__nodata { color: rgba(255,255,255,0.30); font-style: italic; }
.mar-acum__renta  { text-align: right; font-variant-numeric: tabular-nums; }
.mar-acum__note {
    margin-top: 0.6rem;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.30);
    line-height: 1.4;
}
.mar-acum__note--info {
    color: rgba(255,255,255,0.50);
    font-style: italic;
}

.mar-footer__link {
    color: var(--mar-c-teal-m);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--mar-dur-fast) ease;
}
.mar-footer__link:hover {
    color: var(--mar-c-teal);
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════
   WIZARD — ASISTENTE PASO A PASO
═══════════════════════════════════════════════════════════════════ */
.mar-wizard {
    animation: marFadeUp var(--mar-dur-slow) var(--mar-ease) both;
}
.mar-wizard__intro {
    font-family: var(--mar-ff-b);
    font-size: 0.82rem;
    color: var(--mar-c-muted);
    line-height: 1.6;
    margin-bottom: 18px;
    padding: 12px 16px;
    background: var(--mar-c-surface);
    border-radius: var(--mar-r-xs);
    border-left: 3px solid var(--mar-c-teal);
}

/* Progreso */
.mar-wizard__progress {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 22px;
}
.mar-wizard__step-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--mar-ff-b);
    font-size: 0.7rem;
    font-weight: 700;
    border: 2px solid var(--mar-c-border2);
    color: var(--mar-c-light);
    background: var(--mar-c-card);
    transition: all var(--mar-dur-med) var(--mar-ease);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.mar-wizard__step-dot--active {
    border-color: var(--mar-c-teal);
    background: var(--mar-c-teal);
    color: #fff;
    box-shadow: 0 0 0 4px var(--mar-c-teal-l);
}
.mar-wizard__step-dot--done {
    border-color: var(--mar-c-green);
    background: var(--mar-c-green);
    color: #fff;
}
.mar-wizard__step-line {
    flex: 1;
    height: 2px;
    background: var(--mar-c-border);
    transition: background var(--mar-dur-med) ease;
}
.mar-wizard__step-line--done {
    background: var(--mar-c-green);
}

/* Panel de paso */
.mar-wizard__panel {
    display: none;
}
.mar-wizard__panel--active {
    display: block;
    animation: marFadeUp var(--mar-dur-med) var(--mar-ease) both;
}
.mar-wizard__panel-title {
    font-family: var(--mar-ff-h);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mar-c-text);
    margin: 0 0 4px;
}
.mar-wizard__panel-desc {
    font-family: var(--mar-ff-b);
    font-size: 0.78rem;
    color: var(--mar-c-muted);
    margin: 0 0 16px;
}

/* Opciones del wizard */
.mar-wizard__options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mar-wizard__opt {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 2px solid var(--mar-c-border);
    border-radius: var(--mar-r-sm);
    background: var(--mar-c-card);
    cursor: pointer;
    transition: all var(--mar-dur-fast) ease;
    position: relative;
}
.mar-wizard__opt:hover {
    border-color: var(--mar-c-teal);
    background: var(--mar-c-teal-l);
}
.mar-wizard__opt--selected {
    border-color: var(--mar-c-teal);
    background: var(--mar-c-teal-l);
    box-shadow: 0 0 0 3px var(--mar-c-teal-l);
}
.mar-wizard__opt-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    background: var(--mar-c-surface);
    border: 1px solid var(--mar-c-border);
    flex-shrink: 0;
    transition: all var(--mar-dur-fast) ease;
}
.mar-wizard__opt--selected .mar-wizard__opt-icon {
    background: var(--mar-c-teal);
    border-color: var(--mar-c-teal);
    color: #fff;
}
.mar-wizard__opt-text {
    flex: 1;
}
.mar-wizard__opt-title {
    font-family: var(--mar-ff-b);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mar-c-text);
    line-height: 1.3;
}
.mar-wizard__opt-desc {
    font-family: var(--mar-ff-b);
    font-size: 0.72rem;
    color: var(--mar-c-muted);
    margin-top: 2px;
}
.mar-wizard__opt-check {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid var(--mar-c-border2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all var(--mar-dur-fast) ease;
    font-size: 0.7rem;
    color: transparent;
}
.mar-wizard__opt--selected .mar-wizard__opt-check {
    border-color: var(--mar-c-teal);
    background: var(--mar-c-teal);
    color: #fff;
}

/* Resultado del wizard */
.mar-wizard__result {
    padding: 18px;
    border-radius: var(--mar-r-sm);
    border: 2px solid var(--mar-c-teal);
    background: var(--mar-c-teal-l);
    animation: marFadeUp var(--mar-dur-med) var(--mar-ease) both;
}
.mar-wizard__result--ipc {
    border-color: var(--mar-c-blue-m);
    background: var(--mar-c-blue-l);
}
.mar-wizard__result--igc {
    border-color: var(--mar-c-amber);
    background: var(--mar-c-amber-l);
}
.mar-wizard__result-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mar-ff-b);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mar-c-teal);
    margin-bottom: 8px;
}
.mar-wizard__result--ipc .mar-wizard__result-badge { color: var(--mar-c-blue); }
.mar-wizard__result--igc .mar-wizard__result-badge { color: var(--mar-c-amber); }

.mar-wizard__result-index {
    font-family: var(--mar-ff-h);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--mar-c-text);
    margin: 0 0 8px;
}
.mar-wizard__result-explain {
    font-family: var(--mar-ff-b);
    font-size: 0.8rem;
    color: var(--mar-c-muted);
    line-height: 1.65;
}
.mar-wizard__result-explain strong {
    color: var(--mar-c-text);
    font-weight: 600;
}

/* Botones del wizard */
.mar-wizard__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.mar-wizard__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--mar-r-xs);
    font-family: var(--mar-ff-b);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--mar-dur-fast) ease;
}
.mar-wizard__btn--primary {
    background: var(--mar-c-teal);
    color: #fff;
    border-color: var(--mar-c-teal);
}
.mar-wizard__btn--primary:hover {
    background: #0b7f74;
    border-color: #0b7f74;
}
.mar-wizard__btn--secondary {
    background: transparent;
    color: var(--mar-c-muted);
    border-color: var(--mar-c-border2);
}
.mar-wizard__btn--secondary:hover {
    border-color: var(--mar-c-text);
    color: var(--mar-c-text);
}
.mar-wizard__btn--ghost {
    background: transparent;
    color: var(--mar-c-light);
    padding: 10px 12px;
    font-size: 0.75rem;
}
.mar-wizard__btn--ghost:hover {
    color: var(--mar-c-teal);
}

/* Barra resumen tras completar wizard */
.mar-wizard__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--mar-c-surface);
    border: 1px solid var(--mar-c-border);
    border-radius: var(--mar-r-xs);
    flex-wrap: wrap;
    animation: marFadeUp var(--mar-dur-med) var(--mar-ease) both;
}
.mar-wizard__summary-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--mar-c-green);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.mar-wizard__summary-text {
    flex: 1;
    font-family: var(--mar-ff-b);
    font-size: 0.78rem;
    color: var(--mar-c-muted);
    line-height: 1.5;
}
.mar-wizard__summary-text strong {
    color: var(--mar-c-text);
    font-weight: 600;
}
.mar-wizard__summary-edit {
    font-family: var(--mar-ff-b);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mar-c-teal);
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background var(--mar-dur-fast) ease;
}
.mar-wizard__summary-edit:hover {
    background: var(--mar-c-teal-l);
}

/* ═══════════════════════════════════════════════════════════════════
   CAMPOS DEL FORMULARIO — etiquetas
═══════════════════════════════════════════════════════════════════ */
.mar-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mar-ff-b);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mar-c-muted);
    margin-bottom: 8px;
}
.mar-label__num {
    display: grid;
    place-items: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--mar-c-surface);
    border: 1px solid var(--mar-c-border2);
    font-size: 0.55rem;
    color: var(--mar-c-muted);
    flex-shrink: 0;
}
.mar-field-help {
    font-family: var(--mar-ff-b);
    font-size: 0.72rem;
    color: var(--mar-c-light);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.mar-field-help--legal {
    font-size: 0.72rem;
    color: var(--mar-c-teal);
    background: var(--mar-c-teal-l);
    border-left: 3px solid var(--mar-c-teal);
    border-radius: var(--mar-r-xs);
    padding: 6px 10px;
    margin-top: 8px;
    line-height: 1.5;
    display: none;
}
.mar-select-wrap:not(.mar-select-wrap--hidden) .mar-field-help--legal {
    display: flex;
}

/* ═══════════════════════════════════════════════════════════════════
   BOTÓN NUEVO CÁLCULO
═══════════════════════════════════════════════════════════════════ */
.mar-nuevo-calculo {
    display: flex;
    justify-content: center;
    padding: 16px 0 4px;
}
.mar-nuevo-calculo__btn {
    font-family: var(--mar-ff-b);
    font-size: 0.80rem;
    font-weight: 500;
    color: var(--mar-c-light);
    background: transparent;
    border: 1.5px solid var(--mar-c-border);
    border-radius: var(--mar-r-sm);
    padding: 8px 20px;
    cursor: pointer;
    transition:
        color            var(--mar-dur-fast) ease,
        border-color     var(--mar-dur-fast) ease,
        background       var(--mar-dur-fast) ease;
}
.mar-nuevo-calculo__btn:hover,
.mar-nuevo-calculo__btn:focus-visible {
    color: var(--mar-c-teal);
    border-color: var(--mar-c-teal);
    background: var(--mar-c-teal-l);
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════════
   SELECTOR QUINCENA MARZO 2026 (RDL 8/2026)
═══════════════════════════════════════════════════════════════════ */
.mar-rdl-quincena {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 8px;
    padding: 12px 14px;
    background: #FFF8E7;
    border-left: 3px solid #D97706;
    border-radius: var(--mar-r-xs);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mar-rdl-quincena__title {
    font-family: var(--mar-ff-b);
    font-size: 0.78rem;
    font-weight: 700;
    color: #92400E;
    margin: 0;
}
.mar-rdl-quincena__desc {
    font-family: var(--mar-ff-b);
    font-size: 0.72rem;
    color: #78350F;
    margin: 0;
    line-height: 1.45;
}
.mar-rdl-quincena__opts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mar-rdl-quincena__radio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--mar-r-xs);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background var(--mar-dur-fast) ease, border-color var(--mar-dur-fast) ease;
    font-family: var(--mar-ff-b);
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(255,255,255,0.6);
}
.mar-rdl-quincena__radio:hover {
    background: rgba(255,255,255,0.9);
}
.mar-rdl-quincena__radio--antes {
    color: #1D4ED8;
}
.mar-rdl-quincena__radio--antes:has(.mar-rdl-quincena__input:checked) {
    background: #EFF6FF;
    border-color: #3B82F6;
}
.mar-rdl-quincena__radio--desde {
    color: #B45309;
}
.mar-rdl-quincena__radio--desde:has(.mar-rdl-quincena__input:checked) {
    background: #FEF3C7;
    border-color: #D97706;
}
.mar-rdl-quincena__input {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--mar-c-teal);
    cursor: pointer;
}
.mar-rdl-quincena__radio-mark {
    display: none; /* reservado para posible ícono futuro */
}
.mar-rdl-quincena__radio-text {
    line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════════
   TOGGLE DE MÉTODO (slider animado) — 2 y 3 columnas
═══════════════════════════════════════════════════════════════════ */
.mar-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--mar-c-surface);
    border: 1.5px solid var(--mar-c-border);
    border-radius: var(--mar-r-sm);
    padding: 4px;
    gap: 4px;
    position: relative;
}
.mar-toggle--triple {
    grid-template-columns: 1fr 1fr 1fr;
}

.mar-toggle__slider {
    position: absolute;
    top: 4px; left: 4px;
    width: calc(50% - 6px);
    height: calc(100% - 8px);
    border-radius: 9px;
    transition:
        transform  var(--mar-dur-med) var(--mar-ease-spring),
        background var(--mar-dur-med) ease,
        box-shadow var(--mar-dur-med) ease;
    z-index: 0;
    pointer-events: none;
}
.mar-toggle--triple .mar-toggle__slider {
    width: calc(33.333% - 5.333px);
}
.mar-toggle__slider--irav {
    background: linear-gradient(135deg, var(--mar-c-teal) 0%, #0a7a6a 100%);
    box-shadow: 0 4px 16px rgba(13,148,136,0.40);
    transform: translateX(0);
}
.mar-toggle__slider--ipc {
    background: linear-gradient(135deg, var(--mar-c-blue) 0%, #1a35a0 100%);
    box-shadow: 0 4px 16px rgba(30,64,175,0.35);
}
/* 2 columnas: IPC en posición 2 */
.mar-toggle:not(.mar-toggle--triple) .mar-toggle__slider--ipc {
    transform: translateX(calc(100% + 4px));
}
/* 3 columnas: IPC en posición 2 */
.mar-toggle--triple .mar-toggle__slider--ipc {
    transform: translateX(calc(100% + 4px));
}
.mar-toggle__slider--igc {
    background: linear-gradient(135deg, var(--mar-c-amber) 0%, #b45309 100%);
    box-shadow: 0 4px 16px rgba(217,119,6,0.35);
    transform: translateX(calc(200% + 8px));
}

.mar-toggle__btn {
    position: relative;
    z-index: 1;
    background: transparent;
    border: none;
    border-radius: 9px;
    padding: 11px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-family: var(--mar-ff-b);
    transition: color var(--mar-dur-fast) ease;
}
.mar-toggle__main {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mar-c-muted);
    transition: color var(--mar-dur-fast) ease;
    line-height: 1;
}
.mar-toggle__sub {
    font-size: 0.62rem;
    font-weight: 400;
    color: var(--mar-c-light);
    transition: color var(--mar-dur-fast) ease;
}
.mar-toggle__btn--active .mar-toggle__main { color: #fff; }
.mar-toggle__btn--active .mar-toggle__sub  { color: rgba(255,255,255,0.65); }
.mar-toggle__btn:not(.mar-toggle__btn--active):hover .mar-toggle__main { color: var(--mar-c-text); }

/* ── Nota informativa del método ── */
.mar-method-note {
    background: var(--mar-c-surface);
    border-radius: var(--mar-r-xs);
    border: 1px solid var(--mar-c-border);
    border-left: 3px solid transparent;
    padding: 10px 14px;
    font-family: var(--mar-ff-b);
    font-size: 0.77rem;
    color: var(--mar-c-muted);
    line-height: 1.65;
    transition: border-left-color var(--mar-dur-med) ease, background var(--mar-dur-med) ease;
}
.mar-method-note__text { display: none; }
.mar-method-note__text--irav:not([hidden]) {
    display: block;
    border-left-color: var(--mar-c-teal);
    background: rgba(13,148,136,0.04);
}
.mar-method-note__text--ipc:not([hidden]) {
    display: block;
    border-left-color: var(--mar-c-blue-m);
    background: var(--mar-c-blue-l);
}
.mar-method-note__text--igc:not([hidden]) {
    display: block;
    border-left-color: var(--mar-c-amber);
    background: var(--mar-c-amber-l);
}
.mar-method-note strong { color: var(--mar-c-text); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   INPUT DE IMPORTE
═══════════════════════════════════════════════════════════════════ */
/* ── Input de importe: layout flex [ €-badge | input | € / mes ] ── */
.mar-amount {
    display: flex;
    align-items: stretch;
    position: relative;
    border: 2px solid var(--mar-c-border);
    border-radius: var(--mar-r-sm);
    background: var(--mar-c-card);
    overflow: hidden;
    transition:
        border-color var(--mar-dur-fast) ease,
        box-shadow   var(--mar-dur-fast) ease;
}
.mar-amount:focus-within {
    border-color: var(--mar-c-teal);
    box-shadow: 0 0 0 4px rgba(13,148,136,0.12);
}
.mar-amount--has-val {
    border-color: rgba(13,148,136,0.50);
}
.mar-amount--has-val:focus-within {
    border-color: var(--mar-c-teal);
}

/* Columna izquierda: símbolo € */
.mar-amount__prefix {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    font-family: var(--mar-ff-h);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--mar-c-light);
    background: var(--mar-c-surface);
    border-right: 2px solid var(--mar-c-border);
    pointer-events: none;
    user-select: none;
    transition:
        color            var(--mar-dur-fast) ease,
        background       var(--mar-dur-fast) ease,
        border-color     var(--mar-dur-fast) ease;
}
.mar-amount:focus-within .mar-amount__prefix,
.mar-amount--has-val      .mar-amount__prefix {
    color: var(--mar-c-teal);
    background: rgba(13,148,136,0.05);
    border-right-color: rgba(13,148,136,0.25);
}

/* Barra animada en la parte inferior */
.mar-amount__bar {
    position: absolute;
    bottom: 0; left: 0;      /* cubre el ancho completo del input */
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--mar-c-teal), var(--mar-c-teal-m));
    width: 0%;
    transition: width 0.4s var(--mar-ease);
    border-radius: 0;
}

/* Campo de texto: ocupa todo el espacio restante */
.mar-amount__input {
    flex: 1;
    min-width: 0;           /* evita desbordamiento en flex */
    border: none;
    outline: none;
    background: transparent;
    padding: 16px 72px 16px 18px;   /* derecha: espacio para sufijo */
    font-family: var(--mar-ff-h);
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--mar-c-text);
    letter-spacing: -0.03em;
    caret-color: var(--mar-c-teal);
    display: block;
    box-shadow: none !important;
}
.mar-amount__input::placeholder {
    font-family: var(--mar-ff-b);
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: 0;
    color: var(--mar-c-border2);
}

/* Sufijo "€ / mes" a la derecha */
.mar-amount__suffix {
    position: absolute;
    right: 18px; top: 50%;
    transform: translateY(-50%);
    font-family: var(--mar-ff-b);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mar-c-border2);      /* visible siempre como referencia visual */
    pointer-events: none;
    opacity: 0.60;
    transition: color var(--mar-dur-fast) ease, opacity var(--mar-dur-fast) ease;
}
.mar-amount:focus-within .mar-amount__suffix,
.mar-amount--has-val      .mar-amount__suffix {
    opacity: 1;
    color: var(--mar-c-light);
}

/* ═══════════════════════════════════════════════════════════════════
   FECHA DE ANIVERSARIO
═══════════════════════════════════════════════════════════════════ */
.mar-aniv {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}
.mar-aniv__row {
    display: flex;
    gap: 10px;
    width: 100%;
    flex: 0 0 100%;
}
.mar-aniv__auto-msg,
.mar-aniv .mar-field-help {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 4px;
}
.mar-aniv__field {
    flex: 1;
}
.mar-aniv__select {
    width: 100%;
    border: 2px solid var(--mar-c-border);
    border-radius: var(--mar-r-xs);
    background: var(--mar-c-card);
    padding: 10px 14px;
    font-family: var(--mar-ff-b);
    font-size: 0.88rem;
    color: var(--mar-c-muted);
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    transition: border-color var(--mar-dur-fast) ease;
}
.mar-aniv__select:focus {
    border-color: var(--mar-c-teal);
    box-shadow: 0 0 0 3px var(--mar-c-teal-l);
}
.mar-aniv__select--has-val {
    color: var(--mar-c-text);
    border-color: rgba(13,148,136,0.50);
}
.mar-aniv__auto-msg {
    font-family: var(--mar-ff-b);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--mar-c-teal);
    margin-top: 6px;
    padding: 8px 12px;
    background: var(--mar-c-teal-l);
    border-radius: var(--mar-r-xs);
    border-left: 3px solid var(--mar-c-teal);
    line-height: 1.5;
    display: none;
}
.mar-aniv__auto-msg--visible {
    display: block;
    animation: marFadeUp var(--mar-dur-med) var(--mar-ease) both;
}
.mar-aniv__manual-link {
    font-family: var(--mar-ff-b);
    font-size: 0.72rem;
    color: var(--mar-c-light);
    margin-top: 6px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    transition: color var(--mar-dur-fast) ease;
}
.mar-aniv__manual-link:hover {
    color: var(--mar-c-teal);
}

/* Mensaje fecha futura */
.mar-aniv__auto-msg--future {
    background: rgba(245,158,11,0.10);
    border-left-color: var(--mar-c-amber);
    color: #78350f;
    font-weight: 500;
}
/* Sin datos en absoluto */
.mar-aniv__auto-msg--warn {
    background: rgba(239,68,68,0.08);
    border-left-color: var(--mar-c-red);
    color: #991b1b;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════
   SELECT DE MES
═══════════════════════════════════════════════════════════════════ */
.mar-select-wrap {
    position: relative;
    border: 2px solid var(--mar-c-border);
    border-radius: var(--mar-r-sm);
    background: var(--mar-c-card);
    transition:
        border-color var(--mar-dur-fast) ease,
        box-shadow   var(--mar-dur-fast) ease;
}
.mar-select-wrap:focus-within {
    border-color: var(--mar-c-teal);
    box-shadow: 0 0 0 4px rgba(13,148,136,0.12);
}
.mar-select-wrap--has-val { border-color: rgba(13,148,136,0.50); }

.mar-select {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    padding: 14px 44px 14px 18px;
    font-family: var(--mar-ff-b);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--mar-c-muted);
    cursor: pointer;
    box-shadow: none !important;
}
.mar-select--has-val { color: var(--mar-c-text); }
.mar-select option    { background: #fff; color: var(--mar-c-text); }

.mar-select-wrap__icon {
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--mar-c-light);
    pointer-events: none;
    transition: transform var(--mar-dur-fast) ease;
}
.mar-select-wrap:focus-within .mar-select-wrap__icon {
    transform: translateY(-50%) rotate(180deg);
}

/* Badge de tasa */
.mar-tasa-reveal {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
        max-height var(--mar-dur-med) var(--mar-ease),
        opacity    var(--mar-dur-med) ease,
        margin-top var(--mar-dur-med) ease;
    margin-top: 0;
}
.mar-tasa-reveal--visible {
    max-height: 80px;
    opacity: 1;
    margin-top: 8px;
}
.mar-tasa-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--mar-c-surface);
    border: 1px solid var(--mar-c-border);
    border-radius: var(--mar-r-xs);
    padding: 8px 14px;
}
.mar-tasa-chip__num {
    font-family: var(--mar-ff-h);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--mar-c-teal);
    letter-spacing: -0.02em;
}
.mar-tasa-chip__num--ipc { color: var(--mar-c-blue-m); }
.mar-tasa-chip__num--igc { color: var(--mar-c-amber); }
.mar-tasa-chip__num--neg { color: var(--mar-c-red) !important; }
.mar-tasa-chip__desc {
    font-family: var(--mar-ff-b);
    font-size: 0.78rem;
    color: var(--mar-c-muted);
    line-height: 1.4;
}
.mar-tasa-chip__desc strong { color: var(--mar-c-text); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   DIVISOR
═══════════════════════════════════════════════════════════════════ */
.mar-divider {
    height: 1px;
    background: var(--mar-c-border);
    margin: 2px 0;
}

/* ═══════════════════════════════════════════════════════════════════
   ZONA DE RESULTADO
═══════════════════════════════════════════════════════════════════ */
.mar-result-zone {
    position: relative;
    min-height: 90px;
}

.mar-placeholder {
    border: 2px dashed var(--mar-c-border);
    border-radius: var(--mar-r-sm);
    padding: 24px;
    text-align: center;
    color: var(--mar-c-light);
    font-family: var(--mar-ff-b);
    font-size: 0.83rem;
    line-height: 1.7;
    transition: all var(--mar-dur-med) ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.mar-placeholder--hide {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.98);
}

/* Tarjeta de resultado */
.mar-result {
    background: linear-gradient(145deg, #0d2e29 0%, #0a2420 100%);
    border-radius: var(--mar-r-sm);
    border: 1px solid rgba(13,148,136,0.30);
    padding: 20px;
    box-shadow:
        0 8px 32px rgba(13,148,136,0.20),
        0 2px 8px rgba(0,0,0,0.12);
    position: relative;
    overflow: hidden;
    animation: marFadeUp var(--mar-dur-slow) var(--mar-ease-spring) both;
}
.mar-result::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(13,148,136,0.5), transparent);
}
.mar-result--ipc {
    background: linear-gradient(145deg, #0e1e40 0%, #0b1830 100%);
    border-color: rgba(59,130,246,0.30);
    box-shadow:
        0 8px 32px rgba(30,64,175,0.20),
        0 2px 8px rgba(0,0,0,0.12);
}
.mar-result--ipc::before {
    background: linear-gradient(90deg, transparent, rgba(59,130,246,0.5), transparent);
}
.mar-result--igc {
    background: linear-gradient(145deg, #2d1f07 0%, #241a05 100%);
    border-color: rgba(217,119,6,0.30);
    box-shadow:
        0 8px 32px rgba(217,119,6,0.20),
        0 2px 8px rgba(0,0,0,0.12);
}
.mar-result--igc::before {
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.5), transparent);
}

/* Tag de encabezado del resultado */
.mar-result__tag {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.mar-result__tag-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mar-c-teal), var(--mar-c-teal-m));
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(13,148,136,0.50);
}
.mar-result--ipc .mar-result__tag-icon {
    background: linear-gradient(135deg, var(--mar-c-blue), var(--mar-c-blue-m));
    box-shadow: 0 2px 8px rgba(30,64,175,0.50);
}
.mar-result--igc .mar-result__tag-icon {
    background: linear-gradient(135deg, var(--mar-c-amber), var(--mar-c-amber-m));
    box-shadow: 0 2px 8px rgba(217,119,6,0.50);
}
.mar-result__tag-label {
    font-family: var(--mar-ff-b);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mar-c-teal-m);
}
.mar-result--ipc .mar-result__tag-label { color: #60a5fa; }
.mar-result--igc .mar-result__tag-label { color: var(--mar-c-amber-m); }

/* BUG-8 v3.3.1: subtítulo del tag (método seleccionado) — blanco semi-transparente sobre fondo oscuro */
.mar-result__tag-sub {
    font-family: var(--mar-ff-b);
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255,255,255,0.50);
    letter-spacing: 0.02em;
    margin-top: 2px;
}

/* Flujo de resultado */
.mar-result__flow {
    display: grid;
    grid-template-columns: 1fr 28px 1fr 28px 1fr;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
}
.mar-flow-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: center;
}
.mar-flow-item__lbl {
    font-family: var(--mar-ff-b);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
}
.mar-flow-item__val {
    font-family: var(--mar-ff-h);
    font-weight: 700;
    font-size: 1.0rem;
    color: rgba(255,255,255,0.7);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.mar-flow-item__sub {
    font-family: var(--mar-ff-b);
    font-size: 0.6rem;
    color: rgba(255,255,255,0.25);
}
.mar-flow-item__val--tasa {
    color: var(--mar-c-teal-m);
    font-size: 1.1rem;
}
.mar-result--ipc .mar-flow-item__val--tasa { color: #60a5fa; }
.mar-result--igc .mar-flow-item__val--tasa { color: var(--mar-c-amber-m); }
.mar-flow-item__val--tasa.mar-flow-item__val--neg { color: var(--mar-c-red-m) !important; }
.mar-flow-item__val--nueva {
    font-size: 1.55rem;
    color: #fff;
    text-shadow: 0 0 20px rgba(13,148,136,0.4);
}
.mar-result--ipc .mar-flow-item__val--nueva {
    text-shadow: 0 0 20px rgba(59,130,246,0.4);
}
.mar-result--igc .mar-flow-item__val--nueva {
    text-shadow: 0 0 20px rgba(245,158,11,0.4);
}
.mar-flow-arrow {
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.20);
}

/* Desglose inferior */
.mar-result__breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.mar-breakdown-item {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 10px 12px;
}
.mar-breakdown-item__lbl {
    font-family: var(--mar-ff-b);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: 4px;
}
.mar-breakdown-item__val {
    font-family: var(--mar-ff-h);
    font-weight: 700;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.85);
    letter-spacing: -0.01em;
}
.mar-breakdown-item__val--pos { color: var(--mar-c-green); }
.mar-breakdown-item__val--neg { color: var(--mar-c-red-m); }
.mar-result--ipc .mar-breakdown-item__val--pos { color: #60a5fa; }
.mar-result--igc .mar-breakdown-item__val--pos { color: var(--mar-c-amber-m); }

/* Botones generar carta / prórroga */
.mar-result__actions {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.mar-carta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--mar-r-xs);
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    font-family: var(--mar-ff-b);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--mar-dur-fast) ease;
}
.mar-carta-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.30);
}
/* Prórroga: layout campos fecha en fila */
.mar-carta__field--row {
    display: flex;
    gap: 12px;
}
.mar-carta__field--half {
    flex: 1;
    min-width: 0;
}
.mar-prorroga__preview-title {
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 18px;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════
   PANEL COMPARATIVO (ahora soporta 3 columnas)
═══════════════════════════════════════════════════════════════════ */
.mar-compare {
    margin-top: 16px;
    background: var(--mar-c-card);
    border-radius: var(--mar-r);
    border: 1px solid var(--mar-c-border);
    box-shadow: var(--mar-shadow-md);
    overflow: hidden;
    animation: marFadeUp var(--mar-dur-slow) var(--mar-ease) 0.1s both;
}
.mar-compare__header {
    padding: 14px 20px;
    background: var(--mar-c-surface);
    border-bottom: 1px solid var(--mar-c-border);
    font-family: var(--mar-ff-b);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--mar-c-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}
.mar-compare__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--mar-c-border);
}
.mar-compare__grid--triple {
    grid-template-columns: 1fr 1fr 1fr;
}
.mar-compare__col {
    background: var(--mar-c-card);
    padding: 16px 20px;
    border-top: 2px solid transparent;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.mar-compare__col--active {
    border-top-color: var(--mar-c-teal-m);
    background: var(--mar-c-teal-l);
}
.mar-result--ipc .mar-compare__col--active {
    border-top-color: var(--mar-c-blue-m);
    background: var(--mar-c-blue-l);
}
.mar-result--igc .mar-compare__col--active {
    border-top-color: var(--mar-c-amber-m);
    background: var(--mar-c-amber-l);
}
.mar-compare__col-hd {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}
.mar-compare__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mar-compare__dot--teal  { background: var(--mar-c-teal-m); }
.mar-compare__dot--blue  { background: var(--mar-c-blue-m); }
.mar-compare__dot--amber { background: var(--mar-c-amber-m); }
.mar-compare__col-title {
    font-family: var(--mar-ff-b);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mar-c-muted);
}
.mar-compare__stat-lbl {
    font-family: var(--mar-ff-b);
    font-size: 0.65rem;
    color: var(--mar-c-light);
    margin-bottom: 2px;
}
.mar-compare__stat-val {
    font-family: var(--mar-ff-h);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--mar-c-text);
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}
.mar-compare__stat-val--teal  { color: var(--mar-c-teal); }
.mar-compare__stat-val--blue  { color: var(--mar-c-blue-m); }
.mar-compare__stat-val--amber { color: var(--mar-c-amber); }
.mar-compare__stat-val--neg   { color: var(--mar-c-red) !important; }

/* ═══════════════════════════════════════════════════════════════════
   MODAL DE CARTA DE NOTIFICACIÓN (Bootstrap 5)
═══════════════════════════════════════════════════════════════════ */
.mar-carta-modal .modal-content {
    border-radius: var(--mar-r);
    border: 1px solid var(--mar-c-border);
    overflow: hidden;
}
.mar-carta-modal .modal-header {
    background: linear-gradient(145deg, #0f172a, #1e293b);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 18px 24px;
}
.mar-carta-modal .modal-title {
    font-family: var(--mar-ff-h);
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}
.mar-carta-modal .btn-close {
    filter: invert(1);
    opacity: 0.5;
}
.mar-carta-modal .modal-body {
    padding: 24px;
}
.mar-carta-modal .modal-footer {
    border-top: 1px solid var(--mar-c-border);
    padding: 14px 24px;
    background: var(--mar-c-surface);
}

/* Campos editables de la carta */
.mar-carta__field {
    margin-bottom: 14px;
}
.mar-carta__field-label {
    font-family: var(--mar-ff-b);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mar-c-muted);
    margin-bottom: 4px;
}
.mar-carta__field-input {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid var(--mar-c-border);
    border-radius: var(--mar-r-xs);
    font-family: var(--mar-ff-b);
    font-size: 0.88rem;
    color: var(--mar-c-text);
    outline: none;
    transition: border-color var(--mar-dur-fast) ease;
}
.mar-carta__field-input:focus {
    border-color: var(--mar-c-teal);
    box-shadow: 0 0 0 3px var(--mar-c-teal-l);
}

/* Vista previa de la carta */
.mar-carta__preview {
    border: 1px solid var(--mar-c-border);
    border-radius: var(--mar-r-xs);
    padding: 28px 32px;
    background: #fff;
    margin-top: 16px;
    font-family: var(--mar-ff-b);
    font-size: 0.88rem;
    color: var(--mar-c-text);
    line-height: 1.7;
}
.mar-carta__preview-head {
    text-align: right;
    margin-bottom: 24px;
    font-size: 0.82rem;
    color: var(--mar-c-muted);
}
.mar-carta__preview-dest {
    margin-bottom: 20px;
}
.mar-carta__preview-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 0.85rem;
}
.mar-carta__preview-table td {
    padding: 8px 12px;
    border: 1px solid var(--mar-c-border);
}
.mar-carta__preview-table td:first-child {
    font-weight: 600;
    background: var(--mar-c-surface);
    width: 40%;
}
.mar-carta__preview-firma {
    margin-top: 80px;
    text-align: left;
}
.mar-carta__preview-disclaimer {
    margin-top: 24px;
    padding: 10px 14px;
    background: var(--mar-c-surface);
    border-radius: var(--mar-r-xs);
    font-size: 0.72rem;
    color: var(--mar-c-light);
    font-style: italic;
    border-left: 3px solid var(--mar-c-border2);
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
    .mar-card__header { padding: 24px 20px 20px; }
    .mar-card__body   { padding: 20px 20px 22px; gap: 18px; }
    .mar-card__footer { padding: 12px 20px; }

    .mar-result__flow {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .mar-flow-arrow { transform: rotate(90deg); opacity: 0.4; }

    .mar-compare__grid,
    .mar-compare__grid--triple { grid-template-columns: 1fr; }
    .mar-compare__col:not(:last-child) {
        border-bottom: 1px solid var(--mar-c-border);
    }

    .mar-amount__input { font-size: 1.5rem; }

    .mar-toggle--triple { grid-template-columns: 1fr; gap: 4px; }
    .mar-toggle--triple .mar-toggle__slider { display: none; }
    .mar-toggle--triple .mar-toggle__btn--active {
        background: var(--mar-c-teal);
        border-radius: 9px;
    }
    .mar-toggle--triple .mar-toggle__btn--active.mar-toggle__btn--ipc-color {
        background: var(--mar-c-blue);
    }
    .mar-toggle--triple .mar-toggle__btn--active.mar-toggle__btn--igc-color {
        background: var(--mar-c-amber);
    }

    .mar-aniv { flex-direction: column; }

    .mar-wizard__opt { padding: 12px 14px; gap: 10px; }
    .mar-wizard__opt-icon { width: 34px; height: 34px; font-size: 1rem; }

    .mar-carta__preview { padding: 18px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   OVERRIDES DE BOOTSTRAP 5
═══════════════════════════════════════════════════════════════════ */
.mar-root .form-control,
.mar-root .form-select {
    all: unset;
}

.mar-root .mar-card__header {
    padding: 32px 36px 28px 40px !important;
}
@media (max-width: 520px) {
    .mar-root .mar-card__header {
        padding: 24px 20px 20px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ESTILOS DE IMPRESIÓN (carta de notificación)
═══════════════════════════════════════════════════════════════════ */
@media print {
    body * { visibility: hidden !important; }

    /* v3.3.1: solo el modal marcado como --printing se imprime */
    .mar-carta-modal--printing,
    .mar-carta-modal--printing .modal-dialog,
    .mar-carta-modal--printing .modal-content,
    .mar-carta-modal--printing .modal-body,
    .mar-carta-modal--printing .mar-carta__preview,
    .mar-carta-modal--printing .mar-carta__preview * {
        visibility: visible !important;
    }

    .mar-carta-modal--printing .modal-dialog {
        position: absolute !important;
        left: 0 !important; top: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .mar-carta-modal--printing .modal-content {
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .mar-carta-modal--printing .modal-header,
    .mar-carta-modal--printing .modal-footer,
    .mar-carta-modal--printing .mar-carta__field {
        display: none !important;
    }
    .mar-carta-modal--printing .modal-body {
        padding: 0 !important;
    }
    .mar-carta__preview {
        border: none !important;
        padding: 20mm !important;
        font-size: 12pt !important;
    }
    .mar-carta__preview-disclaimer {
        background: none !important;
        border-left: 2px solid #999 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MEJORAS v3.2.0
═══════════════════════════════════════════════════════════════════ */

/* ── Tasa chip: aviso de tope legal ── */
.mar-tasa-chip__tope {
    display: block;
    font-size: 0.7rem;
    color: #f59e0b;
    margin-top: 3px;
}
.mar-tasa-chip__num--ipc  { color: var(--mar-c-blue-m); }
.mar-tasa-chip__num--igc  { color: var(--mar-c-amber, #d97706); }
.mar-tasa-chip__num--neg  { color: var(--mar-c-green); }

/* ── Comparativa triple ── */
.mar-compare__grid--triple { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 520px) {
    .mar-compare__grid--triple { grid-template-columns: 1fr; }
}

/* ── Resultado negativo ── */
.mar-flow-item__val--neg        { color: var(--mar-c-green); }
.mar-breakdown-item__val--neg   { color: var(--mar-c-green); }

/* ── Carta: fila de tope legal ── */
.mar-carta__tope-row td { color: #92400e; font-size: 0.82rem; font-style: italic; }
.mar-carta__tope-val    { font-weight: 600; }
.mar-carta__row--destacada td { border-top: 2px solid var(--mar-c-border2); }
.mar-carta__fields     { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.mar-carta__required   { color: #dc2626; margin-left: 2px; }

/* ── Aviso de validación en modal ── */
.mar-carta__aviso-campos {
    margin: 0 16px 8px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #991b1b;
    font-size: 0.82rem;
}

/* ── IGC toggle color ── */
:root { --mar-c-amber: #d97706; }
.mar-toggle__slider--igc {
    background: linear-gradient(135deg, var(--mar-c-amber) 0%, #b45309 100%);
    box-shadow: 0 4px 16px rgba(217,119,6,0.35);
}
.mar-toggle__btn--active .mar-toggle__main { color: #fff; }

/* ── Resultados IGC ── */
.mar-result--igc {
    background: linear-gradient(145deg, #2d1f0a 0%, #261a07 100%);
    border-color: rgba(217,119,6,0.30);
    box-shadow: 0 8px 32px rgba(217,119,6,0.18), 0 2px 8px rgba(0,0,0,0.12);
}
.mar-result--igc::before {
    background: linear-gradient(90deg, transparent, rgba(217,119,6,0.5), transparent);
}
.mar-flow-item__val--tasa--igc { color: #fbbf24; }
.mar-compare__dot--amber        { background: var(--mar-c-amber); }
.mar-compare__stat-val--amber   { color: var(--mar-c-amber); }

/* ── Aniversario: estilos complementarios ── */
.mar-aniv__select--has-val { color: var(--mar-c-text); }

/* ── Carta: dirección en negrita en preview ── */
.mar-carta__preview-addr { font-weight: 600; padding-left: 16px; }

/* ═══════════════════════════════════════════════════════════════════
   MEJORAS UX v3.3.0
═══════════════════════════════════════════════════════════════════ */

/* ── UX-1: Campo renta rápido en wizard ── */
.mar-wizard__renta-quick {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--mar-r-xs);
    padding: 14px 16px;
    margin-bottom: 14px;
}
.mar-wizard__renta-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mar-ff-b);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.50);
    margin-bottom: 10px;
}
.mar-wizard__renta-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.30);
    font-style: italic;
}
.mar-wizard__renta-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.mar-wizard__renta-prefix {
    position: absolute;
    left: 14px;
    font-family: var(--mar-ff-h);
    font-size: 1.2rem;
    font-weight: 700;
    color: rgba(255,255,255,0.30);
    pointer-events: none;
    z-index: 1;
    transition: color var(--mar-dur-fast) ease;
}
.mar-wizard__renta-input {
    width: 100%;
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    background: rgba(255,255,255,0.07);
    padding: 12px 80px 12px 42px;
    font-family: var(--mar-ff-h);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    outline: none;
    caret-color: var(--mar-c-teal-m);
    letter-spacing: -0.02em;
    transition: border-color var(--mar-dur-fast) ease, background var(--mar-dur-fast) ease;
}
.mar-wizard__renta-input::placeholder {
    font-family: var(--mar-ff-b);
    font-size: 0.95rem;
    font-weight: 300;
    color: rgba(255,255,255,0.18);
    letter-spacing: 0;
}
.mar-wizard__renta-input:focus {
    border-color: var(--mar-c-teal-m);
    background: rgba(255,255,255,0.10);
}
.mar-wizard__renta-input:focus + .mar-wizard__renta-suffix,
.mar-wizard__renta-input:not(:placeholder-shown) + .mar-wizard__renta-suffix {
    opacity: 1;
}
.mar-wizard__renta-suffix {
    position: absolute;
    right: 14px;
    font-family: var(--mar-ff-b);
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.30);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--mar-dur-fast) ease;
}

/* ── UX-2: Etiquetas Opción A/B ── */
.mar-aniv__opcion-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mar-ff-b);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--mar-c-muted);
    margin-top: 14px;
    margin-bottom: 6px;
}
.mar-aniv__opcion-badge {
    display: grid;
    place-items: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.mar-aniv__opcion-badge--a { background: var(--mar-c-teal); }
.mar-aniv__opcion-badge--b { background: var(--mar-c-blue-m); }

/* Separador entre A y B */
.mar-aniv__sep {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 4px;
}
.mar-aniv__sep-line {
    flex: 1;
    height: 1px;
    background: var(--mar-c-border);
}
.mar-aniv__manual-btn {
    background: transparent;
    border: 1px solid var(--mar-c-border2);
    border-radius: 100px;
    padding: 4px 12px;
    font-family: var(--mar-ff-b);
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--mar-c-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--mar-dur-fast) ease, color var(--mar-dur-fast) ease;
}
.mar-aniv__manual-btn:hover {
    border-color: var(--mar-c-teal);
    color: var(--mar-c-teal);
}

/* Ocultar opcion B con animacion */
#mar-select-wrap[data-auto-active="true"],
.mar-aniv__select-wrap--hidden {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--mar-dur-med) var(--mar-ease), opacity var(--mar-dur-med) ease;
}

/* ── UX-3: Validación blur carta ── */
.mar-carta__field-input:focus {
    outline: none;
    border-color: var(--mar-c-teal);
    box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}

/* ── UX-4: Fecha de vigencia ── */
.mar-vigencia {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.25);
    border-radius: var(--mar-r-xs);
    padding: 9px 14px;
    font-family: var(--mar-ff-b);
    font-size: 0.78rem;
    color: var(--mar-c-muted);
    margin-top: 8px;
    animation: marFadeUp var(--mar-dur-med) var(--mar-ease) both;
}
.mar-vigencia__icon { font-size: 0.9rem; flex-shrink: 0; }
.mar-vigencia__label { flex: 1; }
.mar-vigencia__fecha {
    color: var(--mar-c-green);
    font-weight: 700;
    font-size: 0.85rem;
}

/* ── UX-5: Banner de tope legal ── */
.mar-tope-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(245,158,11,0.10);
    border: 1px solid rgba(245,158,11,0.35);
    border-left: 4px solid #f59e0b;
    border-radius: var(--mar-r-xs);
    padding: 12px 14px;
    margin-top: 10px;
    margin-bottom: 4px;
    animation: marFadeUp var(--mar-dur-med) var(--mar-ease) both;
}
.mar-tope-banner__icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.mar-tope-banner__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mar-tope-banner__titulo {
    font-family: var(--mar-ff-b);
    font-size: 0.78rem;
    font-weight: 700;
    color: #92400e;
}
.mar-tope-banner__detalle {
    font-family: var(--mar-ff-b);
    font-size: 0.72rem;
    color: #a16207;
    line-height: 1.5;
}

/* ── UX-6: Comparativa colapsable ── */
.mar-compare__toggle {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--mar-c-border);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-family: var(--mar-ff-b);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--mar-c-muted);
    transition: background var(--mar-dur-fast) ease;
}
.mar-compare__toggle:hover { background: var(--mar-c-surface); }
.mar-compare__toggle-icon {
    font-size: 0.65rem;
    transition: transform var(--mar-dur-fast) ease;
}
.mar-compare__toggle[aria-expanded="false"] .mar-compare__toggle-icon {
    transform: rotate(180deg);
}
.mar-compare__body {
    overflow: hidden;
    transition: max-height var(--mar-dur-med) var(--mar-ease);
    max-height: 600px;
}
.mar-compare__body--collapsed { max-height: 0; }
@media (max-width: 520px) {
    .mar-compare__body { max-height: 0; }
    .mar-compare__body--expanded { max-height: 800px; }
    .mar-compare__toggle[aria-expanded="false"] .mar-compare__toggle-icon { transform: rotate(180deg); }
    .mar-compare__toggle[aria-expanded="true"]  .mar-compare__toggle-icon { transform: rotate(0deg); }
}

/* ── UX-7: Flechas verticales en móvil ── */
@media (max-width: 520px) {
    .mar-flow-arrow {
        transform: none;
        opacity: 0;
        height: 0;
        overflow: hidden;
        margin: 0;
    }
    .mar-result__flow {
        position: relative;
    }
    .mar-result__flow::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 28px;
        bottom: 28px;
        width: 1px;
        background: linear-gradient(180deg, transparent, rgba(255,255,255,0.15), transparent);
        transform: translateX(-50%);
    }
    .mar-flow-item {
        padding: 8px 0;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .mar-flow-item:last-child { border-bottom: none; }
}

/* ── UX-8: Sello credibilidad INE ── */
.mar-ine-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    background: var(--mar-c-surface);
    border: 1px solid var(--mar-c-border);
    border-radius: 100px;
    font-family: var(--mar-ff-b);
    font-size: 0.68rem;
    color: var(--mar-c-light);
    margin-top: 10px;
    width: fit-content;
    animation: marFadeUp var(--mar-dur-med) var(--mar-ease) 0.2s both;
}
.mar-ine-badge__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--mar-c-green);
    box-shadow: 0 0 5px rgba(16,185,129,0.5);
    flex-shrink: 0;
}
.mar-ine-badge__link {
    color: var(--mar-c-teal);
    text-decoration: none;
    font-weight: 600;
}
.mar-ine-badge__link:hover { text-decoration: underline; }
.mar-ine-badge__fecha { color: var(--mar-c-muted); }

/* ═══════════════════════════════════════════════════════════════════
   MEJORAS UX v3.3.0
═══════════════════════════════════════════════════════════════════ */

/* ── UX-1: campo renta en el paso resultado del wizard ── */
.mar-wizard__quick-renta {
    background: var(--mar-c-surface);
    border: 1.5px solid var(--mar-c-teal-l);
    border-radius: var(--mar-r-sm);
    padding: 16px 18px;
    margin: 16px 0 0;
}
.mar-wizard__quick-renta-intro {
    font-family: var(--mar-ff-b);
    font-size: 0.82rem;
    color: var(--mar-c-muted);
    margin: 0 0 14px;
    line-height: 1.55;
    padding-left: 2px;
    border-left: 3px solid var(--mar-c-teal-l);
    padding-left: 10px;
}
.mar-wizard__quick-renta-label {
    display: block;
    font-family: var(--mar-ff-b);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--mar-c-muted);
    margin-bottom: 8px;
}
.mar-wizard__quick-renta-opt {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mar-c-light);
}
/* wizard-quick-renta: ver sección FIXES abajo */
.mar-wizard__quick-renta-hint {
    font-family: var(--mar-ff-b);
    font-size: 0.7rem;
    color: var(--mar-c-light);
    margin-top: 6px;
    margin-bottom: 0;
}

/* ── UX-2: separador Opción A / Opción B ── */
.mar-aniv-separator {
    margin: 18px 0 10px;
    position: relative;
}
.mar-aniv-separator__line {
    height: 1px;
    background: var(--mar-c-border);
    position: absolute;
    top: 50%; left: 0; right: 0;
}
.mar-aniv-separator__opts {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--mar-c-card);
    width: fit-content;
    margin: 0 auto;
    padding: 0 12px;
}
.mar-aniv-separator__opt {
    font-family: var(--mar-ff-b);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mar-c-light);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color var(--mar-dur-fast) ease, background var(--mar-dur-fast) ease;
    user-select: none;
}
.mar-aniv-separator__opt:hover {
    color: var(--mar-c-muted);
}
.mar-aniv-separator__opt--active {
    color: var(--mar-c-teal);
    background: var(--mar-c-teal-l);
    font-weight: 700;
}
.mar-aniv-separator__divider {
    color: var(--mar-c-border2);
    font-size: 0.8rem;
    line-height: 1;
}

/* Ocultar panel con animación suave */
.mar-aniv--hidden {
    display: none;
}
.mar-select-wrap--hidden {
    display: none;
}

/* ── UX-4: fecha de entrada en vigor ── */
.mar-vigor {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--mar-r-xs);
    padding: 8px 14px;
    margin-top: 10px;
    animation: marFadeUp var(--mar-dur-med) var(--mar-ease) both;
}
.mar-vigor__icon {
    font-size: 0.85rem;
    flex-shrink: 0;
}
.mar-vigor__txt {
    font-family: var(--mar-ff-b);
    font-size: 0.76rem;
    color: rgba(255,255,255,0.60);
    line-height: 1.4;
}

/* ── UX-5: banner de tope legal ── */
.mar-tope-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.35);
    border-left: 4px solid #f59e0b;
    border-radius: var(--mar-r-xs);
    padding: 12px 16px;
    margin-bottom: 14px;
    animation: marFadeUp var(--mar-dur-med) var(--mar-ease) both;
}
.mar-tope-banner__icon {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.mar-tope-banner__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mar-tope-banner__msg {
    font-family: var(--mar-ff-b);
    font-size: 0.82rem;
    font-weight: 600;
    color: #f59e0b;
    line-height: 1.4;
}
.mar-tope-banner__ref {
    font-family: var(--mar-ff-b);
    font-size: 0.70rem;
    color: rgba(245,158,11,0.65);
    font-style: italic;
}

/* ── UX-6: comparativa colapsable ── */
.mar-compare-wrap {
    margin-top: 16px;
}
.mar-compare-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--mar-c-surface);
    border: 1px solid var(--mar-c-border);
    border-radius: var(--mar-r-xs);
    padding: 10px 16px;
    font-family: var(--mar-ff-b);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mar-c-muted);
    cursor: pointer;
    text-align: left;
    transition: background var(--mar-dur-fast) ease, color var(--mar-dur-fast) ease;
    letter-spacing: 0.05em;
}
.mar-compare-toggle:hover {
    background: var(--mar-c-border);
    color: var(--mar-c-text);
}
.mar-compare-toggle__icon {
    font-size: 0.7rem;
    transition: transform var(--mar-dur-fast) ease;
    flex-shrink: 0;
}
.mar-compare-toggle[aria-expanded="true"] .mar-compare-toggle__icon {
    transform: rotate(180deg);
}
/* El .mar-compare ya tiene sus estilos; solo ajustar el margen superior */
.mar-compare-wrap .mar-compare {
    margin-top: 0;
    border-top: none;
    border-radius: 0 0 var(--mar-r-sm) var(--mar-r-sm);
    animation: marFadeUp var(--mar-dur-med) var(--mar-ease) both;
}
.mar-compare-toggle {
    border-radius: var(--mar-r-xs);
}
.mar-compare-wrap .mar-compare-toggle[aria-expanded="true"] {
    border-radius: var(--mar-r-xs) var(--mar-r-xs) 0 0;
    border-bottom-color: transparent;
}

/* ── UX-7: separador horizontal en flujo vertical (móvil) ── */
@media (max-width: 520px) {
    .mar-result__flow {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .mar-flow-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 28px;
        position: relative;
    }
    /* Sustituir la flecha rotada por una línea con punto central */
    .mar-flow-arrow::before {
        content: '';
        position: absolute;
        left: 20%; right: 20%;
        top: 50%;
        height: 1px;
        background: rgba(255,255,255,0.12);
    }
    .mar-flow-arrow::after {
        content: '\25bc'; /* flecha abajo */
        font-size: 0.6rem;
        color: rgba(255,255,255,0.25);
        position: relative;
        z-index: 1;
        background: transparent;
    }
    /* Ocultar el carácter original */
    .mar-flow-arrow {
        font-size: 0;
        color: transparent;
    }
}

/* ── UX-8: fuente INE bajo el resultado ── */
.mar-result__source {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.mar-result__source-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--mar-c-green);
    box-shadow: 0 0 5px rgba(16,185,129,0.5);
    flex-shrink: 0;
    animation: marPulse 2.5s ease-in-out infinite;
}
.mar-result__source-link,
.mar-result__source-link:visited {
    font-family: var(--mar-ff-b);
    font-size: 0.68rem;
    color: rgba(255,255,255,0.30);
    text-decoration: none;
    transition: color var(--mar-dur-fast) ease;
}
.mar-result__source-link:hover {
    color: rgba(255,255,255,0.60);
    text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════════════
   FIXES v3.3.1
═══════════════════════════════════════════════════════════════════ */

/* mar-amount: layout flex real [ prefix€ | input | sufijo ] — ver sección INPUT DE IMPORTE */

/* Wizard quick-renta: € vía ::before, igual que el input principal */
/* Wizard renta: flex [ € | input ] igual al input principal */
.mar-wizard__quick-renta-wrap {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--mar-c-border);
    border-radius: var(--mar-r-xs);
    overflow: hidden;
    transition: border-color var(--mar-dur-fast) ease;
}
.mar-wizard__quick-renta-wrap:focus-within {
    border-color: var(--mar-c-teal-m);
    box-shadow: 0 0 0 3px rgba(13,148,136,0.18);
}
.mar-wizard__quick-renta-prefix {
    position: static;   /* reset del position:absolute del bloque original */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    font-family: var(--mar-ff-h);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mar-c-muted);
    background: var(--mar-c-surface);
    border-right: 1.5px solid var(--mar-c-border);
    pointer-events: none;
    user-select: none;
    transition: color var(--mar-dur-fast) ease, background var(--mar-dur-fast) ease;
}
.mar-wizard__quick-renta-wrap:focus-within .mar-wizard__quick-renta-prefix {
    color: var(--mar-c-teal);
    background: rgba(13,148,136,0.10);
    border-right-color: rgba(13,148,136,0.25);
}
.mar-wizard__quick-renta-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 12px 14px;
    color: var(--mar-c-text);
    font-family: var(--mar-ff-h);
    font-size: 1.1rem;
    font-weight: 600;
}
.mar-wizard__quick-renta-input::placeholder {
    color: var(--mar-c-light);
    font-weight: 400;
}
.mar-wizard__quick-renta-suffix {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 14px 0 6px;
    font-family: var(--mar-ff-b);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mar-c-light);       /* oscuro: panel resultado es claro */
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    transition: color var(--mar-dur-fast) ease;
}
.mar-wizard__quick-renta-wrap:focus-within .mar-wizard__quick-renta-suffix {
    color: var(--mar-c-muted);
}

/* FIX: Selects de aniversario modernos en una sola línea */
.mar-aniv__row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.mar-aniv__field {
    flex: 1;
    position: relative;
}
.mar-aniv__select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: var(--mar-c-card)
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
                no-repeat right 12px center;
    border: 2px solid var(--mar-c-border);
    border-radius: var(--mar-r-xs);
    padding: 11px 36px 11px 14px;
    font-family: var(--mar-ff-b);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--mar-c-muted);
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: border-color var(--mar-dur-fast) ease, box-shadow var(--mar-dur-fast) ease;
    /* Eliminar el feo select nativo en Firefox */
    -moz-appearance: none;
}
.mar-aniv__select:focus {
    border-color: var(--mar-c-teal);
    box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}
.mar-aniv__select option { background: #fff; color: var(--mar-c-text); }

/* Descripción encima de los selects */
.mar-aniv__desc {
    font-family: var(--mar-ff-b);
    font-size: 0.70rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mar-c-muted);
    margin-bottom: 6px;
    margin-top: 4px;
}

/* Mensaje auto-calculado */
.mar-aniv__auto-msg {
    font-family: var(--mar-ff-b);
    font-size: 0.72rem;
    color: var(--mar-c-teal);
    margin-top: 6px;
    min-height: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--mar-dur-med) ease, opacity var(--mar-dur-med) ease;
}
.mar-aniv__auto-msg--visible {
    max-height: 40px;
    opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════════
   MODAL DE AYUDA  v3.3.4
═══════════════════════════════════════════════════════════════════ */

/* ── Botón ? en cabecera ── */
.mar-help-btn {
    position: relative;
    top: auto;
    right: auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--mar-c-teal);
    color: #fff;
    font-family: var(--mar-ff-h);
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(13,148,136,0.40);
    transition: background var(--mar-dur-fast) ease,
                box-shadow   var(--mar-dur-fast) ease,
                transform    var(--mar-dur-fast) ease;
    z-index: 10;
    line-height: 1;
}
.mar-help-btn:hover,
.mar-help-btn:focus-visible {
    background: var(--mar-c-teal-m);
    box-shadow: 0 4px 18px rgba(13,148,136,0.55);
    transform: scale(1.08);
    outline: none;
}
.mar-help-btn:active {
    transform: scale(0.97);
}

/* ── Wrapper de botones de cabecera ──────────────────────────── */
.mar-header__btns {
    position: absolute;
    top: 16px;
    right: 20px;
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 10;
}

/* ── Botón changelog ─────────────────────────────────────────── */
.mar-changelog-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.10);
    color: #fff;
    font-size: 1.0rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--mar-dur-fast) ease,
                border-color var(--mar-dur-fast) ease,
                transform    var(--mar-dur-fast) ease;
    line-height: 1;
}
.mar-changelog-btn:hover,
.mar-changelog-btn:focus-visible {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.55);
    transform: scale(1.08);
    outline: none;
}
.mar-changelog-btn:active {
    transform: scale(0.97);
}

/* ── Modal changelog ─────────────────────────────────────────── */
.mar-changelog-body {
    padding: 20px 24px;
}
.mar-changelog-empty {
    color: var(--mar-c-light);
    font-size: 0.88rem;
    font-style: italic;
}
.mar-changelog-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mar-changelog-item {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mar-c-border);
    font-size: 0.88rem;
    line-height: 1.5;
}
.mar-changelog-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.mar-changelog-fecha {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--mar-c-teal);
    font-size: 0.82rem;
    white-space: nowrap;
}
.mar-changelog-texto {
    color: var(--mar-c-text);
}

/* ── Modal container ── */
.mar-ayuda-modal .modal-dialog {
    max-width: 760px;
}
.mar-ayuda-content {
    background: #fff;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.30);
}

/* ── Header del modal ── */
.mar-ayuda-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-bottom: none;
    padding: 24px 28px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
.mar-ayuda-title {
    font-family: var(--mar-ff-h);
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mar-ayuda-title-icon { font-size: 1rem; }
.mar-ayuda-header .btn-close {
    position: absolute;
    top: 18px;
    right: 20px;
    opacity: 0.60;
    transition: opacity var(--mar-dur-fast) ease;
}
.mar-ayuda-header .btn-close:hover { opacity: 1; }

/* ── Pestañas ── */
.mar-ayuda-tabs-wrap {
    background: #0f172a;
    padding: 16px 24px 20px;
}
.mar-ayuda-tabs {
    display: flex;
    gap: 6px;
    border-bottom: none;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 0;
}
/* Cada pestaña ocupa 1/3 del ancho disponible */
.mar-ayuda-tabs .nav-item {
    flex: 1;
}
.mar-ayuda-tab {
    width: 100%;
    font-family: var(--mar-ff-b);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--mar-c-teal-m) !important;    /* verde en inactivo — !important vs Bootstrap nav-link */
    border: none;
    border-radius: 7px;
    padding: 9px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background var(--mar-dur-fast) ease,
                color     var(--mar-dur-fast) ease,
                box-shadow var(--mar-dur-fast) ease;
    background: transparent;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mar-ayuda-tab:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.10);
}
.mar-ayuda-tab.active,
.mar-ayuda-tab.active:focus,
.mar-ayuda-tab.active:focus-visible {
    background: var(--mar-c-teal);
    color: #fff !important;                   /* blanco en activo — siempre */
    box-shadow: 0 2px 8px rgba(13,148,136,0.40);
}
.mar-ayuda-tab.active:hover {
    background: var(--mar-c-teal-m);
    color: #fff !important;
}
.mar-ayuda-tab-icon {
    font-size: 0.80rem;
    flex-shrink: 0;
}

/* ── Body ── */
.mar-ayuda-body {
    padding: 28px;
    max-height: 68vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--mar-c-border) transparent;
}
.mar-ayuda-body::-webkit-scrollbar { width: 5px; }
.mar-ayuda-body::-webkit-scrollbar-thumb { background: var(--mar-c-border2); border-radius: 4px; }

.mar-ayuda-lead {
    font-family: var(--mar-ff-b);
    font-size: 0.92rem;
    color: #4b5563;
    line-height: 1.65;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

/* ── Árbol de decisión ── */
.mar-ayuda-tree {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.mar-ayuda-tree__node--root {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 18px;
}
.mar-ayuda-tree__node--sub {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 12px;
}
.mar-ayuda-tree__q {
    font-family: var(--mar-ff-b);
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
}
.mar-ayuda-tree__branches {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.mar-ayuda-tree__branch {
    flex: 1;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mar-ayuda-tree__branch--main {
    flex: 2;
    min-width: 320px;
}
.mar-ayuda-tree__label {
    font-family: var(--mar-ff-b);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    padding: 4px 10px;
    background: #f1f5f9;
    border-radius: 6px;
    border-left: 3px solid #cbd5e1;
    align-self: flex-start;
}
.mar-ayuda-tree__label--after { border-left-color: var(--mar-c-teal); color: var(--mar-c-teal-m); }
.mar-ayuda-tree__label--before { border-left-color: #94a3b8; }
.mar-ayuda-tree__sub-branches {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mar-ayuda-tree__result {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    font-family: var(--mar-ff-b);
    font-size: 0.82rem;
    color: #374151;
    line-height: 1.55;
    flex: 1;
}
.mar-ayuda-tree__result--irav {
    border-left: 4px solid var(--mar-c-teal);
    background: rgba(13,148,136,0.04);
}
.mar-ayuda-tree__result--ipc {
    border-left: 4px solid var(--mar-c-blue-m);
    background: rgba(37,99,235,0.03);
}
.mar-ayuda-tree__result--igc {
    border-left: 4px solid var(--mar-c-amber);
    background: rgba(245,158,11,0.04);
}
.mar-ayuda-tree__result-badge {
    display: inline-block;
    font-family: var(--mar-ff-h);
    font-size: 0.80rem;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.mar-ayuda-tree__result--irav .mar-ayuda-tree__result-badge {
    background: var(--mar-c-teal-l);
    color: var(--mar-c-teal-m);
}
.mar-ayuda-tree__result--ipc .mar-ayuda-tree__result-badge {
    background: rgba(37,99,235,0.10);
    color: var(--mar-c-blue-m);
}
.mar-ayuda-tree__result--igc .mar-ayuda-tree__result-badge {
    background: rgba(245,158,11,0.12);
    color: #92400e;
}
.mar-ayuda-tree__ref {
    margin-top: 10px;
    font-size: 0.68rem;
    font-style: italic;
    color: #94a3b8;
}
.mar-ayuda-note {
    background: rgba(245,158,11,0.08);
    border-left: 3px solid var(--mar-c-amber);
    border-radius: 0 6px 6px 0;
    padding: 8px 12px;
    font-size: 0.78rem;
    color: #78350f;
    margin-top: 8px;
}

/* ── Pasos de uso ── */
.mar-ayuda-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.mar-ayuda-step {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
}
.mar-ayuda-step:last-child { border-bottom: none; }
.mar-ayuda-step__num {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: #0f172a;
    color: #fff;
    font-family: var(--mar-ff-h);
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.mar-ayuda-step__content { flex: 1; }
.mar-ayuda-step__title {
    font-family: var(--mar-ff-b);
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.mar-ayuda-step__content p {
    font-family: var(--mar-ff-b);
    font-size: 0.83rem;
    color: #4b5563;
    line-height: 1.6;
    margin: 0 0 8px;
}
.mar-ayuda-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 12px;
}
.mar-ayuda-badge--teal { background: var(--mar-c-teal-l); color: var(--mar-c-teal-m); }

/* Callout */
.mar-ayuda-callout {
    border-radius: 8px;
    padding: 12px 16px;
    font-family: var(--mar-ff-b);
    font-size: 0.80rem;
    line-height: 1.55;
    margin: 10px 0;
}
.mar-ayuda-callout--info {
    background: rgba(13,148,136,0.06);
    border-left: 3px solid var(--mar-c-teal);
    color: #065f46;
}
.mar-ayuda-callout--warn {
    background: rgba(245,158,11,0.07);
    border-left: 3px solid var(--mar-c-amber);
    color: #78350f;
}
.mar-ayuda-callout code {
    background: rgba(0,0,0,0.07);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.85em;
}

/* Demo resultado */
.mar-ayuda-result-demo {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0f172a;
    border-radius: 10px;
    padding: 16px 20px;
    margin: 12px 0;
    flex-wrap: wrap;
    justify-content: center;
}
.mar-ayuda-result-demo__item {
    text-align: center;
}
.mar-ayuda-result-demo__lbl {
    font-family: var(--mar-ff-b);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 4px;
}
.mar-ayuda-result-demo__val {
    font-family: var(--mar-ff-h);
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255,255,255,0.80);
}
.mar-ayuda-result-demo__item--pct .mar-ayuda-result-demo__val { color: var(--mar-c-teal); }
.mar-ayuda-result-demo__item--new .mar-ayuda-result-demo__val { color: #fff; font-size: 1.25rem; }
.mar-ayuda-result-demo__arrow {
    color: rgba(255,255,255,0.20);
    font-size: 1.2rem;
}

/* ── Listas ── */
.mar-ayuda-list {
    font-family: var(--mar-ff-b);
    font-size: 0.82rem;
    color: #374151;
    line-height: 1.65;
    padding-left: 20px;
    margin: 8px 0;
}
.mar-ayuda-list li { margin-bottom: 4px; }
.mar-ayuda-list--ordered { list-style: decimal; }

/* ── FAQ ── */
.mar-ayuda-faq { margin-top: 28px; }
.mar-ayuda-faq__title {
    font-family: var(--mar-ff-b);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 12px;
}
.mar-ayuda-faq__item {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}
.mar-ayuda-faq__q {
    font-family: var(--mar-ff-b);
    font-size: 0.84rem;
    font-weight: 600;
    color: #1e293b;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background var(--mar-dur-fast) ease;
}
.mar-ayuda-faq__q:hover { background: #f8fafc; }
.mar-ayuda-faq__q::after {
    content: '+';
    font-family: var(--mar-ff-h);
    font-size: 1.1rem;
    color: var(--mar-c-teal);
    flex-shrink: 0;
    margin-left: 10px;
}
.mar-ayuda-faq__item[open] .mar-ayuda-faq__q::after { content: '−'; }
.mar-ayuda-faq__a {
    font-family: var(--mar-ff-b);
    font-size: 0.82rem;
    color: #4b5563;
    line-height: 1.65;
    padding: 0 16px 14px;
    border-top: 1px solid #f0f4f8;
}

/* ── Normas legales ── */
.mar-ayuda-normas {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.mar-ayuda-norma {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}
.mar-ayuda-norma__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.mar-ayuda-norma__badge {
    font-family: var(--mar-ff-h);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.mar-ayuda-norma__badge--blue  { background: rgba(37,99,235,0.10);  color: #1d4ed8; }
.mar-ayuda-norma__badge--amber { background: rgba(245,158,11,0.12); color: #92400e; }
.mar-ayuda-norma__badge--teal  { background: var(--mar-c-teal-l);   color: var(--mar-c-teal-m); }
.mar-ayuda-norma__badge--green { background: rgba(16,185,129,0.10); color: #065f46; }
.mar-ayuda-norma__title {
    font-family: var(--mar-ff-b);
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
}
.mar-ayuda-norma__body {
    padding: 16px 18px;
    font-family: var(--mar-ff-b);
    font-size: 0.82rem;
    color: #4b5563;
    line-height: 1.65;
}
.mar-ayuda-norma__body p { margin: 0 0 10px; }
.mar-ayuda-norma__body p:last-of-type { margin-bottom: 0; }
.mar-ayuda-norma__vigencia {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: #64748b;
    font-style: italic;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f0f4f8;
}
.mar-ayuda-norma__vigencia-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
}
.mar-ayuda-norma__vigencia-dot--active {
    background: var(--mar-c-green);
    box-shadow: 0 0 5px rgba(16,185,129,0.5);
    animation: marPulse 2.5s ease-in-out infinite;
}

/* ── Disclaimer legal ── */
.mar-ayuda-disclaimer {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 18px;
    margin-top: 24px;
    font-family: var(--mar-ff-b);
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.6;
}
.mar-ayuda-disclaimer-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.mar-ayuda-disclaimer-link { color: var(--mar-c-teal-m); }
.mar-ayuda-disclaimer-link:hover { color: var(--mar-c-teal); }

/* ── Mobile ── */
@media (max-width: 640px) {
    .mar-ayuda-tree__branches { flex-direction: column; }
    .mar-ayuda-tree__branch--main { min-width: 100%; }
    .mar-ayuda-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .mar-ayuda-tab { white-space: nowrap; padding: 10px 12px; font-size: 0.70rem; }
    .mar-ayuda-body { padding: 18px; }
    .mar-ayuda-result-demo { gap: 6px; padding: 12px; }
}