/* ========================================================================== ENTRENADOR PRO — Hoja de estilos Sistema visual inspirado en el sitio de referencia: azul #1DA0F9, carbón #212325, títulos condensados en mayúsculas (Oswald), tarjetas de radio 20 px y botones tipo píldora. Tema claro por defecto; tema oscuro con [data-tema="oscuro"] en . ========================================================================== */ :root{ /* ---- marca ---- Estos son los valores con los que arranca la página, antes de que Marca.aplicar() lea la identidad guardada. Así la pantalla de entrada ya se ve en los colores de NFIT y no parpadea. */ --azul:#d9ae62; --azul-osc:#b8903f; --azul-suave:rgba(217,174,98,.13); --carbon:#0a0a0a; --carbon2:#1a1a1a; /* ---- el único tema: negro cálido, que es lo que acompaña al dorado ---- Antes esto era el tema claro y el oscuro se aplicaba encima. Se invirtió para que la app se vea en negro desde el primer píxel, aunque el JavaScript tarde o falle. */ --fondo:#131211; --superficie:#1c1b19; --superficie2:#25231f; --superficie3:#2f2d28; --borde:#37342e; --borde2:#48443c; --texto:#f6f2e9; --texto2:#b5afa2; --texto3:#807b70; --sombra:0 6px 24px rgba(0,0,0,.5); --sombra-alta:0 18px 50px rgba(0,0,0,.68); /* alias por compatibilidad con estilos en línea */ --acento:var(--azul); --info:var(--azul); /* color de texto/iconos que van encima del color de acento */ --sobre-acento:#141414; /* No hay verde ni ámbar: lo que va bien y lo que hay que mirar se distinguen por relleno, borde y peso, no por color. El rojo se conserva SOLO para borrar y para errores: sin él no se distingue "guardar" de "eliminar", y eso deja de ser estética para volverse un riesgo. */ --ok:var(--azul); --aviso:var(--azul); --peligro:#a8342c; --r:20px; --r-s:12px; --pill:500px; --nav-alto:66px; --titulo:'Oswald','Archivo Narrow','Roboto Condensed',system-ui,sans-serif; --cuerpo:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; } /* Negros ligeramente cálidos: acompañan al dorado mucho mejor que un gris azulado */ html[data-tema="oscuro"]{ --fondo:#131211; --superficie:#1c1b19; --superficie2:#25231f; --superficie3:#2f2d28; --borde:#37342e; --borde2:#48443c; --texto:#f6f2e9; --texto2:#b5afa2; --texto3:#807b70; --pad-lat:16px; --sombra:0 6px 24px rgba(0,0,0,.5); --sombra-alta:0 18px 50px rgba(0,0,0,.68); } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%;max-width:100%} html{ -webkit-text-size-adjust:100%;text-size-adjust:100%; /* Nada puede empujar la página de lado. Se usa `clip` y no `hidden` a propósito: `hidden` convertiría la página en un contenedor de scroll y la cabecera dejaría de quedarse pegada arriba. `clip` corta sin eso. */ overflow-x:clip; } body{ background:var(--fondo); color:var(--texto); font:15px/1.6 var(--cuerpo); -webkit-font-smoothing:antialiased; padding-bottom:calc(var(--nav-alto) + env(safe-area-inset-bottom)); overscroll-behavior-y:contain; } input,select,textarea,button{font-family:var(--cuerpo);color:inherit} h1,h2,h3,h4,.titular{ font-family:var(--titulo);font-weight:600;text-transform:uppercase; letter-spacing:.4px;line-height:1.12; } .azul{color:var(--azul)} /* ------------------------------- Cabecera ------------------------------- */ .cabecera{ position:sticky;top:0;z-index:40; display:flex;align-items:center;gap:12px; padding:11px 16px; background:var(--carbon); border-bottom:3px solid var(--azul); } /* El logo cede espacio antes que los controles: si la pantalla es muy angosta, se recorta el logo, no el botón de salir. Con `flex:0 0 auto` el logo no cedía nunca y empujaba el botón fuera de la pantalla. */ .marca{display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:74px} .marca-logo{ width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center; background:var(--azul);border-radius:10px; } .marca-logo svg{width:30px;height:30px} .marca-logo svg .disco{fill:#fff} .marca-logo svg .barra{fill:var(--sobre-acento)} .marca-texto{display:flex;flex-direction:column;line-height:1} .marca-texto small{ font-family:var(--titulo);font-size:9px;font-weight:500;letter-spacing:2.4px; color:#8b939b;text-transform:uppercase;margin-bottom:2px; } .marca-texto b{ font-family:var(--titulo);font-size:19px;font-weight:700;letter-spacing:.5px; color:#fff;text-transform:uppercase; } .marca-texto b.azul{color:var(--azul);margin-top:-3px} .cabecera-der{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto} .selector-cliente{ background:var(--carbon2);border:1px solid #3d4145;color:#fff; border-radius:var(--pill);padding:8px 14px;max-width:42vw;min-width:0; font-size:16px;font-weight:600;font-family:var(--titulo); text-transform:uppercase;letter-spacing:.4px;min-height:38px; text-overflow:ellipsis; } .cabecera-der .btn.fantasma{color:#c9d0d7;flex:0 0 auto} #btn-salir{flex:0 0 auto} .cabecera-der .btn.fantasma:hover{background:var(--carbon2);color:#fff} /* --------------------------------- Ticker ------------------------------- */ .ticker{ background:var(--azul);color:var(--sobre-acento); font-family:var(--titulo);font-size:11.5px;font-weight:500; text-transform:uppercase;letter-spacing:2px; padding:9px 16px;text-align:center; white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none; } .ticker::-webkit-scrollbar{display:none} .ticker b{font-weight:700} .ticker .punto{opacity:.55;margin:0 12px} .ticker:empty{display:none} /* ------------------------------ Contenedor ------------------------------ */ .contenido{padding:18px var(--pad-lat) 24px;max-width:1240px;margin:0 auto} .vista{display:none} .vista.activa{display:block;animation:entra .2s ease} @keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .titulo-vista{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap} .titulo-vista h2{font-size:26px;letter-spacing:.2px} .titulo-vista .cuenta{ color:var(--texto3);font-size:11px;font-weight:600;font-family:var(--titulo); text-transform:uppercase;letter-spacing:1.4px; } .titulo-vista .acciones{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap} /* -------------------------------- Botones ------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; background:var(--superficie);border:1.5px solid var(--borde2);color:var(--texto); padding:10px 20px;border-radius:var(--pill);cursor:pointer; font-family:var(--titulo);font-weight:500;font-size:13px; text-transform:uppercase;letter-spacing:1px; transition:.16s;min-height:42px;white-space:nowrap; } .btn:hover{border-color:var(--azul);color:var(--azul)} .btn:active{transform:scale(.97)} .btn.principal{background:var(--azul);border-color:var(--azul);color:var(--sobre-acento);font-weight:600} .btn.principal:hover{background:var(--azul-osc);border-color:var(--azul-osc);color:#fff} .btn.peligro{background:var(--peligro);border-color:var(--peligro);color:#fff} .btn.peligro:hover{filter:brightness(1.08);color:#fff} .btn.fantasma{background:transparent;border-color:transparent;color:var(--texto2)} .btn.fantasma:hover{background:var(--superficie3);color:var(--texto)} .btn.chico{padding:6px 14px;min-height:34px;font-size:11.5px;letter-spacing:.8px} .btn.icono{padding:0;width:38px;min-height:38px;flex:0 0 auto;font-size:15px} .btn:disabled{opacity:.4;cursor:not-allowed} /* -------------------------------- Tarjetas ------------------------------ */ .tarjeta{ background:var(--superficie);border:1px solid var(--borde); border-radius:var(--r);padding:20px;margin-bottom:14px;box-shadow:var(--sombra); } .tarjeta strong{font-family:var(--titulo);font-weight:600;letter-spacing:.3px;font-size:17px} .tarjeta.clicable{cursor:pointer;transition:.18s} .tarjeta.clicable:hover{border-color:var(--azul);transform:translateY(-2px);box-shadow:var(--sombra-alta)} .rejilla{display:grid;gap:14px;grid-template-columns:1fr} @media(min-width:700px){.rejilla{grid-template-columns:repeat(2,1fr)}} @media(min-width:1050px){.rejilla{grid-template-columns:repeat(3,1fr)}} .vacio{ text-align:center;padding:52px 24px;color:var(--texto2); background:var(--superficie);border:2px dashed var(--borde2);border-radius:var(--r); } .vacio .icono{font-size:38px;display:block;margin-bottom:12px;opacity:.45;filter:grayscale(1)} .vacio p{margin-bottom:18px} /* --------------------------------- Campos ------------------------------- */ .campo{display:block;margin-bottom:14px} .campo-etq{ display:block;font-family:var(--titulo);font-size:11px;font-weight:600; color:var(--texto2);margin-bottom:6px;text-transform:uppercase;letter-spacing:1.2px; } .campo-ayuda{display:block;font-size:12px;color:var(--texto3);margin-top:5px;line-height:1.5} /* Faltaba [type=password]: por eso los campos de contraseña salían con el cuadro blanco del navegador en vez del estilo de la app. */ input[type=text],input[type=number],input[type=date],input[type=url], input[type=password],input[type=email],input[type=tel],input[type=search], select,textarea{ width:100%;background:var(--superficie2);border:1.5px solid var(--borde); border-radius:var(--r-s);padding:11px 13px;outline:none;transition:.15s;min-height:46px; font-size:16px; } input:focus,select:focus,textarea:focus{border-color:var(--azul);background:var(--superficie);box-shadow:0 0 0 3px var(--azul-suave)} textarea{resize:vertical;min-height:80px} .fila{display:grid;gap:12px;grid-template-columns:1fr 1fr} .fila-3{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)} @media(max-width:520px){.fila-3{grid-template-columns:1fr 1fr}} @media(max-width:560px){.fila{grid-template-columns:1fr}} /* -------------------------------- Etiquetas ----------------------------- */ .etq{ display:inline-flex;align-items:center;gap:4px; background:var(--superficie3);border:1px solid var(--borde); padding:3px 11px;border-radius:var(--pill); font-family:var(--titulo);font-size:11px;font-weight:500;color:var(--texto2); text-transform:uppercase;letter-spacing:.9px;white-space:nowrap; } /* Cada grupo muscular tenía su color (rosa, azul, verde…). Ahora van todos en dorado sobre el gris de la superficie: el nombre del músculo ya dice cuál es, el color no aportaba nada y rompía la identidad. */ .etq[class*="g-"]{background:var(--superficie3);color:var(--azul);border-color:var(--borde2)} html[data-tema="oscuro"] .etq[class*="g-"]{ background:var(--superficie3);border-color:var(--borde2); } /* Los grupos musculares iban cada uno de un color; ahora todos en dorado. */ /* Ajustes de contraste cuando el carbón coincide con la superficie */ html[data-tema="oscuro"] .total-peso{background:var(--superficie2);border:1px solid var(--borde)} html[data-tema="oscuro"] .total-peso input{background:var(--superficie3);border-color:var(--borde2)} html[data-tema="oscuro"] .bloque-cab{background:var(--superficie2);border-bottom:1px solid var(--borde)} html[data-tema="oscuro"] .dato{background:var(--superficie3);border-color:var(--borde2);color:var(--texto2)} html[data-tema="oscuro"] .modal-cab{background:var(--superficie2);border-bottom:1px solid var(--borde)} html[data-tema="oscuro"] .aviso{background:var(--superficie3)} /* --------------------------------- Tabla -------------------------------- */ .tabla-envoltura{ overflow-x:auto;-webkit-overflow-scrolling:touch; border-top:1px solid var(--borde);border-bottom:1px solid var(--borde); } table.tabla{width:100%;border-collapse:collapse;font-size:13.5px;min-width:780px;background:var(--superficie)} table.tabla th{ background:var(--superficie2);text-align:left;padding:11px 12px; font-family:var(--titulo);font-size:10.5px;font-weight:600; text-transform:uppercase;letter-spacing:1.3px;color:var(--texto2); border-bottom:2px solid var(--borde2);white-space:nowrap; } table.tabla td{padding:11px 12px;border-bottom:1px solid var(--borde);vertical-align:middle} table.tabla tr:last-child td{border-bottom:none} table.tabla tbody tr:hover{background:var(--azul-suave)} table.tabla .num{text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap} table.tabla .ejercicio{font-weight:600;min-width:190px} .obs{color:var(--texto3);font-size:12.5px;font-style:italic;max-width:210px} table.tabla th.acciones-fila,table.tabla td.acciones-fila{ position:sticky;right:0;white-space:nowrap; background:var(--superficie);box-shadow:-10px 0 14px -10px rgba(0,0,0,.35); } table.tabla th.acciones-fila{background:var(--superficie2)} table.tabla tbody tr:hover td.acciones-fila{background:var(--superficie2)} .registros-bloque{padding:0 16px} .registros-bloque:empty{display:none} /* --------------------------------- Bloque ------------------------------- */ .bloque{ background:var(--superficie);border:1px solid var(--borde); border-radius:var(--r);margin-bottom:16px;overflow:hidden;box-shadow:var(--sombra); } .bloque-cab{ display:flex;align-items:center;gap:12px;padding:14px 16px; background:var(--carbon);color:#fff;flex-wrap:wrap; } .bloque-tipo{ display:inline-flex;align-items:center;gap:6px;background:var(--azul);color:var(--sobre-acento); padding:4px 13px;border-radius:var(--pill); font-family:var(--titulo);font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:1.4px; } .bloque-nombre{font-family:var(--titulo);font-weight:600;font-size:17px;text-transform:uppercase;letter-spacing:.5px} .bloque-datos{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-left:auto} .dato{ font-family:var(--titulo);font-size:11px;color:#c9d0d7;background:var(--carbon2); border:1px solid #3d4145;padding:3px 11px;border-radius:var(--pill); text-transform:uppercase;letter-spacing:.9px; } .bloque-cuerpo{padding:16px} .bloque-pie{padding:12px 16px;border-top:1px solid var(--borde);display:flex;gap:8px;flex-wrap:wrap;background:var(--superficie2)} .nota-bloque{ padding:11px 16px;background:var(--azul-suave); border-top:1px solid var(--borde);font-size:13px;color:var(--texto2); } .nota-bloque b{color:var(--azul);font-family:var(--titulo);text-transform:uppercase;letter-spacing:.6px;font-weight:600} /* ------------------------- Panel de registro ---------------------------- */ .registro{ background:var(--superficie);border:2px solid var(--azul); border-radius:var(--r);padding:18px;margin:14px 0 18px;box-shadow:var(--sombra); } .registro-cab{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap} .registro-cab h4{font-size:19px} .conmutador{display:inline-flex;background:var(--superficie2);border:1.5px solid var(--borde);border-radius:var(--pill);padding:3px} .conmutador button{ background:transparent;border:none;padding:7px 18px;border-radius:var(--pill); cursor:pointer;font-family:var(--titulo);font-size:12px;font-weight:600; text-transform:uppercase;letter-spacing:1.2px;color:var(--texto2);transition:.16s; } .conmutador button.activo{background:var(--azul);color:var(--sobre-acento)} .discos{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0} .disco{ display:flex;flex-direction:column;align-items:center;gap:4px; background:var(--superficie2);border:1.5px solid var(--borde);border-radius:14px;padding:8px 10px;min-width:70px; transition:.15s; } .disco b{font-family:var(--titulo);font-size:13px;font-weight:600;letter-spacing:.5px} .disco .contador{display:flex;align-items:center;gap:7px} .disco .contador button{ width:26px;height:26px;border-radius:8px;border:1.5px solid var(--borde2); background:var(--superficie);cursor:pointer;font-weight:700;line-height:1;color:var(--texto2); } .disco .contador button:hover{border-color:var(--azul);color:var(--azul)} .disco .contador span{min-width:16px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums} .disco.activo{border-color:var(--azul);background:var(--azul-suave)} .disco.activo b{color:var(--azul)} .total-peso{ display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; background:var(--carbon);color:#fff; border-radius:var(--r-s);padding:14px 16px;margin:12px 0; } .total-peso .valor{ font-family:var(--titulo);font-size:34px;font-weight:700;color:var(--azul); font-variant-numeric:tabular-nums;letter-spacing:-.5px;white-space:nowrap;line-height:1; } .total-peso .etiqueta{ font-family:var(--titulo);font-size:10.5px;text-transform:uppercase; letter-spacing:1.8px;color:#8b939b;font-weight:500;display:block;margin-bottom:4px; } .total-peso .detalle{margin-left:auto;font-size:12px;color:#c9d0d7;text-align:right} .total-peso input{background:var(--carbon2);border-color:#3d4145;color:#fff} @media(max-width:560px){ .total-peso .detalle{margin-left:0;width:100%;text-align:left} .disco{min-width:0;flex:1 1 92px} } .series-lista{display:flex;flex-direction:column;gap:8px;max-width:660px} .serie{ display:grid;grid-template-columns:38px 1fr 1fr 78px 46px;gap:8px;align-items:center; background:var(--superficie2);border:1.5px solid var(--borde);border-radius:14px;padding:8px; } .serie.hecha{border-color:var(--azul);background:var(--azul-suave)} .serie .n{ width:32px;height:32px;border-radius:9px;background:var(--superficie3); display:grid;place-items:center;font-family:var(--titulo);font-weight:600;font-size:13px;color:var(--texto2); } .serie.hecha .n{background:var(--ok);color:#fff} .serie input{min-height:42px;padding:7px 8px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;background:var(--superficie)} .serie .chk{ width:40px;height:40px;border-radius:11px;border:1.5px solid var(--borde2);background:var(--superficie); cursor:pointer;display:grid;place-items:center;font-size:16px;color:var(--texto3); } .serie.hecha .chk{background:var(--ok);border-color:var(--ok);color:#fff} .encabezado-series{display:grid;grid-template-columns:38px 1fr 1fr 78px 46px;gap:8px;padding:0 8px;margin-bottom:6px;max-width:660px} .encabezado-series span{ font-family:var(--titulo);font-size:10px;text-transform:uppercase;letter-spacing:1.3px; color:var(--texto3);font-weight:600;text-align:center; } .encabezado-series span:first-child{text-align:left} .resumen-serie{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--borde)} .metrica{display:flex;flex-direction:column} .metrica b{font-family:var(--titulo);font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1} .metrica span{ font-family:var(--titulo);font-size:10px;text-transform:uppercase;letter-spacing:1.3px; color:var(--texto3);font-weight:500;margin-top:3px; } .metrica.destacada b{color:var(--azul)} /* ---------------------------- Volumen (semáforo) ------------------------ */ .volumen{display:flex;flex-direction:column;gap:9px} .vol-fila{display:grid;grid-template-columns:126px 1fr 50px;gap:12px;align-items:center;font-size:13px} .vol-barra{height:10px;background:var(--superficie3);border-radius:var(--pill);overflow:hidden} .vol-barra i{display:block;height:100%;border-radius:var(--pill);transition:width .35s} .vol-fila b{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--titulo);font-weight:600;font-size:16px} /* --------------------------------- Buscador ----------------------------- */ .buscador{position:relative;margin-bottom:14px} .buscador input{padding-left:42px;border-radius:var(--pill)} .buscador::before{content:'🔍';position:absolute;left:16px;top:50%;transform:translateY(-50%);opacity:.45;font-size:14px} .filtros{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:14px;-webkit-overflow-scrolling:touch} .filtros button{ background:var(--superficie);border:1.5px solid var(--borde2);color:var(--texto2); padding:7px 16px;border-radius:var(--pill);cursor:pointer;white-space:nowrap; font-family:var(--titulo);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:1px; } .filtros button:hover{border-color:var(--azul);color:var(--azul)} .filtros button.activo{background:var(--azul);border-color:var(--azul);color:var(--sobre-acento);font-weight:600} .lista-ej{display:flex;flex-direction:column;gap:8px} .item-ej{ display:flex;align-items:center;gap:12px;padding:12px 14px; background:var(--superficie);border:1.5px solid var(--borde);border-radius:14px;cursor:pointer;transition:.14s; } .item-ej:hover{border-color:var(--azul);box-shadow:var(--sombra)} .item-ej.seleccionado{border-color:var(--azul);background:var(--azul-suave)} .item-ej .info{flex:1;min-width:0} .item-ej .nom{font-family:var(--titulo);font-weight:500;font-size:15px;text-transform:uppercase;letter-spacing:.3px} .item-ej .sub{font-size:12px;color:var(--texto3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ------------------------------ Navegación ------------------------------ */ .nav{ position:fixed;bottom:0;left:0;right:0;z-index:50; display:flex;background:var(--carbon); border-top:3px solid var(--azul); padding-bottom:env(safe-area-inset-bottom); } .nav button{ flex:1;background:none;border:none;padding:10px 4px 11px;cursor:pointer; display:flex;flex-direction:column;align-items:center;gap:4px; color:#8b939b;font-family:var(--titulo);font-size:10.5px;font-weight:500; text-transform:uppercase;letter-spacing:1.2px;transition:.16s; } .nav button .ico{font-size:19px;line-height:1;filter:grayscale(1) opacity(.7)} .nav button:hover{color:#fff} .nav button.activo{color:var(--azul)} .nav button.activo .ico{filter:grayscale(1) brightness(1.9);opacity:1} /* --------------------------------- Modal -------------------------------- */ .modal{ position:fixed;inset:0;z-index:100;display:none; background:rgba(0,0,0,.72);backdrop-filter:blur(4px); align-items:flex-end;justify-content:center; } .modal.visible{display:flex} .modal-caja{ background:var(--superficie);border-radius:22px 22px 0 0;width:100%;max-width:560px;max-height:92vh; display:flex;flex-direction:column;box-shadow:var(--sombra-alta);animation:sube .24s ease; } @keyframes sube{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}} @media(min-width:640px){ .modal{align-items:center} .modal-caja{border-radius:22px} } .modal-cab{display:flex;align-items:center;padding:16px 20px;background:var(--carbon);border-radius:22px 22px 0 0} .modal-cab h3{font-size:19px;color:#fff} .modal-cab button{margin-left:auto;background:none;border:none;color:#8b939b;font-size:24px;cursor:pointer;line-height:1} .modal-cab button:hover{color:#fff} .modal-cuerpo{padding:20px;overflow-y:auto;flex:1} .modal-pie{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--borde);flex-wrap:wrap;background:var(--superficie2);border-radius:0 0 22px 22px} .parrafo{color:var(--texto2);line-height:1.65} /* --------------------------------- Avisos ------------------------------- */ #avisos{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:9px;width:calc(100% - 32px);max-width:440px} .aviso{ background:var(--carbon);color:#fff;border-left:4px solid var(--ok); padding:13px 17px;border-radius:12px;box-shadow:var(--sombra-alta); font-size:13.5px;font-weight:500;animation:sube .22s ease; } .aviso.error{border-left-color:var(--peligro)} .aviso.info{border-left-color:var(--azul)} .aviso.sale{opacity:0;transform:translateY(-10px);transition:.3s} /* --------------------------------- Varios ------------------------------- */ .sep{height:1px;background:var(--borde);margin:16px 0} .pista{font-size:13px;color:var(--texto3);line-height:1.65} .pila{display:flex;gap:9px;flex-wrap:wrap;align-items:center} .derecha{margin-left:auto} .chip-fecha{ background:var(--superficie2);border:1px solid var(--borde);border-radius:var(--pill); padding:5px 14px;font-family:var(--titulo);font-size:11.5px;font-weight:500; text-transform:uppercase;letter-spacing:1px;color:var(--texto2); } .pr{color:var(--aviso);font-weight:700} /* Reserva: si alguien manda a imprimir con Ctrl+P sin pasar por el botón, al menos sale la pantalla limpia y en blanco y negro. */ @media print{ .nav,.cabecera,.ticker,.bloque-pie,.btn,.registro,.acciones-fila{display:none!important} body{background:#fff;color:#000;padding:0} .tarjeta,.bloque{border-color:#ccc;background:#fff;box-shadow:none;break-inside:avoid} .bloque-cab{background:#eee!important;color:#000!important} .bloque-nombre,.dato{color:#000!important} table.tabla th{background:#eee;color:#000} } /* ========================================================================== MARCA — logo y paletas ========================================================================== */ .marca-logo.con-imagen{ background:rgba(255,255,255,.07);border-radius:10px;overflow:hidden;padding:2px; } .marca-logo img{width:100%;height:100%;object-fit:contain;display:block} .logo-fila{display:flex;gap:16px;align-items:center;flex-wrap:wrap} .logo-vista{ width:96px;height:96px;flex:0 0 auto;border-radius:16px; background:var(--carbon);border:1.5px solid var(--borde); display:grid;place-items:center;overflow:hidden; } .logo-vista img{width:100%;height:100%;object-fit:contain} .logo-vista span{ font-family:var(--titulo);font-size:10px;text-transform:uppercase; letter-spacing:1.2px;color:#8b939b; } /* El selector de paletas se quitó: la marca es negra y dorada, sin alternativas. Sus estilos ya no hacen falta. */ .barra-comparar b{font-family:var(--titulo);text-transform:uppercase;letter-spacing:.8px;color:var(--azul)} .galeria{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))} .foto{ position:relative;background:var(--superficie);border:1.5px solid var(--borde); border-radius:16px;overflow:hidden;cursor:pointer;transition:.15s;box-shadow:var(--sombra); } .foto:hover{border-color:var(--azul);transform:translateY(-2px)} .foto.elegida{border-color:var(--azul);border-width:3px} .foto.elegida::after{ content:'✓';position:absolute;top:10px;left:10px;width:26px;height:26px;border-radius:50%; background:var(--azul);color:var(--sobre-acento);display:grid;place-items:center;font-weight:700;font-size:14px; } .foto-img{aspect-ratio:3/4;background:var(--superficie3);display:grid;place-items:center;overflow:hidden} .foto-img img{width:100%;height:100%;object-fit:cover;display:block} .foto-img .cargando{color:var(--texto3);font-size:12px} .foto figcaption{padding:10px 12px;display:flex;flex-direction:column;gap:2px} .foto figcaption b{font-family:var(--titulo);font-size:13px;letter-spacing:.4px;text-transform:uppercase} .foto figcaption span{font-size:11.5px;color:var(--texto3)} .foto figcaption .nota{font-style:italic} .foto .quitar{ position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%; background:rgba(0,0,0,.55);color:#fff;border:none;cursor:pointer;font-size:17px;line-height:1; opacity:0;transition:.15s; } .foto:hover .quitar{opacity:1} .comparador{display:grid;gap:12px;grid-template-columns:1fr 1fr} .comparador figure{background:var(--superficie2);border-radius:14px;overflow:hidden;border:1px solid var(--borde)} .comparador img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover} .comparador figcaption{padding:10px 12px;display:flex;flex-direction:column;gap:2px} .comparador figcaption b{font-family:var(--titulo);font-size:13px;text-transform:uppercase;letter-spacing:.5px} .comparador figcaption span{font-size:11.5px;color:var(--texto3)} /* ========================================================================== FASE 2 — pestañas, gráficas, récords, volumen y temporizador ========================================================================== */ .pestanas{ display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch; margin:0 calc(var(--pad-lat) * -1) 16px; padding:0 var(--pad-lat) 4px; scrollbar-width:none; } .pestanas::-webkit-scrollbar{display:none} /* Si alguna vez va dentro de una tarjeta, no debe salirse de ella */ .tarjeta .pestanas{margin-left:0;margin-right:0;padding-left:0;padding-right:0} .pestanas button{ background:var(--superficie);border:1.5px solid var(--borde2);color:var(--texto2); padding:9px 18px;border-radius:var(--pill);cursor:pointer;white-space:nowrap; font-family:var(--titulo);font-size:12.5px;font-weight:500;text-transform:uppercase;letter-spacing:1px; transition:.15s;min-height:40px; } .pestanas button:hover{border-color:var(--azul);color:var(--azul)} .pestanas button.activa{background:var(--azul);border-color:var(--azul);color:var(--sobre-acento);font-weight:600} /* --------------------------------- Gráfica ------------------------------ */ .grafica-cab{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:10px} .grafica-etq{ display:block;font-family:var(--titulo);font-size:10.5px;text-transform:uppercase; letter-spacing:1.4px;color:var(--texto3);font-weight:500; } .grafica-valor{font-family:var(--titulo);font-size:30px;font-weight:700;line-height:1.1;color:var(--azul)} .grafica-valor small{font-size:14px;color:var(--texto3);font-weight:500} .grafica-delta{ margin-left:auto;text-align:right;font-family:var(--titulo);font-size:15px;font-weight:600; letter-spacing:.4px; } .grafica-delta.sube{color:var(--ok)} .grafica-delta.baja{color:var(--peligro)} .grafica-delta small{display:block;font-family:var(--cuerpo);font-size:11.5px;font-weight:500;color:var(--texto3)} .grafica-envoltura{width:100%;overflow:hidden} svg.grafica{width:100%;height:auto;display:block;max-height:340px} svg.grafica .rejilla{stroke:var(--borde);stroke-width:1;stroke-dasharray:3 4} svg.grafica .area{fill:var(--azul-suave);stroke:none} svg.grafica .linea{fill:none;stroke:var(--azul);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round} svg.grafica .punto{fill:var(--superficie);stroke:var(--azul);stroke-width:2.5} svg.grafica .punto.record{fill:var(--aviso);stroke:var(--aviso)} svg.grafica .eje-y{fill:var(--texto3);font-size:12px;text-anchor:end;font-family:var(--cuerpo)} svg.grafica .eje-x{fill:var(--texto3);font-size:12px;font-family:var(--cuerpo)} svg.grafica .eje-x.fin{text-anchor:end} .grafica-vacia{ padding:34px 20px;text-align:center;color:var(--texto3); border:2px dashed var(--borde2);border-radius:var(--r-s);font-size:13.5px; } /* --------------------------------- Récords ------------------------------ */ .records{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))} .record-item{ background:var(--superficie2);border:1.5px solid var(--borde);border-radius:16px; padding:14px;cursor:pointer;transition:.15s; } .record-item:hover{border-color:var(--azul);transform:translateY(-2px)} .record-nom{font-family:var(--titulo);font-size:14px;text-transform:uppercase;letter-spacing:.4px;margin:8px 0 4px;line-height:1.2} .record-cifra{font-family:var(--titulo);font-size:26px;font-weight:700;color:var(--azul);line-height:1.1} .record-cifra small{font-size:15px;color:var(--texto2);font-weight:500} .record-pie{font-size:11.5px;color:var(--texto3);margin-top:5px} .record-pie b{color:var(--texto2)} /* ---------------------------- Volumen semanal --------------------------- */ .leyenda{display:inline-flex;align-items:center;gap:5px;margin-left:12px;font-size:11.5px} .leyenda i{display:inline-block;width:12px;height:8px;border-radius:3px} .vol-barra.con-marcas{position:relative} .vol-barra.con-marcas::before,.vol-barra.con-marcas::after{ content:'';position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--texto3);opacity:.5; } .vol-barra.con-marcas::before{left:var(--mev)} .vol-barra.con-marcas::after{left:var(--mrv)} /* -------------------------------- Temporizador -------------------------- */ .temporizador{ position:fixed;left:50%;transform:translateX(-50%); bottom:calc(var(--nav-alto) + env(safe-area-inset-bottom) + 12px); z-index:90;width:calc(100% - 28px);max-width:420px; background:var(--carbon);border-radius:16px;overflow:hidden; box-shadow:var(--sombra-alta);animation:sube .22s ease; } .temporizador.listo{animation:latido .6s ease infinite} @keyframes latido{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.02)}} .temp-barra{height:5px;background:rgba(255,255,255,.14)} .temp-barra i{display:block;height:100%;background:var(--azul);transition:width 1s linear} .temporizador.listo .temp-barra i{background:var(--ok)} .temp-cuerpo{display:flex;align-items:center;gap:14px;padding:12px 16px} .temp-info{display:flex;flex-direction:column;min-width:0;flex:1} .temp-etq{ font-family:var(--titulo);font-size:10.5px;text-transform:uppercase;letter-spacing:1.4px; color:#8b939b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .temp-reloj{font-family:var(--titulo);font-size:30px;font-weight:700;color:#fff;line-height:1.05;font-variant-numeric:tabular-nums} .temporizador.listo .temp-reloj{color:var(--ok)} .temp-botones{display:flex;gap:7px;flex:0 0 auto} .temp-botones button{ background:rgba(255,255,255,.1);border:none;color:#fff;border-radius:10px; padding:9px 12px;cursor:pointer;font-family:var(--titulo);font-size:12.5px;font-weight:600; letter-spacing:.6px;min-height:40px; } .temp-botones button:hover{background:rgba(255,255,255,.2)} .temp-botones .cerrar{background:transparent;color:#8b939b;padding:9px 10px} @media print{ .temporizador,.pestanas{display:none!important} } /* ------------------------- Logotipo vectorial --------------------------- */ .marca.solo-logo .marca-texto{display:none} .marca-logo.logotipo{ width:auto;height:44px;background:transparent;padding:0;border-radius:0; display:flex;align-items:center;flex:0 1 auto;min-width:0; } .marca-logo.logotipo svg{width:auto;height:44px;display:block} .logo-vista svg.logo-nene{width:100%;height:auto;padding:8px} /* `max-width:100%` con `object-fit:contain` es lo que hace que el logo se vea entero y más pequeño cuando la cabecera aprieta, en vez de quedar cortado. */ .logo-nene-img{ height:44px;width:auto;max-width:100%;display:block; object-fit:contain;object-position:left center; } .logo-vista .logo-nene-img{height:auto;width:100%;padding:10px} /* En pantallas angostas la fila de series se apretaba y recortaba pesos como "82,5". Se ajustan columnas, tipografía y relleno para que quepa completo. */ @media(max-width:430px){ .serie,.encabezado-series{grid-template-columns:30px 1fr 1fr 54px 40px;gap:6px} .serie{padding:7px 6px} .serie input{font-size:16px;padding:6px 2px;min-height:40px} .serie .n{width:26px;height:26px;border-radius:8px;font-size:12px} .serie .chk{width:36px;height:36px} .encabezado-series{padding:0 6px} .encabezado-series span{font-size:9.5px;letter-spacing:.8px} } /* ========================================================================== ACCESO — pantalla de entrada, estado de guardado y modo cliente ========================================================================== */ .acceso{ position:fixed;inset:0;z-index:300;display:none; align-items:center;justify-content:center;padding:24px; background:var(--carbon);overflow-y:auto; } body.con-acceso{overflow:hidden} .acceso-caja{ width:100%;max-width:390px;background:var(--superficie); border:1px solid var(--borde);border-radius:22px;padding:28px 24px 24px; box-shadow:var(--sombra-alta);text-align:left; } .acceso-logo{display:block;width:150px;height:auto;margin:0 auto 22px} .acceso-caja h1{font-size:24px;margin-bottom:6px;text-align:center} .acceso-sub{ font-size:13.5px;color:var(--texto3);line-height:1.55; margin-bottom:20px;text-align:center; } .acceso-error{ display:none;margin-top:14px;padding:11px 14px;border-radius:12px; background:rgba(224,57,47,.12);border:1px solid var(--peligro); color:var(--peligro);font-size:13.5px;font-weight:600; } .btn.ancho{width:100%;margin-top:6px} .estado-nube{ font-family:var(--titulo);font-size:10.5px;text-transform:uppercase; letter-spacing:1.1px;color:#8b939b;white-space:nowrap; } .estado-nube.error{color:var(--aviso)} .estado-nube.listo{color:var(--ok)} #aviso-conexion{ position:fixed;left:0;right:0;bottom:calc(var(--nav-alto) + env(safe-area-inset-bottom)); z-index:95;background:var(--aviso);color:#141414; padding:9px 16px;font-size:12.5px;font-weight:700; align-items:center;justify-content:center;gap:8px; } /* Lo que la clienta no debe ver ni poder tocar */ body.rol-cliente .solo-entrenador{display:none!important} /* Accesos de clientes */ .acceso-fila{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:12px 14px;background:var(--superficie2); border:1.5px solid var(--borde);border-radius:14px;margin-bottom:9px; } .acceso-fila.inactivo{opacity:.55} .acceso-fila .datos{flex:1;min-width:150px} .acceso-fila .usuario{font-family:var(--titulo);font-size:15px;letter-spacing:.4px} .acceso-fila .sub{font-size:11.5px;color:var(--texto3);margin-top:2px} .clave-nueva{ background:var(--carbon);border:2px dashed var(--azul);border-radius:14px; padding:18px;text-align:center;margin:14px 0; } .clave-nueva b{ display:block;font-family:var(--titulo);font-size:32px;letter-spacing:3px; color:var(--azul);margin:8px 0;user-select:all; } .clave-nueva span{font-size:12.5px;color:#c9d0d7} /* La cabecera en móvil se llenaba: el nombre del usuario se oculta y queda visible en la pantalla de Datos. */ @media(max-width:620px){ .estado-nube{font-size:9.5px;letter-spacing:.6px} .selector-cliente{max-width:38vw;font-size:16px;padding:7px 11px} } /* Flechas para reordenar ejercicios dentro del bloque */ .mover{display:inline-flex;gap:2px} .mover .btn.chico{padding:4px 7px;min-height:30px;font-size:13px} /* ========================================================================== PLAN — calendario por semanas y días ========================================================================== */ .semana{ background:var(--superficie);border:1px solid var(--borde); border-radius:var(--r);margin-bottom:14px;overflow:hidden;box-shadow:var(--sombra); } .semana-cab{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:12px 16px;background:var(--superficie2);border-bottom:1px solid var(--borde); } .semana-cab b{font-family:var(--titulo);font-size:15px;text-transform:uppercase;letter-spacing:1px} .dias{display:grid;gap:1px;background:var(--borde);grid-template-columns:1fr} @media(min-width:820px){.dias{grid-template-columns:repeat(7,1fr)}} .dia{ background:var(--superficie);padding:11px 13px;min-height:78px;cursor:pointer; display:flex;flex-direction:column;gap:3px;transition:.14s; } .dia:hover{background:var(--superficie2)} .dia-nombre{ font-family:var(--titulo);font-size:10.5px;text-transform:uppercase; letter-spacing:1.2px;color:var(--texto3); } .dia-nombre i{font-style:normal;opacity:.7} .dia b{font-size:13.5px;line-height:1.25;font-weight:600} .dia-meta{font-size:11px;color:var(--texto3);line-height:1.35} .dia-mas{font-size:22px;color:var(--texto3);opacity:.4;align-self:center;margin-top:6px} .dia.con-rutina{border-left:3px solid var(--azul)} .dia.con-rutina b{color:var(--azul)} .dia.descanso{border-left:3px solid var(--texto3);background:var(--superficie2)} .dia.descanso b{color:var(--texto2)} .dia.vacio{background:var(--superficie)} .dia.hoy{box-shadow:inset 0 0 0 2px var(--aviso)} body.rol-cliente .dia.vacio{cursor:default} body.rol-cliente .dia.vacio:hover{background:var(--superficie)} .miga{ display:inline-flex;align-items:center;gap:6px;cursor:pointer;margin-bottom:10px; font-family:var(--titulo);font-size:12px;text-transform:uppercase;letter-spacing:1px; color:var(--texto3); } .miga:hover{color:var(--azul)} .mini-dia{ display:inline-flex;align-items:center;gap:5px;cursor:pointer; background:var(--superficie2);border:1.5px solid var(--borde);border-radius:9px; padding:6px 10px;font-family:var(--titulo);font-size:11.5px;text-transform:uppercase; letter-spacing:.7px;min-width:62px; } .mini-dia input{width:auto;min-height:auto;margin:0} .mini-dia.origen{border-color:var(--azul);color:var(--azul);opacity:.6} /* ========================================================================== PERFIL CORPORAL — siluetas, índices y energía ========================================================================== */ .perfil{display:grid;gap:22px;grid-template-columns:1fr} @media(min-width:760px){.perfil{grid-template-columns:260px 1fr}} .perfil-silueta{position:relative;max-width:260px;margin:0 auto;width:100%} svg.silueta{width:100%;height:auto;display:block} svg.silueta .cuerpo{fill:var(--superficie3);stroke:var(--borde2);stroke-width:1.5} /* OJO: no usar la clase .punto aquí — la usa el separador de la franja superior */ .pto-medida{position:absolute;transform:translate(-50%,-50%);cursor:default} .pto-medida i{ display:block;width:11px;height:11px;border-radius:50%; background:var(--superficie);border:2px solid var(--borde2); } .pto-medida.con-valor i{background:var(--azul);border-color:var(--azul)} .pto-medida span{ position:absolute;top:50%;transform:translateY(-50%); white-space:nowrap;font-size:10.5px;color:var(--texto3); font-family:var(--titulo);text-transform:uppercase;letter-spacing:.7px; } .pto-medida.der span{left:16px} .pto-medida.izq span{right:16px;text-align:right} .pto-medida span b{display:block;font-size:13px;color:var(--texto);letter-spacing:0} .pto-medida.con-valor span b{color:var(--azul)} .indices{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)} .indice{ background:var(--superficie2);border:1px solid var(--borde); border-radius:12px;padding:11px 13px; } .indice span{ display:block;font-family:var(--titulo);font-size:10px;text-transform:uppercase; letter-spacing:1.1px;color:var(--texto3); } .indice b{display:block;font-family:var(--titulo);font-size:22px;margin-top:2px} .indice i{display:block;font-style:normal;font-size:11px;color:var(--texto3);margin-top:1px} .energia{margin:16px 0 10px;border-top:1px solid var(--borde);padding-top:14px} .energia-fila{ display:flex;justify-content:space-between;align-items:baseline; padding:7px 0;font-size:14px;color:var(--texto2); } .energia-fila b{font-family:var(--titulo);font-size:18px;color:var(--texto)} .energia-fila.destacada{border-top:1px solid var(--borde);margin-top:6px;padding-top:12px} .energia-fila.destacada b{font-size:26px;color:var(--azul)} .macros{display:flex;flex-direction:column;gap:12px;margin-top:14px} .macro-cab{display:flex;align-items:baseline;gap:8px;margin-bottom:5px;font-size:13px} .macro-cab b{font-family:var(--titulo);font-size:16px} .macro-cab i{margin-left:auto;font-style:normal;color:var(--texto3);font-size:12px} .rejilla-medidas{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-bottom:14px} @media(min-width:560px){.rejilla-medidas{grid-template-columns:repeat(3,1fr)}} /* ========================================================================== NUTRICIÓN — comidas, alimentos y el plato ========================================================================== */ .emoji-alimento{ width:38px;height:38px;flex:0 0 auto;border-radius:11px; display:grid;place-items:center;font-size:19px; } .objetivo-dia{margin-top:16px;display:flex;flex-direction:column;gap:9px} .obj-fila{display:grid;grid-template-columns:100px 1fr 108px;gap:10px;align-items:center;font-size:12.5px} .obj-nombre{ font-family:var(--titulo);font-size:11px;text-transform:uppercase; letter-spacing:.9px;color:var(--texto2); } .obj-fila b{text-align:right;font-family:var(--titulo);font-size:15px;font-variant-numeric:tabular-nums} .obj-fila b.fuera{color:var(--aviso)} .obj-fila b i{font-style:normal;font-size:11px;color:var(--texto3);font-family:var(--cuerpo)} .comida .comida-cab{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:10px} .comida-cab strong{display:block;font-family:var(--titulo);font-size:16px;letter-spacing:.4px} .comida-cab .pista{display:block;margin-top:2px} .alimentos-lista{display:flex;flex-direction:column;gap:7px;margin-top:6px} .alimento-fila{ display:flex;align-items:center;gap:10px;padding:8px 10px; background:var(--superficie2);border:1px solid var(--borde);border-radius:12px; } .alimento-fila .info{flex:1;min-width:0} .alimento-fila .nom{font-weight:600;font-size:13.5px} .alimento-fila .sub{font-size:11px;color:var(--texto3);margin-top:1px} .alimento-fila .gramos{ width:74px;min-height:38px;text-align:center;font-weight:700; font-variant-numeric:tabular-nums;padding:6px 4px; } .alimento-fila .unidad{font-size:11.5px;color:var(--texto3);margin-left:-6px} .alimento-fila .gramos-fijo{ font-family:var(--titulo);font-size:15px;font-variant-numeric:tabular-nums;color:var(--azul); } /* --------------------------------- El plato ---------------------------- */ .plato-envoltura{display:grid;place-items:center;margin-bottom:14px} svg.plato{width:100%;max-width:340px;height:auto;display:block} svg.plato .plato-base{fill:#f4f1ea;stroke:#d8d2c4;stroke-width:2} svg.plato .plato-aro{fill:none;stroke:#e6e0d2;stroke-width:1.5} svg.plato .plato-comida-borde{fill:none;stroke:rgba(0,0,0,.18);stroke-width:1.5} svg.plato .corte{fill:none;stroke:#f4f1ea;stroke-width:2.5;stroke-linejoin:round} svg.plato .porcion{cursor:default} svg.plato .plato-vacio{ fill:var(--texto3);font-size:13px;text-anchor:middle;font-family:var(--cuerpo); } svg.plato .montoncito{cursor:default} .plato-lista{display:flex;flex-direction:column;gap:6px;margin-bottom:14px} .plato-item{display:flex;align-items:center;gap:9px;font-size:13px} .plato-item b{font-weight:600;flex:1} .plato-item span:last-child{color:var(--texto3);font-size:12px} .punto-color{width:11px;height:11px;border-radius:50%;flex:0 0 auto} /* Fotos reales de alimentos */ .emoji-alimento.con-foto{background:var(--superficie3);overflow:hidden;padding:0} .emoji-alimento.con-foto img{width:100%;height:100%;object-fit:cover;display:block} .foto-alimento-fila{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px} .foto-alimento{ width:88px;height:88px;flex:0 0 auto;border-radius:50%;overflow:hidden; background:var(--superficie2);border:2px solid var(--borde2); display:grid;place-items:center;font-size:34px; } .foto-alimento img{width:100%;height:100%;object-fit:cover;display:block} /* Foto del plato servido */ .plato-foto{border-radius:16px;overflow:hidden;margin-bottom:14px;background:var(--superficie2)} .plato-foto img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover} .comida-foto{ border-radius:14px;overflow:hidden;margin-bottom:12px;cursor:pointer; background:var(--superficie2); } .comida-foto img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;transition:.2s} .comida-foto:hover img{transform:scale(1.02)} /* Editor de la página pública */ .foto-portada{ width:110px;height:140px;flex:0 0 auto;border-radius:14px;overflow:hidden; background:var(--superficie2);border:2px solid var(--borde2); display:grid;place-items:center;color:var(--texto3);font-size:12px; } .foto-portada img{width:100%;height:100%;object-fit:cover;display:block} /* Fotos principales de la portada: hasta cuatro, que pasan solas en el sitio. Van en rejilla porque en el teléfono caben dos por fila y en el computador las cuatro; el ancho mínimo de 126px es lo que necesita una miniatura vertical para que se distinga quién sale en ella. */ .portadas-editor{ display:grid;gap:10px;margin-bottom:4px; grid-template-columns:repeat(auto-fill,minmax(126px,1fr)); } .portada-slot{ display:flex;flex-direction:column;gap:6px;padding:8px; background:var(--superficie2);border:1px solid var(--borde);border-radius:14px; } .portada-slot .mini{ aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--superficie3); } .portada-slot .mini img{width:100%;height:100%;object-fit:cover;display:block} .portada-slot .orden{display:flex;align-items:center;justify-content:space-between;gap:4px} .portada-slot .orden span{font-family:var(--titulo);font-size:12px;color:var(--texto3)} .portada-slot .orden .btn{min-width:34px;padding:4px 6px} /* El hueco para agregar. Se estira solo hasta la altura de las demás; el mínimo es para cuando todavía no hay ninguna foto y está solo. */ .portada-slot.vacio{ align-items:center;justify-content:center;gap:4px;min-height:190px; border:2px dashed var(--borde2);cursor:pointer; color:var(--texto3);font-size:12px;font-family:inherit;text-align:center; } .portada-slot.vacio:hover{border-color:var(--azul);color:var(--azul)} .portada-slot.vacio .mas{font-size:26px;line-height:1} .trans-editor{display:flex;flex-direction:column;gap:9px} .trans-fila{ display:flex;align-items:center;gap:12px;padding:10px; background:var(--superficie2);border:1px solid var(--borde);border-radius:12px; } .trans-fila .info{flex:1;min-width:0} .trans-fila .nom{font-family:var(--titulo);font-size:14px;letter-spacing:.3px} .trans-fila .sub{font-size:11.5px;color:var(--texto3)} .trans-mini{display:flex;gap:3px;flex:0 0 auto} .trans-mini img,.trans-mini span{ width:38px;height:50px;border-radius:7px;object-fit:cover;display:grid;place-items:center; background:var(--superficie3);color:var(--texto3);font-size:8.5px;text-align:center; } .trans-subir{ height:150px;border-radius:12px;overflow:hidden;background:var(--superficie2); border:2px dashed var(--borde2);display:grid;place-items:center;color:var(--texto3);font-size:12px; } .trans-subir img{width:100%;height:100%;object-fit:cover} .trans-subir.alta{height:220px} /* En el teléfono es más natural tocar la foto que buscar el botón */ .trans-subir.tocable{cursor:pointer;text-align:center;padding:8px;line-height:1.4} .trans-subir.tocable:hover{border-color:var(--azul);color:var(--azul)} /* ========================================================================== AJUSTES PARA PANTALLAS ANGOSTAS La cabecera, la franja y las pestañas quedaban apretadas o cortadas en el celular. Aquí se les baja el tamaño y se deja que la franja use dos líneas en vez de cortarse. ========================================================================== */ @media(max-width:520px){ :root{--pad-lat:12px} .cabecera{padding:9px 12px;gap:8px} .marca-logo.logotipo{height:34px} .marca-logo.logotipo svg,.logo-nene-img{height:34px} .marca-logo{width:34px;height:34px} .marca-logo svg{width:24px;height:24px} .marca-texto b{font-size:15px} .marca-texto small{font-size:8px;letter-spacing:1.6px} .cabecera-der{gap:5px} .selector-cliente{max-width:38vw;min-width:64px;flex:0 1 auto;font-size:16px;padding:6px 10px;min-height:34px;letter-spacing:0} .btn.icono{width:32px;min-height:32px;font-size:13px} .estado-nube{display:none} /* La franja pasa a dos líneas: antes se cortaba a la derecha */ .ticker{ white-space:normal;text-align:center;line-height:1.5; font-size:10px;letter-spacing:1.2px;padding:8px 14px;overflow:visible; } .ticker .punto{margin:0 7px} .pestanas{gap:6px} .pestanas button{padding:7px 10px;font-size:11px;letter-spacing:.6px;min-height:36px} .titulo-vista h2{font-size:21px} .contenido{padding:14px var(--pad-lat) 20px} .tarjeta{padding:15px} } /* ========================================================================== MODO ENTRENAMIENTO — un bloque a la vez, pensado para usar de pie ========================================================================== */ body.entrenando{overflow:hidden} .entrenar{ position:fixed;inset:0;z-index:120;background:var(--fondo); display:flex;flex-direction:column; } .ent-cab{ display:flex;align-items:center;gap:12px;padding:12px 16px; background:var(--carbon);border-bottom:1px solid rgba(255,255,255,.08);flex:0 0 auto; } .ent-reloj{ font-family:var(--titulo);font-size:19px;font-weight:600;color:var(--azul); font-variant-numeric:tabular-nums;min-width:56px; } .ent-titulo{ flex:1;text-align:center;color:#fff;font-family:var(--titulo);font-size:14px; text-transform:uppercase;letter-spacing:1px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap; } .ent-cerrar{ background:none;border:none;color:#8b939b;font-size:24px;cursor:pointer; line-height:1;padding:0 4px; } .ent-cerrar:hover{color:#fff} /* El índice de bloques: uno por bloque, numerado y tocable. Antes eran barritas de 6 píxeles sin número. Se podían tocar para saltar de bloque, pero nadie lo adivinaba: parecían una barra de progreso. Ahora se ven como lo que son —botones— y dicen cuál va, cuál está hecho y en cuál estoy parado. Sirve para adelantarse cuando la máquina del bloque 1 está ocupada y uno quiere hacer el 3 mientras se desocupa. */ .ent-pasos{ display:flex;gap:8px;padding:12px 16px 6px;background:var(--carbon); flex:0 0 auto;overflow-x:auto;-webkit-overflow-scrolling:touch; } .ent-pasos .paso{ flex:1 0 auto;min-width:46px;height:38px;border-radius:12px;cursor:pointer;padding:0 10px; background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.16); color:rgba(255,255,255,.72);font-family:var(--titulo);font-size:14px;font-weight:600; display:flex;align-items:center;justify-content:center;gap:5px;transition:.18s; } .ent-pasos .paso:hover{border-color:rgba(255,255,255,.4);color:#fff} .ent-pasos .paso .tic{font-size:12px} .ent-pasos .paso.hecho{background:var(--azul-suave);border-color:var(--ok);color:var(--ok)} .ent-pasos .paso.actual{background:var(--azul);border-color:var(--azul);color:var(--sobre-acento)} .ent-pasos .paso.actual.hecho{background:var(--azul);color:var(--sobre-acento)} /* El cierre de la sesión, al final del bloque */ .ent-finalizar{ display:block;width:100%;margin-top:10px;padding:16px;cursor:pointer; background:var(--azul);border:none;border-radius:var(--r); color:var(--sobre-acento);font-family:var(--titulo);font-size:15px;font-weight:600; text-transform:uppercase;letter-spacing:1.2px;transition:.15s; } .ent-finalizar[disabled]{ background:transparent;border:2px dashed var(--borde2);color:var(--texto3); cursor:not-allowed;letter-spacing:.6px;font-size:13px;text-transform:none; } .ent-cuerpo{ flex:1;overflow-y:auto;padding:22px 16px 24px;-webkit-overflow-scrolling:touch; } .ent-bloque{ text-align:center;font-size:20px;letter-spacing:.6px;margin-bottom:4px; } .ent-subtitulo{ text-align:center;color:var(--texto2);font-size:14px;margin-bottom:10px; } .ent-datos{ display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:14px; } .ent-datos span{ font-family:var(--titulo);font-size:11px;text-transform:uppercase;letter-spacing:1px; color:var(--texto3);background:var(--superficie2);border:1px solid var(--borde); padding:4px 11px;border-radius:999px; } .ent-datos .destacado{color:var(--azul);border-color:var(--azul)} .ent-nota{ background:var(--azul-suave);border-radius:12px;padding:11px 14px; font-size:13px;color:var(--texto2);margin-bottom:16px; } .ent-ejercicio{ background:var(--superficie);border:1px solid var(--borde); border-radius:var(--r);padding:14px;margin-bottom:14px;box-shadow:var(--sombra); } .ent-ej-cab{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px} .ent-ej-cab h3{ flex:1;font-size:16px;line-height:1.25;letter-spacing:.3px; } .ent-ej-cab h3 small{font-size:11px;color:var(--texto3);font-weight:400} .ent-mas{ background:none;border:none;color:var(--texto3);font-size:20px;cursor:pointer; line-height:1;padding:0 4px;flex:0 0 auto; } .ent-mas:hover{color:var(--azul)} .ent-ej-cuerpo{display:flex;gap:12px;align-items:flex-start} .ent-foto{ width:88px;flex:0 0 auto;border-radius:12px;overflow:hidden; background:var(--superficie2);display:grid;place-items:center; aspect-ratio:3/4;padding:6px;text-align:center; } .ent-foto img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block} .ent-series{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0} /* Encabezado y filas comparten la misma rejilla para que todo quede alineado. Sin los rótulos, nadie sabía si el primer campo eran kilos o repeticiones. */ .ent-series-cab,.ent-serie{ display:grid;grid-template-columns:34px 1fr 1fr 46px;gap:7px;align-items:center; } .ent-series-cab:has(~ .ent-serie .rir),.ent-serie:has(.rir){ grid-template-columns:34px 1fr 1fr 52px 46px; } .ent-series-cab{margin-bottom:2px} .ent-series-cab span{ font-family:var(--titulo);font-size:9.5px;text-transform:uppercase; letter-spacing:1px;color:var(--texto3);text-align:center;line-height:1.2; } .ent-series-cab .ent-n{text-align:left} .ent-n{ font-family:var(--titulo);font-size:12px;color:var(--texto3); text-align:center;font-variant-numeric:tabular-nums; } .ent-serie.hecha .ent-n{color:var(--ok)} .ent-serie input{ min-height:44px;padding:8px 6px;text-align:center;font-weight:700;font-size:16px; font-variant-numeric:tabular-nums;background:var(--superficie2);border-radius:11px; } .ent-serie.hecha input{background:var(--azul-suave);border-color:var(--azul)} .ent-chk{ width:46px;height:44px;border-radius:11px;cursor:pointer;font-size:17px; background:var(--superficie2);border:1.5px solid var(--borde2);color:var(--texto3); display:grid;place-items:center;transition:.14s; } .ent-serie.hecha .ent-chk{background:var(--ok);border-color:var(--ok);color:#fff} .ent-completar{ display:block;width:100%;margin-top:6px;padding:15px;cursor:pointer; background:transparent;border:2px dashed var(--borde2);border-radius:var(--r); color:var(--texto2);font-family:var(--titulo);font-size:14px; text-transform:uppercase;letter-spacing:1.2px;transition:.15s; } .ent-completar:hover{border-color:var(--azul);color:var(--azul)} .ent-pie{ display:flex;align-items:center;gap:12px;padding:12px 16px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); background:var(--carbon);border-top:1px solid rgba(255,255,255,.08);flex:0 0 auto; } .ent-pie .btn{flex:1} .ent-cuenta{ font-family:var(--titulo);font-size:12px;color:#8b939b; text-transform:uppercase;letter-spacing:1.2px;white-space:nowrap; } /* El temporizador de descanso se sube para no chocar con la barra de abajo */ body.entrenando .temporizador{bottom:88px;z-index:130} body.entrenando .nav{display:none} /* Fotos de ejercicios */ .foto-ejercicio{ width:96px;height:128px;flex:0 0 auto;border-radius:14px;overflow:hidden; background:var(--superficie2);border:2px solid var(--borde2); display:grid;place-items:center;color:var(--texto3);font-size:11px;text-align:center; } .foto-ejercicio img{width:100%;height:100%;object-fit:cover;display:block} .mini-ejercicio{ width:44px;height:44px;flex:0 0 auto;border-radius:10px;overflow:hidden; background:var(--superficie3); } .mini-ejercicio img{width:100%;height:100%;object-fit:cover;display:block} .mini-ejercicio.tocable{cursor:zoom-in} /* Hueco de foto en la rutina: se toca y se ponen las dos */ .mini-ejercicio.sin-foto{ display:grid;place-items:center;cursor:pointer;font-size:17px; border:1.5px dashed var(--borde2);background:transparent; } .mini-ejercicio.sin-foto:hover{border-color:var(--azul)} /* ========================================================================== EJERCICIOS DEL BLOQUE — tabla en pantalla ancha, tarjetas en el celular La tabla obligaba a desplazarse de lado en el teléfono y dejaba la mitad de los datos escondidos. Con tarjetas se ve todo de una. ========================================================================== */ .items-tarjetas{display:none;flex-direction:column;gap:9px;padding:12px 13px} @media(max-width:820px){ .bloque .tabla-envoltura{display:none} .items-tarjetas{display:flex} } .item-tarjeta{ display:flex;align-items:flex-start;gap:11px;flex-wrap:wrap; background:var(--superficie2);border:1px solid var(--borde); border-radius:14px;padding:11px 12px; } .item-tarjeta .it-num{ width:24px;height:24px;flex:0 0 auto;border-radius:7px; background:var(--superficie3);display:grid;place-items:center; font-family:var(--titulo);font-size:12px;color:var(--texto3); } .item-tarjeta .mini-ejercicio{width:52px;height:52px;border-radius:10px} .item-tarjeta .it-info{flex:1;min-width:0} .item-tarjeta .it-info > b{ display:block;font-size:14.5px;line-height:1.3;letter-spacing:.2px;margin-bottom:6px; } .item-tarjeta .it-info > b small{font-size:11px;color:var(--texto3);font-weight:400} .it-datos{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .it-datos > span:not(.etq){ font-family:var(--titulo);font-size:11px;text-transform:uppercase;letter-spacing:.8px; color:var(--texto3);background:var(--superficie3);padding:2px 8px;border-radius:999px; } .it-obs{font-size:12px;color:var(--texto3);font-style:italic;margin-top:6px;line-height:1.45} /* En el teléfono los botones bajan a su propia línea: así el nombre del ejercicio dispone de todo el ancho y no se parte en tres renglones. */ .it-acciones{ display:flex;align-items:center;gap:6px;flex:1 1 100%; justify-content:flex-end;margin-top:2px; } .it-acciones .solo-entrenador{display:flex;gap:2px;margin-right:auto;order:-1} @media(min-width:560px){ .it-acciones{flex:0 0 auto;flex-direction:column;align-items:flex-end;margin-top:0} .it-acciones .solo-entrenador{margin-right:0;order:0} } /* El panel de registro, dentro de las tarjetas, a lo ancho */ @media(max-width:820px){ .registros-bloque{padding:0 13px 4px} .registro{padding:14px} } /* Objetivo del ejercicio, junto al nombre, en el modo entrenamiento */ .ent-ej-titulo{flex:1;min-width:0} .ent-objetivo{ font-family:var(--titulo);font-size:12.5px;letter-spacing:.6px; color:var(--texto2);margin-top:3px;text-transform:uppercase; } .ent-objetivo b{color:var(--azul);font-weight:600} .ent-foto{position:relative;cursor:pointer} .ent-play{ position:absolute;inset:auto 6px 6px auto;width:24px;height:24px;border-radius:50%; background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;font-size:10px; } .demo{width:100%;border-radius:14px;margin-bottom:14px;display:block;background:#000} /* --------------- Las dos fases del movimiento: inicio y final ----------- */ .ent-fases{ width:96px;flex:0 0 auto;display:flex;flex-direction:column;gap:5px; cursor:pointer;position:relative; } .ent-fases figure{margin:0;position:relative;border-radius:10px;overflow:hidden;background:var(--superficie2)} .ent-fases img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .ent-fases .vacia{display:block;width:100%;aspect-ratio:4/3;background:var(--superficie3)} .ent-fases figcaption{ position:absolute;left:0;right:0;bottom:0;padding:2px 5px; background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff; font-family:var(--titulo);font-size:8.5px;text-transform:uppercase;letter-spacing:1px; } .ent-sin-foto{ width:100%;aspect-ratio:3/4;border-radius:10px;background:var(--superficie2); border:1.5px dashed var(--borde2);display:grid;place-items:center;text-align:center; } .ent-sin-foto span{ font-family:var(--titulo);font-size:10px;text-transform:uppercase; letter-spacing:1px;color:var(--texto3);line-height:1.3; } .fases-grande{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px} .fases-grande figure{margin:0;border-radius:14px;overflow:hidden;background:var(--superficie2);position:relative} .fases-grande img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block} .fases-grande .vacia{display:block;width:100%;aspect-ratio:3/4;background:var(--superficie3)} .fases-grande figcaption{ position:absolute;left:0;right:0;bottom:0;padding:6px 9px; background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff; font-family:var(--titulo);font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px; } .fases-editor{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px} /* ========================================================================== LA HOJA — lo que sale impreso o guardado en PDF -------------------------------------------------------------------------- Vive escondida en #hoja-impresion y solo aparece mientras se imprime. Está pensada en milímetros y en negro sobre blanco: el color de acento del entrenador se conserva, todo lo demás se apaga para no gastar tinta. ========================================================================== */ #hoja-impresion{display:none} body.imprimiendo > .cabecera, body.imprimiendo > .contenido, body.imprimiendo > .nav, body.imprimiendo > .ticker, body.imprimiendo > .modal, body.imprimiendo > #avisos, body.imprimiendo > #aviso-conexion, body.imprimiendo > .temporizador{display:none!important} body.imprimiendo > #hoja-impresion{ display:block;position:fixed;inset:0;z-index:9999;overflow:auto; background:#fff;color:#111; } #hoja-impresion, #hoja-impresion *{ -webkit-print-color-adjust:exact;print-color-adjust:exact; } .h-pagina{ font-family:var(--cuerpo,'Montserrat',system-ui,sans-serif); font-size:9pt;line-height:1.42;color:#111;background:#fff; padding:8mm 10mm 0;break-after:page; } .h-pagina:last-child{break-after:auto} /* ------------------------------- Cabecera ------------------------------- */ .h-franja{ display:flex;align-items:center;gap:10mm; border-bottom:2.2pt solid var(--azul,#d9ae62); padding-bottom:2.5mm;margin-bottom:5mm; } .h-marca{display:flex;align-items:center;gap:3mm;min-width:0} .h-logo{width:14mm;height:14mm;object-fit:contain;flex:0 0 auto} .h-nombre b{ display:block;font-family:var(--titulo,'Oswald',sans-serif); font-size:16pt;font-weight:700;letter-spacing:.4pt;text-transform:uppercase;line-height:1; } .h-nombre b i{font-style:normal;color:var(--azul,#d9ae62)} .h-nombre small{ display:block;font-size:7.5pt;letter-spacing:1.4pt; text-transform:uppercase;color:#666;margin-top:1mm; } .h-para{margin-left:auto;text-align:right;min-width:0;max-width:70mm} .h-para b{ display:block;font-family:var(--titulo,'Oswald',sans-serif); font-size:12pt;font-weight:600;text-transform:uppercase;letter-spacing:.5pt;line-height:1.15; } .h-para small{display:block;font-size:8pt;color:#666;margin-top:.6mm} /* -------------------------- Título de la sesión ------------------------- */ .h-titulo{margin-bottom:3mm} .h-titulo h1{ font-family:var(--titulo,'Oswald',sans-serif); font-size:19pt;font-weight:700;letter-spacing:-.2pt;line-height:1.08;margin:0; } .h-sub{font-size:8.5pt;color:#666;margin:1mm 0 0;letter-spacing:.3pt} .h-dato{font-size:8.5pt;margin:0 0 1.5mm;color:#333} .h-aviso{ font-size:8.5pt;margin:0 0 3mm;padding:1.6mm 3mm; border-left:2.2pt solid #111;background:#f2f2f2;color:#111; } /* --------------------------------- Bloque -------------------------------- */ .h-bloque{margin:0 0 4.5mm;break-inside:avoid} .h-bloque-cab{ display:flex;align-items:baseline;gap:3mm;flex-wrap:wrap; background:var(--azul,#d9ae62);color:var(--sobre-acento,#141414); padding:1.6mm 3mm;border-radius:1.2mm 1.2mm 0 0; } .h-tipo{ font-family:var(--titulo,'Oswald',sans-serif);font-size:8pt;font-weight:600; text-transform:uppercase;letter-spacing:1.1pt;opacity:.85; } .h-bloque-nombre{ font-family:var(--titulo,'Oswald',sans-serif); font-size:11pt;font-weight:700;text-transform:uppercase;letter-spacing:.3pt; } .h-bloque-datos{margin-left:auto;font-size:8pt;opacity:.85} /* --------------------------------- Tabla --------------------------------- */ .h-tabla{width:100%;border-collapse:collapse;font-size:8.5pt} .h-tabla thead{display:table-header-group} .h-tabla th{ font-family:var(--titulo,'Oswald',sans-serif);font-size:7.5pt;font-weight:600; text-transform:uppercase;letter-spacing:.7pt;color:#444;text-align:left; background:#f0f0f0;padding:1.4mm 2mm;border-bottom:.6pt solid #bbb; } .h-tabla td{padding:1.6mm 2mm;border-bottom:.4pt solid #ddd;vertical-align:middle} .h-tabla tr{break-inside:avoid} .h-tabla .h-n{text-align:center;white-space:nowrap;width:1%} .h-tabla th.h-n{text-align:center} .h-foto{width:15mm;padding:1mm 1mm!important} .h-foto img{width:15mm;height:12mm;object-fit:cover;border-radius:1mm;display:block;filter:grayscale(1) contrast(1.05)} .h-ej b{font-weight:600} .h-ej i{font-style:normal;color:#777;font-size:7.5pt} .h-musculo{display:block;font-size:7.5pt;color:#777;letter-spacing:.3pt;text-transform:uppercase} .h-obs{display:block;font-size:7.5pt;color:#444;margin-top:.6mm;font-style:italic} /* Casillas en blanco para que la clienta anote lo que movió */ .h-anotar{width:40mm} .h-casilla{ display:inline-block;width:16mm;height:5.2mm; border:.5pt solid #bbb;border-radius:.8mm;margin:.5mm 1mm .5mm 0; } .h-nota{ font-size:8pt;color:#333;margin:1.5mm 0 0;padding:1.4mm 3mm; background:#f6f6f6;border-left:1.6pt solid #ccc; } .h-calendario td{font-size:7.5pt;text-align:center} .h-calendario th{text-align:center} .h-calendario td i{color:#888;font-style:normal} .h-volumen{break-inside:avoid} /* ---------------------------------- Pie ---------------------------------- */ .h-pie{ margin-top:5mm;padding-top:2mm;border-top:.6pt solid #ddd; font-size:7.5pt;color:#777;letter-spacing:.7pt;text-align:center; } @page{size:A4;margin:11mm 10mm} @media print{ body.imprimiendo{background:#fff;padding:0;margin:0} body.imprimiendo > #hoja-impresion{position:static;z-index:auto} .h-pagina{padding:0} } /* Casillas del cuadro "Imprimir o guardar en PDF" */ .op-imprimir{ display:flex;align-items:center;gap:10px;cursor:pointer; padding:10px 12px;margin-bottom:8px;border-radius:10px; background:var(--superficie2);border:1px solid var(--borde); } .op-imprimir:hover{border-color:var(--azul)} .op-imprimir input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--azul)} .op-imprimir span{font-size:13.5px;color:var(--texto2);line-height:1.4} /* ========================================================================== LA ÚLTIMA VEZ — con cuánto peso se hizo este mismo ejercicio la vez pasada -------------------------------------------------------------------------- Es la pregunta que se hace el entrenador al programar y la persona al levantar la barra. Va pegada al ejercicio en la rutina, en el modo entrenamiento y encima del campo donde se anota el peso. ========================================================================== */ .ultima-vez{ display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; margin-top:8px;padding:7px 11px;border-radius:10px; background:var(--azul-suave);border-left:3px solid var(--azul); } .ultima-vez .uv-etq{ font-family:var(--titulo);font-size:10px;font-weight:500;text-transform:uppercase; letter-spacing:1px;color:var(--texto3); } .ultima-vez .uv-peso{ font-family:var(--titulo);font-size:16px;font-weight:700;color:var(--azul); letter-spacing:.3px; } .ultima-vez .uv-series{ font-size:11.5px;color:var(--texto2);font-variant-numeric:tabular-nums; margin-left:auto;letter-spacing:.3px; } .ultima-vez.nueva{ background:var(--superficie2);border-left-color:var(--borde2); font-family:var(--titulo);font-size:10.5px;text-transform:uppercase; letter-spacing:1px;color:var(--texto3); } @media(max-width:520px){ .ultima-vez .uv-series{margin-left:0;flex:1 1 100%} } /* ========================================================================== MEMBRESÍAS Y REGISTRO — panel del entrenador ========================================================================== */ .enlace-registro{ background:var(--superficie2);border:1px dashed var(--borde2);border-radius:10px; padding:12px 14px;font-family:var(--titulo);font-size:13px;letter-spacing:.5px; color:var(--azul);word-break:break-all; } /* Estado de la mensualidad, bajo el nombre de cada persona */ .membresia{ display:inline-block;margin-top:5px;padding:3px 10px;border-radius:var(--pill); font-family:var(--titulo);font-size:10.5px;font-weight:500; text-transform:uppercase;letter-spacing:.9px; } .membresia.ok{background:var(--azul);color:var(--sobre-acento);font-weight:600} .membresia.urgente{ background:transparent;color:var(--azul); border:1.5px solid var(--azul);font-weight:600; } .membresia.vencida{ background:transparent;color:var(--texto3); border:1.5px dashed var(--borde2);text-decoration:line-through; } .membresia.espera{background:var(--superficie3);color:var(--texto3)} /* La ficha del formulario, tal como la llenó la persona */ .ficha h4{ font-family:var(--titulo);font-size:11px;font-weight:600;text-transform:uppercase; letter-spacing:1.4px;color:var(--azul);margin:18px 0 8px; padding-bottom:5px;border-bottom:1px solid var(--borde); } .ficha h4:first-child{margin-top:0} .ficha-linea{ display:flex;gap:12px;align-items:baseline; padding:6px 0;border-bottom:1px solid var(--borde); } .ficha-linea:last-child{border-bottom:none} .ficha-linea span{ flex:0 0 130px;font-family:var(--titulo);font-size:10.5px;text-transform:uppercase; letter-spacing:.9px;color:var(--texto3); } .ficha-linea b{flex:1;font-size:13.5px;font-weight:500;line-height:1.5;color:var(--texto)} @media(max-width:520px){ .ficha-linea{flex-direction:column;gap:2px} .ficha-linea span{flex:none} } /* Aviso de mensualidad por vencer, dentro de la app */ .aviso-membresia{ margin:0 0 16px;padding:12px 16px;border-radius:12px; background:var(--azul-suave);border-left:3px solid var(--azul); font-size:13.5px;line-height:1.5;color:var(--texto); } .aviso-membresia b{color:var(--aviso)} /* ========================================================================== EMOJI EN GRIS -------------------------------------------------------------------------- Los pinta el sistema operativo a todo color y son la única fuente de color que queda fuera del negro y el dorado. Se les quita la saturación allí donde van solos; los que van dentro de un texto llevan la clase .ico-mono. ========================================================================== */ .pestanas button, .item-tarjeta .it-num, .ico-mono{filter:grayscale(1)} .pestanas button.activa{filter:grayscale(1) brightness(1.05)} /* Distintivo del dueño de la plataforma en la lista de entrenadores */ .etq-dueno{ display:inline-block;margin-left:8px;padding:2px 9px;border-radius:var(--pill); background:var(--azul);color:var(--sobre-acento); font-family:var(--titulo);font-size:9.5px;font-weight:600; text-transform:uppercase;letter-spacing:1px;vertical-align:middle; } /* Una foto cuyo archivo ya no está: antes quedaba un cuadro vacío sin más y no había forma de saber si era un error o si estaba cargando. */ .foto-img.rota{ display:grid;place-items:center;background:var(--superficie2); border:1.5px dashed var(--borde2); } .foto-img.rota::after{ content:'La imagen ya no está — puedes eliminar esta ficha'; padding:14px;text-align:center;line-height:1.5; font-size:11.5px;color:var(--texto3); } /* ========================================================================== MENSUALIDADES POR COBRAR — aviso para el entrenador al entrar ========================================================================== */ .aviso-cobros{ margin:0 0 16px;padding:14px 16px;border-radius:14px; background:var(--superficie);border:1.5px solid var(--azul); } .cobros-cab{display:flex;align-items:center;gap:10px;margin-bottom:4px} .cobros-cab b{ font-family:var(--titulo);font-size:14px;text-transform:uppercase; letter-spacing:.6px;color:var(--azul); } .aviso-cobros .pista{margin-bottom:10px} .cobros-lista{display:flex;gap:8px;flex-wrap:wrap} .cobros-lista .cobro{ display:flex;flex-direction:column;align-items:flex-start;gap:2px; background:var(--superficie2);border:1px solid var(--borde2); border-radius:11px;padding:9px 13px;cursor:pointer;transition:.15s;text-align:left; } .cobros-lista .cobro:hover{border-color:var(--azul);background:var(--azul-suave)} .cobros-lista .cobro b{font-size:13.5px;font-weight:600;color:var(--texto)} .cobros-lista .cobro span{ font-family:var(--titulo);font-size:10.5px;text-transform:uppercase; letter-spacing:.9px;color:var(--texto3); } /* ========================================================================== MERCADO E INTERCAMBIOS ========================================================================== */ .merc-dias{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px} .merc-dia{ display:flex;align-items:center;gap:7px; background:var(--superficie2);border:1px solid var(--borde); border-radius:11px;padding:8px 11px; } .merc-dia > span{font-size:12.5px;color:var(--texto2);max-width:130px} .merc-dia input{width:56px;text-align:center;min-height:38px;padding:6px} .merc-dia small{ font-family:var(--titulo);font-size:10px;text-transform:uppercase; letter-spacing:.8px;color:var(--texto3); } .merc-alerta{color:var(--aviso) !important;font-weight:600} .merc-grupo{margin-bottom:16px} .merc-grupo h4{ font-family:var(--titulo);font-size:11px;font-weight:600;text-transform:uppercase; letter-spacing:1.3px;color:var(--azul); margin-bottom:6px;padding-bottom:5px;border-bottom:1px solid var(--borde); } .merc-fila,.int-fila{ display:flex;align-items:center;gap:10px; padding:8px 2px;border-bottom:1px solid var(--borde); } .merc-fila:last-child,.int-fila:last-child{border-bottom:none} .merc-emoji{font-size:17px;filter:grayscale(1);flex:0 0 auto} .merc-nombre{flex:1;font-size:13.5px;color:var(--texto);min-width:0} .merc-cant{ font-family:var(--titulo);font-size:14px;font-weight:700;color:var(--azul); white-space:nowrap; } .int-base{ display:flex;align-items:center;gap:11px; background:var(--azul-suave);border-left:3px solid var(--azul); border-radius:10px;padding:12px 14px; } .int-base b{display:block;font-size:15px;margin-bottom:2px} .int-base .pista{font-size:12px} .int-lista{max-height:44vh;overflow-y:auto} .int-macros{ font-family:var(--titulo);font-size:10px;letter-spacing:.7px; color:var(--texto3);white-space:nowrap; } @media(max-width:520px){ .int-macros{display:none} .merc-dia > span{max-width:90px;font-size:11.5px} } /* ========================================================================== EL VISOR — las fotos del ejercicio a pantalla completa -------------------------------------------------------------------------- En las miniaturas la foto se recorta (`cover`), que ahí está bien. Aquí se ajusta (`contain`) y se ve entera: es el sitio al que se llega justamente cuando no se sabe qué ejercicio toca, y una foto recortada no lo resuelve. Va por encima de los diálogos (100) y del modo entrenamiento (130), pero por debajo de los avisos (200), que tienen que seguir viéndose. ========================================================================== */ #visor{ position:fixed;inset:0;z-index:150;display:none; flex-direction:column;background:#000; padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom)); } #visor.visible{display:flex} body.con-visor{overflow:hidden} .visor-marco{ flex:1 1 auto;min-height:0;display:grid;place-items:center;overflow:hidden; } #visor-img{ max-width:100%;max-height:100%;object-fit:contain;display:block; border-radius:10px;cursor:zoom-in; } /* Ampliada: la foto pasa a su tamaño mayor y el marco se vuelve arrastrable */ #visor.ampliada .visor-marco{overflow:auto;place-items:start center;cursor:grab} #visor.ampliada #visor-img{ max-width:none;max-height:none;width:200%;height:auto; border-radius:0;cursor:zoom-out; } .visor-pie{ flex:0 0 auto;text-align:center;padding:12px 6px 4px;color:#fff; } .visor-pie b{ display:block;font-family:var(--titulo);font-size:15px; text-transform:uppercase;letter-spacing:2px;color:var(--azul); } .visor-pie span{display:block;font-size:13.5px;color:#e8e4db;margin-top:3px} .visor-pie small{display:block;font-size:11px;color:#8d8880;margin-top:7px} .visor-cerrar,.visor-ir{ position:absolute;z-index:2;background:rgba(0,0,0,.55);color:#fff; border:1px solid rgba(255,255,255,.18);border-radius:50%; width:44px;height:44px;font-size:26px;line-height:1;cursor:pointer; display:grid;place-items:center;padding:0; } .visor-cerrar{top:max(10px,env(safe-area-inset-top));right:10px;font-size:30px} .visor-ir{top:50%;transform:translateY(-50%);font-size:30px} .visor-ir.atras{left:10px} .visor-ir.adelante{right:10px} .visor-cerrar:hover,.visor-ir:hover{background:rgba(0,0,0,.85)} /* Las fotos de la ficha se abren en el visor: que se note que son tocables */ .fases-grande figure{cursor:zoom-in} .fases-grande figure:hover img{opacity:.86} .fases-grande .lupa{ position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%; background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;font-size:12px; } /* Hueco de foto que el entrenador puede llenar de un toque */ .fases-grande .poner{ display:grid;place-items:center;width:100%;aspect-ratio:3/4; background:var(--superficie2);border:1.5px dashed var(--borde2); color:var(--texto3);font-family:var(--titulo);font-size:11px; text-transform:uppercase;letter-spacing:1px;text-align:center;cursor:pointer; } .fases-grande .poner:hover{border-color:var(--azul);color:var(--azul)} /* ========================================================================== FOTOS QUE FALTAN — el aviso de la rutina y la marca de cada fila -------------------------------------------------------------------------- La rutina se arma en el escritorio y se entrena en el teléfono, sola, en el gimnasio. Si un ejercicio va sin fotos, allí ya no hay a quién preguntarle. Por eso el hueco se ve aquí, y se llena desde aquí. ========================================================================== */ .aviso-fotos{ border:1.5px solid var(--aviso);border-radius:16px; background:var(--azul-suave);padding:14px 16px;margin-bottom:14px; } .af-texto b{display:block;font-family:var(--titulo);font-size:14.5px; text-transform:uppercase;letter-spacing:.8px;color:var(--aviso)} .af-texto span{display:block;font-size:12.5px;color:var(--texto2);margin-top:4px;line-height:1.45} .af-lista{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px} .af-lista .btn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* La marca dentro de la fila del ejercicio */ .marca-foto{ display:inline-flex;align-items:center;gap:4px;vertical-align:middle; margin-left:7px;padding:1px 7px;border-radius:20px;cursor:pointer; font-size:10.5px;font-family:var(--titulo);text-transform:uppercase;letter-spacing:.7px; border:1px solid transparent;line-height:1.7; } .marca-foto.lista{background:var(--superficie3);color:var(--texto3);font-size:11px;padding:1px 6px} .marca-foto.lista:hover{color:var(--azul)} .marca-foto.falta{border-color:var(--aviso);color:var(--aviso);background:transparent} .marca-foto.falta:hover{background:var(--azul-suave)} /* ========================================================================== CÓMO VAS — la progresión de un ejercicio, semana a semana -------------------------------------------------------------------------- La pregunta de la semana 3 es "¿voy subiendo?". Se responde con lo que le pidieron al lado de lo que hizo, en el orden del plan, y no con una tabla de fechas sueltas. ========================================================================== */ .ultima-vez.tocable{cursor:pointer} .ultima-vez.tocable:hover{background:var(--superficie3)} .ultima-vez .uv-mas{ width:100%;font-family:var(--titulo);font-size:9.5px;text-transform:uppercase; letter-spacing:1px;color:var(--azul);margin-top:2px; } .marca-progreso{ display:inline-flex;align-items:center;gap:3px;vertical-align:middle; margin-left:5px;padding:1px 6px;border-radius:20px;cursor:pointer; font-size:11px;font-family:var(--titulo);letter-spacing:.5px; background:var(--superficie3);color:var(--texto3);line-height:1.7; } .marca-progreso:hover{color:var(--azul)} .pv-frase{ font-size:14px;line-height:1.55;color:var(--texto2); margin-bottom:14px;padding:11px 13px;border-radius:12px; background:var(--azul-suave);border-left:3px solid var(--azul); } .pv-frase b{color:var(--texto)} .pv-lista{display:flex;flex-direction:column;gap:8px;margin-top:14px} .pv-fila{ border:1px solid var(--borde);border-radius:12px;padding:10px 12px; background:var(--superficie); } .pv-fila.record{border-color:var(--azul)} .pv-cab{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .pv-cab b{ font-family:var(--titulo);font-size:13.5px;text-transform:uppercase; letter-spacing:.9px;color:var(--texto); } .pv-fecha{font-size:11px;color:var(--texto3)} .pv-cambio{ margin-left:auto;font-family:var(--titulo);font-size:11px; text-transform:uppercase;letter-spacing:.8px;padding:1px 8px;border-radius:20px; border:1px solid var(--borde2);color:var(--texto3); } .pv-cambio.sube{border-color:var(--azul);color:var(--azul)} .pv-cambio.baja{border-color:var(--borde2);color:var(--texto2)} .pv-obj{font-size:12px;color:var(--texto3);margin-top:6px} .pv-obj b{color:var(--texto2)} .pv-hizo{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:5px} .pv-etq{ font-family:var(--titulo);font-size:10px;text-transform:uppercase; letter-spacing:1px;color:var(--texto3); } .pv-series{ font-size:14px;color:var(--texto);font-variant-numeric:tabular-nums; letter-spacing:.4px; } .pv-pr{font-size:11px;color:var(--azul)} /* ========================================================================== La serie más floja del día -------------------------------------------------------------------------- Reemplaza a la copa 🏆 que salía antes y que no dejaba claro si señalaba la mejor o la peor. No es un regaño: es para ver de un vistazo dónde se cayó el rendimiento sin comparar los números uno por uno. ========================================================================== */ .serie .chk.peor, .ent-chk.peor{ background:rgba(239,68,68,.14) !important; border-color:rgba(239,68,68,.55) !important; color:#ef4444 !important; }