/*
 * Tema de TuriFlota sobre Bootstrap 5.3.3 (cargado por CDN en el layout, igual que SmartTravelX).
 * Aquí van las variables de Bootstrap con los colores de la marca y las piezas tf-* que Bootstrap no trae.
 */

:root {
    --tf-forest: #0c3d32;
    --tf-forest-rgb: 12, 61, 50;
    --tf-forest-deep: #07261f;
    --tf-leaf: #1f7a5c;
    --tf-leaf-rgb: 31, 122, 92;
    --tf-gold: #d4a017;
    --tf-gold-rgb: 212, 160, 23;
    --tf-gold-bright: #e8b84a;
    --tf-sand: #f6f1e8;
    --tf-sand-rgb: 246, 241, 232;
    --tf-mist: #e7efea;
    --tf-ink: #14221c;
    --tf-ink-rgb: 20, 34, 28;
    --tf-font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
    --tf-ring: inset 0 0 0 1px rgba(var(--tf-forest-rgb), 0.1);
    --tf-ring-strong: inset 0 0 0 1px rgba(var(--tf-forest-rgb), 0.18);

    --bs-body-font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --bs-body-font-size: 1rem;
    --bs-body-color: var(--tf-ink);
    --bs-body-color-rgb: var(--tf-ink-rgb);
    --bs-body-bg: var(--tf-sand);
    --bs-body-bg-rgb: var(--tf-sand-rgb);
    --bs-primary: var(--tf-forest);
    --bs-primary-rgb: var(--tf-forest-rgb);
    --bs-success: var(--tf-leaf);
    --bs-success-rgb: var(--tf-leaf-rgb);
    --bs-warning: var(--tf-gold);
    --bs-warning-rgb: var(--tf-gold-rgb);
    --bs-link-color: var(--tf-leaf);
    --bs-link-color-rgb: var(--tf-leaf-rgb);
    --bs-link-hover-color: var(--tf-forest);
    --bs-link-hover-color-rgb: var(--tf-forest-rgb);
    --bs-border-color: rgba(var(--tf-forest-rgb), 0.15);
    --bs-border-color-translucent: rgba(var(--tf-forest-rgb), 0.1);
    --bs-border-radius: 1rem;
    --bs-border-radius-sm: 0.75rem;
    --bs-border-radius-lg: 1.5rem;
    --bs-border-radius-xl: 1.75rem;
    --bs-border-radius-xxl: 2rem;
    --bs-focus-ring-color: rgba(var(--tf-leaf-rgb), 0.25);
    --bs-emphasis-color: var(--tf-ink);
    --bs-secondary-color: rgba(var(--tf-ink-rgb), 0.6);
}

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a,
a:hover,
a:focus,
a:visited {
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0;
    font-weight: 500;
}

p {
    margin-bottom: 0;
}

ul, ol, dl, dd {
    margin-bottom: 0;
}

img, svg {
    vertical-align: middle;
}

select,
input[type='date'],
input[type='month'],
input[type='time'],
input[type='number'] {
    color-scheme: light;
}

/*
 * Ajustes al reset de Bootstrap para que los elementos sin clase se comporten como
 * en el diseño original (listas sin viñetas, títulos que heredan tamaño, enlaces que
 * heredan color, botones sin fondo del navegador).
 */
ol,
ul {
    padding-left: 0;
    list-style: none;
}
h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    line-height: inherit;
}
a,
a:hover {
    color: inherit;
}
button {
    padding: 0;
    border: 0;
    background-color: transparent;
    color: inherit;
}
legend {
    float: none;
    width: auto;
    margin-bottom: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}
label {
    display: inline;
}
img,
video {
    max-width: 100%;
    height: auto;
}
img,
svg,
video,
canvas {
    display: block;
}
svg {
    vertical-align: middle;
}
.d-inline svg,
.d-inline-flex > svg {
    display: block;
}
pre {
    margin-bottom: 0;
}

/* El JS compartido muestra y oculta piezas con la clase hidden. */
.hidden {
    display: none !important;
}

/* ---------- Tipografía ---------- */
.font-display { font-family: var(--tf-font-display); }
.fs-display-1 { font-size: clamp(2.5rem, 5vw, 3.35rem); line-height: 1.05; }
.fs-display-2 { font-size: clamp(1.875rem, 3.5vw, 2.25rem); line-height: 1.15; }
.fs-display-3 { font-size: 1.875rem; line-height: 1.2; }
.fs-xl { font-size: 1.25rem; line-height: 1.6; }
.fs-lg { font-size: 1.125rem; line-height: 1.6; }
.fs-sm { font-size: 0.875rem; line-height: 1.45; }
.fs-xs { font-size: 0.75rem; line-height: 1.35; }
.fs-11 { font-size: 11px; line-height: 1.3; }
.fs-10 { font-size: 10px; line-height: 1.2; }
.lh-snug { line-height: 1.375; }
.lh-relaxed { line-height: 1.625; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wide { letter-spacing: 0.04em; }
.eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tf-leaf);
}

/* ---------- Colores de marca ---------- */
.text-forest { color: var(--tf-forest) !important; }
.text-forest-60 { color: rgba(var(--tf-forest-rgb), 0.6) !important; }
.text-leaf { color: var(--tf-leaf) !important; }
.text-gold { color: var(--tf-gold) !important; }
.text-ink { color: var(--tf-ink) !important; }
.text-ink-80 { color: rgba(var(--tf-ink-rgb), 0.8) !important; }
.text-ink-70 { color: rgba(var(--tf-ink-rgb), 0.7) !important; }
.text-ink-60 { color: rgba(var(--tf-ink-rgb), 0.6) !important; }
.text-ink-50 { color: rgba(var(--tf-ink-rgb), 0.5) !important; }
.text-ink-45 { color: rgba(var(--tf-ink-rgb), 0.45) !important; }
.text-white-75 { color: rgba(255, 255, 255, 0.75) !important; }
.text-white-60 { color: rgba(255, 255, 255, 0.6) !important; }

