/* Componentes - tenant 'default' (paleta Sorni Train). */
h1 { font-size: 2.2rem; margin: 8px 0 16px; line-height: 1.1; word-break: break-word; }
h2 { font-size: 1.6rem; margin: 0 0 12px; word-break: break-word; }
h3 { font-size: 1.2rem; margin: 0 0 8px; word-break: break-word; }

/* Evita scroll horizontal por contenidos largos (URLs, código…) */
img, video, iframe { max-width: 100%; }
code, pre, .t4t-mono { word-break: break-all; overflow-wrap: anywhere; }
@media (max-width: 600px) {
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.25rem; }
}

/* t4t-form-wrap: contenedor centrado para formularios cortos (login, recuperación, etc.).
   Width responsive: ocupa el 100% del padre hasta 720px. Para formularios largos
   con columnas (Perfil, EditBono, Register) usar solo .t4t-container. */
.t4t-form-wrap { max-width: 720px; width: 100%; margin-left: auto; margin-right: auto; }

/* Wrapper para tablas que pueden ser anchas: scroll horizontal dentro del card. */
.t4t-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.t4t-table-scroll > .t4t-table { min-width: 640px; }
.t4t-form { display: flex; flex-direction: column; gap: 8px; }
.t4t-form label { font-weight: 600; font-size: 0.9rem; color: var(--st-secondary); }
.t4t-input {
    width: 100%; padding: 10px 12px; font-size: 1rem;
    border: 1px solid #d1d5db; border-radius: 8px; background: #fff;
    font-family: inherit;
}
.t4t-input:focus { outline: 2px solid var(--st-primary); border-color: transparent; }

.t4t-row { display: flex; gap: 12px; }
.t4t-row > div { flex: 1; }
@media (max-width: 480px) { .t4t-row { flex-direction: column; } }

