/* Panel del dueño · pensado primero para el celular */
:root {
    --bg: #0b0f17; --card: #121a2a; --borde: #1f2a3d; --txt: #e8edf5; --sub: #93a1b8;
    --azul: #3b82f6; --verde: #10b981; --ambar: #f59e0b; --rojo: #ef4444; --gris: #64748b;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    background: var(--bg); color: var(--txt);
    font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--azul); text-decoration: none; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 15px; margin: 0 0 10px; }
small { font-size: 60%; color: var(--sub); font-weight: 600; }

.cabecera {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; background: rgba(11, 15, 23, .94); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--borde);
}
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca .logo { height: 34px; max-width: 90px; object-fit: contain; }
.gym { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca .sub, .sub { color: var(--sub); font-size: 12.5px; }
.salir { color: var(--sub); font-size: 13px; border: 1px solid var(--borde); border-radius: 99px; padding: 6px 12px; }

.pestanas {
    display: flex; gap: 6px; padding: 10px 16px; overflow-x: auto;
    border-bottom: 1px solid var(--borde);
}
.pestanas a {
    flex: none; padding: 8px 14px; border-radius: 99px; color: var(--sub); font-weight: 600; font-size: 14px;
    border: 1px solid transparent;
}
.pestanas a.activa { background: rgba(59, 130, 246, .15); color: #bfdbfe; border-color: rgba(59, 130, 246, .45); }

main { max-width: 1100px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
footer {
    max-width: 1100px; margin: 0 auto; padding: 8px 16px 28px; display: flex; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; color: var(--gris); font-size: 12px;
}

.tarjeta { background: var(--card); border: 1px solid var(--borde); border-radius: 14px; padding: 14px; }
.tarjeta.sin-relleno { padding: 0; overflow: hidden; }
.relleno { padding: 14px 14px 0; }
.dos { display: grid; grid-template-columns: 1fr; gap: 14px; }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { background: var(--card); border: 1px solid var(--borde); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.kpi .etq { color: var(--sub); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi .val { font-size: 26px; font-weight: 800; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .det { color: var(--sub); font-size: 12px; }
.kpi.alerta .val { color: #fbbf24; }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px; border-top: 1px solid var(--borde);
}
.tarjeta:not(.sin-relleno) .lista li { padding-left: 0; padding-right: 0; }
.lista li:first-child { border-top: none; }
.lista .det { color: var(--sub); font-size: 12.5px; }
.lista .vacio { color: var(--sub); justify-content: center; padding: 22px 14px; }
.lista .crece { flex: 1; min-width: 0; }
.lista .hora { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--sub); width: 46px; flex: none; }
.mas { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 600; }

.avatar {
    width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center;
    color: #fff; font-weight: 700; font-size: 13px;
}

.chip {
    flex: none; align-self: center; line-height: 1.4; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap;
    border: 1px solid; text-transform: uppercase; letter-spacing: .02em;
}
.chip.ok { color: #6ee7b7; border-color: rgba(16, 185, 129, .5); background: rgba(16, 185, 129, .12); }
.chip.aviso { color: #fcd34d; border-color: rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .12); }
.chip.no { color: #fca5a5; border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .12); }
.chip.gris { color: #cbd5e1; border-color: rgba(148, 163, 184, .4); background: rgba(148, 163, 184, .1); }

.barras { display: flex; align-items: flex-end; gap: 8px; height: 170px; }
.barra { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; }
.barra .col { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.barra .col div { width: 100%; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #60a5fa, #2563eb); }
.barra .num { font-size: 12px; font-weight: 700; }
.barra .dia { font-size: 11px; color: var(--sub); white-space: nowrap; }

.buscador { display: flex; gap: 8px; }
.buscador input, .formulario input:not([type=checkbox]) {
    flex: 1; min-width: 0; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--borde);
    background: #0e1523; color: var(--txt); font: inherit; font-size: 16px;
}
button, .boton-sec {
    padding: 11px 16px; border-radius: 10px; border: none; background: var(--azul); color: #fff;
    font: inherit; font-weight: 700; cursor: pointer;
}
.boton-sec { background: transparent; border: 1px solid var(--borde); color: var(--txt); }
.filtros { display: flex; gap: 6px; overflow-x: auto; }
.filtros a { flex: none; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--borde); color: var(--sub); font-size: 13.5px; font-weight: 600; }
.filtros a span { opacity: .7; margin-left: 4px; }
.filtros a.activa { color: var(--txt); border-color: var(--azul); background: rgba(59, 130, 246, .15); }

.alerta { padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.alerta.no { background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .45); color: #fecaca; }

body.login main { max-width: 420px; padding-top: 10vh; }
.login-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.login-icono { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, #2563eb, #7c3aed); }
.formulario { display: flex; flex-direction: column; gap: 12px; }
.formulario label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--sub); }
.formulario label.recordar { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.formulario button { margin-top: 4px; padding: 13px; font-size: 16px; }
.nota { color: var(--sub); font-size: 13px; text-align: center; }

@media (min-width: 760px) {
    .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dos { grid-template-columns: 1fr 1fr; }
}