/* ===== base (mismo estilo de la versión anterior) ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #f1f5f9; color: #1f2937; padding: 16px; }
.wrap { max-width: 1180px; margin: 0 auto; }
.topbar { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.title-card { background: #1f2a44; color: #fff; border-radius: 12px; padding: 14px 20px; flex: 1 1 280px; }
.title-card h1 { font-size: 20px; font-weight: 700; }
.title-card p { font-size: 13px; opacity: .75; margin-top: 2px; }
.logout-link { color: #9cc3ff; }
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 99px; background: #22c55e; margin-right: 6px; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.goals-card { background: #fff; border-radius: 12px; padding: 14px 20px; flex: 2 1 420px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.goals-card h2 { font-size: 14px; margin-bottom: 8px; }
.goals-row { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: #4b5563; }
.goals-none { font-style: italic; color: #6b7280; }
.nogoals-note { font-size: 12.5px; font-style: italic; color: #6b7280; padding: 6px 0; }
.goals-row b { color: #111827; }
.date-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.date-row label { font-size: 14px; font-weight: 600; }
.date-row select { font-size: 15px; padding: 8px 12px; border-radius: 8px; border: 1px solid #d1d5db; background: #fff; }
/* Anillos de metas en FILA (Ronald, 2026-10-21): una sola fila en el
   flujo normal de la página — NO flotante, se desplaza con el scroll —
   con los 5 anillos pequeños lado a lado, al estilo visual del dock
   pero estáticos. Sustituye la pila de tarjetas grandes: la sección
   pasa de ~1.550 px a ~110 px de alto a 390 px. Cada anillo es un
   botón (flex 0 1 auto, mínimo = su círculo): la columna de
   «CARBOHIDRATOS» toma el ancho que su rótulo necesita sin cortarlo. */
.rings { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 2px; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: 12px 6px 10px; margin-bottom: 14px; }
/* Corrección reprueba (2026-10-24): columnas IGUALES de un quinto
   (flex 1 1 0, min-width 0) y nombre más compacto. Antes cada botón
   medía lo que su etiqueta — «CARBOHIDRATOS» hacía su botón de 91 px
   y su nombre quedaba a ~6 px de los vecinos en Chromium y pegado
   en iOS (su fuente es más ancha) — : las etiquetas se encimaban
   visualmente entre anillos. La fila sigue siendo única. */
