/* Tema "Boxeo Caucete": oscuro con rojo. Se apoya en las clases de Tailwind que ya usan las vistas,
   así que las pantallas existentes cambian de aspecto sin reescribir su HTML. */
:root {
    --rojo: #dc2626;
    --rojo-vivo: #ef3030;
    --rojo-osc: #7f1d1d;
    --fondo: #08050700;
    --panel: rgba(20, 12, 15, .86);
    --panel-2: rgba(34, 20, 24, .92);
    --panel-3: rgba(52, 30, 36, .95);
    --linea: rgba(220, 38, 38, .22);
    --linea-suave: rgba(255, 255, 255, .08);
    --titulo: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
}

html body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background-color: #080507;
    color: #fff;
    min-height: 100vh;
}

/* Fondo: foto del gimnasio fija, más oscura en el centro para que se lea el contenido */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(8, 5, 7, .45) 0%, rgba(8, 5, 7, .9) 24%, rgba(8, 5, 7, .9) 76%, rgba(8, 5, 7, .45) 100%),
        url('/static/img/fondo.jpg') center / cover no-repeat;
}
@media (max-width: 768px) {
    body::before { background: linear-gradient(rgba(8, 5, 7, .9), rgba(8, 5, 7, .92)), url('/static/img/fondo.jpg') center / cover no-repeat; }
}