.bg-forest { background-color: var(--tf-forest) !important; }
.bg-forest-deep { background-color: var(--tf-forest-deep) !important; }
.bg-leaf { background-color: var(--tf-leaf) !important; }
.bg-gold { background-color: var(--tf-gold) !important; }
.bg-sand { background-color: var(--tf-sand) !important; }
.bg-cream { background-color: #f4f1ea !important; }
.bg-mist { background-color: var(--tf-mist) !important; }

.hover-text-forest:hover { color: var(--tf-forest) !important; }
.hover-bg-sand:hover { background-color: var(--tf-sand) !important; }
.hover-bg-mist:hover { background-color: var(--tf-mist) !important; }
.hover-underline:hover { text-decoration: underline !important; }

/* ---------- Bordes, radios y anillos ---------- */
.border-forest-10 { border-color: rgba(var(--tf-forest-rgb), 0.1) !important; }
.border-forest-15 { border-color: rgba(var(--tf-forest-rgb), 0.15) !important; }
.ring { box-shadow: var(--tf-ring); }
.ring-strong { box-shadow: var(--tf-ring-strong); }
.rounded-tf { border-radius: 1rem !important; }
.rounded-tf-lg { border-radius: 1.5rem !important; }
.rounded-tf-xl { border-radius: 1.75rem !important; }

/* ---------- Tamaños de iconos ---------- */
.icon-4 { width: 1rem; height: 1rem; flex-shrink: 0; }
.icon-5 { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.icon-6 { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--tf-forest);
    position: relative;
    transition: background-color 0.15s ease;
}
.icon-btn:hover { background-color: var(--tf-sand); }

/* ---------- Contenedor como el max-w-6xl actual ---------- */
.tf-container {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: 1rem;
}
@media (min-width: 576px) {
    .tf-container { padding-inline: 1.5rem; }
}

/* ---------- Botones ---------- */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-border-radius: 50rem;
    --bs-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--tf-leaf-rgb), 0.25);
}
.btn-lg {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-font-size: 0.875rem;
}
.btn-forest {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tf-forest);
    --bs-btn-border-color: var(--tf-forest);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tf-forest-deep);
    --bs-btn-hover-border-color: var(--tf-forest-deep);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tf-forest-deep);
    --bs-btn-active-border-color: var(--tf-forest-deep);
    --bs-btn-disabled-bg: var(--tf-forest);
    --bs-btn-disabled-border-color: var(--tf-forest);
    --bs-btn-disabled-color: #fff;
}
.btn-gold {
    --bs-btn-color: var(--tf-forest-deep);
    --bs-btn-bg: var(--tf-gold);
    --bs-btn-border-color: var(--tf-gold);
    --bs-btn-hover-color: var(--tf-forest-deep);
    --bs-btn-hover-bg: var(--tf-gold-bright);
    --bs-btn-hover-border-color: var(--tf-gold-bright);
    --bs-btn-active-bg: var(--tf-gold-bright);
    --bs-btn-active-border-color: var(--tf-gold-bright);
    --bs-btn-active-color: var(--tf-forest-deep);
}
.btn-outline-forest {
    --bs-btn-color: var(--tf-forest);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: rgba(var(--tf-forest-rgb), 0.15);
    --bs-btn-hover-color: var(--tf-forest);
    --bs-btn-hover-bg: var(--tf-sand);
    --bs-btn-hover-border-color: rgba(var(--tf-forest-rgb), 0.2);
    --bs-btn-active-color: var(--tf-forest);
    --bs-btn-active-bg: var(--tf-mist);
    --bs-btn-active-border-color: rgba(var(--tf-forest-rgb), 0.2);
}
.btn-ghost {
    --bs-btn-color: var(--tf-forest);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--tf-forest);
    --bs-btn-hover-bg: var(--tf-sand);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--tf-mist);
    --bs-btn-active-border-color: transparent;
    --bs-btn-font-weight: 500;
}
.btn-link-leaf {
    padding: 0;
    border: 0;
    background: none;
    color: var(--tf-leaf);
    font-weight: 600;
    font-size: 0.875rem;
}
.btn-link-leaf:hover { text-decoration: underline; color: var(--tf-leaf); }

/* ---------- Formularios ---------- */
.form-label {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tf-forest);
}
.form-control,
.form-select {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--tf-ink);
    background-color: var(--tf-sand);
    border-color: rgba(var(--tf-forest-rgb), 0.15);
    border-radius: 1rem;
}
.form-control::placeholder { color: rgba(var(--tf-ink-rgb), 0.4); }
.form-control:focus,
.form-select:focus {
    background-color: var(--tf-sand);
    border-color: var(--tf-leaf);
    box-shadow: none;
}
.form-control-white,
.form-control-white:focus { background-color: #fff; }
.form-check-input {
    border-color: rgba(var(--tf-forest-rgb), 0.3);
}
.form-check-input:checked {
    background-color: var(--tf-forest);
    border-color: var(--tf-forest);
}
.form-check-input:focus {
    border-color: var(--tf-leaf);
    box-shadow: 0 0 0 0.2rem rgba(var(--tf-leaf-rgb), 0.2);
}

/* ---------- Tarjetas y chips ---------- */
.tf-card {
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: var(--tf-ring);
}
.tf-card-xl { border-radius: 1.75rem; }
.tf-panel-sand {
    background: #f4f1ea;
    border-radius: 1.75rem;
}
.tf-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.375rem 0.75rem;
    border-radius: 50rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--tf-forest);
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(var(--tf-forest-rgb), 0.15);
}
.tf-chip.is-active {
    color: #fff;
    background: var(--tf-forest);
    box-shadow: none;
}
.tf-alert {
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    font-size: 0.875rem;
}
.tf-alert-error { background: #fef2f2; color: #b91c1c; }
.tf-alert-info { background: var(--tf-mist); color: var(--tf-forest); font-weight: 500; }

/* ---------- Cabecera ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid rgba(var(--tf-forest-rgb), 0.1);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    transition: box-shadow 0.2s ease;
}
.site-header.is-scrolled {
    box-shadow: 0 8px 24px rgba(var(--tf-forest-rgb), 0.08);
}
.site-header-bar { height: 4rem; }
@media (min-width: 576px) {
    .site-header-bar { height: 4.5rem; }
}
.brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 1rem;
    background: var(--tf-forest);
    color: var(--tf-gold);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.nav-gateway-link {
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid transparent;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(var(--tf-ink-rgb), 0.7);
}
.nav-gateway-link:hover { color: var(--tf-forest); }
.nav-gateway-link.is-active { border-color: var(--tf-forest); color: var(--tf-forest); }
.nav-pill-link {
    padding: 0.5rem 0.875rem;
    border-radius: 50rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(var(--tf-ink-rgb), 0.8);
}
.nav-pill-link:hover { background: var(--tf-sand); color: var(--tf-forest); }
.nav-pill-link.is-active { background: var(--tf-forest); color: #fff; }
.saved-count {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 50rem;
    background: var(--tf-gold);
    color: var(--tf-forest);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}
.js-saved-toggle[aria-pressed="true"] { background-color: var(--tf-forest); color: #fff; }
.js-saved-toggle[aria-pressed="true"] .js-saved-count { background: var(--tf-gold); color: var(--tf-forest); }
.mobile-menu-link {
    display: block;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tf-ink);
}
.mobile-menu-link:hover { background: #fff; color: var(--tf-ink); }

/* ---------- Pie ---------- */
.site-footer {
    margin-top: 2.5rem;
    border-top: 1px solid rgba(var(--tf-forest-rgb), 0.1);
    background: var(--tf-sand);
    color: var(--tf-forest);
}
.site-footer a { color: rgba(var(--tf-ink-rgb), 0.7); }
.site-footer a:hover { color: var(--tf-forest); }

/* ---------- Enlace para saltar al contenido ---------- */
.skip-link:focus {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 1050;
    padding: 0.5rem 1rem;
    border-radius: 50rem;
    background: #fff;
}

/* ---------- Selector de idioma ---------- */
.lang-switcher { position: relative; }
.lang-switcher-toggle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: 50rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tf-forest);
    list-style: none;
    cursor: pointer;
}
.lang-switcher-toggle:hover { background: var(--tf-sand); }
.lang-switcher-menu {
    position: absolute;
    right: 0;
    z-index: 1040;
    width: 9rem;
    margin-top: 0.25rem;
    padding: 0.25rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), var(--tf-ring);
}
.lang-switcher-item {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tf-ink);
}
.lang-switcher-item:hover { background: var(--tf-sand); color: var(--tf-ink); }
.lang-switcher-item.is-active { background: var(--tf-sand); color: var(--tf-forest); }

