/* css/screens/coach/rutinas.css */
.co-exc { background:var(--card); border:1px solid var(--border); border-radius:6px; margin-bottom:8px; }

.co-exc-open { border-color:var(--blue-2); }

/* ---- Card colapsada: una sola fila compacta, ver exerciseCard() ---- */
.co-exc-collapsed { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; }

.co-exc-swatch { width:8px; height:22px; border-radius:2px; flex-shrink:0; }

.co-exc-cname { flex:1; min-width:0; font-weight:700; color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.co-exc-badge { flex-shrink:0; font-size:11px; font-weight:700; color:var(--blue-2); background:color-mix(in srgb, var(--gize-blue) 14%, transparent); padding:3px 8px; border-radius:20px; white-space:nowrap; }

.co-exc-rirtxt { flex-shrink:0; font-size: var(--text-meta); color:var(--txt-3); white-space:nowrap; }

@media (max-width:420px){
    .co-exc-rirtxt { display:none; }
  }

.co-exc-icon-btn { flex-shrink:0; width:28px; height:28px; display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--txt-3); cursor:pointer; padding:0; border-radius:4px; }

.co-exc-icon-btn svg { width:var(--icon-md); height:var(--icon-md); }

.co-exc-icon-btn:hover { background:var(--card-2); color:var(--txt); }

.co-exc-icon-btn.danger:hover { color:var(--red); }

.co-exc-chevron { flex-shrink:0; display:flex; color:var(--txt-3); transition:transform .15s; }

.co-exc-chevron svg { width:var(--icon-md); height:var(--icon-md); }

.co-exc-chevron.open { transform:rotate(180deg); }

.co-exc-menu { display:flex; flex-direction:column; gap:2px; padding:6px 12px 10px 40px; }

.co-exc-menu button { text-align:left; background:none; border:none; color:var(--txt-2); font-size: var(--text-meta); padding:7px 8px; border-radius:4px; cursor:pointer; }

.co-exc-menu button:hover { background:var(--card-2); color:var(--txt); }

.co-exc-menu button[disabled] { opacity:.35; cursor:default; }

.co-exc-menu button[disabled]:hover { background:none; color:var(--txt-2); }

/* ---- Card expandida ---- */
.co-exc-head { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; }

.co-exc-name { flex:1; min-width:0; background:var(--card-2); border:1px solid var(--border); border-radius:4px; padding:9px 10px; color:var(--txt); font-size: var(--text-body); font-weight:600; }

.co-exc-body { padding:0 12px 12px; }

.co-exc-btn { flex-shrink:0; width:32px; height:32px; background:var(--card-2); border:1px solid var(--border); border-radius:4px; color:var(--txt-2); cursor:pointer; font-size: var(--text-body); }

.co-set-head { display:grid; grid-template-columns: 26px 1fr 1fr 24px; gap:8px; margin:12px 0 6px; padding:0 2px; }

.co-set-head span { font-size:9px; color:var(--txt-3); text-transform:uppercase; letter-spacing:.05em; font-weight:700; }

.co-set-row { display:grid; grid-template-columns: 26px 1fr 1fr 24px; gap:8px; align-items:center; margin-bottom:6px; }

.co-set-n { width:22px; height:22px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--card-2); border-radius:3px; color:var(--txt-3); font-size:11px; font-family:monospace; }

.co-target { min-width:0; background:var(--card-2); border:1px solid var(--border); border-radius:4px; padding:8px; color:var(--txt); font-size: var(--text-body); text-align:center; font-variant-numeric:tabular-nums; }

.co-set-rm { flex-shrink:0; background:none; border:none; color:var(--txt-3); cursor:pointer; font-size: var(--text-meta); padding:4px 6px; }

.co-set-add { width:100%; margin-top:4px; background:none; border:1px dashed var(--border); border-radius:4px; color:var(--txt-2); font-size: var(--text-meta); padding:8px; cursor:pointer; }

/* Link de video / Ver progreso: <details> nativo, colapsado por defecto, sin JS extra */
.co-exc-fold { margin-top:12px; border-top:1px solid var(--border); padding-top:10px; }

.co-exc-fold summary { cursor:pointer; font-size: var(--text-meta); color:var(--blue-2); font-weight:600; list-style:none; }

.co-exc-fold summary::-webkit-details-marker { display:none; }

.co-exc-fold summary::before { content:"▸ "; }

.co-exc-fold[open] summary::before { content:"▾ "; }

.co-exc-fold-hint { color:var(--txt-3); font-weight:400; }

.co-exc-fold .co-note-wrap:first-of-type { margin-top:10px; }

.cp-sub { font-size: var(--text-meta); color:var(--txt-3); margin-bottom:14px; line-height:1.5; }

.cp-clist { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }

.cp-copt { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; background:var(--card-2); border:1px solid var(--border); border-radius:5px; font-size: var(--text-body); color:var(--txt); font-weight:600; cursor:pointer; }

