/* -------------------------------------------------------------------------
   Koru Fleet theme — navy / gold / cool-gray.

   Bootstrap 5 stays as the grid + utility layer; we only override its
   theme tokens (colors, radius, fonts) and restyle a handful of
   components (navbar, cards, buttons, badges, alerts, forms).
   ------------------------------------------------------------------------- */

/* Self-hosted fonts (latin subset — covers ES/EN incl. accents + ñ).
   Replaces the render-blocking Google Fonts @import chain (html -> css ->
   @import googleapis -> gstatic). font-display:swap keeps text visible
   with a fallback while the woff2 loads. Regenerated by
   scratchpad/optimize_assets.py. */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/fraunces-400.eb2486760f75.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/fraunces-500.eb2486760f75.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/fraunces-600.eb2486760f75.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/fraunces-700.eb2486760f75.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-400.260c81a4759b.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter-500.260c81a4759b.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter-600.260c81a4759b.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/inter-700.260c81a4759b.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Smooth scroll for in-page anchor links (Request report → #reports-section). */
html { scroll-behavior: smooth; }

:root {
    /* --- brand tokens ---------------------------------------------------- */
    --ft-navy:       #0F1B2E;
    --ft-navy-2:     #1A2744;
    --ft-navy-3:     #2A3859;
    --ft-gold:       #C9A84C;
    --ft-gold-soft:  #E4C876;
    --ft-cream:      #F8F9FB;
    --ft-cream-2:    #EEF0F4;
    --ft-panel:      #FFFFFF;
    --ft-text:       #1A1A1A;
    --ft-muted:      #6B7280;
    --ft-border:     rgba(15, 27, 46, 0.08);
    --ft-border-strong: rgba(15, 27, 46, 0.18);
    --ft-shadow:     0 4px 20px rgba(15, 27, 46, 0.06);
    --ft-shadow-lg:  0 12px 40px rgba(15, 27, 46, 0.12);
    --ft-green:      #1F8A4C;
    --ft-green-bg:   rgba(31, 138, 76, 0.14);
    --ft-red:        #BC4B51;
    --ft-red-bg:     rgba(188, 75, 81, 0.14);

    /* --- Bootstrap 5 overrides (variables Bootstrap consumes at runtime) - */
    --bs-primary:            var(--ft-navy);
    --bs-primary-rgb:        15, 27, 46;
    --bs-primary-bg-subtle:  var(--ft-cream-2);
    --bs-primary-text-emphasis: var(--ft-navy);
    --bs-body-bg:            var(--ft-cream);
    --bs-body-color:         var(--ft-text);
    --bs-body-font-family:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --bs-body-font-size:     0.95rem;
    --bs-body-line-height:   1.55;
    --bs-border-radius:      12px;
    --bs-border-radius-sm:   8px;
    --bs-border-radius-lg:   16px;
    --bs-link-color:         var(--ft-navy);
    --bs-link-hover-color:   var(--ft-gold);
}

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */

body {
    background: var(--ft-cream);
    color: var(--ft-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    color: var(--ft-navy);
    letter-spacing: -0.01em;
}

/* Eyebrow tag — small uppercase label above a section title */
.eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ft-gold);
    padding-bottom: 0.15rem;
    border-bottom: 2px solid var(--ft-gold);
    margin-bottom: 0.75rem;
}

.eyebrow-light { color: var(--ft-gold-soft); }

/* Muted / secondary text */
.text-muted, small { color: var(--ft-muted) !important; }

/* -------------------------------------------------------------------------
   Navbar
   ------------------------------------------------------------------------- */

.navbar-fleettrace {
    background: linear-gradient(180deg, var(--ft-navy) 0%, var(--ft-navy-2) 100%);
    box-shadow: 0 2px 12px rgba(15, 27, 46, 0.25);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    position: relative;
}

/* Sutil línea gold en el borde inferior — evoca el detalle del hero del informe */
.navbar-fleettrace::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(201, 168, 76, 0.55) 50%,
        transparent 100%);
    pointer-events: none;
}

.navbar-fleettrace .navbar-brand {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.35rem;
    color: #fff !important;
    letter-spacing: -0.01em;
    padding-right: 0.75rem;
}

.navbar-fleettrace .navbar-brand::first-letter {
    color: var(--ft-gold-soft);
}

.navbar-fleettrace .nav-link {
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.35rem 0.85rem !important;
    border-radius: 999px;
    transition: background 0.15s ease, color 0.15s ease;
}

.navbar-fleettrace .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08);
}

.navbar-fleettrace .navbar-user-email {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin-right: 0.75rem;
}

.navbar-fleettrace .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    font-weight: 500;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
}

.navbar-fleettrace .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.navbar-fleettrace .btn-signup {
    background: var(--ft-gold);
    color: var(--ft-navy);
    border: 0;
    font-weight: 600;
    padding: 0.35rem 1.1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(201, 168, 76, 0.35);
}

.navbar-fleettrace .btn-signup:hover {
    background: var(--ft-gold-soft);
    color: var(--ft-navy);
    box-shadow: 0 4px 14px rgba(201, 168, 76, 0.5);
}

/* ── Zona de usuario V5 (2026-07-15): créditos + campana + avatar ──────
   Elegida por Mario sobre 6 maquetas: chip de créditos dorado (→ pricing),
   campana SVG con contador anclado, y avatar con inicial que abre el menú
   (email, Account, calendario, Sign out). */

.navbar-fleettrace .ft-nav-credits {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(228, 200, 118, 0.45);
    color: var(--ft-gold-soft);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.26rem 0.7rem;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}

.navbar-fleettrace .ft-nav-credits:hover {
    background: rgba(201, 168, 76, 0.12);
    color: var(--ft-gold-soft);
}

.navbar-fleettrace .ft-nav-credits svg {
    width: 13px;
    height: 13px;
}

.navbar-fleettrace .ft-nav-bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.85);
}

.navbar-fleettrace .ft-nav-bell:hover,
.navbar-fleettrace .ft-nav-bell[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.navbar-fleettrace .ft-nav-bell svg {
    width: 18px;
    height: 18px;
}

.navbar-fleettrace .ft-bell-cnt {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: #E24D4D;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    border-radius: 999px;
    border: 2px solid var(--ft-navy);
    box-sizing: content-box;
    font-variant-numeric: tabular-nums;
}

.navbar-fleettrace .ft-nav-userbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 0;
    padding: 3px 8px 3px 4px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.55);
}

.navbar-fleettrace .ft-nav-userbtn:hover,
.navbar-fleettrace .ft-nav-userbtn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

.navbar-fleettrace .ft-nav-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--ft-gold);
    color: var(--ft-navy);
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
    flex: none;
}

.navbar-fleettrace .ft-nav-caret {
    width: 10px;
    height: 10px;
}

.ft-user-menu {
    min-width: 240px;
    border-radius: 12px;
    border: 1px solid #E3E6EB;
    box-shadow: 0 14px 34px rgba(15, 27, 46, 0.28);
    padding: 6px;
}

.ft-user-menu-head {
    padding: 9px 12px 8px;
    border-bottom: 1px solid #EDF0F3;
    margin-bottom: 5px;
}

.ft-user-menu-email {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ft-navy);
    word-break: break-all;
}

.ft-user-menu-sub {
    font-size: 0.72rem;
    color: #8A93A3;
}

.ft-user-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.86rem;
}

.ft-user-menu .dropdown-item svg {
    width: 15px;
    height: 15px;
    color: #8A93A3;
    flex: none;
}

.ft-user-menu-out,
.ft-user-menu-out:hover {
    color: #B3402F;
}

.ft-user-menu-out svg {
    color: #B3402F !important;
}

/* Móvil (menú colapsado): los items del cluster se apilan — dar aire. */
@media (max-width: 991.98px) {
    .navbar-fleettrace .ft-nav-credits {
        margin: 0.35rem 0;
    }
    .navbar-fleettrace .nav-item.dropdown {
        margin-top: 0.25rem;
    }
}

/* -------------------------------------------------------------------------
   Hero (landing / catalog top)
   ------------------------------------------------------------------------- */

.ft-hero {
    background: linear-gradient(135deg, var(--ft-navy) 0%, var(--ft-navy-2) 100%);
    color: #fff;
    padding: 3.5rem 1.5rem 3rem;
    border-radius: 0 0 24px 24px;
    margin: 0 -12px 2.5rem;
    position: relative;
    overflow: hidden;
}

.ft-hero::after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 320px; height: 320px;
    background: radial-gradient(circle at 70% 30%, rgba(201, 168, 76, 0.28), transparent 65%);
    pointer-events: none;
}

.ft-hero-inner {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.ft-hero h1 {
    color: #fff;
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    line-height: 1.1;
    margin: 0 0 0.75rem;
}

.ft-hero .lead {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.05rem;
    max-width: 620px;
    margin: 0 auto 0;
}

/* -------------------------------------------------------------------------
   Cards (catalog + generic panels)
   ------------------------------------------------------------------------- */

.card {
    background: var(--ft-panel);
    border: 1px solid var(--ft-border);
    border-radius: 14px !important;
    box-shadow: var(--ft-shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ft-shadow-lg);
}

.card .card-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--ft-navy);
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

.card .card-footer {
    background: transparent !important;
    border-top: 1px solid var(--ft-border);
}

.card.border-primary,
.ft-card--yours {
    border: 1px solid var(--ft-border) !important;
    position: relative;
    box-shadow: 0 6px 22px rgba(201, 168, 76, 0.12);
}

/* Whole-card click target: <a> wraps the card so it acts as one big link.
   Bootstrap 5 defaults <a> to text-decoration: underline; we need to beat
   that on the anchor AND on its descendants (h5, p, small) because
   text-decoration cascades to inline children by default. */
.ft-card-link,
.ft-card-link:hover,
.ft-card-link:focus,
.ft-card-link:visited,
.ft-card-link *,
.ft-card-link *:hover {
    text-decoration: none !important;
}

.ft-card-link {
    display: block;
    color: inherit;
    cursor: pointer;
}

.ft-card-link:hover,
.ft-card-link:focus {
    color: inherit;
    /* Card's own :hover transform still fires because .card is the anchor
       itself, but reinforce the shadow for clearer feedback. */
    box-shadow: var(--ft-shadow-lg);
}

.ft-card-link:focus-visible {
    outline: 3px solid var(--ft-gold);
    outline-offset: 3px;
}

.ft-card-link .card-title { color: var(--ft-navy); }