/* ---------- Utilidades extra ---------- */
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important; }
.py-lg-6 { }
@media (min-width: 992px) {
    .py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
}
.tf-underline-link {
    text-decoration: underline !important;
    text-decoration-color: rgba(var(--tf-forest-rgb), 0.3) !important;
    text-underline-offset: 4px;
}
.tf-underline-link:hover { text-decoration-color: var(--tf-forest) !important; color: var(--tf-forest); }
.tf-link-leaf:hover { color: var(--tf-leaf) !important; }

/* ---------- Portada (landing) ---------- */
.tf-hero-grid {
    display: grid;
    align-items: center;
    gap: 2.5rem;
}
@media (min-width: 992px) {
    .tf-hero-grid { grid-template-columns: 1.15fr 0.85fr; }
}
.tf-hero-title {
    max-width: 36rem;
    font-size: 2.25rem;
    line-height: 1.08;
    font-weight: 500;
}
@media (min-width: 576px) { .tf-hero-title { font-size: 3rem; } }
@media (min-width: 992px) { .tf-hero-title { font-size: 3.35rem; } }
.tf-hero-art { position: relative; height: 30rem; }
.tf-hero-ring { position: absolute; border-radius: 50%; }
.tf-hero-portrait {
    position: absolute;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 4px #fff;
}
.tf-hero-portrait.shadow-xl { box-shadow: 0 0 0 4px #fff, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important; }
.tf-hero-portrait.shadow-lg { box-shadow: 0 0 0 4px #fff, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important; }
.tf-portrait-sm {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 4px #fff, 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}
.tf-option-card {
    padding: 1.75rem;
    border-radius: 1.75rem;
    background: #f4f1ea;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tf-option-card:hover {
    color: inherit;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
@media (min-width: 576px) { .tf-option-card { padding: 2.25rem; } }
.tf-option-title { font-size: 2.25rem; font-weight: 500; }
@media (min-width: 576px) { .tf-option-title { font-size: 3rem; } }
.tf-logo-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 10rem;
    height: 5rem;
    padding: 0 1rem;
    border-radius: 1rem;
    background: #f4f1ea;
}
.tf-logo-card img { max-height: 3rem; max-width: 8.5rem; object-fit: contain; }

/* ---------- Avatar ---------- */
.tf-avatar {
    display: inline-flex;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    background: var(--tf-gold);
}
.tf-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.tf-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 600;
    color: var(--tf-forest-deep);
}
.avatar-5 { width: 1.25rem; height: 1.25rem; font-size: 9px; }
.avatar-6 { width: 1.5rem; height: 1.5rem; font-size: 10px; }
.avatar-7 { width: 1.75rem; height: 1.75rem; font-size: 10px; }
.avatar-8 { width: 2rem; height: 2rem; font-size: 0.75rem; }
.avatar-10 { width: 2.5rem; height: 2.5rem; font-size: 0.75rem; }
.avatar-12 { width: 3rem; height: 3rem; font-size: 0.875rem; }
.avatar-14 { width: 3.5rem; height: 3.5rem; font-size: 0.875rem; }
.avatar-16 { width: 4rem; height: 4rem; font-size: 1rem; }
.avatar-20 { width: 5rem; height: 5rem; font-size: 1.25rem; }
.avatar-ring { box-shadow: 0 0 0 2px #fff; }
.avatar-ring-4 { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2); }

/* ---------- Estrellas ---------- */
.tf-stars { display: inline-flex; align-items: center; gap: 0.125rem; line-height: 1; }
.tf-stars-sm { font-size: 1rem; }
.tf-stars-md { font-size: 1.25rem; }
.tf-stars-lg { font-size: 1.5rem; }
.tf-star-off { color: rgba(var(--tf-forest-rgb), 0.22); }
.tf-star-off-light { color: rgba(255, 255, 255, 0.3); }
.tf-star-btn {
    padding: 0;
    border: 0;
    background: none;
    line-height: 1;
    transition: transform 0.15s ease;
}
.tf-star-btn:hover { transform: scale(1.1); }

/* ---------- Botón de vista (cuadrícula / lista) ---------- */
.tf-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--tf-forest);
    box-shadow: inset 0 0 0 1px rgba(var(--tf-forest-rgb), 0.15);
}
.tf-view-btn.is-on { background: var(--tf-forest); color: #fff; box-shadow: none; }

/* ---------- Tarjetas de servicio y de trabajo ---------- */
.tf-listing-card,
.tf-job-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(var(--tf-forest-rgb), 0.1);
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tf-listing-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.tf-job-card { display: flex; flex-direction: column; height: 100%; }
.tf-card-media {
    position: relative;
    height: 12rem;
    overflow: hidden;
    background: var(--tf-mist);
}
.tf-card-media-job { height: 14rem; }
@media (min-width: 576px) { .tf-card-media-job { height: 12rem; } }
.tf-card-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.tf-listing-card:hover .tf-card-media-img { transform: scale(1.05); }
.tf-card-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(var(--tf-forest-rgb), 0.8), rgba(var(--tf-forest-rgb), 0.1), rgba(var(--tf-forest-rgb), 0.2));
}
.tf-card-badge {
    position: absolute;
    padding: 0.25rem 0.625rem;
    border-radius: 50rem;
    background: rgba(255, 255, 255, 0.95);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tf-forest);
}
.tf-card-badge-gold { background: var(--tf-gold); color: var(--tf-forest-deep); }
.tf-card-rating {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 50rem;
    background: rgba(var(--tf-forest-rgb), 0.9);
    font-size: 0.75rem;
    font-weight: 500;
    color: #fff;
}
.tf-card-company {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    color: #fff;
}
.tf-save-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--tf-forest);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.tf-save-btn[aria-pressed="true"] { background: var(--tf-gold); }
.tf-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 1rem 1rem;
}
.tf-card-title {
    font-family: var(--tf-font-display);
    font-size: 1.125rem;
    line-height: 1.375;
    color: var(--tf-forest);
    transition: color 0.15s ease;
}
.tf-listing-card:hover .tf-card-title { color: var(--tf-leaf); }
.tf-card-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(var(--tf-forest-rgb), 0.1);
}
.tf-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 50rem;
    background: var(--tf-mist);
    font-size: 11px;
    font-weight: 500;
    color: var(--tf-forest);
}
.tf-tag-outline { background: transparent; border: 1px solid rgba(var(--tf-forest-rgb), 0.15); color: rgba(var(--tf-ink-rgb), 0.7); }
.tf-tag-sand { background: var(--tf-sand); }
.tf-tag-gold { background: var(--tf-gold); color: var(--tf-forest-deep); }
.tf-pill-gold {
    display: inline-flex;
    padding: 0.375rem 0.75rem;
    border-radius: 50rem;
    background: rgba(var(--tf-gold-rgb), 0.15);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tf-forest);
}
.tf-clamp-1,
.tf-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tf-clamp-1 { -webkit-line-clamp: 1; }
.tf-clamp-2 { -webkit-line-clamp: 2; }
.tf-list-only { display: none; }