.cp-copt:hover { border-color:var(--green); color:var(--green); }

.cp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }

.cp-title { font-size:18px; font-weight:800; color:var(--txt); }

.cp-x { background:none; border:none; color:var(--txt-3); font-size:16px; cursor:pointer; }

.cp-step { font-size: var(--text-meta); color:var(--txt-3); margin-bottom:10px; text-transform:uppercase; letter-spacing:.08em; }

.cp-cats { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }

.cp-cat { padding:20px 12px; background:var(--card-2); border:1px solid var(--border); border-radius:4px; color:var(--txt); font-size: var(--text-body); font-weight:700; cursor:pointer; }

.cp-cat:hover { border-color:var(--blue); color:var(--blue); }

.cp-bar { display:flex; align-items:center; gap:12px; margin-bottom:12px; }

.cp-back { background:none; border:1px solid var(--border); color:var(--txt-2); font-size: var(--text-meta); padding:7px 11px; border-radius:4px; cursor:pointer; }

.cp-catname { font-size: var(--text-body); color:var(--txt); font-weight:700; }

.cp-exs { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; }

.cp-ex { text-align:left; padding:12px; background:var(--card-2); border:1px solid var(--border); border-radius:4px; color:var(--txt); font-size: var(--text-body); cursor:pointer; }

.cp-ex:hover { border-color:var(--blue); color:var(--blue); }

.cp-custom { width:100%; margin-top:16px; background:none; border:1px dashed var(--border); border-radius:4px; color:var(--blue-2); font-size: var(--text-meta); padding:12px; cursor:pointer; }

.co-daytabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }

.co-daytab { padding:8px 12px; border-radius:4px; background:var(--card); border:1px solid var(--border); color:var(--txt-2); font-size: var(--text-meta); font-weight:600; cursor:pointer; }

.co-dayname { flex:1; min-width:0; background:var(--card-2); border:1px solid var(--border); border-radius:4px; padding:11px 12px; color:var(--txt); font-size: var(--text-body); font-weight:600; }

.co-day-del { flex-shrink:0; background:none; border:1px solid var(--border); color:var(--red); font-size: var(--text-meta); padding:0 12px; border-radius:4px; cursor:pointer; }

.co-rt-ins { display:block; width:100%; height:20px; margin:0 0 6px; padding:0; background:none; border:1px dashed var(--border); border-radius:4px; color:var(--txt-3); font-size: var(--text-meta); line-height:1; cursor:pointer; opacity:.45; }

.co-rt-ins:hover { opacity:1; border-color:var(--blue); color:var(--blue); }

.co-rt-add { flex-shrink:0; background:var(--blue); color:var(--gize-text); border:none; font-size: var(--text-meta); font-weight:700; padding:9px 14px; border-radius:4px; cursor:pointer; }

.co-exc-prog { margin-top:12px; }

/* ---- Card de día: nombre + navegación + stats + nota, ver renderCoachRoutine() ---- */
.co-day-card { background:var(--card); border:1px solid var(--border); border-radius:6px; padding:14px; margin-bottom:16px; }

.co-day-head-row { display:flex; gap:8px; }

.co-daynav-btn { flex-shrink:0; width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:var(--card-2); border:1px solid var(--border); border-radius:4px; color:var(--txt-2); cursor:pointer; }

.co-daynav-btn svg { width:var(--icon-md); height:var(--icon-md); }

.co-daystats { display:flex; gap:18px; margin:12px 2px 0; }

.co-stat { font-size: var(--text-meta); color:var(--txt-2); }

.co-stat b { color:var(--blue-2); font-size: var(--text-emphasis); font-weight:800; margin-right:3px; font-variant-numeric:tabular-nums; }

.co-exc-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:22px 2px 10px; }

.co-exc-sets { flex-shrink:0; font-size:11px; color:var(--txt-3); font-weight:700; white-space:nowrap; padding:0 4px; }

.co-page-title { font-size:20px; font-weight:800; color:var(--txt); margin:4px 2px 16px; }

.plan-edit .pl-sub { font-size: var(--text-meta); color:var(--blue-2); text-transform:uppercase; letter-spacing:.06em; font-weight:800; margin:0; }

.pl-sub-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }

.pl-toggle { flex-shrink:0; background:none; border:1px solid var(--border); color:var(--txt-3); font-size:11px; font-weight:600; padding:5px 10px; border-radius:20px; cursor:pointer; }

.pl-toggle:hover { border-color:var(--blue-2); color:var(--blue-2); }

.pl-divider { border-top:1px solid var(--border); margin:16px 0; }

/* las columnas de "Indicaciones"/"Personalización del menú" llevan listas de texto largas
     (a diferencia de los inputs cortos de la Ficha), así que en celular van apiladas. */
.plan-edit .ci-grid-2 { grid-template-columns:1fr; }

