/* ─── Base ──────────────────────────────────────────────── El tema lo decide `data-tema` en , que pone el script del antes de pintar nada (si no, la app parpadea en oscuro al abrirla en claro). En automático ese script traduce lo que pida el sistema a claro u oscuro, así que aquí no hace falta ninguna media query: solo dos paletas. */ :root{ --bg:#0f1115; --card:#181b22; --card-2:#20242d; --line:#2a2f3a; --text:#e8eaf0; --dim:#9aa3b2; --accent:#3ddc84; --accent-dim:#1e6b45; --warn:#ffb020; --danger:#ff5c5c; --p:#5aa9ff; --c:#ffb020; --f:#ff7ac8; --agua:#4fc3f7; --safe-b:env(safe-area-inset-bottom,0px); --tabh:64px; color-scheme:dark; /* teclado, scrollbars y controles nativos a juego */ } :root[data-tema="claro"]{ --bg:#f4f5f8; --card:#ffffff; --card-2:#eef0f5; --line:#e0e3ea; --text:#161922; --dim:#6b7385; --accent:#12a05c; --accent-dim:#b7ecd1; --warn:#b26a00; --danger:#d92c2c; --agua:#0288d1; color-scheme:light; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{height:100%} body{ margin:0;background:var(--bg);color:var(--text); font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif; overscroll-behavior-y:none; } h1{font-size:20px;margin:0} h2{font-size:15px;margin:0 0 4px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em} button,input,select{font:inherit;color:inherit} .hidden{display:none !important} /* ─── Layout ──────────────────────────────────────────── */ .view{position:fixed;inset:0;bottom:0;display:flex;flex-direction:column} .topbar{ display:flex;align-items:center;justify-content:space-between;gap:8px; padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 12px; background:var(--bg);border-bottom:1px solid var(--line); } .topbar h1{flex:1} .scroll{ flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:12px 16px calc(var(--tabh) + var(--safe-b) + 16px); } .spacer{height:8px} .tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:20; display:grid;grid-template-columns:repeat(6,1fr); background:color-mix(in srgb,var(--card) 92%,transparent); backdrop-filter:blur(12px); border-top:1px solid var(--line); padding-bottom:var(--safe-b); } .tab{ background:none;border:0;padding:8px 2px 10px; display:flex;flex-direction:column;align-items:center;gap:2px; font-size:10px;white-space:nowrap;color:var(--dim);cursor:pointer; } .tab span{font-size:19px;line-height:1} .tab.active{color:var(--accent)} /* ─── Cards ───────────────────────────────────────────── */ .card{ background:var(--card);border:1px solid var(--line);border-radius:18px; padding:16px;margin-bottom:12px; } /* En claro las tarjetas flotan con sombra en vez de llevar borde: con fondo gris y tarjeta blanca la línea sobra y ensucia. La del peso conserva el suyo, que es lo que la distingue del resto. */ :root[data-tema="claro"] .card:not(.weigh){ border-color:transparent;box-shadow:0 2px 10px rgba(20,24,40,.07); } .form{display:flex;flex-direction:column;gap:12px} .form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--dim)} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px} input,select,textarea{ background:var(--card-2);border:1px solid var(--line);border-radius:10px; padding:11px 12px;width:100%;font-size:16px; } textarea{font:inherit;resize:vertical;min-height:64px;line-height:1.35} input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px} .hint{font-size:12px;color:var(--dim);margin:0} /* ─── Aviso al lado de una casilla ──────────────────────── Para lo que hay que leer antes de darle a Guardar: un objetivo de calorías demasiado bajo, sobre todo. No es un `.hint` gris de los de «por si acaso»: lleva el color del borde tintando el fondo, como el veredicto de la IA, que es la diferencia entre una nota que se salta la vista y una que se lee. */ .aviso{ display:flex;flex-direction:column;gap:6px;margin:0; border:1px solid var(--line);border-left-width:3px;border-radius:10px;padding:10px 12px; font-size:13px;line-height:1.45; } .aviso span{display:block} .aviso.nota{border-left-color:var(--dim)} .aviso.mejora{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)} .aviso.ojo{border-left-color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)} .btn{ background:var(--card-2);border:1px solid var(--line);border-radius:12px; padding:12px 16px;font-weight:600;cursor:pointer; } .btn:active{transform:scale(.98)} .btn.primary{background:var(--accent);border-color:var(--accent);color:#06210f} .btn.danger{color:var(--danger)} .btn.small{padding:9px 14px;font-size:14px;border-radius:10px} .icon-btn{ background:none;border:0;font-size:24px;line-height:1;color:var(--dim); padding:6px 10px;cursor:pointer;border-radius:10px; } .icon-btn:active{background:var(--card-2)} .date-btn{ flex:1;background:none;border:0;font-size:17px;font-weight:600;cursor:pointer; padding:6px;border-radius:10px;text-transform:capitalize; } /* ─── Anillos de progreso ─────────────────────────────── */ /* El SVG siempre es de 120×120 y el tamaño real lo pone --tam: así el mismo anillo vale para las calorías, para los macros y para los días de la semana. */ .anillo{position:relative;width:var(--tam,64px);height:var(--tam,64px);flex:none} .anillo svg{width:100%;height:100%;transform:rotate(-90deg);display:block} .anillo circle{fill:none;stroke-width:11;stroke-linecap:round} .anillo-bg{stroke:var(--card-2)} .anillo-fg{transition:stroke-dashoffset .45s ease,stroke .3s} .anillo > span{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:calc(var(--tam,64px) * .36);line-height:1; } /* ─── Semana ──────────────────────────────────────────── */ .semana{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:14px} .semana .dia{ background:none;border:0;border-radius:14px;padding:7px 0 9px;cursor:pointer; display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--dim); } .semana .dia small{font-size:11px;text-transform:capitalize} .semana .dia .anillo > span{ font-size:13px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums; } .semana .sel{background:var(--card);border:1px solid var(--line)} .semana .sel small{color:var(--text);font-weight:600} .semana .hoy small{color:var(--accent);font-weight:600} .semana .futuro .anillo-bg{stroke-dasharray:5 6} .semana .futuro .anillo > span{color:var(--dim);font-weight:500} /* ─── Calorías del día ────────────────────────────────── */ .kcal-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 18px} .kcal-txt{min-width:0} .kcal-txt strong{ font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1; font-variant-numeric:tabular-nums; } .kcal-txt span{font-size:17px;font-weight:600;color:var(--dim);font-variant-numeric:tabular-nums} .kcal-txt small{display:block;margin-top:9px;font-size:12.5px;color:var(--dim)} /* ─── Macros ──────────────────────────────────────────── */ /* El margen de abajo lo lleva la rejilla, no las tarjetas (que van a 0): sin él la fila de macros quedaba pegada a la tarjeta siguiente, que es la única costura de «Hoy» donde no había aire. */ .macro-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px} .macro-card{ margin:0;padding:14px 8px 12px; display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center; } .macro-num{display:flex;align-items:baseline;gap:2px} .macro-num b{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums} .macro-num span{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums} .macro-card small{font-size:11px;color:var(--dim);margin-bottom:9px} /* ─── Ajustes: índice de secciones ────────────────────── */ /* Filas del tamaño del pulgar, con su icono, su título y debajo lo que hay dentro: así se sabe adónde vas antes de entrar. */ .ajustes-menu .row{padding:14px} .aj-icono{font-size:20px;width:28px;text-align:center;flex:none;line-height:1} .ajustes-menu .row-main b{font-size:15px;font-weight:500} .ajustes-menu .row-main small{color:var(--dim);font-size:12.5px} .aj-flecha{color:var(--dim);font-size:20px;flex:none;line-height:1} /* ─── Agua ────────────────────────────────────────────── */ /* La cabecera se toca entera para abrir el detalle del día, así que va con el mismo aire que la tarjeta de calorías; los botones de debajo, aparte. */ .agua-card{padding:16px 18px} .agua-top{ display:flex;align-items:center;justify-content:space-between;gap:14px; width:100%;padding:0;background:none;border:0;text-align:left;cursor:pointer; } .agua-top .kcal-txt strong{font-size:30px} /* Los tres de un trago caben en una línea: reparten el ancho y no se parten. El de «⋯» se queda con lo justo, que solo lleva tres puntos. */ .agua-btns{margin-top:14px;flex-wrap:nowrap} .agua-btns .chip{ flex:1;min-width:0;min-height:40px;padding:8px 4px; font-size:12.5px;text-align:center;white-space:nowrap; } .agua-btns .agua-mas{flex:0 0 auto;padding:8px 13px;color:var(--dim)} .bar{height:6px;background:var(--card-2);border-radius:99px;overflow:hidden} .bar i{display:block;height:100%;border-radius:99px;transition:width .35s ease} /* ─── Comidas / listas ────────────────────────────────── */ .meal{margin-bottom:12px} .meal-head{ display:flex;align-items:center;gap:8px;padding:0 4px 8px; } .meal-head h3{margin:0;font-size:15px;flex:1;font-weight:600} .meal-head .kcal{font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums} /* Añadir ocupa toda la anchura de la tarjeta: se acierta con el pulgar sin mirar. La raya de arriba la pone el último registro con su border-bottom; cuando no hay ninguno, la pone el «Sin registros». Así nunca salen dos rayas juntas. */ .add-row{ display:flex;align-items:center;justify-content:center;gap:6px; width:100%;min-height:48px;padding:13px;background:none;border:0; color:var(--accent);font-weight:600;font-size:15px;cursor:pointer; } .add-row:active{background:var(--card-2)} .meal .empty{border-bottom:1px solid var(--line)} .rows{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden} .row{ display:flex;align-items:center;gap:12px;padding:12px 14px; border-bottom:1px solid var(--line);cursor:pointer;background:none;width:100%; text-align:left;border-left:0;border-right:0;border-top:0; } .row:last-child{border-bottom:0} .row:active{background:var(--card-2)} .row-main{flex:1;min-width:0} .row-main b{display:block;font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .row-main small{color:var(--dim);font-size:12px} .row-kcal{font-variant-numeric:tabular-nums;font-weight:600;font-size:15px;flex:none} .empty{padding:14px;color:var(--dim);font-size:13px;text-align:center} .list{display:flex;flex-direction:column;gap:0;background:var(--card); border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:12px} .search-row{display:flex;gap:8px;margin-bottom:12px} .badge{ font-size:11px;padding:2px 7px;border-radius:99px;background:var(--card-2); color:var(--dim);flex:none } /* ─── Progreso ──────────────────────────────────────────── Dos tarjetas arriba (el peso y la racha), la gráfica del peso con su rango y el promedio diario. Las dos de arriba van en la misma fila y tienen que quedar de la misma altura aunque una lleve más cosas dentro: de ahí el grid de dos columnas y el `justify-content` de cada una. */ .prog-top{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px} .prog-top .card{margin:0;display:flex;flex-direction:column;gap:8px;padding:14px} .prog-peso small{font-size:12px;color:var(--dim);text-align:center} .prog-peso strong{ font-size:26px;font-weight:800;line-height:1;text-align:center; font-variant-numeric:tabular-nums; } .prog-peso strong i{font-size:14px;font-weight:600;font-style:normal;color:var(--dim)} .prog-peso .bar{margin-top:2px} /* Esto era texto gris pelado y no lo encontraba nadie: un sitio donde se toca tiene que parecer que se toca. Va con fondo, contorno y el lápiz al lado. */ .prog-meta{ background:var(--card-2);border:1px solid var(--line);border-radius:99px; padding:5px 10px;font-size:11.5px;color:var(--dim);cursor:pointer; display:flex;align-items:center;justify-content:center;gap:5px; } .prog-meta b{color:var(--text);font-variant-numeric:tabular-nums} .prog-meta::after{content:'✏️';font-size:10px} .prog-meta:active{background:var(--line)} .prog-peso .btn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px} .prog-peso .btn span{color:inherit} .prog-racha{align-items:center;text-align:center} /* El número va encima de la llama, como en las apps de rachas. Sobre un emoji de colores no hay contraste que valga: blanco con sombra oscura detrás. */ .racha-fuego{position:relative;font-size:52px;line-height:1;margin-top:2px} .racha-fuego b{ position:absolute;inset:0;display:grid;place-items:center; font-size:20px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums; text-shadow:0 1px 3px rgba(0,0,0,.85);padding-top:12px; } .prog-racha > small{font-size:12px;color:var(--dim)} .racha-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;width:100%;margin-top:auto} .rd{display:flex;flex-direction:column;align-items:center;gap:3px} .rd small{font-size:10px;color:var(--dim)} .rd i{ width:100%;aspect-ratio:1;max-width:20px;border-radius:50%;background:var(--card-2); display:grid;place-items:center;font-style:normal;font-size:11px;line-height:1; } .rd.on i{background:var(--accent);color:#06210f;font-weight:700} .rd.hoy small{color:var(--accent);font-weight:700} .rd.futuro i{opacity:.45} .prog-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px} .prog-head h3{margin:0;font-size:16px;font-weight:700} .prog-badge{ background:var(--card-2);border-radius:99px;padding:5px 10px; font-size:11.5px;color:var(--dim);white-space:nowrap; } .prog-badge b{color:var(--text);font-variant-numeric:tabular-nums} /* La gráfica del peso. Aquí NO va `preserveAspectRatio:none` —el SVG lleva texto en los ejes y saldría estirado—, así que se deja escalar entero. */ .peso-svg{width:100%;height:auto;display:block;margin-bottom:6px} .peso-svg .rej{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4;vector-effect:non-scaling-stroke} .peso-svg .eje{fill:var(--dim);font-size:9px;font-variant-numeric:tabular-nums} .peso-svg .meta{stroke:var(--dim);stroke-width:1;stroke-dasharray:4 3;vector-effect:non-scaling-stroke} .peso-svg .meta-txt{font-size:8.5px} .peso-svg .linea-peso{ fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round; vector-effect:non-scaling-stroke; } .peso-svg .guia{stroke:var(--accent);stroke-width:1;opacity:.35;vector-effect:non-scaling-stroke} .peso-svg .punto{fill:var(--bg);stroke:var(--accent);stroke-width:2.5;vector-effect:non-scaling-stroke} .peso-svg .globo{fill:var(--text);opacity:.92} .peso-svg .globo-kg{fill:var(--bg);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums} .peso-svg .globo-d{fill:var(--bg);font-size:8.5px;opacity:.75} /* Los rangos, con el mismo aire que los chips de la app pero apretados en una fila con fondo, que es donde se los busca en este tipo de gráfica. */ .rango{ display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin:4px 0 12px; background:var(--card-2);border-radius:12px;padding:3px; } .rango .chip{ background:none;border:0;border-radius:9px;padding:8px 0;font-size:12.5px; color:var(--dim);text-align:center; } .rango .chip.on{background:var(--card);color:var(--text);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.25)} .aviso.bien{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)} /* La fecha de llegada a la meta. Va suelta y no dentro del `.aviso`: aquel dice lo que ha pasado, y esto es una previsión, que es otra cosa y se lee aparte. */ .proyeccion{ margin:10px 0 2px;padding:10px 12px;font-size:12.5px;color:var(--dim);line-height:1.45; background:var(--card-2);border-radius:10px; } /* Sin `capitalize`: aquí dentro va «marzo de 2027», y capitalize pone también «De». En español los meses van en minúscula, así que se deja tal cual. */ .proyeccion b{color:var(--text);font-size:13.5px} /* Un botón que va dentro de una frase: sin fondo ni recuadro, subrayado, que es lo que se reconoce como «esto lleva a algún sitio» dentro de un texto. */ .enlace{ background:none;border:0;padding:0;font:inherit;color:var(--accent); text-decoration:underline;cursor:pointer; } /* ─── La barra del IMC ──────────────────────────────────── Las franjas de la OMS, de frío a caliente. Los colores son suyos y no salen de los macros ni del acento: si mañana el verde de la app cambia, la franja de «peso normal» tiene que seguir siendo verde, que es lo que se reconoce de cualquier báscula o consulta. En claro se oscurecen un punto, que sobre fondo blanco los tonos de móvil se lavan. */ :root{ --imc-bajo:#5aa9ff; --imc-ok:#3ddc84; --imc-sobre:#ffb020; --imc-ob1:#ff8a3d; --imc-ob2:#ff5c5c; } :root[data-tema="claro"]{ --imc-bajo:#2f7fd6; --imc-ok:#17a862; --imc-sobre:#d99000; --imc-ob1:#e06a1c; --imc-ob2:#d92c2c; } .imc{margin:2px 0 4px} /* El margen de arriba es sitio para el rótulo de «ahora», que sale por encima */ .imc-barra{ display:flex;height:12px;border-radius:99px;overflow:hidden;position:relative; margin:16px 0 4px; } .imc-barra i{display:block;height:100%} /* Las marcas van en su propia capa, por encima y sin recortar: el globo se sale de los 12 px de la barra y `overflow:hidden` se lo comería. */ .imc-marcas{position:absolute;inset:0;pointer-events:none} .imc-marca{position:absolute;top:50%;transform:translate(-50%,-50%)} .imc-marca::after{ content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:14px;height:14px;border-radius:50%;background:var(--text); border:3px solid var(--card);box-sizing:border-box; } .imc-marca.ahora::after{background:var(--card);border-color:var(--text)} .imc-marca b{ position:absolute;left:50%;transform:translateX(-50%); font-size:9.5px;font-weight:700;color:var(--dim);white-space:nowrap; } .imc-marca.ahora b{bottom:14px} .imc-marca.meta b{top:14px;color:var(--text)} .imc-ticks{position:relative;height:26px;font-size:10px;color:var(--dim)} .imc-ticks span{ position:absolute;top:14px;transform:translateX(-50%); font-variant-numeric:tabular-nums; } .imc-rango{ -webkit-appearance:none;appearance:none;background:none;padding:0;border:0; width:100%;height:28px;margin:0; } .imc-rango:focus{outline:none} .imc-rango:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px} .imc-rango::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:var(--card-2)} .imc-rango::-moz-range-track{height:4px;border-radius:99px;background:var(--card-2)} .imc-rango::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%; background:var(--accent);border:3px solid var(--card);margin-top:-11px;cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.35); } .imc-rango::-moz-range-thumb{ width:26px;height:26px;border-radius:50%;background:var(--accent); border:3px solid var(--card);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.35); } .imc-lee{margin:0;font-size:13px;color:var(--dim)} .imc-lee b{color:var(--text);font-variant-numeric:tabular-nums;font-size:15px} .media-num{display:flex;align-items:baseline;gap:6px} .media-num strong{font-size:34px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums} .media-num span{font-size:13px;color:var(--dim)} .media-num em{font-style:normal;font-size:13px;font-weight:700;color:var(--dim);font-variant-numeric:tabular-nums} .media-num em.sube{color:var(--warn)} .media-num em.baja{color:var(--accent)} .prog-media .hint{margin-bottom:12px} .chart{display:flex;align-items:flex-end;gap:4px;height:110px;margin-bottom:10px} .chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:3px;align-items:center} .chart .col i{width:100%;background:var(--accent-dim);border-radius:4px 4px 2px 2px;min-height:2px;transition:height .3s} .chart .col.over i{background:var(--danger)} .chart .col.today i{background:var(--accent)} .chart .col b{font-size:9px;color:var(--dim);font-weight:500} .chart-legend{display:flex;gap:16px;font-size:12px;color:var(--dim);border-top:1px solid var(--line);padding-top:10px} .chart-legend b{color:var(--text);font-variant-numeric:tabular-nums} .sec-title{font-size:13px;color:var(--dim);font-weight:600;text-transform:uppercase; letter-spacing:.04em;margin:22px 4px 10px} /* ─── Peso ────────────────────────────────────────────── */ /* Aviso semanal del peso, arriba en Hoy */ .weigh{border-color:var(--accent-dim)} .weigh-head{display:flex;flex-direction:column;gap:2px;margin-bottom:10px} .weigh-head b{font-size:15px} .weigh-head small{color:var(--dim);font-size:12px} .weigh-form{display:flex;gap:10px} .weigh-form input{flex:1;min-width:0} .weigh-form .btn{flex:none} /* ─── Hoja modal ──────────────────────────────────────── */ .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:30;animation:fade .2s} .sheet{ position:fixed;left:0;right:0;bottom:0;z-index:31; background:var(--bg);border-radius:20px 20px 0 0; border-top:1px solid var(--line); /* dvh y no vh: en el móvil, 88vh se mide con la barra de direcciones escondida, así que con la barra a la vista la hoja se salía por arriba y la cabecera con la ✕ quedaba fuera de la pantalla. Sin salida de una respuesta larga. */ max-height:88vh; max-height:88dvh; display:flex;flex-direction:column; padding-bottom:var(--safe-b); animation:slideup .25s cubic-bezier(.2,.8,.2,1); } @keyframes slideup{from{transform:translateY(100%)}} @keyframes fade{from{opacity:0}} .sheet-handle{width:38px;height:4px;background:var(--line);border-radius:99px;margin:8px auto 0} .sheet-head{display:flex;align-items:center;padding:10px 16px 6px;gap:8px} .sheet-head h2{flex:1;font-size:17px;color:var(--text);text-transform:none;letter-spacing:0;margin:0} .sheet-body{overflow-y:auto;padding:8px 16px 20px;display:flex;flex-direction:column;gap:12px} /* La hoja es un flex en columna: sin esto sus hijos encogen por debajo de su contenido y, con overflow:hidden, las listas cortan la última fila. */ .sheet-body>*{flex:none} .qty-row{display:flex;align-items:center;gap:10px} .qty-row input{text-align:center;font-size:20px;font-weight:700} .step{width:48px;height:48px;flex:none;border-radius:12px;background:var(--card-2); border:1px solid var(--line);font-size:22px;cursor:pointer} /* Ajustes de la IA: una tarjeta por tarea, con su modelo y su esfuerzo */ .tareas{display:flex;flex-direction:column;gap:10px} .tarea{background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:12px} .tarea > b{display:block;font-size:14px} .tarea > .hint{margin:2px 0 10px} .tarea > .hint.precio{margin:8px 0 0} .tarea select{background:var(--card)} .tarea select:disabled{opacity:.5} .chips{display:flex;gap:8px;flex-wrap:wrap} .chip{background:var(--card-2);border:1px solid var(--line);border-radius:99px; padding:7px 13px;font-size:13px;cursor:pointer} .chip.on{background:var(--accent);border-color:var(--accent);color:#06210f;font-weight:600} /* ─── Botones de acción (dibujo arriba, nombre debajo) ── Elegir cómo apuntar algo —código de barras, foto del plato, internet…— no es filtrar una lista: es la acción principal de esa pantalla, y en chips pequeños había que leerlos uno a uno. El dibujo se ve de lejos y el nombre va debajo entero, sin abreviar, que es de lo que se trata. El grosor y el color del trazo van aquí y no en cada símbolo: `stroke` y `fill` se heredan, así que basta con ponerlos en el que los usa. */ .sprite{display:none} .ico{ width:26px;height:26px;flex:none; fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; } /* `1fr` en las filas y no `auto`: si no, la fila con un nombre de dos líneas sale más alta que la de al lado y la cuadrícula se ve descuadrada. */ .acciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(98px,1fr)); grid-auto-rows:1fr;gap:8px} .accion{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px; min-height:84px;padding:12px 6px; background:var(--card-2);border:1px solid var(--line);border-radius:14px; color:var(--text);font-size:12px;font-weight:600;line-height:1.25;text-align:center; cursor:pointer; } .accion:hover{border-color:var(--accent)} /* Sin esto, tocar no responde con nada: el `-webkit-tap-highlight-color` transparente de `*` se lleva por delante el destello del móvil. */ .accion:active{transform:scale(.97);background:var(--card)} /* ─── El botón que llama al modelo ───────────────────── Un `.btn` de los normales tiene el fondo de las tarjetas, así que debajo de una lista de filas del mismo color no parecía un botón, parecía otra fila. Va con el color de acento, pero **contorneado y no macizo**: el macizo es del primario —«Guardar»—, y en la ficha del alimento los dos caen juntos. Ancho completo porque casi siempre cuelga dentro de un bloque, donde el `