:root {
    --bg: #000000;
    --panel: #111111;
    --bg-elevated: #1c1c1c;
    --border: rgba(255,255,255,0.1);
    --fg: #ffffff;
    --fg-muted: #a8a8a8;
    --accent: #a6da35;
    --accent-fg: #a6da35;
    --accent-ink: #0a0a0a;
    --riesgo-bajo: #256eff;
    --riesgo-medio: #f7d000;
    --riesgo-alto: #fe4d4d;
    --input-bg: #0c0c0c;
    --font-display: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg: #ffffff;
        --panel: #f4f4f4;
        --bg-elevated: #e8e8e8;
        --border: rgba(0,0,0,0.1);
        --fg: #0a0a0a;
        --fg-muted: #55575c;
        --accent-fg: #5c7a1f;
        --input-bg: #f7f7f7;
    }
}
:root[data-theme="light"] {
    --bg: #ffffff;
    --panel: #f4f4f4;
    --bg-elevated: #e8e8e8;
    --border: rgba(0,0,0,0.1);
    --fg: #0a0a0a;
    --fg-muted: #55575c;
    --accent-fg: #5c7a1f;
    --input-bg: #f7f7f7;
}
:root[data-theme="dark"] {
    --bg: #000000;
    --panel: #111111;
    --bg-elevated: #1c1c1c;
    --border: rgba(255,255,255,0.1);
    --fg: #ffffff;
    --fg-muted: #a8a8a8;
    --accent-fg: #a6da35;
    --input-bg: #0c0c0c;
}

.logo-para-oscuro { display: block; }
.logo-para-claro { display: none; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .logo-para-oscuro { display: none; }
    :root:not([data-theme]) .logo-para-claro { display: block; }
}
:root[data-theme="light"] .logo-para-oscuro { display: none; }
:root[data-theme="light"] .logo-para-claro { display: block; }
:root[data-theme="dark"] .logo-para-oscuro { display: block; }
:root[data-theme="dark"] .logo-para-claro { display: none; }
* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    line-height: 1.55;
}
h1, h2 { font-family: var(--font-display); font-weight: 800; margin: 0 0 16px; }
a { color: inherit; }

.wrap { max-width: 1000px; margin: 0 auto; padding: 32px 24px 80px; }
.wrap-narrow { max-width: 480px; margin: 0 auto; padding: 32px 20px 40px; }