/* ---------- Catálogo en modo lista ---------- */
html.is-listing-list .js-listing-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.75rem !important;
}
html.is-listing-list .js-listing-grid > [data-listing] > article,
html.is-listing-list .js-listing-grid .js-job-open {
    display: block;
    height: auto;
    padding: 0.75rem 0.9rem 0.65rem;
    transform: none;
}
html.is-listing-list .js-listing-grid .js-job-open { padding: 0; }
html.is-listing-list .js-listing-grid .js-card-media,
html.is-listing-list .js-listing-grid article > a.js-listing-open:first-child {
    float: right;
    width: 4.25rem;
    height: 4.25rem;
    min-height: 0;
    margin: 0 0 0.35rem 0.85rem;
    overflow: hidden;
    border-radius: 0.9rem;
}
html.is-listing-list .js-listing-grid article > a.js-listing-open:first-child > .js-card-media {
    float: none;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
}
html.is-listing-list .js-card-body { display: block; padding: 0; }
html.is-listing-list .js-list-only { display: flex; }
html.is-listing-list .js-list-hide { display: none; }
html.is-listing-list .js-card-body h3,
html.is-listing-list .js-card-summary {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
html.is-listing-list .js-card-body .mt-1,
html.is-listing-list .js-card-body .mt-2,
html.is-listing-list .js-card-body .mb-1,
html.is-listing-list .js-card-tags {
    margin-top: 0.2rem !important;
    margin-bottom: 0 !important;
}
html.is-listing-list .js-card-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 0.35rem;
    padding-top: 0;
    border-top-width: 0;
}
html.is-listing-list .js-card-rates {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.85rem;
}
html.is-listing-list .js-card-rates p { margin: 0 !important; }
html.is-listing-list .js-listing-grid article > a.js-listing-open:first-child { margin-left: 0.45rem; }
html.is-listing-list .js-save-listing {
    position: static;
    float: right;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0.875rem 0 0.35rem 0.65rem;
}
html.is-listing-list .js-save-listing svg { height: 1.15rem; width: 1.15rem; }

/* ---------- Filtro lateral del catálogo ---------- */
@media (min-width: 768px) {
    .js-search-filter-panel.hidden { display: block !important; }
}
.tf-filter-clear {
    padding: 0;
    border: 0;
    background: none;
    font-size: 11px;
    color: rgba(var(--tf-ink-rgb), 0.5);
    text-decoration: underline;
    text-decoration-color: rgba(var(--tf-ink-rgb), 0.3);
    text-underline-offset: 2px;
}
.tf-filter-clear:hover { color: var(--tf-forest); }
.tf-filter-group {
    margin-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(var(--tf-forest-rgb), 0.1);
}
.tf-filter-legend {
    float: none;
    width: auto;
    margin-bottom: 0.75rem;
    font-size: 11px;
    font-weight: 700;
    color: var(--tf-forest);
}
.tf-filter-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 13px;
    color: rgba(var(--tf-ink-rgb), 0.7);
    cursor: pointer;
}
.tf-filter-check {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    accent-color: var(--tf-forest);
}
.tf-input-sm {
    padding: 0.5rem 0.75rem;
    font-size: 13px;
    color: var(--tf-forest);
    border-radius: 0.75rem;
}
.tf-range { accent-color: var(--tf-forest); }
.tf-range::-webkit-slider-thumb { background: var(--tf-forest); }
.tf-range::-moz-range-thumb { background: var(--tf-forest); }
.tf-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 0.2rem rgba(var(--tf-leaf-rgb), 0.25); }
.tf-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--tf-forest);
    box-shadow: 0 10px 15px -3px rgba(var(--tf-forest-rgb), 0.3), 0 4px 6px -4px rgba(var(--tf-forest-rgb), 0.3);
}
.tf-filter-toggle.is-on { background: var(--tf-forest); color: #fff; }

/* ---------- Catálogo ---------- */
.tf-page-title { font-size: 2.25rem; line-height: 1.15; font-weight: 500; }
.tf-search-bar {
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 1.5rem;
    background: #fff;
}
@media (min-width: 576px) {
    .tf-search-bar { grid-template-columns: 1fr 1fr auto; padding: 1rem; }
}
.tf-search-field {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    background: var(--tf-sand);
}
.tf-search-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(var(--tf-forest-rgb), 0.7);
}
.tf-search-input {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tf-ink);
}
.tf-search-submit { --bs-btn-border-radius: 1rem; padding: 1rem 1.5rem; }
.tf-chip-md { padding: 0.375rem 0.875rem; font-size: 0.875rem; }
.tf-chip:hover { color: var(--tf-forest); }
.tf-chip.is-active:hover { color: #fff; }
.tf-search-keyword { position: relative; display: block; flex: 1 1 16rem; min-width: 16rem; }
.tf-search-keyword-icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: rgba(var(--tf-forest-rgb), 0.45);
    pointer-events: none;
}
.tf-search-keyword-input {
    width: 100%;
    padding: 0.375rem 0.75rem 0.375rem 2.25rem;
    border: 0;
    border-radius: 50rem;
    outline: 0;
    background: #fff;
    font-size: 0.875rem;
    color: var(--tf-forest);
    box-shadow: inset 0 0 0 1px rgba(var(--tf-forest-rgb), 0.15);
}
.tf-search-keyword-input::placeholder { color: rgba(var(--tf-ink-rgb), 0.4); }
.tf-search-keyword-input:focus { box-shadow: inset 0 0 0 2px rgba(var(--tf-forest-rgb), 0.3); }
@media (min-width: 768px) {
    .tf-catalog-layout {
        display: grid;
        grid-template-columns: 13.25rem minmax(0, 1fr);
        align-items: start;
        gap: 2rem;
    }
}
.tf-card-grid {
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 576px) { .tf-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .tf-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tf-empty {
    grid-column: 1 / -1;
    padding: 3.5rem 1.5rem;
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: var(--tf-ring);
    text-align: center;
    font-size: 0.875rem;
    color: rgba(var(--tf-ink-rgb), 0.55);
}

/* ---------- Calendario del formulario de contratación (lo dibuja el JS) ---------- */
.tf-date-label { font-weight: 500; color: #0c3d32; }
.tf-date-label.is-empty { font-weight: 400; color: rgba(20, 34, 28, 0.45); }
.tf-cal-pad { height: 2.25rem; }
.tf-cal-day {
    width: 100%;
    height: 2.25rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    color: #0c3d32;
    transition: background-color 0.15s ease;
}
.tf-cal-day:hover { background: #e7efea; }
.tf-cal-day.is-selected { background: #0c3d32; color: #fff; }
.tf-cal-day.is-blocked {
    cursor: not-allowed;
    background: rgba(12, 61, 50, 0.1);
    color: rgba(12, 61, 50, 0.35);
    text-decoration: line-through;
}
.tf-cal-day.is-past { cursor: not-allowed; background: transparent; color: rgba(20, 34, 28, 0.25); }
.tf-date-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(var(--tf-forest-rgb), 0.15);
    border-radius: 1rem;
    background: var(--tf-sand);
    font-size: 0.875rem;
    text-align: left;
    transition: border-color 0.15s ease;
}
.tf-date-toggle:hover,
.tf-date-toggle:focus { border-color: var(--tf-leaf); outline: 0; }
.tf-cal {
    padding: 0.75rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: var(--tf-ring);
}
.tf-cal .js-hire-date-month { font-family: var(--tf-font-display); font-size: 1rem; color: var(--tf-forest); }
.tf-cal-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--tf-forest);
}
.tf-cal-nav:hover { background: var(--tf-mist); }
.tf-cal-weekdays,
.tf-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
}
.tf-cal-weekdays {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(var(--tf-forest-rgb), 0.45);
}
.tf-cal-grid { margin-top: 0.25rem; }
.tf-cal-note { margin-top: 0.75rem; font-size: 11px; line-height: 1.6; color: rgba(var(--tf-ink-rgb), 0.55); }
.tf-date-hint { margin-top: 0.375rem; font-size: 0.75rem; color: #b91c1c; }

/* ---------- Ficha del servicio ---------- */
.tf-detail-title { font-size: 2.25rem; line-height: 1.1; font-weight: 500; }
@media (min-width: 576px) { .tf-detail-title { font-size: 3rem; } }
.tf-detail-layout { display: grid; gap: 2rem; }
@media (min-width: 992px) {
    .tf-detail-layout { grid-template-columns: minmax(0, 1.6fr) 22rem; }
    .tf-detail-aside { position: sticky; top: 6rem; align-self: start; }
}
.tf-gallery { display: grid; gap: 0.75rem; }
@media (min-width: 768px) { .tf-gallery.has-thumbs { grid-template-columns: 1.6fr 0.8fr; } }
.tf-gallery-main { width: 100%; height: 18rem; border-radius: 1.5rem; object-fit: cover; }
@media (min-width: 576px) { .tf-gallery-main { height: 26rem; } }
.tf-gallery-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 768px) { .tf-gallery-thumbs { grid-template-columns: minmax(0, 1fr); } }
.tf-gallery-thumb {
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 1.25rem;
    background: none;
    box-shadow: 0 0 0 2px transparent;
    transition: box-shadow 0.15s ease;
}
.tf-gallery-thumb:hover { box-shadow: 0 0 0 2px var(--tf-forest); }
.tf-gallery-thumb img { width: 100%; height: 9rem; object-fit: cover; }
@media (min-width: 768px) { .tf-gallery-thumb img { height: 12.4rem; } }
.tf-gallery-more {
    align-items: center;
    justify-content: center;
    border-radius: 1.25rem;
    background: rgba(var(--tf-forest-rgb), 0.8);
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
}
.tf-gallery-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18rem;
    border-radius: 1.5rem;
    background: var(--tf-mist);
    font-size: 0.875rem;
    color: rgba(var(--tf-ink-rgb), 0.45);
}
.tf-section-card { padding: 1.5rem; }
@media (min-width: 576px) { .tf-section-card { padding: 2rem; } }
.tf-section-title { font-size: 1.5rem; line-height: 1.3; font-weight: 500; }
.tf-fact { padding: 0.75rem 1rem; border-radius: 1rem; background: var(--tf-sand); }
.tf-fact-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(var(--tf-forest-rgb), 0.6);
}
.tf-fact-value { margin: 0.25rem 0 0; font-size: 0.875rem; font-weight: 500; color: var(--tf-forest); }
.tf-price-lg { font-size: 2.25rem; line-height: 1.2; }
.tf-stack-3 > * + * { margin-top: 0.75rem; }
.tf-field-label {
    display: block;
    float: none;
    width: auto;
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(var(--tf-forest-rgb), 0.7);
}
.tf-hire-options { display: grid; gap: 0.5rem; }
.tf-hire-option { cursor: pointer; }
.tf-hire-option-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0.625rem 0.25rem;
    border: 1px solid rgba(var(--tf-forest-rgb), 0.15);
    border-radius: 1rem;
    background: var(--tf-sand);
    text-align: center;
    transition: all 0.15s ease;
}
.tf-hire-option input:checked + .tf-hire-option-box {
    border-color: var(--tf-forest);
    background: var(--tf-mist);
    box-shadow: 0 0 0 2px rgba(var(--tf-forest-rgb), 0.2);
}
.tf-hire-option input:focus-visible + .tf-hire-option-box { outline: 2px solid var(--tf-leaf); }
.tf-policies-box {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(var(--tf-forest-rgb), 0.15);
    border-radius: 1rem;
    background: var(--tf-sand);
    cursor: pointer;
}
@media (min-width: 992px) { .tf-card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Hoja (modal sencillo) que se abre desde abajo en móvil y centrada en escritorio. */
.tf-sheet {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
}
@media (min-width: 576px) { .tf-sheet { align-items: center; } }
.tf-sheet-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(var(--tf-forest-rgb), 0.5);
}
.tf-sheet-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 32rem;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.5rem;
    border-radius: 1.75rem;
    background: #fff;
}
@media (min-width: 576px) { .tf-sheet-panel { padding: 2rem; } }