/* ---------- Barra superior ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(180deg, rgba(10, 6, 8, .96), rgba(10, 6, 8, .9));
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--linea);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
}
.topbar-in {
    max-width: 80rem;
    margin: 0 auto;
    padding: .55rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: #fff; }
.marca img { width: 48px; height: 48px; }
.marca-texto { font-family: var(--titulo); font-style: italic; font-weight: 800; line-height: .95; text-transform: uppercase; }
.marca-texto small { display: block; font-size: .8rem; letter-spacing: .08em; color: #d6d3d1; font-weight: 700; }
.marca-texto b { display: block; font-size: 1.55rem; letter-spacing: .02em; }
.marca-texto b i { color: var(--rojo-vivo); font-style: italic; }

.tabs { display: flex; flex-wrap: wrap; gap: .25rem; flex: 1; min-width: 0; }
.tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .95rem;
    border-radius: .4rem;
    color: #d4d4d8;
    font-size: .92rem;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    border: 0;
    background: none;
    position: relative;
    transition: background .15s, color .15s;
}
.tab:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.tab.activa { background: linear-gradient(180deg, var(--rojo), #b91c1c); color: #fff; font-weight: 600; box-shadow: 0 2px 12px rgba(220, 38, 38, .35); }
.tab.activa::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 2px; background: #fecaca; border-radius: 2px; }
summary.tab::-webkit-details-marker { display: none; }
details.menu-admin { position: relative; }
details.menu-admin[open] > summary { background: rgba(255, 255, 255, .09); color: #fff; }
.desplegable {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 15rem;
    background: rgba(14, 8, 10, .98);
    border: 1px solid var(--linea);
    border-radius: .6rem;
    padding: .35rem;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
    z-index: 60;
}
.desplegable a { display: flex; gap: .55rem; padding: .55rem .75rem; border-radius: .4rem; color: #e5e5e5; text-decoration: none; font-size: .9rem; }
.desplegable a:hover { background: rgba(220, 38, 38, .2); color: #fff; }
.desplegable a.activa { color: #fca5a5; font-weight: 600; }

.reloj {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .4rem .85rem;
    border: 1px solid var(--linea);
    border-radius: .5rem;
    background: rgba(0, 0, 0, .35);
    margin-left: auto;
}
.reloj-hora { font-size: 1.25rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.reloj-fecha { font-size: .72rem; color: #a1a1aa; margin-bottom: .1rem; }
.usuario-salir { font-size: .72rem; color: #a1a1aa; margin-top: .15rem; }
.usuario-salir a { color: #f87171; text-decoration: none; }
.usuario-salir a:hover { color: #fecaca; }

@media (max-width: 900px) {
    .tabs { order: 3; flex: 1 0 100%; }
    .tab { padding: .45rem .7rem; font-size: .85rem; }
}
@media (max-width: 640px) {
    .marca-texto { display: block; }
    .marca-texto b { font-size: 1.25rem; }
    .reloj { padding: .3rem .6rem; }
    .tab { padding: .5rem .7rem; font-size: .85rem; }
}

/* ---------- Encabezado de cada pantalla ---------- */
main header.page-header {
    position: relative;
    overflow: hidden;
    padding: 1.35rem 1.6rem !important;
    margin-bottom: 1.5rem !important;
    border: 1px solid var(--linea) !important;
    border-radius: .75rem;
    background:
        linear-gradient(90deg, rgba(10, 6, 8, .97) 30%, rgba(10, 6, 8, .55) 70%, rgba(10, 6, 8, .25) 100%),
        url('/static/img/banner.jpg') right 36% / cover no-repeat,
        #0a0608;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
main header.page-header::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--rojo-vivo), var(--rojo-osc));
}
main header h1,
main h1.titulo {
    font-family: var(--titulo) !important;
    font-style: italic;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .01em;
    font-size: clamp(1.9rem, 4vw, 2.6rem) !important;
    line-height: 1 !important;
    color: #fff !important;
}
main header h1 .resalte { color: var(--rojo-vivo); }
main header p { color: #d4d4d8 !important; }

/* ---------- Superficies (reutiliza las clases Tailwind de las vistas) ---------- */
body .bg-gray-900 { background-color: rgba(10, 6, 8, .78); }
body .bg-gray-800 { background-color: var(--panel); border-color: var(--linea); }
body .bg-gray-700 { background-color: var(--panel-2); }
body .bg-gray-600 { background-color: var(--panel-3); }
body .bg-gray-700\/50 { background-color: rgba(52, 30, 36, .55); }
body .hover\:bg-gray-800:hover { background-color: rgba(40, 22, 28, .92); }
body .hover\:bg-gray-700:hover { background-color: rgba(70, 38, 46, .95); }
body .hover\:bg-gray-600:hover { background-color: rgba(90, 48, 58, .95); }
body .border-gray-700, body .border-gray-600, body .border-gray-800 { border-color: var(--linea); }
body .divide-gray-700 > :not([hidden]) ~ :not([hidden]),
body .divide-gray-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--linea-suave); }
body .text-red-600 { color: var(--rojo-vivo); }
body .text-gray-500 { color: #a8a29e; }
body .text-gray-400 { color: #bdb7b2; }

/* Tarjetas: bordes redondeados y un poco de profundidad */
body .bg-gray-800.rounded-lg, body .bg-gray-800.rounded-xl, body .bg-gray-800.rounded {
    border: 1px solid var(--linea);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
    backdrop-filter: blur(3px);
}

/* Botones rojos */
body .bg-red-600 { background-image: linear-gradient(180deg, #e23333, #bf1f1f); }
body .bg-red-600:hover, body .hover\:bg-red-700:hover { background-image: linear-gradient(180deg, #f04444, #cc2222); }

/* Formularios */
body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
body select, body textarea {
    background-color: rgba(8, 5, 7, .8);
    border-color: rgba(255, 255, 255, .14);
    color: #fff;
}
body input:focus, body select:focus, body textarea:focus {
    outline: none;
    border-color: var(--rojo-vivo);
    box-shadow: 0 0 0 3px rgba(239, 48, 48, .25);
}
body input::placeholder, body textarea::placeholder { color: #8a817e; }
body option { background: #140c0f; color: #fff; }

/* Tablas */
body table thead, body table th { background-color: rgba(127, 29, 29, .35); }
body table tbody tr:hover { background-color: rgba(220, 38, 38, .08); }

/* Barras de scroll discretas */
* { scrollbar-width: thin; scrollbar-color: #7f1d1d transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #7f1d1d; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Panel principal (menu.html) ---------- */
.atajo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 1.3rem 1rem;
    border-radius: .75rem;
    text-align: center;
    color: #fff;
    text-decoration: none;
    background: var(--panel);
    border: 1px solid var(--linea);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
    transition: transform .15s, border-color .15s, background .15s;
}
.atajo:hover { transform: translateY(-3px); border-color: var(--rojo-vivo); background: rgba(48, 20, 24, .92); }
.atajo .icono { font-size: 1.9rem; }
.atajo .nombre { font-family: var(--titulo); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 1.15rem; letter-spacing: .03em; }

/* Títulos de sección */
main h2 {
    font-family: var(--titulo);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #fff;
}
.debtor-card { border-left: 4px solid var(--rojo) !important; }
button:disabled { opacity: .6; cursor: not-allowed; }

/* Negro puro de las tablas -> translúcido, para que respire con el fondo */
body .bg-black { background-color: rgba(8, 5, 7, .8); }
/* Los paneles pegajosos no deben quedar tapados por la barra superior */
body .sticky.top-6 { top: 5.5rem; }