/* Línea gráfica Fortech (Style Guide)
   Primarios: Oxford Blue, Zima Moon, Platinum Traveler, Circuit Copper, Nova V.
   Complementarios (solo acentos): Aquantis, Bittersweet, Medium slate blue.
   Tipografía: Univers (primaria) / Helvetica Neue (secundaria). Son fuentes con licencia:
   si están instaladas se usan, y si no, cae a Helvetica/Arial. */
:root {
    --ft-oxford: #111634;
    --ft-zima: #0c61d6;
    --ft-zima-dark: #0a4fae;
    --ft-platinum: #e6eae9;
    --ft-copper: #af5229;
    --ft-nova: #a7aae1;
    --ft-aquantis: #1cfeba;
    --ft-bittersweet: #e86252;

    --bs-primary: var(--ft-zima);
    --bs-primary-rgb: 12, 97, 214;
    --bs-link-color: var(--ft-zima);
    --bs-link-hover-color: var(--ft-zima-dark);
    --bs-body-color: var(--ft-oxford);
    --bs-body-bg: var(--ft-platinum);
    --bs-body-font-family: "Univers", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-border-radius: .5rem;
}

body { font-family: var(--bs-body-font-family); }
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.01em; }

/* Barra superior: fondo Oxford Blue con logo en blanco */
.ft-navbar { background: var(--ft-oxford); border-bottom: 3px solid var(--ft-zima); }
.ft-navbar .navbar-brand img { height: 48px; width: auto; display: block; }
.ft-navbar .nav-link { color: var(--ft-nova); font-weight: 500; }
.ft-navbar .nav-link:hover, .ft-navbar .nav-link:focus { color: #fff; }
.ft-navbar .navbar-text { color: var(--ft-platinum); }

/* Foto de Entra (o iniciales) junto al nombre */
.ft-user { display: inline-flex; align-items: center; gap: .5rem; }
.ft-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; background: var(--ft-nova); }
.ft-navbar .ft-avatar { box-shadow: 0 0 0 2px var(--ft-zima); }

/* Botones */
.btn-primary {
    --bs-btn-bg: var(--ft-zima); --bs-btn-border-color: var(--ft-zima);
    --bs-btn-hover-bg: var(--ft-zima-dark); --bs-btn-hover-border-color: var(--ft-zima-dark);
    --bs-btn-active-bg: var(--ft-zima-dark); --bs-btn-active-border-color: var(--ft-zima-dark);
    --bs-btn-disabled-bg: var(--ft-zima); --bs-btn-disabled-border-color: var(--ft-zima);
}
.btn-outline-danger {
    --bs-btn-color: var(--ft-bittersweet); --bs-btn-border-color: var(--ft-bittersweet);
    --bs-btn-hover-bg: var(--ft-bittersweet); --bs-btn-hover-border-color: var(--ft-bittersweet);
    --bs-btn-active-bg: var(--ft-bittersweet); --bs-btn-active-border-color: var(--ft-bittersweet);
}
.btn-outline-primary {
    --bs-btn-color: var(--ft-zima); --bs-btn-border-color: var(--ft-zima);
    --bs-btn-hover-bg: var(--ft-zima); --bs-btn-hover-border-color: var(--ft-zima);
    --bs-btn-active-bg: var(--ft-zima); --bs-btn-active-border-color: var(--ft-zima);
}
.btn-warning {
    --bs-btn-color: #fff; --bs-btn-bg: var(--ft-copper); --bs-btn-border-color: var(--ft-copper);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #8f4220; --bs-btn-hover-border-color: #8f4220;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #8f4220; --bs-btn-active-border-color: #8f4220;
}
.btn-outline-light { --bs-btn-border-color: var(--ft-nova); --bs-btn-color: var(--ft-platinum); }

/* Tarjetas y tablas */
.card { border: 0; box-shadow: 0 1px 3px rgba(17, 22, 52, .12); }
.table { --bs-table-bg: #fff; --bs-table-color: var(--ft-oxford); box-shadow: 0 1px 3px rgba(17, 22, 52, .12); border-radius: var(--bs-border-radius); overflow: hidden; }
.table > thead > tr > th { background: var(--ft-oxford); color: var(--ft-platinum); font-weight: 600; border-color: var(--ft-oxford); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--ft-zima); box-shadow: 0 0 0 .2rem rgba(12, 97, 214, .2); }
.form-check-input:checked { background-color: var(--ft-zima); border-color: var(--ft-zima); }

