/* ============================================================
ForceLab — Design System v3
Inspired by Notion · Linear · Vercel · Stripe
Palette: Zinc neutrals + Blue-600 accent
============================================================ */
/* ── Custom Properties ─────────────────────────────────────── */
:root {
/* Brand accent — clean Stripe/Vercel blue */
--accent: #2563eb;
--accent-dark: #1d4ed8;
--accent-light: #eff6ff;
--accent-muted: #dbeafe;
--accent-glow: rgba(37,99,235,.1);
/* Status */
--red: #ef4444;
--red-light: #fef2f2;
--amber: #f59e0b;
--amber-light: #fffbeb;
--green: #10b981;
--green-light: #f0fdf4;
--blue: #2563eb;
--blue-light: #eff6ff;
/* Sidebar — near-black Vercel-style */
--sb-bg: #09090b;
--sb-text: #71717a;
--sb-text-act: #fafafa;
--sb-hover: rgba(255,255,255,.04);
--sb-active: rgba(37,99,235,.14);
--sb-border: rgba(255,255,255,.06);
--sb-w: 220px;
--sb-w-collapsed: 56px;
/* Content — Zinc palette */
--bg: #fafafa;
--bg-2: #ffffff;
--bg-alt: #f4f4f5;
--bg-hover: #f4f4f5;
--ink: #18181b;
--ink-soft: #3f3f46;
--ink-mute: #71717a;
--ink-ghost: #a1a1aa;
--line: #e4e4e7;
--line-strong: #d4d4d8;
--line-faint: #f4f4f5;
/* Layout */
--topbar-h: 52px;
--r-sm: 4px;
--r-md: 6px;
--r-lg: 10px;
--shadow-sm: 0 1px 2px rgba(0,0,0,.05);
--shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
--shadow-lg: 0 12px 32px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.04);
--shadow-card: 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
/* Typography — Inter only */
--ff: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--ff-head: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--ff-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* Type scale */
--text-2xs: 0.6875rem;
--text-xs: 0.75rem;
--text-sm: 0.8125rem;
--text-base: 0.875rem;
--text-md: 0.9375rem;
--text-lg: 1.0625rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
/* Legacy aliases */
--radius: var(--r-md);
--text-1: var(--ink);
--text-muted: var(--ink-mute);
}
/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
font-family: var(--ff);
font-size: var(--text-base);
background: var(--bg);
color: var(--ink);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
/* ── Login Screen ───────────────────────────────────────────── */
.login-screen {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #09090b;
position: relative;
overflow: hidden;
}
.login-bg { position: absolute; inset: 0; pointer-events: none; }
.login-blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .18; }
.login-blob.b1 { width: 560px; height: 560px; background: radial-gradient(circle, #2563eb, transparent 70%); top: -180px; left: -120px; }
.login-blob.b2 { width: 400px; height: 400px; background: radial-gradient(circle, #4f46e5, transparent 70%); bottom: -100px; right: -80px; }
.login-blob.b3 { width: 300px; height: 300px; background: radial-gradient(circle, #0891b2, transparent 70%); top: 45%; left: 55%; transform: translate(-50%,-50%); }
.login-card {
position: relative;
z-index: 1;
background: #0e0e10;
border: 1px solid #27272a;
border-radius: 12px;
padding: 2rem;
width: 100%;
max-width: 380px;
box-shadow: 0 32px 80px rgba(0,0,0,.6);
}
.login-logo { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1.75rem; }
.login-logo-mark {
width: 36px; height: 36px;
background: var(--accent);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 1rem; color: #fff;
flex-shrink: 0; letter-spacing: -.02em;
}
.login-logo-name { display: block; font-weight: 700; font-size: 0.9rem; color: #fff; letter-spacing: -.01em; }
.login-logo-sub { display: block; font-size: 0.7rem; color: #52525b; }
.login-title { font-size: var(--text-xl); font-weight: 700; color: #fff; letter-spacing: -.02em; }
.login-sub { font-size: var(--text-sm); color: #71717a; margin-top: 0.2rem; margin-bottom: 1.25rem; }
.login-form { display: flex; flex-direction: column; gap: 0.75rem; }
.login-form .field-group label { color: #71717a; font-size: var(--text-xs); font-weight: 500; }
.login-form .field-group input {
background: #18181b;
border: 1px solid #27272a;
color: #fff;
border-radius: var(--r-sm);
}
.login-form .field-group input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
background: #1c1c1f;
}
.login-form .field-group input::placeholder { color: #3f3f46; }
.login-form .btn-primary { background: var(--accent); border-color: var(--accent); margin-top: 0.25rem; }
/* ── App Shell ──────────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }
/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
width: var(--sb-w);
min-height: 100vh;
min-height: 100dvh; /* R47-3: min-height:100vh por sí solo actuaría como piso y anularía el height:100dvh de abajo */
background: var(--sb-bg);
display: flex;
flex-direction: column;
flex-shrink: 0;
position: sticky;
top: 0;
height: 100vh;
/* R47-3: 100vh usa el viewport "grande" (como si la barra de direcciones
estuviera oculta) — en un celular real, con la barra visible, el
sidebar (position:fixed en móvil) quedaba más alto que el área
visible, empujando el footer (Cambiar contraseña/Cerrar sesión) fuera
de pantalla. Como el propio sidebar NO desbordaba su caja (scrollHeight
== clientHeight), no había nada que hacer scroll para revelarlo — el
-webkit-overflow-scrolling:touch de más abajo no podía arreglar esto
porque el problema nunca fue de scroll. Mismo patrón ya usado en
.modal (ver max-height 90vh/90dvh) — dvh sí descuenta la barra de
direcciones. Fallback a vh si el navegador no soporta dvh. */
height: 100dvh;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
transition: width .2s ease;
z-index: 100;
}
.sidebar::-webkit-scrollbar { width: 0; }
.sidebar.collapsed { width: var(--sb-w-collapsed); }
.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .user-info,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .nav-item span { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 0.5rem; }
.sidebar.collapsed .sidebar-header { justify-content: center; padding: 0.875rem 0; }
.sidebar.collapsed .sidebar-user { justify-content: center; padding: 0.625rem 0; }
.sidebar-header {
padding: 0.875rem 0.875rem 0.625rem;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--sb-border);
}
.sidebar-logo { display: flex; align-items: center; gap: 0.5rem; }
.sidebar-logo-mark {
width: 28px; height: 28px;
background: var(--accent);
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 0.825rem; color: #fff;
flex-shrink: 0; letter-spacing: -.02em;
}
.sidebar-logo-name { display: block; font-weight: 700; font-size: 0.825rem; color: #fafafa; letter-spacing: -.01em; }
.sidebar-logo-sub { display: block; font-size: 0.6rem; color: #52525b; margin-top: 0.05rem; }
.sidebar-toggle {
color: #3f3f46;
padding: 0.2rem;
border-radius: var(--r-sm);
display: flex; align-items: center; justify-content: center;
transition: color .15s, background .15s;
}
.sidebar-toggle:hover { color: #a1a1aa; background: rgba(255,255,255,.04); }
.sidebar.collapsed .sidebar-toggle svg { transform: rotate(180deg); }
.sidebar-user {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 0.875rem;
border-bottom: 1px solid var(--sb-border);
}
.user-avatar {
width: 26px; height: 26px;
border-radius: 50%;
background: var(--accent);
display: flex; align-items: center; justify-content: center;
font-size: 0.625rem; font-weight: 700; color: #fff;
flex-shrink: 0;
}
.user-name { display: block; font-size: var(--text-xs); font-weight: 600; color: #d4d4d8; }
.user-role-badge {
display: inline-block;
font-size: 0.6rem;
color: #60a5fa;
background: rgba(37,99,235,.12);
padding: 0.08rem 0.35rem;
border-radius: 20px;
margin-top: 0.1rem;
font-weight: 500;
}
.sidebar-nav { flex: 1; padding: 0.25rem 0; }
.nav-section { padding: 0.125rem 0; }
.nav-section-label {
display: block;
font-size: 0.6rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: #3f3f46;
padding: 0.5rem 0.875rem 0.175rem;
}
.nav-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.75rem;
font-size: var(--text-sm);
font-weight: 500;
color: var(--sb-text);
transition: color .15s, background .15s;
position: relative;
}
.nav-item:hover { color: #d4d4d8; background: var(--sb-hover); }
.nav-item.active { color: #fafafa; background: var(--sb-active); }
.nav-item.active::before {
content: '';
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 2px; height: 60%;
background: var(--accent);
border-radius: 0 2px 2px 0;
}
.nav-icon { width: 15px; height: 15px; flex-shrink: 0; opacity: .6; }
.nav-item.active .nav-icon,
.nav-item:hover .nav-icon { opacity: 1; }
.nav-item--logout { width: 100%; color: var(--sb-text); }
.nav-item--logout:hover { color: #f87171; background: rgba(239,68,68,.06); }
.sidebar-footer { border-top: 1px solid var(--sb-border); padding: 0.25rem 0; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 150; backdrop-filter: blur(2px); }
.sidebar-overlay.visible { display: block; }
/* ── Topbar ─────────────────────────────────────────────────── */
.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
height: var(--topbar-h);
background: var(--bg-2);
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
gap: 1rem;
padding: 0 1.25rem;
position: sticky;
top: 0;
z-index: 90;
}
.topbar-menu-btn { display: none; flex-direction: column; gap: 3.5px; padding: 0.25rem; border-radius: var(--r-sm); }
.topbar-menu-btn:hover { background: var(--bg-alt); }
.topbar-menu-btn span { display: block; width: 16px; height: 1.5px; background: var(--ink-soft); border-radius: 1px; }
.topbar-breadcrumb { flex: 1; font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); }
.topbar-right { display: flex; align-items: center; gap: 0.625rem; }
.topbar-version { font-size: var(--text-2xs); color: var(--ink-ghost); }
.topbar-avatar {
width: 26px; height: 26px;
border-radius: 50%;
background: var(--accent);
display: flex; align-items: center; justify-content: center;
font-size: 0.6rem; font-weight: 700; color: #fff;
}
/* ── Content Area ───────────────────────────────────────────── */
.content-area { flex: 1; padding: 1.5rem; max-width: 1440px; }
/* ── Page Header ────────────────────────────────────────────── */
.page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.page-header-left { flex: 1; }
.page-title {
font-size: var(--text-xl);
font-weight: 700;
color: var(--ink);
line-height: 1.2;
letter-spacing: -.02em;
}
.page-subtitle { font-size: var(--text-sm); color: var(--ink-mute); margin-top: 0.2rem; }
/* ── Cards ──────────────────────────────────────────────────── */
.card {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 1.125rem 1.25rem;
box-shadow: var(--shadow-card);
}
.card-title {
font-size: var(--text-md);
font-weight: 650;
color: var(--ink);
letter-spacing: -.01em;
margin-bottom: 0.875rem;
}
.card-sub { font-size: var(--text-xs); color: var(--ink-mute); margin-top: 0.15rem; }
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.875rem;
}
.session-card-header { flex-wrap: wrap; row-gap: .35rem; }
.session-card-header .session-collapse-toggle { min-width: 0; flex: 1 1 220px; }
.session-card-header .session-collapse-toggle > div { min-width: 0; }
.session-card-header .session-collapse-toggle p { white-space: normal; overflow-wrap: break-word; word-break: break-word; }
/* ── Stat Cards ─────────────────────────────────────────────── */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.stat-card {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 0.875rem 1rem;
box-shadow: var(--shadow-card);
}
.stat-label { font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-ghost); }
.stat-value { font-size: 1.75rem; font-weight: 800; color: var(--ink); margin: 0.2rem 0 0.15rem; line-height: 1; letter-spacing: -.03em; }
.stat-delta { font-size: var(--text-2xs); color: var(--ink-ghost); }
.stat-delta.up { color: var(--green); }
.stat-delta.down { color: var(--red); }
/* ── Grid Layouts ───────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.grid-main-aside { display: grid; grid-template-columns: 1fr 300px; gap: 1rem; align-items: start; }
.grid-main-aside.plan-detail-grid { grid-template-columns: minmax(0, 1fr) 280px; }
.plan-aside-toggle-mobile.btn { display: none; align-items: center; gap: .4rem; margin-bottom: .75rem; }
.plan-aside-toggle-mobile .plan-aside-toggle-chevron { transition: transform .2s ease; }
.plan-aside-toggle-mobile.is-open .plan-aside-toggle-chevron { transform: rotate(180deg); }
.plan-aside-sticky {
display: flex; flex-direction: column; gap: .625rem;
position: sticky;
top: calc(var(--topbar-h) + 1rem);
max-height: calc(100vh - var(--topbar-h) - 2rem);
overflow-y: auto; padding-right: 2px;
}
.plan-aside-sticky .card { margin-bottom: 0 !important; }
.plan-aside-sticky::-webkit-scrollbar { width: 3px; }
.plan-aside-sticky::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.calc-controls-grid { display: grid; gap: .5rem; margin-bottom: .625rem; }
@media (max-width: 1024px) {
.plan-aside-toggle-mobile.btn { display: inline-flex; }
.plan-aside-sticky { position: static; max-height: none; overflow: visible; }
#plan-aside-panel.plan-aside-collapsed { display: none; }
/* R104 — el panel se despliega ARRIBA de las sesiones, no debajo.
El botón "Planes y herramientas" vive sobre la rejilla, pero el panel
es el SEGUNDO hijo: al apilarse en una columna caía después de todas
las sesiones. Pulsabas el botón y en pantalla no pasaba nada visible;
había que bajar por 6-8 sesiones para encontrar lo que acababas de
abrir. El disparador y su contenido estaban a media pantalla de
distancia.
`order` solo reordena la pintura, no el DOM: el orden de lectura y el
foco del teclado se mantienen, y en escritorio (dos columnas) no
cambia nada. */
.grid-main-aside.plan-detail-grid > #plan-aside-panel { order: -1; }
}
/* ── Forms & Inputs ─────────────────────────────────────────── */
.field-group { display: flex; flex-direction: column; gap: 0.25rem; }
.field-group label { font-size: var(--text-xs); font-weight: 500; color: var(--ink-soft); }
.field-group input,
.field-group select,
.field-group textarea,
.control-input {
height: 34px;
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
padding: 0 0.625rem;
font-size: var(--text-sm);
color: var(--ink);
background: var(--bg-2);
transition: border-color .15s, box-shadow .15s;
width: 100%;
}
.field-group textarea { height: auto; min-height: 68px; padding: 0.5rem 0.625rem; line-height: 1.5; resize: vertical; }
.field-group select,
select.control-input { cursor: pointer; }
/* ══════════════════════════════════════════════════════════════════
R156 — El zoom de iOS al tocar un campo
------------------------------------------------------------------
Safari en iOS hace zoom SOLO cuando enfocas un campo cuya letra mide
menos de 16px. Los nuestros usan --text-sm (13px), asi que zoomeaba
cada vez -- y como el zoom no vuelve solo, la pantalla se quedaba
desplazada.
No se puede bloquear el zoom: `user-scalable=no` lo ignora iOS desde
la version 10, a proposito, por accesibilidad. Y el "zoom con efecto
liga" no existe como funcion del navegador; habria que interceptar
gestos tactiles a mano y pelearse con el sistema.
La solucion real es quitarle el motivo: a 16px iOS no zoomea. El
pellizco para ampliar sigue funcionando igual, que es lo que si
queriamos conservar.
Se aplica por tipo de puntero, no por ancho: la condicion de verdad
es "esto se toca con el dedo", no "la pantalla es estrecha". Una
tablet de 1024px tambien zoomea.
══════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
.field-group input,
.field-group select,
.field-group textarea,
.control-input,
.runner-set input,
input[type="text"], input[type="number"], input[type="date"],
input[type="time"], input[type="tel"], input[type="email"],
input[type="password"], input[type="search"], select, textarea {
font-size: 16px;
}
}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus,
.control-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.field-group input::placeholder,
.field-group textarea::placeholder,
.control-input::placeholder { color: var(--ink-ghost); }
/* .control-input: mismo lenguaje visual que .field-group input/select, pero
usable directamente en controles compactos/inline (filtros, toolbars,
inputs dentro de wizards) que no están envueltos en la estructura completa
de .field-group (label + input apilados). El ancho/alto puntual de cada
caso sigue sobreescribiéndose con estilos inline (mayor especificidad). */
.field-hint { font-size: var(--text-2xs); color: var(--ink-ghost); margin-top: 0.15rem; line-height: 1.4; }
.field-calc { font-size: var(--text-2xs); color: var(--accent); margin-top: 0.15rem; font-weight: 600; }
.field-err { font-size: var(--text-2xs); color: var(--red); margin-top: .15rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
.form-row-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0.75rem; }
/* R48: lista de checkboxes estilo Notion (p.ej. "Permisos sobre el Banco de
Ejercicios" en Crear/Editar usuario) — antes eran
sueltos sin tamaño/alineación propios, se veían enormes y desproporcionados
frente al resto de la UI (que nunca deja un control nativo sin estilizar). */
.perm-check-list { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.perm-check-row {
display: flex;
align-items: center;
gap: .6rem;
padding: .55rem .75rem;
cursor: pointer;
border-bottom: 1px solid var(--line);
}
.perm-check-row:last-child { border-bottom: none; }
.perm-check-row:hover { background: var(--bg-hover); }
.perm-check-row input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); margin: 0; }
.perm-check-row span { font-size: .85rem; color: var(--ink); }
/* ── Form Sections — Notion-style blocks ────────────────────── */
.form-section {
border: none;
border-top: 1px solid var(--line);
border-radius: 0;
overflow: visible;
margin-bottom: 0;
background: transparent;
}
.form-section:first-of-type { border-top: none; }
.form-section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6rem 0;
background: transparent;
border-bottom: 1.5px solid var(--line);
cursor: pointer;
user-select: none;
}
.form-section-header:hover .form-section-title { color: var(--accent); }
.form-section-title {
font-size: var(--text-sm);
font-weight: 800;
letter-spacing: .01em;
color: var(--ink);
display: flex;
align-items: center;
gap: 0.55rem;
padding-left: 0.6rem;
border-left: 3px solid var(--accent);
line-height: 1.25;
}
.form-section-badge {
font-size: var(--text-2xs);
background: var(--accent-muted);
color: var(--accent);
padding: 0.1rem 0.4rem;
border-radius: 20px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.form-section-chevron { width: 14px; height: 14px; color: var(--ink-ghost); transition: transform .2s; flex-shrink: 0; }
.form-section.open .form-section-chevron { transform: rotate(180deg); }
.form-section-body { padding: 0 0 0.875rem; display: grid; gap: 0.75rem; }
.form-section-body.hidden { display: none; }
.form-section-group-header {
margin: 1.5rem 0 0.5rem;
padding: .5rem .75rem;
border: none;
border-radius: var(--r-sm, 8px);
background: var(--accent);
display: flex; align-items: center;
box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.form-section-group-header span {
font-size: var(--text-xs);
font-weight: 800;
text-transform: uppercase;
letter-spacing: .1em;
color: #fff;
}
.form-section-label {
font-size: var(--text-2xs);
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ink-ghost);
padding-bottom: 0.25rem;
border-bottom: 1px solid var(--line);
}
/* Pathology chips */
.pathol-chip {
display: inline-flex; align-items: center;
padding: .18rem .45rem;
border: 1px solid var(--line-strong);
border-radius: 20px;
font-size: var(--text-xs);
font-weight: 500;
cursor: pointer;
background: var(--bg-2);
color: var(--ink-soft);
transition: background .12s, border-color .12s, color .12s;
user-select: none;
}
.pathol-chip:hover { border-color: var(--accent); color: var(--accent); }
.pathol-chip.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
.pathol-chip--sm { font-size: var(--text-2xs); padding: .14rem .35rem; }
.pathol-tag {
display: inline-flex; align-items: center; gap: .2rem;
padding: .15rem .4rem .15rem .45rem;
border-radius: 20px;
background: var(--accent); color: #fff;
font-size: var(--text-xs); font-weight: 500;
}
.pathol-tag-remove { background: none; border: none; color: rgba(255,255,255,.7); cursor: pointer; font-size: 0.75rem; line-height: 1; padding: 0 .08rem; }
.pathol-tag-remove:hover { color: #fff; }
.member-selector { flex-wrap: wrap; }
.fhx-member-block .field-group { margin: 0; }
.fhx-member-block select { font-size: var(--text-xs); padding: 0 .35rem; height: 28px; }
/* ── Buttons ────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 0.35rem;
padding: 0 0.875rem;
/* R130: era `height`, y eso recortaba cualquier botón de dos líneas
-- el popup "¿Qué pasó con la sesión?" pedía 39 px y se quedaba en
34, con la descripción cortada por la mitad. Como el relleno vertical
es cero, un botón de una línea sigue midiendo 34 px exactos. */
min-height: 34px;
border-radius: var(--r-sm);
font-size: var(--text-sm);
font-weight: 500;
white-space: nowrap;
cursor: pointer;
border: 1px solid transparent;
transition: background .15s, border-color .15s, box-shadow .15s, opacity .15s, color .15s;
line-height: 1;
letter-spacing: -.01em;
}
.btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-secondary { background: var(--bg-2); color: var(--ink-soft); border-color: var(--line-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--bg-alt); color: var(--ink); }
.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:hover:not(:disabled) { background: #dc2626; }
.btn-ghost { background: transparent; color: var(--ink-mute); border-color: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--bg-alt); color: var(--ink-soft); }
.btn-outline { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-outline:hover:not(:disabled) { background: var(--accent-light); }
.btn-outline-danger { background: transparent; color: var(--red); border-color: var(--red); }
.btn-outline-danger:hover:not(:disabled) { background: #fef2f2; }
.btn-wizard { background: var(--bg-2); color: var(--ink-soft); border-color: var(--line-strong); }
.btn-wizard:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn-wizard.done { border-color: #10b981; color: #059669; }
.btn-full { width: 100%; }
.btn-sm { min-height: 28px; padding: 0 0.6rem; font-size: var(--text-xs); }
.btn-xs { min-height: 24px; padding: 0 0.5rem; font-size: var(--text-2xs); font-weight: 600; border-radius: 3px; }
.btn-icon { width: 32px; height: 32px; padding: 0; }
.btn-icon.btn-sm { width: 28px; height: 28px; }
.btn-spinner { width: 13px; height: 13px; border: 1.5px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
/* ── Tables — Stripe density ────────────────────────────────── */
.table-wrap { overflow-x: auto; }
/* ══════════════════════════════════════════════════════════════════
R149 — Reparto de columnas en la tabla de ejercicios de una sesion
------------------------------------------------------------------
La tabla no definia NINGUN ancho: el navegador repartia solo, y con
diez columnas mas 0.875rem de padding por lado (unos 280px solo en
huecos) el resultado era el peor posible -- "Extension de triceps
acostado con mancuernas" partido en CUATRO lineas mientras Carga y
Comentarios, casi siempre vacias, se quedaban su parte entera. Y aun
asi la tabla no cabia y salia barra horizontal.
`table-layout: fixed` hace que los anchos de abajo se respeten tal
cual y que la columna de Ejercicio se quede TODO el resto. Los datos
numericos ocupan poco y son de ancho conocido; el nombre no.
══════════════════════════════════════════════════════════════════ */
/* R150: la tabla paso de 10 columnas a 8. Fuera "Series" (fusionada con
Reps) y fuera "Comentarios" (la nota vive bajo el nombre). Con eso el
nombre del ejercicio pasa de 126px a ~250px en el hueco real de 850px
que queda entre la barra lateral y el panel de Planes. */
.ex-nota {
display: block; margin-top: .18rem;
font-size: .72rem; font-weight: 400; line-height: 1.35;
color: var(--ink-mute);
}
/* El signo separa sin competir: "3 x 10" debe leerse como UNA cifra con su
separador, no como tres simbolos del mismo peso. */
.ex-por { color: var(--ink-ghost); font-weight: 400; margin: 0 .18rem; }
@media (min-width: 900px) {
.table-wrap .exercises-table { table-layout: fixed; width: 100%; }
.table-wrap .exercises-table th,
.table-wrap .exercises-table td {
padding-left: .5rem; padding-right: .5rem;
overflow-wrap: break-word;
}
.table-wrap .exercises-table th:first-child,
.table-wrap .exercises-table td:first-child { padding-left: .75rem; }
.table-wrap .exercises-table th:last-child,
.table-wrap .exercises-table td:last-child { padding-right: .75rem; }
/* R152: 34px y no 26. En las filas de biserie el asa lleva ademas
`border-left:3px` y un `padding:0 .4rem` en linea; con box-sizing
border-box eso dejaba ~12px para el simbolo, que mide 16. Se salia
unos pixeles y ESO era lo que seguia dibujando la barra horizontal
aunque todo el contenido pareciera caber. */
/* R153: los anchos pasan de pixeles a PORCENTAJE. En px no crecian: al
colapsar la barra lateral sobraba medio monitor y "INTENSIDAD" seguia
partiendose por la mitad ("INTENSI/DAD") porque su columna seguia
midiendo 72px. En % la tabla reparte lo que haya.
Solo quedan en px las dos columnas cuyo contenido NO escala: el asa
(un simbolo) y las acciones (cuatro botones de tamano fijo). */
.table-wrap .exercises-table th:nth-child(1) { width: 34px; } /* asa */
.table-wrap .exercises-table td:nth-child(1) { padding-left: .3rem !important;
padding-right: .3rem !important; }
/* R160: la columna "Bloque" (11%) se fue -- su etiqueta sale ahora UNA
vez en la cabecera del tramo, no una por fila. Todas las demas corren
una posicion, y ese 11% se lo queda el nombre del ejercicio, que era
justo la columna que iba apretada. */
/* 2 = Ejercicio: sin ancho, se queda el resto */
.table-wrap .exercises-table th:nth-child(3) { width: 15%; } /* Series x Reps */
.table-wrap .exercises-table th:nth-child(4) { width: 13%; } /* Carga */
.table-wrap .exercises-table th:nth-child(5) { width: 10%; } /* Intensidad */
.table-wrap .exercises-table th:nth-child(6) { width: 10%; } /* Descanso */
/* 4 botones x 28px + separaciones + relleno = 136 justo. Se dan 144 para
que no dependa de que el navegador redondee a la baja. */
/* R166: 172 y no 144 -- entra el boton de menu como quinto control.
Los 28 px salen del nombre, que con R160 habia pasado de ~310 a 441:
sigue muy por encima de donde estaba. */
/* R190: 112. Con R188 la fila dejo de tener cinco controles, pero la
columna siguio reservando el ancho de los cinco -- ese era el hueco
blanco al final de cada fila.
MEDIDO en el navegador, no calculado a ojo: fuerza necesita 75 px
(editar + menu) y cardio 104 (en vivo + editar + menu). Manda cardio,
que es el caso ancho, y se redondea a 112 por el mismo motivo que
antes: no depender de como redondee el navegador.
Los 60 px liberados no se pierden -- con `table-layout: fixed` van a
la unica columna sin ancho, que es el nombre del ejercicio. */
.table-wrap .exercises-table th:nth-child(7) { width: 112px; } /* acciones */
/* Y pegados a la derecha. Sin esto, en las filas de fuerza (dos
controles en una columna dimensionada para tres) quedarian 37 px de
aire justo en el borde de la tabla, que es donde mas se nota. Asi el
sobrante cae ANTES de los iconos y ambos tipos de fila alinean sus
acciones en la misma vertical. */
.table-wrap .exercises-table tr[data-ex-id] > td:last-child { text-align: right; }
/* R154: por CLASE, no por posicion. Estaba escrito como nth-child(8),
pero en las filas de cardio el colspan hace que la celda de acciones
sea la QUINTA: alli los botones nunca se achicaron, seguian a 32px y
se salian 10px. Ese era el desbordamiento que quedaba. */
.table-wrap .exercises-table .btn-icon { width: 28px; height: 28px; margin-right: 1px !important; }
/* R154: "Activacion" pedia 100px en una columna de 88 y se salia. Se
encoge la etiqueta en vez de ensanchar la columna: ese ancho saldria
del nombre del ejercicio, que es lo que estamos protegiendo. */
.table-wrap .exercises-table .badge {
font-size: .6rem; padding: .1rem .35rem; letter-spacing: 0;
}
/* R153: `.data-table th` lleva `white-space:nowrap` (cabeceras de una
palabra) y `letter-spacing:.06em`. Aqui se deja partir, y se aprieta el
espaciado: ese .06em anadia ~6px a "INTENSIDAD", justo lo que la hacia
no caber. */
.table-wrap .exercises-table th {
white-space: normal; line-height: 1.25; letter-spacing: .02em;
}
}
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table th {
text-align: left;
font-size: var(--text-2xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--ink-ghost);
padding: 0.5rem 0.875rem;
border-bottom: 1px solid var(--line);
white-space: nowrap;
background: transparent;
}
.data-table th:first-child { padding-left: 1rem; }
.data-table th:last-child { padding-right: 1rem; }
.data-table td {
padding: 0.625rem 0.875rem;
color: var(--ink-soft);
border-bottom: 1px solid var(--line-faint);
vertical-align: middle;
}
.data-table td:first-child { padding-left: 1rem; }
.data-table td:last-child { padding-right: 1rem; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(0,0,0,.015); }
.data-table .td-primary { font-weight: 600; color: var(--ink); }
/* ── Badges ─────────────────────────────────────────────────── */
.badge {
display: inline-flex; align-items: center; gap: 0.2rem;
font-size: var(--text-2xs); font-weight: 600;
padding: 0.2rem 0.475rem;
border-radius: 20px; letter-spacing: .01em;
}
.badge-active { background: #f0fdf4; color: #15803d; }
.badge-inactive { background: var(--bg-alt); color: var(--ink-ghost); }
.badge-scheduled { background: #eff6ff; color: #1d4ed8; }
.badge-completed { background: #f0fdf4; color: #15803d; }
.badge-cancelled { background: #fef2f2; color: #b91c1c; }
.badge-no_show { background: #fef2f2; color: #b91c1c; }
.badge-low { background: #f0fdf4; color: #15803d; }
.badge-moderate { background: #fffbeb; color: #b45309; }
.badge-high { background: #fef2f2; color: #b91c1c; }
.badge-accent { background: var(--accent-muted); color: var(--accent); }
/* ── Alerts ─────────────────────────────────────────────────── */
.alert {
padding: 0.625rem 0.875rem;
border-radius: var(--r-md);
font-size: var(--text-sm);
margin-bottom: 0.875rem;
border: 1px solid;
}
.alert-error { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.alert-success { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.alert-warning { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.alert-info { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
/* ── Modal ──────────────────────────────────────────────────── */
.modal-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,.4);
backdrop-filter: blur(4px);
z-index: 1000;
display: flex; align-items: center; justify-content: center;
padding: 1rem;
animation: fadeIn .15s ease;
}
.modal {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 12px;
width: 100%; max-width: 600px; max-height: 90vh;
/* dvh = altura de viewport realmente visible (navegadores móviles reales
descuentan la barra de direcciones, a diferencia de vh que usa el
viewport "grande"). Sin esto, en un celular con la barra de direcciones
visible el modal podía sobrepasar la pantalla y empujar el encabezado
(título + botón de cerrar) por encima del borde superior, invisible
aunque existiera en el DOM. Fallback a vh si el navegador no soporta dvh. */
max-height: 90dvh;
display: flex; flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
animation: slideUp .18s ease;
}
.modal.modal-lg { max-width: 860px; }
.modal.modal-xl { max-width: 1060px; }
.modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 0.875rem 1.25rem;
border-bottom: 1px solid var(--line);
flex-shrink: 0;
}
.modal-title { font-size: var(--text-base); font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.modal-close {
width: 24px; height: 24px;
border-radius: var(--r-sm);
font-size: 1rem; color: var(--ink-ghost);
display: flex; align-items: center; justify-content: center;
transition: background .15s, color .15s;
}
.modal-close:hover { background: var(--bg-alt); color: var(--ink); }
.modal-body { padding: 1.25rem; overflow-y: auto; flex: 1; }
.modal-footer {
padding: 0.875rem 1.25rem;
border-top: 1px solid var(--line);
display: flex; justify-content: flex-end; gap: 0.5rem;
flex-shrink: 0;
}
/* ── Toast ──────────────────────────────────────────────────── */
.toast-container {
position: fixed; bottom: 1rem; right: 1rem; z-index: 2000;
display: flex; flex-direction: column; gap: 0.35rem;
max-width: 320px; width: calc(100vw - 2rem);
}
.toast {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.6rem 0.875rem;
background: #18181b; color: #fafafa;
border-radius: var(--r-md); font-size: var(--text-sm);
box-shadow: 0 8px 24px rgba(0,0,0,.2);
animation: slideUp .2s ease;
border-left: 2px solid var(--accent);
}
.toast.toast-error { border-color: var(--red); }
.toast.toast-success { border-color: var(--green); }
.toast.toast-warning { border-color: var(--amber); }
/* R123: el ícono pasó de carácter a SVG. `display:flex` evita que el
SVG herede la línea base del texto y quede medio píxel más abajo
que el mensaje. */
.toast-icon { flex-shrink: 0; display: flex; align-items: center; }
.toast.removing { animation: slideDown .18s ease forwards; }
.toast-msg { flex: 1; }
.toast-undo-btn {
flex-shrink: 0;
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fafafa;
border-radius: 3px; padding: 0.18rem 0.55rem;
font-size: var(--text-2xs); font-weight: 600; cursor: pointer;
transition: background .12s;
}
.toast-undo-btn:hover { background: rgba(255,255,255,.2); }
/* ── Loading ────────────────────────────────────────────────── */
.loading-spinner-wrap { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.spinner { width: 22px; height: 22px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
.spinner--lg { width: 36px; height: 36px; }
.spinner--sm { width: 14px; height: 14px; border-width: 1.5px; }
/* ── Search Bar ─────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════
R195 — La barra de filtros de una lista
--------------------------------------------------------------------
Las tres pantallas de lista resolvian esto de tres formas distintas:
Valoraciones metia los filtros en una `.card` con estilos en linea,
Pacientes los colgaba del `card-header` (y de paso su boton principal,
que en el resto de la app va en la cabecera de pagina) y Planificacion
los dejaba sueltos, sin caja.
Aqui viven una sola vez. Menos apretada que una `.card` a proposito:
es una barra de herramientas, no contenido -- por eso el radio y el
relleno son menores que los de la tarjeta que va debajo.
════════════════════════════════════════════════════════════════════ */
.list-toolbar {
display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
background: var(--bg-2); border: 1px solid var(--line);
border-radius: var(--r-md); padding: .55rem .75rem; margin-bottom: .8rem;
}
/* El buscador manda en el ancho; los filtros se quedan con lo suyo. */
.list-toolbar .search-bar { flex: 1 1 200px; max-width: none; margin-bottom: 0; }
.list-toolbar label {
font-size: .78rem; color: var(--ink-mute);
display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
}
.search-bar { position: relative; flex: 1; max-width: 280px; }
.search-bar input {
width: 100%; height: 32px;
padding: 0 0.7rem 0 2rem;
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
font-size: var(--text-sm);
background: var(--bg-2);
transition: border-color .15s;
}
.search-bar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.search-bar svg { position: absolute; left: 0.55rem; top: 50%; transform: translateY(-50%); color: var(--ink-ghost); width: 13px; height: 13px; pointer-events: none; }
/* ── Tabs ───────────────────────────────────────────────────── */
.tabs {
display: flex; border-bottom: 1px solid var(--line);
margin-bottom: 1.25rem; flex-wrap: wrap;
}
.tab {
padding: 0.55rem 0.875rem;
font-size: var(--text-sm); font-weight: 500; color: var(--ink-mute);
border-bottom: 2px solid transparent; margin-bottom: -1px;
cursor: pointer; transition: color .15s, border-color .15s;
white-space: nowrap;
}
.tab:hover { color: var(--ink-soft); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
/* ── Valoracion — Risk Display ──────────────────────────────── */
.risk-display {
display: flex; align-items: center; gap: 0.875rem;
padding: 0.875rem 1rem;
border-radius: var(--r-md);
border: 1px solid var(--line); background: var(--bg-alt);
}
.risk-score { font-size: 2rem; font-weight: 800; line-height: 1; min-width: 52px; text-align: center; letter-spacing: -.04em; }
.risk-score.low { color: var(--green); }
.risk-score.moderate { color: var(--amber); }
.risk-score.high { color: var(--red); }
.risk-label { font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-top: 0.1rem; }
.risk-label.low { color: #15803d; }
.risk-label.moderate { color: #b45309; }
.risk-label.high { color: #b91c1c; }
.risk-factors-list { font-size: var(--text-xs); color: var(--ink-mute); line-height: 1.7; }
.risk-factor-item { display: flex; align-items: center; gap: 0.3rem; }
.risk-factor-item.present { color: var(--red); }
.risk-factor-item.present::before { content: '●'; font-size: 0.4rem; }
.risk-factor-item.absent { color: var(--ink-ghost); }
.risk-factor-item.absent::before { content: '○'; font-size: 0.4rem; }
/* AI diagnosis */
.ai-diagnosis-box {
border: 1px solid var(--accent-muted);
border-radius: var(--r-md);
padding: 0.875rem 1rem;
background: var(--accent-light);
}
.ai-diagnosis-header {
display: flex; align-items: center; gap: 0.4rem;
font-size: var(--text-2xs); font-weight: 700;
color: var(--accent); text-transform: uppercase; letter-spacing: .06em;
margin-bottom: 0.5rem;
}
.ai-diagnosis-content { font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.65; white-space: pre-wrap; }
.ai-typing { display: inline-block; width: 5px; height: 12px; background: var(--accent); animation: blink .9s step-end infinite; vertical-align: middle; margin-left: 1px; }
/* ── Valoracion — Reference Badges ─────────────────────────── */
.ref-inline { margin-top: .2rem; min-height: 1rem; }
.ref-empty { font-size: var(--text-2xs); color: var(--ink-ghost); }
/* Badge de interpretación unificado (CA-2): pill sólido, texto blanco, mismo
radio/tipografía/espaciado en todos los componentes de resultado de la app. */
.ref-badge { display: inline-flex; align-items: center; gap: .22rem; padding: .12rem .5rem; border-radius: 5px; font-size: var(--text-2xs); font-weight: 600; color: #fff; line-height: 1.5; border: none; }
.ref-badge.ref-normal { background: #16a34a; }
.ref-badge.ref-warning-light { background: #f59e0b; }
.ref-badge.ref-warning { background: #f59e0b; }
.ref-badge.ref-danger-light { background: #f97316; }
.ref-badge.ref-danger { background: #ef4444; }
.ref-display { padding: .2rem 0; }
.vr-interp { font-size: var(--text-2xs); font-weight: 600; margin-left: .3rem; }
/* Bilateral comparison — minimal Notion-style */
.bilateral-compare {
display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
padding: .3rem .55rem;
border-left: 2px solid var(--line-strong);
background: transparent;
}
.bc-values { font-size: var(--text-xs); color: var(--ink-soft); }
.bc-status { font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
/* Cognitive scales */
.cog-scale-block {
background: var(--bg-alt); border: 1px solid var(--line);
border-radius: var(--r-sm); padding: 0.625rem 0.75rem; margin-bottom: 0.5rem;
}
.cog-scale-title { font-size: var(--text-sm); font-weight: 650; color: var(--ink); margin-bottom: .15rem; }
.cog-scale-ref {
display: inline-block; font-size: var(--text-xs);
background: #e0f2fe; border-radius: 4px;
padding: .15rem .45rem; margin: .1rem 0 .45rem; line-height: 1.45; max-width: 100%;
}
.cog-typology-block {
background: var(--accent-light); border: 1px solid var(--accent-muted);
border-radius: var(--r-md); padding: 0.75rem 0.875rem; margin-top: 0.75rem;
}
/* Spirometry chart */
.spiro-chart-wrap {
background: var(--bg-alt); border: 1px solid var(--line);
border-radius: var(--r-sm); padding: .625rem 0.75rem; margin-top: .5rem;
}
.spiro-bar-row { margin-bottom: .5rem; }
.spiro-bar-label { display: flex; justify-content: space-between; font-size: var(--text-2xs); margin-bottom: .15rem; }
.spiro-bar-track { height: 7px; background: var(--line); border-radius: 4px; position: relative; overflow: hidden; }
.spiro-bar-fill { height: 100%; border-radius: 4px; transition: width .4s ease; }
.spiro-bar-normal-line { position: absolute; top: 0; bottom: 0; width: 2px; background: #0f172a; box-shadow: 0 0 0 1px rgba(255,255,255,.6); z-index: 1; }
.spiro-bar-hint { font-size: var(--text-2xs); color: var(--ink-ghost); margin-top: .1rem; }
/* ── Exercise Library ───────────────────────────────────────── */
.exercise-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; }
.exercise-card {
background: var(--bg-2); border: 1px solid var(--line);
border-radius: var(--r-lg); overflow: hidden;
transition: box-shadow .15s, border-color .15s; cursor: pointer;
}
.exercise-card:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.exercise-card-img {
width: 100%; aspect-ratio: 16/9; object-fit: cover;
background: var(--bg-alt); display: flex; align-items: center; justify-content: center;
color: var(--ink-ghost); font-size: 1.5rem;
}
.exercise-card-body { padding: 0.625rem 0.75rem; }
.exercise-card-name { font-size: var(--text-sm); font-weight: 600; color: var(--ink); margin-bottom: 0.25rem; letter-spacing: -.01em; }
.exercise-card-meta { display: flex; gap: 0.3rem; flex-wrap: wrap; }
/* ── Agenda / Calendar ──────────────────────────────────────── */
.calendar-wrap { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
.calendar-title { font-size: var(--text-base); font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.calendar-nav { display: flex; gap: 0.25rem; }
.calendar-nav button {
width: 28px; height: 28px; border-radius: var(--r-sm);
border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center;
font-size: 0.875rem; color: var(--ink-soft); background: var(--bg-2);
transition: background .15s;
}
.calendar-nav button:hover { background: var(--bg-alt); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-dow {
text-align: center; font-size: var(--text-2xs); font-weight: 600;
text-transform: uppercase; letter-spacing: .06em; color: var(--ink-ghost);
padding: 0.5rem 0; border-bottom: 1px solid var(--line); background: var(--bg-alt);
}
.calendar-day {
min-height: 80px; border-right: 1px solid var(--line-faint);
border-bottom: 1px solid var(--line-faint); padding: 0.25rem 0.3rem;
cursor: pointer; transition: background .1s;
/* Fix: los hijos de un grid con pista 1fr tienen mínimo implícito
min-content -- las etiquetas de cita (.day-appt, white-space:nowrap)
no se dejan angostar, así que en móvil la grilla entera crecía más
ancha que el viewport y el contenedor (.calendar-wrap, overflow:hidden)
recortaba en silencio las columnas de la derecha (sábado/domingo) y
el texto de las citas. Mismo patrón que .grid-main-aside > * arriba. */
min-width: 0;
}
.calendar-day:nth-child(7n) { border-right: none; }
.calendar-day:hover { background: var(--bg-alt); }
.calendar-day.other-month .day-num { color: var(--ink-ghost); }
.calendar-day.today { background: var(--accent-light); }
.calendar-day.today .day-num { color: var(--accent); font-weight: 700; }
.calendar-day.selected-day { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-sm); }
.day-num { font-size: var(--text-xs); font-weight: 500; color: var(--ink-soft); margin-bottom: 0.175rem; }
.day-appt {
font-size: var(--text-2xs); padding: 0.07rem 0.25rem;
border-radius: 3px; background: var(--accent); color: #fff;
margin-bottom: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-weight: 500; cursor: pointer;
}
.day-appt.status-cancelled { background: var(--ink-ghost); }
.day-appt.status-completed { background: var(--green); }
.day-appt.status-no_show { background: var(--red); }
.day-more-btn {
font-size: var(--text-2xs); color: var(--accent); font-weight: 600;
cursor: pointer; margin-top: .06rem; padding: .03rem .15rem;
border-radius: 3px; display: inline-block;
}
.day-more-btn:hover { background: var(--accent-light); }
/* ── Patient Portal ─────────────────────────────────────────── */
.exercise-plan-day { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-bottom: 0.625rem; }
.exercise-plan-day-header {
background: var(--bg-alt); padding: 0.55rem 0.75rem;
font-weight: 650; font-size: var(--text-sm);
border-bottom: 1px solid var(--line);
display: flex; align-items: center; justify-content: space-between;
}
.exercise-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--line-faint); }
.exercise-item:last-child { border-bottom: none; }
.exercise-item-thumb {
width: 42px; height: 42px; border-radius: var(--r-sm); object-fit: cover;
background: var(--bg-alt); flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
}
.exercise-item-name { font-weight: 600; font-size: var(--text-sm); margin-bottom: 0.1rem; letter-spacing: -.01em; }
.exercise-item-meta { font-size: var(--text-xs); color: var(--ink-mute); }
.exercise-check {
margin-left: auto; width: 20px; height: 20px; border-radius: 50%;
border: 1.5px solid var(--line-strong); flex-shrink: 0; cursor: pointer;
transition: background .15s, border-color .15s;
display: flex; align-items: center; justify-content: center;
}
.exercise-check.done { background: var(--green); border-color: var(--green); }
.exercise-check.done::after { content: '✓'; color: #fff; font-size: 0.65rem; font-weight: 700; }
/* R64: peso como "cajita" tocable en vez de texto subrayado -- vacío
invita con un botón explícito ("Agregar peso"), con valor cargado se ve
como un campo (recuadro con el número adentro), mismo lenguaje visual
que usan apps de este tipo (Strong/Hevy) para dejar claro que ambos
estados son editables. */
.portal-peso-btn {
display: inline-flex; align-items: center; justify-content: center;
font-family: inherit; font-size: .78rem; font-weight: 600; line-height: 1.2;
padding: .2rem .5rem; border-radius: var(--r-sm);
cursor: pointer; white-space: nowrap;
}
.portal-peso-btn--empty {
color: var(--accent); background: var(--accent-glow); border: 1px solid var(--accent);
}
.portal-peso-btn--empty:hover { background: var(--accent-light); }
.portal-peso-btn--filled {
color: var(--ink); font-weight: 500; background: var(--bg-alt); border: 1px solid var(--line);
}
.portal-peso-btn--filled:hover { border-color: var(--ink-ghost); }
/* R65: calendario mensual "Mi Progreso" -- reusa .calendar-wrap/.calendar-day
de Agenda, solo agrega el punto de estado bajo el número del día. */
.progress-cal-dot {
width: 6px; height: 6px; border-radius: 50%; margin: 2px auto 0;
}
.progress-cal-dot--full { background: #16a34a; }
.progress-cal-dot--partial { background: #f59e0b; }
.progress-cal-legend {
display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .6rem;
font-size: .74rem; color: var(--ink-mute);
}
.progress-cal-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.progress-cal-legend .progress-cal-dot { margin: 0; }
/* R68: temporizador de descanso, portal del paciente. */
.portal-rest-timer-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: var(--r-sm); border: 1px solid var(--line);
background: var(--bg-alt); color: var(--accent); font-size: .8rem; cursor: pointer; line-height: 1; padding: 0;
}
.portal-rest-timer-btn:hover { border-color: var(--accent); }
.portal-rest-timer-bar {
display: none; align-items: center; gap: .6rem; position: fixed; left: 50%; bottom: 1rem;
transform: translateX(-50%); z-index: 500; background: var(--ink); color: #fff;
border-radius: var(--r-md); padding: .55rem .9rem; box-shadow: 0 6px 20px rgba(0,0,0,.25);
font-size: .82rem; max-width: calc(100vw - 2rem);
}
.portal-rest-timer-bar.done { background: #16a34a; }
.portal-rest-timer-label { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.portal-rest-timer-clock { font-weight: 700; font-variant-numeric: tabular-nums; }
.portal-rest-timer-close {
background: none; border: none; color: #fff; opacity: .75; cursor: pointer; font-size: .85rem; padding: 0 0 0 .3rem;
}
.portal-rest-timer-close:hover { opacity: 1; }
/* ── Drag & Drop ────────────────────────────────────────────── */
tr[data-ex-id] { transition: background .1s; }
tr.ex-dragging { opacity: 0.3; }
.drag-handle { cursor: grab; color: var(--ink-ghost); }
.drag-handle:active { cursor: grabbing; }
/* R30: biseries/circuitos ya no usan un botón flotante entre filas — se
crean arrastrando un ejercicio directamente ENCIMA de otro. La zona de
drop determina la intención: soltar cerca del borde superior/inferior
reordena (línea de inserción); soltar en el centro agrupa (resaltado
completo de la fila destino). */
tr.ex-drop-before td { box-shadow: inset 0 2px 0 0 var(--accent); }
tr.ex-drop-after td { box-shadow: inset 0 -2px 0 0 var(--accent); }
tr.ex-drop-group td { background: var(--accent-light) !important; }
tr.ex-drop-group { outline: 2px dashed var(--accent); outline-offset: -2px; }
/* R31: todas las biseries/circuitos comparten el MISMO tinte (un solo
color, no uno por grupo, para no saturar la sesión con muchos grupos) —
este borde en la ÚLTIMA fila de cada grupo es lo único que distingue
visualmente dónde termina un grupo y empieza el siguiente cuando dos
grupos distintos quedan uno junto al otro. Aplica en Planificación y en
el Portal del paciente (misma clase, mismo criterio). */
.ex-group-last td { border-bottom: 2px solid rgba(37,99,235,.35); }
/* R33: los inputs de las celdas editables de la tabla de sesión
(Series/Reps/Peso/Intensidad/Descanso/Indicaciones en Planificación)
no tenían NINGÚN estilo propio — quedaban con la apariencia por
defecto del navegador, fuera del lenguaje visual Notion del resto de
la app. Mismo tratamiento que .control-input, en versión compacta
para caber dentro de una celda de tabla. */
.cell-input {
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
padding: .2rem .45rem;
font-size: .8rem;
font-family: inherit;
color: var(--ink);
background: var(--bg-2);
}
.cell-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
/* ── Pre-assessment ─────────────────────────────────────────── */
.pre-assessment-intro {
background: var(--accent-light); border: 1px solid var(--accent-muted);
border-radius: var(--r-sm); padding: .625rem 0.75rem; margin-bottom: 0.875rem;
display: flex; flex-direction: column; gap: .25rem;
}
.pre-assessment-intro p { font-size: var(--text-xs); color: var(--ink-soft); margin: 0; line-height: 1.5; }
.pre-assessment-badge {
font-size: var(--text-2xs); font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: var(--accent);
background: var(--accent-glow); border-radius: 20px;
padding: .12rem .5rem; display: inline-block; width: fit-content;
}
/* ── Patient Autocomplete ───────────────────────────────────── */
.pac-wrap { position: relative; }
.pac-input {
width: 100%; height: 34px; padding: 0 0.625rem;
border: 1px solid var(--line-strong); border-radius: var(--r-sm);
font-size: var(--text-sm); font-family: inherit;
color: var(--ink); background: var(--bg-2);
transition: border-color .15s; box-sizing: border-box;
}
.pac-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.pac-dropdown {
position: absolute; top: calc(100% + 3px); left: 0; right: 0;
background: var(--bg-2); border: 1px solid var(--line-strong);
border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0,0,0,.1);
z-index: 1000; max-height: 320px; overflow-y: auto;
}
.pac-item { display: flex; align-items: center; justify-content: space-between; padding: .45rem .75rem; cursor: pointer; transition: background .1s; gap: .45rem; }
.pac-item:hover { background: var(--bg-alt); }
.pac-name { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.pac-meta { font-size: var(--text-xs); color: var(--ink-mute); white-space: nowrap; }
.pac-empty { padding: .45rem .75rem; font-size: var(--text-sm); color: var(--ink-mute); }
.pac-new-btn {
padding: .45rem .75rem; font-size: var(--text-sm); font-weight: 500;
color: var(--accent); cursor: pointer;
border-top: 1px solid var(--line); background: var(--bg-alt);
transition: background .1s;
}
.pac-new-btn:hover { background: var(--accent-light); }
/* ── Clinical Info Tooltip ──────────────────────────────────── */
.ci-info-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50%;
border: 1px solid var(--ink-ghost); color: var(--ink-ghost);
font-size: .6rem; font-style: italic; font-weight: 700;
font-family: Georgia, serif; line-height: 1; cursor: help; user-select: none;
transition: background .12s, color .12s, border-color .12s;
}
.ci-info-icon:hover,
.ci-info-icon:focus { background: var(--accent); border-color: var(--accent); color: #fff; outline: none; }
.ci-tooltip {
position: fixed; z-index: 4000; display: flex; gap: .5rem;
width: 260px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px);
overflow-y: auto; padding: .55rem .6rem;
background: var(--bg-2); border: 1px solid var(--line);
border-radius: var(--r-md); box-shadow: var(--shadow-md);
opacity: 0; transform: translateY(4px);
pointer-events: none; transition: opacity .12s ease, transform .12s ease;
}
.ci-tooltip.ci-tooltip--visible { opacity: 1; transform: translateY(0); }
.ci-tooltip-body { flex: 1; min-width: 0; }
.ci-tooltip-title { font-size: var(--text-xs); font-weight: 700; color: var(--ink); margin-bottom: .15rem; }
.ci-tooltip-desc { font-size: var(--text-2xs); line-height: 1.4; color: var(--ink-soft); margin-bottom: .25rem; }
.ci-tooltip-stats { display: flex; gap: .5rem; flex-wrap: wrap; font-size: var(--text-2xs); color: var(--ink); margin-bottom: .2rem; }
.ci-tooltip-stats strong { font-weight: 700; color: var(--accent); }
.ci-tooltip-howto { margin-bottom: .25rem; }
.ci-tooltip-howto-label { font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-ghost); margin-bottom: .18rem; }
.ci-tooltip-howto-img { display: block; width: 100%; max-height: 120px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
.ci-tooltip-noimg { padding: .4rem; background: var(--bg-alt); border: 1px dashed var(--line); border-radius: var(--r-sm); text-align: center; color: var(--ink-ghost); font-size: var(--text-2xs); line-height: 1.35; }
.ci-tooltip-disclaimer { font-size: .58rem; line-height: 1.3; color: var(--ink-ghost); font-style: italic; }
/* ── Intake Form ────────────────────────────────────────────── */
.intake-shell {
min-height: 100vh; width: 100%;
display: flex; align-items: center; justify-content: center;
padding: 2rem 1rem; background: var(--bg);
font-family: var(--ff); box-sizing: border-box;
}
.intake-card {
background: var(--bg-2); border: 1px solid var(--line);
border-radius: 12px; box-shadow: var(--shadow-lg);
max-width: 600px; width: 100%; padding: 2rem; box-sizing: border-box;
}
.intake-logo { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1.25rem; }
.intake-logo-mark { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--r-md); background: var(--accent); color: #fff; font-weight: 800; font-size: 1rem; }
.intake-logo-name { display: block; font-weight: 700; font-size: 0.875rem; color: var(--ink); letter-spacing: -.01em; }
.intake-logo-sub { display: block; font-size: var(--text-xs); color: var(--ink-mute); }
.intake-title { font-weight: 700; font-size: 1.375rem; color: var(--ink); margin: 0 0 0.35rem; letter-spacing: -.02em; }
.intake-sub { color: var(--ink-mute); font-size: var(--text-sm); line-height: 1.5; margin: 0 0 1.25rem; }
.intake-section-title {
font-weight: 700; font-size: var(--text-2xs);
letter-spacing: .07em; text-transform: uppercase; color: var(--accent);
border-bottom: 1px solid var(--line); padding-bottom: 0.3rem;
margin: 1.5rem 0 0.75rem;
}
.intake-section-title:first-of-type { margin-top: 0.25rem; }
.intake-radio-row { display: flex; gap: 1.25rem; flex-wrap: wrap; row-gap: 0.55rem; }
.intake-radio-label { display: flex; align-items: center; gap: 0.3rem; font-size: var(--text-sm); color: var(--ink-soft); cursor: pointer; }
/* R145b: los radios y casillas viven dentro de .field-group, asi que
heredaban `width:100%; height:34px; border; padding` de la regla de
inputs de mas arriba -- pensada para campos de texto. Con dos opciones
cortas pasaba desapercibido; al anadir una tercera el radio se volvio un
circulo enorme y el texto se partio en tres lineas. Se les devuelve su
tamano natural. El `nowrap` va solo en la fila de opciones: la casilla
del aviso de privacidad es una frase larga y SI debe poder partirse. */
.intake-radio-row .intake-radio-label { white-space: nowrap; }
.field-group .intake-radio-label input[type="radio"],
.field-group .intake-radio-label input[type="checkbox"] {
width: auto; height: auto; min-height: 0; flex: 0 0 auto;
padding: 0; border: 0; border-radius: 0; background: none;
accent-color: var(--accent);
}
/* R145b: el enlace al aviso salia con el MISMO color que el texto y sin
subrayado, o sea invisible. Una casilla que afirma "he leido el aviso"
junto a un enlace que nadie ve es una aceptacion vacia. */
.intake-radio-label a { color: var(--accent); text-decoration: underline; font-weight: 600; }
.intake-radio-label a:hover { text-decoration-thickness: 2px; }
.intake-honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.intake-success { text-align: center; padding: 1.25rem 0; }
.intake-success-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: #f0fdf4; color: #15803d; font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; }
/* ── Empty States ───────────────────────────────────────────── */
.empty-state { text-align: center; padding: 2.5rem 1.25rem; color: var(--ink-mute); }
.empty-state-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.empty-state-title { font-weight: 650; font-size: var(--text-base); color: var(--ink-soft); margin-bottom: 0.25rem; letter-spacing: -.01em; }
.empty-state-sub { font-size: var(--text-sm); }
/* ── Animations ─────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
.sidebar {
position: fixed; left: 0; top: 0; bottom: 0;
transform: translateX(-100%); transition: transform .2s ease;
z-index: 200; width: var(--sb-w) !important;
}
.sidebar.mobile-open { transform: translateX(0); }
.sidebar .sidebar-logo-text,
.sidebar .user-info,
.sidebar .nav-section-label,
.sidebar .nav-item span { display: flex !important; }
.sidebar .nav-item { justify-content: flex-start !important; padding: 0.4rem 0.75rem !important; }
.sidebar-toggle { display: none; }
.topbar-menu-btn { display: flex; }
.main-area { margin-left: 0 !important; }
/* En móvil, todas las variantes de grid main+aside se apilan en una sola
columna. Debe listarse explícitamente .plan-detail-grid porque su regla
base (.grid-main-aside.plan-detail-grid, especificidad 0,2,0) es más
específica que .grid-main-aside sola (0,1,0) y, sin esto, mantiene las
dos columnas en pantallas angostas — aplastando las tarjetas del plan a
~50px y partiendo el texto letra por letra. */
.grid-main-aside,
.grid-main-aside.plan-detail-grid { grid-template-columns: 1fr; }
/* Los hijos de un grid con pista 1fr tienen mínimo implícito min-content,
así que una tarjeta con una tabla ancha crece al ancho de la tabla y se
desborda del viewport (la página entera hace scroll horizontal). Con
min-width:0 la tarjeta se limita a la pista y su .table-wrap interno
(overflow-x:auto) hace el scroll en su lugar. */
.grid-main-aside > * { min-width: 0; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr; }
.form-row-3 { grid-template-columns: 1fr 1fr; }
.form-row-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.content-area { padding: 0.875rem; }
/* En celular, los encabezados de tarjeta (título/subtítulo + grupo de
botones de acción) apilan: el grupo de botones baja a su propia línea en
vez de comprimir el texto a una columna de ~50px que se parte letra por
letra. min-width:0 permite que el bloque de texto ceda y no fuerce
desbordes. */
.card-header { flex-wrap: wrap; row-gap: .5rem; }
.card-header > div { min-width: 0; }
.grid-3 { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.form-row-3, .form-row-4 { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: 1fr 1fr; }
.exercise-grid { grid-template-columns: 1fr 1fr; }
.page-header { flex-direction: column; gap: 0.75rem; }
/* ============================================================
R89 — Calendario mensual en el celular
------------------------------------------------------------
A 375 px cada casilla mide ~50 px: una etiqueta "10:00 María" no
cabe y se cortaba en "10:...", que no dice nada. El mes pasa a ser
un mapa de densidad -- número del día y un punto por cita, con el
color del estado -- y el detalle se lee en "Citas del Día", que en
una columna queda justo debajo (por eso el toque hace scroll ahí).
Los puntos no son clicables a propósito: 6 px es un objetivo
imposible de acertar con el pulgar, y errarlo abriría la ficha de
una cita en lugar de seleccionar el día.
============================================================ */
.calendar-day {
min-height: 46px;
display: flex; flex-wrap: wrap;
justify-content: center; align-content: flex-start;
gap: 3px; padding: .3rem .15rem;
}
.day-num {
flex: 0 0 100%; text-align: center;
margin-bottom: .1rem; font-size: .8rem;
}
.day-appt {
width: 6px; height: 6px; padding: 0; margin: 0;
border-radius: 50%;
font-size: 0; line-height: 0; overflow: hidden;
}
.day-appt, .day-more-btn { pointer-events: none; }
.day-more-btn { flex: 0 0 100%; text-align: center; font-size: .58rem; margin: 0; }
.modal { max-width: 100%; border-radius: 12px 12px 0 0; align-self: flex-end; max-height: 95vh; max-height: 95dvh; }
.modal-overlay { align-items: flex-end; padding: 0; }
/* AJ-4 (Portal únicamente — R47-1 revirtió la versión de Planificación/
kine a tabla con scroll horizontal, ver .table-wrap): tabla de
ejercicios del Portal "Mis Ejercicios" como tarjetas apiladas en vez
de forzar scroll horizontal. Reflow puramente CSS — thead se oculta y
cada
pasa a ser un grid de 2 filas (cabecera + campos apilados);
el DOM/JS no cambia, así que los selectores existentes (data-se-id,
data-ex, etc.) siguen intactos. */
.exercise-plan-day .data-table,
.exercise-plan-day .data-table tbody { display: block; width: 100%; }
.exercise-plan-day .data-table thead { display: none; }
.exercise-plan-day .data-table tr {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: start;
column-gap: .6rem;
row-gap: .3rem;
padding: .75rem .8rem;
margin-bottom: .6rem;
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--bg-2);
box-shadow: var(--shadow-card);
}
.exercise-plan-day .data-table tr:last-child { margin-bottom: 0; }
.exercise-plan-day .data-table td { display: block; padding: 0; border: none; }
/* [foto][nombre][✓] arriba, resto (series/reps/peso/…/comentarios o el
bloque de cardio) apilado abajo, una etiqueta por campo. */
.exercise-plan-day .data-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
.exercise-plan-day .data-table td:nth-child(2) { grid-column: 2; grid-row: 1; }
.exercise-plan-day .data-table td:last-child { grid-column: 3; grid-row: 1; }
.exercise-plan-day .data-table td:nth-child(n+3):not(:last-child) {
grid-column: 1 / -1;
padding-top: .45rem;
border-top: 1px solid var(--line-faint);
}
.exercise-plan-day .data-table td[data-label]::before {
content: attr(data-label);
display: block;
font-size: .66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--ink-mute);
margin-bottom: .2rem;
}
/* ============================================================
R88 — Tablas del staff como tarjetas apiladas
------------------------------------------------------------
Mismo patrón que arriba (portal del paciente), ahora para las
listas del profesional: Pacientes, Usuarios, Clínicas y las
tablas de Valoración. Con 6-8 columnas, un celular obliga a
desplazarse en horizontal para leer una sola fila -- inviable en
consulta, con una mano ocupada.
Sigue siendo CSS puro: el HTML y el JS de cada módulo no cambian,
así que los onclick, ids y data-* existentes siguen intactos. La
etiqueta de cada campo sale del atributo `data-label`, que pone
utils/mobile-tables.js copiando los encabezados.
Se aplica solo a las tablas dentro de .table-wrap, que es la
envoltura estándar de las listas. Las tablas de dentro de un modal
o las de layout quedan fuera a propósito.
Excepción explícita: .table-wrap.tw-plain conserva el scroll lateral.
Se usa donde la tabla NO es una lista de fichas sino una rejilla de
edición -- la tabla de ejercicios de una sesión, por ejemplo, donde
cada celda es un campo editable y apilarlas rompe la lectura por
columnas (R47-1 ya revirtió ese intento una vez).
============================================================ */
.table-wrap:not(.tw-plain) { overflow-x: visible; } /* ya no hace falta el scroll lateral */
.table-wrap:not(.tw-plain) .data-table,
.table-wrap:not(.tw-plain) .data-table tbody { display: block; width: 100%; }
.table-wrap:not(.tw-plain) .data-table thead { display: none; }
.table-wrap:not(.tw-plain) .data-table tr {
display: block;
padding: .7rem .8rem;
margin-bottom: .55rem;
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--bg-2);
box-shadow: var(--shadow-card);
}
.table-wrap:not(.tw-plain) .data-table tr:last-child { margin-bottom: 0; }
.table-wrap:not(.tw-plain) .data-table td {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .75rem;
padding: .28rem 0;
border: none;
text-align: left !important; /* gana al text-align inline de las celdas numéricas */
}
/* La primera celda hace de título de la tarjeta: sin etiqueta y con
más peso, para que la fila se identifique de un vistazo. */
.table-wrap:not(.tw-plain) .data-table td:first-child {
font-weight: 700;
font-size: var(--text-sm);
padding-bottom: .45rem;
margin-bottom: .3rem;
border-bottom: 1px solid var(--line-faint);
}
.table-wrap:not(.tw-plain) .data-table td:first-child::before { display: none; }
.table-wrap:not(.tw-plain) .data-table td[data-label]::before {
content: attr(data-label);
flex: 0 0 auto;
font-size: .66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--ink-mute);
white-space: nowrap;
}
/* El valor se alinea a la derecha frente a su etiqueta y puede partir
en varias líneas sin empujar la etiqueta. */
.table-wrap:not(.tw-plain) .data-table td[data-label] { text-align: right !important; }
.table-wrap:not(.tw-plain) .data-table td[data-label] > * { text-align: left; }
/* Fila de "no hay resultados": ocupa la tarjeta entera, centrada. */
.table-wrap:not(.tw-plain) .data-table tr[data-fullrow] td { display: block; text-align: center !important; }
.table-wrap:not(.tw-plain) .data-table tr[data-fullrow] td::before { display: none; }
/* Las celdas de acciones (botones) necesitan espacio propio: en una
fila estrecha los iconos quedarían apretados contra su etiqueta.
R96: `clear` para que arranquen bajo los parámetros flotados -- si no
se colocan al lado del último y se salen de la pantalla. */
.table-wrap:not(.tw-plain) .data-table td:last-child { padding-top: .45rem; clear: both; }
/* ============================================================
R90 — La tarjeta de ejercicio (Planificación)
------------------------------------------------------------
Esta tabla tiene 10 columnas y es la que más se consulta en
consulta. Como tarjeta necesita tres ajustes propios:
1. El asa de arrastrar (⠿) se oculta: reordenar arrastrando no
funciona con el dedo y como "título" de la tarjeta no dice nada.
2. Por eso el título pasa a ser la celda del ejercicio (3ª), no la
primera -- la regla genérica de arriba se anula para las dos
primeras celdas.
3. La miniatura se ancla a la izquierda y el contenido se corre:
es lo que convierte la lista en algo reconocible de un vistazo.
============================================================ */
/* La especificidad tiene que igualar a la regla genérica de arriba
(.table-wrap:not(.tw-plain) .data-table td), que pone display:flex;
con solo `.exercises-table td.drag-handle` el asa seguía visible. */
.table-wrap .exercises-table td.drag-handle { display: none; }
/* R160: aqui vivia la celda del badge de bloque (era la 2a). Ya no
existe: en el movil el bloque se lee en la cabecera del tramo, que es
una sola linea para todas las tarjetas del bloque en vez de un badge
repetido dentro de cada una.
La celda del ejercicio, que era la 3a, es ahora la 2a. */
/* La celda del ejercicio es el título de la tarjeta. */
.table-wrap .exercises-table td:nth-child(2) {
display: block;
font-size: var(--text-sm);
padding-bottom: .45rem;
margin-bottom: .35rem;
border-bottom: 1px solid var(--line-faint);
min-width: 0 !important;
text-align: left !important;
}
/* La celda del nombre limpia su propio flotante (la miniatura). Sin
esto, la primera celda de parámetros se coloca AL LADO de la
miniatura y arrastra la rejilla: "Series" quedaba solo en su fila. */
.table-wrap .exercises-table td:nth-child(2)::after {
content: ''; display: block; clear: both;
}
/* Sin "EJERCICIO" como etiqueta: el nombre se explica solo, y encabezar
la tarjeta con un rótulo en versalitas es justo el ruido que hacía
ilegible el intento anterior. */
.table-wrap .exercises-table td:nth-child(2)::before { display: none; }
/* Hueco de la miniatura: se reserva SIEMPRE (imagen o inicial) para
que el texto de todas las tarjetas arranque a la misma altura. */
.ex-thumb-wrap {
display: inline-flex; float: left;
width: 52px; height: 52px;
margin: 0 .6rem .25rem 0;
border-radius: 8px; overflow: hidden;
align-items: center; justify-content: center;
background: var(--bg-alt);
border: 1px solid var(--line-faint);
}
.ex-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sin imagen (o con la URL rota): cuadro con la inicial. */
.ex-thumb-fail {
font-size: 1.15rem; font-weight: 700; color: var(--ink-ghost);
}
/* La fila cierra el float para que la siguiente tarjeta no se monte. */
.table-wrap .exercises-table tr::after { content: ''; display: block; clear: both; }
/* R96: parámetros en rejilla de dos columnas, con la etiqueta ENCIMA
del valor. Antes iban seguidos en una línea corrida y se leían como
una frase: "SERIES 3 REPS / TIEMPO 45 seg PESO — INTENSIDAD 7 RPE".
Sin un salto entre etiqueta y valor, el ojo no sabe dónde termina
un dato y empieza el siguiente. */
.table-wrap .exercises-table td.ro-cell {
/* Flotantes y no inline-flex: entre elementos inline el navegador
inserta el espacio en blanco del HTML, y dos celdas al 50% + ese
espacio suman más del 100% -- la segunda saltaba de línea y la
rejilla quedaba descuadrada. */
float: left;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
width: 50%;
box-sizing: border-box;
padding: .15rem .4rem .15rem 0;
line-height: 1.25;
border: none;
text-align: left !important;
}
.table-wrap .exercises-table td.ro-cell::before {
content: attr(data-label);
margin: 0 0 .1rem;
font-size: .6rem;
line-height: 1.2;
}
.table-wrap .exercises-table td.ro-cell .cell-val {
font-size: .82rem !important;
color: var(--ink) !important;
}
/* R150: aqui habia una regla para la celda de Comentarios. Esa columna
ya no existe -- la nota se pinta bajo el nombre (.ex-nota), donde en
movil cae dentro del titulo de la tarjeta, que es su sitio natural. */
/* R94: el nombre vuelve a abrir solo el video/imagen, en móvil y en
escritorio. Editar tiene su propio botón ✎ en la fila, igual que
cardio, así que marcar también el nombre sugeriría dos caminos. */
}
/* En escritorio la miniatura estorba: la tabla se lee por columnas y una
imagen por fila la haría el doble de alta sin aportar nada que el
nombre no diga ya. */
@media (min-width: 641px) {
.ex-thumb-wrap { display: none; }
}
/* ============================================================
R109 — Miniatura en "Agregar ejercicio a sesión"
------------------------------------------------------------
El popup reutiliza el HTML de _exThumbHtml (R91), pero aquel se
diseñó para la TARJETA de la tabla de sesión en móvil, y arrastraba
dos cosas que aquí estorban:
· La regla de arriba lo esconde en escritorio a propósito (una
imagen por fila haría la tabla del doble de alta). En el popup
eso dejaba las filas SIN NINGUNA imagen en computadora.
· En móvil venía con `float:left` y 52 px, pensado para que el
texto de la tarjeta lo rodee. Dentro de una fila flex, el float
empujaba el nombre a una columna de dos palabras por línea.
Aquí la miniatura es un elemento más de la fila: tamaño fijo, sin
flotar y sin encogerse. Va FUERA de toda media query y con más
especificidad (0,2,0) que las reglas de arriba (0,1,0), así que gana
en los dos tamaños sin necesidad de !important.
============================================================ */
.ex-bank-row .ex-thumb-wrap {
display: inline-flex;
float: none;
/* R184: 40 -> 72 px. Los dibujos del banco son figuras completas con
mucho blanco por dentro del cuadro, asi que a 40 px la persona medía
unos 20 y no se distinguia una abduccion de una aduccion.
El tope de .ex-bank-list sube a la vez (240 -> 360 px): agrandar la
miniatura a secas habria bajado de 3,9 a 3,2 ejercicios a la vista.
Con los dos cambios la fila mide 90 px y se ven 4. */
width: 72px;
height: 72px;
margin: 0;
flex-shrink: 0;
border-radius: 6px;
overflow: hidden;
align-items: center;
justify-content: center;
background: var(--bg-alt);
border: 1px solid var(--line-faint);
}
/* `contain` y no `cover`: en el banco conviven fotos y láminas
anatómicas verticales; recortar deja fuera justo la articulación que
identifica al ejercicio. */
.ex-bank-row .ex-thumb { width: 100%; height: 100%; object-fit: contain; display: block; }
.ex-bank-row .ex-thumb-fail { font-size: .95rem; font-weight: 700; color: var(--ink-ghost); }
/* El nombre manda sobre badges y miniatura al repartir el ancho. */
.ex-bank-row .ex-name { min-width: 0; overflow-wrap: anywhere; }
/* R111 — en 375 px la fila llevaba cinco columnas: casilla, miniatura,
nombre y dos badges. Al nombre le quedaban ~90 px y salía partido en
cuatro líneas de una palabra. Ahora el nombre reclama al menos el 55%
y los badges bajan a una segunda línea cuando no caben. */
@media (max-width: 640px) {
.ex-bank-row { flex-wrap: wrap; }
.ex-bank-row .ex-name { flex: 1 1 55%; }
.ex-bank-row .badge { font-size: .6rem; }
}
/* ============================================================
R110 — Registro diario: nota del día vs comentario de sesión
------------------------------------------------------------
Las dos cosas se leían idénticas, en cursiva gris, aunque una
responda al día completo y la otra a un ejercicio concreto. Ahora se
distinguen por ESTRUCTURA, no por color de texto: el comentario de
sesión lleva una línea vertical de acento y, encima, el nombre del
ejercicio. La nota del día se queda como estaba.
============================================================ */
/* ============================================================
R114 — Registro del día como línea plegable (portal del paciente)
------------------------------------------------------------
Plegada ocupa una línea y no desplaza "Empezar sesión"; desplegada
muestra el formulario en el sitio, sin viaje ni modal. Mismo patrón
que las filas de día del Registro diario del kine (R112), para que
las dos pantallas se comporten igual.
============================================================ */
.checkin-card { padding: 0 !important; }
.checkin-cab {
display: flex;
align-items: center;
gap: .5rem;
width: 100%;
padding: .7rem .9rem;
background: none;
border: none;
cursor: pointer;
text-align: left;
font-size: .85rem;
color: var(--ink);
}
.checkin-ico { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.checkin-txt { flex: 1; font-weight: 600; }
.checkin-accion { font-size: .78rem; color: var(--accent); font-weight: 600; }
.checkin-chev { flex-shrink: 0; color: var(--ink-ghost); transition: transform .15s ease; }
.checkin-cab.is-open .checkin-chev { transform: rotate(180deg); }
.checkin-cuerpo { padding: 0 .9rem .9rem; }
.checkin-cuerpo[hidden] { display: none; }
/* ── R112: día plegable ── */
.reg-dia + .reg-dia { border-top: 1px solid var(--line); }
.reg-dia-cab {
display: flex;
align-items: center;
gap: .4rem;
width: 100%;
padding: .5rem 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
font-size: .78rem;
font-weight: 600;
color: var(--ink);
}
.reg-dia-chev { flex-shrink: 0; color: var(--ink-ghost); transition: transform .15s ease; }
.reg-dia-cab.is-open .reg-dia-chev { transform: rotate(90deg); }
.reg-dia-fecha { flex: 1; }
/* El punto resume el día de un vistazo: peor dolor en rehabilitación,
peor descanso en deporte. Sin autorreporte no hay nada que colorear y
se deja el hueco -- que informa: "ese día solo comentó entrenando". */
.reg-dia-punto {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.reg-dia-punto-vacio { background: transparent; }
.reg-dia-iconos {
display: inline-flex;
gap: .15rem;
font-size: .72rem;
line-height: 1;
flex-shrink: 0;
}
.reg-dia-cuerpo { padding: 0 0 .5rem .95rem; }
.reg-dia-cuerpo[hidden] { display: none; }
.reg-item + .reg-item { margin-top: .5rem; }
.reg-item-cab {
display: flex;
align-items: center;
gap: .3rem;
font-size: .74rem;
font-weight: 600;
color: var(--ink-soft);
}
.reg-item-ico { font-size: .78rem; line-height: 1; }
.reg-item-sep { color: var(--ink-ghost); font-weight: 400; }
.reg-sep {
margin: .6rem 0 .3rem;
font-size: .64rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--ink-ghost);
}
.reg-nota-dia {
font-size: .76rem;
color: var(--ink-mute);
margin-top: .2rem;
font-style: italic;
}
.reg-coment-ses {
margin-top: .35rem;
padding-left: .5rem;
border-left: 2px solid var(--accent);
}
.reg-coment-ex {
display: block;
font-size: .68rem;
font-weight: 600;
color: var(--accent);
line-height: 1.25;
/* Los nombres del banco llegan a 60 caracteres; en un panel de 280 px
eso son cuatro líneas. Una sola, y el resto en el tooltip. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.reg-coment-txt {
display: block;
font-size: .76rem;
color: var(--ink-soft);
line-height: 1.35;
}
/* ── Utilities ──────────────────────────────────────────────── */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.gap-1 { gap: 0.5rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.text-mute { color: var(--ink-mute); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.font-bold { font-weight: 700; }
.w-full { width: 100%; }
/* ============================================================
Analytics / Análisis estadísticos
============================================================ */
.an-wrap { max-width: 1180px; margin: 0 auto; padding: 1.25rem 1.5rem 3rem; }
.an-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.an-title { font-size: 1.5rem; font-weight: 800; color: var(--ink); margin: 0; }
.an-sub { font-size: .85rem; color: var(--ink-mute); margin: .25rem 0 0; max-width: 70ch; }
.an-tabs { display: inline-flex; gap: .25rem; background: var(--bg-alt, #f1f5f9); padding: .25rem; border-radius: 10px; margin-bottom: 1.25rem; }
.an-tab { border: none; background: transparent; padding: .45rem 1.1rem; border-radius: 7px; font-size: .85rem; font-weight: 700; color: var(--ink-mute); cursor: pointer; transition: all .15s; }
.an-tab:hover { color: var(--ink); }
.an-tab.active { background: var(--accent); color: #fff; box-shadow: 0 1px 3px rgba(37,99,235,.3); }
.an-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-bottom: 1.1rem; }
.an-field { display: flex; flex-direction: column; gap: .25rem; font-size: .72rem; font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .04em; }
.an-select { padding: .45rem .6rem; border: 1.5px solid var(--line); border-radius: 8px; font-size: .85rem; font-weight: 500; color: var(--ink); background: var(--bg, #fff); min-width: 200px; text-transform: none; letter-spacing: 0; }
.an-select:focus { outline: none; border-color: var(--accent); }
.an-grid2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 900px) { .an-grid2 { grid-template-columns: 1fr; } .an-header { flex-direction: column; } }
.an-card { background: var(--bg, #fff); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.an-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.an-card-head h3 { font-size: .92rem; font-weight: 800; color: var(--ink); margin: 0; }
.an-hint { font-size: .74rem; color: var(--ink-mute); }
.an-badge { font-size: .75rem; font-weight: 700; padding: .2rem .6rem; border: 1.5px solid var(--accent); color: var(--accent); border-radius: 20px; }
.an-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .55rem; }
.an-stat { background: var(--bg-alt, #f8fafc); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem; display: flex; flex-direction: column; gap: .1rem; }
.an-stat-label { font-size: .68rem; font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .03em; }
.an-stat-value { font-size: .95rem; font-weight: 800; color: var(--ink); }
.an-table-wrap { overflow-x: auto; }
.bm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.an-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.an-table th { text-align: left; font-size: .72rem; font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .03em; padding: .5rem .6rem; border-bottom: 2px solid var(--line); white-space: nowrap; }
.an-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.an-table tbody tr:hover { background: var(--bg-alt, #f8fafc); }
/* ============================================================
Tarjeta unificada de test / asistente (asx-*)
Formato Y-Balance / Tests de Salto para TODOS los tests.
============================================================ */
.asx-card { background: var(--bg-alt, #f8fafc); border: 1px solid var(--line); border-radius: var(--r-sm, 8px); padding: .65rem .8rem; margin-bottom: .7rem; }
.asx-title { margin: 0 0 .15rem; font-size: .85rem; font-weight: 700; color: var(--ink); }
.asx-ref { margin: 0 0 .45rem; font-size: .72rem; color: var(--ink-mute); line-height: 1.5; }
.asx-empty { margin: 0 0 .55rem; font-size: .8rem; color: var(--ink-mute); font-style: italic; }
.asx-result { margin-bottom: .55rem; font-size: .82rem; }
.asx-result .asx-row { display: flex; align-items: baseline; gap: .45rem; padding: .14rem 0; }
.asx-result .asx-k { color: var(--ink-mute); font-size: .8rem; }
.asx-result .asx-v { font-weight: 700; color: var(--ink); }
.asx-result .asx-interp { margin-top: .15rem; }
.asx-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
/* ============================================================
F1 — Barra de pestañas del portal del paciente
Solo se muestra si el tiene .tabbar-on (lo pone App.onLogin
cuando el rol es 'patient') Y estamos en ancho de móvil/tablet: en
escritorio la barra lateral ya cumple esa función y duplicarla
confundiría. Es