.t4t-btn {
    display: inline-block; padding: 10px 16px; border-radius: 8px; font-weight: 600;
    border: 1px solid #d1d5db; background: #fff; color: var(--st-text); cursor: pointer;
    text-decoration: none; line-height: 1.2; font-size: .95rem;
    transition: background .15s, color .15s, border-color .15s;
}
.t4t-btn:hover { text-decoration: none; }
.t4t-btn--primary {
    background: var(--st-primary); border-color: var(--st-primary); color: #fff;
}
.t4t-btn--primary:hover { background: var(--st-primary-dark); border-color: var(--st-primary-dark); color: #fff; }
.t4t-btn--ghost {
    background: transparent; border: 2px solid #fff; color: #fff;
}
.t4t-btn--ghost:hover { background: #fff; color: var(--st-secondary); }
.t4t-btn--danger  { background: #dc2626; border-color: #dc2626; color: #fff; }
.t4t-btn--danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

.t4t-alert { padding: 12px; border-radius: 8px; margin: 12px 0; }
.t4t-alert--error { background: #fee2e2; color: #991b1b; }
.t4t-alert--ok    { background: #dcfce7; color: #166534; }

.t4t-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 16px; margin: 16px 0;
}

.t4t-card--bono { display: flex; flex-direction: column; gap: 6px; }

/* Tarjetas del hub de administración: igual que card, con un acento sutil. */
.t4t-card--admin { border-top: 3px solid var(--st-primary); }
.t4t-card--admin h2 { margin-top: 0; }

/* Breadcrumb / volver-link arriba de las páginas. */
.t4t-breadcrumb { margin: 8px 0 0; font-size: 0.9em; }
.t4t-breadcrumb a { color: var(--st-muted); text-decoration: none; }
.t4t-breadcrumb a:hover { color: var(--st-primary); text-decoration: underline; }

.t4t-muted { color: #6b7280; }

.t4t-week { margin: 8px 0; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; background: #fafafa; }
.t4t-week > summary { cursor: pointer; padding: 6px 0; user-select: none; }
.t4t-week[open] > summary { border-bottom: 1px solid #e5e7eb; margin-bottom: 8px; }

.t4t-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 12px;
}

.t4t-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.t4t-table th, .t4t-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e5e7eb; }
.t4t-table thead th { background: #f3f4f6; font-weight: 600; }
.t4t-table tr.t4t-row--cancelled,
.t4t-table tr.t4t-row--cancelled td { color: #991b1b; background: #fef2f2; }
.t4t-row--cancelled-reason { font-size: 0.9em; margin-top: 2px; color: #7f1d1d; }

/* Vista calendario (Agenda del entrenador) */
.t4t-cal {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 12px;
}
.t4t-cal-day {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
    padding: 6px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.t4t-cal-dayhead {
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 4px;
}
.t4t-cal-dayhead small { color: #6b7280; font-weight: 400; }
.t4t-cal-empty { color: #9ca3af; text-align: center; padding: 12px 0; font-size: 0.9em; }
.t4t-cal-slot {
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 0.85em;
    line-height: 1.25;
}
.t4t-cal-time { font-weight: 600; }
.t4t-cal-cap { font-weight: 400; color: #6b7280; font-size: 0.85em; }
.t4t-cal-names { margin-top: 2px; color: #111827; }
.t4t-cal-slot--empty { opacity: 0.45; background: #f3f4f6; border-style: dashed; }
.t4t-cal-slot--booked { background: #fff4e6; border-color: #fbbf77; color: var(--st-secondary); }
.t4t-cal-slot--full { background: #ffe0bf; border-color: var(--st-primary); color: var(--st-secondary); }
.t4t-cal-slot--cancelled { background: #fef2f2; border-color: #fecaca; color: #991b1b; text-decoration: line-through; }

/* Acciones al pie de cada tarjeta del calendario del entrenador
   (bloquear/reabrir/ver-reservas). Tipografía pequeña, sin subrayado. */
.t4t-cal-actions { margin-top: 4px; display: flex; gap: 8px; }
.t4t-cal-action {
    font-size: .8em; text-decoration: none; line-height: 1;
    color: var(--st-secondary, #1f2937);
    padding: 2px 0; border-bottom: 1px dashed transparent;
}
.t4t-cal-action:hover { border-bottom-color: currentColor; text-decoration: none; }
.t4t-cal-action--disable { color: #991b1b; }
.t4t-cal-action--enable  { color: #166534; }
/* En slots cancelados el color heredado tiene text-decoration:line-through — lo cortamos
   en las acciones para que el link "Reabrir" siga siendo legible y clickable. */
.t4t-cal-slot--cancelled .t4t-cal-action { text-decoration: none; }

.t4t-cal-legend { margin-top: 8px; }
.t4t-cal-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    font-size: 0.8em;
    margin-right: 6px;
}
@media (max-width: 700px) {
    .t4t-cal { grid-template-columns: 1fr; }
    .t4t-cal-day { min-height: auto; }
}

/* Bloque "Generar huecos" bajo la plantilla: label + select + botón en línea. */
.t4t-generate {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.t4t-generate label { font-weight: 600; }
.t4t-generate__select { width: auto; min-width: 220px; }
@media (max-width: 480px) {
    .t4t-generate { flex-direction: column; align-items: stretch; }
    .t4t-generate__select { width: 100%; }
}

/* Banner de impersonación — visible cuando un SuperAdmin actúa como otro usuario. */
.st-impersonation-banner {
    background: #fef3c7;
    color: #78350f;
    border-bottom: 2px solid #f59e0b;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    flex-wrap: wrap;
}
.st-impersonation-banner__icon { font-size: 1.1rem; }
.st-impersonation-banner__text { flex: 1; min-width: 200px; }
.st-impersonation-banner__exit {
    background: #f59e0b;
    color: #fff;
    border: 0;
    padding: 4px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}
.st-impersonation-banner__exit:hover { background: #d97706; color: #fff; }

/* Acordeón por día — Calendario.aspx (reservar). */
.t4t-day {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fff;
}
.t4t-day[open] { box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.t4t-day-head {
    cursor: pointer;
    padding: 10px 12px;
    font-weight: 600;
    color: var(--st-secondary, #1f2937);
    list-style: none;
    user-select: none;
}
.t4t-day-head::-webkit-details-marker { display: none; }
.t4t-day-head::before {
    content: "▸";
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.15s ease;
    color: var(--st-primary, #f97316);
}
.t4t-day[open] > .t4t-day-head::before { transform: rotate(90deg); }
.t4t-day > .t4t-table { margin: 0; border-top: 1px solid #e5e7eb; }
@media (max-width: 600px) {
    .t4t-table thead { display: none; }
    .t4t-table, .t4t-table tbody, .t4t-table tr, .t4t-table td { display: block; width: 100%; }
    .t4t-table tr { border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 8px; padding: 6px; }
    .t4t-table td { border: 0; padding: 4px 0; }
    .t4t-table tr.t4t-row--cancelled { border-color: #fecaca; }
}

/* -----------------------------------------------------------------------------
   Plantilla semanal del entrenador (Trainer/Agenda.aspx > gvTemplate)
   Vista móvil como cards: 7 chips L M X J V S D arriba, luego hora + plazas +
   VIP y acciones. En desktop se usa la tabla normal (.t4t-table) sin tocar.
   Aplicamos la clase compuesta .t4t-table.t4t-table--weekly para sumar
   especificidad y sobrescribir el bloque genérico de arriba.
   ----------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .t4t-table.t4t-table--weekly,
    .t4t-table.t4t-table--weekly tbody { display: block; width: 100%; }
    .t4t-table.t4t-table--weekly thead { display: none; }

    .t4t-table.t4t-table--weekly tr {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 8px;
        padding: 12px;
        margin-bottom: 12px;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #fff;
        width: 100%;
    }

    /* Los 7 días (columnas 1..7): chips centrados con label debajo. */
    .t4t-table.t4t-table--weekly td:nth-child(-n+7) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 6px 0;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        min-width: 0;
    }
    .t4t-table.t4t-table--weekly td:nth-child(-n+7) input[type="checkbox"] {
        width: 18px; height: 18px; margin: 0;
    }
    .t4t-table.t4t-table--weekly td:nth-child(-n+7)::after {
        font-size: 11px; font-weight: 700; color: #374151; letter-spacing: 0.5px;
    }
    .t4t-table.t4t-table--weekly td:nth-child(1)::after { content: "L"; }
    .t4t-table.t4t-table--weekly td:nth-child(2)::after { content: "M"; }
    .t4t-table.t4t-table--weekly td:nth-child(3)::after { content: "X"; }
    .t4t-table.t4t-table--weekly td:nth-child(4)::after { content: "J"; }
    .t4t-table.t4t-table--weekly td:nth-child(5)::after { content: "V"; }
    .t4t-table.t4t-table--weekly td:nth-child(6)::after { content: "S"; }
    .t4t-table.t4t-table--weekly td:nth-child(7)::after { content: "D"; }

    /* Hora (8), Plazas (9), VIP (10): segunda fila dividida. */
    .t4t-table.t4t-table--weekly td:nth-child(8),
    .t4t-table.t4t-table--weekly td:nth-child(9),
    .t4t-table.t4t-table--weekly td:nth-child(10) {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 4px 0 0;
    }
    .t4t-table.t4t-table--weekly td:nth-child(8)  { grid-column: span 3; }
    .t4t-table.t4t-table--weekly td:nth-child(9)  { grid-column: span 2; }
    .t4t-table.t4t-table--weekly td:nth-child(10) { grid-column: span 2; align-items: center; }

    .t4t-table.t4t-table--weekly td:nth-child(8)::before  { content: "Hora"; }
    .t4t-table.t4t-table--weekly td:nth-child(9)::before  { content: "Plazas"; }
    .t4t-table.t4t-table--weekly td:nth-child(10)::before { content: "VIP"; }
    .t4t-table.t4t-table--weekly td:nth-child(8)::before,
    .t4t-table.t4t-table--weekly td:nth-child(9)::before,
    .t4t-table.t4t-table--weekly td:nth-child(10)::before {
        font-size: 11px; font-weight: 600; color: #6b7280;
        text-transform: uppercase; letter-spacing: 0.5px;
    }

    /* Hora y Plazas heredan .t4t-input pero WebForms les fija Width inline; anulamos. */
    .t4t-table.t4t-table--weekly td:nth-child(8) input,
    .t4t-table.t4t-table--weekly td:nth-child(9) input {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }
    .t4t-table.t4t-table--weekly td:nth-child(10) input[type="checkbox"] {
        width: 20px; height: 20px; margin: 0;
    }

    /* Acciones (11): fila completa, alineadas a la derecha con separador. */
    .t4t-table.t4t-table--weekly td:nth-child(11) {
        grid-column: span 7;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 14px;
        padding: 8px 0 0;
        margin-top: 4px;
        border-top: 1px solid #f3f4f6;
    }
    .t4t-table.t4t-table--weekly td:nth-child(11) a { font-size: .95rem; }
    /* El "·" separador del aspx no aporta nada visualmente en móvil; lo escondemos. */
    .t4t-table.t4t-table--weekly td:nth-child(11) > span { display: none; }
}

/* =============================================================================
   Landing pública (Default.aspx)
   Hero a pantalla completa con overlay, secciones alternas, grid de servicios
   y bloque de contacto + mapa en dos columnas.
   ============================================================================= */
.t4t-btn--lg { padding: 14px 22px; font-size: 1.05rem; }

.t4t-hero {
    position: relative;
    width: 100%;
    min-height: 480px;
    overflow: hidden;
    background: var(--st-secondary);
}
.t4t-hero__media { position: absolute; inset: 0; }
.t4t-hero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.6;
}
.t4t-hero__overlay {
    position: relative; z-index: 1;
    min-height: 480px;
    display: flex; align-items: center;
    background: linear-gradient(180deg, rgba(14,58,74,0.35) 0%, rgba(14,58,74,0.8) 100%);
    color: #fff;
}
.t4t-hero__content { width: 100%; padding: 48px 16px; }
.t4t-hero__content h1 {
    /* Layout.css fuerza color: var(--st-secondary) en TODOS los h1. Sobre el overlay
       oscuro del hero quedaría invisible, así que aquí lo reescribimos a blanco. */
    color: #fff;
    font-size: 2.4rem; line-height: 1.15;
    margin: 0 0 12px; max-width: 720px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.t4t-hero__sub {
    font-size: 1.15rem; max-width: 640px;
    margin: 0 0 24px; opacity: 0.95;
}
.t4t-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.t4t-hero--noimg .t4t-hero__overlay {
    background: linear-gradient(135deg, var(--st-secondary) 0%, var(--st-primary) 100%);
}

.t4t-section { padding: 56px 0; }
.t4t-section--alt { background: #f3f4f6; }
.t4t-section h2 { font-size: 1.6rem; margin: 0 0 16px; }
.t4t-prose {
    font-size: 1.05rem; line-height: 1.6;
    color: #374151; max-width: 760px;
}

.t4t-services {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 8px;
}
.t4t-service {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 20px; display: flex; flex-direction: column; gap: 8px;
}
.t4t-service__icon { font-size: 2rem; line-height: 1; }
.t4t-service h3 { margin: 0; font-size: 1.1rem; }
.t4t-service p { margin: 0; color: #4b5563; }

.t4t-contact { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; align-items: start; }
.t4t-contact__info dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 8px 0 16px; }
.t4t-contact__info dt { font-weight: 600; color: #374151; }
.t4t-contact__info dd { margin: 0; color: #1f2937; }
.t4t-contact__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.t4t-contact__map iframe {
    width: 100%; border: 0; border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.t4t-prelike { white-space: pre-line; }

@media (max-width: 720px) {
    .t4t-contact { grid-template-columns: 1fr; }
    .t4t-hero__content h1 { font-size: 1.8rem; }
    .t4t-hero__sub { font-size: 1rem; }
    .t4t-section { padding: 36px 0; }
    .t4t-hero, .t4t-hero__overlay { min-height: 380px; }
}

.t4t-footer {
    background: var(--st-secondary); color: #9ca3af;
    padding: 16px 0; margin-top: 0;
    text-align: center;
}
.t4t-footer a { color: #d1d5db; }
.t4t-footer a:hover { color: var(--st-accent); }