/* ===== Motroco · Calculadora de geles v1 =====
   Solo lo propio de esta página. Va DESPUÉS de ../../styles.css y ../herramientas.v1.css. */

/* ----- Selector de botones: el de la calculadora de hidratos ----- */
.seg{border:0;margin:0;padding:0;min-width:0;display:grid;gap:8px}
.seg legend{padding:0;margin:0 0 8px;float:left;width:100%}
.seg legend+*{clear:both}
.seg-op{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border:2px solid var(--ocean);border-radius:999px;overflow:hidden;background:#fff}
.seg-op input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.tool .seg-op label{display:flex;align-items:center;justify-content:center;min-height:44px;padding:.35rem .5rem;margin:0;font-family:var(--font-display);font-size:.95rem;font-weight:700;line-height:1.15;text-align:center;color:var(--navy);cursor:pointer}
.tool .seg-op label+input+label{border-left:1px solid var(--track)}
.tool .seg-op label:hover{background:var(--summit);color:var(--navy)}
.tool .seg-op input:checked+label{background:var(--deep);color:#fff}
.seg-op input:focus-visible+label{outline:3px solid var(--orange);outline-offset:-3px;border-radius:999px}

/* ----- Sodio o sal: lo que ponga la etiqueta ----- */
.gl-sal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:center}

/* ----- Distancia: las estándar y «Personalizada», que abre el campo de km ----- */
.seg-op.gl-dist{grid-auto-flow:row;grid-template-columns:.7fr 1fr 1fr 1.35fr}
.tool .gl-dist label{padding:.35rem .2rem;font-size:.82rem}
.campo[hidden]{display:none}

/* ----- Estrategia de ingesta: adecuada en verde, baja y alta en amarillo ----- */
.tool .gl-est .seg-op{border-color:var(--border)}
.tool .gl-est .seg-op label{flex-direction:column;gap:1px;background:#fdf3d0;color:#5c4400}
.tool .gl-est .seg-op label[for=e1]{background:#e4efe7;color:#1d4a2c}
.tool .gl-est .seg-op label:hover{background:#fae9ac;color:#5c4400}
.tool .gl-est .seg-op label[for=e1]:hover{background:#d3e5d8;color:#1d4a2c}
.tool .gl-est .seg-op input:checked+label{background:#f2c230;color:#2b2000}
.tool .gl-est .seg-op input:checked+label[for=e1]{background:#3f6f4f;color:#fff}
.gl-est small{font-family:var(--font-body);font-size:.74rem;font-weight:500}
.gl-est small:empty{display:none}

/* ----- Combinar geles: oculto hasta pulsar el botón ----- */
.gl-combinar .btn{white-space:normal}
.gl-mezcla{display:grid;gap:10px}
.gl-mezcla[hidden],.tool .btn[hidden]{display:none}
.gl-otros{display:grid;gap:10px}
.gl-otro{display:grid;gap:12px;padding:6px 12px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--summit)}
.gl-otro-cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gl-otro-leg{font-size:.88rem;font-weight:600;color:var(--text)}

/* ----- Resultado ----- */
.gl-tit{margin:0;font-family:var(--font-display);font-weight:800;font-size:1.9rem;line-height:1.1;color:#fff}
.gl-sub{margin:.3rem 0 0;font-size:.98rem;line-height:1.4;color:rgba(255,255,255,.84)}

/* ----- La línea de tomas: una fila por cada 4 h como mucho ----- */
.gl-graf{display:grid;gap:6px;padding:0 14px}
.gl-graf[hidden]{display:none}
.gl-fila{position:relative;height:106px}
.gl-pista{position:absolute;left:0;right:0;top:43px;height:4px;border-radius:999px;background:rgba(255,255,255,.3)}
.gl-avi{position:absolute;top:37px;width:2px;height:16px;margin-left:-1px;background:rgba(255,255,255,.55)}
.gl-salida{position:absolute;top:33px;width:2px;height:24px;margin-left:-1px;background:#fff}
.gl-toma{position:absolute;top:0;width:0;height:0}
.gl-toma i{position:absolute;left:-8px;top:37px;width:16px;height:16px;border-radius:50%;background:var(--orange);border:2px solid var(--deep)}
.gl-toma b,.gl-toma small{position:absolute;left:0;transform:translateX(-50%);line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
.gl-toma b{top:18px;font-family:var(--font-display);font-size:.84rem;font-weight:700;color:#fff}
.gl-toma small{top:55px;font-size:.76rem;font-weight:500;color:rgba(255,255,255,.86)}
.gl-toma.is-lejos b{top:0}
.gl-toma.is-lejos small{top:70px}
.gl-fin{position:absolute;left:-14px;bottom:0;font-size:.78rem;line-height:1.2;color:rgba(255,255,255,.72)}
.gl-fin.is-meta{left:auto;right:-14px}
.gl-fin.is-salida{transform:translateX(-50%)}

/* Un color por gel cuando se combinan */
.gl-c1 i{background:#fff}
.gl-c2 i{background:var(--light)}
.gl-c3 i{background:#7cc795}
.gl-leyenda{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;list-style:none;font-size:.86rem;font-weight:600;color:#fff}
.gl-leyenda[hidden]{display:none}
.gl-leyenda li{display:flex;align-items:center;gap:6px}
.gl-leyenda i{width:12px;height:12px;border-radius:50%;background:var(--orange)}
.gl-leyenda .gl-c1 i{background:#fff}
.gl-leyenda .gl-c2 i{background:var(--light)}
.gl-leyenda .gl-c3 i{background:#7cc795}
.gl-leyenda .gl-ley-avi{font-weight:500;color:rgba(255,255,255,.84)}
.gl-leyenda .gl-ley-avi i{width:2px;height:14px;border-radius:0;background:rgba(255,255,255,.55)}

/* ----- Debajo del panel ----- */
.gl-notas{display:grid;gap:10px;margin-top:18px;font-size:.96rem;line-height:1.5;color:var(--text)}
.gl-notas p{margin:0}
.gl-notas>p strong{color:var(--navy)}

/* ----- Marcador de sodio: desde 1:30 h ----- */
.gl-sodio{display:grid;gap:10px;padding:14px 16px;background:#fff;border:1px solid var(--border);border-radius:var(--radius)}
.gl-sodio[hidden]{display:none}
.gl-sodio-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.gl-sodio-tit{margin:0;font-family:var(--font-display);font-size:1.05rem;font-weight:700;letter-spacing:0;color:var(--navy)}
.gl-sodio-val{font-family:var(--font-display);font-size:1.6rem;font-weight:800;line-height:1.1;color:var(--deep)}
.gl-sodio-val small{margin-left:.2em;font-size:.82rem;font-weight:700;color:var(--muted)}
.gl-sodio-obj{font-size:.88rem;color:var(--muted)}
.gl-barra{position:relative;height:10px;margin:4px 9px;border-radius:999px;background:var(--track)}
.gl-barra-zona{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--good)}
.gl-barra-zona.is-suave{background:#9dc1a8}
.gl-barra-punto{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--orange);border:3px solid #fff}

/* ----- Cafeína: bloque corto al final, con un botón arriba que lleva a él ----- */
.gl-ir{margin-top:10px}
.gl-cafe{margin-top:14px;gap:14px;scroll-margin-top:92px}
.gl-cafe .seg{gap:0}
.gl-cafe-res{display:grid;gap:10px}
.gl-cafe-res[hidden]{display:none}
.gl-cafe .gl-sodio-cab{align-items:center}
.gl-cafe .gl-sodio-obj,.gl-cafe .gl-sodio-val{margin:0}
.gl-cafe .pista{margin:0}

.gl-tolerancia{margin:24px 0 0;text-align:center;text-wrap:balance;font-family:var(--font-display);font-size:1.35rem;font-weight:700;line-height:1.25;color:var(--navy)}
@media (min-width:760px){.gl-tolerancia{font-size:1.65rem}}

.gl-sodio .aviso.gl-amarillo{border-left-color:#f2c230;background:#fdf3d0;color:#5c4400}
.gl-sodio .aviso.gl-amarillo strong,.gl-sodio .aviso.gl-amarillo svg{color:#5c4400;stroke:currentColor}

/* ----- g/h en un recuadro claro, arriba a la derecha del panel ----- */
.gl-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.gl-cab .result-tit{margin:0}
.gl-gh{margin:0;display:flex;align-items:baseline;gap:.25em;padding:6px 12px;border-radius:var(--radius);background:var(--ice);color:var(--deep);white-space:nowrap}
.gl-gh[hidden]{display:none}
.gl-gh b{font-family:var(--font-display);font-size:1.5rem;font-weight:800;line-height:1.1}
.gl-gh small{font-size:.82rem;font-weight:700}

/* ----- Cafeína plegada ----- */
.gl-cafe{gap:0}
.gl-cafe>summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;min-height:32px}
.gl-cafe>summary::-webkit-details-marker{display:none}
.gl-cafe>summary::after{content:"";width:9px;height:9px;border-right:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);transform:rotate(45deg);margin-right:4px;transition:transform .2s}
.gl-cafe[open]>summary::after{transform:rotate(-135deg)}
.gl-cafe>summary:focus-visible{outline:3px solid var(--orange);outline-offset:4px;border-radius:4px}
.gl-cafe-cuerpo{display:grid;gap:14px;padding-top:14px}

/* Gel opcional a mitad, en otro color */
.gl-toma.gl-opc i,.gl-leyenda .gl-opc i{background:#f2c230}