/* ============================================================
   MERCADO TRUEQUE - ESTILOS GENERALES
============================================================ */
/*   BOTONES ANCHO COMPLETO - MERCADO TRUEQUE    LINEA 2441*/
:root {
    --mt-principal: #fad192;
    --mt-secundario: #cb9120;
    --mt-bordo: #c4181b;
    --mt-bordo-oscuro: #5a1725;
    --mt-fondo: #f6efe7;
    --mt-fondo-suave: #f7efe7;
    --mt-fondo-claro: #fff8f0;
    --mt-fondo-panel: #fff7ee;
    --mt-tarjeta: #fff;
    --mt-tarjeta-suave: #fffaf4;
    --mt-texto: #2b2118;
    --mt-texto-suave: #6b5a4d;
    --mt-borde: #ead8c5;
    --mt-borde-suave: rgba(124, 36, 49, 0.14);
    --mt-sombra: rgba(0, 0, 0, 0.08);
    --mt-sombra-panel: rgba(66, 27, 18, 0.16);
    --alto-aviso-superior: 42px;
    --alto-aviso-inferior: 40px;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--mt-fondo);
    color: var(--mt-texto);
}

a {
    color: inherit;
    text-decoration: none;
}

.contenedor {
    width: min(1120px, 92%);
    margin: 0 auto;
}

/* ============================================================
   HEADER GENERAL
============================================================ */

.app-header {
    background: var(--mt-principal);
    border-bottom: 3px solid var(--mt-bordo);
    position: sticky;
    top: 0;
    z-index: 20;
}

.header-contenido {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    gap: 20px;
}

.marca {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-texto {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--mt-bordo);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: bold;
    font-size: 1.1rem;
}

.logo-img {
    display: block;
    width: auto;
    max-height: 64px;
    object-fit: contain;
}

.marca h1 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--mt-bordo);
}

.marca p {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: #5a3024;
}