.ft-card--dim {
    opacity: 0.55;
    border-style: dashed;
}
.ft-card--dim:hover { opacity: 0.85; }

.card.border-primary::before,
.ft-card--yours::before {
    content: "YOUR FLEET";
    position: absolute;
    /* right clears the 1.9rem corner follow-star + gap */
    top: 0.85rem; right: 3rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--ft-navy);
    background: var(--ft-gold-soft);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    z-index: 2;
}

/* Followed manually (no boat of yours detected) — same prominence as
   YOUR FLEET but honest about why it's in your events. */
.ft-card--follow {
    border: 1px solid rgba(201, 168, 76, 0.55) !important;
    position: relative;
    box-shadow: 0 6px 22px rgba(201, 168, 76, 0.08);
}

.ft-card--follow::before {
    content: "FOLLOWING";
    position: absolute;
    top: 0.85rem; right: 3rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--ft-navy);
    background: #fff;
    border: 1px solid var(--ft-gold);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    z-index: 2;
}

.ft-card--class {
    border: 1px solid var(--ft-border) !important;
    position: relative;
    box-shadow: 0 6px 22px rgba(201, 168, 76, 0.06);
    border-style: dashed !important;
}

.ft-card--class::before {
    content: "YOUR CLASS";
    position: absolute;
    top: 0.85rem; right: 3rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--ft-navy);
    background: #e8e0cc;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    z-index: 2;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.btn {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    border-radius: 999px;
    padding: 0.5rem 1.15rem;
}

.btn-sm { padding: 0.3rem 0.85rem; font-size: 0.82rem; }
.btn-lg { padding: 0.75rem 1.6rem; font-size: 1.05rem; }

.btn-primary {
    background: var(--ft-navy);
    border-color: var(--ft-navy);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--ft-navy-2);
    border-color: var(--ft-navy-2);
    box-shadow: 0 4px 14px rgba(15, 27, 46, 0.25);
}

.btn-outline-primary {
    color: var(--ft-navy);
    border-color: var(--ft-border-strong);
    background: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--ft-navy);
    border-color: var(--ft-navy);
    color: #fff;
}

/* Variante del outline con fondo blanco solido y texto en negrita: destaca
   sobre el cream del body sin recurrir al dorado (que es el color de las
   acciones de compra/generacion). El hover lo hereda de .btn-outline-primary. */
.btn-outline-primary.btn-white {
    background: #fff;
    font-weight: 700;
}

.btn-gold {
    background: var(--ft-gold);
    color: var(--ft-navy);
    border: 0;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(201, 168, 76, 0.28);
}
.btn-gold:hover, .btn-gold:focus {
    background: var(--ft-gold-soft);
    color: var(--ft-navy);
    box-shadow: 0 5px 18px rgba(201, 168, 76, 0.4);
}

.btn-outline-secondary {
    color: var(--ft-muted);
    border-color: var(--ft-border-strong);
}
.btn-outline-secondary:hover {
    background: var(--ft-cream-2);
    color: var(--ft-navy);
    border-color: var(--ft-border-strong);
}

.btn-outline-danger {
    color: var(--ft-red);
    border-color: var(--ft-red);
}
.btn-outline-danger:hover {
    background: var(--ft-red);
    color: #fff;
}

/* -------------------------------------------------------------------------
   Badges
   ------------------------------------------------------------------------- */

.badge {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    padding: 0.35em 0.7em;
    border-radius: 999px;
}

.badge.bg-primary,
.tier-badge {
    background: var(--ft-navy) !important;
    color: #fff;
}

.tier-badge-price {
    color: var(--ft-navy);
    font-weight: 600;
    margin-left: 0.4rem;
    font-size: 0.85rem;
}

/* Evento privado del propio usuario (Event.owner): logs subidos por él o
   informe importado del escritorio. Marca discreta, no compite con los badges
   de estado; su función es distinguirlo del evento público del mismo
   campeonato cuando ambos salen en la misma lista. */
.ft-badge-private {
    background: rgba(15, 27, 46, 0.06);
    color: var(--ft-navy);
    border: 1px solid var(--ft-border);
    margin-right: 0.35rem;
}

/* Report status badges */
.status-awaiting_input,
.badge-status-awaiting_input {
    background: var(--ft-gold-bg, rgba(200, 150, 30, 0.12));
    color: var(--ft-gold, #a8771c);
}

.status-queued,
.badge-status-queued {
    background: rgba(15, 27, 46, 0.06);
    color: var(--ft-muted);
}

.status-in_progress,
.badge-status-in_progress {
    background: rgba(15, 27, 46, 0.12);
    color: var(--ft-navy);
}

.status-ready,
.badge-status-ready {
    background: var(--ft-green-bg);
    color: var(--ft-green);
}

.status-failed,
.badge-status-failed {
    background: var(--ft-red-bg);
    color: var(--ft-red);
}

/* -------------------------------------------------------------------------
   Alerts (Django messages)
   ------------------------------------------------------------------------- */

.alert {
    border-radius: 12px;
    border: 1px solid var(--ft-border);
    background: var(--ft-panel);
    color: var(--ft-text);
    box-shadow: var(--ft-shadow);
    font-size: 0.92rem;
}

.alert-success {
    background: var(--ft-green-bg);
    border-color: rgba(31, 138, 76, 0.25);
    color: var(--ft-green);
}

.alert-danger, .alert-error {
    background: var(--ft-red-bg);
    border-color: rgba(188, 75, 81, 0.25);
    color: var(--ft-red);
}

.alert-warning {
    background: rgba(201, 168, 76, 0.15);
    border-color: rgba(201, 168, 76, 0.35);
    color: #8a6e1f;
}

.alert-info,
.alert-light {
    background: var(--ft-panel);
    border-color: var(--ft-border);
    color: var(--ft-text);
}

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */

.form-control,
.form-select {
    border-radius: 10px;
    border-color: var(--ft-border-strong);
    padding: 0.55rem 0.9rem;
    font-size: 0.95rem;
    background: #fff;
    color: var(--ft-text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ft-navy);
    box-shadow: 0 0 0 0.2rem rgba(15, 27, 46, 0.12);
}

.form-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ft-navy);
    margin-bottom: 0.3rem;
}

/* -------------------------------------------------------------------------
   List groups (used by my-boats + races on event detail)
   ------------------------------------------------------------------------- */

.list-group {
    border-radius: 12px;
    overflow: hidden;
}

.list-group-item {
    background: var(--ft-panel);
    border-color: var(--ft-border);
    color: var(--ft-text);
    padding: 0.85rem 1.1rem;
}

.list-group-item strong {
    color: var(--ft-navy);
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.ft-footer {
    background: var(--ft-navy);
    color: rgba(255, 255, 255, 0.7);
    padding: 2rem 1rem;
    margin-top: 3rem;
    text-align: center;
    font-size: 0.85rem;
}

.ft-footer a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}
.ft-footer a:hover {
    color: var(--ft-gold-soft);
}

.ft-footer .footer-brand {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: #fff;
}

.ft-footer .footer-brand-koru {
    color: var(--ft-gold-soft);
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   HTMX indicators
   ------------------------------------------------------------------------- */

.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Acción en vuelo (2026-07-28). El proyecto tenía 108 acciones htmx y solo 3
   indicadores, así que los botones que gastan un crédito o encolan un análisis
   no daban NINGUNA señal: el cliente pulsaba y no pasaba nada visible hasta
   que llegaba la respuesta, y como tampoco se deshabilitaban, el segundo clic
   era el reflejo natural (y encolaba un segundo análisis del mismo informe).

   Mecánica: `hx-disabled-elt` en el form o el botón pone el atributo
   `disabled` mientras dura la petición y lo quita al terminar, pase lo que
   pase. La clase se pone A MANO en los botones tratados en vez de estilar
   cualquier :disabled, porque hay botones legítimamente deshabilitados por
   estado (las regatas sin hora del modal de lote) que NO deben girar. */
.btn.ft-busy-btn:disabled {
    cursor: progress;
    opacity: 0.75;
}

.btn.ft-busy-btn:disabled::after {
    content: "";
    display: inline-block;
    width: 0.72em;
    height: 0.72em;
    margin-left: 0.45em;
    vertical-align: -0.08em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ft-busy-spin 0.7s linear infinite;
}

@keyframes ft-busy-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .btn.ft-busy-btn:disabled::after { animation: none; }
}

/* -------------------------------------------------------------------------
   Section headings on the catalog
   ------------------------------------------------------------------------- */

.section-heading {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    /* Envolver es OBLIGATORIO (2026-07-30): esta línea lleva el eyebrow, las
       cards de clase, el selector Names/Sail numbers y el botón Ratings, y en
       un móvil de 375 px no caben ni de lejos. Sin wrap, el flex los mantenía
       todos en una sola fila y Ratings acababa 52 px FUERA de la pantalla,
       cortado y sin forma de pulsarlo (medido en el evento ILCA). Lo mismo le
       pasaba a "N credits left" en la línea de Races. */
    flex-wrap: wrap;
    row-gap: 0.5rem;
    margin-bottom: 1.1rem;
    margin-top: 0.5rem;
}

.section-heading .accent {
    height: 2px;
    flex-grow: 1;
    /* Con wrap, la rayita decorativa no puede provocar por sí sola un salto de
       línea: se queda en la fila donde quepa y rellena el hueco. Si no queda
       sitio para un mínimo razonable, desaparece en vez de empujar a los
       botones (es decoración, y en móvil el ancho es para los controles). */
    flex-basis: 2rem;
    min-width: 0;
    background: linear-gradient(90deg, var(--ft-gold) 0%, transparent 100%);
    opacity: 0.4;
}

/* Móvil: la decoración estorba más de lo que aporta cuando la cabecera ya ha
   tenido que partirse en dos o tres filas. */
@media (max-width: 575.98px) {
    .section-heading .accent {
        display: none;
    }
}

/* Selector de divisiones en la página del evento (estilo TracTrac):
   cards junto al heading FLEET que filtran flota + regatas por clase. */