.ring-mini { flex: 1 1 0; min-width: 0; background: none; border: 0; padding: 2px 0; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }
.ring-mini:focus-visible { outline: 2px solid #00aca1; outline-offset: 2px; border-radius: 10px; }
.ring-mini-svg { width: 60px; height: 60px; flex: none; }
.ring-mini-name { font-size: 8.5px; font-weight: 700; letter-spacing: -.2px; color: #1f2a44; white-space: nowrap; }
.ring-mini-sub { font-size: 9px; color: #6b7280; white-space: nowrap; }
/* Ventana flotante de detalle del anillo: mismo lenguaje que
   #pend-float (tarjeta blanca, radio 18, sombra suave), centrada,
   con fondo propio para el «tocar fuera» y cierre ✕ / Escape. */
.ring-detail-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 46; }
.ring-detail { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 47; width: min(430px, calc(100vw - 24px)); box-sizing: border-box; background: #fff; border: 1px solid rgba(15, 23, 42, .08); border-radius: 18px; box-shadow: 0 14px 34px rgba(15, 23, 42, .22); padding: 16px 18px; max-height: calc(100dvh - 48px); overflow-y: auto; text-align: center; }
@media (prefers-reduced-motion: no-preference) { .ring-detail { animation: ring-detail-in .18s ease-out; } }
@keyframes ring-detail-in { from { opacity: 0; } to { opacity: 1; } }
.ring-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ring-detail-head h2 { font-size: 15px; color: #1f2a44; letter-spacing: .4px; }
.ring-detail-head .pend-close { margin-left: 0; }
.ring-detail .ring-svg { width: 168px; height: 168px; }
.ring-contrib-title { font-size: 13px; color: #1f2a44; text-align: left; margin: 14px 0 2px; }
.ring-contrib-list { text-align: left; }
.ring-contrib { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid #eef1f4; font-size: 13px; }
.ring-contrib .rc-food { color: #374151; min-width: 0; }
.ring-contrib .rc-val { flex: none; font-weight: 700; color: #1f2a44; white-space: nowrap; }
.ring-contrib.total { border-top: 2px solid #e5e7eb; }
.ring-top-contrib { text-align: left; font-size: 13px; color: #1f2a44; background: #e6f7f4; border: 1px solid #bfe8df; border-radius: 10px; padding: 8px 10px; margin: 8px 0 2px; }
.ring-contrib.item { padding-left: 18px; font-size: 12.5px; border-top: 1px dashed #eef1f4; }
.ring-contrib.item .rc-food { color: #4b5563; }
.ring-detail-empty { text-align: left; font-size: 13px; color: #6b7280; padding: 8px 0 2px; }
.ring-svg { width: 150px; height: 150px; }
.ring-box { margin-top: 10px; border-radius: 8px; padding: 8px 6px; font-size: 12px; line-height: 1.45; }
.ring-box b { display: block; font-size: 13px; }
.ring-box.ok { background: #d9f2e3; color: #14532d; }
.ring-box.over { background: #fde8e8; color: #7f1d1d; }
.bottom { display: grid; grid-template-columns: 1.55fr 1fr; gap: 12px; }
.bottom > * { min-width: 0; }
@media (max-width: 900px) { .bottom { grid-template-columns: 1fr; } }
.panel { background: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.08); min-width: 0; }
.panel h2 { font-size: 14px; margin-bottom: 10px; color: #1f2a44; }
/* Fila del título de «Resumen vs. metas» con el botón manual a la
   DERECHA (Ronald, 2026-10-19 16:04: «a lado de meta alineados a
   la derecha»): flex con envoltura — si título y botón no caben
   en una línea, el botón baja a su propia línea y SIGUE alineado
   a la derecha (margin-left:auto). El título no lleva margen
   inferior dentro de la fila; lo pone la fila. */
.summary-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.summary-head h2 { margin-bottom: 0; }
table.detail { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 12.5px; }
table.detail th { background: #1f2a44; color: #fff; padding: 8px 6px; text-align: left; font-size: 11.5px; }
table.detail th.num, table.detail td.num { text-align: right; }
table.detail td { padding: 7px 6px; border-bottom: 1px solid #eef2f7; vertical-align: top; }
table.detail tr.total td { font-weight: 800; background: #f0fdf4; border-top: 2px solid #1f2a44; border-bottom: none; }
.del-btn { background: none; border: none; color: #d1d5db; cursor: pointer; font-size: 15px; padding: 2px 6px; }
.del-btn:hover { color: #dc2626; }
.meal-actions { white-space: nowrap; text-align: right; }
.rep-btn { background: none; border: 1px solid #e5e7eb; border-radius: 999px; color: #6b7280; cursor: pointer; font-size: 12px; font-weight: 600; padding: 3px 9px; margin-right: 2px; white-space: nowrap; }
.rep-btn:hover { color: #0f766e; border-color: #0f766e; }
.vsrow { display: grid; grid-template-columns: minmax(0,92px) minmax(0,62px) minmax(0,62px) minmax(0,1fr) minmax(0,44px); gap: 8px; align-items: center; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid #f1f5f9; }
.vsrow.head { font-weight: 700; color: #6b7280; font-size: 11.5px; border-bottom: 2px solid #e5e7eb; }
.bar-track { background: #e9ecef; border-radius: 99px; height: 12px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; }
.notes { margin-top: 12px; background: #eff6ff; border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.notes h2 { font-size: 13px; margin-bottom: 6px; }
.notes li { margin: 4px 0 4px 18px; }
.foot { text-align: center; color: #9ca3af; font-size: 11px; margin-top: 16px; }
.weight-section { background: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 14px; margin-top: 14px; }
.weight-section h2 { font-size: 14px; color: #1f2a44; margin-bottom: 10px; }
.h2-sub { font-weight: 400; color: #6b7280; font-size: 12px; }
.wstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
@media (max-width: 520px) { .wstats { grid-template-columns: 1fr; } }
.wstat { background: #f8fafc; border-radius: 10px; padding: 12px; text-align: center; }
.wstat .lbl { font-size: 11px; color: #6b7280; letter-spacing: .4px; }
.wstat .val { font-size: 24px; font-weight: 800; color: #1f2a44; margin-top: 4px; }
.wstat .val small { font-size: 13px; font-weight: 600; color: #6b7280; }
.wstat .delta { font-size: 12px; margin-top: 2px; font-weight: 700; }
.delta.down { color: #16a34a; } .delta.up { color: #d97706; } .delta.flat { color: #6b7280; }
.chart-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
.wempty { text-align: center; color: #6b7280; font-size: 13px; padding: 22px 10px; }
.wempty.compact { padding: 8px 10px; }
.spec-details { margin: 8px 0; }
.spec-details > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; padding: 4px 0; }
.spec-details .consent-check { margin-top: 6px; }
.loading { text-align: center; padding: 60px 20px; font-size: 15px; color: #6b7280; }
.error { background: #fde8e8; color: #7f1d1d; border-radius: 10px; padding: 14px 18px; font-size: 14px; margin-bottom: 14px; }

/* ===== auth ===== */
.auth-wrap { min-height: 92vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.auth-card { background: #fff; border-radius: 16px; padding: 32px 28px; width: 100%; max-width: 380px; box-shadow: 0 4px 24px rgba(0,0,0,.08); text-align: center; }
.auth-logo { font-size: 44px; margin-bottom: 8px; }
.auth-card h1 { font-size: 22px; color: #1f2a44; }
.auth-sub { font-size: 13px; color: #6b7280; margin: 4px 0 18px; }
.auth-card form { text-align: left; }
.auth-card label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 12px; color: #374151; }
.auth-card input { width: 100%; margin-top: 4px; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 15px; }
.auth-error { display: none; background: #fde8e8; color: #7f1d1d; border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
.auth-error.show { display: block; }
.field-hint { display: block; font-size: 11px; font-weight: 400; color: #94a3b8; margin-top: 4px; }
.forgot-link { display: block; text-align: right; font-size: 12px; color: #0d9488; text-decoration: none; margin: 2px 0 12px; }
.forgot-link:hover { text-decoration: underline; }

/* ===== language toggle ===== */
.auth-card { position: relative; }
.lang-toggle { display: inline-flex; border: 1px solid #d1d5db; border-radius: 999px; overflow: hidden; vertical-align: middle; background: #fff; }
.lang-toggle button { border: none; background: transparent; padding: 4px 10px; font-size: 11px; font-weight: 700; color: #6b7280; cursor: pointer; }
.lang-toggle button.active { background: #0d9488; color: #fff; }
#lang-toggle-auth { position: absolute; top: 12px; right: 12px; }

/* ===== buttons / forms / modal ===== */
.btn-primary { background: #0d9488; color: #fff; border: none; border-radius: 8px; padding: 11px 18px; font-size: 14px; font-weight: 700; cursor: pointer; }
.btn-primary:hover { background: #0f766e; }
.btn-ghost { background: #fff; color: #374151; border: 1px solid #d1d5db; border-radius: 8px; padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-ghost:hover { background: #f8fafc; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.import-label { cursor: pointer; }
.import-label input[type="file"] { display: block; max-width: 230px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.modal { background: #fff; border-radius: 14px; padding: 22px; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; }
.modal h2 { font-size: 17px; color: #1f2a44; margin-bottom: 14px; }
.modal label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 10px; color: #374151; }
.modal input, .modal select { width: 100%; margin-top: 4px; padding: 9px 11px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.frow3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .frow, .frow3 { grid-template-columns: 1fr; } }
/* Pie de modal: el par Cancelar/Guardar se justifica AL CENTRO
   como grupo (regla global de botones al centro, Ronald,
   2026-10-22); orden y separación entre ambos no cambian. */
.modal-foot { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1f2a44; color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 14px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 99; max-width: 90vw; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: #7f1d1d; }

/* ===== auth tabs ===== */
.auth-tabs { display: flex; gap: 8px; margin: 14px 0 4px; }
.auth-tab { flex: 1; background: #f1f5f9; border: none; border-radius: 8px; padding: 10px; font-size: 14px; font-weight: 700; color: #64748b; cursor: pointer; }
.auth-tab.active { background: #0d9488; color: #fff; }
.auth-hint { font-size: 12px; color: #94a3b8; text-align: center; margin-top: 10px; }

/* ===== meal photo ===== */
.photo-label input[type="file"] { display: block; margin-top: 6px; font-size: 13px; }
.photo-preview { max-width: 100%; max-height: 180px; border-radius: 10px; margin: 8px 0; border: 1px solid #e5e7eb; }

/* ===== progress section ===== */
.progress-section { background: #fff; border-radius: 14px; padding: 20px; margin-top: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.progress-section h2 { font-size: 17px; color: #1f2a44; margin-bottom: 6px; }
.progress-hint { font-size: 13px; color: #6b7280; margin-bottom: 14px; }
.progress-week { font-weight: 800; color: #0d9488; margin-bottom: 10px; }
.progress-next { font-size: 13px; font-weight: 600; color: #0d9488; margin-bottom: 10px; }
.progress-next:empty { display: none; }
.progress-uploads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px) { .progress-uploads { gap: 8px; } .progress-slot { padding: 8px; min-height: 120px; } .slot-img { max-height: 120px; } }
.progress-slot { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; border: 2px dashed #cbd5e1; border-radius: 12px; padding: 14px; min-height: 150px; background: #f8fafc; min-width: 0; }
.progress-slot:hover { border-color: #0d9488; background: #f0fdfa; }
.slot-title { font-weight: 700; font-size: 14px; color: #374151; margin-bottom: 8px; }
.slot-empty { color: #0d9488; font-weight: 600; font-size: 14px; cursor: pointer; text-align: center; }
.slot-img { width: 100%; max-width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px; cursor: zoom-in; }
.slot-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-top: 8px; }
.slot-link { background: none; border: none; padding: 0; font-family: inherit; font-size: 13px; font-weight: 600; color: #0d9488; cursor: pointer; }
.slot-link.danger { color: #dc2626; }
.progress-status { margin-top: 10px; font-size: 13px; color: #4b5563; }
.history-title { font-size: 15px; color: #1f2a44; margin: 18px 0 10px; }
.progress-history { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.hist-week { border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px; }
.hist-label { font-weight: 700; font-size: 13px; margin-bottom: 8px; color: #374151; }
.hist-imgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hist-imgs img { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; }
.hist-item { position: relative; min-width: 0; }
.hist-item img { cursor: zoom-in; display: block; }
.hist-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(17,24,39,.65); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; padding: 0; }

/* ===== admin section ===== */
.admin-section { background: #fffdf5; border: 1px solid #fde68a; border-radius: 14px; padding: 20px; margin-top: 18px; }
.admin-section h2 { font-size: 17px; color: #1f2a44; margin-bottom: 6px; }
.user-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid #e5e7eb; background: #fff; border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.user-row > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.user-row .muted { font-size: 12px; color: #6b7280; }
/* Fix layout ficha (2026-10-23): con flex-shrink:0 la fila de acciones
   nunca bajaba de su ancho de contenido (los 4 botones del plan =
   359 px) y desbordaba su tarjeta y el documento (411 px de ancho en
   un teléfono de 390), aunque tuviera flex-wrap: el wrap interno solo
   actúa si la caja puede estrecharse. Al permitir encoger (y acotar
   a min-width:0 / max-width:100%), los botones envuelven dentro de
   la tarjeta, como ya buscaba la corrección D4 de 2026-10-15. */
.user-actions { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 1; min-width: 0; max-width: 100%; }
.limits-actions { align-items: center; }
.limits-input { width: 84px; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; }
.limits-input:disabled { background: #f3f4f6; color: #9ca3af; }
.limits-nolimit { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #374151; cursor: pointer; }
.owner-badge { background: #0d9488; color: #fff; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 10px; vertical-align: middle; }

/* ===== entrenador / pesaje ===== */
.weigh-reminder { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.warn-badge { background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 10px; vertical-align: middle; }
.ok-badge { background: #d1fae5; color: #065f46; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 10px; vertical-align: middle; }
.table-scroll { overflow-x: auto; max-width: 100%; margin-top: 6px; }
table.whist { min-width: 640px; }
#client-detail { margin-top: 14px; border-top: 1px solid #fde68a; padding-top: 6px; }

/* ===== avatar de perfil ===== */
.who-row { display: flex; align-items: center; gap: 8px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #0d9488; cursor: pointer; flex-shrink: 0; }
.avatar.sm { width: 28px; height: 28px; border-width: 1px; cursor: default; vertical-align: middle; margin-right: 6px; }
/* Botón que envuelve la foto del encabezado (perfil-visible,
   2026-10-24): tocar la foto abre «Mi perfil». Sin fondo ni borde
   propios: la foto conserva exactamente su aspecto de siempre. */
.avatar-btn { background: none; border: none; padding: 0; margin: 0; cursor: pointer; border-radius: 50%; display: inline-flex; flex-shrink: 0; }
.avatar-btn:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }

/* ===== registro: consentimiento legal ===== */
.opt { font-weight: 400; color: #9ca3af; font-size: 12px; }
.auth-card select, .modal select { width: 100%; margin-top: 4px; padding: 9px 11px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; background: #fff; }
.consent-box { margin: 12px 0; }
.consent-text { max-height: 180px; overflow-y: auto; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; font-size: 12px; line-height: 1.55; color: #4b5563; }
.consent-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; font-weight: 600; margin-top: 10px; cursor: pointer; }
.consent-check input { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; margin-top: 0; flex: 0 0 auto; border: 2px solid #64748b; border-radius: 6px; background: #fff; cursor: pointer; }
.consent-check input:checked { background-color: #0f766e; border-color: #0f766e; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 17px; background-position: center; background-repeat: no-repeat; }
/* Ajuste UX 2026-10-23 (punto 2): línea de ayuda en lenguaje simple
   bajo cada casilla del flujo de declaración de salud. Es ayuda
   visual auxiliar: nunca sustituye al texto legal junto a la casilla. */
.consent-help { display: block; font-size: 12px; font-weight: 400; color: #64748b; line-height: 1.45; margin-top: 4px; }
.health-grid label { flex-wrap: wrap; }
.health-grid .consent-help { flex: 0 0 100%; margin-left: 24px; margin-top: 0; }
.modal textarea { width: 100%; margin-top: 4px; padding: 9px 11px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; font-family: inherit; resize: vertical; }

/* ===== declaración de salud ===== */
.health-box { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; padding: 14px; margin: 12px 0; }
.health-box > b { color: #9a3412; }
.health-hint { font-size: 12px; color: #9a3412; margin: 6px 0 10px; }
.health-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-bottom: 10px; }
@media (max-width: 520px) { .health-grid { grid-template-columns: 1fr; } }
.health-grid label { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 500; cursor: pointer; }
.health-grid input { width: auto; }
.health-box textarea { width: 100%; margin-top: 4px; padding: 9px 11px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; font-family: inherit; resize: vertical; }
.health-alert { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 12px; }

/* ===== puerta PAR-Q (§4.5): indicador de estado en el editor de planes =====
   Solo existencia/estado de la declaración; jamás su contenido. */
.pl-gate { background: #f1f5f9; border: 1px solid #cbd5e1; color: #334155; border-radius: 10px; padding: 10px 14px; font-size: 13px; margin: 10px 0; }
.pl-gate:empty { display: none; }
.pl-gate.ok { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.pl-gate.warn { background: #fffbeb; border-color: #f59e0b; color: #92400e; }
.pl-gate.block { background: #fef2f2; border-color: #dc2626; color: #991b1b; }

/* ===== biblioteca en el editor (§4.1): aviso, autocompletado y enlaces ===== */
.pl-lib-note { background: #fffbeb; border: 1px solid #f59e0b; color: #92400e; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; margin: 10px 0; }
.pl-lib-note:empty { display: none; }
.pl-ex-main { flex: 1.6; min-width: 0; position: relative; }
.pl-ex-main > input { width: 100%; }
.pl-ex-sug { position: absolute; top: 100%; left: 0; width: min(80vw, 360px); max-height: 264px; overflow-y: auto; z-index: 40; background: #fff; border: 1px solid #d1d5db; border-radius: 10px; box-shadow: 0 10px 28px rgba(15,23,42,.16); margin-top: 2px; }
.pl-ex-sug:empty { display: none; }
.pl-sug-item { display: block; width: 100%; text-align: left; background: #fff; border: 0; border-bottom: 1px solid #f1f5f9; padding: 8px 10px; cursor: pointer; font: inherit; }
.pl-sug-item:last-child { border-bottom: 0; }
.pl-sug-item:hover { background: #f0fdfa; }
.pl-sug-item .sg-name { display: block; font-size: 13.5px; font-weight: 600; color: #1f2a44; }
.pl-sug-item .sg-meta { display: block; font-size: 12px; color: #6b7280; margin-top: 1px; }
.pl-ex-links { display: flex; gap: 6px; margin-top: 4px; }
.pl-ex-links a.btn-ghost { text-decoration: none; display: inline-block; }

/* ===== plantillas en el editor (§4.2): selector, bloques de sesión,
   descanso/aproximación por fila y sugerencia de alineación ===== */
.exp-badge { background: #fee2e2; color: #991b1b; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 10px; vertical-align: middle; }
.pl-current { background: #eef6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 10px 14px; margin: 10px 0; font-size: 14px; }
.pl-current-head { font-weight: 700; color: #1f2a44; font-size: 13px; margin-bottom: 4px; }
.pl-current-meta { color: #475569; font-size: 13px; margin-top: 2px; }
.pl-current .btn-primary { margin-top: 8px; }
.pl-dates { margin: 10px 0; }
.pl-dates .frow { align-items: flex-end; }
.pl-dates-hint { color: #64748b; font-size: 12px; margin-top: 4px; }
.pl-tpl { margin: 10px 0; }
.pl-tpl-head { font-weight: 700; color: #1f2a44; font-size: 14px; margin-bottom: 6px; }
.pl-tpl-card { display: flex; gap: 8px; align-items: center; justify-content: space-between; border: 1px solid #e9ecef; border-radius: 10px; padding: 8px 10px; margin: 6px 0; }
.pl-tpl-info { min-width: 0; }
.pl-tpl-info b { display: block; font-size: 13.5px; color: #1f2a44; }
.pl-tpl-meta { display: block; font-size: 12px; color: #6b7280; margin-top: 1px; }
.pl-tpl-use { flex: 0 0 auto; }
.pl-tpl-align { border: 1px dashed #99f6e4; background: #f0fdfa; border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.pl-tpl-align label { display: block; font-size: 13px; color: #334155; }
.pl-tpl-align-hint, .pl-tpl-align-title { font-size: 12.5px; color: #334155; margin-top: 8px; }
.pl-tpl-align-row { display: flex; gap: 6px; align-items: baseline; font-size: 12.5px; color: #334155; padding: 2px 0; }
.pl-tpl-align-arrow { color: #0d9488; }
.pl-tpl-align-applied { font-size: 12.5px; color: #065f46; margin-top: 8px; }
.pl-day-blocks { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.pl-day-blocks:empty { display: none; }
.pl-block-chip { display: inline-flex; align-items: center; gap: 6px; background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; border-radius: 999px; padding: 3px 6px 3px 10px; font-size: 12px; }
.pl-block-del { background: none; border: 0; color: #6366f1; cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px; }
/* PAQUETE 10 — sugerencias §6 restantes: herramientas por fila del
   editor (sustituto §5.2 y panel por tipo de cuerpo §4.3), historial
   de instantáneas (§6.4) y tarjeta imprimible (§6.2). */
.pl-ex-tools { display: flex; gap: 6px; margin-top: 6px; }
.pl-sub-note { font-size: 12.5px; color: #6b7280; padding: 6px 2px; }
.pl-sub-title { font-size: 12.5px; font-weight: 700; padding: 6px 2px 2px; }
.pl-btr { border: 1px solid #E9ECEF; border-radius: 10px; padding: 8px 10px; margin-top: 6px; }
.pl-btr-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: 13px; }
.btr-badge { background: #0d9488; color: #fff; border-radius: 999px; padding: 1px 10px; font-size: 12px; font-weight: 700; }
.pl-btr-why { font-size: 12.5px; margin: 6px 0; }
.pl-btr-note { font-size: 12px; color: #6b7280; margin: 4px 0; }
.plan-history { padding: 4px 2px 10px; }
.snap-detail { padding: 4px 8px 8px; }
.snap-day { margin-bottom: 8px; }
#print-card { display: none; }
@media print {
  body > *:not(#print-card) { display: none !important; }
  #print-card { display: block !important; font-family: inherit; }
  .pc-title { margin: 0 0 2px; }
  .pc-sub { color: #555; margin: 0 0 10px; }
  .pc-notes { margin: 0 0 10px; }
  .pc-day { margin: 14px 0 4px; }
  .pc-table { width: 100%; border-collapse: collapse; }
  .pc-table td { border-bottom: 1px solid #ccc; padding: 4px 6px; font-size: 13px; }
  .pc-block { margin: 4px 0; font-size: 13px; }
}
.pl-ex-sub { display: flex; gap: 6px; }
.pl-ex-sub input { flex: 1; min-width: 0; font-size: 12.5px; }

/* ===== constructor visual (§5.1): explorador en rejilla dentro del
   editor, miniatura de fila y resaltado de la fila recién añadida ===== */
.pl-viz { margin: 10px 0; border: 1px solid #e9ecef; border-radius: 10px; padding: 10px 12px; }
.pl-viz-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pl-viz-title { font-weight: 700; color: #1f2a44; font-size: 14px; }
.pl-viz-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.pl-viz-controls input[type="text"] { flex: 1 1 150px; min-width: 0; }
.pl-viz-controls select { max-width: 100%; }
.pl-viz-daylabel { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #334155; }
.pl-viz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.pl-viz-card { border: 1px solid #e9ecef; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 4px; background: #fff; }
.pl-viz-img { width: 100%; height: 78px; object-fit: cover; border-radius: 8px; background: #eef1f3; }
.pl-viz-noimg { display: flex; align-items: center; justify-content: center; font-size: 26px; }
.pl-viz-name { font-size: 12.5px; font-weight: 600; color: #1f2a44; line-height: 1.25; }
.pl-viz-meta { font-size: 11.5px; color: #6b7280; line-height: 1.3; flex: 1; }
.pl-viz-add { width: 100%; }
.pl-viz-empty { font-size: 12.5px; color: #6b7280; padding: 6px 0 2px; }
.pl-ex-thumb { flex: 0 0 44px; width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: #eef1f3; }
.pl-ex-just-added { outline: 2px solid #0d9488; outline-offset: 1px; border-radius: 8px; }

/* ===== biblioteca por categorías (2026-10-24): chips de músculo,
   selectores de faceta y cabeceras de sección — compartidos por la
   vista de Biblioteca y el navegador visual del editor ===== */
.libcat-chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 2px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.libcat-chip { flex: 0 0 auto; border: 1.5px solid #cfd8dc; background: #fff; color: #37474f; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.libcat-chip .libcat-n { opacity: .6; font-weight: 700; margin-left: 3px; }
.libcat-chip.on { background: #0d9488; border-color: #0d9488; color: #fff; }
.libcat-chip.on .libcat-n { opacity: .85; }
.libcat-chip:disabled { opacity: .4; cursor: default; }
.libcat-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 8px; }
.libcat-flabel { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #5b6470; }
.libcat-sec { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; padding-bottom: 4px; border-bottom: 2px solid #e0ecec; font-size: 15px; font-weight: 800; color: #134e4a; }
.libcat-sec-n { background: #e6f4f1; color: #0d9488; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; }
.pl-viz-sec { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-bottom: 4px; border-bottom: 2px solid #e0ecec; font-size: 14px; font-weight: 800; color: #134e4a; }

/* ===== gráfica semanal ===== */
.week-panel { margin-top: 18px; }
.week-panel h2 { font-size: 17px; color: #1f2a44; margin-bottom: 10px; }
.chart-note { font-size: 12px; color: #9ca3af; margin-top: 8px; }

/* ===== pista de foto por chat ===== */
.photo-hint { font-size: 12.5px; color: #0f766e; background: #f0fdfa; border: 1px dashed #99f6e4; border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.photo-hint b { color: #0d9488; }

/* ===== pestañas principales ===== */
/* Navegación superior (corrección reprueba, 2026-10-24): con CINCO
   píldoras (Mi registro · Mis clientes · Accesos · Entrenadores ·
   Biblioteca) la fila se envuelve en filas CENTRADAS y equilibradas
   — regla permanente de la casa: botones siempre centrados. Cada
   fila se centra por sí misma (3+2 en administrador; las que vea
   cada rol quedan centradas igual). */
.main-tabs { display: flex; gap: 8px; margin: 14px 0 6px; flex-wrap: wrap; justify-content: center; }
.main-tab { padding: 9px 18px; border-radius: 999px; border: 1px solid #d1d5db; background: #fff; font-size: 14px; cursor: pointer; color: #374151; }
.main-tab.active { background: #0d9488; border-color: #0d9488; color: #fff; font-weight: 600; }

/* ===== ayuda con comidas ===== */
.mealhelp-panel { margin-top: 18px; }
.mealhelp-panel h2 { font-size: 17px; color: #1f2a44; margin-bottom: 6px; }
.mealhelp-upload { cursor: pointer; display: inline-block; margin: 8px 0 12px; }
.mealhelp-list { display: flex; gap: 12px; flex-wrap: wrap; }
.mealhelp-item { width: 112px; }
.mealhelp-item img { width: 112px; height: 112px; object-fit: cover; border-radius: 10px; border: 1px solid #e5e7eb; cursor: zoom-in; display: block; }
.mealhelp-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.mealhelp-status { font-size: 11px; color: #6b7280; }

/* ===== lightbox ===== */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.lightbox img { max-width: 94vw; max-height: 94vh; border-radius: 12px; }

/* ===== marca del entrenador + redes en login/registro ===== */
.auth-brand { margin-top: 20px; padding-top: 14px; border-top: 1px solid #eef2f7; }
.auth-social { display: flex; gap: 10px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.auth-social a { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: #94a3b8; text-decoration: none; padding: 4px 8px; }
.auth-social a:hover { color: #0d9488; }

/* Ojito discreto para mostrar/ocultar la contraseña */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 38px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1; opacity: .4; padding: 6px; }
.pw-eye.on { opacity: 1; }
.auth-error.ok { background: #e6f7ee; color: #065f46; }
/* UX10-2: tarjeta de expectativas tras el registro (quién aprueba,
   qué pasa ahora, sin plazos prometidos). */
.reg-waiting { background: #e6f7ee; color: #065f46; border: 1px solid #34d399; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; margin-bottom: 12px; }
.reg-waiting b { display: block; margin-bottom: 4px; }
/* UX10-3: nota breve bajo los anillos cuando el día está en cero. */
.rings-first-note { font-size: 13px; line-height: 1.5; color: var(--muted, #5b6b66); margin: 8px 2px 0; }
/* UX10-10: insignia «Vista» de las propuestas del cliente. */
.prop-badge.is-seen { background: #e0e7ff; color: #3730a3; }

/* Planes de entrenamiento (v1) */
.train-day { border: 1px solid #e9ecef; border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.train-day h4 { margin: 0 0 6px; color: #1f2a44; }
.train-ex { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dashed #eef1f3; }
.train-ex:last-child { border-bottom: none; }
.train-ex .sx { color: #666; white-space: nowrap; }
.pl-day { border: 1px solid #e9ecef; border-radius: 10px; padding: 10px; margin: 10px 0; }
/* REDISEÑO DE LA FILA (2026-10-24): una sola línea compacta —
   miniatura · nombre · SE · REP · nota · ⋯ · × — sin desborde a
   360 px: el nombre cede (min-width: 0) y la nota tiene tope.
   AJUSTE DE ANCHOS (2026-10-24, evidencia: captura real de iPhone
   de Ronald sobre bb4b625): el reparto interno dejaba el NOMBRE
   hambriento — con flex-basis automática, el nombre absorbía casi
   todo el encogido y se leían «Press de» / «Press m», y el REP de
   dos cifras se recortaba («12-15» → «12-1») en sus 42 px.
   Rebalanceo, sin tocar la estructura ni los datos:
   - el nombre pasa a flex 1 1 0: se queda EXACTAMENTE con el
     espacio sobrante, sin competir en el encogido;
   - SE se estrecha a su contenido (1–2 cifras) y REP se ensancha
     lo justo para que «12-15» quepa entero;
   - los inputs de la línea pierden el padding horizontal de modal
     (11 px → 5 px): ese aire va al texto;
   - la NOTA se compacta a 42 px con letra 12.5 px: su placeholder
     «Nota» se lee entero y deja de robarle al nombre;
   - huecos entre elementos 6 → 3 px y miniatura 40 → 32 px. */
.pl-ex-row { display: block; margin: 6px 0; }
.pl-ex-line { display: flex; gap: 3px; align-items: center; }
.pl-ex-line input { min-width: 0; padding-left: 5px; padding-right: 5px; }
.pl-ex-line .pl-ex-main { flex: 1 1 0; }
.pl-ex-line .pl-ex-sets { flex: 0 0 28px; text-align: center; padding-left: 2px; padding-right: 2px; }
.pl-ex-line .pl-ex-reps { flex: 0 0 44px; text-align: center; padding-left: 2px; padding-right: 2px; }
.pl-ex-line .pl-ex-note { flex: 0 1 42px; min-width: 38px; font-size: 12.5px; padding-left: 4px; padding-right: 4px; }
.pl-ex-line .pl-ex-more, .pl-ex-line .pl-ex-del { flex: 0 0 auto; padding-left: 4px; padding-right: 4px; }
.pl-ex-media-btn { flex: 0 0 32px; width: 32px; height: 40px; border-radius: 8px; border: 1px solid #e2e8f0; background: #eef1f3; padding: 0; overflow: hidden; position: relative; cursor: pointer; }
/* El editor de planes es una superficie de trabajo: en móvil el
   cromo del modal (fondo + tarjeta + día) se estrecha para que el
   aire vaya a las filas, no al marco. Solo el modal de planes. */
@media (max-width: 520px) {
  #plan-modal { padding: 8px; }
  #plan-modal .modal { padding: 18px 12px; }
  #plan-modal .pl-day { padding: 8px 6px; }
}
.pl-ex-media-btn .pl-ex-thumb { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; border-radius: 0; background: none; }
.pl-ex-media-btn .pl-ex-media-ico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.pl-ex-media-btn.has-photo .pl-ex-media-ico { display: none; }
.pl-ex-extra { margin-top: 6px; }
/* Flotante multimedia del ejercicio: hoja inferior en móvil, tarjeta
   centrada en pantallas anchas; por encima del modal del plan. */
.ex-media-pop { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: flex-end; justify-content: center; z-index: 90; }
.ex-media-card { background: #fff; border-radius: 16px 16px 0 0; padding: 16px; width: min(94vw, 430px); max-height: 82vh; overflow-y: auto; position: relative; box-shadow: 0 -8px 30px rgba(15,23,42,.25); }
.ex-media-card h3 { margin: 0 36px 10px 0; }
.ex-media-x { position: absolute; top: 8px; right: 10px; background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: #475569; padding: 4px 8px; }
.ex-media-img { width: 100%; border-radius: 10px; display: block; }
.ex-media-video { display: block; text-align: center; margin-top: 10px; text-decoration: none; }
@media (min-width: 640px) { .ex-media-pop { align-items: center; } .ex-media-card { border-radius: 16px; } }
.check-row { display: flex; gap: 8px; align-items: center; }

/* Privacidad y datos */
.privacy-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.privacy-btns .danger { color: #b91c1c; }

/* Simplificación visual (2026-10-18, diseño aprobado por Ronald):
   un solo botón «Gestionar…» por tarjeta que despliega la lista de
   acciones en filas de menú (chip numerado, separadores finos).
   El botón solo abre/cierra la lista; las acciones conservan sus
   ids, textos, diálogos y efectos de siempre. */
.manage-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; }
.manage-toggle .manage-chev { font-size: 12px; }
/* Gestionar compacto (2026-10-19, corrección de Ronald 14:09–14:11):
   los «Gestionar…» dejan de ser bloques A TODO ANCHO: botón PEQUEÑO
   (alto ≈ 39 px, texto 14.5 px sin la negrita de bloque), ancho
   ajustado a su contenido y alineado a la IZQUIERDA de su tarjeta.
   El texto íntegro (decisión de Ronald, 2026-10-18) y el
   comportamiento —solo abrir/cerrar su lista— no cambian. La
   especificidad (.btn-secondary.manage-toggle) gana a .btn-secondary
   sin tocar esa clase, que usan otros botones.
   Precisión táctil (Ronald, 2026-10-19 15:23): compacto SÍ, pero
   fácil de tocar en iPhone — el padding vertical sube de 9 a 12 px
   y el área de toque queda en 44.1 px de alto medidos (≥ 44 px,
   objetivo táctil), sin volver al bloque de todo el ancho ni a
   texto grande: el aspecto sigue siendo el compacto. */
.btn-secondary.manage-toggle { display: inline-flex; justify-content: flex-start; gap: 6px; width: auto; max-width: 100%; box-sizing: border-box; margin-top: 0; padding: 12px 13px; font-size: 14.5px; font-weight: 600; line-height: 1.25; }
/* Botón único «PERMISOS Y PRIVACIDAD» (decisión de Ronald,
   2026-10-19 15:45 — sustituye a los dos «Gestionar…» y a su
   fila horizontal): UN solo botón DISCRETO Y FINO donde empezaba
   la primera de las tarjetas. La etiqueta es corta y cabe en
   UNA línea; se muestra en MAYÚSCULAS por CSS (como las
   leyendas del dock), con el texto normal en los diccionarios.
   Ancho ajustado al contenido, alineado a la IZQUIERDA (nunca el
   bloque a todo el ancho), contorno FINO de 1 px con el teal de
   marca y fondo blanco; su regla gana a .btn-secondary
   .manage-toggle sin tocar esas clases, que usan otros botones.
   Al desplegarse, el panel muestra primero una COLETILLA
   informativa sencilla (texto menor y atenuado) y después las
   DOS secciones tituladas en mayúsculas discretas. Nada de esto
   se duplica fuera del despliegue.
   CENTRADO (Ronald, 2026-10-22): la regla global «botones
   siempre al centro» SUSTITUYE a la alineación a la izquierda de
   2026-10-19. El botón conserva todo lo demás —discreto y fino,
   ancho ajustado a su contenido, etiqueta en mayúsculas, contorno
   de 1 px— y solo cambia su justificación: su propia regla lo
   convierte en bloque flexible de ancho ajustado con márgenes
   automáticos, centrado en su tarjeta y con su contenido
   (etiqueta + chevron) también centrado. */
.btn-secondary.perms-toggle { display: flex; width: fit-content; max-width: 100%; margin-inline: auto; justify-content: center; text-align: center; text-transform: uppercase; letter-spacing: .03em; padding: 11px 13px; font-size: 13.5px; font-weight: 600; border-width: 1px; border-radius: 10px; }
.perms-toggle .manage-chev { font-size: 11px; }
.perms-intro { margin: 12px 2px 0; font-size: 12.5px; line-height: 1.45; color: #64748b; }
.perms-section { margin-top: 16px; }
.perms-section-title { margin: 0 2px 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #0f766e; }
.manage-list { margin-top: 10px; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.manage-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 47px; padding: 8px 12px; background: #fbfcfd; border: none; border-bottom: 1px solid #eef1f4; font-size: 14px; font-weight: 600; color: #1e293b; cursor: pointer; text-align: left; font-family: inherit; }
.manage-item:last-child { border-bottom: none; }
.manage-item:hover { background: #f1f5f9; }
.manage-item .menu-num, .manage-details .menu-num { width: 20px; height: 20px; border-radius: 50%; background: #e2e8f0; color: #475569; font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.manage-item .manage-label { flex: 1; }
.manage-item .manage-go, .manage-details .manage-go { color: #c3cad4; font-size: 17px; flex: none; }
.manage-item.danger { color: #dc2626; }
.manage-item.danger .menu-num { background: #fee2e2; color: #b91c1c; }
.manage-details { margin: 0; }
.manage-details > summary { display: flex; align-items: center; gap: 10px; min-height: 47px; padding: 8px 12px; background: #fbfcfd; border-bottom: 1px solid #eef1f4; font-size: 14px; font-weight: 600; color: #1e293b; cursor: pointer; list-style: none; }
.manage-details > summary::-webkit-details-marker { display: none; }
.manage-details > summary .manage-label { flex: 1; }
.manage-details .manage-details-body { padding: 10px 12px 2px; margin-bottom: 10px; }
.manage-info { padding: 10px 12px 0; border-bottom: 1px solid #eef1f4; }
.manage-info .history-title { margin-top: 2px; }
.manage-list > .history-title { margin: 14px 12px 8px; }
.manage-list > .progress-hint { margin: 0 12px 10px; }
.manage-list > .wempty { margin: 0 12px 12px; }
.manage-list #spec-legal { padding: 2px 12px 10px; }
.card-head { display: flex; align-items: center; gap: 8px; }
.card-head h2 { flex: 1; margin-bottom: 0; }
.card-head .mealhelp-upload { margin: 0; }
.card-head + div { margin-top: 10px; }
.card-chev { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e5e7eb; background: #f8fafc; color: #475569; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; }
/* Jerarquía v3: botón secundario (contorno teal) para «Gestionar…»
   y cara-botón primaria a todo ancho para las tarjetas
   protagonistas («Mi progreso», «Mi plan de entrenamiento»);
   «Analiza la comida» primario a todo ancho en «Ayuda con comidas». */
.btn-secondary { background: #fff; color: #00aca1; border: 1.5px solid #00aca1; border-radius: 8px; padding: 11px 18px; font-size: 14px; font-weight: 700; cursor: pointer; }
.btn-secondary:hover { background: #f0fdfa; }
.face-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; font-family: inherit; }
.face-toggle .manage-chev { font-size: 12px; }
.face-toggle + div { margin-top: 12px; }
.mealhelp-panel .mealhelp-upload { display: block; width: 100%; box-sizing: border-box; text-align: center; margin: 10px 0 0; }
/* «Añadir comida manualmente» (2026-10-19): nació como botón
   secundario de marca a todo ancho dentro de «Ayuda con comidas»;
   el ajuste «zona del día» (Ronald, 2026-10-19 16:02–16:04) lo
   muda a la fila del título de «Resumen vs. metas» como PASTILLA
   compacta alineada a la derecha: contorno de marca y texto
   ÍNTEGRO («Añadir comida manualmente» / «Add food manually»),
   tipografía 13.5 px, relleno reducido, una línea (nowrap), radio
   de pastilla. Su especificidad (.btn-secondary.meal-manual-pill)
   gana a .btn-secondary sin modificar esa clase.
   CENTRADO (Ronald, 2026-10-22, regla global «botones siempre al
   centro»): margin-left:auto se convierte en margin-inline:auto.
   Como único elemento de su fila (.summary-head de la vista de
   comida), la pastilla queda justificada AL CENTRO; en .pend-head
   —fila de cabecera con título y cierre, excepción declarada de
   la regla— el margen automático solo redistribuye el hueco. */
.btn-secondary.meal-manual-pill { margin-inline: auto; width: auto; max-width: 100%; box-sizing: border-box; padding: 7px 13px; font-size: 13.5px; font-weight: 600; line-height: 1.25; border-radius: 999px; white-space: nowrap; }
/* Fila v4 (2026-10-19): las tres protagonistas de la vista principal
   —«Mi progreso», «Analiza la comida» y «Mi plan de entrenamiento»—
   se convierten en UNA fila horizontal de botones REDONDOS (círculos
   teal con icono y leyenda corta debajo), para acortar la página y
   darle un aire contemporáneo. Sus contenidos (y el secundario de
   «Ayuda con comidas», tras su fila de texto discreta) se abren en
   paneles bajo la fila, dentro de la misma tarjeta .main-actions.
   El estado abierto se marca con anillo sobre el círculo vía
   [aria-expanded="true"], que wireCardToggle ya mantiene.
   Dock v4.2 (2026-10-19): la fila sale de la tarjeta y FLOTA en una
   pastilla fija abajo (.actions-dock), siempre visible al hacer
   scroll dentro de #tab-track; el dock vive en el DOM dentro de
   #tab-track, así que al cambiar de pestaña (display:none) no se
   renderiza. z-index 40: sobre el contenido, bajo el modal (50),
   el toast (99) y el lightbox (9999).
   GLOBAL (corrección reprueba, 2026-10-24): el dock sale de
   #tab-track y vive como hijo directo de #app-view — visible en
   las TRES áreas principales (Mi registro, Mis clientes, Accesos),
   una sola instancia con su estado (pendientes en rojo) intacto;
   ver la nota junto al marcado en index.html y dockHome en app.js.
   Las leyendas van en
   MAYÚSCULAS por CSS (los diccionarios no cambian). Círculos de
   68 px (un poco más compactos que los 76 de v4/v4.1 para que el
   dock tape menos; el SVG de 36 px se conserva). Para que el dock
   no tape el final de la página, el pie (.foot, último elemento
   tras las pestañas) gana margen inferior: nació solo con
   #tab-track visible y desde el dock global (2026-10-24) es
   permanente, porque la pastilla acompaña en las tres áreas. */
.main-actions { margin-top: 18px; }
/* Dock compacto y centrado (Ronald, 2026-10-21, con captura de
   producción): los círculos de 68 px se veían enormes, la pastilla
   ocupaba casi todo el ancho y la etiqueta «PENDIENTES» se cortaba
   en el borde derecho. Ahora: círculos de 56 px (icono a 30 px y
   etiqueta a 11.5 px, en proporción), pastilla con width fit-content
   — se ajusta a su contenido — y centrada (left 50% + translateX),
   con huecos simétricos de 6 px; a 390 px ninguna etiqueta se corta
   ni hay desborde horizontal. Colores, halo y lógica intactos; el
   anclaje de .pend-float se ajusta a la nueva altura de la pastilla
   (~92 px frente a ~111 px). */
.actions-dock { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 40; width: fit-content; max-width: calc(100vw - 24px); box-sizing: border-box; background: rgba(255, 255, 255, .96); border: 1px solid rgba(15, 23, 42, .06); border-radius: 999px; box-shadow: 0 8px 24px rgba(15, 23, 42, .18); padding: 8px 16px; }
/* El pie reserva siempre el alto del dock: antes el margen era solo
   con #tab-track visible (el dock vivía allí); con el dock global
   (2026-10-24) el final de CUALQUIER área necesita la misma reserva
   para que la pastilla no tape el pie al llegar al fondo. */
#app-view .foot { margin-bottom: 132px; }
.rounds-row { display: flex; justify-content: center; align-items: flex-start; gap: 6px; }
.round-action { flex: 0 1 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: none; padding: 2px 0 0; cursor: pointer; font-family: inherit; text-decoration: none; }
.round-circle { width: 56px; height: 56px; border-radius: 50%; background: #00aca1; color: #fff; display: flex; align-items: center; justify-content: center; }
.round-circle svg { display: block; width: 30px; height: 30px; }
.round-action:active .round-circle { background: #00857c; }
.round-action[aria-expanded="true"] .round-circle { background: #00857c; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #00aca1; }
.round-label { font-size: 11.5px; font-weight: 600; color: #1f2a44; text-align: center; line-height: 1.15; text-transform: uppercase; white-space: nowrap; }
.round-chev { font-size: 10px; color: #00aca1; }
/* El encabezado fijo .mealhelp-head y el margen propio de
   #mealhelp-content desaparecen con el bloque «Ayuda con
   comidas», retirado de la vista por Ronald el 2026-10-22 (el
   aviso de la foto vive ahora en «Permisos y privacidad»). Las
   clases .mealhelp-list/.mealhelp-item se CONSERVAN: las sigue
   usando la lista de revisión del entrenador en la ficha del
   cliente, que no es parte del bloque retirado. */
.main-actions #progress-content, .main-actions #train-content { margin-top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.block-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.block-head .block-title { flex: 1; font-size: 14px; color: #1f2a44; }

/* M8 — panel de análisis con IA y aviso de borrador (Fase C) */
.ai-panel{margin-top:12px;border:1px solid #d8e2e0;border-radius:12px;padding:12px}
.ai-panel h3{margin:8px 0 4px;font-size:15px}
.ai-foods{margin:4px 0 8px 18px;padding:0}
.ai-q{margin:10px 0}
.ai-q p{margin:0 0 4px;font-weight:600}
.ai-opt{display:block;margin:4px 0;font-weight:400}
.ai-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.ai-banner{background:#e6f4f1;border:1px solid #0e7c6b;color:#0b5d51;border-radius:8px;padding:8px 10px;margin-bottom:10px;font-size:13px}
.ai-food-row{display:flex;gap:6px;align-items:center;margin:5px 0}
.ai-food-name{flex:1;min-width:0;padding:7px 9px;border:1px solid #d1d5db;border-radius:8px;font-size:14px}
.ai-food-grams{width:78px;padding:7px 9px;border:1px solid #d1d5db;border-radius:8px;font-size:14px}
.ai-g{color:#6b7280;font-size:13px}
.ai-other{width:100%;box-sizing:border-box;margin-top:6px;padding:7px 9px;border:1px solid #d1d5db;border-radius:8px;font-size:14px}
.ai-alt-desc{width:100%;box-sizing:border-box;margin-top:6px;padding:7px 9px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;font-family:inherit;resize:vertical}
/* M8 — paquete 2: unidad por alimento, selector de comida, métricas editables */
.ai-food-unit{padding:7px 4px;border:1px solid #d1d5db;border-radius:8px;font-size:13px;background:#fff}
/* Unidades por pieza (desarrollo 2026-10-24): caja del peso por pieza
   junto al conteo — campo corregible + etiqueta + equivalencia total. */
.ai-piece-box{display:inline-flex;gap:4px;align-items:center}
.ai-food-perpiece{width:64px;padding:7px 9px;border:1px solid #d1d5db;border-radius:8px;font-size:14px}
.ai-piece-lbl{color:#6b7280;font-size:12px;white-space:nowrap}
.ai-piece-total{color:#6b7280;font-size:12px;white-space:nowrap}
.ai-est{color:#92400e;background:#fef3c7;border-radius:6px;padding:2px 5px;font-size:11px;white-space:nowrap}
/* Fotos múltiples con báscula (2026-10-22): franja de miniaturas de la
   preparación (quitar/reemplazar antes de enviar) e insignias de
   procedencia de cada cantidad — báscula (verde) o estimación (ámbar). */
.ai-stage-strip{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.ai-thumb{position:relative;width:64px;height:64px}
.ai-thumb img{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid #d8e2e0;cursor:pointer;display:block}
.ai-thumb-x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;border:1px solid #d1d5db;background:#fff;color:#b91c1c;font-size:12px;line-height:1;cursor:pointer;padding:0}
.ai-qsrc{border-radius:6px;padding:2px 5px;font-size:11px;white-space:nowrap}
.ai-qsrc-scale{color:#065f46;background:#d1fae5}
.ai-qsrc-est{color:#92400e;background:#fef3c7}
/* Resultado M8 en vertical (defecto en vivo, Ronald 2026-10-21): en
   la fila única, nombre + cantidad (78 px) + unidad + chip «porción
   estimada» (nowrap) + ✕ sumaban más que el ancho útil a 390 px y el
   campo del NOMBRE (flex:1;min-width:0) colapsaba a una rendija de
   pocos píxeles — solo se veía girando el teléfono. En pantallas
   estrechas la fila se parte en DOS líneas: el nombre a ANCHO
   COMPLETO en la primera y cantidad/unidad/chip/✕ en la segunda.
   En pantallas anchas la fila única queda intacta. Solo CSS: ni la
   estructura ni los textos cambian. */
@media (max-width: 600px) {
  .ai-food-row { flex-wrap: wrap; }
  .ai-food-row .ai-food-name { flex: 1 1 100%; }
}
/* Indicador flotante de análisis M8 (Ronald, 2026-10-21): disco
   blanco con anillo teal que se completa POR ETAPAS reales del flujo
   (sale la llamada → vuelve → resultados en pantalla; ver aiProg* en
   app.js). Nació centrado sobre la pastilla del dock; a petición de
   Ronald (2026-10-21, captura en vivo: el disco tapaba el botón de
   Entrenamiento) pasa al CENTRO DE LA PANTALLA: left/top al 50% y
   translate(-50%,-50%), sin referencia alguna al dock. z-index 48
   (sobre el dock 40 y la tarjeta de pendientes 45, bajo el modal 50).
   pointer-events:none: jamás intercepta un toque — no bloquea nada
   que el flujo no bloqueara ya. Con reduced-motion el anillo salta
   entre etapas sin transición y el disco aparece sin fundido. */
.ai-progress { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 48; width: 84px; height: 84px; border-radius: 50%; background: rgba(255, 255, 255, .97); border: 1px solid rgba(15, 23, 42, .06); box-shadow: 0 10px 28px rgba(15, 23, 42, .22); display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.ai-progress.on { opacity: 1; }
.ai-progress svg { display: block; }
.ai-prog-track { fill: none; stroke: #e5e7eb; stroke-width: 5; }
.ai-prog-fg { fill: none; stroke: #00aca1; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 188.5; stroke-dashoffset: 188.5; transition: stroke-dashoffset .5s ease; }
@media (prefers-reduced-motion: reduce) { .ai-progress { transition: none; } .ai-prog-fg { transition: none; } }
.ai-meal-row{display:flex;gap:8px;align-items:center;margin:12px 0 4px;font-weight:600}
.ai-meal-row select{padding:7px 9px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;background:#fff}
.ai-metrics-title{margin:10px 0 4px;font-weight:600}
.ai-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}
.ai-metric{display:flex;flex-direction:column;gap:3px;font-size:12px;color:#374151;font-weight:400}
.ai-metric input{padding:7px 9px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;width:100%;box-sizing:border-box}
.ai-err{color:#b91c1c;font-weight:600;margin:8px 0}
/* Resultado único (2026-10-19): campo del nombre del registro en el panel */
.ai-name{margin:8px 0 4px;max-width:440px}
/* Evaluación de progreso (desarrollo 2026-10-19): tarjeta del ciclo,
   ficha de datos medidos, composición y configuración. Paleta de la
   app en producción (teal #0d9488, tarjetas blancas). */
.eval-card,.eval-block,.eval-ficha,.eval-comp{border:1px solid #e5e7eb;border-radius:10px;background:#fff;padding:14px;margin:14px 0}
.eval-card{border-left:4px solid #0d9488}
.eval-badge{background:#fef3c7;color:#92400e;font-size:11px;font-weight:800;border-radius:6px;padding:2px 8px;letter-spacing:.04em}
.eval-card-title{margin:0 0 6px;font-size:16px;font-weight:800;color:#111827}
.eval-detail{margin:4px 0;font-size:13.5px;color:#374151}
.eval-due{font-weight:700}
.eval-have{color:#065f46}
.eval-missing{color:#92400e;font-weight:600}
.eval-partial{color:#065f46;font-weight:600}
.eval-cycle{color:#6b7280;font-size:12.5px}
.eval-ficha-title{margin:0 0 8px;font-size:15px;font-weight:800;color:#111827}
.eval-table{border-collapse:collapse;width:100%;font-size:13.5px}
.eval-table th,.eval-table td{border-bottom:1px solid #eef2f7;padding:6px 8px;text-align:left}
.eval-table th.num,.eval-table td.num{text-align:right;white-space:nowrap}
.req-tag{background:#fef3c7;color:#92400e;font-size:10.5px;font-weight:800;border-radius:5px;padding:1px 5px;white-space:nowrap}
.eval-form{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.eval-field{display:flex;flex-direction:column;gap:3px}
.eval-field label{font-size:13px;font-weight:600;color:#111827}
.eval-unit{color:#6b7280;font-weight:400}
.eval-field input{padding:8px 10px;border:1px solid #d1d5db;border-radius:8px;font-size:15px;width:100%;box-sizing:border-box}
.eval-guide{font-size:11px;color:#6b7280;line-height:1.35}
.eval-actions{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.eval-ok{color:#065f46;font-weight:700;font-size:13.5px}
.eval-comp-note{color:#92400e;font-weight:600}
.eval-comp-form{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.eval-comp-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.eval-comp-name{font-weight:700;font-size:13.5px;min-width:96px}
.eval-comp-row input[type="number"]{padding:7px 9px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;width:96px}
.eval-comp-row select{padding:7px 8px;border:1px solid #d1d5db;border-radius:8px;font-size:13.5px;background:#fff}
.eval-check{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;margin:4px 14px 4px 0;cursor:pointer}
.eval-check input{width:18px;height:18px}
.eval-cfg-group{margin:12px 0 4px;font-size:13.5px;font-weight:700;color:#111827}
@media (max-width:520px){ .eval-form{grid-template-columns:1fr} }

/* ===== F-B3 · referencia de proteína B-1 (Etapa 1, desarrollo) ===== */
.fb3-card { position: relative; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; margin: 12px 0; background: #f8fafc; }
.fb3-head { display: flex; align-items: center; gap: 8px; }
.fb3-head .history-title { flex: 1; }
.fb3-helpbtn { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #00ACA1; background: #fff; color: #00857c; font-weight: 700; cursor: pointer; font-family: inherit; }
.fb3-range { font-size: 20px; font-weight: 700; margin: 6px 0 2px; }
.fb3-stale { color: #991b1b; font-size: 13px; margin-top: 6px; }
.fb3-pop { position: absolute; right: 10px; top: 46px; z-index: 5; max-width: 340px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 12px 14px; font-size: 13px; line-height: 1.45; }

/* ===== F-A1/F-A2 · cálculo energético (Etapa 2, desarrollo) ===== */
.fa-signal { margin-top: 8px; font-size: 13px; color: #374151; background: #eefbf7; border: 1px solid #99e5d8; border-radius: 8px; padding: 7px 10px; }
.fa-flabel { display: block; font-size: 13px; font-weight: 600; color: #374151; margin: 12px 0 0; }
.fa-selbox { margin-top: 5px; background: #fff; border: 1px solid #d1d5db; border-radius: 8px; padding: 10px 12px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.fa-selbox .fa-ph { flex: 1; color: #6b7280; font-style: italic; }
.fa-selbox .fa-val { flex: 1; font-weight: 600; color: #111827; }
.fa-selbox .fa-oktag { color: #0d9488; font-weight: 700; font-size: 13px; }
.fa-selbox .fa-chev { color: #9ca3af; font-size: 13px; }
/* Fix layout ficha (2026-10-23): flex-wrap para que la etiqueta de
   estado (.tag-off, flex:none, 224 px en ES) envuelva a una segunda
   línea en pantallas de 360 px en vez de desbordar la tarjeta. */
.fa-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; margin-top: 8px; font-size: 14px; cursor: pointer; }
.fa-opt .fa-radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #0d9488; }
.fa-opt.sel .fa-radio { background: #0d9488; box-shadow: inset 0 0 0 3px #fff; }
.fa-opt .fa-nm { flex: 1; font-weight: 600; color: #111827; }
.fa-opt.off { background: #f3f4f6; cursor: default; }
.fa-opt.off .fa-radio { border-color: #d1d5db; }
.fa-opt.off .fa-nm { color: #9ca3af; font-weight: 500; }
.fa-card .tag-ok { flex: none; background: #d9f2e3; color: #14532d; border-radius: 99px; padding: 2px 9px; font-size: 11px; font-weight: 700; }
.fa-card .tag-off { flex: none; color: #6b7280; font-size: 11.5px; font-weight: 600; text-align: right; }
.fa-divider { border-top: 1px solid #e5e7eb; margin: 16px 0 4px; }
.fa-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fa-frow input, .fa-pal-input, .fa-select { width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; background: #fff; font-family: inherit; color: #111827; }
.fa-pal-input { width: 130px; font-size: 16px; font-weight: 700; }
.fa-card .basis { margin-top: 12px; font-size: 13px; color: #6b7280; }
.fa-rules { margin-top: 4px; font-size: 12.5px; color: #6b7280; line-height: 1.5; }
.fa-palguide { margin-top: 8px; background: #f0fdfa; border-left: 3px solid #0d9488; border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: #374151; line-height: 1.6; }
.fa-warn { margin-top: 10px; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 10px; padding: 11px 13px; font-size: 13.5px; line-height: 1.5; color: #92400e; }
.fa-errbox { margin-top: 10px; background: #fde8e8; border-radius: 10px; padding: 11px 13px; font-size: 13.5px; line-height: 1.5; color: #7f1d1d; }
.fa-confirm { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; font-size: 14px; font-weight: 600; color: #111827; line-height: 1.4; cursor: pointer; }
.fa-confirm input { flex: none; width: 21px; height: 21px; margin-top: 1px; accent-color: #0d9488; }
.fa-btnrow { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
.fa-btnrow .btn-primary:disabled { opacity: .45; }
.fa-empty { margin-top: 14px; border: 1.5px dashed #cbd5e1; border-radius: 10px; padding: 16px 12px; text-align: center; background: #fff; }
.fa-empty b { display: block; font-size: 15px; color: #64748b; margin-bottom: 3px; }
.fa-empty span { font-size: 12.5px; color: #94a3b8; }
.fa-results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.fa-stat { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 8px 10px; text-align: center; }
.fa-stat .l { font-size: 10.5px; color: #6b7280; letter-spacing: .4px; font-weight: 700; }
.fa-stat .v { font-size: 27px; font-weight: 800; color: #1f2a44; margin-top: 3px; }
.fa-stat .u { font-size: 12px; font-weight: 600; color: #6b7280; }
.fa-trace { margin-top: 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 11px 13px; }
.fa-trace h4 { font-size: 13px; color: #1f2a44; margin: 0 0 7px; }
.fa-trow { display: flex; gap: 10px; font-size: 12.5px; padding: 4.5px 0; border-bottom: 1px solid #f1f5f9; }
.fa-trow:last-of-type { border-bottom: none; }
.fa-trow .k { flex: none; width: 118px; color: #6b7280; font-weight: 600; }
.fa-trow .v { flex: 1; color: #111827; }
.fa-tnote { margin-top: 9px; background: #eff6ff; border-radius: 8px; padding: 9px 11px; font-size: 12.5px; line-height: 1.45; color: #1e3a5f; font-style: italic; }
/* Correcciones Santi C-3/C-5 (2026-10-20): vigencia del resultado y ayuda en dos niveles */
.fa-stale { margin-top: 14px; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.5; color: #92400e; }
.fa-stale + .fa-results { margin-top: 8px; }
.fa-ownres + .fa-stale { margin-top: 8px; }
.fa-stale-note { margin-top: 10px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: #64748b; }
.fa-help-more { margin-top: 10px; background: none; border: none; padding: 0; font-size: 12.5px; font-weight: 600; color: #0d9488; cursor: pointer; }
.fa-help-detail { margin-top: 9px; border-top: 1px solid #e5e7eb; padding-top: 9px; }
/* Espacio privado del cliente (variable de sexo) */
.fa-privcard { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; }
.fa-sextext { font-size: 14px; line-height: 1.55; color: #374151; margin: 6px 0 0; }
.fa-current { margin-top: 10px; font-size: 13.5px; font-weight: 700; color: #14532d; background: #d9f2e3; border-radius: 8px; padding: 8px 11px; }
.fa-opts { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.fa-opt2 { display: flex; align-items: center; gap: 11px; border: 1px solid #d1d5db; border-radius: 10px; padding: 13px 14px; font-size: 15px; font-weight: 600; color: #111827; background: #fff; cursor: pointer; }
.fa-opt2 input { width: 21px; height: 21px; accent-color: #0d9488; }
.fa-delbtn { color: #b91c1c; }
.fa-locknote { margin-top: 14px; font-size: 12.5px; color: #6b7280; line-height: 1.45; }
.fa-ownres { margin-top: 12px; font-size: 13.5px; color: #1f2a44; background: #f0fdf9; border: 1px solid #99e5d8; border-radius: 8px; padding: 9px 11px; line-height: 1.5; }

/* ===== Pendientes (REC-D, fase 1) ===== */
/* Tarjeta flotante (2026-10-21, pedido de Ronald): los pendientes
   viven SOLO aquí y en su botón del dock; la tarjeta flota sobre la
   página, anclada centrada justo encima de la pastilla (z 45: sobre
   el dock 40, bajo el modal 50 y el toast 99), con su propio scroll
   interno — la página principal no crece. */
.pend-float { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 120px); z-index: 45; width: min(430px, calc(100vw - 24px)); box-sizing: border-box; background: #fff; border: 1px solid rgba(15, 23, 42, .08); border-radius: 18px; box-shadow: 0 14px 34px rgba(15, 23, 42, .22); padding: 14px 16px; max-height: calc(100dvh - 152px); overflow-y: auto; }
.pend-close { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #e5e7eb; background: #fff; color: #374151; font-size: 14px; line-height: 1; cursor: pointer; font-family: inherit; }
/* Botón PENDIENTES en alerta: el círculo se pinta con el rojo de
   peligro de la casa — el fondo del toast de error (.toast.err,
   #7f1d1d) — SOLO cuando hay ≥1 pendiente vigente; mismo glifo y
   misma etiqueta. El anillo de «abierto» acompaña el mismo rojo.
   FLASHEO DISCRETO (2026-10-21, precisión de Ronald antes de
   publicar): en alerta y con la tarjeta CERRADA, el botón pulsa un
   halo suave (box-shadow que se expande y se desvanece, 2.4 s,
   ease-in-out, infinito). El FONDO del círculo NO se anima: queda
   #7f1d1d constante. Con la tarjeta abierta el pulso se detiene
   (manda el anillo estático de «abierto») y con
   prefers-reduced-motion no hay animación alguna. En teal, nada. */
#btn-toggle-pend.pend-alert .round-circle { background: #7f1d1d; animation: pend-halo 2.4s ease-in-out infinite; }
#btn-toggle-pend.pend-alert:active .round-circle { background: #7f1d1d; }
#btn-toggle-pend.pend-alert[aria-expanded="true"] .round-circle { background: #7f1d1d; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #7f1d1d; animation: none; }
@keyframes pend-halo {
  0% { box-shadow: 0 0 0 0 rgba(127, 29, 29, .35); }
  /* Expansión escalada al círculo de 56 px (2026-10-21): 12 px × 56/68 ≈ 10 px. */
  70% { box-shadow: 0 0 0 10px rgba(127, 29, 29, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 29, 29, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #btn-toggle-pend.pend-alert .round-circle { animation: none; }
}
/* Cabecera propia de la tarjeta (NO reutilizar .summary-head: otros
   componentes lo localizan por primera coincidencia en el DOM). */
.pend-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pend-head h2 { margin-bottom: 0; }
.pend-count { display: inline-block; min-width: 22px; text-align: center; background: #b45309; color: #fff; border-radius: 999px; padding: 1px 7px; font-size: 13px; vertical-align: middle; }
.pend-item { border: 1px solid var(--line, #e2e8f0); border-left: 4px solid #0d9488; border-radius: 10px; padding: 10px 12px; margin: 10px 0; background: rgba(13, 148, 136, 0.05); }
.pend-item.pend-overdue { border-left-color: #b45309; background: rgba(180, 83, 9, 0.06); }
.pend-item.pend-draft { border-left-color: #7c3aed; background: rgba(124, 58, 237, 0.06); }
.pend-text { margin: 0 0 8px; }
.pend-detail { opacity: 0.85; font-size: 0.92em; }
.pend-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pend-snooze { display: inline-flex; gap: 6px; align-items: center; font-size: 0.9em; }
.pend-snooze select { max-width: 190px; }
.pend-danger { color: #b91c1c; }
.pend-none { margin: 8px 0; }
.pend-traces { margin-top: 10px; }
.pend-traces ul { margin: 4px 0 0; padding-left: 18px; }
.pend-cfg-title { font-weight: 700; margin: 4px 0; }
.pend-cfg-h { font-weight: 600; margin: 12px 0 4px; }
.pend-cfg-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 6px 0; }
.pend-cfg-row input[type="time"], .pend-sel select, .pend-sel input[type="time"] { margin-left: 6px; }
.pend-sel { display: inline-flex; align-items: center; }
.pend-wds { display: flex; gap: 10px; flex-wrap: wrap; }
.pend-wd { display: inline-flex; gap: 4px; align-items: center; }

/* Ingreso manual con ayuda de IA (2026-10-22): bloque «Describe tu
   comida» dentro del formulario manual de comida. */
.m-ai-text { margin: 10px 0; padding: 10px; border: 1px dashed #0e7c6b; border-radius: 10px; background: #f4faf8; }
.m-ai-text textarea { width: 100%; box-sizing: border-box; margin-top: 4px; }
.m-ai-text .photo-hint { margin: 6px 0; }

/* Vista del cliente del plan — Paquete 6 (2026-10-22): tarjetas por
   ejercicio con foto, marcas locales con RPE, historial de solo
   lectura, tarjeta de sesión y aviso de alineación. */
.train-ex-card { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed #eef1f3; }
.train-ex-card:last-of-type { border-bottom: none; }
.train-ex-card.is-done { background: #f2fbf6; border-radius: 8px; }
.train-ex-photo { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; cursor: pointer; background: #eef1f3; }
.train-ex-info { flex: 1; min-width: 0; }
.train-ex-name { font-weight: 600; color: #1f2a44; }
.train-ex-spec { color: #444; font-size: 13px; margin-top: 1px; }
.train-ex-sub { color: #777; font-size: 12px; margin-top: 1px; }
.train-ex-video { display: inline-block; margin-top: 4px; text-decoration: none; }
.train-ex-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.train-ex-check { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: #065f46; cursor: pointer; }
.train-ex-check input { width: 20px; height: 20px; accent-color: #0e7c6b; cursor: pointer; }
.train-ex-rpe { font-size: 12px; padding: 3px 4px; border: 1px solid #d5dbe1; border-radius: 6px; background: #fff; max-width: 92px; }
.train-ex-rpe:disabled { opacity: .45; }
.train-session { margin-top: 8px; border: 1px solid #e3e9f2; background: #f7fafd; border-radius: 8px; padding: 8px 10px; }
.train-session h5 { margin: 0 0 4px; color: #1f2a44; font-size: 13px; }
.train-block { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 2px 0; }
.train-block span { color: #555; text-align: right; }
.train-align-note { border: 1px solid #f0d9a8; background: #fffaf0; border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.train-align-note p { margin: 0 0 8px; font-size: 14px; color: #5b4a1f; }
.train-align-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== PAQUETE 7: plantillas visibles al cliente + propuestas (§4.8) ===== */
.prop-badge { font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 10px; vertical-align: middle; }
.prop-badge.is-pending { background: #fef3c7; color: #92400e; }
.prop-badge.is-approved { background: #d1fae5; color: #065f46; }
.prop-badge.is-rejected { background: #fee2e2; color: #991b1b; }
.prop-note { font-size: 13px; color: #555; margin-top: 4px; }
.prop-row { align-items: flex-start; }
/* Tarjetas PROPIAS del explorador del cliente (no reutilizan la
   clase .pl-tpl-card del editor: aislar los conteos y el estilo). */
.prop-tpl-card { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid #e9ecef; border-radius: 10px; padding: 8px 10px; margin: 6px 0; }
.prop-tpl-info { min-width: 0; }
.prop-tpl-info b { display: block; font-size: 13.5px; color: #1f2a44; }
.prop-tpl-meta { display: block; font-size: 12px; color: #6b7280; margin-top: 1px; }
.prop-tpl-day { width: 100%; margin-top: 6px; }
.prop-tpl-day h5 { margin: 4px 0; color: #1f2a44; font-size: 13px; }
.prop-form { border: 1px solid #e3e9f2; border-radius: 10px; padding: 10px 12px; margin: 8px 0; background: #fbfcfe; }
.prop-form h4 { margin: 0 0 6px; color: #1f2a44; }
.prop-form-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 6px 0; font-size: 14px; }
.prop-lab { display: block; font-size: 12px; font-weight: 700; color: #55606e; margin: 8px 0 3px; }
.prop-form select, .prop-form input[type="text"], .prop-form textarea { width: 100%; box-sizing: border-box; }
.prop-chosen { font-weight: 600; color: #1f2a44; min-height: 18px; }
.prop-sug { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.prop-sug-item { text-align: left; background: #fff; border: 1px solid #d5dbe1; border-radius: 8px; padding: 6px 8px; cursor: pointer; font-size: 13px; }
.prop-form-actions { display: flex; gap: 8px; margin-top: 10px; }
/* ===== Paquete 8: comparador de evaluaciones + bitácora ND-2 ===== */
.cmp-block { margin-top: 14px; }
.cmp-selects { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; font-size: 13.5px; font-weight: 600; color: #374151; }
.cmp-selects select { margin-left: 6px; padding: 5px 8px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13.5px; background: #fff; }
.cmp-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.cmp-head { border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px; background: #f9fafb; }
.cmp-date { margin: 0 0 2px; font-weight: 800; font-size: 14px; color: #111827; }
.cmp-anchor { margin: 0; font-size: 12.5px; color: #6b7280; }
.cmp-note { margin-top: 8px; }
.cmp-note-title { display: block; font-size: 12.5px; font-weight: 700; color: #374151; margin: 0 0 4px; }
.cmp-note-text { margin: 0; font-size: 13.5px; color: #111827; white-space: pre-wrap; }
.cmp-note textarea { width: 100%; box-sizing: border-box; border: 1px solid #d1d5db; border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13.5px; resize: vertical; }
.cmp-row { margin: 6px 0; }
.cmp-slot { display: block; font-size: 12.5px; font-weight: 700; color: #6b7280; margin-bottom: 4px; }
.cmp-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmp-cell { border: 1px solid #eef2f7; border-radius: 10px; padding: 6px; min-height: 60px; display: flex; align-items: center; justify-content: center; background: #fff; }
.cmp-img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; cursor: zoom-in; }
#client-evals { margin-top: 14px; }
#nd2-box .whist td { font-size: 13px; }

/* ============ REGLA DE DISEÑO — BOTONES SIEMPRE AL CENTRO ============
   (Ronald, 2026-10-22: «Los botones deberían quedar siempre
   justificados al centro siempre».) La regla se aplica a nivel de
   SISTEMA —por contenedor y por clase compartida, nunca parche
   botón a botón— en tres mecanismos:

   (A) BOTÓN INDEPENDIENTE: el botón de acción que vive como hijo
       directo de una tarjeta/panel, de una sección, de un
       formulario o del panel de IA se convierte en bloque de ancho
       ajustado a su contenido y se centra con márgenes automáticos.
       Cubre también el contenido futuro que se pinte en esos
       contenedores con las clases de botón de la casa.
   (B) BOTÓN ÚNICO en un contenedor anónimo: si un <div> contiene
       SOLO un botón de acción (sin hermanos), ese botón se centra
       igual. Los botones con hermanos (parejas, filas) no se ven
       afectados por (B).
   (C) FILAS DE ACCIONES de un mismo paso: el GRUPO se centra y los
       botones conservan su orden y su separación — el pie de modal
       (.modal-foot, ajustado en su propia regla), las acciones del
       panel de IA (.ai-actions), las filas de guardar de la zona
       privada (.fa-btnrow), la fila de retirada específica
       (.privacy-btns), las acciones del formulario de propuestas
       (.prop-form-actions) y las filas de botones dentro de un
       modal (.frow con botones directos).
   Los dos casos de la captura de Ronald se resuelven en las reglas
   propias de cada clase: la pastilla .meal-manual-pill (margen
   automático en ambos lados) y el .perms-toggle (bloque flexible
   centrado en su tarjeta).

   EXCEPCIONES — la posición ES la función y NO se centran:
   · el dock flotante (.rounds-row: la fila ya es un conjunto
     centrado y cada redondo es una pestaña, no un botón suelto);
   · los botones de cerrar «✕» (.pend-close y cierres de modal);
   · los botones DENTRO de filas: cabeceras con título
     (.block-head, .card-head, .pend-head), filas de lista con sus
     acciones (.user-row/.user-actions), filas de tabla (el ✕ del
     diario), acciones de los huecos de foto (.slot-actions) y
     sugerencias de una lista (.prop-sug-item);
   · los selectores segmentados y de navegación (.lang-toggle,
     .auth-tabs, .main-tabs) — son un control, no botones sueltos;
   · los controles dentro de campos de formulario (.pw-eye) y las
     filas de menú a todo ancho (.manage-item: su fila ES el botón);
   · los enlaces de texto (.forgot-link, .logout-link) no son
     botones y quedan fuera de la regla. */
.panel > .btn-primary:not(.face-toggle),
.panel > .btn-secondary:not(.manage-toggle):not(.face-toggle),
.panel > .btn-ghost:not(.face-toggle),
.perms-section > .btn-primary, .perms-section > .btn-secondary, .perms-section > .btn-ghost,
.ai-panel > .btn-primary, .ai-panel > .btn-secondary, .ai-panel > .btn-ghost, .ai-panel > .btn-main,
.modal form > .btn-primary, .modal form > .btn-secondary, .modal form > .btn-ghost, .modal form > .btn-main,
.auth-card form > .btn-primary, .auth-card form > .btn-secondary, .auth-card form > .btn-ghost,
#renew-box > .btn-primary, #renew-box > .btn-ghost,
.m-ai-text > .btn-main {
  display: block; width: fit-content; max-width: 100%; margin-inline: auto;
}
div > .btn-primary:only-child, div > .btn-secondary:only-child,
div > .btn-ghost:only-child, div > .btn-main:only-child {
  display: block; width: fit-content; max-width: 100%; margin-inline: auto;
}
.ai-actions, .fa-btnrow, .privacy-btns, .prop-form-actions { justify-content: center; }
.modal form .frow:has(> button) { display: flex; justify-content: center; gap: 10px; }

/* ===== Paquete «orden descendente + hora» (2026-10-23): la hora de
   registro va junto a la etiqueta de la comida en el detalle ===== */
.meal-time { font-size: 11.5px; font-weight: 600; color: #6b7280; white-space: nowrap; margin-left: 4px; }

/* Composición corporal solo por el entrenador (2026-10-23, desarrollo) */
.compacc-notice { background:#fef3c7; border:1px solid #f59e0b; color:#92400e; border-radius:10px; padding:10px 12px; font-size:13px; margin:8px 0; }
.compacc-box { margin:14px 0; }
/* Módulo Nivel 2 (desarrollo): estimación visual de tipo corporal. */
.bt-badge { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em; color:#92400e; background:#fef3c7; border:1px solid #f59e0b; border-radius:999px; padding:2px 8px; margin-bottom:6px; }
.bt-est { border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; margin:8px 0; background:#f9fafb; font-size:14px; }
.compacc-hist-row { display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:4px 0; border-bottom:1px solid #eef2f7; }

/* Pieza usabilidad 2026-10-23 (desarrollo): guía con cinta, nota de
   porcentajes y paso de encuadre de fotos de progreso. */
.eval-tape { display: block; margin-top: 2px; }
.tape-svg { height: 88px; }
.form-note { color: #92400e; background: #fef3c7; border-radius: 8px; padding: 6px 10px; font-size: 13px; margin: 8px 0 0; }
.frame-stage { position: relative; aspect-ratio: 3 / 4; background: #111827; border-radius: 12px; overflow: hidden; margin: 8px 0; }
.frame-stage video, .frame-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#frame-silhouette { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#frame-silhouette svg { height: 94%; }
#frame-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 96px; font-weight: 700; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.65); }

/* ===== Registro de actividad — REDISEÑO FLOTANTE (2026-10-24) =====
   Sin tira ni panel en la vista: superficies flotantes junto al
   dock (la geometría de .pend-float) y la llamita del total
   diario. El dock pasa a CINCO botones por orden expresa: en
   pantallas estrechas se ajustan leyendas y separación para que
   la pastilla quepa sin desborde (los círculos no se tocan). */
.act-float { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 120px); z-index: 46; width: min(430px, calc(100vw - 24px)); box-sizing: border-box; background: #fff; border: 1px solid rgba(15, 23, 42, .08); border-radius: 18px; box-shadow: 0 14px 34px rgba(15, 23, 42, .22); padding: 14px 16px; max-height: calc(100dvh - 152px); overflow-y: auto; }
.act-sheet { z-index: 47; }
.act-hobby-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 4px; }
.act-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 10px;
  border: 1px solid #ccfbf1; border-radius: 14px; background: #f0fdfa; font: inherit; cursor: pointer; color: #134e4a; }
.act-chip:active { background: #ccfbf1; }
.act-chip-ico { font-size: 24px; line-height: 1; }
.act-chip-lab { font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.2; }
/* Entrada de comida flotante (2026-10-24): los TRES modos de registro
   en UNA fila horizontal fija (no auto-fill: siempre 3 en línea, como
   pidió Ronald), reutilizando el chip de actividad (.act-chip). */
.food-chip-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.food-textarea { width: 100%; box-sizing: border-box; }
/* ✕ compartida en TODAS las hojas superpuestas (2026-10-24, orden de
   Ronald): la misma .pend-close de las hojas flotantes, fijada en la
   esquina superior derecha de la cabecera — en los modales (cuyo
   Cancelar quedaba al pie, fuera de pantalla en el teléfono), en el
   panel de análisis y en el visor de fotos. */
.modal { position: relative; }
.modal-x { position: absolute; top: 10px; right: 12px; margin-left: 0; z-index: 2; }
.ai-panel { position: relative; }
.ai-x { position: absolute; top: 8px; right: 8px; margin-left: 0; z-index: 2; }
.lightbox-x { position: absolute; top: 14px; right: 14px; margin-left: 0; z-index: 2; }
.act-cfg-list { margin: 6px 0 10px; }
.act-cfg-row { padding: 6px 0; border-bottom: 1px dashed #eef2f7; font-size: 14px; color: #1f2a44; }
.act-cfg-actions { display: flex; justify-content: center; margin-top: 10px; }
.act-flame { position: fixed; right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 122px); z-index: 44;
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 58px;
  padding: 8px 10px 7px; background: rgba(255, 255, 255, .97); border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px; box-shadow: 0 8px 22px rgba(15, 23, 42, .20); font: inherit; cursor: pointer; }
.act-flame-ico { font-size: 24px; line-height: 1.1; display: inline-block; transform-origin: 50% 90%; animation: act-flick 1.6s ease-in-out infinite; }
.act-flame-num { font-size: 12.5px; font-weight: 800; color: #b45309; white-space: nowrap; }
@keyframes act-flick { 0%, 100% { transform: scale(1) rotate(-2deg); opacity: 1; } 50% { transform: scale(1.16) rotate(2.5deg); opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .act-flame-ico { animation: none; } }
@media (max-width: 480px) {
  .actions-dock { padding: 8px 10px; }
  /* Corrección reprueba (2026-10-24): a 390 px las etiquetas ES del
     dock (ENTRENAMIENTO, PENDIENTES…) se tocaban entre sí — la fila
     se encogía y los rótulos, en nowrap, se derramaban unos sobre
     otros y el conjunto se leía como cajas pegadas en vez de los
     cinco círculos del diseño. Círculos de 52 px, rótulo de 9 px
     con tracking cerrado y hueco de 4 px: la fila cabe entera y
     cada etiqueta respira. */
  .rounds-row { gap: 4px; }
  .round-circle { width: 52px; height: 52px; }
  .round-label { font-size: 9px; letter-spacing: -.2px; }
}
@media (max-width: 380px) {
  .round-circle { width: 48px; height: 48px; }
  .round-circle svg { width: 26px; height: 26px; }
  .round-label { font-size: 9px; }
}
.act-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.act-date { color: #6b7280; font-size: 13px; }
.act-note { color: #6b7280; font-size: 12.5px; line-height: 1.45; margin: 6px 0; }
.act-est-note { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 8px 10px; color: #92400e; }
.act-wref { font-size: 13px; color: #374151; margin-top: 8px; }
.act-sec { border-top: 1px solid #eef2f7; padding: 10px 0 4px; margin-top: 10px; }
.act-sec-title { margin: 0 0 8px; font-size: 14px; color: #134e4a; }
.act-lab { display: block; font-size: 13px; color: #374151; margin: 8px 0; }
.act-lab input, .act-lab select { display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  border: 1px solid #d1d5db; border-radius: 10px; font: inherit; font-size: 14px; background: #fff; }
.act-steps-row { display: flex; gap: 8px; align-items: center; }
.act-steps-row input { flex: 1; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 10px; font: inherit; font-size: 14px; }
.act-steps-info { font-size: 13px; color: #0f766e; font-weight: 600; margin-top: 6px; }
.act-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
@media (max-width: 420px) { .act-grid { grid-template-columns: 1fr 1fr; } }
.act-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px dashed #eef2f7; }
.act-row-main { flex: 1; min-width: 0; }
.act-row-meta { display: block; font-size: 12px; color: #6b7280; }
.act-row-kcal { font-weight: 700; color: #0f766e; white-space: nowrap; font-size: 13.5px; }
.act-row-note { font-size: 12px; color: #6b7280; padding: 2px 0 6px; }
.act-tag { background: #fef3c7; color: #92400e; border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 700; }
.act-line { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13.5px; color: #374151; }
.act-line b { white-space: nowrap; }
.act-total { border-top: 1px solid #e5e7eb; margin-top: 4px; padding-top: 8px; font-weight: 700; }
.act-noweight { margin-top: 8px; }
/* ===== Control de IA — interruptor del administrador (desarrollo
   2026-10-24; SIN desplegar) ===== */
.aictl-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.aictl-switch { position: relative; display: inline-block; width: 52px; height: 30px; flex: 0 0 auto; }
.aictl-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.aictl-track { position: absolute; inset: 0; background: #d1d5db; border-radius: 999px; pointer-events: none; transition: background .15s; }
.aictl-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .15s; }
.aictl-switch input:checked + .aictl-track { background: #00aca1; }
.aictl-switch input:checked + .aictl-track::after { left: 25px; }
.aictl-switch input:disabled { cursor: wait; }

/* ============ DOSSIER DEL ENTRENADOR (2026-10-24, SOLO desarrollo) =====   Estilo fijado por Ronald: LUJO CLARO profesional, marca RONBO —
   teal principal, verde oscuro profundo, dorado SUAVE solo para
   acentos premium, fondo blanco hueso, texto carbón. La propuesta
   oscura quedó descartada. Portada con foto a ancho completo y
   degradado de teal a oscuro; tarjetas blancas con bordes amplios
   y sombra suave; mucho aire. */
.dos-backdrop { position: fixed; inset: 0; background: rgba(9, 24, 21, .58); z-index: 1200; display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; padding: 16px 10px 28px; }
.dos-sheet { background: #FAF8F3; color: #22262B; width: min(680px, 100%); border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.dos-cover { position: relative; display: flex; align-items: flex-end; min-height: 240px; background: linear-gradient(135deg, #0d9488 0%, #065f46 55%, #04211d 100%); }
.dos-cover img.dos-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dos-cover-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,148,136,.16) 0%, rgba(5,43,38,.55) 55%, rgba(3,30,27,.92) 100%); }
.dos-cover-body { position: relative; width: 100%; padding: 96px 22px 18px; color: #fff; }
.dos-name { font-size: 30px; line-height: 1.12; font-weight: 800; margin: 0; letter-spacing: .01em; }
.dos-headline { color: #E9D193; font-size: 15.5px; font-weight: 600; margin: 5px 0 0; }
.dos-cover-rating { margin-top: 9px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dos-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: #05332e; font-size: 17px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.dos-body { padding: 16px 16px 6px; }
.dos-card { background: #fff; border-radius: 18px; padding: 15px 17px; box-shadow: 0 2px 12px rgba(23,48,42,.07); margin-bottom: 12px; }
.dos-sec { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #0f766e; margin: 0 0 9px; }
.dos-about { font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; margin: 0; }
.dos-stars { color: #C6A15B; font-size: 19px; letter-spacing: 2.5px; }
.dos-avg { font-size: 26px; font-weight: 800; color: #05332e; }
.dos-rate-row { display: flex; align-items: center; gap: 4px; margin: 6px 0 2px; }
.dos-star-btn { background: none; border: none; font-size: 31px; line-height: 1; color: #DCD5BF; cursor: pointer; padding: 2px 3px; }
.dos-star-btn.on { color: #C6A15B; }
.dos-goldband { background: linear-gradient(118deg, #B8892E 0%, #E9D193 52%, #C6A15B 100%); border-radius: 18px; padding: 15px 17px; margin-bottom: 12px; box-shadow: 0 4px 16px rgba(160,120,40,.28); }
.dos-goldband .dos-sec { color: #5B4708; }
.dos-seal { display: inline-block; background: rgba(255,255,255,.88); border: 1.5px solid #8A6D1F; color: #5B4708; font-weight: 800; font-size: 14px; border-radius: 999px; padding: 7px 14px; margin: 0 7px 7px 0; }
.dos-kv { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.dos-years { font-size: 21px; font-weight: 800; color: #05332e; }
.dos-tag { display: inline-block; background: #F1EFE7; color: #33383E; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; margin: 0 6px 6px 0; }
.dos-chip { display: inline-block; border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 700; margin: 0 6px 6px 0; color: #fff; }
.dos-chip.presencial { background: #0d9488; }
.dos-chip.hibrido { background: #065f46; }
.dos-chip.virtual { background: #fff; color: #8A6D1F; border: 1.5px solid #C6A15B; }
.dos-cert { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px dashed #E6E0CF; }
.dos-cert:last-child { border-bottom: none; padding-bottom: 2px; }
.dos-cert-name { font-weight: 700; font-size: 14.5px; }
.dos-cert-sub { color: #6B7280; font-size: 13px; margin-top: 1px; }
.dos-pill { flex-shrink: 0; font-size: 11px; font-weight: 800; letter-spacing: .03em; border-radius: 999px; padding: 3px 10px; }
.dos-pill.ok { background: #D1FAE5; color: #065F46; }
.dos-pill.exp { background: #FEE2E2; color: #991B1B; }
.dos-place { padding: 8px 0; border-bottom: 1px dashed #E6E0CF; font-size: 14px; }
.dos-place:last-child { border-bottom: none; }
.dos-foot { padding: 2px 16px 18px; }
.dos-choose { width: 100%; background: #0d9488; color: #fff; border: none; border-radius: 12px; padding: 14px 18px; font-size: 15.5px; font-weight: 800; cursor: pointer; }
.dos-choose:hover { background: #0f766e; }
.dos-choose.wait { background: #fff; color: #0f766e; border: 2px solid #0d9488; }
.dos-current { text-align: center; font-weight: 700; color: #065F46; padding: 10px 0 2px; }
/* Editor del dossier (superficie del propio entrenador) */
.dos-cert-row, .dos-place-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 7px; }
.dos-cert-row input, .dos-place-row input, .dos-place-row select { flex: 1 1 110px; min-width: 0; }
.dos-cert-row input.yr, .dos-place-row input.yr { flex: 0 1 76px; }
.dos-photo-prev { width: 100%; max-height: 170px; object-fit: cover; border-radius: 12px; margin: 6px 0; display: block; }

/* ===== «Mi perfil» (perfil-visible, 2026-10-24) =====
   Tarjeta básica del usuario con sesión: foto grande, identidad y
   filas dato/valor con lo que la app ya almacena. */
.myprof-head { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; }
.myprof-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid #0d9488; flex-shrink: 0; }
.myprof-id { font-size: 15px; line-height: 1.4; min-width: 0; overflow-wrap: break-word; }
.myprof-id .muted { font-size: 13px; overflow-wrap: break-word; }
.myprof-row { display: flex; gap: 10px; align-items: baseline; margin: 8px 0 0; font-size: 14px; }
.myprof-k { color: #6b7280; flex: 0 0 42%; }
.myprof-v { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

/* ===== Formulario del dossier en filas limpias (perfil-visible,
   2026-10-24) =====
   Evidencia: la captura de Ronald a 390 px — etiquetas y campos se
   mezclaban EN LÍNEA (titular/presentación/años/contextos encimados,
   casillas desalineadas) porque las etiquetas fluían en línea con su
   campo. Ahora cada etiqueta va SOBRE su campo, los campos ocupan el
   ancho completo y los contextos forman una rejilla ordenada de
   2 columnas. Sin cambios de campos, orden ni textos: solo la
   presentación del formulario (.dos-form). */
.dos-form label.dos-field { display: block; margin-top: 12px; }
.dos-form label.dos-field input[type="text"],
.dos-form label.dos-field input[type="number"],
.dos-form label.dos-field textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 5px; padding: 9px 11px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; color: #1f2937; }
.dos-form .dos-ctx-group { margin-top: 12px; }
.dos-form .dos-ctx-title { display: block; margin-bottom: 6px; }
.dos-form .dos-ctx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.dos-form label.dos-ctx-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; font-size: 13.5px; color: #1f2937; }
.dos-form .dos-ctx-item input { width: 17px; height: 17px; flex: none; margin: 0; accent-color: #0d9488; }
.dos-form .dos-section-title { margin-top: 16px; }
.dos-mail-box{margin:2px 0 12px}
.dos-mail-text{width:100%;box-sizing:border-box;border:1px solid #E7E1D3;border-radius:12px;padding:10px 12px;font:13px/1.55 inherit;background:#fff;color:#263238;resize:vertical}
.dos-pool-links{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px 10px}
#reg-dossier-links{margin:4px 0 8px;display:flex;flex-wrap:wrap;gap:4px 10px}
.pend-check{background:#fff;border:1px solid #E7E1D3;border-radius:14px;padding:10px 12px;margin:0 0 10px}
.pend-check-title{font-weight:700;color:#065f46;margin:0 0 4px}
.pend-check ul{list-style:none;margin:0;padding:0;font-size:13px;color:#374151}
.pend-check li{margin:2px 0}
#role-pend-card .pend-card{border-left:4px solid #0d9488}
=======
/* MÓDULO H — selector de unidades (P4-3 Etapa 1, desarrollo) */
.units-group { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.units-glabel { font-weight: 600; min-width: 76px; }

/* MÓDULO A — declaración de atleta en el espacio privado (P4-3 Etapa 3, desarrollo) */
.fa-athlete { margin-top: 14px; border-top: 1px solid #e5e7eb; padding-top: 10px; }
.fa-athtitle { margin: 0 0 6px; font-size: 15px; }

/* MÓDULO D — entrenamiento interactivo (P4-3 Etapa 4, desarrollo) */
.train-sets { margin: 8px 0 2px; border-top: 1px dashed #e5e7eb; padding-top: 6px; }
.train-set-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; flex-wrap: wrap; }
.train-set-n { font-size: 12px; color: #6b7280; min-width: 74px; }
.train-set-in { width: 84px; padding: 5px 7px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; }
.train-set-unit { font-size: 12px; color: #6b7280; }
.train-set-hist { font-size: 12px; color: #4b5563; margin-top: 4px; }
.train-status, .train-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid transparent; }
.train-status.st-done, .train-chip.st-done { background: #e7f6ee; color: #157347; border-color: #bfe6cf; }
.train-status.st-partial, .train-chip.st-partial { background: #fff4e0; color: #9a6200; border-color: #ffe1a8; }
.train-status.st-skipped, .train-chip.st-skipped { background: #eef0f3; color: #5b6470; border-color: #d8dde3; }
.train-week { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.train-week-title { font-size: 12px; font-weight: 700; color: #374151; }
.train-week-sum { font-size: 12px; color: #4b5563; }

/* MÓDULO B — referencias educativas (P4-3 Etapa 2, desarrollo) */
.fb2-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed #e5e7eb; font-size: 13px; }
.fb2-limits { background: #fff8e6; border: 1px solid #ffe1a8; color: #7a5200; border-radius: 10px; padding: 8px 10px; font-size: 12px; margin: 8px 0; }
.fb2-amdr { margin-top: 8px; font-size: 13px; }
.fa-b2note { margin-top: 12px; font-size: 12px; color: #6b7280; border-top: 1px solid #e5e7eb; padding-top: 8px; }

/* N-09 — permisos de biblioteca y plantillas (2026-10-23, desarrollo) */
.tpl-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.tpl-badge { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 8px; border: 1px solid #d1d5db; background: #f3f4f6; color: #374151; }
.tpl-badge-factory { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.tpl-badge-trainer { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.tpl-badge-private { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.tpl-byline { font-size: 11px; color: #6b7280; }
/* Biblioteca comunitaria (2026-10-24): insignias de estado del aporte */
.lib-badge { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 8px; border: 1px solid #d1d5db; background: #f3f4f6; color: #374151; white-space: nowrap; }
.lib-st-ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.lib-st-wait { background: #fff8e6; border-color: #ffe1a8; color: #7a5200; }
.lib-st-no { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
#lib-pending-box { border: 1px solid #ffe1a8; background: #fffaf0; border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
#lib-mine-box { margin-top: 18px; }
.tpl-lock { font-size: 11px; color: #9ca3af; white-space: nowrap; }
.pl-tpl-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pl-tpl-n09 { border-top: 1px dashed #e5e7eb; margin-top: 8px; padding-top: 8px; }
.pl-tpl-n09 .frow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.myb-day { border: 1px solid #e9ecef; border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.myb-day input[type="text"] { margin: 3px 0; }
.myb-ex { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.myb-ex-name { font-weight: 600; font-size: 13px; flex: 1 1 130px; }
.myb-ex input[type="text"] { flex: 0 1 90px; }
#myb-name { width: 100%; margin: 6px 0; }

/* ===== INSTALABLE PWA (2026-10-25) =====
   Tarjeta de instalación en la pantalla de acceso y fila en
   «Mi perfil». Todo aditivo: ninguna regla existente cambia. */
.pwa-box { position: relative; margin-top: 16px; padding: 14px 34px 14px 14px; background: #e6f7f4; border: 1px solid #bfe8df; border-radius: 12px; text-align: center; }
.pwa-box .pwa-install-btn { width: 100%; }
.pwa-close { position: absolute; top: 4px; right: 6px; background: none; border: none; color: #6b7280; font-size: 15px; line-height: 1; padding: 6px; cursor: pointer; }
.pwa-guide { font-size: 13px; color: #0f4c45; margin: 0; line-height: 1.45; }
.pwa-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: 12px 16px; margin-bottom: 14px; }
.pwa-row-ico { font-size: 18px; }
.pwa-row-label { font-weight: 700; font-size: 14px; color: #1f2a44; }
.pwa-row .pwa-guide { flex: 1 1 100%; }
.pwa-installed { font-size: 13px; font-weight: 600; color: #178a50; }
/* Áreas seguras (muesca) solo cuando el viewport las expone
   (viewport-fit=cover, app instalada): en el navegador normal env()
   vale 0 y el relleno queda en los 16px de siempre. */
body { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }