/* ============================================================
   admin.css — ARMAZÓN del backoffice (/admin y /panel)
   Identidad C.A.F. TENIS (docs/IDENTIDAD-VISUAL.md):
     celeste  #00b5f0   bordó    #7f2f37
     amarillo #f6d106   petróleo #09688a
   Derivados de UI (de esta etapa de armazón):
     sidebar  #063c50 (petróleo profundo)  fondo contenido #f2f6f8
   Estructura esperada (main_admin.tpl / main_panel.tpl):
     body.admin-layout
       div#sidebar-overlay.sidebar-overlay
       nav.admin-sidebar  (brand + nav-section + nav-link)
       div.admin-main
         header.admin-topbar (#sidebar-toggle + .topbar-title + .admin-name)
         main.admin-content  (flashes + template de la página)
   Estados: body.sidebar-collapsed (desktop) / body.sidebar-open (móvil)
   ============================================================ */

:root {
    --tc-celeste:  #00b5f0;
    --tc-bordo:    #7f2f37;
    --tc-amarillo: #f6d106;
    --tc-petroleo: #09688a;
    --tc-violeta:  #6f42c1;   /* concesiones (grilla): no choca con bordó/celeste/gris; blanco encima da AA */
    --tc-sidebar-bg:     #063c50;
    --tc-sidebar-width:  240px;
    --tc-topbar-height:  56px;
    --tc-content-bg:     #f2f6f8;
    --tc-line:           #dde5ea;
    --tc-transition:     .25s ease;
}

body.admin-layout {
    background: var(--tc-content-bg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    /* Sidebar fixed + main con margin: si un contenido interno se pasa de ancho, que se
       recorte en vez de generar scroll horizontal de toda la página (arrastraría el header).
       'clip' no crea contenedor de scroll → no rompe el position:sticky del topbar. */
    overflow-x: clip;
}

/* ==================== Sidebar ==================== */

.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--tc-sidebar-width);
    height: 100vh;
    background: var(--tc-sidebar-bg);
    color: #c9d8df;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: transform var(--tc-transition);
}

.admin-sidebar .brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .9rem 1.25rem;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    min-height: var(--tc-topbar-height);
}

.admin-sidebar .brand img {
    width: 34px;
    height: auto;
    flex-shrink: 0;
}

.admin-sidebar .brand span {
    color: var(--tc-celeste);
}

.admin-sidebar .nav-section {
    padding: .6rem 1.25rem .3rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(201, 216, 223, .55);
}

.admin-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .38rem 1.25rem;
    color: #c9d8df;
    font-size: .85rem;
    border-left: 3px solid transparent;
    transition: background var(--tc-transition), color var(--tc-transition);
}

.admin-sidebar .nav-link i {
    font-size: .95rem;
    color: var(--tc-celeste);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.admin-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, .06);
    color: #ffffff;
}

.admin-sidebar .nav-link.active {
    background: rgba(0, 181, 240, .14);
    color: #ffffff;
    border-left-color: var(--tc-amarillo);
    font-weight: 600;
}

/* ==================== Zona principal ==================== */

.admin-main {
    margin-left: var(--tc-sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--tc-transition);
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 900;
    background: #ffffff;
    border-bottom: 1px solid var(--tc-line);
    min-height: var(--tc-topbar-height);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1.25rem;
}

.admin-topbar .topbar-title {
    font-weight: 600;
    color: var(--tc-petroleo);
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-name {
    margin-left: auto;
    color: #5c6b73;
    font-size: .875rem;
    white-space: nowrap;
}

.sidebar-toggle {
    background: none;
    border: 1px solid var(--tc-line);
    border-radius: 6px;
    color: var(--tc-petroleo);
    font-size: 1.15rem;
    line-height: 1;
    padding: .3rem .55rem;
    cursor: pointer;
    transition: background var(--tc-transition);
    flex-shrink: 0;
}

.sidebar-toggle:hover {
    background: var(--tc-content-bg);
}

.admin-content {
    flex: 1;
    padding: 1.5rem;
}

/* ==================== Breadcrumb (sub-pantallas) ====================
   Reemplaza el título repetido en pantallas que cuelgan de un ABM u otra
   pantalla (formularios, ficha del socio, detalle de reserva). Muestra la
   ruta —de dónde vengo (links) / dónde estoy (actual)— y hace de "volver".
   El nombre de la pantalla ya vive en la barra superior (.topbar-title). */
/* Fila: botón "Volver" + breadcrumb al lado (D). El botón vuelve al primer crumb. */
.tc-breadcrumb-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.tc-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    font-size: .9rem;
    min-width: 0;
}
.tc-breadcrumb a {
    color: var(--tc-petroleo);
    text-decoration: none;
    font-weight: 600;
}
.tc-breadcrumb a:hover { color: var(--tc-celeste); text-decoration: underline; }
.tc-breadcrumb .sep { color: #9fb2ba; }
.tc-breadcrumb .current {
    color: #33454c;
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==================== Colapso (desktop) ==================== */

@media (min-width: 992px) {
    body.sidebar-collapsed .admin-sidebar {
        transform: translateX(-100%);
    }
    body.sidebar-collapsed .admin-main {
        margin-left: 0;
    }
    .sidebar-overlay {
        display: none !important;
    }
}

/* ==================== Off-canvas (móvil / tablet) ==================== */

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(4, 30, 41, .55);
    z-index: 999;
}

@media (max-width: 991.98px) {
    .admin-sidebar {
        transform: translateX(-100%);
        box-shadow: 4px 0 18px rgba(0, 0, 0, .25);
    }
    .admin-main {
        margin-left: 0;
    }
    body.sidebar-open .admin-sidebar {
        transform: translateX(0);
    }
    body.sidebar-open .sidebar-overlay {
        display: block;
    }
    .admin-content {
        padding: 1rem;
    }
}

@media (max-width: 575.98px) {
    .admin-name .admin-name-text {
        display: none;   /* en pantallas muy chicas queda solo el ícono */
    }
    .admin-content {
        padding: .75rem;
    }
}

/* ==================== Utilidades compartidas ==================== */

.text-sm { font-size: .875rem; }
.text-xs { font-size: .75rem; }
.form-label-sm { font-size: .85rem; }
.subtitle { color: #64757c; font-size: .85rem; }

/* Tablas dentro de cards: que el borde no choque con el header */
.admin-content .card .table {
    margin-bottom: 0;
}

/* ============================================================
   Rediseño visual — componentes reutilizables del backoffice
   Estética "Paces": cards blancas redondeadas, sombras suaves, KPIs,
   iconos pastel con la paleta C.A.F. TENIS. Son clases NUEVAS: no alteran
   las pantallas existentes; se adoptan pantalla por pantalla.
   ============================================================ */

:root {
    --tc-radius:       14px;
    --tc-shadow:       0 2px 10px rgba(9, 60, 80, .06);
    --tc-shadow-hover: 0 6px 20px rgba(9, 60, 80, .11);
    --tc-border-soft:  #eef2f5;
    --tc-verde:        #12b886;
    --tc-rojo:         #e0554a;
}

/* ---- Cabecera de página (saludo del dashboard) ---- */
.dash-hero {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem;
}
/* Encabezado del dashboard: solo la fecha (con un íconito de calendario) */
.dash-hero .dash-fecha {
    display: inline-flex; align-items: center; gap: .5rem;
    color: var(--tc-petroleo); font-size: 1.1rem; font-weight: 600; text-transform: capitalize;
}
.dash-hero .dash-fecha i { color: var(--tc-celeste); font-size: 1rem; }

/* ---- KPI cards ---- */
.stat-card {
    background: #fff; border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius); box-shadow: var(--tc-shadow);
    height: 100%; transition: transform var(--tc-transition), box-shadow var(--tc-transition);
}
a.stat-card { text-decoration: none; color: inherit; display: block; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--tc-shadow-hover); }
.stat-card .card-body { padding: 1.1rem 1.25rem; }
.stat-icon {
    width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 1.4rem;
}
.stat-kpi-num { font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: #17323b; }
.stat-kpi-num.stat-kpi-money { font-size: clamp(1.1rem, 1.5vw, 1.55rem); }
.stat-kpi-label { font-size: .78rem; color: #6b7a80; margin-top: .15rem; }

/* Iconos pastel con la paleta del club */
.icon-celeste  { background: rgba(0,181,240,.14);  color: #0a86b0; }
.icon-petroleo { background: rgba(9,104,138,.13);   color: #09688a; }
.icon-amarillo { background: rgba(246,209,6,.20);   color: #a9860a; }
.icon-bordo    { background: rgba(127,47,55,.11);   color: #7f2f37; }
.icon-verde    { background: rgba(18,184,134,.13);  color: #12866a; }
.icon-rojo     { background: rgba(224,85,74,.11);   color: #c34a3d; }

/* ---- Chart cards ---- */
.chart-card {
    background: #fff; border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius); box-shadow: var(--tc-shadow); height: 100%;
}
.chart-card .chart-head {
    padding: .9rem 1.25rem; border-bottom: 1px solid var(--tc-border-soft);
    display: flex; align-items: center; gap: .5rem;
}
.chart-card .chart-head h2 { font-size: .95rem; font-weight: 600; color: var(--tc-petroleo); margin: 0; }
.chart-card .chart-head i { color: var(--tc-celeste); font-size: 1rem; }
.chart-card .chart-body { padding: 1rem 1.25rem; }
.chart-empty { color: #9aa7ac; font-size: .85rem; text-align: center; padding: 2.5rem 0; }

/* ---- Accesos rápidos ---- */
.quick-actions {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem;
}
.quick-action {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
    padding: 1rem .75rem; text-align: center; text-decoration: none;
    background: #fff; border: 1px solid var(--tc-border-soft); border-radius: var(--tc-radius);
    box-shadow: var(--tc-shadow); color: var(--tc-petroleo); font-weight: 600; font-size: .85rem;
    transition: transform var(--tc-transition), box-shadow var(--tc-transition), border-color var(--tc-transition);
}
.quick-action:hover {
    transform: translateY(-2px); box-shadow: var(--tc-shadow-hover);
    border-color: var(--tc-celeste); color: var(--tc-petroleo);
}
.quick-action i { font-size: 1.5rem; color: var(--tc-celeste); }
/* Título de sección: aire arriba + acento de borde izquierdo bordó CAF (unifica todo el admin) */
.section-label {
    font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: #6b7a80; margin: 1.75rem 0 1rem; padding-left: .65rem;
    border-left: 3px solid var(--tc-bordo);
}

/* ============================================================
   Rediseño visual — menú lateral con grupos desplegables + header con avatar
   ============================================================ */

/* ---- Sidebar: grupos desplegables (acordeón Bootstrap collapse) ---- */
.admin-sidebar .nav-group { cursor: pointer; }
.admin-sidebar .nav-group .caret {
    margin-left: auto; font-size: .8rem; color: rgba(201, 216, 223, .55);
    transition: transform var(--tc-transition);
}
.admin-sidebar .nav-group[aria-expanded="true"] { color: #fff; }
.admin-sidebar .nav-group[aria-expanded="true"] .caret { transform: rotate(180deg); }
.admin-sidebar .nav-sub { margin: 0; padding: .15rem 0; list-style: none; background: rgba(0, 0, 0, .16); }
.admin-sidebar .nav-sub .nav-link { padding-left: 2.9rem; font-size: .8rem; }
.admin-sidebar .nav-sub .nav-link i { font-size: .85rem; }

/* Ítems de módulos futuros (Reportes, Auditoría): visibles pero sin acción todavía */
.admin-sidebar .nav-link.disabled { color: rgba(201, 216, 223, .4); cursor: default; pointer-events: none; }
.admin-sidebar .nav-link.disabled i { color: rgba(201, 216, 223, .3); }
.admin-sidebar .nav-badge {
    margin-left: auto; font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: rgba(246, 209, 6, .18); color: #c7a80a; padding: .1rem .38rem; border-radius: 5px;
}

/* ============ Pestañas y paneles del rediseño (Configuración y sucesivas) ============ */
/* Pestañas en UNA fila con scroll horizontal (en móvil no se apilan). Los degradés laterales avisan
   que hay más pestañas; el JS del template los prende/apaga según el scroll (of-left/of-right). */
.tc-tabs-wrap { position: relative; margin-bottom: 1.5rem; }
.tc-tabs {
    display: flex; flex-wrap: nowrap; gap: .15rem; border-bottom: 1px solid #e3ebee;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tc-tabs::-webkit-scrollbar { display: none; }
.tc-tabs a {
    display: flex; align-items: center; gap: .45rem; padding: .65rem 1.1rem; margin-bottom: -1px;
    text-decoration: none; color: #6b7a80; font-weight: 600; font-size: .9rem; white-space: nowrap; flex: 0 0 auto;
    border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; transition: color .15s, background .15s;
}
.tc-tabs a:hover { color: var(--tc-petroleo); background: rgba(0, 181, 240, .05); }
.tc-tabs a.active { color: var(--tc-petroleo); border-bottom-color: var(--tc-celeste); }
.tc-tabs a i { font-size: 1rem; }
.tc-tabs-wrap::before, .tc-tabs-wrap::after {
    content: ""; position: absolute; top: 0; bottom: 1px; width: 34px; pointer-events: none;
    opacity: 0; transition: opacity .2s; z-index: 2;
}
.tc-tabs-wrap::before { left: 0;  background: linear-gradient(to right, var(--tc-content-bg, #f2f6f8), rgba(242, 246, 248, 0)); }
.tc-tabs-wrap::after  { right: 0; background: linear-gradient(to left,  var(--tc-content-bg, #f2f6f8), rgba(242, 246, 248, 0)); }
.tc-tabs-wrap.of-left::before  { opacity: 1; }
.tc-tabs-wrap.of-right::after  { opacity: 1; }

.tc-panel { background: #fff; border: 1px solid var(--tc-border-soft); border-radius: var(--tc-radius); box-shadow: var(--tc-shadow); margin-bottom: 1rem; }
.tc-panel:last-child { margin-bottom: 0; }
.tc-panel > .tc-panel-head {
    display: flex; align-items: center; gap: .5rem; padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--tc-border-soft); font-weight: 600; color: var(--tc-petroleo);
}
.tc-panel > .tc-panel-head i { color: var(--tc-celeste); font-size: 1.05rem; }
/* Íconos DENTRO de botones del head (ej. "Nuevo socio"): conservan el color del
   botón (blanco en .btn-club), no el celeste del ícono de título. */
.tc-panel > .tc-panel-head .btn i { color: inherit; }
.tc-panel > .tc-panel-body { padding: 1.25rem; }
/* Panel con contenido colapsable (Bootstrap .collapse en el medio): el padding de
   .tc-panel-body es hijo-directo y el .collapse lo rompía (inputs pegados al borde). */
.tc-panel > .collapse > .tc-panel-body { padding: 1.25rem; }

/* Ficha del socio */
.socio-foto { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid var(--tc-celeste); }
.socio-foto-ph { display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 181, 240, .12); color: var(--tc-petroleo); font-size: 2rem; font-weight: 700; }
.socio-saldo { font-size: 1.3rem; font-weight: 700; color: var(--tc-petroleo); }
.socio-saldo span { font-size: .82rem; font-weight: 500; color: #8a979c; }
.socio-saldo.is-low { color: #c99a06; }

/* Tabla del rediseño (lista de socios y sucesivas) */
.tc-table thead th { background: #f6fafc; color: #5a6c72; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border-bottom: 1px solid var(--tc-border-soft); white-space: nowrap; }
.tc-table td { border-color: #f1f5f7; }
.tc-table tbody tr:hover { background: #f6fafc; }
.tc-table tr.socio-inactivo { background: #fafbfc; }
.tc-table tr.socio-inactivo td, .tc-table tr.socio-inactivo a { color: #9aa7ac; }
.tc-panel-foot { padding: .85rem 1.25rem; border-top: 1px solid var(--tc-border-soft); }

/* Barra de filtros de la lista de socios — flex simple con padding (sin .row de Bootstrap,
   que con sus márgenes negativos desbordaba el ancho). Separada de los costados y de la tabla. */
.socios-filtros { padding: 1rem 1.25rem; border-bottom: 1px solid var(--tc-border-soft); background: #fbfcfd; }
.socios-filtros-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.socios-filtros .ff-buscar { flex: 1 1 260px; min-width: 200px; }
.socios-filtros .ff-campo { flex: 0 1 200px; min-width: 150px; }
.socios-filtros .ff-accion { flex: 0 0 auto; }
.socios-filtros .ff-label { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #8a979c; margin-bottom: .25rem; }

.socio-turnos { font-weight: 700; color: var(--tc-petroleo); font-size: 1.02rem; }
.socio-turnos.is-low { color: #c99a06; }
.socio-nombre { color: var(--tc-petroleo); font-weight: 600; }
a.socio-nombre:hover { color: var(--tc-celeste); }

/* Filtros de socios colapsables (pasada 2): el checkbox es el estado (oculto). En
   ESCRITORIO no hay botón y el panel de filtros va siempre visible; en CELULAR (dentro
   del @media de más abajo) aparece el botón "Filtros (N)" y el panel se pliega. */
.filtros-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.filtros-btn { display: none; }

/* ---- Móvil: la lista de socios se vuelve tarjetas apiladas (sin scroll lateral).
   Cada celda muestra su etiqueta (data-label) a la izquierda y el valor a la derecha.
   El nombre es el título de la tarjeta; las acciones, una fila de botones al pie. ---- */
@media (max-width: 767.98px) {
    .tc-table thead { display: none; }
    .tc-table, .tc-table tbody { display: block; width: 100%; }
    .tc-table tr { display: block; border: 1px solid var(--tc-border-soft); border-radius: 12px; margin: 0 0 .65rem; overflow: hidden; }
    .tc-table tbody tr:hover { background: #fff; }
    .tc-table td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 0; border-top: 1px solid #f1f5f7; padding: .5rem .9rem; text-align: right; }
    .tc-table td::before { content: attr(data-label); text-align: left; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #8a979c; }
    /* Nombre = título de la tarjeta: ancho completo, fondo suave, sin etiqueta */
    .tc-table td.td-nombre { display: block; text-align: left; background: #f6fafc; border-top: 0; padding: .6rem .9rem; }
    .tc-table td.td-nombre::before { content: none; }
    .tc-table td.td-nombre .socio-nombre { font-size: 1rem; }
    /* Acciones: fila de botones alineada a la derecha, sin etiqueta */
    .tc-table td.td-acciones { flex-wrap: wrap; justify-content: flex-end; gap: .3rem; }
    .tc-table td.td-acciones::before { content: none; }
    /* ---- SOCIOS compacto (pasada 2): card de 2 líneas. #Nº + Nombre arriba;
       abajo Tipo · Estado · turnos, con las acciones a la derecha. Origen fuera. ---- */
    .tc-table.tc-socios tbody tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: .4rem; row-gap: .2rem; padding: .5rem .75rem; }
    .tc-table.tc-socios tbody td { width: auto; border: 0; padding: 0; text-align: left; }
    .tc-table.tc-socios tbody td::before { content: none !important; }
    /* Línea 1 = #Nº · Nombre · Estado · Tipo · turnos (el nombre encoge con ellipsis para que
       todo entre). Línea 2 = acciones, ancho completo y a la derecha (flex-basis 100% las baja
       siempre → determinista, nada se estraga fuera de pantalla). */
    .tc-table.tc-socios td.celda-num { order: 1; flex: 0 0 auto; font-weight: 800; color: var(--tc-petroleo); font-size: .8rem; }
    .tc-table.tc-socios td.td-nombre { order: 2; flex: 1 1 0; min-width: 0; background: none; overflow: hidden; }
    .tc-table.tc-socios td.td-nombre .socio-nombre { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; vertical-align: bottom; }
    .tc-table.tc-socios td.celda-estado { order: 3; flex: 0 0 auto; }
    .tc-table.tc-socios td.celda-tipo { order: 4; flex: 0 0 auto; }
    .tc-table.tc-socios td.celda-tipo .celda-tipo-socio { display: none; }  /* "Socio" no se imprime en celular (solo salta "No socio") */
    .tc-table.tc-socios td.celda-turnos { order: 5; flex: 0 0 auto; }
    .tc-table.tc-socios td.celda-turnos::after { content: " turnos"; font-size: .7rem; font-weight: 400; color: #8a979c; }
    .tc-table.tc-socios td.celda-origen { display: none; }
    .tc-table.tc-socios td.td-acciones { order: 6; flex: 1 0 100%; justify-content: flex-end; gap: .28rem; padding-top: .15rem; }

    /* Filtros colapsables (celular): botón "Filtros (N)" + panel plegable, 2 por fila al abrir */
    .filtros-btn { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .6rem .9rem; cursor: pointer; font-weight: 700; font-size: .85rem; color: var(--tc-petroleo); background: #fbfcfd; border-bottom: 1px solid var(--tc-border-soft); }
    .filtros-btn .filtros-chev { margin-left: auto; transition: transform .2s; color: #8a979c; }
    .filtros-toggle:checked ~ .filtros-btn .filtros-chev { transform: rotate(180deg); }
    .filtros-badge { background: #7f2f37; color: #fff; font-size: .68rem; font-weight: 800; padding: .05rem .42rem; border-radius: 999px; }
    .socios-filtros { display: none; }
    .filtros-toggle:checked ~ .socios-filtros { display: block; }
    .socios-filtros-form { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-items: end; }
    .socios-filtros .ff-buscar, .socios-filtros .ff-accion { grid-column: 1 / -1; }
    .socios-filtros .ff-campo { min-width: 0; }
    .socios-filtros .ff-accion .btn { width: 100%; }
}

/* Grilla — celda de reserva/jugada unida (2.5): el nombre se centra vertical y
   horizontalmente en el recuadro que abarca las franjas (como evento de calendario);
   el enlace ocupa toda la celda para mantener el clic en cualquier franja. */
.grilla-evt { display: flex; align-items: center; justify-content: center; text-align: center; }
/* Rediseño P1: bloque de reserva/jugada con el equipo COMPLETO (apellidos apilados,
   anfitrión con ● arriba) + la sigla del tipo de partido en un badge abajo. Adaptativo:
   el controlador ya recorta con "+N" según la altura del bloque; acá se clipea (overflow)
   por prolijidad y el tooltip trae siempre el roster completo. */
.grilla-evt.ge-evt { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; text-align: left; line-height: 1.34; font-size: .72rem; padding: .3rem .4rem; overflow: hidden; }
.ge-evt .ge-host { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .005em; }
.ge-evt .ge-host::before { content: '●'; font-size: .5em; vertical-align: middle; margin-right: 3px; opacity: .7; }
.ge-evt .ge-jug  { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .92; }
.ge-evt .ge-mas  { font-weight: 600; font-size: .6rem; opacity: .8; }
.ge-evt .ge-tipo { margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .58rem; font-weight: 700; line-height: 1; padding: 1px 4px; border-radius: 4px; background: rgba(255, 255, 255, .28); letter-spacing: .02em; }
.ge-evt.ge-jugada .ge-tipo { background: rgba(51, 96, 111, .16); border: 1px solid rgba(51, 96, 111, .28); }

/* ─────────────────────────────────────────────────────────────────────────────────────
   Punto 1 — la grilla se lee de un vistazo: RANKING vs AMISTOSO, INVITADO y su COBRO.
   Todo dentro de la paleta CAF (celeste #00b5f0 · petróleo #09688a · amarillo pelota
   #f6d106 · bordó #7f2f37). El degradé va de ABAJO hacia arriba: el pie de la celda es
   el tono profundo (petróleo en ranking, celeste en amistoso) y aclara hacia el techo,
   así los dos tipos se separan sin cambiar el "celeste = programado" de siempre.
   ───────────────────────────────────────────────────────────────────────────────────── */
.gcel { padding: 0; }
/* Programado (por jugarse) */
.gcel-prog.gcel-am { background: linear-gradient(to top, #0093c4 0%, #23c1f5 100%); }
.gcel-prog.gcel-rk { background: linear-gradient(to top, #09688a 0%, #1ea8d6 100%); }
/* Jugada (ya se jugó): mismo par de tonos, lavados */
.gcel-jug.gcel-am  { background: linear-gradient(to top, #cfe6ef 0%, #e6f4fa 100%); }
.gcel-jug.gcel-rk  { background: linear-gradient(to top, #a9c9d7 0%, #dbeef6 100%); }
.gcel-jug .grilla-evt { color: #33606f; }
/* Con INVITADO: filete amarillo pelota a la izquierda (color propio, no compite con el degradé).
   Va en el <a> interno y NO en el <td>: con border-collapse el box-shadow de una celda no se
   pinta, y el enlace ya ocupa toda la celda. */
.gcel-inv .grilla-evt { border-left: 4px solid var(--tc-amarillo); }

/* CABECERA del bloque (encabezado de la "tarjeta"): el TIPO arriba a la DERECHA y, si hay
   invitado, su chip de cobro arriba a la izquierda. Debajo van los nombres.
   Sangra con margen negativo para quedar PEGADA a los bordes de la celda. */
.ge-evt .ge-cab { display: flex; align-items: flex-start; gap: 3px; width: calc(100% + .8rem); margin: -.3rem -.4rem .22rem; }
.ge-evt .ge-cab .ge-tipo { margin-top: 0; margin-left: auto; border-radius: 0 0 0 6px; padding: 2px 5px; }
.ge-evt .ge-cab .ge-pago { border-radius: 0 6px 6px 0; padding: 2px 5px; }
/* La ETIQUETA del tipo cambia de color según sea ranking o amistoso */
.ge-evt .ge-tipo-rk { background: rgba(6, 60, 80, .78); color: #fff; text-transform: uppercase; }
.ge-evt.ge-jugada .ge-tipo-rk { background: var(--tc-petroleo); color: #fff; border: 0; }
.ge-evt .ge-tipo-am { background: rgba(255, 255, 255, .26); color: #fff; text-transform: uppercase; }
.ge-evt.ge-jugada .ge-tipo-am { background: rgba(51, 96, 111, .12); color: #33606f; border: 1px solid rgba(51, 96, 111, .22); }

/* El INVITADO se nombra completo y resaltado (amarillo pelota), igual que en la Lista */
.ge-evt .ge-inv { display: inline-block; background: var(--tc-amarillo); color: #4a3c00; font-weight: 700; font-size: .64rem; line-height: 1; padding: 2px 5px; border-radius: 5px; letter-spacing: .01em; }

/* Chip del COBRO DEL INVITADO — lo que portería lee sin abrir la reserva.
   Verde/ámbar = semántica de estado (misma excepción documentada que el rojo destructivo). */
.ge-pago { display: inline-flex; align-items: center; gap: 2px; font-size: .55rem; font-weight: 800; line-height: 1; padding: 2px 4px; border-radius: 4px; letter-spacing: .02em; white-space: nowrap; }
.ge-pago .bi { font-size: .62rem; }
.ge-pago-ok      { background: #14855f; color: #fff; }
.ge-pago-debe    { background: var(--tc-amarillo); color: #4a3c00; }
.ge-pago-parcial { background: #fff0a8; color: #6b5600; border: 1px solid #e2c53c; }
/* En la leyenda y en la Lista el chip respira un poco más (no está apretado en una celda) */
.ge-pago-leyenda { font-size: .68rem; padding: .2rem .5rem; }
.ge-pago-leyenda .bi { font-size: .78rem; }
/* P-B/P-C: bloque de BLOQUEO unido (turno fijo / inhabilitación) — ícono + nombre completo
   (envuelve, sin truncar), clickeable para abrir el modal de liberar. Ocupa toda la celda. */
.grilla-blq { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%; min-height: 2rem; border: 0; background: transparent; color: inherit; padding: .28rem .34rem; font-size: .72rem; line-height: 1.15; cursor: pointer; }
.grilla-blq.blq-static { cursor: default; }
.grilla-blq .bi { opacity: .9; }

/* Estados con COLORES COHERENTES en Grilla, Lista y leyenda (misma fuente de color).
   Reserva/activa = celeste · Jugada = celeste lavado · Cancelada = gris · Turno fijo = bordó ·
   Inhabilitación = gris pizarra · Libre = verde suave. */
.est { display: inline-block; font-size: .72rem; font-weight: 600; padding: .2rem .55rem; border-radius: 6px; line-height: 1.25; white-space: nowrap; }
.est-activa    { background: var(--tc-celeste); color: #fff; }
.est-jugada    { background: #d5e9f2; color: #33606f; border: 1px solid #b5d3e0; }
.est-cancelada { background: #eef1f3; color: #8a979c; }
.est-turnofijo { background: var(--tc-bordo); color: #fff; }
.est-concesion { background: var(--tc-violeta); color: #fff; }
.est-inhab     { background: #6c757d; color: #fff; }
.est-libre     { background: #e8f5ee; color: #0b5d1e; border: 1px solid #bfe3cf; }
/* Punto 1 — tipo de partido (leyenda de la Grilla y columna Tipo de la Lista): el mismo
   par de degradés que pinta la celda, para que la leyenda y la grilla digan lo mismo. */
.est-amistoso  { background: linear-gradient(to top, #0093c4, #23c1f5); color: #fff; }
.est-ranking   { background: linear-gradient(to top, #09688a, #1ea8d6); color: #fff; }
/* Punto 1 — lugar de invitado: amarillo pelota, el color propio del invitado. Va en versión
   suave para que el chip de cobro (PAGÓ/DEBE, sólido) sea el que salta cuando van juntos. */
.est-invitado  { background: rgba(246, 209, 6, .22); color: #7a6200; border: 1px solid #e2c53c; }
/* Subtipos de cancelada (Lista): quién la canceló y si penalizó. Club = gris neutro
   (no es culpa del socio) · sin penal = ámbar (canceló a tiempo) · con penal = rojo
   (perdió el turno/crédito). */
.est-cancelada-club     { background: #eef1f3; color: #8a979c; }
.est-cancelada-sinpenal { background: #fff3cd; color: #664d03; border: 1px solid #ffe69c; }
.est-cancelada-penal    { background: #f8d7da; color: #842029; border: 1px solid #f1aeb5; }

/* Accesos rápidos de la grilla (Reservar / Inhabilitar / Turno fijo) */
.grilla-accesos .btn i { color: inherit; }

/* Badges prolijos estilo Paces (pill redondeada, colores CAF suaves) */
.tcb { display: inline-block; font-size: .7rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; line-height: 1.25; letter-spacing: .01em; white-space: nowrap; }
.tcb-activo { background: #e4f6ee; color: #12866a; }
.tcb-inactivo { background: #eef1f3; color: #8a979c; }
.tcb-archivado { background: #efe9dc; color: #8a6d3b; }   /* archivado (v1.59): baja sin borrar — distinto del gris de inactivo */
.tcb-migrado { background: rgba(9, 104, 138, .1); color: #09688a; }
.tcb-nuevo { background: rgba(0, 181, 240, .13); color: #0a86b0; }
.tcb-nosocio { background: rgba(127, 47, 55, .1); color: #9d4049; }
.tcb-pendiente { background: rgba(246, 209, 6, .2); color: #a9860a; }
.tcb-super { background: #7f2f37; color: #fff; }                       /* superadmin: dueño del sistema */
.tcb-areas { background: rgba(9, 104, 138, .1); color: #09688a; }      /* contador "N áreas" (permisos → ficha) */
/* Auditoría — columna "Cuándo" en dos líneas: fecha arriba, hora abajo (chica y gris) */
.af-fecha { display: block; font-weight: 600; font-size: .82rem; color: #46545a; }
.af-hora { display: block; font-size: .72rem; color: #8a979c; }
/* En celular, las celdas de contenido largo (descripción/IP/mail/error/archivo) van a
   bloque: etiqueta arriba y valor a ancho completo, para no recortar a la derecha. */
@media (max-width: 767.98px) {
    .tc-table td.af-main { display: block; text-align: left; }
    .tc-table td.af-main::before { display: block; margin-bottom: .15rem; }
}

/* Historial del socio — timeline limpio (reemplaza los cuadros de borde grueso) */
.hist-tl { position: relative; }
.hist-item { position: relative; padding: 0 0 1.15rem 1.6rem; }
.hist-item::before { content: ""; position: absolute; left: 5px; top: .55rem; bottom: -.15rem; width: 2px; background: var(--tc-border-soft); }
.hist-item:last-child::before { display: none; }
.hist-dot { position: absolute; left: 0; top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: #bcc6cb; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--tc-border-soft); }
.hist-suma .hist-dot { background: var(--tc-verde); box-shadow: 0 0 0 1.5px rgba(18,184,134,.25); }
.hist-jugada .hist-dot { background: #4c9be8; box-shadow: 0 0 0 1.5px rgba(76,155,232,.25); }
.hist-cancelada .hist-dot { background: #f0b429; box-shadow: 0 0 0 1.5px rgba(240,180,41,.25); }
.hist-penal .hist-dot { background: var(--tc-rojo); box-shadow: 0 0 0 1.5px rgba(224,85,74,.25); }
.hist-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.hist-title { font-weight: 600; color: #28383e; font-size: .87rem; }
.hist-title .hist-hora { color: #9aa7ac; font-weight: 500; font-size: .78rem; }
.hist-amount { font-weight: 700; font-size: .95rem; white-space: nowrap; text-align: right; }
.hist-amount.pos { color: #12866a; } .hist-amount.neg { color: #c34a3d; }
.hist-amount .hist-queda { display: block; font-size: .68rem; font-weight: 500; color: #9aa7ac; }
.hist-nocargo { font-size: .68rem; font-weight: 600; color: #8a979c; background: #eef1f3; padding: .12rem .45rem; border-radius: 999px; }
.hist-detail { font-size: .78rem; color: #8a979c; margin-top: .1rem; }
.hist-players { display: flex; flex-wrap: wrap; gap: .35rem .7rem; margin-top: .4rem; }
.hist-player { font-size: .76rem; color: #5a6c72; display: inline-flex; align-items: center; gap: .25rem; }
.hist-player i { font-size: .8rem; }
.hist-meta { font-size: .72rem; color: #9aa7ac; margin-top: .25rem; }

/* ---- Header: acciones a la derecha (campanita + usuario) ---- */
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .35rem; }

.topbar-icon-btn {
    background: none; border: 1px solid transparent; border-radius: 8px;
    width: 38px; height: 38px; display: grid; place-items: center; position: relative;
    color: var(--tc-petroleo); font-size: 1.15rem; cursor: pointer;
    transition: background var(--tc-transition);
}
.topbar-icon-btn:hover { background: var(--tc-content-bg); }
.topbar-icon-btn::after { display: none; }          /* sin el caret por defecto del dropdown */

/* Acceso a la web pública: BOTÓN con ícono + texto (antes era solo un ícono y no se notaba).
   Identidad CAF (petróleo lleno). En pantallas chicas se degrada a solo-ícono, sin perder el acceso. */
.topbar-web-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    height: 38px; padding: 0 .9rem; border-radius: 999px;
    background: var(--tc-petroleo); color: #fff; border: 1px solid var(--tc-petroleo);
    font-size: .9rem; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
    transition: background var(--tc-transition), box-shadow var(--tc-transition);
}
.topbar-web-btn:hover { background: #0d4a61; border-color: #0d4a61; color: #fff; box-shadow: 0 2px 8px rgba(9, 60, 80, .18); }
.topbar-web-btn .bi { font-size: 1.05rem; }
@media (max-width: 575px) {
    .topbar-web-btn { padding: 0; width: 38px; justify-content: center; border-radius: 8px; }
    .topbar-web-btn-text { display: none; }
}
/* Campanita (pasada 2): badge con NÚMERO (reemplaza el puntito de 8px) + shake al cargar. */
.topbar-icon-btn .notif-badge {
    position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px;
    padding: 0 5px; display: grid; place-items: center;
    background: var(--tc-bordo); color: #fff; font-size: .78rem; font-weight: 800;
    line-height: 1; border-radius: 999px; border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(127, 47, 55, .6);
}
/* Campanita: shake en LOOP cada ~3s mientras haya sin leer (no una sola vez). El movimiento
   ocurre en el primer ~22% del ciclo y el resto queda quieta; el JS saca la clase al marcar leídas. */
.topbar-icon-btn .bi-bell.notif-shake {
    display: inline-block; transform-origin: top center;
    animation: notif-shake 3s ease-in-out infinite;
}
@keyframes notif-shake {
    0%, 22%, 100% { transform: rotate(0); }
    3%, 9%, 15% { transform: rotate(-15deg); }
    6%, 12%, 18% { transform: rotate(15deg); }
}
@media (prefers-reduced-motion: reduce) {
    .topbar-icon-btn .bi-bell.notif-shake { animation: none; }
}

.topbar-user {
    display: flex; align-items: center; gap: .5rem;
    background: none; border: 1px solid transparent; border-radius: 999px;
    padding: .25rem .6rem .25rem .25rem; cursor: pointer;
    transition: background var(--tc-transition);
}
.topbar-user::after { display: none; }
.topbar-user:hover { background: var(--tc-content-bg); }
.topbar-user .avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: var(--tc-celeste); color: #fff; font-weight: 700; font-size: .95rem;
    display: grid; place-items: center; text-transform: uppercase;
}
.topbar-user .user-name {
    font-size: .875rem; font-weight: 600; color: var(--tc-petroleo);
    max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-user .user-caret { font-size: .75rem; color: #9aa7ac; }

/* ---- Dropdowns del header (paleta del club) ---- */
.admin-topbar .dropdown-menu {
    border: 1px solid var(--tc-border-soft); border-radius: 12px;
    box-shadow: var(--tc-shadow-hover); padding: .4rem; margin-top: .45rem; min-width: 220px;
}
.admin-topbar .dropdown-item { border-radius: 8px; padding: .5rem .75rem; font-size: .875rem; color: #3d4d54; }
.admin-topbar .dropdown-item:hover { background: var(--tc-content-bg); color: var(--tc-petroleo); }
.admin-topbar .dropdown-item.active { background: rgba(0, 181, 240, .12); color: var(--tc-petroleo); }
.admin-topbar .dropdown-header { font-weight: 700; color: var(--tc-petroleo); font-size: .8rem; padding: .35rem .75rem; }
.notif-menu { min-width: 260px; }
.notif-head { font-weight: 700; color: var(--tc-petroleo); font-size: .85rem; padding: .35rem .75rem .5rem; border-bottom: 1px solid var(--tc-border-soft); margin-bottom: .3rem; }
.notif-empty { color: #8a979c; font-size: .85rem; padding: .75rem; text-align: center; }
.notif-empty i { color: var(--tc-verde); }

@media (max-width: 575.98px) {
    .topbar-user .user-name { display: none; }
    .admin-topbar { gap: .5rem; }
}

/* ============================================================
   Tablas de datos del ranking — .tc-table-cebra (compartida)
   Cebra suave (tinte petróleo ~4%) + encabezado con color del club
   + filas finas (.35rem / .875rem). Se SUMA a .tc-table: tenistas,
   posiciones single, parejas dobles, cruces. Mismo precedente que
   el compacto .tc-socios pero reutilizable.
   ============================================================ */
.tc-table.tc-table-cebra thead th {
    background: rgba(9, 104, 138, .06);
    color: var(--tc-petroleo);
    border-bottom: 2px solid rgba(9, 104, 138, .30);
}
.tc-table.tc-table-cebra tbody tr:nth-child(even) { background: rgba(9, 104, 138, .04); }
.tc-table.tc-table-cebra tbody tr:hover { background: rgba(0, 181, 240, .09); }
.tc-table.tc-table-cebra td { padding-top: .35rem; padding-bottom: .35rem; font-size: .875rem; }
/* N° de socio: petróleo, tabular (mismo criterio que la tabla de posiciones) */
.tc-table.tc-table-cebra td.celda-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--tc-petroleo); }
/* Nombres largos: en escritorio la celda toma el resto del ancho y trunca con ellipsis
   (max-width:0 = truco de tabla auto-layout). En celular NO aplica: ahí manda el colapso
   a tarjeta genérico de .tc-table o la fila fina de .tabla-fina. */
@media (min-width: 768px) {
    .tc-table.tc-table-cebra td.td-ellipsis { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Píldora de NÚMERO (puesto en tabla / seed en cruces / puesto de sueltos): bordó
   institucional, nunca gris ni azul genérico de Bootstrap. */
.tc-num-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.8em; padding: .08rem .42rem; border-radius: 999px;
    background: rgba(127, 47, 55, .10); color: var(--tc-bordo);
    font-weight: 700; font-size: .78rem; line-height: 1.25;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Cargar/editar resultado (cruces): el <summary> del <details> es un BOTÓN del club,
   sin el caret nativo (el marker desalineaba los números de la columna). */
.res-det > summary { list-style: none; display: inline-block; cursor: pointer; }
.res-det > summary::-webkit-details-marker { display: none; }
.res-det > summary::marker { content: none; }