.ft-class-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.ft-class-tab {
    border: 1px solid rgba(15, 27, 46, 0.15);
    background: #fff;
    color: var(--ft-navy);
    border-radius: 999px;
    padding: 0.25rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.ft-class-tab:hover {
    border-color: var(--ft-gold);
}

.ft-class-tab--active {
    background: var(--ft-navy);
    border-color: var(--ft-navy);
    color: #fff;
}

.ft-class-tab-count {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: rgba(200, 160, 60, 0.25);
    color: inherit;
    font-size: 0.75rem;
    font-weight: 700;
}

.ft-class-tab--active .ft-class-tab-count {
    background: rgba(255, 255, 255, 0.22);
}

/* -------------------------------------------------------------------------
   Two-column layout inside "Where your boats race": Happening now | Coming up
   ------------------------------------------------------------------------- */

.ft-column-heading {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--ft-navy);
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    margin: 0 0 0.85rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.ft-column-count {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--ft-navy);
    background: var(--ft-gold-soft);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    line-height: 1.4;
}

.ft-column-empty {
    background: var(--ft-panel);
    border: 1px dashed var(--ft-border-strong);
    border-radius: 12px;
    padding: 1.25rem;
    color: var(--ft-muted);
    font-size: 0.9rem;
    text-align: center;
}

/* -------------------------------------------------------------------------
   Collapsible <details> — "show all other events" toggle
   ------------------------------------------------------------------------- */

.ft-details {
    margin-top: 1.5rem;
}

.ft-details-summary {
    display: inline-block;
    cursor: pointer;
    list-style: none;
    background: var(--ft-panel);
    color: var(--ft-navy);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.92rem;
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    border: 1px solid var(--ft-border-strong);
    box-shadow: var(--ft-shadow);
    transition: all 0.15s ease;
    user-select: none;
}

.ft-details-summary:hover {
    background: var(--ft-navy);
    color: #fff;
    border-color: var(--ft-navy);
    box-shadow: 0 6px 20px rgba(15, 27, 46, 0.2);
}

.ft-details-summary::-webkit-details-marker { display: none; }
.ft-details-summary::marker { content: ""; }

.ft-details-summary::before {
    content: "▸ ";
    color: var(--ft-gold);
    transition: transform 0.2s ease;
    display: inline-block;
    margin-right: 0.3rem;
}

.ft-details[open] > .ft-details-summary::before {
    content: "▾ ";
}

.ft-details[open] > .ft-details-summary {
    background: var(--ft-navy);
    color: #fff;
    border-color: var(--ft-navy);
}

.ft-details-with-search {
    margin-top: 1.5rem;
}

.ft-details-with-search > .ft-details {
    margin-top: 0;
}

/* Toolbar: search + fleet toggle + count, inside the <details> */
.ft-events-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1rem 0 0.75rem;
    flex-wrap: wrap;
}

.ft-events-search {
    flex: 1 1 200px;
    max-width: 320px;
    height: auto;
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
    background: var(--ft-panel);
    border: 1px solid var(--ft-border-strong);
    border-radius: 999px;
    color: var(--ft-text);
    box-shadow: var(--ft-shadow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ft-events-search:focus {
    outline: none;
    border-color: var(--ft-navy);
    box-shadow: 0 0 0 0.2rem rgba(15, 27, 46, 0.12);
}

.ft-events-search::placeholder {
    color: var(--ft-muted);
}

.ft-fleet-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--ft-border-strong);
    background: var(--ft-panel);
    color: var(--ft-navy);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    user-select: none;
}

.ft-fleet-filter-btn:hover {
    border-color: var(--ft-gold);
    background: var(--ft-gold-soft);
}

.ft-fleet-filter-btn--active {
    background: var(--ft-gold);
    border-color: var(--ft-gold);
    color: var(--ft-navy);
    box-shadow: 0 2px 8px rgba(201, 168, 76, 0.25);
}

.ft-fleet-filter-btn--active:hover {
    background: var(--ft-gold-soft);
}

.ft-events-match-count {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--ft-muted);
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Filtros de la lista de eventos: toggles (My fleet only / TracTrac /
   Vakaros) y desplegable de fecha (año → meses). Mismo píldora dorada.
   ------------------------------------------------------------------------- */
.ft-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--ft-border-strong);
    background: var(--ft-panel);
    color: var(--ft-navy);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    user-select: none;
    list-style: none;          /* oculta el triángulo por defecto de <summary> */
}

.ft-filter-btn::-webkit-details-marker { display: none; }

.ft-filter-btn:hover {
    border-color: var(--ft-gold);
    background: var(--ft-gold-soft);
}

.ft-filter-btn--active {
    background: var(--ft-gold);
    border-color: var(--ft-gold);
    color: var(--ft-navy);
    box-shadow: 0 2px 8px rgba(201, 168, 76, 0.25);
}

.ft-filter-btn--active:hover { background: var(--ft-gold-soft); }

.ft-filter-caret {
    font-size: 0.7rem;
    line-height: 1;
    transition: transform 0.15s ease;
}

.ft-filter-dropdown[open] > .ft-filter-btn .ft-filter-caret {
    transform: rotate(180deg);
}

/* Panel del desplegable de fecha */
.ft-filter-dropdown {
    position: relative;
    display: inline-block;
}

.ft-filter-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.4rem);
    left: 0;
    min-width: 190px;
    max-height: 340px;
    overflow-y: auto;
    padding: 0.4rem;
    background: var(--ft-panel);
    border: 1px solid var(--ft-border-strong);
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(15, 27, 46, 0.15);
}

/* Dropdown alineado a la derecha (p.ej. "Subscribe (iCal)" en un
   justify-content-end): el panel abre hacia la IZQUIERDA para no salirse por
   el borde derecho. Mayor especificidad que la regla móvil de .ft-filter-panel,
   así que gana en móvil y escritorio. */
.ft-filter-dropdown--end .ft-filter-panel {
    left: auto;
    right: 0;
}

.ft-filter-panel-clear {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.35rem 0.6rem;
    margin-bottom: 0.25rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--ft-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.ft-filter-panel-clear:hover { background: var(--ft-gold-soft); color: var(--ft-navy); }

.ft-filter-panel-empty {
    padding: 0.5rem 0.6rem;
    color: var(--ft-muted);
    font-size: 0.82rem;
}

.ft-year-group { border-radius: 0.5rem; }

.ft-year-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ft-navy);
    list-style: none;
}

.ft-year-summary::-webkit-details-marker { display: none; }
.ft-year-summary:hover { background: var(--ft-gold-soft); }

.ft-month-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem 0.35rem 0.5rem 0.6rem;
}

.ft-month-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--ft-text);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.ft-month-item:hover { background: var(--ft-gold-soft); border-color: var(--ft-gold); }

.ft-month-item--active {
    background: var(--ft-navy);
    border-color: var(--ft-navy);
    color: #fff;
}

.ft-filter-count {
    display: inline-block;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: rgba(201, 168, 76, 0.22);
    color: var(--ft-navy);
    font-size: 0.72rem;
    font-weight: 700;
}

.ft-month-item--active .ft-filter-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

@media (max-width: 600px) {
    .ft-events-search { max-width: 100%; flex-basis: 100%; }
    /* El botón "Date" vive a la izquierda de la barra, así que anclamos el
       panel por la izquierda (right:0 lo empujaba fuera de pantalla y cortaba
       los años). Cap al ancho del viewport para que nunca desborde. */
    .ft-filter-panel {
        left: 0;
        right: auto;
        min-width: 240px;
        max-width: calc(100vw - 2rem);
    }
}

/* -------------------------------------------------------------------------
   Event detail — back link
   ------------------------------------------------------------------------- */

.ft-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ft-muted);
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all 0.15s ease;
    margin-bottom: 1rem;
}

.ft-back-link:hover {
    background: var(--ft-panel);
    color: var(--ft-navy);
    border-color: var(--ft-border);
    box-shadow: var(--ft-shadow);
}

/* -------------------------------------------------------------------------
   Event detail — compact hero
   ------------------------------------------------------------------------- */

.ft-hero--compact {
    padding: 2.5rem 1.5rem 2rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.ft-hero--compact h1 {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    line-height: 1.1;
    margin: 0.25rem 0 0.75rem;
}

/* Slim variant — even less vertical presence for detail pages. */
.ft-hero--slim {
    padding: 1.75rem 1.5rem 1.5rem;
    margin-bottom: 2rem;
    border-radius: 0 0 18px 18px;
}

.ft-hero--slim h1 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin-bottom: 0.5rem;
}

.ft-hero--slim::after {
    /* smaller decorative blob so the slim hero doesn't feel top-heavy */
    width: 220px;
    height: 220px;
    background: radial-gradient(circle at 70% 30%, rgba(201, 168, 76, 0.20), transparent 65%);
}

/* -------------------------------------------------------------------------
   Event detail hero — cover image with navy overlay (TracTrac-style)
   ------------------------------------------------------------------------- */

.ft-event-hero {
    position: relative;
    isolation: isolate;              /* keep overlay's z-index local */
    min-height: clamp(240px, 28vw, 340px);
    padding: 2.75rem 1.75rem 2.25rem;
    margin: 0 -12px 2rem;
    border-radius: 0 0 22px 22px;
    background: linear-gradient(135deg, var(--ft-navy) 0%, var(--ft-navy-2) 100%);
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

/* When a cover image is provided, layer it under the overlay. */
.ft-event-hero--covered {
    background-image: var(--ft-cover);
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
}

/* Navy gradient overlay — keeps text legible against any cover photo.
   Stronger on the bottom-left where the text sits, softer top-right so a
   tiny amount of the image still shows through. */
.ft-event-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg,
            rgba(15, 27, 46, 0.88) 0%,
            rgba(15, 27, 46, 0.72) 50%,
            rgba(15, 27, 46, 0.55) 100%),
        radial-gradient(circle at 88% 12%, rgba(201, 168, 76, 0.22), transparent 55%);
    z-index: -1;
}

/* No-cover fallback: no image needed, use the navy gradient from the parent
   and add a subtle gold blob for warmth. */
.ft-event-hero:not(.ft-event-hero--covered) .ft-event-hero-overlay {
    background: radial-gradient(circle at 75% 25%,
        rgba(201, 168, 76, 0.20), transparent 60%);
}

.ft-event-hero-inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.ft-event-hero h1 {
    color: #fff;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0.35rem 0 1rem;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.ft-event-hero .hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.ft-event-hero .hero-meta-item {
    display: inline-flex;
    align-items: center;
}

.ft-event-hero .hero-meta-item + .hero-meta-item::before {
    content: "·";
    color: var(--ft-gold-soft);
    margin-right: 0.75rem;
    font-weight: 700;
}

.ft-event-hero .hero-source-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

.ft-hero--compact .hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
}

.ft-hero--compact .hero-meta-item {
    display: inline-flex;
    align-items: center;
}