/* ---- App header ---- */
.app-header { border-bottom: 1px solid var(--border); }
.app-header__inner {
    max-width: 1000px; margin: 0 auto; padding: 14px 24px;
    display: flex; align-items: center; gap: 28px;
    position: relative;
}
.app-header__brand img { height: 18px; }
.app-nav-toggle { display: none; background: none; border: none; color: var(--fg); font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.app-nav-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; display: block; }
.app-nav { display: flex; gap: 20px; flex: 1; }
.app-nav a { color: var(--fg-muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.app-nav a:hover { color: var(--fg); }
.app-nav__ayuda { color: #FE7200 !important; font-weight: 700 !important; }

/* ---- Dropdown genérico — un solo patrón para Menú, Idioma y lo que haga falta después ---- */
.dropdown { position: relative; }
.dropdown__toggle {
    background: none; border: none; cursor: pointer;
    font-family: var(--font-body); color: var(--fg-muted); font-size: 14px; font-weight: 500;
    padding: 0; display: flex; align-items: center; gap: 4px;
}
.dropdown__toggle:hover { color: var(--fg); }
.dropdown__toggle::after { content: '▾'; font-size: 10px; }
.dropdown__panel {
    display: none;
    position: absolute; top: 100%; left: 0; margin-top: 14px;
    background: var(--bg); border: 1px solid var(--border-strong);
    border-radius: 4px; padding: 8px 0; min-width: 180px;
    flex-direction: column; z-index: 30;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.dropdown__panel a, .dropdown__panel button {
    padding: 9px 18px; text-align: left; background: none; border: none;
    font-family: var(--font-body); font-size: 14px; color: var(--fg); cursor: pointer;
}
.dropdown__panel form { display: contents; }
.dropdown__panel form button { width: 100%; }
.dropdown__panel a:hover, .dropdown__panel button:hover { background: var(--bg-elevated); }
.dropdown--abierto .dropdown__panel { display: flex; }
.dropdown--derecha .dropdown__panel { left: auto; right: 0; }

/* ---- Estado de una meta como desplegable con la misma forma que .tag ---- */
.dropdown--estado .dropdown__toggle {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 9px; border-radius: 100px; font-size: 12px; font-weight: 600;
    font-family: var(--font-body); color: var(--fg-muted); background: rgba(255,255,255,0.1);
}
.dropdown--estado .dropdown__toggle::after { font-size: 9px; }
.dropdown--estado.dropdown--estado-ok .dropdown__toggle { background: rgba(166,218,53,0.15); color: var(--accent-fg); }
.dropdown--estado.dropdown--estado-alerta .dropdown__toggle { background: rgba(254,77,77,0.15); color: var(--riesgo-alto); }
.dropdown--estado .dropdown__panel { min-width: 200px; }

/* ---- Icono de información — mismo mecanismo del dropdown, solo que
   el "toggle" es un círculo con una "i" en vez de texto ---- */
.info-tip { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.info-tip .dropdown__toggle {
    width: 16px; height: 16px; border-radius: 50%;
    background: rgba(255,255,255,0.12); color: var(--fg-muted);
    font-size: 11px; font-weight: 700; font-style: italic; font-family: var(--font-display);
    align-items: center; justify-content: center; padding: 0;
}
.info-tip .dropdown__toggle::after { content: none; }
.info-tip .dropdown__toggle:hover { background: rgba(255,255,255,0.22); color: var(--fg); }
.info-tip .dropdown__panel {
    flex-direction: column; padding: 12px 14px; min-width: 220px; max-width: 260px;
    font-size: 13px; color: var(--fg-muted); font-weight: 400; white-space: normal; line-height: 1.4;
}

/* ---- Idioma y tema, compactos ---- */
.selector-idioma-compacto .dropdown__toggle { text-transform: uppercase; }
.selector-tema-toggle {
    background: none; border: none; cursor: pointer; font-size: 17px;
    line-height: 1; padding: 2px 4px; color: var(--fg-muted);
}
.selector-tema-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.selector-tema-toggle:hover { color: var(--fg); }

/* ---- Botones de ícono pequeños — mover, editar, eliminar preguntas ---- */
.icon-btn {
    background: none; border: none; cursor: pointer; font-size: 14px;
    padding: 3px 6px; color: var(--fg-muted); border-radius: 4px; line-height: 1;
    display: inline-flex; align-items: center; gap: 4px;
}
.icon-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-btn:hover { color: var(--fg); background: var(--bg-elevated); }
.icon-btn:disabled { opacity: 0.25; cursor: default; }
.icon-btn:disabled:hover { background: none; color: var(--fg-muted); }
.icon-btn--peligro:hover { color: var(--riesgo-alto); }
.pregunta-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pregunta-fila:last-child { border-bottom: none; }
.pregunta-fila__acciones { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.pregunta-editar-form { display: none; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pregunta-editar-form--abierto { display: flex; }

/* ---- Revelar/ocultar un bloque al hacer clic — para detalles que
   empujan el contenido de abajo, a diferencia de .dropdown que flota
   encima ---- */
.toggle-detalle { display: none; }
.toggle-detalle--abierto { display: block; }
.app-header__campana { position: relative; text-decoration: none; font-size: 18px; margin-right: 4px; color: var(--fg-muted); }
.app-header__campana svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* ---- Ícono suelto dentro de texto corrido — para los casos donde un
   SVG va junto a una palabra sin ser parte de un botón ---- */
.icono-inline { display: inline-flex; vertical-align: -3px; }
.icono-inline svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-header__campana:hover { color: var(--fg); }
.app-header__campana-badge {
    position: absolute; top: -6px; right: -8px;
    background: #FE7200; color: #fff; font-size: 10px; font-weight: 700;
    border-radius: 999px; padding: 1px 5px; line-height: 1.3;
}
.app-header__user { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--fg-muted); }
.app-header__logout { color: var(--fg-muted); text-decoration: none; }
.app-header__logout:hover { color: var(--fg); }

.page-head { margin-bottom: 28px; }

/* ---- Buttons / forms ---- */
.btn {
    display: inline-block; border: 1px solid transparent; border-radius: 4px;
    font-family: var(--font-body); font-weight: 600; font-size: 14px;
    padding: 11px 20px; cursor: pointer; text-decoration: none;
}
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: #b8ea47; }
.btn--ghost { background: transparent; border-color: var(--border); color: var(--fg); }
.btn--ghost:hover { border-color: var(--fg); }
.btn--block { width: 100%; }
.btn--sm { padding: 7px 14px; font-size: 13px; }

input, textarea, select {
    background: var(--input-bg); border: 1px solid var(--border); color: var(--fg);
    border-radius: 4px; padding: 10px 12px; font-family: var(--font-body); font-size: 15px;
    width: 100%;
}
select { cursor: pointer; }
select option { background: var(--input-bg); color: var(--fg); }

/* El ícono nativo del selector de fecha es oscuro por defecto — sobre un
   campo con fondo oscuro se vuelve prácticamente invisible. Se invierte
   solo en tema oscuro, para que se vea claro sobre fondo oscuro y se
   quede como estaba (oscuro sobre claro) en tema claro. */
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
}
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}
label { display: block; font-size: 13px; color: var(--fg-muted); margin-bottom: 6px; }

/* ---- Login ---- */
.login-body {
    background: var(--bg); color: var(--fg); font-family: var(--font-body);
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    margin: 0; padding: 48px 24px;
}
/* Con formularios largos (registro con contacto de emergencia, registro de
   profesional con declaración de habilitación) el contenido supera el alto
   de pantallas de escritorio comunes. El padding de arriba evita que la
   tarjeta quede pegada al borde superior/inferior de la ventana — sin él,
   el centrado vertical no tiene efecto una vez el contenido no cabe. */
.login-card { width: 100%; max-width: 340px; padding: 24px; }
.login-card__logo { height: 20px; margin: 0 auto 32px; }
.login-form { display: flex; flex-direction: column; gap: 6px; }
.login-form label:not(:first-of-type) { margin-top: 10px; }
.login-form button { margin-top: 20px; }
.login-card__error { color: var(--riesgo-alto); font-size: 14px; text-align: center; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--fg-muted); font-size: 13px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.btn--sso {
    background: transparent; border: 1px solid var(--border); color: var(--fg);
    text-align: center; margin-bottom: 10px;
}
.btn--sso:hover { border-color: var(--fg); }
.checkin-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--fg-muted); margin-top: 4px; line-height: 1.4; }

.rol-selector__opcion {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px;
}
.rol-selector__opcion input[type="radio"] { width: auto; margin-top: 3px; flex-shrink: 0; }
.rol-selector__opcion:has(input:checked) { border-color: var(--accent); background: var(--panel); }

.selector-idioma { display: flex; gap: 8px; justify-content: center; }
.selector-idioma a {
    text-decoration: none; color: var(--fg-muted); font-size: 12px; font-weight: 600;
    padding: 4px 6px; border-radius: 3px;
}
.selector-idioma a:hover { color: var(--fg); }
.selector-idioma__activo, .selector-tema__activo { color: var(--accent-fg) !important; }

/* ---- Check-in ---- */
.app-lead { color: var(--fg-muted); margin-bottom: 28px; }
.checkin-form { display: flex; flex-direction: column; gap: 22px; }
.checkin-field label { color: var(--fg); font-size: 15px; margin-bottom: 10px; }
.checkin-field { display: flex; flex-direction: column; }
.checkin-field__titulo { display: flex; align-items: center; gap: 6px; position: relative; }
.checkin-field__titulo label { margin-bottom: 0; }
.checkin-info-btn {
    background: none; border: none; padding: 0; cursor: pointer; color: var(--fg-muted);
    display: flex; align-items: center; margin-bottom: 10px;
}
.checkin-info-btn:hover { color: var(--accent-fg); }
.checkin-info-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.checkin-info-burbuja {
    display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 10;
    background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
    padding: 10px 12px; font-size: 12.5px; color: var(--fg-muted); line-height: 1.4;
    max-width: 260px; box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.checkin-info-burbuja--abierta { display: block; }
.checkin-field input[type=range] { width: 100%; accent-color: var(--accent); }
.checkin-field output { align-self: flex-end; color: var(--accent-fg); font-weight: 700; font-family: var(--font-display); }
.checkin-field__anclas { display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.app-notice { background: var(--panel); border: 1px solid var(--border); padding: 12px 16px; border-radius: 4px; margin-bottom: 20px; }
.app-secondary-link { display: inline-block; margin-top: 24px; color: var(--fg-muted); text-decoration: none; font-size: 14px; }
.app-secondary-link:hover { color: var(--fg); }

/* ---- Chat ---- */
.chat-page { display: flex; flex-direction: column; height: calc(100vh - 60px); padding-bottom: 20px; }
.chat-layout { display: flex; gap: 24px; flex: 1; min-height: 0; }

.chat-sidebar { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; }
.chat-sidebar__nueva { display: block; text-align: center; margin-bottom: 14px; }
.chat-sidebar__toggle { display: none; background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--fg); padding: 8px 12px; margin-bottom: 10px; cursor: pointer; font-family: var(--font-body); align-items: center; gap: 6px; }
.chat-sidebar__toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.chat-sidebar__lista { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.chat-sidebar__item {
    padding: 9px 10px; border-radius: 4px; font-size: 13.5px; color: var(--fg-muted);
    text-decoration: none; border-left: 3px solid transparent;
    display: flex; align-items: center; gap: 6px; min-width: 0;
}
.chat-sidebar__item-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.chat-sidebar__item-insignia { flex-shrink: 0; font-size: 10px; }
.chat-sidebar__item:hover { background: var(--bg-elevated); color: var(--fg); }
.chat-sidebar__item--activo { background: var(--bg-elevated); color: var(--fg); border-left-color: var(--accent); font-weight: 600; }
.chat-sidebar__espacio { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 2px; padding: 0 10px; }
.chat-sidebar__espacio:first-child { margin-top: 0; }
.chat-sidebar__espacio-nombre { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; color: var(--fg-muted); }
.chat-sidebar__nueva-mini { font-size: 11px; color: var(--accent-fg); text-decoration: none; }
.chat-sidebar__nueva-mini:hover { text-decoration: underline; }
.chat-sidebar__gestionar { margin-top: 14px; padding: 9px 10px; font-size: 12.5px; color: var(--fg-muted); text-decoration: none; border-top: 1px solid var(--border); }
.chat-sidebar__gestionar:hover { color: var(--fg); }

.chat-sidebar__fila { display: flex; align-items: center; gap: 2px; }
.chat-sidebar__fila .chat-sidebar__item { flex: 1; min-width: 0; }
.chat-sidebar__renombrar-toggle {
    background: none; border: none; cursor: pointer; color: var(--fg-muted);
    font-size: 12px; padding: 4px 6px; flex-shrink: 0; opacity: 0.6;
}
.chat-sidebar__renombrar-toggle svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.chat-sidebar__renombrar-toggle:hover { opacity: 1; color: var(--fg); }
.chat-sidebar__renombrar-form { gap: 6px; padding: 4px 10px 8px; align-items: center; }
.chat-sidebar__renombrar-form input[type="text"] { flex: 1; font-size: 13px; padding: 6px 8px; }
.chat-sidebar__renombrar-form.toggle-detalle--abierto { display: flex; }

.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-window {
    flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
    padding: 8px 2px 20px;
}
.chat-window--readonly { max-height: 420px; flex: none; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 16px; }
.chat-bubble { max-width: 80%; padding: 12px 16px; border-radius: 14px; font-size: 15px; line-height: 1.5; }
.chat-bubble--ia { background: var(--panel); border: 1px solid var(--border); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-bubble--atleta { background: var(--accent); color: var(--accent-ink); align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-form { display: flex; gap: 10px; align-items: flex-end; }
.chat-form textarea { resize: none; max-height: 120px; }
.chat-paywall {
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    padding: 20px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.chat-paywall p { margin: 0; color: var(--fg-muted); font-size: 14px; max-width: 420px; }

.chat-bubble__texto { white-space: pre-wrap; }
.chat-bubble__acciones { display: flex; gap: 4px; opacity: 0.45; transition: opacity 0.15s; }
.chat-bubble--ia:hover .chat-bubble__acciones { opacity: 1; }
.chat-bubble__pie { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.chat-bubble__hora { font-size: 11px; color: var(--fg-muted); opacity: 0.6; flex-shrink: 0; }
.chat-bubble--atleta .chat-bubble__hora { text-align: right; margin-top: 4px; color: var(--accent-ink); opacity: 0.55; }
.chat-fecha-separador { display: flex; justify-content: center; margin: 12px 0; }
.chat-fecha-separador span {
    background: var(--panel); color: var(--fg-muted); font-size: 11.5px; font-weight: 600;
    padding: 4px 12px; border-radius: 12px; border: 1px solid var(--border);
}

.atleta-conversaciones { display: flex; gap: 16px; margin-top: 14px; }
.atleta-conversaciones__lista { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; max-height: 480px; overflow-y: auto; }
.atleta-conversaciones__item {
    display: block; padding: 8px 10px; border-radius: 4px; text-decoration: none; color: var(--fg-muted);
    border-left: 3px solid transparent; font-size: 13px;
}
.atleta-conversaciones__item:hover { background: var(--bg-elevated); color: var(--fg); }
.atleta-conversaciones__item--activa { background: var(--bg-elevated); color: var(--fg); border-left-color: var(--accent); font-weight: 600; }
.atleta-conversaciones__titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.atleta-conversaciones__hilo { flex: 1; min-width: 0; }
@media (max-width: 720px) {
    .atleta-conversaciones { flex-direction: column; }
    .atleta-conversaciones__lista { width: 100%; max-height: 200px; flex-direction: row; flex-wrap: wrap; }
}
.chat-bubble__accion {
    background: none; border: none; cursor: pointer;
    padding: 5px; border-radius: 5px; line-height: 1;
    display: inline-flex; align-items: center; gap: 5px; color: var(--fg-muted);
    font-family: var(--font-body); font-size: 12.5px;
}
.chat-bubble__accion svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-bubble__accion:hover { background: rgba(255,255,255,0.08); color: var(--fg); }
.chat-bubble__accion--activo { color: var(--accent); }
.chat-bubble__accion--activo svg { fill: var(--accent); }
.chat-bubble__accion--copiado { color: var(--accent); }

.chat-bubble--pensando { display: flex; gap: 4px; align-items: center; padding: 16px; }
.chat-pensando-punto {
    width: 6px; height: 6px; border-radius: 50%; background: var(--fg-muted);
    animation: chat-pensando-rebote 1.1s infinite ease-in-out both;
}
.chat-pensando-punto:nth-child(1) { animation-delay: -0.24s; }
.chat-pensando-punto:nth-child(2) { animation-delay: -0.12s; }
@keyframes chat-pensando-rebote {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .chat-pensando-punto { animation: none; opacity: 0.8; }
}

/* ---- Tables / tags ---- */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border); font-size: 14px; }
.data-table th { color: var(--fg-muted); font-weight: 500; font-size: 13px; }
.data-table--compact th, .data-table--compact td { padding: 8px 6px; }
.data-table__row--alerta { background: rgba(254,77,77,0.06); }

.tag { display: inline-block; padding: 3px 9px; border-radius: 100px; font-size: 12px; font-weight: 600; }
.tag--ok { background: rgba(166,218,53,0.15); color: var(--accent-fg); }
.tag--alerta { background: rgba(254,77,77,0.15); color: var(--riesgo-alto); }
.tag--inactivo { background: rgba(255,255,255,0.1); color: var(--fg-muted); margin-left: 8px; }
.tag--publico { background: rgba(37,110,255,0.15); color: var(--riesgo-bajo); margin-left: 8px; }
.tag--riesgo-bajo { background: rgba(37,110,255,0.15); color: var(--riesgo-bajo); margin-left: 8px; }
.tag--riesgo-medio { background: rgba(247,208,0,0.15); color: var(--riesgo-medio); margin-left: 8px; }
.tag--riesgo-alto { background: rgba(254,77,77,0.18); color: var(--riesgo-alto); margin-left: 8px; }

.app-empty, .app-muted { color: var(--fg-muted); font-size: 14px; }

/* ---- Athlete detail grid ---- */
.atleta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 20px; }
.panel--full { grid-column: 1 / -1; }
.nota-form { display: flex; gap: 10px; margin-bottom: 20px; align-items: flex-start; }
.nota-form textarea { flex: 1; }
.nota { border-top: 1px solid var(--border); padding: 12px 0; }
.nota__fecha { color: var(--fg-muted); font-size: 12px; margin: 0 0 4px; }

/* ---- Alerts inbox ---- */
.alertas-list { display: flex; flex-direction: column; gap: 12px; }
.alerta-card {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--riesgo-medio);
    border-radius: 6px; padding: 16px 20px; flex-wrap: wrap;
}
.alerta-card--alto { border-left-color: var(--riesgo-alto); }
.alerta-card__info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.alerta-card__acciones { display: flex; align-items: center; gap: 16px; }

@media (max-width: 720px) {
    .atleta-grid { grid-template-columns: 1fr; }
    .app-header__inner { flex-wrap: wrap; row-gap: 10px; }
    .app-header__user { margin-left: 0; width: 100%; justify-content: flex-end; }

    .app-nav-toggle { display: block; order: 2; }
    .app-header__user { order: 3; }
    .app-nav {
        display: none;
        order: 4;
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: flex-start; gap: 14px;
        background: var(--bg); border-bottom: 1px solid var(--border);
        padding: 16px 24px 20px; z-index: 20;
    }
    .app-nav--abierto { display: flex; }

    /* Dentro del menú hamburguesa ya todo se acomoda en columna — el
       panel de "Más" no necesita flotar encima, se integra igual que
       cualquier otro enlace. */
    /* Dentro del menú hamburguesa ya todo se acomoda en columna — el
       dropdown de navegación no necesita flotar encima, se integra
       igual que cualquier otro enlace. El de idioma (fuera de #app-nav)
       no se toca aquí — sigue como su propio menú compacto. */
    #app-nav .dropdown__toggle { display: none; }
    #app-nav .dropdown__panel {
        display: flex !important; position: static; flex-direction: column;
        border: none; box-shadow: none; padding: 0; margin: 0; background: none;
    }
    #app-nav .dropdown__panel a { padding: 0; }
}

/* ---- Notificaciones como burbuja flotante (JS agrega .toast-flotante a
   .app-notice / .login-card__error que ya existen en cada página — no
   hace falta cambiar el PHP de cada una para que se vean así) ---- */
.toast-flotante {
    position: fixed !important;
    top: 20px; left: 50%;
    max-width: 440px; width: calc(100% - 40px);
    z-index: 200;
    padding: 14px 20px !important;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14.5px;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
    animation: toast-entrada 0.18s ease forwards;
    margin: 0 !important;
    border: 1px solid transparent;
}
.toast-flotante.app-notice { background: #173d0a; color: #c5f16b; border-color: #4c8a1f; }
.toast-flotante.login-card__error { background: #3d0a0a; color: #ffb3b3; border-color: #a03535; }
.toast-flotante--saliendo { animation: toast-salida 0.22s ease forwards; }
@keyframes toast-entrada {
    from { opacity: 0; transform: translateX(-50%) translateY(-16px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes toast-salida {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
    .toast-flotante, .toast-flotante--saliendo { animation: none; }
}

/* ---- Mi perfil — menú lateral con secciones ---- */
.tabs-layout { display: flex; gap: 36px; align-items: flex-start; margin-top: 24px; }
.tabs-sidebar { display: flex; flex-direction: column; gap: 2px; min-width: 210px; flex-shrink: 0; }
.tabs-sidebar__item {
    text-align: left; background: none; border: none; border-left: 3px solid transparent;
    padding: 11px 14px; font-family: var(--font-body); font-size: 14.5px; color: var(--fg-muted); cursor: pointer;
}
.tabs-sidebar__item:hover { color: var(--fg); }
.tabs-sidebar__item--activo { border-left-color: var(--accent); color: var(--fg); font-weight: 600; background: var(--bg-elevated); }
.tabs-contenido { flex: 1; min-width: 0; }
.tabs-panel { display: none; }
.tabs-panel--activo { display: block; }
.tabs-panel h2 { margin-top: 0; }

@media (max-width: 720px) {
    .tabs-layout { flex-direction: column; gap: 16px; }
    .tabs-sidebar {
        flex-direction: row; overflow-x: auto; width: 100%; min-width: 0; gap: 4px;
        border-bottom: 1px solid var(--border); padding-bottom: 2px;
    }
    .tabs-sidebar__item { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
    .tabs-sidebar__item--activo { border-left: none; border-bottom-color: var(--accent); background: none; }
}

/* ---- Chat: la lista de conversaciones se esconde detrás de un botón en
   móvil, en vez de competir por espacio con la ventana del chat ---- */
@media (max-width: 720px) {
    .chat-layout { flex-direction: column; gap: 10px; }
    .chat-sidebar { width: 100%; }
    .chat-sidebar__toggle { display: inline-flex; }
    .chat-sidebar__lista {
        display: none; position: absolute; z-index: 20; left: 16px; right: 16px;
        background: var(--bg); border: 1px solid var(--border-strong); border-radius: 6px;
        padding: 8px; max-height: 260px; box-shadow: 0 12px 32px rgba(0,0,0,0.4);
    }
    .chat-sidebar__lista--abierta { display: flex; }
}