/**
 * VIAS3D — Página de reserva de sesiones (BIL)
 *
 * Capa fina sobre la plantilla Open9: style.css (que ya importa tokens,
 * shortcodes, bootstrap, animate y las fuentes) + vias-components.css.
 * Aquí vive sólo lo que la plantilla no trae: el calendario, los horarios,
 * los pasos y los ajustes de la portada.
 *
 * Todo consume var(--v-*): la página responde al tema claro/oscuro sola.
 * Prefijo `b-` para no chocar nunca con `tf-`, `flat-` ni `v-`.
 *
 * Índice
 *   1.  Ajustes de base
 *   2.  Paleta de la página
 *   3.  Portada
 *   4.  Paneles y columna lateral
 *   5.  Pasos
 *   6.  Calendario
 *   7.  Horarios
 *   8.  Resumen, errores y acciones
 *   9.  Confirmación
 *   10. Cierre y pie
 *   11. Herramienta interna (generador de enlaces)
 *   12. Animaciones
 */

/* ==========================================================================
   1. Ajustes de base
   ========================================================================== */

/* El atributo hidden debe ganarle a los display:flex de los componentes. */
[hidden] { display: none !important; }

.b-hidden { display: none !important; }

/* La plantilla capitaliza cada palabra de los títulos; en español eso deja
   "Agenda Tu Sesión De Seguimiento". */
.flat-title-page .heading,
.heading-section-1 h2,
.tf-button { text-transform: none; }

/* Los anclajes quedan debajo del header flotante, no tapados por él. */
html { scroll-behavior: smooth; }