.ft-hero--compact .hero-meta-item + .hero-meta-item::before {
    content: "·";
    color: var(--ft-gold-soft);
    margin-right: 0.75rem;
    font-weight: 700;
}

.hero-source-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.hero-source-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1.15rem;
    background: var(--ft-navy);           /* solid navy — no more grey wash */
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(15, 27, 46, 0.35);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
                box-shadow 0.15s ease, transform 0.15s ease;
}

.hero-source-link:hover {
    background: var(--ft-gold);
    border-color: var(--ft-gold);
    color: var(--ft-navy);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(201, 168, 76, 0.45);
}

/* Follow-event toggle in the hero — a hero-source-link rendered as <button>.
   Active (following) state is solid gold; hover on active hints removal. */
.ft-follow-form {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.ft-follow-btn {
    cursor: pointer;
}

.ft-follow-btn--active {
    background: var(--ft-gold);
    border-color: var(--ft-gold);
    color: var(--ft-navy);
    font-weight: 600;
}

.ft-follow-btn--active:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.92);
    color: #a13c2f;
    box-shadow: 0 2px 8px rgba(15, 27, 46, 0.35);
}

/* Auto-detected variant: same gold look as --active but rendered as a
   static <span> — no hover state, no cursor. Mirrors the static card star. */
.ft-follow-btn--auto {
    background: var(--ft-gold);
    border-color: var(--ft-gold);
    color: var(--ft-navy);
    font-weight: 600;
    cursor: default;
}

.ft-follow-btn--auto:hover {
    background: var(--ft-gold);
    border-color: var(--ft-gold);
    color: var(--ft-navy);
    transform: none;
    box-shadow: 0 2px 8px rgba(15, 27, 46, 0.35);
}

/* Corner follow-star on event cards — toggle without opening the event.
   Sits above the card <a> (sibling, absolutely positioned in the col). */
.ft-card-follow {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;   /* now measured from the card edge, not the col */
    z-index: 2;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.ft-card-follow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--ft-border);
    color: var(--ft-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 27, 46, 0.08);
    transition: color 0.15s ease, border-color 0.15s ease,
                box-shadow 0.15s ease, transform 0.15s ease;
}

.ft-card-follow-btn:hover {
    color: var(--ft-gold);
    border-color: var(--ft-gold);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(201, 168, 76, 0.3);
}

.ft-card-follow-btn--active {
    color: var(--ft-gold);
    border-color: var(--ft-gold);
    background: #fff;
}

.ft-card-follow-btn--active:hover {
    color: #a13c2f;
    border-color: #a13c2f;
}

/* Auto-detected variant: same look as the followed button, but a static
   <span> — no cursor, no hover state. User can't remove it from here;
   the event is here because a boat from their fleet races in it. */
.ft-card-follow-static {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--ft-gold);
    color: var(--ft-gold);
    font-size: 1rem;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(15, 27, 46, 0.08);
    cursor: default;
}

/* Keep long card titles from running under the corner star. */
.ft-card-link .card-title {
    padding-right: 1.9rem;
}

/* Signed-in balance line on the pricing page. */
.ft-credits-balance {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.45rem 1.1rem;
    background: var(--ft-gold-soft);
    border-radius: 999px;
    color: var(--ft-navy);
    font-size: 0.9rem;
}

.hero-source-link--gold {
    background: var(--ft-gold);
    border-color: var(--ft-gold);
    color: var(--ft-navy);
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(201, 168, 76, 0.4);
}

.hero-source-link--gold:hover {
    background: var(--ft-gold-soft);
    border-color: var(--ft-gold-soft);
    color: var(--ft-navy);
    box-shadow: 0 6px 18px rgba(201, 168, 76, 0.55);
}

.hero-source-link span {
    font-size: 0.95em;
    font-weight: 700;
    line-height: 1;
}

/* -------------------------------------------------------------------------
   Event detail — buy card
   ------------------------------------------------------------------------- */

.buy-card {
    background: var(--ft-panel);
    border-radius: 16px;
    border: 1px solid var(--ft-border);
    box-shadow: var(--ft-shadow);
    padding: 1.75rem 1.75rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 2rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.buy-card::before {
    /* subtle gold accent stripe on the left */
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--ft-gold) 0%, var(--ft-gold-soft) 100%);
}

@media (max-width: 720px) {
    .buy-card {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

.buy-card-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.buy-card-price .tier-pill {
    display: inline-block;
    background: var(--ft-navy);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
}

.buy-card-price .price-figure {
    font-family: 'Fraunces', serif;
    color: var(--ft-navy);
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}

.buy-card-price .price-figure small {
    font-size: 1rem;
    font-weight: 500;
    color: var(--ft-muted);
    margin-left: 0.3rem;
}

.buy-card-price .price-caption {
    display: block;
    max-width: 22rem;
}

.buy-card-action {
    padding-left: 0;
    border-left: 1px solid var(--ft-border);
    padding-left: 2rem;
}

@media (max-width: 720px) {
    .buy-card-action {
        border-left: 0;
        padding-left: 0;
        padding-top: 0.5rem;
        border-top: 1px solid var(--ft-border);
    }
}

.buy-card-form .form-select {
    min-width: 180px;
    max-width: 260px;
}

.buy-card-signin p,
.buy-card-warn p {
    color: var(--ft-text);
    font-size: 0.95rem;
}

/* -------------------------------------------------------------------------
   Event detail — fleet pills
   ------------------------------------------------------------------------- */

.fleet-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.boat-pill {
    display: inline-block;
    background: var(--ft-panel);
    border: 1px solid var(--ft-border);
    color: var(--ft-navy);
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    /* line-height explícito en TODAS las variantes: los pills que son
       <button> viven dentro de .boat-pill-form (line-height:0, para quitar
       el hueco bajo el botón) y sin esto heredarían 0 y colapsarían de alto
       (el pill "yours"/★ salía más bajo que los "+"). */
    line-height: 1.4;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(15, 27, 46, 0.04);
}

.boat-pill--yours {
    background: linear-gradient(135deg, var(--ft-gold) 0%, var(--ft-gold-soft) 100%);
    color: var(--ft-navy);
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(201, 168, 76, 0.35);
}

.boat-pill--yours::before {
    content: "★ ";
    color: var(--ft-navy);
}

/* When the yours-pill is a button (event fleet), clicking removes the boat.
   Hover flips the star to × and dims the gold to signal the removal. */
button.boat-pill--yours {
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

button.boat-pill--yours:hover,
button.boat-pill--yours:focus-visible {
    background: linear-gradient(135deg, var(--ft-gold-soft) 0%, var(--ft-panel) 100%);
    border-color: var(--ft-border);
    box-shadow: 0 1px 4px rgba(15, 27, 46, 0.12);
    transform: translateY(-1px);
}

button.boat-pill--yours:hover::before,
button.boat-pill--yours:focus-visible::before {
    content: "\00d7 ";  /* × */
    color: #a13c2f;
}

.boat-pill--more {
    background: transparent;
    border-style: dashed;
    color: var(--ft-muted);
}

/* "+N more" es un botón que revela los barcos ocultos (.fleet-pill-overflow). */
button.boat-pill--more {
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

button.boat-pill--more:hover,
button.boat-pill--more:focus-visible {
    border-color: var(--ft-gold);
    color: var(--ft-navy);
    background: var(--ft-gold-soft);
}

/* Interactive pill: click to add this boat to the user's fleet. */
.boat-pill-form {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 0;   /* prevents extra whitespace under the button */
}

.boat-pill--add {
    background: var(--ft-panel);
    border: 1px solid var(--ft-border);
    color: var(--ft-navy);
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.35rem 0.85rem 0.35rem 0.7rem;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(15, 27, 46, 0.04);
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.4;   /* undo the form's line-height:0 for the label */
}

.boat-pill--add:hover,
.boat-pill--add:focus {
    background: var(--ft-gold-soft);
    border-color: var(--ft-gold);
    color: var(--ft-navy);
    box-shadow: 0 3px 10px rgba(201, 168, 76, 0.35);
    transform: translateY(-1px);
}

.boat-pill--add:focus-visible {
    outline: 2px solid var(--ft-gold);
    outline-offset: 2px;
}

.boat-pill-add-plus {
    display: inline-block;
    width: 1em;
    text-align: center;
    color: var(--ft-gold);
    font-weight: 700;
    margin-right: 0.15rem;
    transition: color 0.15s ease;
}

.boat-pill--add:hover .boat-pill-add-plus,
.boat-pill--add:focus .boat-pill-add-plus {
    color: var(--ft-navy);
}

/* -------------------------------------------------------------------------
   Event detail — Race list Request buttons
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Event detail — request footer (inside races card)
   ------------------------------------------------------------------------- */

.ft-request-footer {
    background: var(--ft-cream);
    border-top: 1px solid var(--ft-border);
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    color: var(--ft-text);
}

/* -------------------------------------------------------------------------
   Event detail — flush list-group inside a card
   ------------------------------------------------------------------------- */

.card .list-group-flush .list-group-item {
    border-color: var(--ft-border);
    background: transparent;
}

.card .list-group-flush .list-group-item:first-child { border-top: 0; }
.card .list-group-flush .list-group-item:last-child { border-bottom: 0; }

/* =========================================================================
   HOME PAGE
   ========================================================================= */

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.ft-home-hero {
    position: relative;
    /* Fallback for browsers without image-set(): optimized JPG. */
    background: url("../img/hero-home.aa039b177e0d.jpg") center bottom / cover no-repeat,
                linear-gradient(135deg, var(--ft-navy) 0%, var(--ft-navy-2) 60%, #1e3350 100%);
    /* Modern browsers pick WebP (~106 KB) over the JPG (~149 KB). Browsers
       that don't understand image-set() discard this line and keep the
       fallback above. */
    background: image-set(url("../img/hero-home.d634f9eb2b38.webp") type('image/webp'),
                          url("../img/hero-home.aa039b177e0d.jpg") type('image/jpeg')) center bottom / cover no-repeat,
                linear-gradient(135deg, var(--ft-navy) 0%, var(--ft-navy-2) 60%, #1e3350 100%);
    color: #fff;
    padding: 5rem 1.5rem 4.5rem;
    overflow: hidden;
}

.ft-home-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg,
            rgba(15, 27, 46, 0.88) 0%,
            rgba(15, 27, 46, 0.72) 50%,
            rgba(15, 27, 46, 0.55) 100%);
    pointer-events: none;
}

.ft-home-hero-inner {
    max-width: 780px;
    position: relative;
    z-index: 1;
}

.ft-home-hero h1 {
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.08;
    margin: 0.5rem 0 1rem;
}

.ft-home-hero-sub {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.1rem;
    max-width: 580px;
    margin-bottom: 1.5rem;
    line-height: 1.55;
}

.ft-home-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Nota bajo los botones del hero. Sobre la foto oscura del hero, asi que
   hereda el tratamiento de .ft-home-hero-sub (blanco translucido) y no el
   gris de .text-muted, que ahi no se leeria. */
.ft-home-hero-note {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    margin: 1rem 0 0;
    max-width: 580px;
}

/* ── Step cards (How it works) ────────────────────────────────────────────── */

.ft-step-card {
    background: var(--ft-panel);
    border: 1px solid var(--ft-border);
    border-radius: 14px;
    padding: 2rem 1.5rem;
    box-shadow: var(--ft-shadow);
    height: 100%;
}

.ft-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ft-navy);
    color: var(--ft-gold-soft);
    font-family: 'Fraunces', serif;
    font-size: 1.3rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(15, 27, 46, 0.18);
}

/* ── Example report section ───────────────────────────────────────────────── */

.ft-home-example {
    background: #fff;
}

.ft-report-frame-wrapper {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--ft-shadow-lg);
}

.ft-report-placeholder {
    background: var(--ft-panel);
    border: 2px dashed var(--ft-border-strong);
    border-radius: 14px;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ft-report-placeholder-inner {
    padding: 2rem;
}

/* ── Sample-report carousel (home) ────────────────────────────────────────
   Slides horizontales con scroll-snap; cada slide es un iframe del sample
   report en modo embed (?section=…). Navegación con flechas y dots — el
   swipe nativo también funciona en el borde del slide (el interior del
   iframe captura sus propios gestos). */
.ft-report-carousel {
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    /* Sin borde ni sombra: la seccion .ft-home-example es blanca y el informe
       tambien, asi la card se funde con el fondo (sin contraste). */
    background: #fff;
}

.ft-report-carousel-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #fff;
}

.ft-report-carousel-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}

