/* =========================================================================
Loprosi — sistema de diseño (CSS propio, mobile-first, modo claro/oscuro)
Los colores se definen como design tokens en :root y se sobreescriben
cuando .
========================================================================= */
:root {
/* Paleta base (modo claro) */
--bg: #f4f5f7;
--surface: #ffffff;
--surface-2: #eef0f3;
--text: #1b1f24;
--text-muted: #5d6672;
--border: #e2e5ea;
/* Acento (energía, sobrecarga progresiva) */
--accent: #ff5722;
--accent-strong: #e64a19;
--accent-contrast: #ffffff;
--success: #2e9e5b;
--danger: #d6453d;
/* Tipografía y formas */
--radius: 14px;
--radius-lg: 22px;
--shadow: 0 6px 18px rgba(20, 24, 33, 0.08);
--shadow-accent: 0 8px 22px rgba(255, 87, 34, 0.35);
/* Espaciado */
--space-xs: 6px;
--space-sm: 10px;
--space: 16px;
--space-lg: 24px;
/* Altura de la barra de navegación inferior */
--nav-h: 64px;
}
html[data-theme="dark"] {
--bg: #0f1419;
--surface: #1a212b;
--surface-2: #232c38;
--text: #eaeef4;
--text-muted: #9aa6b4;
--border: #2c3744;
--shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
/* Deja hueco para la barra inferior */
padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
transition: background 0.2s ease, color 0.2s ease;
}
/* ---- Layout ----------------------------------------------------------- */
.container {
width: 100%;
max-width: 560px;
margin: 0 auto;
padding: var(--space);
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space) var(--space) 0;
max-width: 560px;
margin: 0 auto;
}
.brand {
font-weight: 800;
font-size: 1.4rem;
letter-spacing: -0.5px;
}
.brand span {
color: var(--accent);
}
/* ---- Botones ---------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
font-size: 1rem;
font-weight: 600;
padding: 14px 20px;
border: none;
border-radius: var(--radius);
background: var(--surface-2);
color: var(--text);
cursor: pointer;
text-decoration: none;
transition: transform 0.08s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.btn:active {
transform: scale(0.97);
}
.btn-block {
width: 100%;
}
.btn-primary {
background: var(--accent);
color: var(--accent-contrast);
}
.btn-primary:hover {
background: var(--accent-strong);
}
/* Botón gigante destacado de la home: "Agregar progreso de hoy".
Es un , así que necesita display:flex para comportarse como un botón de
bloque: respetar width:100%, centrar su contenido y NO solaparse con el texto
de alrededor (un inline ignora el ancho y su padding pisa a los vecinos). */
.btn-hero {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: 26px 20px;
font-size: 1.25rem;
font-weight: 800;
text-decoration: none;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--accent), var(--accent-strong));
color: var(--accent-contrast);
box-shadow: var(--shadow-accent);
letter-spacing: 0.2px;
}
.btn-hero .plus {
font-size: 1.6rem;
line-height: 1;
}
/* ---- Tarjetas --------------------------------------------------------- */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--space);
box-shadow: var(--shadow);
}
.card + .card {
margin-top: var(--space);
}
.section-title {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
margin: var(--space-lg) 0 var(--space-sm);
}
/* ---- Formularios ------------------------------------------------------ */
.form-card {
margin-top: var(--space-lg);
}
.field {
margin-bottom: var(--space);
}
.field label {
display: block;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: var(--space-xs);
color: var(--text-muted);
}
.field input,
.field select,
.field textarea {
width: 100%;
padding: 14px;
font-size: 1rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-2);
color: var(--text);
font-family: inherit;
}
.field select {
/* Flecha personalizada para que combine con el tema oscuro */
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa6b4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.field .helptext,
.field .errorlist {
font-size: 0.8rem;
margin-top: var(--space-xs);
padding: 0;
list-style: none;
}
.field .helptext {
color: var(--text-muted);
}
.field .errorlist {
color: var(--danger);
}
.checkbox-row {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.checkbox-row input {
width: 20px;
height: 20px;
}
/* ---- Mensajes --------------------------------------------------------- */
.messages {
list-style: none;
padding: 0;
margin: 0 0 var(--space);
}
.messages li {
padding: 12px var(--space);
border-radius: var(--radius);
margin-bottom: var(--space-sm);
background: var(--surface-2);
border-left: 4px solid var(--accent);
}
.messages li.error {
border-color: var(--danger);
}
.messages li.success {
border-color: var(--success);
}
/* ---- Enlaces auxiliares ---------------------------------------------- */
.muted-link {
color: var(--text-muted);
text-align: center;
display: block;
margin-top: var(--space-lg);
}
.muted-link a {
color: var(--accent);
font-weight: 600;
text-decoration: none;
}
/* ---- Toggle de tema --------------------------------------------------- */
.theme-toggle {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 50%;
width: 42px;
height: 42px;
font-size: 1.1rem;
cursor: pointer;
display: grid;
place-items: center;
color: var(--text);
}
/* ---- Barra de navegación inferior ------------------------------------ */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: calc(var(--nav-h) + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
background: var(--surface);
border-top: 1px solid var(--border);
display: flex;
justify-content: center;
z-index: 50;
}
/* Los ítems se alinean con la columna de contenido (no se estiran de extremo a
extremo en pantallas anchas). */
.bottom-nav-inner {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
max-width: 560px;
height: 100%;
}
.bottom-nav a {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
font-size: 0.7rem;
color: var(--text-muted);
text-decoration: none;
flex: 1;
padding: 6px 0;
}
.bottom-nav a.active {
color: var(--accent);
}
.bottom-nav a .ico,
.bottom-nav .nav-logout .ico {
font-size: 1.3rem;
line-height: 1;
}
/* El logout es un form POST pero debe verse como un ítem de nav */
.bottom-nav .nav-logout {
flex: 1;
margin: 0;
}
.bottom-nav .nav-logout button {
width: 100%;
background: none;
border: none;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
font-size: 0.7rem;
color: var(--text-muted);
padding: 6px 0;
font-family: inherit;
}
/* ---- Cabecera de página (título + acción) ----------------------------- */
.page-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space);
margin-top: var(--space-sm);
}
.page-head h1 {
margin: 0;
font-size: 1.5rem;
}
/* ---- Botón secundario de borrar --------------------------------------- */
.btn-danger {
background: var(--danger);
color: #fff;
}
.form-actions {
display: flex;
gap: var(--space-sm);
margin-top: var(--space-lg);
}
.form-actions .btn {
flex: 1;
}
/* ---- Pestañas de progreso (por ejercicio / general) ------------------- */
.view-tabs {
display: flex;
gap: 4px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 999px;
padding: 4px;
margin-top: var(--space);
}
.view-tab {
flex: 1;
text-align: center;
padding: 9px 12px;
border-radius: 999px;
font-weight: 700;
font-size: 0.9rem;
color: var(--text-muted);
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.view-tab.is-active {
background: var(--accent);
color: var(--accent-contrast);
box-shadow: var(--shadow-accent);
}
/* ---- Lista de métricas destacadas (vista general) -------------------- */
.metric-list {
display: flex;
flex-direction: column;
}
.metric-row {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: 12px 0;
border-top: 1px solid var(--border);
}
.metric-row:first-child {
border-top: none;
}
.metric-ico {
font-size: 1.3rem;
line-height: 1;
}
.metric-name {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-muted);
}
.metric-val {
margin-left: auto;
text-align: right;
font-weight: 800;
}
.metric-delta {
font-weight: 700;
font-size: 0.78rem;
}
.metric-delta.up {
color: var(--success);
}
.metric-delta.down {
color: var(--danger);
}
/* ---- Listado peso × reps por sesión (progreso por ejercicio) --------- */
.set-log {
max-height: 360px;
overflow-y: auto;
padding-top: 6px;
padding-bottom: 6px;
}
.set-log-row {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: 10px 4px;
border-top: 1px solid var(--border);
}
.set-log-row:first-child {
border-top: none;
}
.set-log-date {
width: 52px;
flex-shrink: 0;
font-size: 0.78rem;
color: var(--text-muted);
}
.set-log-load {
font-weight: 800;
font-size: 1.05rem;
white-space: nowrap;
}
.set-log-x {
color: var(--accent);
margin: 0 1px;
}
.set-log-u {
font-size: 0.72rem;
font-weight: 600;
color: var(--text-muted);
}
.set-log-meta {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.74rem;
white-space: nowrap;
}
.set-log-rpe {
color: #a855f7;
font-weight: 700;
}
.set-log-e1rm {
color: var(--text-muted);
font-weight: 700;
}
.set-log-row.is-top {
background: rgba(245, 181, 10, 0.10);
border-radius: var(--radius);
}
.set-log-row.is-top .set-log-load::after {
content: " 🏆";
}
/* ---- Fila de ejercicio ------------------------------------------------- */
.ex-row {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: 12px var(--space);
}
.ex-row + .ex-row {
margin-top: var(--space-sm);
}
.ex-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.ex-name {
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ex-chip {
align-self: flex-start;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 999px;
padding: 2px 10px;
}
/* Botón de estrella (destacar) */
.star-btn {
background: none;
border: none;
cursor: pointer;
font-size: 1.5rem;
line-height: 1;
color: var(--text-muted);
padding: 4px;
transition: transform 0.1s ease, color 0.2s ease;
}
.star-btn:active {
transform: scale(1.25);
}
.star-btn.is-fav {
color: #f5b50a;
}
/* Acciones de fila (editar / borrar) */
.ex-actions {
display: flex;
gap: 4px;
}
.icon-btn {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: var(--radius);
background: var(--surface-2);
color: var(--text);
text-decoration: none;
font-size: 1rem;
}
.icon-btn.danger {
color: var(--danger);
}
/* ---- Pantalla de entrenamiento --------------------------------------- */
.log-card {
padding: var(--space);
}
.log-card + .log-card,
#log-list + #picker-slot .picker,
#picker-slot .picker {
margin-top: var(--space);
}
.log-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
margin-bottom: var(--space-xs);
}
.log-title {
margin: 0;
font-size: 1.1rem;
flex: 1;
min-width: 0;
}
/* Número de orden del ejercicio dentro de la sesión */
.log-order {
flex-shrink: 0;
display: grid;
place-items: center;
min-width: 30px;
height: 30px;
padding: 0 6px;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text-muted);
font-size: 0.8rem;
font-weight: 800;
}
.log-head-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.log-head-actions .icon-btn {
width: 34px;
height: 34px;
font-size: 1.05rem;
}
.icon-btn:disabled {
opacity: 0.35;
cursor: default;
}
/* Fila de serie con steppers grandes (uso a una mano) */
.set-row {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: 10px 0;
border-top: 1px solid var(--border);
}
.set-num {
width: 18px;
text-align: center;
font-weight: 800;
color: var(--text-muted);
flex-shrink: 0;
}
.set-form {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-sm);
}
.stepper {
display: flex;
align-items: center;
gap: 4px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 4px;
}
.step-btn {
width: 38px;
height: 38px;
border: none;
border-radius: 10px;
background: var(--surface);
color: var(--text);
font-size: 1.3rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
transition: transform 0.08s ease;
}
.step-btn:active {
transform: scale(0.88);
background: var(--accent);
color: var(--accent-contrast);
}
.num {
width: 50px;
border: none;
background: transparent;
color: var(--text);
text-align: center;
font-size: 1.1rem;
font-weight: 700;
-moz-appearance: textfield;
appearance: textfield;
}
.num::-webkit-outer-spin-button,
.num::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.num:focus {
outline: none;
}
.unit {
font-size: 0.72rem;
color: var(--text-muted);
margin: 0 2px;
}
.saved {
width: 16px;
display: inline-block;
text-align: center;
}
.saved-ok {
color: var(--success);
font-weight: 800;
animation: fadeSaved 1.8s forwards;
}
@keyframes fadeSaved {
0% { opacity: 1; transform: scale(1.3); }
25% { opacity: 1; transform: scale(1); }
75% { opacity: 1; }
100% { opacity: 0; }
}
/* Botón de borrar serie: visible en ambos temas (icono con color de peligro). */
.set-del {
display: grid;
place-items: center;
width: 40px;
height: 40px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 12px;
color: var(--danger);
cursor: pointer;
padding: 0;
flex-shrink: 0;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.set-del:hover {
background: rgba(214, 69, 61, 0.14);
border-color: var(--danger);
}
.set-del:active {
transform: scale(0.9);
}
.set-del-ico {
display: block;
}
/* Fila de anotaciones de la serie: calentamiento y RPE (ocupa toda la línea). */
.set-meta {
flex-basis: 100%;
display: flex;
align-items: center;
gap: var(--space-sm);
margin-top: 2px;
}
.warm-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
user-select: none;
}
.warm-toggle input {
width: 16px;
height: 16px;
accent-color: var(--accent);
cursor: pointer;
}
.rpe-box {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 999px;
padding: 3px 8px 3px 10px;
}
.rpe-label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--text-muted);
}
.rpe-select {
appearance: none;
-webkit-appearance: none;
border: none;
background: transparent;
color: var(--text);
font-family: inherit;
font-size: 0.92rem;
font-weight: 700;
cursor: pointer;
padding: 2px 2px;
text-align: center;
}
.rpe-select:focus {
outline: none;
}
/* Botón verde de guardar la serie + su indicador "✓ guardado". */
.set-save-wrap {
margin-left: auto;
display: flex;
align-items: center;
gap: 6px;
}
.set-save {
display: inline-flex;
align-items: center;
gap: 6px;
border: none;
cursor: pointer;
font-family: inherit;
font-size: 0.82rem;
font-weight: 800;
color: #fff;
background: linear-gradient(135deg, var(--success), #1f7d46);
border-radius: 999px;
padding: 8px 14px;
box-shadow: 0 3px 10px rgba(46, 158, 91, 0.32);
transition: transform 0.08s ease, box-shadow 0.2s ease;
}
.set-save:hover {
box-shadow: 0 5px 14px rgba(46, 158, 91, 0.42);
}
.set-save:active {
transform: scale(0.94);
}
.set-save-ico {
font-size: 0.95rem;
line-height: 1;
}
/* Serie de calentamiento: numeración cálida y cifras atenuadas. */
.set-row.is-warmup .set-num {
color: #f5871f;
}
.set-row.is-warmup .num {
color: var(--text-muted);
}
.log-foot {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-top: var(--space-sm);
}
.btn-add-set {
width: 100%;
background: var(--surface-2);
color: var(--accent);
font-weight: 700;
}
/* Botón "añadir ejercicio" (secundario, punteado) */
.btn-hero-sm {
width: 100%;
padding: 16px;
font-size: 1.05rem;
font-weight: 800;
border-radius: var(--radius-lg);
background: var(--surface);
border: 2px dashed var(--border);
color: var(--accent);
}
.btn-hero-sm .plus {
font-size: 1.3rem;
}
/* Selector de ejercicios */
.picker {
margin-top: var(--space);
}
.pick-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
width: 100%;
text-align: left;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 14px;
margin-bottom: var(--space-sm);
cursor: pointer;
color: var(--text);
font-size: 1rem;
}
.pick-item.added {
opacity: 0.45;
}
.pick-name {
font-weight: 600;
}
.pick-star {
color: #f5b50a;
margin-right: 4px;
}
/* Notas */
.notes-area {
width: 100%;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-2);
color: var(--text);
padding: 12px;
font-family: inherit;
font-size: 1rem;
resize: vertical;
}
.notes-area:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.small {
font-size: 0.8rem;
}
/* ---- Barra superior: acciones ---------------------------------------- */
.topbar-actions {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.topbar-logout {
margin: 0;
}
a.brand {
text-decoration: none;
color: var(--text);
}
/* Alpine: evita parpadeo de elementos ocultos */
[x-cloak] {
display: none !important;
}
/* ---- Rutinas ---------------------------------------------------------- */
.back-btn {
padding: 8px 14px;
font-size: 1.4rem;
line-height: 1;
}
.week-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space);
text-decoration: none;
color: var(--text);
margin-top: var(--space-sm);
}
.week-cta-arrow {
font-size: 1.6rem;
color: var(--text-muted);
flex-shrink: 0;
}
.badge-active {
background: rgba(46, 158, 91, 0.15);
color: var(--success);
border: 1px solid var(--success);
border-radius: 999px;
padding: 3px 10px;
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
}
.routine-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
align-items: center;
margin-top: var(--space-sm);
}
.routine-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
}
.day-block {
padding: var(--space);
}
.day-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
margin-bottom: var(--space-xs);
}
.day-title {
margin: 0;
font-size: 1.05rem;
}
.day-item {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: 9px 0;
border-top: 1px solid var(--border);
}
.day-ex-name {
flex: 1;
font-weight: 600;
min-width: 0;
}
.day-empty {
padding: 8px 0 0;
margin: 0;
}
.suggest-row {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: 9px 0;
border-top: 1px solid var(--border);
}
.suggest-row:first-of-type {
border-top: none;
}
/* ---- Home: métricas --------------------------------------------------- */
.stats-row {
display: flex;
gap: var(--space-sm);
margin-top: var(--space);
}
.stat-card {
flex: 1;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--space) var(--space-xs);
text-align: center;
display: flex;
flex-direction: column;
gap: 2px;
box-shadow: var(--shadow);
}
.stat-value {
font-size: 1.5rem;
font-weight: 800;
line-height: 1.1;
}
.stat-label {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--text-muted);
}
/* ---- Home: ejercicios destacados ------------------------------------- */
.fav-card {
padding: var(--space);
}
.fav-card + .fav-card {
margin-top: var(--space-sm);
}
.fav-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
}
.fav-name {
font-weight: 700;
font-size: 1.05rem;
}
.fav-stats {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 6px;
}
.fav-main {
font-size: 1.1rem;
font-weight: 600;
}
.trend {
font-size: 0.78rem;
font-weight: 700;
padding: 3px 9px;
border-radius: 999px;
white-space: nowrap;
}
.trend-up {
color: var(--success);
background: rgba(46, 158, 91, 0.15);
}
.trend-down {
color: var(--danger);
background: rgba(214, 69, 61, 0.15);
}
.trend-flat,
.trend-new {
color: var(--text-muted);
background: var(--surface-2);
}
/* ---- Temporizador de descanso ----------------------------------------- */
.rest-timer {
position: fixed;
left: 0;
right: 0;
bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--space-sm));
z-index: 45;
display: flex;
justify-content: center;
padding: 0 var(--space);
pointer-events: none;
}
.rest-bar {
pointer-events: auto;
display: flex;
align-items: center;
gap: var(--space-xs);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
box-shadow: var(--shadow);
padding: 6px 8px;
}
.rest-label {
font-size: 0.8rem;
font-weight: 700;
color: var(--text-muted);
padding: 0 4px;
}
.rest-preset,
.rest-btn {
border: none;
cursor: pointer;
font-family: inherit;
font-weight: 700;
background: var(--surface-2);
color: var(--text);
border-radius: 999px;
padding: 7px 11px;
font-size: 0.85rem;
}
.rest-preset:active,
.rest-btn:active {
transform: scale(0.94);
}
.rest-count {
font-size: 1.3rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
min-width: 64px;
text-align: center;
color: var(--accent);
}
.rest-active {
background: var(--surface);
}
.rest-done {
animation: restPulse 0.8s ease-in-out infinite;
border-color: var(--success);
}
.rest-done .rest-count {
color: var(--success);
}
@keyframes restPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(46, 158, 91, 0.5); }
50% { box-shadow: 0 0 0 8px rgba(46, 158, 91, 0); }
}
/* Reserva espacio bajo el último contenido para poder desplazar el botón de
finalizar por encima del temporizador de descanso flotante. */
.rest-clearance {
height: 96px;
}
/* ---- Récords y sobrecarga (entrenamiento) ----------------------------- */
.pr-chip {
font-size: 0.72rem;
font-weight: 700;
color: #b8860b;
background: rgba(245, 181, 10, 0.16);
border: 1px solid rgba(245, 181, 10, 0.5);
border-radius: 999px;
padding: 2px 9px;
margin-left: 6px;
white-space: nowrap;
vertical-align: middle;
}
.set-row.is-pr {
background: rgba(245, 181, 10, 0.08);
border-radius: var(--radius);
}
.set-row.is-pr .set-num {
color: #f5b50a;
}
.overload-tip {
margin: var(--space-sm) 0 0;
padding: 10px 12px;
font-size: 0.85rem;
background: rgba(255, 87, 34, 0.1);
border: 1px solid rgba(255, 87, 34, 0.3);
border-radius: var(--radius);
color: var(--text);
}
/* ---- Progreso --------------------------------------------------------- */
.progress-controls {
margin-top: var(--space);
}
.period-pills {
display: flex;
gap: var(--space-xs);
margin-top: var(--space-sm);
}
.pill {
flex: 1;
padding: 9px 6px;
font-size: 0.82rem;
font-weight: 700;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--text-muted);
cursor: pointer;
font-family: inherit;
transition: background 0.15s ease, color 0.15s ease;
}
.pill-active {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-contrast);
}
/* La insignia de variación dentro de las tarjetas de comparación */
.stat-card .trend {
margin-top: 4px;
font-size: 0.7rem;
padding: 2px 7px;
}
.chart-card {
padding: var(--space) var(--space-sm);
}
/* Peso corporal */
.bw-form-row {
display: flex;
gap: var(--space);
}
.bw-form-row .field {
flex: 1;
}
.bw-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
margin-top: var(--space-sm);
}
.bw-weight {
font-weight: 700;
font-size: 1.05rem;
}
/* ---- Utilidades ------------------------------------------------------- */
.text-muted {
color: var(--text-muted);
}
.center {
text-align: center;
}
.mt {
margin-top: var(--space);
}
/* =========================================================================
Pulido visual — animaciones de entrada y micro-interacciones.
Todo lo de aquí es puramente estético: mejora la sensación sin cambiar el
comportamiento. Se respeta prefers-reduced-motion.
========================================================================= */
/* Entrada suave y escalonada de los bloques principales de cada pantalla.
Se aplica a los hijos directos del contenedor (que se pintan una sola vez
al cargar); los swaps de HTMX reemplazan nietos, así que no se re-animan.
Se excluye el temporizador (position:fixed) para no desplazarlo. */
@keyframes riseIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
main.container > *:not(.rest-timer):not(.chart-card) {
animation: riseIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Las tarjetas con