/* ===================================================================
   YAXTUN · Capa visual 2026
   -------------------------------------------------------------------
   Se carga DESPUÉS de style.css y sólo redefine tokens y componentes.
   Si algo no te gusta, borras este archivo y vuelve el diseño anterior:
   nada de style.css fue modificado.

   La idea: el resultado no debe parecer un widget web, debe parecer un
   documento fiscal. Piedra caliza, jade y oro; números en cifras
   tabulares que alinean como en una cédula de nómina de verdad.
   =================================================================== */

.yaxtun-app {
    /* Superficies: caliza cálida en vez del gris azulado */
    --yx-bg: #F7F6F2;
    --yx-surface: #FFFFFF;
    --yx-border: #E4E1D8;

    /* Jade: el verde de la marca, con un fondo más profundo */
    --yx-green-900: #0E2B22;
    --yx-green-800: #1A4D2E;
    --yx-green-700: #2A6B42;
    --yx-green-600: #35855A;
    --yx-green-500: #3E9E6E;
    --yx-green-100: #E3F0E8;
    --yx-green-50:  #F1F8F3;

    /* Oro solar: se reserva para lo que importa */
    --yx-gold-600: #B8963F;
    --yx-gold-500: #C9A84C;
    --yx-gold-400: #E0C96E;
    --yx-gold-100: #FBF3DF;

    /* Tinta */
    --yx-text: #15201B;
    --yx-text-secondary: #4C5A52;
    --yx-text-muted: #8B968E;

    /* Terracota: sólo para lo que resta (ISR, errores). Nunca decorativo. */
    --yx-red: #B3402F;
    --yx-retencion: #B3402F;

    --yx-radius: 10px;
    --yx-radius-sm: 7px;
    --yx-radius-lg: 14px;

    --yx-shadow-sm: 0 1px 2px rgba(14,43,34,.05);
    --yx-shadow-md: 0 2px 10px rgba(14,43,34,.07);
    --yx-shadow-lg: 0 12px 40px rgba(14,43,34,.10);
}

/* Todo número de dinero alinea en columna. Esto es lo que separa una
   calculadora seria de una hoja de cálculo improvisada. */