.ft-report-carousel-title {
    font-weight: 600;
    color: var(--ft-navy);
    font-size: 1.15rem;
    white-space: nowrap;
}

.ft-report-carousel-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--ft-border-strong);
    background: var(--ft-panel);
    color: var(--ft-navy);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.ft-report-carousel-btn:hover {
    background: var(--ft-gold);
    border-color: var(--ft-gold);
    color: var(--ft-navy);
}

.ft-report-carousel-dots {
    display: flex;
    gap: 0.4rem;
}

.ft-report-carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--ft-border-strong);
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

.ft-report-carousel-dot--active {
    background: var(--ft-gold);
    transform: scale(1.25);
}

.ft-report-slides {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;             /* la altura la fija JS al apartado activo */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;          /* la navegación es flechas/dots */
    /* align-items: flex-start para que un slide no herede la altura del mas
       alto; cada iframe lleva su propia altura de contenido (via JS). */
    align-items: flex-start;
    height: 640px;                  /* fallback antes de que JS mida */
    transition: height 0.25s ease;
}

.ft-report-slides::-webkit-scrollbar { display: none; }

.ft-report-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.ft-report-slide iframe {
    display: block;
    width: 100%;
    height: 640px;                  /* fallback; JS lo ajusta al contenido */
    border: none;
    background: #fff;
}

/* ── Feature cards (What's included) ──────────────────────────────────────── */

.ft-feature-card {
    background: var(--ft-panel);
    border: 1px solid var(--ft-border);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: var(--ft-shadow);
    height: 100%;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ft-feature-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ft-shadow-lg);
}

/* ── Find your event (home S5) ────────────────────────────────────────────── */

.ft-home-find {
    background: var(--ft-cream-2);
}

.ft-home-find-inner {
    max-width: 660px;
    margin: 0 auto;
    text-align: center;
}

.ft-home-search {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

/* min-width:0 evita que el input desborde el flex en pantallas estrechas. */
.ft-home-search .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.ft-home-search .btn {
    flex: 0 0 auto;
}

/* Boton "Show all events" + nota de proveedor no soportado, en la misma fila.
   text-align:left porque el contenedor centra, y una nota de 2-3 lineas
   centrada al lado de un boton queda desalineada. */
.ft-home-find-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1.25rem;
    text-align: left;
}

.ft-home-find-note {
    max-width: 36ch;
}

@media (max-width: 575.98px) {
    .ft-home-search {
        flex-direction: column;
    }
    /* Apilado y centrado: en movil no hay ancho para boton + nota en fila. */
    .ft-home-find-actions {
        flex-direction: column;
        gap: 0.85rem;
        text-align: center;
    }
    .ft-home-find-note {
        max-width: none;
    }
}

/* ── Data sources section (SIN USO desde 2026-07-21) ──────────────────────── */
/* La seccion S5 de la home era tres cards con los wordmarks de los
   proveedores; se sustituyo por el buscador de eventos (.ft-home-find) al
   dejar la home de nombrar proveedores. Se conserva el CSS por si la seccion
   vuelve; si se decide que no, borrar este bloque y el @media de mas abajo. */

.ft-home-sources {
    background: var(--ft-cream-2);
}

.ft-sources-logos {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.ft-source-logo-box {
    background: var(--ft-panel);
    border: 1px solid var(--ft-border);
    border-radius: 14px;
    padding: 1.75rem 2.5rem;
    box-shadow: var(--ft-shadow);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 160px;
    /* Clickable: cada card enlaza al sitio oficial del proveedor. */
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.ft-source-logo-box:hover,
.ft-source-logo-box:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--ft-shadow-lg);
    border-color: var(--ft-gold);
    outline: none;
}

.ft-source-logo-text {
    font-family: 'Fraunces', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ft-navy);
    letter-spacing: -0.01em;
}

/* ── CTA final de la home ─────────────────────────────────────────────────── */

.ft-home-cta {
    background: linear-gradient(135deg, var(--ft-navy) 0%, var(--ft-navy-2) 100%);
    color: #fff;
}

/* 1.5rem, no 0.75: al quitar el teaser de precio (2026-07-21) este margen es
   lo unico que separa el titular de los botones. Antes lo daba el <p>. */
.ft-home-cta h2 {
    color: #fff;
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    margin-bottom: 1.5rem;
}

/* SIN USO desde 2026-07-21 (fuera el teaser "Reports from 50 EUR per event").
   Se conserva por si el precio vuelve a la home; si no, borrado limpio. */
.ft-home-cta-price {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.ft-home-cta-price strong {
    color: var(--ft-gold-soft);
}

/* =========================================================================
   PRICING PAGE
   ========================================================================= */

.ft-pricing-card {
    background: var(--ft-panel);
    border: 1px solid var(--ft-border);
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    box-shadow: var(--ft-shadow);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ft-pricing-card--featured {
    border-color: var(--ft-gold);
    box-shadow: 0 8px 30px rgba(201, 168, 76, 0.18);
    position: relative;
}

.ft-pricing-card--featured::before {
    content: "MOST POPULAR";
    position: absolute;
    top: -0.7rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ft-gold);
    color: var(--ft-navy);
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    padding: 0.25rem 0.85rem;
    border-radius: 999px;
    white-space: nowrap;
}

.ft-pricing-price {
    font-family: 'Fraunces', serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--ft-navy);
    line-height: 1;
    margin: 0.6rem 0 0.4rem;
}

.ft-pricing-price small {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ft-muted) !important;
}

.ft-pricing-features {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    flex-grow: 1;
}

.ft-pricing-features li {
    padding: 0.3rem 0;
    font-size: 0.84rem;
    color: var(--ft-text);
    border-bottom: 1px solid var(--ft-border);
}

.ft-pricing-features li:last-child {
    border-bottom: 0;
}

.ft-pricing-features li::before {
    content: "\2713\00a0";
    color: var(--ft-green);
    font-weight: 700;
}

/* ── Features comunes (una sola vez, fuera de las tarjetas) ───────────────── */

/* El fondo de la pagina ya es cream: este bloque va en panel + sombra para
   que se lea como pieza propia y no se funda con el fondo. */
.ft-pricing-included {
    background: var(--ft-panel);
    border: 1px solid var(--ft-border);
    border-top: 3px solid var(--ft-gold);
    border-radius: 16px;
    box-shadow: var(--ft-shadow);
    padding: 1.4rem 1.5rem;
    text-align: center;
}

.ft-pricing-included-label {
    font-size: 0.78rem;
    margin-bottom: 1rem;
}

.ft-pricing-included-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 2rem;
}

.ft-pricing-included-list li {
    font-size: 1rem;
    font-weight: 500;
    color: var(--ft-navy);
    white-space: nowrap;
}

.ft-pricing-included-list li::before {
    content: "\2713\00a0";
    color: var(--ft-green);
    font-weight: 700;
}

/* Lo que NO depende del pack: gratis con la cuenta. Va fuera de la caja para
   que no se confunda con lo que desbloquea la compra. */
.ft-pricing-free-note {
    text-align: center;
    font-size: 0.84rem;
    color: var(--ft-muted);
    margin-top: 0.7rem;
}

/* ── Precio por evento y ahorro ───────────────────────────────────────────── */

.ft-pricing-unit {
    color: var(--ft-muted);
    font-size: 0.9rem;
    margin: 0;
}

.ft-pricing-save {
    display: inline-block;
    align-self: center;
    margin: 0.6rem 0 0;
    padding: 0.18rem 0.7rem;
    border-radius: 999px;
    background: var(--ft-green-bg);
    color: var(--ft-green);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* ── Banda "Custom plan" (precio a medida, no compite con los packs).
   Las clases conservan el nombre `season` de cuando la banda era solo el
   season pass; el copy de hoy es "Need something else?". ─────────────────── */

.ft-pricing-season {
    background: var(--ft-panel);
    border: 1px solid var(--ft-border);
    border-radius: 16px;
    box-shadow: var(--ft-shadow);
}

/* Banda del primer informe gratis. Misma anatomia que .ft-pricing-season
   (reusa sus clases de titulo/texto/cta) pero SIN sombra y con el borde
   dorado: tiene que leerse como el escalon de entrada, no como un cuarto
   pack compitiendo con los precios de al lado. */
.ft-pricing-free {
    background: var(--ft-panel);
    border: 1px solid var(--ft-gold);
    border-radius: 16px;
}

.ft-pricing-season-title {
    font-family: 'Fraunces', serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ft-navy);
    margin: 0.35rem 0 0.3rem;
}