@media (min-width:560px){ .plan-edit .ci-grid-2 { grid-template-columns:1fr 1fr; gap:20px; } }

/* Las 8 columnas de la tabla de comidas no entran en un celular sin achicharrarse —
     en vez de comprimir cada input a un ancho inservible, se le da un ancho mínimo
     razonable y se scrollea horizontal (mismo patrón que cualquier tabla ancha en móvil). */
.ml-tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -2px 6px; padding:0 2px; }

.ml-head, .ml-row, .ml-tot { display:grid; grid-template-columns: 1.4fr .8fr .7fr .8fr .8fr .8fr 1.4fr 28px; gap:5px; align-items:center; min-width:620px; }

.ml-head { font-size:9px; color:var(--txt-3); text-transform:uppercase; letter-spacing:.04em; font-weight:700; margin-bottom:5px; padding:0 2px; }

.ml-row { margin-bottom:5px; }

.ml-tot { font-size: var(--text-meta); font-weight:800; color:var(--gize-text); padding:9px 8px; border-radius:5px; background:var(--gize-surface-2); margin-top:6px; }

.ml-in { background:var(--card-2); border:1px solid var(--border); border-radius:4px; padding:8px 6px; color:var(--txt); font-size: var(--text-meta); min-width:0; }

.ml-del { background:none; border:none; color:var(--txt-3); cursor:pointer; font-size: var(--text-meta); }

.ml-del:hover { color:var(--red); }

.ml-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.pl-add { background:none; border:1px dashed var(--gize-border); border-radius:4px; color:var(--blue-2); font-size: var(--text-meta); padding:8px 12px; cursor:pointer; margin-top:6px; }

.pl-add.sm { padding:5px 10px; font-size:11px; }

.le-row, .sw-row { display:flex; gap:6px; align-items:center; margin-bottom:5px; }

.sw-arrow { color:var(--txt-3); flex-shrink:0; }

.pl-help { font-size:11px; color:var(--txt-3); font-style:italic; line-height:1.5; margin:0 0 12px; padding:8px 10px; background:var(--card-2); border-radius:4px; border-left:2px solid var(--blue); }

.opt-sec { background:var(--card-2); border:1px solid var(--border); border-radius:4px; padding:12px; margin-bottom:10px; }

.opt-sec-head { display:flex; gap:6px; margin-bottom:10px; }

.opt-sectitle { flex:1; font-weight:800; color:var(--txt); font-size: var(--text-body); }

.opt-item { background:var(--card); border:1px solid var(--border); border-radius:4px; padding:10px; margin-bottom:8px; }

.opt-item-head { display:flex; gap:6px; margin-bottom:6px; }

.opt-label { flex:1; color:var(--gize-blue); font-weight:700; }

/* Opciones A/B/C…: todas con el mismo borde neutro. Se diferencian por la letra
   (en azul), no por color: el color marca estado, no identidad (brand/BRAND.md).
   La que se está editando lleva borde azul y resplandor suave. */
.opt-item:focus-within, body.silk-coach .opt-item:focus-within {
    border-color:var(--gize-blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--gize-blue) 18%, transparent); }

.opt-body { width:100%; background:var(--card-2); border:1px solid var(--border); border-radius:4px; padding:9px 10px; color:var(--txt); font-size: var(--text-body); font-family:inherit; resize:vertical; }

.mc-green-t { color:var(--green) !important; }

.rt-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }

.ap-days { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; max-height:40vh; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }

.ap-chk { width:18px; height:18px; border:1.5px solid var(--border); border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--gize-text); flex-shrink:0; }

.ap-dname { flex:1; font-weight:600; }

.ap-meta { font-size:11px; color:var(--txt-3); margin-left:auto; }

.ap-radio { flex:1; text-align:center; padding:9px; background:var(--card-2); border:1px solid var(--border); border-radius:5px; font-size:11px; color:var(--txt-3); cursor:pointer; font-weight:600; line-height:1.3; }

.bw-grid { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 4px; }

.bw { width:38px; height:38px; background:var(--card-2); border:1px solid var(--border); border-radius:3px; color:var(--txt-2); font-size: var(--text-meta); font-weight:700; cursor:pointer; }

.cp-macros { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px; }

.cp-f label { display:block; font-size:10px; color:var(--txt-3); text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-bottom:5px; }

.co-prow { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:10px; }

.co-prow .co-note-lbl { margin-bottom:0; }

.co-pin { width:74px; background:var(--card-2); border:1px solid var(--border); border-radius:4px; padding:7px; color:var(--txt); font-size: var(--text-meta); text-align:center; }

.co-pin.sm { width:52px; color:var(--blue-2); font-weight:800; }

.co-note-wrap { margin-top:10px; }

.co-note-lbl { display:block; font-size:10px; color:var(--txt-3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px; font-weight:600; }

.co-exc-btn[disabled] { opacity:.3; cursor:default; }