/* Sistema visual del sitio público. Todo va scopeado a `body.tb-public`: el panel comparte
 * `base.html.twig` y sin el scope la paleta se le filtra a la agenda. */

:root {
    /* Marca */
    --tb-violet: #5B4FD6;          /* acción: botones, links, números de la franja */
    --tb-violet-deep: #4536A8;     /* paneles de fondo violeta (CTA final) */
    --tb-violet-soft: #EDE9FB;     /* relleno suave: pills, hovers */
    --tb-icon-bg: #EEEAFB;         /* cajita de los íconos, con el ícono en --tb-violet-deep */
    --tb-ink: #170F2B;             /* títulos y footer */
    --tb-text: #4A4260;            /* texto corrido — 9,3:1 sobre blanco */
    --tb-gray: #6F6885;            /* 5,26:1 sobre blanco · 4,79:1 sobre el tinte */
    --tb-violet-dim: #C9BFF0;      /* separadores decorativos sobre el tinte (el punto del hero) */
    --tb-tint: #F6F3FC;            /* fondo alterno */
    --tb-line: #E7E2F5;            /* bordes y separadores */

    --tb-underline: #A34DC0;

    /* El verde de marca no llega a contraste para texto (2,28:1). Decorativo; para texto, el fuerte. */
    --tb-wa: #22C55E;
    --tb-wa-strong: #0B6E33;

    --tb-gold: #E3A73E;
    --tb-gold-strong: #8A5A00;

    --tb-h2-section: 2.1rem;
    --tb-h2-section-mobile: 1.7rem;
    --tb-h2-block: 1.875rem;
    --tb-h2-block-mobile: 1.375rem;

    --tb-radius-card: 26px 26px 26px 6px;
    --tb-radius-btn: 14px 14px 14px 4px;

    /* Las fuentes de emoji van al final a propósito: sin ese fallback el 🇦🇷 sale cuadradito. */
    --tb-font-display: 'Sora', 'Segoe UI', Tahoma, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
    --tb-font-text: 'Inter', 'Segoe UI', Tahoma, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
}

/* ---------------------------------------------------------------- base de página */

body.tb-public {
    background: #fff;
    font-family: var(--tb-font-text);
    color: var(--tb-text);
    font-size: 1rem;
    line-height: 1.65;
}