.ft-pricing-season-text {
    color: var(--ft-muted);
    font-size: 0.9rem;
    margin: 0;
    max-width: 46ch;
}

.ft-pricing-season-cta {
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .ft-pricing-season-cta {
        width: 100%;
        margin-top: 1rem;
    }

    .ft-pricing-season-text {
        max-width: none;
    }
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.ft-faq {
    max-width: 720px;
    margin: 0 auto;
}

.ft-faq-item {
    background: var(--ft-panel);
    border: 1px solid var(--ft-border);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    box-shadow: var(--ft-shadow);
    overflow: hidden;
}

.ft-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.25rem;
    font-weight: 500;
    color: var(--ft-navy);
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.ft-faq-item summary::-webkit-details-marker { display: none; }
.ft-faq-item summary::marker { content: ""; }

.ft-faq-item summary::after {
    content: "+";
    font-size: 1.2rem;
    color: var(--ft-gold);
    font-weight: 700;
    flex-shrink: 0;
    margin-left: 1rem;
    transition: transform 0.2s ease;
}

.ft-faq-item[open] summary::after {
    content: "\2212";
}

.ft-faq-item .ft-faq-body,
.ft-faq-item > p {
    margin: 0;
    padding: 0 1.25rem 1rem;
    color: var(--ft-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    /* Justificado SIN partir palabras (decision de Mario): nada de guiones a
       final de linea. `hyphens: manual` deja fuera la particion automatica
       del navegador; el precio es que en pantallas estrechas el justificado
       abre mas hueco entre palabras. No volver a poner `hyphens: auto`. */
    text-align: justify;
    -webkit-hyphens: manual;
    hyphens: manual;
}

/* =========================================================================
   ABOUT PAGE
   ========================================================================= */

.ft-about-section {
    max-width: 740px;
    margin: 0 auto;
}

/* Prosa justificada, como en Word: se estiran los espacios y NUNCA se parten
   las palabras (nada de hyphens: auto, deja guiones a mitad de palabra).
   Bootstrap 5 elimino .text-justify, por eso va aqui y no como clase de
   utilidad en la plantilla.
   `ft-about-prose` la usa el About por bloques; `ft-legal-prose` va en el
   contenedor de las tres paginas legales (terms, privacy, data sources) y
   cubre tambien los <li>, que ahi llevan parrafos enteros. */
.ft-about-prose p,
.ft-legal-prose p,
.ft-legal-prose li {
    text-align: justify;
    hyphens: manual;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
}

.ft-about-highlight {
    background: var(--ft-panel);
    border: 1px solid var(--ft-border);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    box-shadow: var(--ft-shadow);
    text-align: center;
}

/* =========================================================================
   ACCOUNT / SETTINGS
   ========================================================================= */

.ft-settings-tabs {
    gap: 0.35rem;
}

.ft-settings-tabs .nav-link {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ft-muted);
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    transition: all 0.15s ease;
}

.ft-settings-tabs .nav-link:hover {
    color: var(--ft-navy);
    background: var(--ft-cream-2);
}

.ft-settings-tabs .nav-link.active {
    background: var(--ft-navy);
    color: #fff;
}

/* Placeholder block (billing/credits/notifications coming-soon) */
.ft-placeholder-block {
    background: var(--ft-cream);
    border: 1px dashed var(--ft-border-strong);
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
}

/* Notification toggles */
.ft-notif-toggle {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.1rem;
    margin: 0 -1.1rem;
    border-radius: 12px;
    transition: background-color 0.15s ease;
}

.ft-notif-toggle + .ft-notif-toggle {
    margin-top: 0.35rem;
}

.ft-notif-toggle:hover {
    background: var(--ft-cream-2);
}

/* =========================================================================
   MY BOATS
   ========================================================================= */

.ft-boat-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ft-boat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ft-shadow-lg);
}

.ft-boat-stats {
    display: flex;
    gap: 1.25rem;
}

.ft-boat-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ft-boat-stat-value {
    font-family: 'Fraunces', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ft-navy);
    line-height: 1;
}

.ft-boat-stat-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ft-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.2rem;
}

/* =========================================================================
   REPORTS DASHBOARD
   ========================================================================= */

.ft-report-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ft-report-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ft-shadow-lg);
}

/* Fila de informe FALLIDO (My reports): toda la fila lleva a la regata dentro
   de la pagina del evento, que es donde se corrige la hora de salida. El
   .stretched-link del titulo cubre la fila entera, asi que las acciones de la
   derecha tienen que quedar POR ENCIMA o dejarian de ser clicables. El hover
   refuerza que la fila es pulsable (fondo + subrayado + la pista en negrita). */
.ft-report-row--linked {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ft-report-row--linked:hover {
    background: var(--ft-cream);
}

.ft-report-row--linked .ft-report-actions {
    position: relative;
    z-index: 2;
}

.ft-failed-open {
    color: inherit;
    text-decoration: none;
}

.ft-report-row--linked:hover .ft-failed-open,
.ft-failed-open:focus-visible {
    color: inherit;
    text-decoration: underline;
}

.ft-failed-cta {
    color: var(--ft-muted);
    transition: color 0.15s ease;
}

.ft-report-row--linked:hover .ft-failed-cta {
    color: var(--ft-navy);
    font-weight: 700;
}

/* =========================================================================
   VIEW TOGGLE (list / calendar)
   ========================================================================= */

.ft-view-toggle {
    display: flex;
    gap: 0.25rem;
    background: var(--ft-cream-2);
    border-radius: 10px;
    padding: 0.2rem;
}

.ft-view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    border-radius: 8px;
    color: var(--ft-muted);
    text-decoration: none;
    transition: all 0.15s ease;
}

.ft-view-toggle-btn:hover {
    color: var(--ft-navy);
    background: var(--ft-panel);
    text-decoration: none;
}

.ft-view-toggle-btn--active {
    color: var(--ft-navy);
    background: var(--ft-panel);
    box-shadow: 0 1px 3px rgba(15, 27, 46, 0.08);
}

/* My reports: lineup reports tabulados bajo su informe de regata. */
.ft-report-child {
    padding-left: 2.75rem !important;
    background: rgba(15, 27, 46, 0.025);
}

/* =========================================================================
   CALENDAR
   ========================================================================= */

.ft-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.ft-cal-title {
    font-family: 'Fraunces', serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ft-navy);
    margin: 0;
}

.ft-cal-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ft-border-strong);
    background: var(--ft-panel);
    color: var(--ft-navy);
    font-size: 1rem;
    cursor: pointer;
    box-shadow: var(--ft-shadow);
    transition: all 0.15s ease;
}

.ft-cal-nav:hover {
    background: var(--ft-navy);
    color: #fff;
    border-color: var(--ft-navy);
}

.ft-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    margin-bottom: 1px;
}

.ft-cal-weekdays span {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ft-muted);
    padding: 0.5rem 0;
}

/* Month grid = stacked week rows. Each week is a 7-column background of day
   cells with an absolutely-positioned overlay of event bars that span days
   (Google-Calendar style), labeled once per week. Borders (no gap) keep the
   columns at an exact 1/7 so the bars' left/width percentages line up. */
.ft-cal-grid {
    --cal-daynum-h: 26px;               /* vertical space above the first bar */
    --cal-bar-h: 18px;
    --cal-bar-gap: 2px;
    --cal-lanes: 3;                     /* overridden inline from the view */
    border: 1px solid var(--ft-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--ft-shadow);
}

.ft-cal-week {
    position: relative;
}

.ft-cal-week-bg {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.ft-cal-day {
    background: var(--ft-panel);
    min-width: 0;
    /* Uniform height for every week: day number + N lanes + a little room
       for the "+N" overflow marker at the bottom. */
    min-height: calc(var(--cal-daynum-h)
        + var(--cal-lanes) * (var(--cal-bar-h) + var(--cal-bar-gap)) + 10px);
    padding: 0.3rem;
    position: relative;
    border-right: 1px solid var(--ft-border);
    border-bottom: 1px solid var(--ft-border);
}

.ft-cal-day:nth-child(7) { border-right: 0; }
.ft-cal-week:last-child .ft-cal-day { border-bottom: 0; }

.ft-cal-day--outside {
    background: var(--ft-cream);
}

.ft-cal-day--outside .ft-cal-day-num {
    color: var(--ft-border-strong);
}

.ft-cal-day--today .ft-cal-day-num {
    background: var(--ft-navy);
    color: #fff;
}

.ft-cal-day-num {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ft-text);
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
}

/* Overlay of spanning event bars for the week. */
.ft-cal-bars {
    position: absolute;
    inset: 0;
    pointer-events: none;   /* clicks fall through to the cells below … */
}

.ft-cal-bar {
    position: absolute;
    /* left & width come inline as calc(%) with a 2px inset either side */
    height: var(--cal-bar-h);
    top: calc(var(--cal-daynum-h) + var(--lane) * (var(--cal-bar-h) + var(--cal-bar-gap)));
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 0.4rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 4px;
    background: rgba(15, 27, 46, 0.10);   /* default when the event has no boat color */
    color: var(--ft-navy);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: auto;                 /* … but the bars themselves are clickable */
    transition: filter 0.12s ease;
}

.ft-cal-bar:hover {
    filter: brightness(0.94);
    color: var(--ft-navy);
    text-decoration: none;
}

/* Continuation cues: flatten the edge where the event runs into an adjacent week. */
.ft-cal-bar--cl { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ft-cal-bar--cr { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.ft-cal-overflow {
    position: absolute;
    bottom: 2px;
    left: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--ft-muted);
}

/* Leyenda de colores por barco (calendario) */
.ft-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-bottom: 0.85rem;
}

.ft-cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: var(--ft-navy);
}

.ft-cal-legend-swatch {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 3px;
    border: 1px solid rgba(15, 27, 46, 0.12);
    flex-shrink: 0;
}

/* =========================================================================
   RESPONSIVE TWEAKS
   ========================================================================= */

@media (max-width: 768px) {
    .ft-home-hero {
        padding: 3.5rem 1rem 3rem;
    }

    .ft-sources-logos {
        flex-direction: column;
        align-items: center;
    }

    .ft-source-logo-box {
        width: 100%;
        max-width: 280px;
    }

    .ft-pricing-price {
        font-size: 2.2rem;
    }

    .ft-cal-day-num {
        font-size: 0.72rem;
        width: 20px;
        height: 20px;
        line-height: 20px;
    }

    .ft-cal-weekdays span {
        font-size: 0.62rem;
    }
}