.nav-principal {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-principal a {
    font-weight: bold;
    font-size: 0.95rem;
}

.btn-nav {
    background: var(--mt-bordo);
    color: #fff;
    padding: 9px 14px;
    border-radius: 999px;
}

/* ============================================================
   HERO
============================================================ */

.hero {
    padding: 56px 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 32px;
    align-items: center;
}

.etiqueta {
    display: inline-block;
    background: #fff4e8;
    border: 1px solid var(--mt-principal);
    color: var(--mt-bordo);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 14px;
}

.hero-texto h2 {
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.05;
    margin: 0 0 18px;
    color: var(--mt-bordo);
}

.hero-texto h3 {
    font-size: clamp(1.35rem, 3vw, 2.3rem);
    line-height: 1.08;
    margin: 0 0 16px;
    color: var(--mt-bordo);
    font-weight: 700;
}
.hero-texto p {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 680px;
}

.acciones-hero {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.btn {
    display: inline-block;
    border-radius: 0px;
    padding: 13px 20px;
    font-weight: bold;
    border: 2px solid transparent;
}

.btn-principal {
    background: var(--mt-bordo);
    color: #fff;
}

.btn-secundario {
    background: #fff;
    color: var(--mt-bordo);
    border-color: var(--mt-bordo);
}

.estado-sistema {
    margin-top: 22px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.estado {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    display: inline-block;
}

.estado-ok {
    background: #2d9b55;
}

.estado-error {
    background: #b00020;
}

/* ============================================================
   CARD HERO
============================================================ */

.hero-card {
    background: #fff;
    padding: 24px;
    border-radius: 22px;
    box-shadow: 0 10px 30px var(--mt-sombra);
    border: 1px solid var(--mt-borde);
}

.hero-card h3 {
    margin-top: 0;
    color: var(--mt-bordo);
    font-size: 1.4rem;
}

.paso {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 0;
    border-bottom: 1px solid rgba(203, 145, 32, 0.24);
}

.paso:last-child {
    border-bottom: none;
}

.paso strong {
    background: var(--mt-principal);
    color: #ffffff;

    min-width: 30px;
    height: 30px;

    border-radius: 999px;

    display: grid;
    place-items: center;

    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.paso span {
    color: var(--mt-texto);
    line-height: 1.45;
}

/* ============================================================
   BLOQUES GENERALES
============================================================ */

.bloque {
    padding: 48px 0;
}

.bloque-claro {
    background: var(--mt-fondo-claro);
}

.titulo-seccion {
    color: var(--mt-bordo);
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 2rem;
}

.cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.card {
    background: #fff;
    border: 1px solid var(--mt-borde);
    border-radius: 18px;
    padding: 20px;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card h3 {
    color: var(--mt-bordo);
    margin-top: 0;
}

.card p {
    line-height: 1.5;
}

.card a {
    color: var(--mt-bordo);
    font-weight: bold;
    margin-top: 14px;
}

.lista-principios {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.lista-principios div {
    background: #fff;
    border-left: 5px solid var(--mt-principal);
    padding: 18px;
    border-radius: 14px;
}

.lista-principios h3 {
    margin-top: 0;
    color: var(--mt-bordo);
}

/* ============================================================
   FOOTER GENERAL
============================================================ */

.app-footer {
    background: var(--mt-bordo);
    color: #fff;
    padding: 18px 0;
    text-align: center;
}

/* ============================================================
   FORMULARIOS DE USUARIO
============================================================ */

.contenedor-formulario {
    max-width: 560px;
}

.form-card {
    background: #fff;
    border: 1px solid var(--mt-borde);
    border-radius: 22px;
    padding: 28px;
    box-shadow: 0 10px 30px var(--mt-sombra);
}

.form-card h2 {
    margin-top: 0;
    color: var(--mt-bordo);
    font-size: 2rem;
}

.texto-ayuda {
    color: var(--mt-texto-suave);
    line-height: 1.5;
}

.campo {
    margin-bottom: 18px;
}

.campo label {
    display: block;
    font-weight: bold;
    margin-bottom: 7px;
    color: #4a3029;
}

.campo input {
    width: 100%;
    border: 1px solid #d8c2ad;
    border-radius: 12px;
    padding: 13px 14px;
    font-size: 1rem;
    background: #fffdf9;
}

.campo input:focus {
    outline: none;
    border-color: var(--mt-bordo);
    box-shadow: 0 0 0 3px rgba(124,36,49,0.12);
}

.campo small {
    display: block;
    margin-top: 6px;
    color: #7c6a5d;
}

.btn-form {
    width: 100%;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn-form:disabled {
    opacity: 0.7;
    cursor: wait;
}

.mensaje-form {
    padding: 13px 15px;
    border-radius: 12px;
    margin-bottom: 18px;
    line-height: 1.4;
    font-weight: bold;
}

.mensaje-ok {
    background: #e7f8ed;
    color: #176b36;
    border: 1px solid #9ad7ad;
}

.mensaje-error {
    background: #fdecec;
    color: #9b1c1c;
    border: 1px solid #e5a1a1;
}

.texto-final {
    margin-top: 22px;
    text-align: center;
}

.texto-final a {
    color: var(--mt-bordo);
    font-weight: bold;
}

/* ============================================================
   PANEL BASE
============================================================ */

.panel-bienvenida {
    background: #fff;
    border: 1px solid var(--mt-borde);
    border-radius: 22px;
    padding: 28px;
    box-shadow: 0 10px 30px var(--mt-sombra);
}

.panel-bienvenida h2 {
    color: var(--mt-bordo);
    font-size: clamp(1.8rem, 4vw, 3rem);
    margin: 10px 0;
}

.panel-bienvenida p {
    max-width: 760px;
    line-height: 1.6;
}

/* ============================================================
   PANEL APP - NUEVA ESTÉTICA
============================================================ */

body.panel-app {
    background:
        radial-gradient(circle at top, rgba(250, 209, 146, 0.28), transparent 34%),
        var(--mt-fondo-suave);
    color: var(--mt-texto);
}




/* =========================
   CABEZAL FINO TIPO APP
========================= */

.app-header-panel {
    height: 56px;
    min-height: 56px;
    padding: 0;

    background: #fad192;
    border-bottom: 1px solid rgba(90, 23, 37, 0.18);
    box-shadow: 0 4px 16px rgba(71, 33, 22, 0.12);

    position: sticky;
    top: 0;
    z-index: 50;
}

.header-panel-contenido {
    height: 56px;
    display: grid;
    grid-template-columns: 72px 1fr 72px;
    align-items: center;
    position: relative;

    background: #fad192;
}

/* =========================
   HAMBURGUESA
========================= */

.menu-panel {
    position: relative;
    height: 56px;
    display: flex;
    align-items: center;
}

.menu-panel-check {
    display: none;
}

.btn-menu-panel {
    width: 54px;
    height: 50px;
    border: none;

    background: transparent;
    color: var(--mt-bordo-oscuro);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;

    cursor: pointer;
    user-select: none;
}

.btn-menu-panel span {
    display: block;
    width: 28px;
    height: 3px;

    background: var(--mt-bordo-oscuro);
    border-radius: 999px;
}

.btn-menu-panel small {
    margin-top: 2px;

    color: var(--mt-bordo-oscuro);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

/* =========================
   MENÚ DESPLEGABLE
========================= */

.menu-panel-desplegable {
    display: none;
    position: absolute;
    top: 58px;
    left: 0;

    width: 248px;

    background: #fad192;
    border: 1px solid rgba(90, 23, 37, 0.18);
    border-radius: 18px;

    box-shadow: 0 18px 45px rgba(66, 27, 18, 0.24);
    overflow: hidden;
    z-index: 100;
}

.menu-panel-check:checked ~ .menu-panel-desplegable {
    display: block;
}

.menu-panel-usuario {
    padding: 14px 16px;

    background: rgba(90, 23, 37, 0.12);
    color: var(--mt-bordo-oscuro);

    border-bottom: 1px solid rgba(90, 23, 37, 0.16);
}

.menu-panel-usuario strong {
    display: block;
    font-size: 0.92rem;
}

.menu-panel-usuario small {
    display: block;
    margin-top: 2px;

    color: rgba(90, 23, 37, 0.82);
    font-size: 0.72rem;
    opacity: 1;
    word-break: break-word;
}

.menu-panel-desplegable a {
    display: block;
    padding: 12px 16px;

    color: var(--mt-bordo-oscuro);
    text-decoration: none;

    font-size: 0.92rem;
    font-weight: 700;

    border-bottom: 1px solid rgba(90, 23, 37, 0.12);
}

.menu-panel-desplegable a:hover {
    background: rgba(255, 255, 255, 0.26);
    color: var(--mt-bordo-oscuro);
}

.menu-panel-desplegable .menu-salir {
    color: var(--mt-bordo-oscuro);
    background: rgba(90, 23, 37, 0.12);
    font-weight: 900;
}



/* =========================
   ISOLOGO CENTRAL
========================= */

.marca-panel {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.logo-panel {
    display: block;
    max-height: 50px;
    width: auto;
    object-fit: contain;
}

/* =========================
   CAMPANA
========================= */
.btn-campana {
    width: 54px;
    height: 50px;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    color: var(--mt-bordo-oscuro);
}

.icono-campana {
    font-size: 1.35rem;
    line-height: 1;
}

.punto-notificacion {
    position: absolute;
    top: 12px;
    right: 13px;
    width: 9px;
    height: 9px;
    background: #b41f38;
    border: 2px solid var(--mt-fondo-panel);
    border-radius: 999px;
}
/* ============================================================
   HEADER APP - PÁGINAS SECUNDARIAS
============================================================ */

.app-header-secundaria {
    height: 48px;
    min-height: 48px;
    padding: 0;

    background: #fad192;
    border-bottom: 1px solid rgba(90, 23, 37, 0.18);
    box-shadow: 0 4px 16px rgba(71, 33, 22, 0.12);

    position: sticky;
    top: 0;
    z-index: 50;
}

.header-secundaria-contenido {
    height: 48px;

    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    align-items: center;

    background: #fad192;
}

.btn-header-volver {
    width: 42px;
    height: 42px;

    justify-self: start;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    color: var(--mt-bordo, #c4181b);
    text-decoration: none;

    border: 0;
    border-radius: 0;
    background: transparent;

    box-shadow: none;
}

.btn-header-volver span {
    position: relative;

    display: block;

    width: 25px;
    height: 20px;

    font-size: 0;
    line-height: 1;

    transform: none;
}

/* Línea horizontal corta */
.btn-header-volver span::before {
    content: "";

    position: absolute;
    left: 11px;
    top: 50%;

    width: 12px;
    height: 4px;

    background: var(--mt-bordo, #c4181b);
    border-radius: 999px;

    transform: translateY(-50%);
}

/* Cabeza de la flecha, más grande y gruesa */
.btn-header-volver span::after {
    content: "";

    position: absolute;
    left: 4px;
    top: 50%;

    width: 12px;
    height: 12px;

    border-left: 4px solid var(--mt-bordo, #c4181b);
    border-bottom: 4px solid var(--mt-bordo, #c4181b);
    transform: translateY(-50%) rotate(45deg);
}

.marca-secundaria {
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    min-width: 0;
}

.logo-secundaria {
    display: block;
    width: auto;
    max-height: 42px;
    object-fit: contain;
}

.espacio-header-secundaria {
    width: 42px;
    height: 42px;

    justify-self: center;

    display: block;
}

@media (max-width: 640px) {
    .header-secundaria-contenido {
        grid-template-columns: 48px minmax(0, 1fr) 48px;
    }
.btn-header-volver {
    width: 38px;
    height: 38px;
}

.btn-header-volver span {
    width: 24px;
    height: 18px;
}

.btn-header-volver span::before {
    left: 10px;
    width: 11px;
    height: 4px;
}

.btn-header-volver span::after {
    left: 4px;
    width: 11px;
    height: 11px;

    border-left-width: 4px;
    border-bottom-width: 4px;
}

.espacio-header-secundaria {
    width: 38px;
    height: 38px;
}
	
}
/* =========================
   CUERPO PRINCIPAL PANEL
========================= */

.panel-principal {
    padding: 22px 0 26px;
}

/* =========================
   TARJETA DE SALDO
========================= */

.saldo-club-card {
    background:
        linear-gradient(145deg, rgba(250, 209, 146, 0.95), rgba(250, 209, 146, 0.92)),
        var(--mt-principal);
    color: var(--mt-bordo-oscuro);
    border-radius: 28px;
    padding: 24px 20px;
    box-shadow: 0 22px 50px rgba(108, 50, 22, 0.22);
    border: 1px solid rgba(90, 23, 37, 0.10);
    text-align: center;
    margin-bottom: 22px;
}

.etiqueta-saldo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 250, 244, 0.62);
    color: var(--mt-bordo-oscuro);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.saldo-club-card h1 {
    margin: 14px 0 8px;
    font-size: clamp(1.05rem, 3vw, 1.45rem);
    line-height: 1.15;
    color: var(--mt-bordo-oscuro);
}

.saldo-grande {
    margin: 8px 0 10px;
    font-size: clamp(3.4rem, 12vw, 6.4rem);
    line-height: 0.95;
    font-weight: 950;
    letter-spacing: -0.08em;
    color: var(--mt-bordo-oscuro);
}

.equivalencias {
    display: grid;
    gap: 3px;
    margin-top: 8px;
}

.equivalencias small {
    display: block;
    font-size: 0.62rem;
    line-height: 1.25;
    letter-spacing: 0.04em;
    color: rgba(90, 23, 37, 0.86);
}

.equivalencias strong {
    color: var(--mt-bordo-oscuro);
    font-weight: 950;
}

/* =========================
   SELECTOR DE PRODUCTOS
========================= */

.selector-productos {
    margin: 18px auto 0;
    max-width: 520px;
    text-align: left;
}

.selector-productos summary {
    list-style: none;
    cursor: pointer;
    background: var(--mt-bordo-oscuro);
    color: #fff8ef;
    border-radius: 999px;
    padding: 12px 18px;
    font-size: 0.92rem;
    font-weight: 900;
    text-align: center;
    box-shadow: 0 10px 22px rgba(90, 23, 37, 0.22);
}

.selector-productos summary::-webkit-details-marker {
    display: none;
}

.selector-productos summary::after {
    content: " ▼";
    font-size: 0.7rem;
}

.selector-productos[open] summary::after {
    content: " ▲";
}

.lista-productos {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

.producto-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: rgba(255, 250, 244, 0.82);
    border: 1px solid rgba(90, 23, 37, 0.10);
    border-radius: 18px;
    padding: 12px 14px;
}

.producto-item h3 {
    margin: 0 0 3px;
    font-size: 0.94rem;
    color: var(--mt-texto);
    line-height: 1.15;
}

.producto-item p {
    margin: 0;
    font-size: 0.76rem;
    color: var(--mt-texto-suave);
}

.producto-item strong {
    flex: 0 0 auto;
    color: var(--mt-bordo-oscuro);
    font-size: 1rem;
    font-weight: 950;
}

/* =========================
   BIENVENIDA PANEL APP
========================= */

.panel-bienvenida-app {
    background: var(--mt-tarjeta-suave);
    border: 1px solid rgba(90, 23, 37, 0.10);
    border-radius: 24px;
    padding: 18px 18px;
    margin-bottom: 20px;
    box-shadow: 0 14px 34px rgba(66, 27, 18, 0.08);
}

.panel-bienvenida-app .etiqueta {
    display: inline-flex;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(250, 209, 146, 0.28);
    color: var(--mt-bordo-oscuro);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: none;
    margin-bottom: 0;
}

.panel-bienvenida-app h2 {
    color: var(--mt-bordo-oscuro);
    margin: 10px 0 8px;
    font-size: 1.25rem;
}

.panel-bienvenida-app p {
    margin: 0 0 8px;
    color: var(--mt-texto-suave);
    line-height: 1.45;
}

.panel-bienvenida-app p:last-child {
    margin-bottom: 0;
}

/* =========================
   ACCIONES DEL PANEL
========================= */

.acciones-panel {
    margin-top: 16px;
}

.acciones-panel .titulo-seccion {
    color: var(--mt-bordo-oscuro);
    margin-bottom: 12px;
}

.cards-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;


}

.card-panel {
    background: var(--mt-tarjeta-suave);
    border: 1px solid rgba(90, 23, 37, 0.10);
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 14px 32px rgba(66, 27, 18, 0.08);
    min-height: 190px;
}

.card-panel h3 {
    color: var(--mt-bordo-oscuro);
    margin: 0 0 8px;
}

.card-panel p {
    color: var(--mt-texto-suave);
    line-height: 1.4;
    margin-bottom: 14px;
}

.card-panel a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mt-bordo-oscuro);
    color: #fff8ef;
    text-decoration: none;
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 0.86rem;
    font-weight: 900;
}

.card-panel a:hover {
    background: #7b2032;
}

/* =========================
   FOOTER PANEL
========================= */

.footer-panel {
    background: transparent;
    color: var(--mt-texto-suave);
    border-top: 1px solid rgba(90, 23, 37, 0.10);
    padding: 18px 0;
    text-align: center;
}

.footer-panel p {
    margin: 0;
    font-size: 0.82rem;
}

/* ============================================================
   RESPONSIVE GENERAL
============================================================ */

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .cards,
    .lista-principios {
        grid-template-columns: repeat(2, 1fr);
    }

    .header-contenido {
        align-items: flex-start;
        flex-direction: column;
    }

    .cards-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .aviso-contenido {
        padding: 0 10px;
        gap: 6px;
    }

    .aviso-contenido span {
        display: none;
    }

    .header-panel-contenido {
        grid-template-columns: 64px 1fr 64px;
    }

    .menu-panel-desplegable {
        width: min(280px, calc(100vw - 24px));
        left: 0;
    }

    .panel-principal {
        padding-top: 14px;
    }

    .saldo-club-card {
        border-radius: 24px;
        padding: 22px 16px;
    }

    .saldo-grande {
        font-size: clamp(3.2rem, 18vw, 5rem);
    }

    .cards-panel {
        grid-template-columns: 1fr;
    }

    .card-panel {
        padding: 16px;
    }
}

@media (max-width: 560px) {
    .cards,
    .lista-principios {
        grid-template-columns: 1fr;
    }

    .nav-principal {
        width: 100%;
        justify-content: space-between;
    }

    .marca h1 {
        font-size: 1.1rem;
    }

    .marca p {
        font-size: 0.78rem;
    }

    .hero {
        padding: 36px 0;
    }

    .acciones-hero {
        flex-direction: column;
    }

    .btn {
        text-align: center;
        width: 100%;
    }
}

@media (max-width: 420px) {
    .logo-panel {
        max-height: 46px;
    }

    .saldo-club-card h1 {
        font-size: 1rem;
    }

    .equivalencias small {
        font-size: 0.58rem;
    }

    .producto-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .producto-item strong {
        font-size: 1.08rem;
    }
}

/* ============================================================
   PANEL INSTITUCIONAL - CRÉDITOS, CENTROS Y PRODUCTOS
============================================================ */

.panel-principal {
    padding-top: 10px;
}

.saldo-institucional {
    background: #ffffff;
    color: #111111;
    border-radius: 18px;
    border: 1px solid #d7d7d7;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    padding: 20px;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: left;
}

.saldo-encabezado-institucional {
    text-align: left;
    border-bottom: 1px solid #e3e3e3;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.saldo-institucional .etiqueta-saldo {
    background: #f1f1f1;
    color: #111111;
    border: 1px solid #d8d8d8;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}


.saldo-institucional h1 {
    color: #111111;
    margin: 12px 0 6px;
    font-size: clamp(1.1rem, 2.4vw, 1.5rem);
    font-weight: 800;
}

.saldo-institucional .saldo-grande {
    color: #444444;
    margin: 6px 0 8px;
    font-size: clamp(2.8rem, 8vw, 5rem);
    letter-spacing: -0.03em;
    font-weight: 200;
}

.saldo-institucional .equivalencias {
    display: grid;
    gap: 2px;
    margin-top: 6px;
    margin-bottom: 0;
}

.saldo-institucional .equivalencias small {
    color: #333333;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}

.saldo-institucional .equivalencias strong {
    color: #000000;
}

.centros-creditos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 14px 0 14px;
}

.centro-credito-item {
    width: 100%;
    background: #f7f7f7;
    border: 1px solid #dddddd;
    border-radius: 14px;
    padding: 13px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.centro-credito-item:hover {
    background: #f1f1f1;
    border-color: #999999;
}

.centro-credito-item.centro-activo {
    background: #ffffff;
    border-color: #111111;
    box-shadow: inset 0 0 0 1px #111111;
}

.centro-credito-item span {
    display: block;
    color: #777777;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    margin-bottom: 4px;
}

.centro-credito-item h3 {
    margin: 0;
    color: #111111;
    font-size: 0.88rem;
    line-height: 1.2;
}

.centro-credito-item strong {
    color: #000000;
    font-size: 1.05rem;
    font-weight: 950;
    white-space: nowrap;
}

.selector-productos-institucional {
    margin: 10px 0 0;
    max-width: none;
}

.selector-productos-institucional summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--mt-principal);
    color: #ffffff;

    border: 1px solid var(--mt-principal);
    border-radius: 0;

    padding: 6px 10px;

    font-size: 0.72rem;
    font-weight: 600;

    box-shadow: none;
    min-width: auto;
    cursor: pointer;
}

.selector-productos-institucional summary::after {
    content: " ▾";
    font-size: 0.62rem;
}

.selector-productos-institucional[open] summary::after {
    content: " ▴";
}

.selector-productos-institucional .lista-productos {
    margin-top: 12px;
}

.selector-productos-institucional .producto-item {
    background: #ffffff;
    border: 1px solid #dedede;
    border-radius: 12px;
}

.selector-productos-institucional .producto-item h3 {
    color: #111111;
}

.selector-productos-institucional .producto-item p {
    color: #666666;
}

.selector-productos-institucional .producto-item strong {
    color: #000000;
}

/* ============================================================
   HEADER SIMPLE PARA REGISTRO / LOGIN / INGRESO
============================================================ */

body.pagina-ingreso {
    background: var(--mt-fondo);
    max-width: 100%;
    overflow-x: hidden;
}

.header-ingreso-simple {
    --alto-header-ingreso: 66px;

    width: 100%;
    height: var(--alto-header-ingreso);
    min-height: var(--alto-header-ingreso);
    max-height: var(--alto-header-ingreso);

    background: #fad192;
    border-bottom: 1px solid rgba(90, 23, 37, 0.12);

    display: flex;
    align-items: center;
    justify-content: center;

    position: sticky;
    top: 0;
    z-index: 50;

    overflow: hidden;
}

.header-ingreso-contenido {
    height: 100%;
    min-height: 100%;
    max-height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.marca-ingreso-simple {
    height: 100%;
    max-height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}



.logo-ingreso-simple {
    display: block;

    width: auto !important;
    height: 38px !important;
    max-height: 58% !important;
    max-width: 72vw !important;

    object-fit: contain;
}

/* ============================================================
   AVISOS SUPERIOR / INFERIOR LIMPIOS
============================================================ */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.aviso-superior {
    position: sticky;
    top: 0;
    z-index: 80;

    width: 100vw !important;
    max-width: 100vw !important;

    height: var(--alto-aviso-superior) !important;
    min-height: var(--alto-aviso-superior) !important;
    max-height: var(--alto-aviso-superior) !important;

    background: #20242b;
    color: #ffffff;

    overflow: hidden !important;
    border: none !important;
}

.aviso-superior .contenedor,
.aviso-superior .aviso-contenido,
.aviso-superior .aviso-link {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden !important;
}

.aviso-superior .aviso-img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100vw !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;
}

/* Header del panel por defecto: páginas sin aviso superior */
.app-header-panel {
    top: 0 !important;
}

/* Solo las páginas que sí tienen aviso superior */
body.tiene-aviso-superior .app-header-panel {
    top: var(--alto-aviso-superior) !important;
}
body.panel-app {
    padding-bottom: 0 !important;
    max-width: 100%;
    overflow-x: hidden;
}

.aviso-toggle-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.aviso-inferior-contenedor {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100vw !important;
    height: var(--alto-aviso-inferior) !important;

    z-index: 120;

    transform: translateY(0);
    transition: transform 0.28s ease;
}

.aviso-inferior-contenedor .aviso-inferior {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: 100vw !important;
    max-width: 100vw !important;

    height: var(--alto-aviso-inferior) !important;
    min-height: var(--alto-aviso-inferior) !important;
    max-height: var(--alto-aviso-inferior) !important;

    background: #20242b;
    overflow: hidden;
    border: none !important;
}

.aviso-inferior-contenedor .contenedor,
.aviso-inferior-contenedor .aviso-contenido,
.aviso-inferior-contenedor .aviso-link {
    width: 100vw !important;
    max-width: 100vw !important;

    height: var(--alto-aviso-inferior) !important;
    min-height: var(--alto-aviso-inferior) !important;
    max-height: var(--alto-aviso-inferior) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.aviso-inferior-contenedor .aviso-img {
    display: block;

    width: 100vw !important;
    max-width: 100vw !important;

    height: 100% !important;
    max-height: 100% !important;

    object-fit: cover !important;
}

.aviso-tirador {
    position: absolute;

    top: -20px !important;
    right: 12px !important;

    width: 42px !important;
    height: 20px !important;

    background: #20242b;
    color: #ffffff;

    border: 1px solid rgba(255,255,255,0.18);
    border-bottom: none;
    border-radius: 8px 8px 0 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 0.9rem !important;
    line-height: 1;

    cursor: pointer;
    user-select: none;

    box-shadow: 0 -4px 12px rgba(0,0,0,0.18);
}

.tirador-mostrar {
    display: none;
}

.tirador-ocultar {
    display: inline;
}

.aviso-toggle-check:checked + .aviso-inferior-contenedor {
    transform: translateY(var(--alto-aviso-inferior)) !important;
}

.aviso-toggle-check:checked + .aviso-inferior-contenedor .tirador-ocultar {
    display: none;
}

.aviso-toggle-check:checked + .aviso-inferior-contenedor .tirador-mostrar {
    display: inline;
}

/* ============================================================
   BOTONES Y DESTACADOS
============================================================ */

.saldo-institucional .btn-transferir-creditos,
a.btn-transferir-creditos {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    max-width: max-content !important;

    margin-top: 12px !important;
    padding: 6px 10px !important;

    background: var(--mt-principal) !important;
    color: #ffffff !important;

    border: 1px solid var(--mt-principal) !important;
    border-radius: 3px !important;

    font-size: 0.72rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.saldo-institucional .btn-transferir-creditos:hover,
a.btn-transferir-creditos:hover {
    background: #b47e19 !important;
    border-color: #b47e19 !important;
    color: #ffffff !important;
}

.destacado-dolar {
    background: var(--mt-bordo);
    color: #ffffff;

    padding: 16px 20px;
    margin: 18px 0;

    border-radius: 6px;
    border: 1px solid var(--mt-bordo);
    
    font-size: 1.18rem;
    line-height: 1.55;
    font-weight: 600;
    letter-spacing: 0.2px;

    text-align: center;

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}



/* ============================================================
   RESPONSIVE FINAL
============================================================ */

@media (max-width: 760px) {
    .centros-creditos-grid {
        grid-template-columns: 1fr;
    }

    .saldo-institucional {
        padding: 16px;
        border-radius: 16px;
    }

    .saldo-institucional .saldo-grande {
        font-size: clamp(2.7rem, 15vw, 4.2rem);
    }
}

@media (max-width: 560px) {
    :root {
        --alto-aviso-superior: 36px;
        --alto-aviso-inferior: 40px;
    }

    body.tiene-aviso-superior .app-header-panel {
        top: var(--alto-aviso-superior) !important;
    }
    .aviso-superior .aviso-img {
        object-fit: contain !important;
    }

    .aviso-inferior-contenedor .aviso-img {
        object-fit: cover !important;
    }

    .aviso-tirador {
        top: -19px !important;
        right: 10px !important;
        width: 40px !important;
        height: 19px !important;
    }

    .header-ingreso-simple {
        --alto-header-ingreso: 60px;
    }

    .logo-ingreso-simple {
        height: 32px !important;
        max-height: 54% !important;
        max-width: 70vw !important;
    }
}


/* ============================================================
   AVISO SUPERIOR 1200x180 - ANCHO COMPLETO SIN RECORTE
============================================================ */

:root {
    --alto-aviso-superior: clamp(54px, 15vw, 180px);
}

/* Aviso superior con proporción correcta para imagen 1200x180 */
.aviso-superior {
    position: sticky;
    top: 0;
    z-index: 80;

    width: 100vw !important;
    max-width: 100vw !important;

    height: var(--alto-aviso-superior) !important;
    min-height: var(--alto-aviso-superior) !important;
    max-height: var(--alto-aviso-superior) !important;

    background: #20242b;
    overflow: hidden !important;
    border: none !important;
}

/* El contenedor interno no debe limitar el ancho */
.aviso-superior .contenedor,
.aviso-superior .aviso-contenido,
.aviso-superior .aviso-link {
    width: 100vw !important;
    max-width: 100vw !important;

    height: var(--alto-aviso-superior) !important;
    min-height: var(--alto-aviso-superior) !important;
    max-height: var(--alto-aviso-superior) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden !important;
}

/* Imagen completa, sin recorte y ocupando todo el ancho */
.aviso-superior .aviso-img {
    display: block !important;

    width: 100vw !important;
    max-width: 100vw !important;

    height: auto !important;
    max-height: none !important;

    object-fit: contain !important;
}

/* Header del panel debajo del aviso superior solo cuando corresponde */
body.tiene-aviso-superior .app-header-panel {
    top: var(--alto-aviso-superior) !important;
}

/* ============================================================
   HEADER APP - Versión A: ingreso simple
============================================================ */

.header-ingreso-simple {
    width: 100%;
    height: 86px;
    min-height: 86px;
    max-height: 86px;

    background: #fad192;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    border-bottom: 1px solid rgba(90, 23, 37, 0.14);
}

.header-ingreso-simple .header-ingreso-contenido {
    width: 100%;
    max-width: none;

    height: 86px;
    min-height: 86px;
    max-height: 86px;

    padding: 0;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.marca-ingreso-simple {
    width: 100%;

    height: 86px;
    min-height: 86px;
    max-height: 86px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    overflow: hidden;
}

.logo-ingreso-simple {
    display: block;

    width: auto !important;
    height: 95% !important;

    max-width: 92vw !important;
    max-height: 95% !important;

    object-fit: contain;
}

/* Celulares */
@media (max-width: 600px) {
    .header-ingreso-simple,
    .header-ingreso-simple .header-ingreso-contenido,
    .marca-ingreso-simple {
        height: 68px;
        min-height: 68px;
        max-height: 68px;
    }

    .logo-ingreso-simple {
        height: 95% !important;
        max-width: 88vw !important;
        max-height: 95% !important;
        object-fit: contain;
    }
}

/* Celulares muy angostos */
@media (max-width: 380px) {
    .header-ingreso-simple,
    .header-ingreso-simple .header-ingreso-contenido,
    .marca-ingreso-simple {
        height: 62px;
        min-height: 62px;
        max-height: 62px;
    }

    .logo-ingreso-simple {
        height: 95% !important;
        max-width: 84vw !important;
        max-height: 95% !important;
        object-fit: contain;
    }
}
/* ============================================================
   ACCESOS RÁPIDOS APP
============================================================ */

.acciones-rapidas-app {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;

    margin: 18px 0 22px;
}

.accion-rapida-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;

    text-align: center;
    text-decoration: none;

    color: var(--mt-bordo-oscuro);
    font-weight: 800;
    font-size: 0.9rem;
}

.accion-rapida-app img {
    display: block;

    width: 72px;
    height: 72px;

    object-fit: contain;
}

.accion-rapida-app span {
    display: block;
    line-height: 1.15;
}

.accion-rapida-app:hover {
    transform: translateY(-1px);
}

@media (max-width: 420px) {
    .acciones-rapidas-app {
        gap: 8px;
        margin: 14px 0 18px;
    }

    .accion-rapida-app {
        font-size: 0.78rem;
    }

    .accion-rapida-app img {
        width: 62px;
        height: 62px;
    }
}

/* ============================================================
   SABER MÁS - PANEL
============================================================ */

.saber-mas-panel {
    background: var(--mt-tarjeta-suave);
    border: 1px solid rgba(90, 23, 37, 0.10);
    border-radius: 24px;
    padding: 18px;
    margin: 18px 0 20px;
    box-shadow: 0 14px 34px rgba(66, 27, 18, 0.08);
}

.saber-mas-encabezado {
    margin-bottom: 14px;
}

.saber-mas-encabezado .etiqueta {
    display: inline-flex;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(250, 209, 146, 0.28);
    color: var(--mt-bordo-oscuro);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: none;
    margin-bottom: 8px;
}

.saber-mas-encabezado h2 {
    margin: 0 0 6px;
    color: var(--mt-bordo-oscuro);
    font-size: 1.45rem;
}

.saber-mas-encabezado p {
    margin: 0;
    color: var(--mt-texto-suave);
    line-height: 1.45;
}

.saber-mas-lista {
    display: grid;
    gap: 10px;
}

.saber-mas-item {
    display: grid;
    grid-template-columns: 42px 1fr 24px;
    align-items: center;
    gap: 12px;

    background: #ffffff;
    border: 1px solid rgba(90, 23, 37, 0.10);
    border-radius: 18px;

    padding: 13px 14px;

    color: var(--mt-bordo-oscuro);
    text-decoration: none;

    box-shadow: 0 8px 22px rgba(66, 27, 18, 0.05);
}

.saber-mas-item:hover {
    background: #fff8ef;
    border-color: rgba(90, 23, 37, 0.22);
}

.saber-mas-numero {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    background: #fad192;
    color: var(--mt-bordo-oscuro);

    border-radius: 999px;

    font-size: 0.92rem;
    font-weight: 950;
}

.saber-mas-texto {
    display: grid;
    gap: 3px;
}

.saber-mas-texto strong {
    font-size: 0.96rem;
    line-height: 1.15;
}

.saber-mas-texto small {
    color: var(--mt-texto-suave);
    font-size: 0.76rem;
    line-height: 1.25;
}

.saber-mas-flecha {
    justify-self: end;
    color: var(--mt-bordo-oscuro);
    font-size: 1.7rem;
    line-height: 1;
    font-weight: 300;
}

@media (max-width: 560px) {
    .saber-mas-panel {
        padding: 16px;
        border-radius: 20px;
    }

    .saber-mas-item {
        grid-template-columns: 36px 1fr 18px;
        gap: 10px;
        padding: 12px;
    }

    .saber-mas-numero {
        width: 32px;
        height: 32px;
    }

    .saber-mas-texto strong {
        font-size: 0.9rem;
    }

    .saber-mas-texto small {
        font-size: 0.72rem;
    }
}

/* ============================================================
   TU ALIAS
============================================================ */

.alias-card {
    background: var(--mt-tarjeta-suave);
    border: 1px solid rgba(90, 23, 37, 0.10);
    border-radius: 24px;
    padding: 20px;
    margin: 18px 0 22px;
    box-shadow: 0 14px 34px rgba(66, 27, 18, 0.08);
}

.alias-encabezado {
    margin-bottom: 18px;
}

.alias-encabezado .etiqueta {
    display: inline-flex;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(250, 209, 146, 0.28);
    color: var(--mt-bordo-oscuro);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: none;
    margin-bottom: 8px;
}

.alias-encabezado h1 {
    margin: 0 0 8px;
    color: var(--mt-bordo-oscuro);
    font-size: clamp(1.45rem, 5vw, 2.2rem);
    line-height: 1.12;
}

.alias-encabezado p {
    margin: 0;
    color: var(--mt-texto-suave);
    line-height: 1.45;
}

.alias-form {
    display: grid;
    gap: 12px;
}

.alias-form label {
    color: var(--mt-bordo-oscuro);
    font-weight: 900;
}

.alias-form input {
    width: 100%;
    border: 1px solid rgba(90, 23, 37, 0.18);
    border-radius: 14px;
    padding: 15px 16px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mt-bordo-oscuro);
    background: #ffffff;
}

.alias-form input:focus {
    outline: none;
    border-color: var(--mt-bordo-oscuro);
    box-shadow: 0 0 0 3px rgba(90, 23, 37, 0.12);
}

.alias-ejemplo {
    color: var(--mt-texto-suave);
    font-size: 0.9rem;
}

.alias-ejemplo strong {
    color: var(--mt-bordo-oscuro);
}

.alias-recomendaciones {
    background: #ffffff;
    border: 1px solid rgba(90, 23, 37, 0.10);
    border-radius: 18px;
    padding: 14px 16px;
}

.alias-recomendaciones h3 {
    margin: 0 0 10px;
    color: var(--mt-bordo-oscuro);
    font-size: 1rem;
}

.alias-recomendaciones ul {
    margin: 0;
    padding-left: 20px;
    color: var(--mt-texto-suave);
    line-height: 1.55;
}

.alias-recomendaciones li + li {
    margin-top: 4px;
}

@media (max-width: 560px) {
    .alias-card {
        padding: 16px;
        border-radius: 20px;
    }

    .alias-form input {
        font-size: 1rem;
        padding: 14px;
    }
}

/* ============================================================
   ZÓCALO GENÉRICO APP
   Más bajo - isologo al 90% del alto
============================================================ */

.zocalo-app-generico {
    --mt-zocalo-alto: 38px;

    width: 100% !important;

    background: #c4181b !important;
    color: #ffffff !important;

    min-height: var(--mt-zocalo-alto) !important;
    height: var(--mt-zocalo-alto) !important;
    padding: 0 !important;
    margin-top: 24px !important;

    border: none !important;
    box-shadow: none !important;
    text-align: center !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.zocalo-app-contenido {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    min-height: var(--mt-zocalo-alto) !important;
    height: var(--mt-zocalo-alto) !important;
}

.zocalo-app-logo {
    display: block !important;

    width: auto !important;
    height: calc(var(--mt-zocalo-alto) * 1.17) !important;

    max-height: calc(var(--mt-zocalo-alto) * 1.17) !important;
    max-width: 135px !important;

    object-fit: contain !important;
    object-position: center center !important;

    flex: 0 0 auto !important;
}

.zocalo-app-contenido span {
    color: #ffffff !important;

    font-size: 0.80rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
}

@media (max-width: 560px) {
    .zocalo-app-generico {
        --mt-zocalo-alto: 36px;
    }

    .zocalo-app-contenido {
        gap: 6px !important;
    }

    .zocalo-app-logo {
    height: calc(var(--mt-zocalo-alto) * 1.17) !important;
    max-height: calc(var(--mt-zocalo-alto) * 1.17) !important;
    max-width: 127px !important;
}

    .zocalo-app-contenido span {
        font-size: 0.78rem !important;
    }
}




/* ============================================================
   BOTÓN POST ALIAS
============================================================ */

.alias-acciones-post {
    margin-top: 14px;
}

.btn-volver-panel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    padding: 12px 16px !important;

    background: var(--mt-bordo) !important;
    color: #ffffff !important;

    border-radius: 10px !important;

    text-decoration: none !important;
    font-weight: 900 !important;
    text-align: center !important;
}

.btn-volver-panel:hover {
    background: var(--mt-bordo-oscuro) !important;
    color: #ffffff !important;
}

@media (max-width: 560px) {
    .zocalo-app-generico {
        padding: 3px 0 !important;
    }

    .zocalo-app-contenido {
        min-height: 22px !important;
        height: 22px !important;
        gap: 8px !important;
    }

  .zocalo-app-logo {
    display: block !important;

    width: auto !important;
    height: 22px !important;

    max-width: 42px !important;
    max-height: 22px !important;

    object-fit: contain !important;
    object-position: center center !important;

    flex: 0 0 auto !important;
}
    .zocalo-app-contenido span {
        font-size: 0.70rem !important;
    }
}
/* ============================================================
   CONFIRMACIÓN SIMPLE ALIAS
============================================================ */

.alias-confirmacion-simple {
    margin: 14px 0 18px;
    padding: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.alias-confirmacion-simple p {
    margin: 0 0 12px;
    color: #176b36;
    font-weight: 900;
    text-align: center;
}

.btn-volver-panel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    padding: 12px 16px !important;

    background: #fad192 !important;
    color: var(--mt-bordo-oscuro) !important;

    border: 1px solid rgba(90, 23, 37, 0.18) !important;
    border-radius: 10px !important;

    text-decoration: none !important;
    font-weight: 900 !important;
    text-align: center !important;
}

.btn-volver-panel:hover {
    background: #f3c777 !important;
    color: var(--mt-bordo-oscuro) !important;
}
/* =====================================================
   BOTÓN VER PRODUCTOS - PANEL - VERSIÓN FINAL
===================================================== */

.selector-productos.selector-productos-institucional {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Botón completo */
.selector-productos.selector-productos-institucional > summary.btn-ver-productos-panel {
    display: grid !important;
    grid-template-columns: 32px 1fr 32px !important;
    align-items: center !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    box-sizing: border-box !important;

    min-height: 48px !important;
    padding: 11px 14px !important;

    background: #fad192 !important;
    color: #4b2f00 !important;

    border: 0 !important;
    border-radius: 0 !important;

    font-size: 0.95rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    cursor: pointer !important;
    list-style: none !important;
    list-style-type: none !important;
    text-decoration: none !important;
}

/* Oculta flecha nativa */
.selector-productos.selector-productos-institucional > summary.btn-ver-productos-panel::-webkit-details-marker {
    display: none !important;
}

.selector-productos.selector-productos-institucional > summary.btn-ver-productos-panel::marker {
    content: "" !important;
    font-size: 0 !important;
}

/* Anula flechas anteriores creadas por CSS */
.selector-productos.selector-productos-institucional > summary.btn-ver-productos-panel::before,
.selector-productos.selector-productos-institucional > summary.btn-ver-productos-panel::after {
    content: none !important;
    display: none !important;
}

/* Texto centrado */
.selector-productos.selector-productos-institucional > summary.btn-ver-productos-panel span:first-child {
    grid-column: 2 !important;
    text-align: center !important;
    justify-self: center !important;
}

/* Flecha propia a la derecha */
.selector-productos.selector-productos-institucional .flecha-productos {
    grid-column: 3 !important;
    justify-self: end !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 24px !important;
    height: 24px !important;

    font-size: 1.25rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    color: #4b2f00 !important;
}

/* Al abrir gira la flecha */
.selector-productos.selector-productos-institucional[open] .flecha-productos {
    transform: rotate(180deg) !important;
}

/* Separación con la lista */
.selector-productos.selector-productos-institucional[open] > summary.btn-ver-productos-panel {
    margin-bottom: 12px !important;
}
/* =====================================================
   BOTONES UNIVERSALES MERCADO TRUEQUE
===================================================== */

.btn-mt {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 44px !important;
    padding: 11px 16px !important;

    border: 0 !important;
    border-radius: 0 !important;

    cursor: pointer !important;

    font-size: 0.95rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    text-decoration: none !important;
    box-sizing: border-box !important;
}

.btn-mt-amarillo {
    background: #fad192 !important;
    color: #111111 !important;
}

.btn-mt-amarillo:visited,
.btn-mt-amarillo:hover,
.btn-mt-amarillo:active,
.btn-mt-amarillo:focus {
    color: #111111 !important;
    text-decoration: none !important;
}

/* Para que en celular ocupen todo el ancho */
@media (max-width: 640px) {
    .btn-mt-ancho-movil {
        width: 100% !important;
    }
}

/* =====================================================
   RECUADRO UNIVERSAL AMARILLO
===================================================== */

.recuadro-mt-amarillo,
.destacado-dolar {
    background: #fad192 !important;
    color: #111111 !important;

    padding: 14px 16px !important;
    margin: 18px 0 !important;

    border-radius: 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;

    font-size: 1rem !important;
    line-height: 1.5 !important;
    font-weight: 800 !important;

	text-align: center;
	
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10) !important;
}

/* =====================================================
   COMPATIBILIDAD CON BOTONES EXISTENTES DEL INDEX
   Por si todavía tienen class="btn btn-principal"
===================================================== */

.hero .acciones-hero a.btn {
    color: #111111 !important;
}

.hero .acciones-hero a.btn:hover,
.hero .acciones-hero a.btn:visited,
.hero .acciones-hero a.btn:active,
.hero .acciones-hero a.btn:focus {
    color: #111111 !important;
}

/* =====================================================
   BOTONES ANCHO COMPLETO - MERCADO TRUEQUE
   Versión final ajustada: menos alto
===================================================== */

/* Contenedor para ordenar botones uno debajo del otro */
.botonera-mt-full {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    margin: 12px 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

/* Si dentro hay formularios, también ocupan todo el ancho */
.botonera-mt-full form {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 8px 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

/* Botón base ancho completo */
.btn-mt-full,
a.btn-mt-full,
button.btn-mt-full,
input[type="submit"].btn-mt-full {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;

    min-height: 48px !important;
    padding: 12px 16px !important;
    margin: 0 0 8px 0 !important;

    border: none !important;
    border-radius: 0 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;

    text-align: center !important;
    text-decoration: none !important;

    box-sizing: border-box !important;
    cursor: pointer !important;

    white-space: normal !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}

/* 1) Principal: #fad192 con letras negras */
.btn-mt-principal-negro {
    background: var(--mt-principal) !important;
    color: #111111 !important;
}

/* 2) Secundario: #cb9120 con letras blancas */
.btn-mt-secundario-blanco {
    background: var(--mt-secundario) !important;
    color: #ffffff !important;
}

/* 3) Secundario: #cb9120 con letras negras */
.btn-mt-secundario-negro {
    background: var(--mt-secundario) !important;
    color: #111111 !important;
}

/* 4) Bordó: #c4181b con letras blancas */
.btn-mt-bordo-blanco {
    background: var(--mt-bordo) !important;
    color: #ffffff !important;
}

/* Estados generales */
.btn-mt-full:visited,
.btn-mt-full:hover,
.btn-mt-full:active,
.btn-mt-full:focus {
    text-decoration: none !important;
}

/* Mantener color correcto en enlaces */
a.btn-mt-principal-negro:visited,
a.btn-mt-principal-negro:hover,
a.btn-mt-principal-negro:active,
a.btn-mt-principal-negro:focus {
    color: #111111 !important;
}

a.btn-mt-secundario-blanco:visited,
a.btn-mt-secundario-blanco:hover,
a.btn-mt-secundario-blanco:active,
a.btn-mt-secundario-blanco:focus {
    color: #ffffff !important;
}

a.btn-mt-secundario-negro:visited,
a.btn-mt-secundario-negro:hover,
a.btn-mt-secundario-negro:active,
a.btn-mt-secundario-negro:focus {
    color: #111111 !important;
}

a.btn-mt-bordo-blanco:visited,
a.btn-mt-bordo-blanco:hover,
a.btn-mt-bordo-blanco:active,
a.btn-mt-bordo-blanco:focus {
    color: #ffffff !important;
}

/* Compatibilidad con botones viejos si se combinan clases */
.btn.btn-mt-full,
.btn-form.btn-mt-full,
.btn-principal.btn-mt-full,
.btn-transferir-principal.btn-mt-full,
.btn-transferir-secundario.btn-mt-full,
.btn-qr-principal.btn-mt-full,
.btn-qr-secundario.btn-mt-full {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;

    min-height: 48px !important;
    padding: 12px 16px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
    box-sizing: border-box !important;
}

/* =====================================================
   INVITAR FUNDADORES - MERCADO TRUEQUE
   Agregar este bloque AL FINAL de:
   /public/v1/assets/css/app.css

   No redefine :root.
   Usa las variables globales ya declaradas en app.css.
===================================================== */

.pagina-invitar-fundadores {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--mt-fondo);
    color: var(--mt-texto);
    padding: 24px 14px;
}

.pagina-invitar-fundadores * {
    box-sizing: border-box;
}

.pagina-invitar-fundadores .contenedor {
    width: min(980px, 100%);
    margin: auto;
}

.pagina-invitar-fundadores .card {
    width: 100%;
    max-width: 760px;

    background: var(--mt-tarjeta);
    border-radius: 18px;
    padding: 24px;

    box-shadow: 0 12px 34px var(--mt-sombra);
    margin: 0 auto 18px;

    border: 1px solid var(--mt-borde-suave);
}

.pagina-invitar-fundadores h1,
.pagina-invitar-fundadores h2 {
    color: var(--mt-bordo);
}

.pagina-invitar-fundadores .resumen {
    background: var(--mt-fondo-panel);
    border-left: 6px solid var(--mt-secundario);
    border-radius: 12px;
    padding: 14px 16px;
    line-height: 1.5;
}

.pagina-invitar-fundadores .alerta {
    border-radius: 14px;
    padding: 14px 16px;
    margin: 14px 0;
    line-height: 1.45;
}

/* Errores dentro de gama bordó */
.pagina-invitar-fundadores .error {
    background: var(--mt-fondo-claro);
    color: var(--mt-bordo);
    border: 1px solid var(--mt-borde);
    border-left: 6px solid var(--mt-bordo);
}

/* Avisos correctos: reemplaza el antiguo verdoso */
.pagina-invitar-fundadores .ok {
    background: var(--mt-fondo-panel);
    color: var(--mt-texto);
    border: 1px solid var(--mt-principal);
    border-left: 6px solid var(--mt-secundario);
}

.pagina-invitar-fundadores .ok strong {
    color: var(--mt-bordo);
}

.pagina-invitar-fundadores label {
    color: var(--mt-bordo);
    font-weight: 800;
    display: block;
    margin-bottom: 7px;
}

.pagina-invitar-fundadores input {
    width: 100%;
    border: 1px solid var(--mt-borde);
    border-radius: 12px;
    padding: 13px 14px;
    font-size: 1rem;
    background: var(--mt-tarjeta);
    color: var(--mt-texto);
}

.pagina-invitar-fundadores input:focus {
    outline: none;
    border-color: var(--mt-secundario);
    box-shadow: 0 0 0 4px rgba(203, 145, 32, .18);
}

.pagina-invitar-fundadores .grid {
    display: grid;
    gap: 14px;
}

.pagina-invitar-fundadores .alias-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.pagina-invitar-fundadores .acciones {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.pagina-invitar-fundadores table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

.pagina-invitar-fundadores th,
.pagina-invitar-fundadores td {
    border-bottom: 1px solid var(--mt-borde);
    padding: 9px 7px;
    text-align: left;
    vertical-align: top;
}

.pagina-invitar-fundadores th {
    background: var(--mt-fondo-panel);
    color: var(--mt-bordo);
}

.pagina-invitar-fundadores code {
    background: var(--mt-fondo-claro);
    border-radius: 5px;
    padding: 2px 5px;
    word-break: break-all;
}

@media (max-width: 720px) {
    .pagina-invitar-fundadores {
        padding: 10px;
    }

    .pagina-invitar-fundadores .contenedor {
        width: 100%;
        max-width: 100%;
    }

    .pagina-invitar-fundadores .alias-grid {
        grid-template-columns: 1fr;
    }

    .pagina-invitar-fundadores .card {
        width: 100%;
        max-width: 100%;
        padding: 14px;
        border-radius: 14px;
    }

    .pagina-invitar-fundadores h1 {
        font-size: 1.35rem;
        line-height: 1.15;
    }

    .pagina-invitar-fundadores .resumen {
        padding: 12px;
        border-radius: 10px;
    }

    .pagina-invitar-fundadores .resumen p {
        margin: 0 0 8px;
        line-height: 1.35;
    }

    .pagina-invitar-fundadores .resumen p:last-child {
        margin-bottom: 0;
    }

    .pagina-invitar-fundadores .alerta {
        padding: 12px;
        border-radius: 10px;
    }

    .pagina-invitar-fundadores ul {
        margin: 0;
        padding-left: 18px;
    }
}
/* =====================================================
   CAMPANA DE NOTIFICACIONES EN HEADER - MERCADO TRUEQUE
   Agregar este bloque AL FINAL de:
   /public/v1/assets/css/app.css

   No redefine :root.
   Usa las variables globales ya declaradas en app.css.
===================================================== */
.app-header-panel .btn-campana {
    position: relative;

    width: 46px;
    height: 46px;
    min-width: 46px;

    justify-self: center;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--mt-tarjeta);
    color: var(--mt-bordo);

    border: 1px solid var(--mt-borde);
    box-shadow: 0 5px 14px var(--mt-sombra);

    text-decoration: none;
}

.app-header-panel .btn-campana:visited,
.app-header-panel .btn-campana:hover,
.app-header-panel .btn-campana:active,
.app-header-panel .btn-campana:focus {
    color: var(--mt-bordo);
    text-decoration: none;
}

.app-header-panel .icono-campana {
    font-size: 1.42rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-header-panel .numero-notificaciones-campana {
    position: absolute;

    top: -6px;
    right: -7px;

    min-width: 23px;
    height: 23px;
    padding: 0 6px;

    border-radius: 999px;

    background: var(--mt-bordo);
    color: #ffffff;

    border: 2px solid var(--mt-tarjeta);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-family: Arial, Helvetica, sans-serif;
    font-size: .76rem;
    font-weight: 900;
    line-height: 1;

    box-shadow: 0 3px 9px var(--mt-sombra-panel);
}

/* Animación solo cuando hay notificaciones no leídas */
.app-header-panel .btn-campana.tiene-notificaciones .icono-campana {
    animation: mt-campana-header 1.25s ease-in-out infinite;
    transform-origin: 50% 8%;
}

@keyframes mt-campana-header {
    0% {
        transform: rotate(0deg);
    }

    12% {
        transform: rotate(14deg);
    }

    24% {
        transform: rotate(-12deg);
    }

    36% {
        transform: rotate(9deg);
    }

    48% {
        transform: rotate(-6deg);
    }

    60% {
        transform: rotate(3deg);
    }

    72%,
    100% {
        transform: rotate(0deg);
    }
}

@media (max-width: 720px) {
    .app-header-panel .btn-campana {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .app-header-panel .icono-campana {
        font-size: 1.28rem;
    }

    .app-header-panel .numero-notificaciones-campana {
        top: -7px;
        right: -8px;

        min-width: 22px;
        height: 22px;

        font-size: .72rem;
    }
}
/* =====================================================
   AJUSTE NOTIFICACIONES - MERCADO TRUEQUE
   Agregar al final de /public/v1/assets/css/app.css
===================================================== */
.espacio-campana-header {
    width: 46px;
    min-width: 46px;
    height: 46px;

    justify-self: center;

    display: flex;
    align-items: center;
    justify-content: center;
}
.notificaciones-pie {
    margin-top: 18px;
}

        /* ============================================================
           PANEL - CLUBES REALES Y SALDOS
        ============================================================ */

        .panel-creditos-reales {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
            padding: 18px;
            margin: 0 0 18px;
            width: 100%;
            max-width: none;
            box-sizing: border-box;
        }

        .panel-creditos-reales hr {
            border: 0;
            border-top: 1px solid rgba(0, 0, 0, 0.10);
            margin: 12px 0;
        }

        .panel-saludo-usuario {
            margin: 0;
            color: var(--mt-bordo-oscuro, #7a1012);
            font-size: 1.05rem;
            line-height: 1.3;
        }

        .panel-creditos-encabezado h2 {
            margin: 0 0 6px;
            color: var(--mt-bordo, #c4181b);
            font-size: clamp(1.45rem, 5vw, 2.1rem);
            line-height: 1.05;
        }

        .panel-creditos-encabezado p {
            margin: 0 0 16px;
            color: #555555;
            line-height: 1.45;
        }

        .lista-clubes-saldo {
            display: grid;
            gap: 12px;
            margin-top: 14px;
        }

        .club-saldo-item {
            background: #fffdf8;
            border: 1px solid rgba(0, 0, 0, 0.10);
            padding: 14px;
            display: grid;
            gap: 12px;
        }

        .club-saldo-info h3 {
            margin: 0 0 6px;
            color: var(--mt-bordo, #c4181b);
            font-size: 1.12rem;
            line-height: 1.2;
        }

        .club-saldo-descripcion {
            margin: 0 0 8px;
            color: #666666;
            font-size: 0.9rem;
            line-height: 1.35;
        }
		
		.club-saldo-monto {
    font-size: clamp(1.8rem, 7vw, 2.8rem);
    font-weight: 300;
    color: #333333;
    line-height: 1.05;
    margin: 8px 0 10px;
    letter-spacing: -0.03em;
}

        .club-saldo-equivalencias {
            display: grid;
            gap: 4px;
            font-size: 0.82rem;
            line-height: 1.35;
            color: #555555;
            text-transform: uppercase;
        }

        .club-saldo-equivalencias strong {
            color: #111111;
            font-weight: 900;
        }

        .club-saldo-botones {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            justify-content: flex-start;
        }

        .btn-club-saldo {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 30px;
            padding: 6px 12px;
            border-radius: 999px;
            border: 1px solid rgba(0, 0, 0, 0.16);
            background: transparent;
            font-size: 0.74rem;
            font-weight: 600;
            line-height: 1.2;
            text-align: center;
            text-decoration: none;
            box-sizing: border-box;
            letter-spacing: 0.01em;
        }

        .btn-club-detalle {
            border-color: rgba(203, 145, 32, 0.55);
            color: #6b4a17;
        }

        .btn-club-productos {
            border-color: rgba(196, 24, 27, 0.42);
            color: var(--mt-bordo, #c4181b);
        }

        .btn-club-saldo:hover,
        .btn-club-saldo:focus,
        .btn-club-saldo:active,
        .btn-club-saldo:visited {
            text-decoration: none;
        }

        .btn-club-detalle:visited {
            color: #6b4a17;
        }

        .btn-club-productos:visited {
            color: var(--mt-bordo, #c4181b);
        }

        .btn-club-saldo:hover,
        .btn-club-saldo:focus {
            background: rgba(0, 0, 0, 0.03);
        }

        .panel-sin-clubes {
            background: #fff7df;
            border: 1px solid rgba(203, 145, 32, 0.35);
            padding: 14px;
            color: #3d2a12;
            margin-top: 14px;
        }

        .panel-sin-clubes strong {
            display: block;
            color: var(--mt-bordo, #c4181b);
            margin-bottom: 6px;
        }

        .panel-sin-clubes p {
            margin: 0 0 12px;
            line-height: 1.45;
        }
        .acciones-rapidas-despues-clubes {
            margin-top: 14px;
        }


        .btn-panel-crear-club {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 46px;
            padding: 12px 14px;
            background: var(--mt-principal, #fad192);
            color: #111111;
            border-radius: 0;
            text-decoration: none;
            font-weight: 900;
            text-align: center;
            box-sizing: border-box;
        }

        .btn-panel-crear-club:hover,
        .btn-panel-crear-club:focus,
        .btn-panel-crear-club:active,
        .btn-panel-crear-club:visited {
            color: #111111;
            text-decoration: none;
        }

        @media (min-width: 720px) {
            .club-saldo-item {
                grid-template-columns: 1fr auto;
                align-items: center;
            }

            .club-saldo-botones {
                justify-content: flex-end;
                min-width: 210px;
            }
        }

        @media (max-width: 640px) {
            .panel-creditos-reales,
            .saber-mas-panel {
                width: 100%;
                max-width: none;
            }
        }
   .panel-cotizacion-dolar {
    margin: 4px 0 8px;

    color: #5f5f5f;

    font-size: clamp(0.3rem, 2vw, 0.72rem);
    font-weight: 700;
    line-height: 1.35;

    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.panel-cotizacion-dolar-sin-dato {
    color: #8a6a2a;
}
/* =====================================================
   LEGAL MERCADO TRUEQUE
===================================================== */

.pagina-legal-mt {
    background: #f7f1e8 !important;
}

.legal-mt-contenedor {
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 82px 14px 96px 14px !important;
    box-sizing: border-box !important;
}

.legal-mt-card {
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-radius: 0 !important;
    padding: 16px !important;
    margin: 0 0 14px 0 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
}

.legal-mt-intro h1 {
    margin: 0 0 10px 0 !important;
    color: #111111 !important;
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
}

.legal-mt-intro p {
    margin: 0 0 10px 0 !important;
    color: #333333 !important;
    font-size: 0.98rem !important;
    line-height: 1.45 !important;
}

.legal-mt-aviso {
    background: var(--mt-principal) !important;
    color: #111111 !important;
    padding: 12px 14px !important;
    margin: 12px 0 0 0 !important;
    border-radius: 0 !important;
    font-weight: 800 !important;
    text-align: center !important;
}

.legal-mt-alerta {
    width: 100% !important;
    padding: 14px 16px !important;
    margin: 0 0 14px 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

.legal-mt-alerta-error {
    background: #fff1f1 !important;
    border: 1px solid rgba(196, 24, 27, 0.35) !important;
    color: #7a0000 !important;
}

.legal-mt-alerta strong {
    display: block !important;
    margin-bottom: 8px !important;
    font-size: 1rem !important;
}

.legal-mt-alerta ul {
    margin: 0 !important;
    padding-left: 20px !important;
}

.legal-mt-alerta li {
    margin: 4px 0 !important;
}

.legal-mt-form {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.legal-mt-documento-header {
    margin: 0 0 12px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important;
}

.legal-mt-documento h2 {
    margin: 0 0 6px 0 !important;
    color: #111111 !important;
    font-size: 1.12rem !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
}

.legal-mt-meta {
    color: #666666 !important;
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
}

.legal-mt-contenido-documento {
    max-height: none !important;
    overflow-y: visible !important;
    padding: 12px !important;
    background: #fafafa !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
}
.legal-mt-contenido-documento h1,
.legal-mt-contenido-documento h2,
.legal-mt-contenido-documento h3 {
    color: #111111 !important;
    margin-top: 0 !important;
}

.legal-mt-contenido-documento p {
    color: #333333 !important;
    font-size: 0.93rem !important;
    line-height: 1.5 !important;
}

.legal-mt-aceptacion {
    border: 2px solid var(--mt-bordo) !important;
}

.legal-mt-check {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
    color: #111111 !important;
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

.legal-mt-check input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin-top: 2px !important;
    accent-color: var(--mt-bordo) !important;
}

.legal-mt-texto-menor {
    margin: 12px 0 14px 0 !important;
    color: #555555 !important;
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
}

@media (max-width: 640px) {
    .legal-mt-contenedor {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .legal-mt-card {
        padding: 14px !important;
    }

    .legal-mt-contenido-documento {
    max-height: none !important;
}
    .legal-mt-intro h1 {
        font-size: 1.22rem !important;
    }
}
.aclaracion-legal-suave {
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(43, 33, 24, 0.78);
    text-align: center;
    margin: 8px auto 18px auto;
    max-width: 680px;
}
/* =====================================================
   AUDITORÍA SIMPLE - MERCADO TRUEQUE
===================================================== */

.pagina-auditoria {
    background: var(--mt-fondo, #f6efe7) !important;
}

.auditoria-contenedor {
    padding-top: 76px !important;
    padding-bottom: 95px !important;
}

.auditoria-encabezado {
    margin: 0 0 14px 0 !important;
}

.auditoria-encabezado h1 {
    margin: 0 0 6px 0 !important;
    color: var(--mt-bordo-oscuro, #5a1725) !important;
    font-size: 1.55rem !important;
    font-weight: 900 !important;
}

.auditoria-encabezado p {
    margin: 0 !important;
    color: #3d3028 !important;
    font-size: 0.96rem !important;
    line-height: 1.45 !important;
}

.auditoria-card {
    background: #fffaf3 !important;
    border: 1px solid rgba(90, 23, 37, 0.14) !important;
    border-radius: 0 !important;
    padding: 14px !important;
    margin: 0 0 12px 0 !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
}

.auditoria-card h2 {
    margin: 0 0 10px 0 !important;
    color: var(--mt-bordo-oscuro, #5a1725) !important;
    font-size: 1.08rem !important;
    font-weight: 900 !important;
}

.auditoria-card p {
    margin: 8px 0 0 0 !important;
    color: #3d3028 !important;
    font-size: 0.94rem !important;
    line-height: 1.45 !important;
}

.auditoria-form label {
    display: block !important;
    margin-bottom: 6px !important;
    font-weight: 900 !important;
    color: var(--mt-bordo-oscuro, #5a1725) !important;
}

.auditoria-form select {
    display: block !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    border-radius: 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-weight: 800 !important;
    box-sizing: border-box !important;
}

.auditoria-saldo-simple {
    margin-top: 12px !important;
    background: #fad192 !important;
    color: #111111 !important;
    padding: 11px 12px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

.auditoria-saldo-simple strong {
    display: block !important;
    margin-top: 3px !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
}

.auditoria-opciones {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.auditoria-opcion {
    display: block !important;
    background: #ffffff !important;
    color: #111111 !important;
    text-decoration: none !important;
    border: 1px solid rgba(90, 23, 37, 0.18) !important;
    border-left: 6px solid var(--mt-secundario, #cb9120) !important;
    padding: 13px 14px !important;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.07) !important;
}

.auditoria-opcion strong {
    display: block !important;
    color: var(--mt-bordo-oscuro, #5a1725) !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    margin-bottom: 4px !important;
}

.auditoria-opcion span {
    display: block !important;
    color: #3d3028 !important;
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
}

.auditoria-opcion.activa {
    background: #fad192 !important;
    border-left-color: var(--mt-bordo, #c4181b) !important;
}

.auditoria-grid-simple {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.auditoria-dato-principal {
    background: #fad192 !important;
}

.auditoria-numero {
    font-size: 1.7rem !important;
    font-weight: 900 !important;
    color: #111111 !important;
    line-height: 1.15 !important;
    margin: 6px 0 !important;
}

.auditoria-lista-movimientos {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

.auditoria-movimiento {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-left: 5px solid var(--mt-secundario, #cb9120) !important;
    padding: 12px !important;
    box-sizing: border-box !important;
}

.auditoria-movimiento-texto {
    color: #111111 !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    font-weight: 900 !important;
}

.auditoria-movimiento-fecha {
    margin-top: 6px !important;
    color: #5f5148 !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
}

.auditoria-movimiento-detalle {
    margin-top: 7px !important;
    color: #3d3028 !important;
    background: rgba(250, 209, 146, 0.28) !important;
    padding: 8px 9px !important;
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
}

.auditoria-explicacion {
    background: #fffaf3 !important;
}

@media (max-width: 720px) {
    .auditoria-contenedor {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .auditoria-grid-simple {
        grid-template-columns: 1fr !important;
    }

    .auditoria-numero {
        font-size: 1.45rem !important;
    }
}
/* =====================================================
   AUDITORÍA - PANEL DE SELECCIÓN DE CLUB
===================================================== */

.pagina-auditoria {
    background: var(--mt-fondo, #f6efe7) !important;
}

.auditoria-panel {
    margin-top: 12px !important;
}

.auditoria-encabezado {
    margin-bottom: 14px !important;
}

.auditoria-encabezado h2 {
    margin: 0 0 6px 0 !important;
    color: var(--mt-bordo, #c4181b) !important;
    font-size: 1.35rem !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
}

.auditoria-encabezado p {
    margin: 0 !important;
    color: var(--mt-texto-suave, #6b5a4d) !important;
    font-size: 0.92rem !important;
    line-height: 1.38 !important;
    font-weight: 700 !important;
}

.auditoria-estado {
    background: #fffaf4 !important;
    border: 1px solid rgba(196, 24, 27, 0.16) !important;
    border-left: 5px solid var(--mt-principal, #fad192) !important;
    border-radius: 0 !important;
    padding: 13px 14px !important;
    color: var(--mt-texto, #2b2118) !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}

.auditoria-clubes-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 12px !important;
}

.auditoria-club-card {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
}

.auditoria-club-card:visited,
.auditoria-club-card:hover,
.auditoria-club-card:active,
.auditoria-club-card:focus {
    color: inherit !important;
    text-decoration: none !important;
}

.auditoria-club-card-interior {
    background: #fffaf4 !important;
    border: 1px solid rgba(196, 24, 27, 0.16) !important;
    border-left: 5px solid var(--mt-principal, #fad192) !important;
    border-radius: 0 !important;
    padding: 14px 15px !important;
    color: var(--mt-texto, #2b2118) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important;
}

.auditoria-club-card-interior strong {
    display: block !important;
    color: var(--mt-bordo, #c4181b) !important;
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
    margin-bottom: 7px !important;
}

.auditoria-club-card-interior p {
    margin: 0 0 5px 0 !important;
    color: var(--mt-texto, #2b2118) !important;
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

.auditoria-club-card-interior small {
    display: block !important;
    color: var(--mt-texto-suave, #6b5a4d) !important;
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

.auditoria-club-card-interior span {
    display: block !important;
    margin-top: 10px !important;
    text-align: center !important;
    color: firebrick !important;
    font-size: 0.92rem !important;
    font-weight: 950 !important;
}

.auditoria-club-card-activa .auditoria-club-card-interior {
    background: #fad192 !important;
    border-left-color: var(--mt-bordo, #c4181b) !important;
}

.auditoria-club-seleccionado {
    margin-top: 12px !important;
    margin-bottom: 16px !important;
}

.auditoria-opciones-titulo {
    margin: 8px 0 12px 0 !important;
    color: var(--mt-bordo-oscuro, #5a1725) !important;
    font-size: 1.05rem !important;
    font-weight: 950 !important;
    text-align: center !important;
}

.auditoria-botonera {
    margin-top: 10px !important;
}

@media (min-width: 760px) {
    .auditoria-clubes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
/* =====================================================
   AUDITORÍA - TRANSACCIONES DELICADAS
===================================================== */

.auditoria-lista-transacciones {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin-top: 12px !important;
}

.auditoria-transaccion {
    background: #fffdf8 !important;
    border: 1px solid rgba(90, 23, 37, 0.12) !important;
    border-radius: 0 !important;
    padding: 10px 11px !important;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.055) !important;
    box-sizing: border-box !important;
}

.auditoria-transaccion-entrada {
    border-left: 4px solid rgba(203, 145, 32, 0.75) !important;
}

.auditoria-transaccion-salida {
    border-left: 4px solid rgba(196, 24, 27, 0.70) !important;
}

.auditoria-transaccion-cabecera {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}

.auditoria-transaccion-cabecera span {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(250, 209, 146, 0.55) !important;
    color: #2b2118 !important;
    padding: 4px 7px !important;
    font-size: 0.72rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

.auditoria-transaccion-cabecera strong {
    display: block !important;
    color: #2b2118 !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.auditoria-transaccion-texto {
    color: var(--mt-texto, #2b2118) !important;
    font-size: 0.96rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

.auditoria-transaccion-fecha {
    margin-top: 5px !important;
    color: var(--mt-texto-suave, #6b5a4d) !important;
    font-size: 0.8rem !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
}

.auditoria-transaccion-detalle {
    margin-top: 7px !important;
    background: rgba(250, 209, 146, 0.20) !important;
    color: var(--mt-texto, #2b2118) !important;
    padding: 7px 8px !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
    line-height: 1.32 !important;
}

@media (max-width: 520px) {
    .auditoria-transaccion-cabecera {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .auditoria-transaccion-cabecera strong {
        font-size: 1.08rem !important;
    }
}
/* =====================================================
   AUDITORÍA - SIGNO Y COLOR DE MONTOS
   Agregar al final de /v1/assets/css/app.css
===================================================== */


.auditoria-transaccion-cabecera strong.auditoria-monto-positivo {
    color: steelblue !important;
}

.auditoria-transaccion-cabecera strong.auditoria-monto-negativo {
    color: var(--mt-bordo, #c4181b) !important;
}

.auditoria-transaccion-salida .auditoria-transaccion-texto {
    color: var(--mt-bordo-oscuro, #5a1725) !important;
}

.auditoria-transaccion-salida {
    border-left-color: rgba(196, 24, 27, 0.70) !important;
}
/* =====================================================
   AUDITORÍA - CRÉDITOS TOTALES Y CREADOS
   Agregar al final de /v1/assets/css/app.css
===================================================== */

.auditoria-creditos-resumen {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin: 12px 0 14px 0 !important;
}

.auditoria-creditos-dato {
    background: #fffdf8 !important;
    border: 1px solid rgba(90, 23, 37, 0.12) !important;
    border-left: 4px solid rgba(203, 145, 32, 0.75) !important;
    padding: 10px 11px !important;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.045) !important;
    box-sizing: border-box !important;
}

.auditoria-creditos-dato-creados {
    border-left-color: steelblue !important;
}

.auditoria-creditos-dato span {
    display: block !important;
    color: var(--mt-texto-suave, #6b5a4d) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin-bottom: 5px !important;
}

.auditoria-creditos-dato strong {
    display: block !important;
    color: var(--mt-texto, #2b2118) !important;
    font-size: 1.12rem !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
}

.auditoria-card-simple {
    background: #fffaf4 !important;
    border: 1px solid rgba(90, 23, 37, 0.12) !important;
    padding: 12px !important;
    margin: 12px 0 !important;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.045) !important;
}

.auditoria-card-simple h3 {
    margin: 0 0 6px 0 !important;
    color: var(--mt-bordo-oscuro, #5a1725) !important;
    font-size: 1rem !important;
    font-weight: 950 !important;
}

.auditoria-card-simple p {
    margin: 0 0 10px 0 !important;
    color: var(--mt-texto-suave, #6b5a4d) !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.auditoria-tabla-simple-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.auditoria-tabla-simple {
    width: 100% !important;
    min-width: 680px !important;
    border-collapse: collapse !important;
    background: #ffffff !important;
}

.auditoria-tabla-simple th {
    background: rgba(250, 209, 146, 0.65) !important;
    color: #2b2118 !important;
    text-align: left !important;
    padding: 8px !important;
    font-size: 0.78rem !important;
    font-weight: 950 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important;
}

.auditoria-tabla-simple td {
    padding: 9px 8px !important;
    color: #2b2118 !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    vertical-align: middle !important;
}

.auditoria-tabla-simple td strong {
    font-weight: 950 !important;
}

.auditoria-socio-vos {
    display: inline-flex !important;
    margin-left: 6px !important;
    padding: 3px 6px !important;
    background: rgba(70, 130, 180, 0.12) !important;
    color: steelblue !important;
    font-size: 0.72rem !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
}

.auditoria-monto-positivo {
    color: steelblue !important;
}

.auditoria-monto-negativo {
    color: var(--mt-bordo, #c4181b) !important;
}

.auditoria-monto-cero {
    color: var(--mt-texto-suave, #6b5a4d) !important;
}

.auditoria-creados-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin-top: 10px !important;
}

.auditoria-creado-item {
    background: #fffdf8 !important;
    border: 1px solid rgba(90, 23, 37, 0.11) !important;
    border-left: 4px solid steelblue !important;
    padding: 10px !important;
}

.auditoria-creado-item span {
    display: block !important;
    color: var(--mt-texto, #2b2118) !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    margin-bottom: 5px !important;
}

.auditoria-creado-item strong {
    display: block !important;
    color: steelblue !important;
    font-size: 1.08rem !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
}

.auditoria-creado-item small {
    display: block !important;
    color: var(--mt-texto-suave, #6b5a4d) !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
}

.auditoria-lista-creaciones {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

.auditoria-creacion-linea {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    align-items: center !important;
    background: #fffdf8 !important;
    border: 1px solid rgba(90, 23, 37, 0.10) !important;
    padding: 9px 10px !important;
}

.auditoria-creacion-linea strong {
    display: block !important;
    color: var(--mt-texto, #2b2118) !important;
    font-size: 0.88rem !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
}

.auditoria-creacion-linea span {
    display: block !important;
    color: var(--mt-texto-suave, #6b5a4d) !important;
    font-size: 0.78rem !important;
    font-weight: 750 !important;
    margin-top: 2px !important;
}

.auditoria-creacion-linea small {
    grid-column: 1 / -1 !important;
    color: var(--mt-texto-suave, #6b5a4d) !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
}

.auditoria-creacion-monto {
    color: steelblue !important;
    font-size: 0.95rem !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

@media (max-width: 720px) {
    .auditoria-creditos-resumen,
    .auditoria-creados-grid {
        grid-template-columns: 1fr !important;
    }
}
/* =====================================================
   AUDITORÍA - TRANSACCIONES TOTALES DEL CLUB
   Agregar al final de /v1/assets/css/app.css
===================================================== */

.auditoria-transacciones-resumen {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin: 12px 0 14px 0 !important;
}

.auditoria-transacciones-dato {
    background: #fffdf8 !important;
    border: 1px solid rgba(90, 23, 37, 0.12) !important;
    border-left: 4px solid rgba(203, 145, 32, 0.75) !important;
    padding: 10px 11px !important;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.045) !important;
    box-sizing: border-box !important;
}

.auditoria-transacciones-dato span {
    display: block !important;
    color: var(--mt-texto-suave, #6b5a4d) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin-bottom: 5px !important;
}

.auditoria-transacciones-dato strong {
    display: block !important;
    color: var(--mt-texto, #2b2118) !important;
    font-size: 1.1rem !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
}

.auditoria-transaccion-ajena {
    border-left: 4px solid rgba(107, 90, 77, 0.38) !important;
}

.auditoria-monto-neutral {
    color: var(--mt-texto, #2b2118) !important;
}

@media (max-width: 720px) {
    .auditoria-transacciones-resumen {
        grid-template-columns: 1fr !important;
    }
}
/* =====================================================
   AUDITORÍA - ETIQUETA SOCIO FUNDADOR
   Agregar al final de /v1/assets/css/app.css
===================================================== */

.auditoria-socio-fundador {
    display: inline-flex !important;
    margin-left: 6px !important;
    color: var(--mt-bordo-oscuro, #5a1725) !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}
        .alias-identificador-socio {
            margin: 8px 0 12px !important;
            padding: 10px 12px !important;

            background: rgba(0, 0, 0, 0.04) !important;
            border-left: 4px solid var(--mt-secundario, #cb9120) !important;

            color: #2b2118 !important;
            font-size: 0.95rem !important;
            font-weight: 700 !important;
            line-height: 1.35 !important;

            box-sizing: border-box !important;
        }

        .alias-identificador-socio strong {
            font-weight: 900 !important;
        }

/* ============================================================
   MENU HEADER - X FLOTANTE DE CIERRE
============================================================ */

.menu-panel-desplegable {
    position: absolute !important;
    overflow: visible !important;
}

.btn-cerrar-menu-panel {
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;

    width: 23px !important;
    height: 23px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(255, 250, 244, 0.64) !important;
    color: rgba(196, 24, 27, 0.72) !important;

    border: 1px solid rgba(196, 24, 27, 0.16) !important;
    border-radius: 999px !important;

    font-size: 1.05rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    cursor: pointer !important;
    user-select: none !important;
    z-index: 5 !important;

    box-shadow: 0 3px 8px rgba(66, 27, 18, 0.08) !important;
}

.btn-cerrar-menu-panel:hover,
.btn-cerrar-menu-panel:focus {
    background: rgba(255, 250, 244, 0.92) !important;
    color: var(--mt-bordo, #c4181b) !important;
    border-color: rgba(196, 24, 27, 0.28) !important;
}

.btn-cerrar-menu-panel:active {
    transform: scale(0.96) !important;
}

/* Deja aire para que la X flotante no tape el primer enlace */
.menu-panel-desplegable > a:first-of-type {
    padding-right: 42px !important;
}
/* Agrandar cruz de cierre del aviso flotante un 50% */
.aviso-flotante-cerrar,
.mt-aviso-flotante-cerrar,
.aviso-flotante .cerrar,
.aviso-flotante button[aria-label="Cerrar"] {
    width: 42px !important;
    height: 42px !important;
    font-size: 27px !important;
    line-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}