/* Texto enriquecido (descripciones y políticas) */
.rich-text { font-size: 0.875rem; line-height: 1.625; color: rgba(var(--tf-ink-rgb), 0.75); }
.rich-text a { color: var(--tf-leaf); text-decoration: underline; }
.rich-text ol { margin-top: 0.5rem; padding-left: 1.25rem; list-style: decimal; }
.rich-text ul { margin-top: 0.5rem; padding-left: 1.25rem; list-style: disc; }
.rich-text p + p { margin-top: 0.75rem; }
.rich-text strong { font-weight: 600; }
.tf-comment { padding: 1.25rem 0; }
.tf-comment + .tf-comment { border-top: 1px solid rgba(var(--tf-forest-rgb), 0.1); }
.tf-comment:first-child { padding-top: 0; }

/* ---------- Perfil público ---------- */
.tf-avatar-profile { width: 5rem; height: 5rem; }
@media (min-width: 576px) { .tf-avatar-profile { width: 6rem; height: 6rem; } }
.tf-rate-box {
    padding: 1rem 1.25rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    backdrop-filter: blur(8px);
}
.tf-profile-layout { display: grid; gap: 2rem; }
@media (min-width: 992px) { .tf-profile-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
@media (min-width: 576px) { .tf-card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .tf-card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Trabajos ---------- */
.tf-jobs-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    background: var(--tf-forest);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
@media (min-width: 576px) { .tf-jobs-hero { border-radius: 2rem; } }
.tf-jobs-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tf-jobs-hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--tf-forest), rgba(var(--tf-forest-rgb), 0.8), rgba(var(--tf-forest-rgb), 0.45));
}
@media (min-width: 576px) {
    .tf-jobs-hero-shade { background: linear-gradient(to right, rgba(var(--tf-forest-rgb), 0.92), rgba(var(--tf-forest-rgb), 0.78), rgba(var(--tf-forest-rgb), 0.3)); }
}
.tf-jobs-hero-body { position: relative; padding: 2rem 1.25rem; }
@media (min-width: 576px) { .tf-jobs-hero-body { padding: 3.5rem 2.5rem; } }
.tf-jobs-hero-title { max-width: 42rem; font-size: 1.875rem; line-height: 1.08; font-weight: 500; }
@media (min-width: 576px) { .tf-jobs-hero-title { font-size: 3rem; } }
.tf-jobs-search {
    position: relative;
    z-index: 2;
    max-width: 64rem;
    margin: -1.75rem auto 0;
    padding: 0.75rem;
    border-radius: 1.35rem;
    background: #fff;
    box-shadow: 0 20px 25px -5px rgba(var(--tf-forest-rgb), 0.1), 0 8px 10px -6px rgba(var(--tf-forest-rgb), 0.1);
}
@media (min-width: 576px) { .tf-jobs-search { margin-top: -2rem; padding: 1rem; border-radius: 1.6rem; } }
.tf-jobs-search-grid { display: grid; gap: 0.75rem; }
@media (min-width: 768px) { .tf-jobs-search-grid { grid-template-columns: 1fr 1fr auto; } }
.tf-jobs-section { padding-bottom: 7rem; }
@media (min-width: 768px) { .tf-jobs-section { padding-bottom: 4rem; } }
.tf-card-grid-jobs { gap: 1rem; }
@media (min-width: 576px) { .tf-card-grid-jobs { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 768px) { .tf-card-grid-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 1200px) { .tf-card-grid-jobs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tf-job-detail-section { padding-bottom: 4rem; }
@media (min-width: 576px) { .tf-job-detail-section { padding-bottom: 2.5rem; } }
.tf-job-detail { max-width: 48rem; margin-inline: auto; }
@media (min-width: 576px) { .tf-job-detail { padding: 2rem 1.5rem 0; } }
.tf-job-detail-card { overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
@media (min-width: 576px) { .tf-job-detail-card { border-radius: 1.75rem; box-shadow: var(--tf-ring), 0 1px 2px rgba(0, 0, 0, 0.05); } }
.tf-job-detail-img { width: 100%; height: 16rem; object-fit: cover; }
@media (min-width: 576px) { .tf-job-detail-img { height: 20rem; } }
.tf-job-detail-body { padding: 1.25rem 1rem; }
@media (min-width: 576px) { .tf-job-detail-body { padding: 2rem; } }
.tf-job-detail-title { font-size: 1.875rem; line-height: 1.25; font-weight: 500; }
@media (min-width: 576px) { .tf-job-detail-title { font-size: 2.25rem; } }

/* ---------- Páginas bloqueadas ---------- */
.tf-locked {
    display: flex;
    align-items: center;
    max-width: 36rem;
    min-height: 60vh;
    margin-inline: auto;
    padding: 4rem 1rem;
}

/* ---------- Acceso y registro ---------- */
.tf-auth {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 70vh;
    margin-inline: auto;
    padding: 4rem 1rem;
}
.tf-auth-sm { max-width: 28rem; }
.tf-auth-lg { max-width: 42rem; }
.tf-stack-4 > * + * { margin-top: 1rem; }
.tf-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(var(--tf-forest-rgb), 0.15);
    border-radius: 1rem;
    background: var(--tf-sand);
}
@media (min-width: 576px) { .tf-check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tf-diploma-row { display: grid; gap: 0.75rem; }
@media (min-width: 576px) {
    .tf-diploma-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: center; }
}
.tf-file-picker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid rgba(var(--tf-forest-rgb), 0.15);
    border-radius: 1rem;
    background: var(--tf-sand);
    cursor: pointer;
}
.tf-file-picker:hover { border-color: var(--tf-leaf); }
.tf-file-picker-btn {
    flex-shrink: 0;
    padding: 0.375rem 0.75rem;
    border-radius: 50rem;
    background: var(--tf-forest);
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}
.tf-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--tf-forest);
    font-size: 1rem;
    line-height: 1;
    color: #fff;
}