/* Phones: shrink the spanning-bar layout via its CSS vars. The 7 columns fit
   the width (no horizontal scroll); shorter cells + smaller labels keep a few
   lanes readable, Google-Calendar style. */
@media (max-width: 576px) {
    .ft-cal-grid {
        --cal-daynum-h: 22px;
        --cal-bar-h: 15px;
    }

    .ft-cal-day {
        padding: 0.2rem 0.1rem;
    }

    .ft-cal-day-num {
        font-size: 0.72rem;
        width: 20px;
        height: 20px;
        line-height: 20px;
    }

    .ft-cal-bar {
        font-size: 0.58rem;
        padding: 0 0.25rem;
    }

    .ft-cal-overflow {
        font-size: 0.55rem;
    }

    .ft-cal-weekdays span {
        font-size: 0.58rem;
    }
}

/* -- Auth card (sign in / sign up) ---------------------------------------- */
.ft-auth-card {
    border: none;
    border-radius: var(--ft-radius);
    box-shadow: var(--ft-shadow);
    margin-top: 1rem;
}

.ft-auth-card .form-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--ft-navy);
}

.ft-auth-card .form-control {
    border-radius: 10px;
    padding: 0.625rem 0.875rem;
    border: 1.5px solid var(--ft-border);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ft-auth-card .form-control:focus {
    border-color: var(--ft-gold);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}

.ft-auth-card .btn-primary {
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
}

/* ── Month rail (Events page — Google-Photos-style vertical timeline) ──────
   Built by JS in event_list.html from the cards' data-month attributes.
   Sticky so it stays visible while scrolling a long list; hidden on <md
   (the d-none d-md-flex classes on the nav). */
.ft-events-with-rail { gap: 1.25rem; }

.ft-month-rail {
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 auto;
    position: sticky;
    top: 5.5rem;                     /* clear the fixed navbar */
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    padding: 0.25rem 0 0.25rem 0.75rem;
    border-left: 2px solid var(--ft-border-strong);
    scrollbar-width: thin;
}

.ft-month-rail-item {
    position: relative;
    display: block;
    border: none;
    background: none;
    padding: 0.2rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--ft-muted);
    cursor: pointer;
    border-radius: 6px;
    line-height: 1.4;
    transition: color 0.15s, background 0.15s;
}

.ft-month-rail-item:hover {
    color: var(--ft-navy);
    background: var(--ft-cream-2);
}

/* Tick dot on the timeline for the active month */
.ft-month-rail-item::before {
    content: '';
    position: absolute;
    left: -0.75rem;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-left: -5px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--ft-gold);
    opacity: 0;
    transition: opacity 0.15s;
}

.ft-month-rail-item--active {
    color: var(--ft-navy);
    font-weight: 600;
}

.ft-month-rail-item--active::before { opacity: 1; }

.ft-month-rail-item--all {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.6875rem;
    margin-bottom: 0.35rem;
}

.ft-month-rail-year {
    display: block;
    margin: 0.5rem 0 0.15rem;
    padding-left: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ft-navy);
}

/* Subheader de clase dentro de la lista de races (eventos multi-clase) */
.ft-race-class-header {
    background: var(--ft-sand, #f6f4ef);
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ft-race-class-header .eyebrow {
    margin: 0;
}

/* Cabecera de FLOTA dentro de una clase (ILCA 6 Red, ILCA 6 Gold...). Va un
   escalon por debajo de la de clase: sin fondo y con una linea a la izquierda,
   para que se lea como una subdivision y no como otra clase. Ver
   apps/catalog/race_flight.py. */
.ft-race-flight-header {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-left: 3px solid var(--ft-sand, #f6f4ef);
}
.ft-race-flight-header .ft-flight-name {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ft-muted, #6c757d);
}

/* -------------------------------------------------------------------------
   Password reveal (eye) toggle. A tiny JS shim in base.html wraps every
   <input type="password"> in .ft-pw-wrap and appends .ft-pw-toggle. The
   button sits inside the field on the right; the input gets right padding
   so the typed text never runs under the icon.
   ------------------------------------------------------------------------- */
.ft-pw-wrap {
    position: relative;
    display: block;
}
.ft-pw-wrap > input {
    /* !important so it beats themed field padding regardless of the
       surrounding container (.ft-auth-card .form-control is (0,2,0) and
       would otherwise win the shorthand and hide text under the icon). */
    padding-right: 2.75rem !important;
}
.ft-pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--ft-muted);
    cursor: pointer;
    border-radius: 0 var(--bs-border-radius, .375rem) var(--bs-border-radius, .375rem) 0;
}
.ft-pw-toggle:hover,
.ft-pw-toggle:focus-visible {
    color: var(--ft-navy);
}
.ft-pw-toggle:focus-visible {
    outline: 2px solid var(--ft-gold);
    outline-offset: -2px;
}
.ft-pw-toggle svg {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
}
/* Hide the "eye-off" icon by default; JS swaps which one is shown. */
.ft-pw-toggle .ft-pw-icon-off { display: none; }
.ft-pw-toggle.is-visible .ft-pw-icon-on  { display: none; }
.ft-pw-toggle.is-visible .ft-pw-icon-off { display: block; }

/* =========================================================================
   MOBILE / RESPONSIVE (2026-07-13)
   Pase de móvil: (1) hamburguesa del navbar visible sobre el navy + menú
   colapsado usable; (2) guard de overflow horizontal; (3) las filas de la
   card de regatas y del dashboard de informes apilan y dejan que los botones
   fluyan en pantallas estrechas (antes se salían del ancho del móvil).
   ========================================================================= */

/* --- (1) Navbar: el toggler usaba el icono OSCURO por defecto (invisible
   sobre el fondo navy). Lo forzamos claro y le damos borde/foco visibles. --- */
.navbar-fleettrace .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35);
    padding: 0.35rem 0.6rem;
}
.navbar-fleettrace .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.18);
}
.navbar-fleettrace .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='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Menú colapsado (< lg): separación de la marca + apilado legible. */
@media (max-width: 991.98px) {
    .navbar-fleettrace .navbar-collapse {
        margin-top: 0.6rem;
        padding-top: 0.6rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    .navbar-fleettrace .navbar-nav .nav-item { padding: 0.1rem 0; }
    .navbar-fleettrace .navbar-nav.align-items-lg-center {
        margin-top: 0.6rem;
        gap: 0.5rem;
        align-items: flex-start;
    }
    .navbar-fleettrace .navbar-user-email { padding-left: 0.85rem; }
}

/* --- (2) Guard de overflow horizontal (evita el scroll lateral por bleeds
   como el margen negativo del hero). No oculta contenido: solo la barra. --- */
html, body { overflow-x: hidden; }

/* --- (3) Filas de card (regatas + My reports) en móvil: la fila cabecera
   apila (nombre arriba, acciones abajo) y los grupos de botones fluyen en
   varias líneas en vez de salirse del ancho. --- */
@media (max-width: 575.98px) {
    .card > .list-group > .list-group-item > .d-flex.justify-content-between {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.6rem;
    }
    /* Columna de acciones: alinear a la izquierda y permitir varias líneas. */
    .card > .list-group > .list-group-item .flex-column.align-items-end {
        align-items: stretch !important;
    }
    .card > .list-group > .list-group-item .d-flex.align-items-center.gap-2 {
        flex-wrap: wrap;
    }
    /* My reports: el propio <li> es el flex (texto ↔ acciones). En móvil lo
       apilamos: info arriba (ancho completo) y botones abajo, centrados. */
    .ft-report-row {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.6rem;
    }
    .ft-report-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
    /* El hero del evento ocupa el ancho justo (sin recorte por el margen
       negativo cuando el contenedor ya va al 100%). */
    .ft-event-hero { padding-left: 1.15rem; padding-right: 1.15rem; }
}

/* ─── Estadísticas por barco (2026-07-21) ──────────────────────────────────
   Gráfico de evolución en SVG generado en servidor. No se usa librería de
   gráficos: static/vendor/ solo trae Bootstrap y htmx (el proyecto sacó todo de
   los CDN a propósito), y un SVG inline evita la dependencia, cumple la CSP sin
   nonce y se intercambia limpio con los swaps de htmx. */

.ft-chart-scroll {
    /* El SVG tiene viewBox fijo. En pantallas estrechas se hace scroll DENTRO
       de este contenedor para que la página nunca desborde en horizontal. */
    overflow-x: auto;
    overflow-y: hidden;
}

.ft-chart {
    display: block;
    width: 100%;
    min-width: 520px;
    height: auto;
}

.ft-chart-grid {
    stroke: var(--ft-border);
    stroke-width: 1;
}

.ft-chart-line {
    fill: none;
    stroke: var(--ft-navy);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Referencia de la flota en las metricas relativas (100% o 0 puntos). Va
   discontinua y en dorado para que no se confunda con la rejilla ni con la
   serie: es el listón contra el que se lee todo el grafico. */
.ft-chart-baseline {
    stroke: var(--ft-gold);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}

.ft-chart-baseline-label {
    fill: var(--ft-gold);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.ft-chart-dot {
    fill: var(--ft-navy);
    stroke: var(--ft-panel);
    stroke-width: 2;
}

/* Regata sin fila Finish (el barco no terminó): el valor sale de la última
   marca alcanzada, así que se marca en vez de presentarlo como un resultado
   final. */
.ft-chart-dot--provisional {
    fill: var(--ft-panel);
    stroke: var(--ft-gold);
    stroke-width: 2.5;
}

.ft-chart-tick,
.ft-chart-xlabel {
    fill: var(--ft-muted);
    font-size: 0.72rem;
}

/* ── Hover del grafico ─────────────────────────────────────────────────── */

.ft-chart-wrap {
    position: relative;
}

/* Banda de deteccion por regata: invisible pero captura el puntero en toda la
   altura de la columna, asi no hay que acertar en un punto de 4 px. */
.ft-chart-hit {
    fill: transparent;
    cursor: pointer;
}

.ft-chart-cursor {
    stroke: var(--ft-border-strong);
    stroke-width: 1;
    pointer-events: none;
}

.ft-chart-dot--active {
    r: 6;
    fill: var(--ft-gold);
    stroke: var(--ft-navy);
}

.ft-chart-tip {
    position: absolute;
    top: 4px;
    z-index: 5;
    min-width: 150px;
    padding: 0.5rem 0.65rem;
    background: var(--ft-navy);
    color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 6px 18px rgba(15, 27, 46, 0.28);
    /* No debe robarle el hover a la banda que hay debajo: sin esto, al pasar el
       tooltip por debajo del puntero se dispara un mouseout y parpadea. */
    pointer-events: none;
}

.ft-chart-tip-title {
    font-weight: 700;
    font-size: 0.82rem;
}

.ft-chart-tip-sub {
    font-size: 0.72rem;
    opacity: 0.72;
    margin-bottom: 0.3rem;
}

.ft-chart-tip-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ft-gold-soft);
}

.ft-chart-tip-row {
    font-size: 0.72rem;
    opacity: 0.85;
}

.ft-chart-tip-dnf {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ft-gold-soft);
    margin-top: 0.2rem;
}

