/*
 * Componentes propios de Pistea sobre la plantilla común (Minia + app-bridge.css).
 * Usan las variables de Bootstrap para seguir el color principal y el modo oscuro.
 */

/* ===== Franjas horarias del club ===== */
.day-strip { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.day-strip a {
    flex: 0 0 auto; min-width: 64px; text-align: center; padding: .45rem .5rem; border-radius: .5rem;
    border: 1px solid var(--bs-border-color); color: var(--bs-body-color); line-height: 1.15;
}
.day-strip a small { display: block; font-size: .7rem; text-transform: uppercase; color: var(--bs-secondary-color); }
.day-strip a strong { font-size: 1.1rem; }
.day-strip a.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.day-strip a.active small { color: rgba(255, 255, 255, .8); }

.slot-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.slot-btn {
    border: 1px solid rgba(var(--bs-primary-rgb), .35); background: rgba(var(--bs-primary-rgb), .06);
    color: var(--bs-body-color); border-radius: .45rem; padding: .3rem .55rem; font-size: .85rem; line-height: 1.1; text-align: center;
}
.slot-btn small { display: block; font-size: .7rem; color: var(--bs-secondary-color); }
.slot-btn:hover, .slot-btn.selected { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }
.slot-btn:hover small, .slot-btn.selected small { color: rgba(255, 255, 255, .85); }

/* ===== Tarjeta de partido ===== */
.match-card { transition: transform .15s ease, box-shadow .15s ease; }
.match-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .08); }
.match-card .stretched-link::after { z-index: 0; }

.court-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; }
.court-teams .team { display: flex; justify-content: center; gap: .5rem; }
.court-teams .vs { font-size: .75rem; color: var(--bs-secondary-color); font-weight: 600; }

.player-dot { display: flex; flex-direction: column; align-items: center; width: 64px; text-align: center; font-size: .75rem; line-height: 1.15; }
.player-dot .avatar-circle {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 600;
    background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); margin-bottom: .25rem;
}
.player-dot.free .avatar-circle { background: transparent; border: 2px dashed var(--bs-border-color); color: var(--bs-secondary-color); }
.player-dot .lvl { font-size: .7rem; color: var(--bs-secondary-color); }
.player-dot.lg { width: 96px; font-size: .85rem; }
.player-dot.lg .avatar-circle { width: 64px; height: 64px; font-size: 1.15rem; }

/* Pista vista desde arriba en el detalle del partido */
.court-view {
    border-radius: .75rem; padding: 1.25rem; position: relative;
    background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), .08) 0 49.6%, rgba(var(--bs-primary-rgb), .35) 49.6% 50.4%, rgba(var(--bs-primary-rgb), .08) 50.4%);
    border: 2px solid rgba(var(--bs-primary-rgb), .25);
}
.court-view .team-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); text-align: center; margin-bottom: .5rem; }

/* ===== Nivel ===== */
.level-pill { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; padding: .15rem .5rem; border-radius: 1rem; background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); font-size: .8rem; }
.level-big { font-size: 3rem; font-weight: 600; line-height: 1; color: var(--bs-primary); }
.level-bar { height: 8px; border-radius: 4px; background: var(--bs-secondary-bg); position: relative; overflow: hidden; }
.level-bar span { position: absolute; inset: 0 auto 0 0; background: var(--bs-primary); border-radius: 4px; }

/* ===== Club ===== */
.club-cover {
    height: 140px; border-radius: .5rem .5rem 0 0; display: grid; place-items: center; color: #fff; font-size: 2.5rem;
    background: linear-gradient(135deg, var(--bs-primary), rgba(var(--bs-primary-rgb), .55));
}
.club-cover.sm { height: 96px; font-size: 1.8rem; }
.amenity { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; padding: .2rem .55rem; border-radius: 1rem; background: var(--bs-secondary-bg); margin: 0 .25rem .35rem 0; }

/* ===== Cuadrante del gestor ===== */
.grid-wrap { overflow-x: auto; }
.booking-grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; table-layout: fixed; }
.booking-grid th, .booking-grid td { border-bottom: 1px solid var(--bs-border-color); border-right: 1px solid var(--bs-border-color); padding: 0; height: 28px; font-size: .78rem; vertical-align: top; }
.booking-grid thead th { position: sticky; top: 0; background: var(--bs-body-bg); z-index: 2; padding: .4rem; text-align: center; height: auto; }
.booking-grid td.hour { width: 64px; text-align: right; padding-right: .4rem; color: var(--bs-secondary-color); }
.booking-grid td.free { cursor: pointer; }
.booking-grid td.free:hover { background: rgba(var(--bs-primary-rgb), .08); }
.booking-grid td.slot-past { background: var(--bs-tertiary-bg); }
.booking-grid .bk { border-radius: .35rem; padding: .25rem .35rem; margin: 1px; height: calc(100% - 2px); overflow: hidden; color: #fff; cursor: pointer; line-height: 1.2; }
.bk-private { background: var(--bs-primary); }
.bk-match { background: #2ab57d; }
.bk-lesson { background: #ffbf53; color: #3b2c00 !important; }
.bk-blocked { background: #74788d; }

/* ===== Portada ===== */
.hero-search { border-radius: 1rem; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .08); }

@media (max-width: 575.98px) {
    .player-dot { width: 54px; }
    .player-dot .avatar-circle { width: 38px; height: 38px; }
    .level-big { font-size: 2.4rem; }
}

/* ===== Aviso flotante de instalación (PWA) ===== */
.pwa-install-float {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1080; max-width: 380px;
    animation: pwa-in .3s ease-out;
}
@keyframes pwa-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
@media (max-width: 575.98px) {
    .pwa-install-float { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; }
}