/* ---------- Inicio con sesión (/freelancers) ---------- */
.tf-home-hero-body {
    position: relative;
    display: grid;
    gap: 2rem;
    padding: 2.5rem 1.5rem;
}
@media (min-width: 576px) { .tf-home-hero-body { padding: 3.5rem 2.5rem; } }
@media (min-width: 992px) { .tf-home-hero-body { grid-template-columns: 1.2fr 0.8fr; align-items: end; } }
.tf-home-search-grid { display: grid; gap: 0.75rem; }
@media (min-width: 768px) { .tf-home-search-grid { grid-template-columns: 1.1fr 1fr 1fr auto; } }
.tf-category-card {
    display: block;
    height: 100%;
    overflow: hidden;
    border-radius: 1.6rem;
    background: #fff;
    color: inherit;
    box-shadow: var(--tf-ring), 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tf-category-card:hover {
    color: inherit;
    transform: translateY(-2px);
    box-shadow: var(--tf-ring), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.tf-category-card-grid { display: grid; grid-template-columns: 1fr 9.5rem; height: 100%; }
.tf-icon-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 1rem;
    background: var(--tf-mist);
    color: var(--tf-forest);
}
.tf-how-grid { display: grid; gap: 1.5rem; }
@media (min-width: 992px) { .tf-how-grid { grid-template-columns: 1fr 1.1fr 1fr; } }
.tf-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--tf-forest);
    font-family: var(--tf-font-display);
    font-size: 1.125rem;
    color: #fff;
}

/* ---------- Documentación de la API ---------- */
.tf-api { background: linear-gradient(to bottom, var(--tf-mist), var(--tf-sand)); }
.tf-code-inline {
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    background: #fff;
    font-size: 0.875rem;
    color: var(--tf-forest);
    word-break: break-all;
}
.tf-pre {
    overflow-x: auto;
    font-size: 0.875rem;
    color: var(--tf-forest);
}
.tf-pre-dark { padding: 1rem; border-radius: 1rem; background: var(--tf-forest); color: #fff; }
.tf-pre-dark code { color: inherit; }
.tf-table { --bs-table-bg: transparent; font-size: 0.875rem; }
.tf-table thead th {
    padding: 0.75rem 1rem 0.75rem 0;
    border-bottom: 1px solid rgba(var(--tf-forest-rgb), 0.1);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(var(--tf-ink-rgb), 0.5);
}
.tf-table td {
    padding: 0.75rem 1rem 0.75rem 0;
    border-bottom: 1px solid rgba(var(--tf-forest-rgb), 0.05);
    vertical-align: top;
}

/* ---------- Modales ---------- */
.tf-modal-close {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 1.875rem;
    line-height: 1;
    color: rgba(var(--tf-forest-rgb), 0.5);
}
.tf-modal-close:hover { color: var(--tf-forest); }
.tf-job-modal-img { width: 100%; height: 11rem; object-fit: cover; }
@media (min-width: 576px) { .tf-job-modal-img { height: 13rem; } }
.tf-job-modal-title { font-size: 1.5rem; line-height: 1.25; }
@media (min-width: 576px) { .tf-job-modal-title { font-size: 1.875rem; } }
.tf-job-modal-starts {
    width: fit-content;
    margin-left: auto;
    padding: 0.25rem 0.75rem;
    border-radius: 50rem;
    background: rgba(var(--tf-gold-rgb), 0.2);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tf-forest);
}
/* Los hijos de una grilla no deben estirarse con el código largo. */
.d-grid > * { min-width: 0; }
.tf-api li,
.tf-api p { overflow-wrap: anywhere; }