/* Nombre del barco en la tarjeta de My boats. Es un enlace a su pagina de
   estadisticas, pero NO debe pintarse del azul de link de Bootstrap: en una
   rejilla de tarjetas los nombres en azul cantan mucho y compiten con los
   botones. Hereda el color del titulo y solo se subraya al pasar por encima. */
.ft-boat-name-link {
    color: inherit;
    text-decoration: none;
}

.ft-boat-name-link:hover,
.ft-boat-name-link:focus-visible {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Checkbox de evento/regata dentro del panel de filtros. */
.ft-check-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.3rem 0.6rem;
    border-radius: 0.5rem;
    color: var(--ft-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.ft-check-item:hover { background: var(--ft-gold-soft); }
.ft-check-item--nested { padding-left: 1.5rem; font-weight: 500; }
.ft-check-item input { cursor: pointer; }
.ft-check-item span:first-of-type { flex: 1; }

/* El desplegable de eventos lleva dos niveles anidados, así que necesita más
   ancho que el panel de filtros estándar. */
.ft-filter-panel--wide { min-width: 300px; }

/* -------------------------------------------------------------------------
   Ratings de tres columnas (vela | nombre | TCC). Solo se usa en eventos con
   flota catalogada por numero de vela; el resto sigue con la fila flex de dos
   columnas. Grid y no flex para que los nombres largos NO desalineen la
   columna del input: las tres columnas miden lo mismo en todas las filas y el
   texto que no cabe se recorta (text-truncate necesita min-width:0 dentro de
   un grid).
   ---------------------------------------------------------------------- */
.ft-rating-grid {
    display: grid;
    grid-template-columns: minmax(4.5rem, 8rem) 1fr 7rem;
}

.ft-rating-grid > * {
    min-width: 0;
}

.ft-rating-head {
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.12));
}

/* --- Comparador privado de tiempos por leg (/x/<token>/leg-times/) ---------
   Ver apps/reports/leg_compare.py. Todo va prefijado .lc- y colgando de las
   dos tablas de esa pagina: no toca ninguna otra superficie del sitio. */

/* Los tres selectores (evento, regata, rivales) comparten caja y TOPE de
   altura. Cada uno crece con su contenido y ninguno pasa de ese tope, que es
   el de la lista mas larga (los rivales): asi la fila de filtros se lee como
   un bloque y la lista de regatas deja de cortar la ultima por la mitad. */
.lc-picker {
  max-height: 8.5rem;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
  background: var(--bs-body-bg, #fff);
}
.lc-picker .form-check { min-height: auto; }
.lc-picker .form-check-label { cursor: pointer; }

/* Cabecera de dos niveles. La primera fila agrupa (Elapsed / Corrected) y la
   segunda nombra columnas; sin el fondo y el borde de grupo, las dos columnas
   llamadas "Overall" se leen como repetidas en vez de como dos medidas de lo
   mismo. */
.lc-summary thead .lc-groups th {
  border-bottom: 0;
  padding-bottom: 0.15rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bs-secondary-color, #6c757d);
  font-weight: 600;
  text-align: center;
}
.lc-summary thead .lc-cols th {
  border-top: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
  white-space: nowrap;
}
.lc-summary .lc-sep,
.lc-detail .lc-sep { border-left: 1px solid var(--bs-border-color, #dee2e6); }
.lc-summary tbody tr + tr td { border-top: 1px solid var(--bs-border-color, #dee2e6); }
.lc-summary tbody td { padding-top: 0.55rem; padding-bottom: 0.55rem; }

/* El valor manda y el conteo de legs acompana: tamanos muy distintos para que
   la vista salte de delta en delta sin tropezar con los "2 legs". */
.lc-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.lc-val-lg { font-size: 1.05rem; }
.lc-up { color: #157347; }
.lc-down { color: #b02a37; }
.lc-none { color: var(--bs-tertiary-color, #adb5bd); }
.lc-sub {
  display: block;
  font-size: 0.7rem;
  line-height: 1.1;
  color: var(--bs-tertiary-color, #adb5bd);
  font-variant-numeric: tabular-nums;
}

/* Barra divergente centrada en cero: a la derecha y verde si gana el barco del
   cliente, a la izquierda y roja si pierde. La escala es relativa al mayor
   delta de la vista (ver views_leg_compare), asi que siempre hay una barra
   llena y las demas se leen contra ella. */
.lc-bar-cell { display: inline-block; min-width: 9.5rem; }
.lc-bar {
  display: flex;
  height: 6px;
  margin: 0.2rem 0 0.15rem;
  background: var(--bs-secondary-bg, #f1f3f5);
  border-radius: 3px;
  overflow: hidden;
}
.lc-bar-l, .lc-bar-r { flex: 1 1 50%; display: flex; }
.lc-bar-l { justify-content: flex-end; border-right: 1px solid rgba(0, 0, 0, 0.18); }
.lc-bar-l i, .lc-bar-r i { display: block; height: 100%; }
.lc-bar-l i { background: #dc3545; border-radius: 3px 0 0 3px; }
.lc-bar-r i { background: #198754; border-radius: 0 3px 3px 0; }

.lc-flag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.3rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary-color, #6c757d);
}

/* Detalle. La cabecera se queda pegada porque la tabla es larga y el nombre de
   las columnas es lo unico que distingue "tu tiempo" de "el suyo". */
.lc-detail-wrap { max-height: 34rem; overflow-y: auto; }
.lc-detail thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bs-body-bg, #fff);
  box-shadow: inset 0 -1px 0 var(--bs-border-color, #dee2e6);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
  white-space: nowrap;
}
.lc-detail .lc-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-detail tbody tr:hover td { background: var(--bs-secondary-bg, #f8f9fa); }

/* Separador por regata. Repetir el nombre del evento en las 60 filas no aporta
   nada; se nombra una vez al empezar cada regata y en la fila se deja tenue por
   si alguien copia la tabla a una hoja de calculo. */
.lc-race-head td {
  background: var(--bs-secondary-bg, #f8f9fa);
  border-top: 2px solid var(--bs-border-color, #dee2e6);
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}
.lc-race { font-weight: 700; font-size: 0.85rem; }
.lc-event {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
}
.lc-leg {
  display: inline-block;
  min-width: 1.35rem;
  padding: 0 0.25rem;
  margin-right: 0.3rem;
  border-radius: 0.25rem;
  background: var(--bs-secondary-bg, #eef1f4);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--bs-secondary-color, #6c757d);
}
.lc-mode {
  display: inline-block;
  padding: 0 0.35rem;
  margin-right: 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.lc-mode-upwind { background: #e7f1ff; color: #0a58ca; }
.lc-mode-downwind { background: #fff3cd; color: #997404; }
.lc-mode-reach { background: #e8f5e9; color: #1b5e20; }

/* En movil la primera columna del detalle es ruido: el nombre de la regata ya
   sale en su separador. OJO con el :not(): la fila separadora tiene UNA sola
   celda con colspan, asi que sin excluirla se ocultaba justo el nombre de la
   regata, que es la informacion por la que se puede prescindir de la columna. */
@media (max-width: 575.98px) {
  .lc-detail thead th:first-child,
  .lc-detail tbody tr:not(.lc-race-head) td:first-child { display: none; }
}

/* Graficos de evolucion. SVG generado en Python (leg_compare.py), sin ninguna
   libreria: la CSP bloquea CDNs y la casa ya pinta asi el grafico de la pagina
   de barco. */
.lc-evo-wrap {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.5rem;
  padding: 0.35rem 0.5rem;
  background: var(--bs-body-bg, #fff);
  overflow-x: auto;
}
.lc-evo { width: 100%; min-width: 34rem; height: auto; display: block; }
.lc-evo-grid { stroke: var(--bs-border-color, #dee2e6); stroke-width: 1; }
/* El cero es la referencia de todo el grafico, no una linea de rejilla mas. */
.lc-evo-zero { stroke: var(--bs-secondary-color, #6c757d); stroke-width: 1.5; }
.lc-evo-tick, .lc-evo-xlabel, .lc-evo-xdate {
  font-size: 11px;
  fill: var(--bs-secondary-color, #6c757d);
  font-variant-numeric: tabular-nums;
}
.lc-evo-xdate { font-size: 10px; opacity: 0.75; }
.lc-evo-series polyline { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lc-evo-series circle { stroke: #fff; stroke-width: 1.2; }
/* Diana invisible del raton. Va DESPUES del punto visible en el marcado, asi
   que queda por encima y recibe el hover sin taparlo visualmente.

   El selector lleva `.lc-evo-series circle` delante A PROPOSITO: sin eso, la
   regla de arriba (que tambien es `.lc-evo-series circle`) gana por
   especificidad y le pinta a la diana el borde blanco de 1,2 px, o sea un aro
   claro de 22 px alrededor de cada punto. */
.lc-evo-series circle.lc-evo-hit {
  fill: transparent;
  stroke: none;
  cursor: pointer;
}
.lc-evo-wrap { position: relative; }
.lc-evo-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  transform: translate(-50%, -100%);
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-left: 3px solid var(--bs-secondary-color, #6c757d);
  border-radius: 0.35rem;
  padding: 0.3rem 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  font-size: 0.78rem;
  line-height: 1.25;
  white-space: nowrap;
}
.lc-evo-tip b { font-variant-numeric: tabular-nums; }
.lc-evo-tip .lc-tip-sub { color: var(--bs-secondary-color, #6c757d); font-size: 0.72rem; }

.lc-legend { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; }
.lc-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--bs-secondary-color, #6c757d);
}
.lc-legend-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; display: inline-block; }