body.tb-public h1,
body.tb-public h2,
body.tb-public h3,
body.tb-public h4 {
    font-family: var(--tb-font-display);
    color: var(--tb-ink);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

body.tb-public h1 { font-weight: 800; }
body.tb-public h2,
body.tb-public h3,
body.tb-public h4 { font-weight: 700; }

/* El subrayado se apaga para TODOS los `<a>`: cuando la regla de color excluyó a los botones,
 * también les sacó el `text-decoration: none` y quedaron subrayados. */
body.tb-public a {
    text-decoration: none;
}

/* La exclusión va en `:where()`, que NO suma especificidad, y eso es lo importante: con
 * `:not(.btn):not(.tb-btn)…` el selector valía cinco clases, le ganaba a toda regla de color de
 * link del sitio y los del navbar salían violeta. Sin la exclusión, `body.tb-public a` (dos
 * elementos) le gana a `.btn-primary` y pinta texto violeta sobre fondo violeta. */
body.tb-public a:not(:where(.btn, .tb-btn, .cta-button, .tb-wa-float)) {
    color: var(--tb-violet);
}

body.tb-public a:not(:where(.btn, .tb-btn, .cta-button, .tb-wa-float)):hover {
    color: var(--tb-violet-deep);
    text-decoration: underline;
}

body.tb-public strong { color: var(--tb-ink); }

/* Bootstrap las trae con !important, así que el override también. */
body.tb-public .text-muted { color: var(--tb-gray) !important; }
body.tb-public .text-success { color: var(--tb-wa-strong) !important; }
body.tb-public .bg-light { background-color: var(--tb-tint) !important; }

/* ---------------------------------------------------------------- utilities de Bootstrap
 *
 * Las páginas viejas las usan como decoración y varias no llegan a contraste con el `text-white`
 * que traen al lado (`bg-info` daba 1,96:1). Se remapean acá en vez de editar 20 templates. */
body.tb-public .bg-primary { background-color: var(--tb-violet) !important; }
body.tb-public .bg-info { background-color: var(--tb-violet-deep) !important; }
body.tb-public .bg-success { background-color: var(--tb-wa-strong) !important; }
body.tb-public .bg-warning { background-color: var(--tb-gold-strong) !important; }
body.tb-public .bg-warning.text-dark { color: #fff !important; }

body.tb-public .text-warning { color: var(--tb-gold-strong) !important; }
body.tb-public .text-info { color: var(--tb-violet-deep) !important; }
body.tb-public .text-primary { color: var(--tb-violet) !important; }
/* El rojo de Bootstrap da 3,9:1: alcanza para un ícono, no para texto. */
body.tb-public .text-danger { color: #B02233 !important; }

body.tb-public .btn-primary {
    background-color: var(--tb-violet);
    border-color: var(--tb-violet);
    color: #fff;
}

body.tb-public .btn-primary:hover,
body.tb-public .btn-primary:focus {
    background-color: var(--tb-violet-deep);
    border-color: var(--tb-violet-deep);
    color: #fff;
}

body.tb-public .btn-outline-primary {
    color: var(--tb-violet);
    border-color: var(--tb-violet);
}

body.tb-public .btn-outline-primary:hover {
    background-color: var(--tb-violet);
    border-color: var(--tb-violet);
    color: #fff;
}

/* Contextos oscuros: los tokens de texto son para fondo claro. Un `.text-muted` dentro de un
 * `.bg-primary` quedaba en 1,17:1. Cualquier panel de color nuevo se suma a esta lista. */
body.tb-public .bg-primary .text-muted,
body.tb-public .bg-info .text-muted,
body.tb-public .bg-success .text-muted,
body.tb-public .bg-warning .text-muted,
body.tb-public .bg-dark .text-muted,
body.tb-public .tb-panel .text-muted,
body.tb-public .bg-primary .text-secondary,
body.tb-public .bg-info .text-secondary,
body.tb-public .bg-dark .text-secondary {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.tb-public .bg-primary strong,
body.tb-public .bg-info strong,
body.tb-public .bg-success strong,
body.tb-public .bg-warning strong,
body.tb-public .bg-primary h1, body.tb-public .bg-primary h2,
body.tb-public .bg-primary h3, body.tb-public .bg-primary h4,
body.tb-public .bg-info h1, body.tb-public .bg-info h2,
body.tb-public .bg-info h3, body.tb-public .bg-info h4,
body.tb-public .bg-success h3, body.tb-public .bg-success h4,
body.tb-public .bg-warning h3, body.tb-public .bg-warning h4 {
    color: #fff;
}

body.tb-public .accordion-button {
    color: var(--tb-ink);
}

body.tb-public .accordion-button:not(.collapsed) {
    background: var(--tb-violet-soft);
    color: var(--tb-violet-deep);
    box-shadow: none;
}

/* ---------------------------------------------------------------- navegación */

/* El gradiente viejo vive en el <style> inline de `base.html.twig`, que comparte el panel. No se
 * toca: `body.tb-public .navbar` le gana por especificidad y el panel queda intacto. */
body.tb-public .navbar {
    background: #fff !important;
    border-bottom: 1px solid var(--tb-line);
    box-shadow: none;
}

body.tb-public .navbar-brand {
    font-family: var(--tb-font-display);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--tb-ink);
}

body.tb-public .navbar .nav-link {
    color: var(--tb-text);
    font-weight: 500;
    font-size: 0.875rem;
}

body.tb-public .navbar .nav-link:hover,
body.tb-public .navbar .nav-link:focus {
    color: var(--tb-violet);
}

body.tb-public .tb-navlink {
    font-size: 0.845rem;
    font-weight: 600;
    color: var(--tb-text);
}

body.tb-public .tb-navlink:hover {
    color: var(--tb-violet);
}

/* El toggler de Bootstrap trae el ícono blanco: sobre barra clara no se ve. */
body.tb-public .navbar-toggler {
    border-color: var(--tb-line);
}

body.tb-public .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23170F2B' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- botones */

body.tb-public .cta-button,
body.tb-public .tb-btn {
    display: inline-block;
    background: var(--tb-violet);
    color: #fff;
    font-family: var(--tb-font-text);
    font-weight: 600;
    padding: 0.9rem 1.75rem;
    border: 0;
    border-radius: var(--tb-radius-btn);
    transition: background 0.2s ease, transform 0.2s ease;
}

body.tb-public .cta-button:hover,
body.tb-public .tb-btn:hover {
    background: var(--tb-violet-deep);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

body.tb-public .tb-btn--ghost {
    background: transparent;
    color: var(--tb-violet);
    border: 1px solid var(--tb-line);
}

body.tb-public .tb-btn--ghost:hover {
    background: var(--tb-violet-soft);
    color: var(--tb-violet-deep);
}

body.tb-public .tb-btn--light {
    background: #fff;
    color: var(--tb-violet-deep);
}

body.tb-public .tb-btn--light:hover {
    background: var(--tb-violet-soft);
    color: var(--tb-violet-deep);
}

body.tb-public .tb-btn--outline-light {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.55);
}

body.tb-public .tb-btn--outline-light:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

body.tb-public .tb-btn--ink {
    background: var(--tb-ink);
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.625rem 1.125rem;
}

body.tb-public .tb-btn--ink:hover {
    background: #2B1C4D;
}

/* ---------------------------------------------------------------- piezas compartidas */

body.tb-public .tb-sticker {
    display: inline-block;
    background: var(--tb-ink);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.5625rem 1rem;
    border-radius: var(--tb-radius-btn);
    transform: rotate(-2deg);
}

body.tb-public .tb-eyebrow {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--tb-violet);
    margin-bottom: 0.75rem;
}

body.tb-public .tb-card {
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-card);
    padding: 1.75rem;
}

/* ---------------------------------------------------------------- panel violeta

   Los tokens de texto no sirven sobre fondo oscuro. Todo lo que entre acá va en blanco, incluido
   el <strong>, que por defecto va a tinta y sobre violeta desaparece. */

body.tb-public .tb-panel {
    background: var(--tb-violet-deep);
    color: #fff;
    border-radius: var(--tb-radius-card);
    padding: 3rem 2.5rem;
}

body.tb-public .tb-panel h2,
body.tb-public .tb-panel h3,
body.tb-public .tb-panel strong {
    color: #fff;
}

body.tb-public .tb-panel p {
    color: rgba(255, 255, 255, 0.85);
}

/* ---------------------------------------------------------------- footer */

/* `.bg-dark` es una utility con !important, así que el override también. */
body.tb-public .footer.bg-dark {
    background: var(--tb-ink) !important;
}

body.tb-public .footer h5,
body.tb-public .footer h6 {
    font-family: var(--tb-font-display);
    font-weight: 700;
}

/* ---------------------------------------------------------------- botón flotante de WhatsApp */

body.tb-public .tb-wa-float {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 1040;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tb-wa-strong);
    color: #fff;
    border-radius: 50%;
    font-size: 1.6rem;
    box-shadow: 0 8px 24px rgba(11, 110, 51, 0.35);
    transition: transform 0.2s ease;
}

body.tb-public .tb-wa-float:hover,
body.tb-public .tb-wa-float:focus {
    color: #fff;
    text-decoration: none;
    transform: scale(1.06);
}

/* Subrayado a mano del hero. El texto va en su propio span con z-index 1 y el SVG detrás en 0.
 * Con el SVG en z-index -1 se va detrás del fondo; sin el span interno pinta ENCIMA del texto y
 * le tacha los descendentes. */
body.tb-public .tb-underline {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

body.tb-public .tb-underline__text {
    position: relative;
    z-index: 1;
}

body.tb-public .tb-underline svg path {
    stroke: var(--tb-underline);
}

body.tb-public .tb-underline svg {
    position: absolute;
    left: -2%;
    width: 104%;
    height: 14px;
    bottom: -4px;
    z-index: 0;
    overflow: visible;
}