/* ---------- Panel: marco con barra lateral ---------- */
html:has(> body.panel-app),
body.panel-app {
    height: 100%;
    height: 100dvh;
    overflow: hidden;
}
.tf-panel-shell { display: flex; height: 100%; min-height: 0; }
.tf-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(7, 38, 31, 0.5);
}
@media (min-width: 992px) { .tf-panel-overlay { display: none !important; } }
.tf-panel-main {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.tf-panel-topbar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(var(--tf-forest-rgb), 0.1);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
}
.tf-panel-content {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    padding: 1.5rem 1rem;
}
@media (min-width: 576px) { .tf-panel-content { padding-inline: 1.5rem; } }
@media (min-width: 992px) { .tf-panel-content { padding: 2rem; } }
.tf-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 18rem;
    height: 100dvh;
    background: var(--tf-forest-deep);
    color: #fff;
    transition: transform 0.2s ease;
}
.tf-sidebar.-translate-x-full { transform: translateX(-100%); }
@media (min-width: 992px) {
    .tf-sidebar {
        position: static;
        z-index: auto;
        height: 100%;
        max-height: 100%;
        transform: none !important;
    }
}
.tf-sidebar-close {
    padding: 0.5rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
}
.tf-sidebar-close:hover { background: rgba(255, 255, 255, 0.1); }
.tf-sidebar-nav {
    display: grid;
    align-content: start;
    gap: 0.25rem;
    flex: 1 1 0%;
    overflow-y: auto;
    padding: 0 0.75rem;
}
.tf-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.tf-sidebar-link:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.tf-sidebar-link.is-active { background: #fff; color: var(--tf-forest); }
.tf-sidebar-badge {
    margin-left: auto;
    padding: 0.125rem 0.5rem;
    border-radius: 50rem;
    background: var(--tf-gold);
    font-size: 11px;
    font-weight: 600;
    color: var(--tf-forest-deep);
}
.tf-sidebar-foot {
    flex-shrink: 0;
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.tf-sidebar-foot .lang-switcher { margin-bottom: 0.75rem; }
.tf-sidebar-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 1rem;
    color: #fff;
}
.tf-sidebar-profile:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.tf-sidebar-profile.is-active { background: rgba(255, 255, 255, 0.1); }
.tf-sidebar-foot form { margin-top: 0.75rem; }
.tf-sidebar-foot .tf-sidebar-link { color: rgba(255, 255, 255, 0.75); }

/* Selector de idioma sobre fondo oscuro (barra lateral del panel) */
.lang-switcher.is-light .lang-switcher-toggle { color: rgba(255, 255, 255, 0.8); }
.lang-switcher.is-light .lang-switcher-toggle:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.lang-switcher.is-light .lang-switcher-menu {
    right: auto;
    left: 0;
    bottom: 100%;
    margin: 0 0 0.25rem;
    background: var(--tf-forest-deep);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.lang-switcher.is-light .lang-switcher-item { color: rgba(255, 255, 255, 0.8); }
.lang-switcher.is-light .lang-switcher-item:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.lang-switcher.is-light .lang-switcher-item.is-active { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* ---------- Utilidades del panel (equivalentes de la escala anterior) ---------- */
.bg-black-45 { background-color: rgba(0, 0, 0, 0.45) !important; }
.bg-forest-10 { background-color: rgba(12, 61, 50, 0.1) !important; }
.bg-forest-40 { background-color: rgba(12, 61, 50, 0.4) !important; }
.bg-forest-deep-50 { background-color: rgba(7, 38, 31, 0.5) !important; }
.bg-gold-10 { background-color: rgba(212, 160, 23, 0.1) !important; }
.bg-gold-15 { background-color: rgba(212, 160, 23, 0.15) !important; }
.bg-leaf-15 { background-color: rgba(31, 122, 92, 0.15) !important; }
.bg-leaf-30 { background-color: rgba(31, 122, 92, 0.3) !important; }
.bg-leaf-35 { background-color: rgba(31, 122, 92, 0.35) !important; }
.bg-sand-50 { background-color: rgba(246, 241, 232, 0.5) !important; }
.bg-white-15 { background-color: rgba(255, 255, 255, 0.15) !important; }
.bg-white-90 { background-color: rgba(255, 255, 255, 0.9) !important; }
.bg-white-95 { background-color: rgba(255, 255, 255, 0.95) !important; }
.border-forest-10 { border-color: rgba(12, 61, 50, 0.1) !important; }
.border-forest-15 { border-color: rgba(12, 61, 50, 0.15) !important; }
.border-forest-25 { border-color: rgba(12, 61, 50, 0.25) !important; }
.border-forest-30 { border-color: rgba(12, 61, 50, 0.3) !important; }
.border-gold-40 { border-color: rgba(212, 160, 23, 0.4) !important; }
.tf-cols-1 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); }
.tf-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tf-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tf-cols-7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tf-h-10 { height: 2.5rem; }
.tf-h-11 { height: 2.75rem; }
.tf-h-12 { height: 3rem; }
.tf-h-1_5 { height: 0.375rem; }
.tf-h-2 { height: 0.5rem; }
.tf-h-20 { height: 5rem; }
.tf-h-28 { height: 7rem; }
.tf-h-36 { height: 9rem; }
.tf-h-4 { height: 1rem; }
.tf-h-40 { height: 10rem; }
.tf-h-44 { height: 11rem; }
.tf-h-48 { height: 12rem; }
.tf-h-5 { height: 1.25rem; }
.tf-h-52 { height: 13rem; }
.tf-h-6 { height: 1.5rem; }
.tf-h-7 { height: 1.75rem; }
.tf-h-8 { height: 2rem; }
.tf-h-9 { height: 2.25rem; }
.tf-h-_70dvh_ { height: 70dvh; }
.tf-left-3 { left: 0.75rem; }
.tf-max-h-48 { max-height: 12rem; }
.tf-max-h-96 { max-height: 24rem; }
.tf-max-h-_70dvh_ { max-height: 70dvh; }
.tf-max-h-_85dvh_ { max-height: 85dvh; }
.tf-max-h-_min_90dvh_calc_100_-1_5rem___ { max-height: min(90dvh,calc(100% - 1.5rem)); }
.tf-max-w-2xl { max-width: 42rem; }
.tf-max-w-3xl { max-width: 48rem; }
.tf-max-w-4xl { max-width: 56rem; }
.tf-max-w-6xl { max-width: 72rem; }
.tf-max-w-lg { max-width: 32rem; }
.tf-max-w-md { max-width: 28rem; }
.tf-max-w-xl { max-width: 36rem; }
.tf-min-h-4 { min-height: 1rem; }
.tf-min-w-_10_5rem_ { min-width: 10.5rem; }
.tf-min-w-_10rem_ { min-width: 10rem; }
.tf-min-w-_11rem_ { min-width: 11rem; }
.tf-right-2 { right: 0.5rem; }
.tf-top-2 { top: 0.5rem; }
.tf-top-3 { top: 0.75rem; }
.tf-w-10 { width: 2.5rem; }
.tf-w-11 { width: 2.75rem; }
.tf-w-12 { width: 3rem; }
.tf-w-1_5 { width: 0.375rem; }
.tf-w-2 { width: 0.5rem; }
.tf-w-20 { width: 5rem; }
.tf-w-4 { width: 1rem; }
.tf-w-5 { width: 1.25rem; }
.tf-w-6 { width: 1.5rem; }
.tf-w-7 { width: 1.75rem; }
.tf-w-8 { width: 2rem; }
.tf-w-9 { width: 2.25rem; }
.tf-w-_min_56rem_calc_100_-1_5rem___ { width: min(56rem,calc(100% - 1.5rem)); }
.tracking-16 { letter-spacing: 0.16em; }
.tracking-18 { letter-spacing: 0.18em; }
@media (min-width: 576px) {
    .fs-sm-4xl { font-size: 2.25rem !important; }
    .fs-sm-sm { font-size: 0.875rem !important; }
    .tf-cols-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tf-cols-sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tf-h-sm-64 { height: 16rem; }
    .tf-h-sm-7 { height: 1.75rem; }
    .tf-min-h-sm-_7_5rem_ { min-height: 7.5rem; }
    .tf-min-w-sm-44 { min-width: 11rem; }
    .tf-min-w-sm-56 { min-width: 14rem; }
    .tf-rounded-sm-2xl { border-radius: 1rem !important; }
    .tf-w-sm-7 { width: 1.75rem; }
    .tf-w-sm-auto { width: auto !important; }
}
@media (min-width: 992px) {
    .tf-cols-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tf-cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tf-tpl-lg-1p2frx0p7frx0p8fr { grid-template-columns: 1.2fr 0.7fr 0.8fr; }
    .tf-tpl-lg-1p3frx0p8fr { grid-template-columns: 1.3fr 0.8fr; }
    .tf-tpl-lg-1p3frx0p9fr { grid-template-columns: 1.3fr 0.9fr; }
    .tf-tpl-lg-1p4frx0p8fr { grid-template-columns: 1.4fr 0.8fr; }
}
@media (min-width: 1200px) {
    .tf-cols-xl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tf-cols-xl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tf-cols-xl-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 576px) {
    .tf-flex-sm-none { flex: none !important; }
    .tf-aspect-sm-auto { aspect-ratio: auto !important; }
    .fs-sm-11 { font-size: 11px !important; }
}

/* ---------- Utilidades fijas del panel ---------- */
.fs-base { font-size: 1rem; }
.fs-2xl { font-size: 1.5rem; line-height: 1.33; }
.fs-4xl { font-size: 2.25rem; line-height: 1.15; }
.fs-5xl { font-size: 3rem; line-height: 1.1; }
.fs-13 { font-size: 13px; }
.fs-9 { font-size: 9px; }
.text-ink-30 { color: rgba(var(--tf-ink-rgb), 0.3) !important; }
.text-forest-30 { color: rgba(var(--tf-forest-rgb), 0.35) !important; }
.text-forest-deep { color: var(--tf-forest-deep) !important; }
.bg-danger-soft { background-color: #fef2f2 !important; }
.bg-warning-soft { background-color: #fffbeb !important; }
.border-dashed { border-style: dashed !important; }
.border-transparent { border-color: transparent !important; }
.border-forest-solid { border-color: var(--tf-forest) !important; }
.border-leaf-solid { border-color: var(--tf-leaf) !important; }
.border-gold-solid { border-color: var(--tf-gold) !important; }
.border-white-solid { border-color: #fff !important; }
.rounded-tf-xs { border-radius: 0.5rem !important; }
.rounded-tf-sm { border-radius: 0.75rem !important; }
.rounded-tf-md { border-radius: 1.25rem !important; }
.rounded-tf-2xl { border-radius: 2rem !important; }
.rounded-top-tf-sm { border-top-left-radius: 0.75rem !important; border-top-right-radius: 0.75rem !important; }
.ring-2 { box-shadow: inset 0 0 0 2px rgba(var(--tf-forest-rgb), 0.2); }
.ring-white { box-shadow: 0 0 0 2px #fff; }
.ring-danger { box-shadow: inset 0 0 0 1px #fecaca; }
.min-w-0 { min-width: 0 !important; }
.min-h-0 { min-height: 0 !important; }
.w-fit { width: fit-content !important; }
.tf-inset-0 { inset: 0; }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.tf-list-disc { padding-left: 1.25rem; list-style: disc; }
.tf-list-decimal { padding-left: 1.25rem; list-style: decimal; }
.tf-divide-y > * + * { border-top: 1px solid rgba(var(--tf-forest-rgb), 0.1); }
.tf-accent { accent-color: var(--tf-forest); }
.tf-col-full { grid-column: 1 / -1; }
.tf-col-2 { grid-column: span 2 / span 2; }
.z-120 { z-index: 1060 !important; }
.tf-stack-1 > * + * { margin-top: 0.25rem; }
.tf-stack-2 > * + * { margin-top: 0.5rem; }
.tf-stack-5 > * + * { margin-top: 1.25rem; }
.tf-stack-6 > * + * { margin-top: 1.5rem; }
.tf-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ratio-square { aspect-ratio: 1 / 1; }
.flex-none { flex: none !important; }
.d-contents { display: contents !important; }
.hover-bg-white:hover { background-color: #fff !important; }
.hover-bg-forest:hover { background-color: var(--tf-forest) !important; }
.hover-bg-forest-deep:hover { background-color: var(--tf-forest-deep) !important; }
.hover-bg-gold-bright:hover { background-color: var(--tf-gold-bright) !important; }
.hover-border-leaf:hover { border-color: var(--tf-leaf) !important; }
.hover-bg-danger-soft:hover { background-color: #fef2f2 !important; }
.hover-text-white:hover { color: #fff !important; }
.hover-text-danger:hover { color: #b91c1c !important; }
.hover-bg-white-10:hover { background-color: rgba(255, 255, 255, 0.1) !important; }
.hover-shadow:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important; }
.hover-lift { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.hover-lift:hover { transform: translateY(-2px); }
.hover-opacity:hover { opacity: 0.9; }
.tf-disabled-dim:disabled { opacity: 0.5; cursor: not-allowed; }
.tf-peer:checked + .tf-peer-box {
    border-color: var(--tf-forest) !important;
    background-color: var(--tf-mist) !important;
    box-shadow: 0 0 0 2px rgba(var(--tf-forest-rgb), 0.2);
}
.tf-peer:focus-visible + .tf-peer-box { outline: 2px solid var(--tf-leaf); }
.tf-fade-r { background: linear-gradient(to right, var(--tf-sand), rgba(var(--tf-sand-rgb), 0.95), rgba(var(--tf-sand-rgb), 0.4)); }
.tf-last-no-border:last-child { border-bottom-width: 0 !important; }
.tf-file-input::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 50rem;
    background: var(--tf-forest);
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
}

/* ---------- Estados que pone el JS del panel ---------- */
.js-pricing-option.is-on { box-shadow: 0 0 0 2px rgba(var(--tf-forest-rgb), 0.2); }
.is-picked { box-shadow: 0 0 0 2px var(--tf-forest), 0 1px 2px rgba(0, 0, 0, 0.05) !important; }

/* Bootstrap w-100 no debe ampliar los selects nativos ocultos por Select2. */
.panel-app select.select2-hidden-accessible {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
}

/* Solicitudes: estados y filtros accesibles sin desplazamiento horizontal en iPhone. */
.tf-request-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}
.tf-request-tabs > a {
    min-width: 0;
    min-height: 2.75rem;
    justify-content: space-between;
}
.tf-request-filter-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.tf-request-date {
    display: block;
    min-width: 0;
    max-width: 100%;
    height: 2.75rem;
    box-sizing: border-box;
}
.tf-request-date::-webkit-date-and-time-value { min-height: 1.25em; text-align: left; }
.tf-request-filter-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; grid-column: 1 / -1; }
.tf-request-filter-actions > * { flex: 1; min-height: 2.75rem; justify-content: center; }
.tf-request-card { overflow-wrap: anywhere; }
@media (min-width: 576px) {
    .tf-request-tabs { display: flex; flex-wrap: wrap; }
    .tf-request-tabs > a { justify-content: center; }
    .tf-request-filter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .tf-request-filter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: end; }
    .tf-request-filter-actions { grid-column: auto; }
    .tf-request-filter-actions > * { flex: none; }
}

/* En el registro estrecho, conserva accesibles el selector de idioma y el menú. */
@media (max-width: 359.98px) {
    body:has(.tf-auth) .site-header .lang-switcher-toggle > span { display: none; }
}