[id] { scroll-margin-top: calc(var(--v-header-h) + 40px); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ==========================================================================
   2. Paleta de la página
   La plantilla tiñe todas las superficies con la escala Tango. Aquí el
   naranja se reserva para lo que hay que elegir —el calendario y los
   horarios— y el resto baja a blancos y grises cálidos derivados del neutro
   corporativo (#1A1919). Los tokens se redefinen con los mismos selectores
   que vias-tokens.css, nunca editando el archivo del paquete.
   ========================================================================== */
:root[data-theme="light"] {
    --v-bg            : #FAF9F8;   /* fondo de página: blanco roto cálido */
    --v-surface       : #FFFFFF;   /* tarjetas y paneles                  */
    --v-surface-2     : #F5F3F2;   /* inputs, badges, acordeón            */
    --v-surface-3     : #EDEAE8;
    --v-border        : rgba(26, 25, 25, 0.10);
    --v-border-strong : rgba(26, 25, 25, 0.16);
    --v-glass         : rgba(255, 255, 255, 0.55);
    --v-bg-rgb        : 250, 249, 248;   /* la plantilla usa rgba(var(--v-bg-rgb)) */
    --v-surface-rgb   : 255, 255, 255;

    /* El calendario conserva el Tango de la plantilla */
    --b-cal-bg        : var(--tango-100);
    --b-cal-border    : var(--tango-400);
    --b-cal-fg        : var(--tango-800);
    --b-cal-dot       : var(--tango-600);
}

:root,
:root[data-theme="dark"] {
    --v-glass         : rgba(20, 17, 16, 0.48);

    /* En oscuro las superficies de la plantilla ya son neutras: sólo se sube
       el naranja del calendario para que destaque sobre ellas. */
    --b-cal-bg        : rgba(224, 98, 22, 0.20);
    --b-cal-border    : rgba(224, 98, 22, 0.52);
    --b-cal-fg        : #FFFFFF;
    --b-cal-dot       : var(--tango-400);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --v-bg            : #FAF9F8;
        --v-surface       : #FFFFFF;
        --v-surface-2     : #F5F3F2;
        --v-surface-3     : #EDEAE8;
        --v-border        : rgba(26, 25, 25, 0.10);
        --v-border-strong : rgba(26, 25, 25, 0.16);
        --v-glass         : rgba(255, 255, 255, 0.55);
        --v-bg-rgb        : 250, 249, 248;
        --v-surface-rgb   : 255, 255, 255;

        --b-cal-bg        : var(--tango-100);
        --b-cal-border    : var(--tango-400);
        --b-cal-fg        : var(--tango-800);
        --b-cal-dot       : var(--tango-600);
    }
}

/* Header más translúcido que el del paquete: al bajar la opacidad se sube el
   desenfoque, para que el texto siga legible sobre lo que pasa por debajo. */
.v-header {
    backdrop-filter        : blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
}

/* Las notas van en gris tenue: el único bloque grande con color de marca
   debe ser el calendario. */
.v-note {
    background  : var(--v-surface-2);
    border-color: var(--v-border);
}

/* ==========================================================================
   3. Portada
   ========================================================================== */
.b-hero-in { max-width: 760px; }

.b-greet {
    margin     : 0 0 var(--v-space-2);
    font-size  : var(--v-text-lg);
    font-weight: 700;
    color      : var(--v-primary);
}

.flat-title-page .heading {
    font-size  : clamp(30px, 5vw, 48px);
    line-height: 1.15;
}

.b-hero-sub {
    margin     : 0 0 var(--v-space-6);
    max-width  : 58ch;
    font-size  : var(--v-text-lg);
    line-height: 1.65;
    color      : var(--v-text-muted);
}

.b-chips {
    display  : flex;
    flex-wrap: wrap;
    gap      : var(--v-space-2);
}

.b-readmore {
    display        : inline-flex;
    align-items    : center;
    gap            : var(--v-space-2);
    margin-top     : var(--v-space-5);
    color          : var(--v-text-muted);
    font-size      : var(--v-text-sm);
    font-weight    : 600;
    text-decoration: none;
    transition     : color var(--v-duration) var(--v-ease);
}

.b-readmore svg {
    width     : 15px;
    height    : 15px;
    transform : rotate(90deg);
    transition: transform var(--v-duration) var(--v-ease);
}

.b-readmore:hover { color: var(--v-primary); }
.b-readmore:hover svg { transform: rotate(90deg) translateX(3px); }

/* ==========================================================================
   4. Paneles y columna lateral
   ========================================================================== */

/* .tf-card-box viene con el padding de una tarjeta de producto y se levanta
   al pasar el ratón. Un panel de formulario necesita aire y quedarse quieto
   mientras se escribe dentro. */
.b-panel {
    padding      : var(--v-space-6);
    border       : 1px solid var(--v-border);
    margin-bottom: var(--v-space-6);
}

.b-panel:hover { transform: none; }

@media (min-width: 768px) {
    .b-panel { padding: var(--v-space-8); }
}

.b-aside-card .v-list { margin-top: 0; }

.b-aside-title {
    margin        : 0;
    font-size     : var(--v-text-xs);
    font-weight   : 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color         : var(--v-text-subtle);
}

.b-aside-sep {
    height    : 1px;
    margin    : var(--v-space-5) 0;
    background: var(--v-border);
    border    : 0;
    opacity   : 1;
}

.b-person {
    display    : flex;
    align-items: center;
    gap        : var(--v-space-4);
}

.b-avatar {
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex           : 0 0 auto;
    width          : 52px;
    height         : 52px;
    border-radius  : var(--v-radius-pill);
    background     : var(--v-gradient);
    color          : var(--v-on-primary);
    font-size      : var(--v-text-base);
    font-weight    : 800;
    box-shadow     : var(--v-shadow-brand);
    overflow       : hidden;
}

.b-avatar svg { width: 22px; height: 22px; }

.b-person-body {
    display       : flex;
    flex-direction: column;
    gap           : 2px;
    min-width     : 0;
}

.b-person-body b {
    font-size    : var(--v-text-base);
    color        : var(--v-fg);
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;
}

.b-person-body span {
    font-size    : var(--v-text-sm);
    color        : var(--v-text-muted);
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;
}

/* Tarjeta de nota del sector */
.b-note-card h3 {
    margin     : var(--v-space-4) 0 var(--v-space-3);
    font-size  : var(--v-text-xl);
    font-weight: 800;
    line-height: 1.3;
    color      : var(--v-fg);
}

.b-note-card p {
    margin     : 0;
    font-size  : var(--v-text-sm);
    line-height: 1.7;
    color      : var(--v-text-muted);
}

/* ---- Botones de la plantilla sobre <button> ----
   La plantilla usa .tf-button casi siempre en <a>. En un <button> pesa más la
   regla genérica de style.css (`button.style-1 {...}`, especificidad 0-1-1) y
   deja el texto del mismo color que el fondo. Aquí se restituye el aspecto de
   .tf-button para los <button> del flujo de reserva, que sí tienen que ser
   botones de verdad: el paso 3 usa la propiedad `disabled`. */
button.tf-button {
    display        : flex;
    justify-content: center;
    align-items    : center;
    gap            : 10px;
    padding        : 10px;
    font-weight    : 800;
    color          : var(--v-bg);
    background-color: var(--v-surface);
}

button.tf-button.style-1 {
    color           : var(--v-bg);
    background-color: var(--v-primary);
}

button.tf-button.style-1:hover:not(:disabled) {
    background-color: var(--v-primary-hover);
}

button.tf-button:disabled {
    opacity: 0.45;
    cursor : not-allowed;
}

/* El botón secundario de la plantilla es blanco sobre fondo oscuro; encima de
   un panel blanco necesita borde para no desaparecer. */
.tf-button.style-2,
button.tf-button.style-2 {
    color           : var(--v-primary);
    background-color: transparent;
    border          : 1px solid var(--v-border-strong);
}

.tf-button.style-2:hover,
button.tf-button.style-2:hover {
    color           : var(--v-on-primary);
    background-color: var(--v-primary);
    border-color    : var(--v-primary);
}

/* ==========================================================================
   5. Pasos
   ========================================================================== */
.b-stepper {
    display       : flex;
    align-items   : center;
    gap           : var(--v-space-2);
    margin-bottom : var(--v-space-6);
    padding-bottom: var(--v-space-6);
    border-bottom : 1px solid var(--v-border);
}

.b-step {
    display    : flex;
    align-items: center;
    gap        : var(--v-space-2);
    flex       : 0 0 auto;
}

.b-step-num {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 28px;
    height         : 28px;
    border-radius  : var(--v-radius-pill);
    border         : 1px solid var(--v-border);
    background     : var(--v-surface-2);
    color          : var(--v-text-subtle);
    font-size      : var(--v-text-sm);
    font-weight    : 700;
    transition     : var(--v-transition);
}

.b-step-label {
    font-size  : var(--v-text-sm);
    font-weight: 600;
    color      : var(--v-text-subtle);
    transition : color var(--v-duration) var(--v-ease);
}

.b-step.is-on .b-step-num {
    background  : var(--v-primary);
    border-color: var(--v-primary);
    color       : var(--v-on-primary);
    box-shadow  : var(--v-shadow-brand);
}

.b-step.is-on .b-step-label { color: var(--v-fg); }

.b-step.is-done .b-step-num {
    background  : var(--v-brand-tint);
    border-color: transparent;
    color       : var(--v-primary);
}

.b-step.is-done .b-step-label { color: var(--v-text-muted); }

.b-step-line {
    flex      : 1 1 auto;
    min-width : 12px;
    height    : 1px;
    background: var(--v-border);
}

@media (max-width: 575px) {
    .b-step-label { display: none; }
}

.b-step-title {
    margin     : 0 0 var(--v-space-2);
    font-size  : var(--v-text-xl);
    font-weight: 800;
    color      : var(--v-fg);
}

.b-step-sub {
    display    : flex;
    align-items: center;
    gap        : var(--v-space-2);
    margin     : 0 0 var(--v-space-6);
    font-size  : var(--v-text-sm);
    color      : var(--v-text-muted);
}

.b-step-sub svg {
    width : 15px;
    height: 15px;
    flex  : 0 0 auto;
    color : var(--v-accent);
}

.b-step-sub .b-date { color: var(--v-text); font-weight: 600; }

/* ==========================================================================
   6. Calendario
   ========================================================================== */
.b-calhead {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : var(--v-space-4);
    margin-bottom  : var(--v-space-4);
}

.b-month {
    font-size     : var(--v-text-lg);
    font-weight   : 700;
    color         : var(--v-fg);
    text-transform: capitalize;
}

.b-nav { display: flex; gap: var(--v-space-2); }

.b-navbtn {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 38px;
    height         : 38px;
    padding        : 0;
    flex           : 0 0 auto;
    border-radius  : var(--v-radius-sm);
    border         : 1px solid var(--v-border);
    background     : var(--v-surface-2);
    color          : var(--v-fg);
    cursor         : pointer;
    transition     : var(--v-transition);
}

.b-navbtn svg { width: 16px; height: 16px; }

.b-navbtn:hover:not(:disabled) {
    background  : var(--v-primary);
    border-color: var(--v-primary);
    color       : var(--v-on-primary);
}

.b-navbtn:focus-visible {
    outline       : 2px solid var(--v-primary);
    outline-offset: 2px;
}

.b-navbtn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Las flechas del sprite miran a la derecha: la anterior se refleja. */
.b-navbtn.is-prev svg { transform: scaleX(-1); }

.b-daygrid {
    display              : grid;
    grid-template-columns: repeat(7, 1fr);
    gap                  : var(--v-space-1);
}

.b-dow {
    padding       : var(--v-space-2) 0;
    text-align    : center;
    font-size     : var(--v-text-xs);
    font-weight   : 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color         : var(--v-text-subtle);
}

/* Día con horarios libres: relleno de marca y borde marcado, para que se
   distinga de un vistazo del día sin disponibilidad, que va sin relleno. */
/* `width`, `height` y `padding` van explícitos: style.css le da a todo
   <button> `height: 50px` y `padding: 10px`, y con eso el aspect-ratio
   resolvía el ancho en 50px dentro de columnas mucho más anchas, así que la
   cuadrícula quedaba descuadrada en escritorio. */
.b-day {
    width        : 100%;
    height       : auto;
    padding      : 0;
    aspect-ratio : 1;
    min-height   : 44px;
    border-radius: var(--v-radius-sm);
    border       : 1px solid var(--b-cal-border);
    background   : var(--b-cal-bg);
    color        : var(--b-cal-fg);
    font-family  : inherit;
    font-size    : var(--v-text-sm);
    font-weight  : 700;
    line-height  : 1.2;
    cursor       : pointer;
    transition   : var(--v-transition);
}

/* El hover se limita a los <button> habilitados: las celdas de relleno del
   inicio de mes son <div>, y un <div> nunca cumple :disabled. */
button.b-day:not(:disabled):hover {
    background  : var(--v-primary);
    border-color: var(--v-primary);
    color       : var(--v-on-primary);
}

button.b-day:not(:disabled):hover .b-dot { background: var(--v-on-primary); }

button.b-day:not(:disabled):focus-visible {
    outline       : 2px solid var(--v-primary);
    outline-offset: 2px;
}

.b-day:disabled,
.b-day.is-empty {
    background    : transparent;
    border-color  : transparent;
    color         : var(--v-text-subtle);
    font-weight   : 500;
    cursor        : default;
    pointer-events: none;
}

.b-day.is-empty { border: 0; }

.b-day.is-sel {
    background  : var(--v-primary);
    border-color: var(--v-primary);
    color       : var(--v-on-primary);
    box-shadow  : var(--v-shadow-brand);
}

.b-dot {
    display      : block;
    width        : 4px;
    height       : 4px;
    margin       : 3px auto 0;
    border-radius: var(--v-radius-pill);
    background   : var(--b-cal-dot);
}

.b-day.is-sel .b-dot { background: var(--v-on-primary); }

/* En pantallas anchas la celda cuadrada se vuelve enorme y el número queda
   perdido: a partir de tablet se fija la altura y la celda ocupa el ancho de
   su columna, que es lo que alinea la rejilla con los encabezados. */
@media (min-width: 768px) {
    .b-day {
        aspect-ratio: auto;
        height      : 64px;
    }
}

/* En teléfonos angostos el mes de siete columnas va justo: se recorta el
   aire del panel y la altura de la celda antes que dejarlo desbordar. */
@media (max-width: 400px) {
    .b-panel { padding: var(--v-space-4); }

    .b-day {
        min-height: 38px;
        font-size : 12px;
    }

    .b-dow { font-size: 10px; }
}

/* Festivos del mes: un día apagado sin explicación se lee como error. */
.b-holidays {
    margin     : var(--v-space-4) 0 0;
    font-size  : var(--v-text-xs);
    line-height: 1.7;
    color      : var(--v-text-subtle);
}

.b-holidays b {
    font-weight: 700;
    color      : var(--v-text-muted);
}

/* ---- Leyenda: qué significa cada color del calendario ---- */
.b-legend {
    display    : flex;
    flex-wrap  : wrap;
    gap        : var(--v-space-2) var(--v-space-5);
    margin-top : var(--v-space-5);
    padding-top: var(--v-space-4);
    border-top : 1px solid var(--v-border);
}

.b-legend-item {
    display    : inline-flex;
    align-items: center;
    gap        : var(--v-space-2);
    font-size  : var(--v-text-xs);
    font-weight: 600;
    color      : var(--v-text-muted);
}

/* Cada muestra es una celda del calendario en miniatura. */
.b-legend-chip {
    width        : 18px;
    height       : 18px;
    flex         : 0 0 auto;
    border-radius: 6px;
    border       : 1px solid var(--b-cal-border);
    background   : var(--b-cal-bg);
}

.b-legend-chip.is-busy {
    background  : transparent;
    border-style: dashed;
    border-color: var(--v-border);
}

.b-legend-chip.is-sel {
    background  : var(--v-primary);
    border-color: var(--v-primary);
}

/* ==========================================================================
   7. Horarios
   ========================================================================== */
.b-group {
    margin        : var(--v-space-5) 0 var(--v-space-3);
    font-size     : var(--v-text-xs);
    font-weight   : 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color         : var(--v-text-subtle);
}

.b-group:first-child { margin-top: 0; }

.b-slots {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap                  : var(--v-space-2);
}

.b-slot {
    width        : 100%;
    height       : auto;
    min-height   : 46px;
    padding      : 10px 8px;
    border-radius: var(--v-radius-sm);
    border       : 1px solid var(--b-cal-border);
    background   : var(--b-cal-bg);
    color        : var(--b-cal-fg);
    font-family  : var(--v-font-mono);
    font-size    : var(--v-text-sm);
    font-weight  : 500;
    cursor       : pointer;
    transition   : var(--v-transition);
}

.b-slot:hover,
.b-slot.is-sel {
    background  : var(--v-primary);
    border-color: var(--v-primary);
    color       : var(--v-on-primary);
}

.b-slot:focus-visible {
    outline       : 2px solid var(--v-primary);
    outline-offset: 2px;
}

.b-empty {
    margin   : 0;
    padding  : var(--v-space-4) 0;
    font-size: var(--v-text-sm);
    color    : var(--v-text-muted);
}

/* ==========================================================================
   8. Resumen, errores y acciones
   ========================================================================== */
.b-summary {
    display      : flex;
    align-items  : center;
    gap          : var(--v-space-3);
    margin-bottom: var(--v-space-6);
    padding      : var(--v-space-4) var(--v-space-5);
    border-radius: var(--v-radius);
    border       : 1px solid var(--b-cal-border);
    background   : var(--b-cal-bg);
    font-size    : var(--v-text-sm);
    color        : var(--b-cal-fg);
}

.b-summary svg {
    width : 18px;
    height: 18px;
    flex  : 0 0 auto;
    color : var(--v-primary);
}

.b-summary b { color: inherit; }

/* es-MX devuelve "miércoles 19 de agosto": sólo se sube la primera letra,
   capitalize pondría también "De Agosto". */
.b-date { display: inline-block; }

.b-date::first-letter { text-transform: uppercase; }

.b-alert {
    display      : flex;
    align-items  : flex-start;
    gap          : var(--v-space-3);
    margin       : 0 0 var(--v-space-5);
    padding      : var(--v-space-4) var(--v-space-5);
    border-radius: var(--v-radius);
    border       : 1px solid rgba(217, 58, 58, 0.35);
    background   : rgba(217, 58, 58, 0.12);
    font-size    : var(--v-text-sm);
    color        : var(--v-text);
}

.b-alert svg {
    width : 18px;
    height: 18px;
    flex  : 0 0 auto;
    color : var(--v-danger);
}

.b-actions {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : var(--v-space-4);
    flex-wrap      : wrap;
    margin-top     : var(--v-space-6);
    padding-top    : var(--v-space-5);
    border-top     : 1px solid var(--v-border);
}

/* El icono del botón "atrás" ya apunta a la izquierda; sólo se coloca antes
   del texto. */
.b-back { flex-direction: row; }

.b-note-sm {
    margin   : var(--v-space-5) 0 0;
    font-size: var(--v-text-xs);
    color    : var(--v-text-subtle);
}

.b-note-sm a { color: var(--v-primary); }

/* ==========================================================================
   9. Confirmación
   ========================================================================== */
.b-ok {
    padding   : var(--v-space-6) 0;
    text-align: center;
}

.b-okmark {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 64px;
    height         : 64px;
    margin-bottom  : var(--v-space-5);
    border-radius  : var(--v-radius-pill);
    background     : var(--v-gradient);
    color          : var(--v-on-primary);
    box-shadow     : var(--v-shadow-brand);
}

.b-okmark svg { width: 30px; height: 30px; stroke-width: 2.5; }

.b-ok h2 {
    margin     : 0 0 var(--v-space-3);
    font-size  : var(--v-text-2xl);
    font-weight: 800;
    color      : var(--v-fg);
}

.b-ok > p {
    margin   : 0 auto var(--v-space-6);
    max-width: 46ch;
    font-size: var(--v-text-base);
    color    : var(--v-text-muted);
}

.b-okcard {
    margin       : 0 auto var(--v-space-5);
    max-width    : 420px;
    padding      : var(--v-space-2) var(--v-space-5);
    border-radius: var(--v-radius-md);
    border       : 1px solid var(--v-border);
    background   : var(--v-surface-2);
    text-align   : left;
}

.b-okrow {
    display        : flex;
    align-items    : baseline;
    justify-content: space-between;
    gap            : var(--v-space-4);
    padding        : var(--v-space-3) 0;
    font-size      : var(--v-text-sm);
}

.b-okrow + .b-okrow { border-top: 1px solid var(--v-border-subtle); }

.b-okrow .k { color: var(--v-text-muted); }

.b-okrow .v {
    font-weight: 600;
    color      : var(--v-fg);
    text-align : right;
}

.b-ok .tf-button { margin: 0 auto; }

.b-link {
    padding        : 0;
    border         : 0;
    background     : none;
    color          : var(--v-primary);
    font-family    : inherit;
    font-size      : inherit;
    font-weight    : 600;
    cursor         : pointer;
    text-decoration: underline;
}

.b-link:hover { color: var(--v-primary-hover); }

/* ==========================================================================
   10. Cierre y pie
   ========================================================================== */
.b-close {
    display   : flex;
    margin-top: var(--v-space-8);
}

.b-footer {
    border-top: 1px solid var(--v-border);
    background: var(--v-surface);
}

.b-footer-in {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    flex-wrap      : wrap;
    gap            : var(--v-space-4);
    padding-block  : var(--v-space-6);
    font-size      : var(--v-text-sm);
    color          : var(--v-text-muted);
}

.b-footer-in a {
    color          : var(--v-text-muted);
    text-decoration: none;
    transition     : color var(--v-duration) var(--v-ease);
}

.b-footer-in a:hover { color: var(--v-primary); }

.b-footer-links {
    display  : flex;
    flex-wrap: wrap;
    gap      : var(--v-space-5);
}

/* ==========================================================================
   11. Herramienta interna (generador de enlaces)
   ========================================================================== */
.b-tool-title {
    margin     : 0 0 var(--v-space-2);
    font-size  : var(--v-text-xl);
    font-weight: 800;
    color      : var(--v-fg);
}

.b-tool-hint {
    margin   : 0 0 var(--v-space-5);
    font-size: var(--v-text-sm);
    color    : var(--v-text-muted);
}

/* Enlace generado: una URL larga debe partirse, no salirse de la tarjeta. */
.b-url {
    margin       : 0 0 var(--v-space-4);
    padding      : var(--v-space-4) var(--v-space-5);
    border-radius: var(--v-radius);
    border       : 1px solid var(--v-border);
    background   : var(--v-surface-2);
    color        : var(--v-fg);
    font-family  : var(--v-font-mono);
    font-size    : var(--v-text-xs);
    line-height  : 1.7;
    overflow-wrap: anywhere;
    word-break   : break-word;
}

.b-btns {
    display  : flex;
    flex-wrap: wrap;
    gap      : var(--v-space-3);
}

.b-mono {
    font-family: var(--v-font-mono);
    font-size  : var(--v-text-xs);
    line-height: 1.7;
    min-height : 120px;
}

/* ==========================================================================
   12. Animaciones
   ========================================================================== */

/* animate.css corre con animation-fill-mode: both, así que al terminar la
   entrada su transform se queda puesto y le gana al :hover de las tarjetas.
   El script de la página limpia las clases al terminar; estas reglas son la
   red de seguridad, porque un !important sí le gana a una animación. */
.tf-card-box.wow:hover { transform: translateY(-10px) !important; }
.b-panel.wow:hover     { transform: none !important; }

/* Sin animación cuando el sistema pide menos movimiento: WOW no se carga,
   así que el bloque nunca se esconde, pero se deja explícito. */
@media (prefers-reduced-motion: reduce) {
    .wow {
        visibility: visible !important;
        animation : none !important;
    }
}