/* Insignias */
.text-bg-success { background-color: var(--ft-aquantis) !important; color: var(--ft-oxford) !important; }
.text-bg-danger { background-color: var(--ft-bittersweet) !important; color: #fff !important; }
.text-bg-secondary { background-color: var(--ft-nova) !important; color: var(--ft-oxford) !important; }

/* Alertas */
.alert-success { background: #d9fff2; border-color: var(--ft-aquantis); color: var(--ft-oxford); }
.alert-danger { background: #fde8e5; border-color: var(--ft-bittersweet); color: var(--ft-oxford); }

/* Bloques de horario */
.slot-card { border-left: 4px solid var(--ft-aquantis); }
.slot-card.full { border-left-color: var(--ft-bittersweet); }
.slot-card.past { border-left-color: var(--ft-nova); opacity: .6; }

/* Login: fondo Oxford Blue */
.ft-login { background: var(--ft-oxford); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.ft-login-box { width: 100%; max-width: 420px; }
.ft-login-box .ft-logo { display: block; width: 100%; max-width: 320px; margin: 0 auto 2rem; }
.ft-login-box .card { padding: 1.75rem; background: var(--ft-platinum); }

.form-control, .form-select { background-color: #fff; border-color: #c4cac9; }

/* ---- Temática espacial ---- */
/* Login: espacio de fondo con poca opacidad sobre Oxford Blue */
.ft-login { position: relative; overflow: hidden; }
.ft-login::before {
    content: ""; position: absolute; inset: 0;
    background: url("../img/astronaut-lunge.jpg") center 30% / cover no-repeat;
    opacity: .22;
}
.ft-login::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(17, 22, 52, 0) 0%, rgba(17, 22, 52, .85) 100%);
}
.ft-login-box { position: relative; z-index: 1; }
.ft-login-tagline { color: var(--ft-nova); text-align: center; letter-spacing: .25em; font-size: .75rem; text-transform: uppercase; margin: -1rem 0 1.5rem; }

/* Banner con astronauta entrenando */
.ft-hero {
    position: relative; display: flex; align-items: center; min-height: 200px;
    margin-bottom: 1.5rem; border-radius: var(--bs-border-radius); overflow: hidden;
    background: var(--ft-oxford); color: #fff; box-shadow: 0 1px 3px rgba(17, 22, 52, .25);
}
.ft-hero-img {
    position: absolute; top: 0; right: 0; bottom: 0; width: 62%;
    background-size: cover; background-repeat: no-repeat;
}
.ft-hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ft-oxford) 0%, rgba(17, 22, 52, 0) 55%); }
.ft-hero-bench .ft-hero-img { background-image: url("../img/astronaut-bench.jpg"); background-position: center 30%; }
.ft-hero-lunge .ft-hero-img { background-image: url("../img/astronaut-lunge.jpg"); background-position: center 52%; }
.ft-hero-text { position: relative; z-index: 1; padding: 1.5rem 1.75rem; max-width: 60%; }
.ft-hero-text h1 { margin: 0 0 .35rem; color: #fff; }
.ft-hero-text p { margin: 0 0 1rem; color: var(--ft-nova); }
.ft-hero-text .btn-outline-light:hover { color: var(--ft-oxford); }
@media (max-width: 575.98px) {
    .ft-hero-img { width: 100%; opacity: .32; }
    .ft-hero-img::after { background: none; }
    .ft-hero-text { max-width: 100%; }
}

/* Estado vacío */
.ft-empty { display: flex; align-items: center; gap: 1.25rem; background: #fff; border-radius: var(--bs-border-radius); padding: 1rem 1.25rem; box-shadow: 0 1px 3px rgba(17, 22, 52, .12); }
.ft-empty img { width: 96px; height: 96px; object-fit: cover; object-position: 50% 45%; border-radius: 50%; border: 3px solid var(--ft-zima); flex: none; }

/* ---- Filtros, pestañas y utilidades ---- */
.ft-filters { background: #fff; border-radius: var(--bs-border-radius); padding: .85rem 1rem; box-shadow: 0 1px 3px rgba(17, 22, 52, .12); }
.ft-filters .form-label { font-size: .8rem; font-weight: 600; margin-bottom: .2rem; }
.ft-pills .nav-link { color: var(--ft-oxford); font-weight: 600; }
.ft-pills .nav-link.active { background: var(--ft-oxford); color: #fff; }
.ft-week { margin-bottom: .75rem; }
.ft-break { overflow-wrap: anywhere; word-break: break-word; }
.alert-info { background: #e3ecfb; border-color: var(--ft-zima); color: var(--ft-oxford); }
.ft-day-closed { text-decoration: line-through; opacity: .7; }

/* Tira de días: una sola fila con scroll horizontal en pantallas pequeñas */
.ft-days { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---- Móvil ---- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg { max-width: 100%; }

@media (max-width: 767.98px) {
    .ft-days { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem; margin-inline: -.25rem; padding-inline: .25rem; -webkit-overflow-scrolling: touch; }
    .ft-days .btn { white-space: nowrap; flex: none; }
}

@media (max-width: 575.98px) {
    .container { padding-inline: 1rem; }
    /* Evita el zoom automático de iOS al enfocar un campo, y objetivos táctiles de ≥ 44px */
    .form-control, .form-select { font-size: 16px; min-height: 44px; }
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .form-check-input { width: 1.4em; height: 1.4em; }
    .ft-navbar .nav-link { padding: .75rem 0; }
    .ft-navbar .navbar-brand img { height: 42px; }
    .ft-navbar form { padding: .5rem 0; flex-wrap: wrap; }
    .ft-hero { min-height: 170px; }
    .ft-hero-text { padding: 1.1rem 1.1rem; }
    .ft-empty { flex-direction: column; text-align: center; }

    /* Tablas apiladas: cada fila se muestra como una tarjeta con "etiqueta: valor" */
    .table-stack { background: transparent; box-shadow: none; overflow: visible; }
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack tr {
        background: #fff; border-radius: var(--bs-border-radius); box-shadow: 0 1px 3px rgba(17, 22, 52, .12);
        margin-bottom: .75rem; padding: .35rem 0;
    }
    .table-stack td {
        display: flex; justify-content: space-between; align-items: center; gap: 1rem;
        border: 0; padding: .4rem .9rem; text-align: right; background: transparent; box-shadow: none;
    }
    .table-stack td::before { content: attr(data-label); font-weight: 600; text-align: left; flex: none; }
    .table-stack td[data-label=""]::before { content: none; }
    .table-stack td[data-label=""] { justify-content: flex-end; }
    .table-stack td[data-label=""] form, .table-stack td[data-label=""] .btn { width: 100%; }
}