.yaxtun-app .yx-calc-table td,
.yaxtun-app .yx-rc-amount,
.yaxtun-app .yx-result-total,
.yaxtun-app .yx-neto-linea {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------- Encabezado ---------- */
.yaxtun-app .yx-header {
    background: var(--yx-green-900);
    border-bottom: 1px solid rgba(201,168,76,.28);
    box-shadow: none;
}
.yaxtun-app .yx-header .yx-logo-name { letter-spacing: .16em; }
.yaxtun-app .yx-header .yx-date { color: rgba(255,255,255,.62); }

/* ---------- Banner de bienvenida ---------- */
.yaxtun-app .yx-welcome-banner {
    background:
        radial-gradient(120% 140% at 88% 0%, rgba(201,168,76,.16) 0%, transparent 55%),
        linear-gradient(135deg, #0E2B22 0%, #1A4D2E 100%);
    border: 1px solid rgba(201,168,76,.22);
}
.yaxtun-app .yx-welcome-banner h1 {
    font-family: var(--yx-font-display);
    letter-spacing: -.01em;
}

/* ---------- Botones ---------- */
.yaxtun-app .yx-btn-primary {
    background: var(--yx-green-800);
    box-shadow: 0 1px 0 rgba(255,255,255,.12) inset;
    letter-spacing: .01em;
}
.yaxtun-app .yx-btn-primary:hover {
    background: var(--yx-green-700);
    transform: none;
    box-shadow: 0 4px 14px rgba(26,77,46,.24);
}

/* ---------- Campos ---------- */
.yaxtun-app .yx-input {
    border: 1px solid var(--yx-border);
    background: #FCFCFA;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.yaxtun-app .yx-input:focus {
    background: #fff;
    border-color: var(--yx-green-600);
    box-shadow: 0 0 0 3px rgba(62,158,110,.14);
    outline: none;
}
.yaxtun-app .yx-hint {
    font-size: 12px;
    color: var(--yx-text-muted);
    line-height: 1.5;
}

/* ---------- Opciones ---------- */
.yaxtun-app .yx-option-btn {
    border: 1px solid var(--yx-border);
    background: #FCFCFA;
}
.yaxtun-app .yx-option-btn.selected {
    border-color: var(--yx-green-700);
    background: var(--yx-green-50);
    box-shadow: inset 3px 0 0 var(--yx-gold-500);
}

/* ===================================================================
   EL RESULTADO · aquí está la apuesta del diseño
   El bloque se lee como una cédula sellada: filo dorado arriba,
   la cifra neta grande, y el bruto/ISR/neto como una ecuación visible.
   =================================================================== */
.yaxtun-app .yx-result-header {
    position: relative;
    background:
        radial-gradient(110% 130% at 100% 0%, rgba(201,168,76,.14) 0%, transparent 58%),
        linear-gradient(160deg, #0E2B22 0%, #1A4D2E 100%);
    border: 1px solid rgba(201,168,76,.26);
    border-radius: var(--yx-radius-lg);
    padding: 34px 28px 26px;
    overflow: hidden;
}
/* Filo de oro: el "sello" del documento */
.yaxtun-app .yx-result-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--yx-gold-500) 22%, var(--yx-gold-400) 50%, var(--yx-gold-500) 78%, transparent);
}
.yaxtun-app .yx-result-header h2 {
    font-family: var(--yx-font-display);
    font-weight: 600;
    letter-spacing: -.01em;
}
.yaxtun-app .yx-result-header .yx-result-total {
    font-family: var(--yx-font-display);
    font-size: clamp(38px, 8vw, 56px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.05;
    color: #fff;
    margin: 10px 0 2px;
}

/* La ecuación: bruto − ISR = neto. Nadie debería tener que adivinarla. */
.yaxtun-app .yx-neto-linea {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 9px 16px;
    border-radius: 100px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(201,168,76,.24);
    font-size: 13px;
    color: rgba(255,255,255,.78);
}
.yaxtun-app .yx-neto-linea strong { color: var(--yx-gold-400); font-weight: 600; }

/* ---------- Tarjetas del resumen ---------- */
.yaxtun-app .yx-result-card {
    border: 1px solid var(--yx-border);
    border-top: 3px solid var(--yx-green-700);
    border-radius: var(--yx-radius);
    box-shadow: var(--yx-shadow-sm);
}
.yaxtun-app .yx-result-card.gold { border-top-color: var(--yx-gold-500); }
.yaxtun-app .yx-result-card.blue { border-top-color: var(--yx-green-500); }
.yaxtun-app .yx-result-card.retencion { border-top-color: var(--yx-retencion); }
.yaxtun-app .yx-result-card.retencion .yx-rc-amount { color: var(--yx-retencion); }
.yaxtun-app .yx-result-card .yx-rc-amount {
    font-size: 23px;
    letter-spacing: -.01em;
}

/* ---------- La tabla, como una cédula ---------- */
.yaxtun-app .yx-calc-table th {
    background: #FAF9F5;
    border-bottom: 1px solid var(--yx-border);
    color: var(--yx-text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.yaxtun-app .yx-calc-table tr.yx-row-section td {
    background: var(--yx-green-900);
    color: var(--yx-gold-400);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 8px 12px;
}
.yaxtun-app .yx-calc-table tr.yx-row-total td {
    background: #FAF9F5;
    border-top: 1px solid var(--yx-border);
    font-weight: 600;
}
.yaxtun-app .yx-calc-table tr.yx-row-neto td {
    background: var(--yx-green-50);
    border-top: 2px solid var(--yx-green-800);
    color: var(--yx-green-800);
}
.yaxtun-app .yx-legal-note {
    color: var(--yx-text-muted);
    font-size: 12px;
    line-height: 1.55;
}

/* ---------- Cédula de ISR ---------- */
.yaxtun-app .yx-cedula { margin-top: 22px; }
.yaxtun-app .yx-cedula h3 { color: var(--yx-green-800); }
.yaxtun-app .yx-cedula-intro {
    font-size: 13px;
    color: var(--yx-text-secondary);
    line-height: 1.65;
    margin: 4px 0 16px;
    max-width: 66ch;
}
.yaxtun-app .yx-cedula-nota {
    margin-top: 14px;
    padding: 12px 14px;
    border-left: 3px solid var(--yx-gold-500);
    background: var(--yx-gold-100);
    border-radius: 0 var(--yx-radius-sm) var(--yx-radius-sm) 0;
    font-size: 12px;
    line-height: 1.6;
    color: #6B5A26;
}

/* ---------- Responsivo ---------- */
@media (max-width: 780px) {
    .yaxtun-app .yx-result-cards { grid-template-columns: 1fr; }
    .yaxtun-app .yx-result-header { padding: 26px 20px 22px; }
    .yaxtun-app .yx-neto-linea { font-size: 12px; gap: 7px; padding: 8px 12px; }
    .yaxtun-app .yx-calc-table th:nth-child(2),
    .yaxtun-app .yx-calc-table td:nth-child(2) { display: none; }
    .yaxtun-app .yx-cedula .yx-calc-table th:nth-child(2),
    .yaxtun-app .yx-cedula .yx-calc-table td:nth-child(2) { display: table-cell; }
}

@media (prefers-reduced-motion: reduce) {
    .yaxtun-app *, .yaxtun-app *::before, .yaxtun-app *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ===================================================================
   ARREGLO DE CONTRASTE
   -------------------------------------------------------------------
   Las tarjetas de "Finiquito" y "Liquidación" viven dentro del banner
   oscuro, pero nunca declaraban su color de texto: heredaban la tinta
   oscura de la página y quedaban invisibles. Aquí se declara explícito.
   Nada de esto depende de herencia ni de variables del tema.
   =================================================================== */

.yaxtun-app .yx-welcome-banner,
.yaxtun-app .yx-welcome-banner * { color: #FFFFFF; }

.yaxtun-app .yx-welcome-banner h1 { color: #E0C96E; }

.yaxtun-app .yx-welcome-banner p,
.yaxtun-app .yx-info-card p {
    color: rgba(255,255,255,.86);
    opacity: 1;
}
.yaxtun-app .yx-welcome-banner strong,
.yaxtun-app .yx-info-card strong { color: #FFFFFF; font-weight: 600; }

.yaxtun-app .yx-info-card {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(201,168,76,.28);
}
.yaxtun-app .yx-info-card h3 { color: #E0C96E; }
.yaxtun-app .yx-info-tag {
    background: rgba(201,168,76,.16);
    border: 1px solid rgba(201,168,76,.4);
    color: #E8D89A;
    font-weight: 600;
    letter-spacing: .03em;
}

/* El botón secundario del banner tenía dorado sobre dorado. */
.yaxtun-app .yx-welcome-banner .yx-btn-secondary {
    background: #C9A84C;
    color: #0E2B22;
    border: 1px solid #E0C96E;
    font-weight: 600;
}
.yaxtun-app .yx-welcome-banner .yx-btn-secondary:hover { background: #E0C96E; }
.yaxtun-app .yx-welcome-banner .yx-btn-primary {
    background: #C9A84C;
    color: #0E2B22;
    border: 1px solid #E0C96E;
    font-weight: 600;
}
.yaxtun-app .yx-welcome-banner .yx-btn-primary:hover { background: #E0C96E; }

/* La sección de ejemplos va sobre fondo claro. Sin fondo azul heredado. */
.yaxtun-app .yx-examples-section {
    background: transparent;
    padding: 4px 0;
}
.yaxtun-app .yx-examples-section h2 { color: #1A4D2E; }
.yaxtun-app .yx-examples-section .yx-subtitle { color: #4C5A52; }