/* =====================================================================
   "AÑADIR COMIDA" (16-oct-2026, t333): la hoja de /comidas con la maqueta.
   Solo aspecto: los campos y el guardado son los de siempre.
   Acentos: proteina azul, hidratos verde, verdura verde azulado, grasa
   naranja, calorias ambar (solo con el contador encendido).
   ===================================================================== */
dialog.hoja.t333-ac{max-width:480px}
dialog.hoja.t333-ac form{border:1px solid rgba(59,99,255,.32);border-radius:28px;padding:18px 18px 20px;
  background:linear-gradient(165deg,rgba(59,99,255,.12),rgba(0,75,226,.02) 45%,rgba(6,30,122,.12)),var(--n2);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 60px -20px rgba(0,20,90,.9);
  max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
.t333-ac{--ac-borde:rgba(59,99,255,.26)}
.t333-ac .ac-cab{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.t333-ac .ac-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;
  background:linear-gradient(160deg,rgba(59,99,255,.24),rgba(0,75,226,.06));box-shadow:inset 0 0 0 1px var(--ac-borde)}
.t333-ac .ac-ico .ic-m{width:20px;height:20px;background:var(--azul-txt,#8FB6EA)}
.t333-ac .ac-cab h3{flex:1;min-width:0;margin:0;font:800 15px/1.2 Manrope,system-ui,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texto)}
.t333-ac .ac-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--ac-borde);background:rgba(59,99,255,.08);color:var(--texto-2);cursor:pointer}
.t333-ac .ac-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.t333-ac .ac-sec{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.t333-ac .ac-rot{display:flex;align-items:baseline;gap:8px;margin:0;font:800 11.5px/1.2 Manrope,system-ui,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:var(--azul-txt,#8FB6EA)}
.t333-ac .ac-rot em{font-style:normal;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--texto-3);font-size:12px}
.t333-ac .ac-ayuda{margin:0;font-size:12.5px;line-height:1.45;color:var(--texto-2)}

/* las 4 tarjetas de porciones */
.t333-ac .ac-macros{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.t333-ac .ac-m{--c:#6E9BFF;--cf:rgba(59,99,255,.14);display:flex;flex-direction:column;gap:10px;margin:0;padding:12px;
  border-radius:18px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
  background:linear-gradient(160deg,var(--cf),rgba(255,255,255,.01));cursor:text;
  transition:border-color .2s ease,box-shadow .2s ease}
.t333-ac .ac-m:focus-within{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.t333-ac .ac-prot{--c:#6E9BFF;--cf:rgba(59,99,255,.15)}
.t333-ac .ac-hidr{--c:#7BD35A;--cf:rgba(90,190,60,.13)}
.t333-ac .ac-verd{--c:#3FC7C2;--cf:rgba(30,170,165,.13)}
.t333-ac .ac-gras{--c:#FF9A4D;--cf:rgba(240,120,40,.13)}
:root[data-tema="claro"] .t333-ac .ac-prot{--c:#1D4FB8}
:root[data-tema="claro"] .t333-ac .ac-hidr{--c:#2F6B12}
:root[data-tema="claro"] .t333-ac .ac-verd{--c:#0F6A66}
:root[data-tema="claro"] .t333-ac .ac-gras{--c:#B4530A}
.t333-ac .ac-m-cab{display:flex;align-items:center;gap:8px;min-width:0}
.t333-ac .ac-m-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:10px;
  background:color-mix(in srgb,var(--c,#6E9BFF) 18%,transparent);color:var(--c,#6E9BFF)}
.t333-ac .ac-m-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.t333-ac .ac-m-k{font:800 12px/1.2 Manrope,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--texto);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t333-ac .ac-m-in{display:flex;align-items:center;gap:6px;padding:0 10px 0 4px;border-radius:12px;background:rgba(0,0,0,.18)}
:root[data-tema="claro"] .t333-ac .ac-m-in{background:rgba(255,255,255,.8)}
.t333-ac .ac-m-in input{flex:1;min-width:0;width:100%;height:44px;margin:0;padding:0 6px;border:0!important;background:transparent!important;
  box-shadow:none!important;color:var(--texto);font:800 20px/1 Manrope,system-ui,sans-serif;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield}
.t333-ac .ac-m-in input::-webkit-outer-spin-button,.t333-ac .ac-m-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.t333-ac .ac-m-in input:focus{outline:none}
.t333-ac .ac-m-u{flex:none;font-size:12.5px;color:var(--texto-2)}
.t333-ac .ac-kcal{--c:#FFC24D;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--c) 40%,transparent);background:linear-gradient(160deg,rgba(255,180,40,.10),rgba(255,255,255,.01))}
:root[data-tema="claro"] .t333-ac .ac-kcal{--c:#9A6200}
.t333-ac .ac-kcal .ac-m-k{flex:1}
.t333-ac .ac-kcal b{font:800 15px/1 Manrope,system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--texto)}

/* camara / galeria */
.t333-ac .ac-fotos{margin:0;gap:10px}
.t333-ac .ac-foto{position:relative;flex-direction:row!important;gap:10px!important;min-height:56px;padding:0 14px;border-radius:999px!important;
  border:1px solid var(--ac-borde)!important;background:rgba(59,99,255,.10)!important;font:700 14.5px/1 Manrope,system-ui,sans-serif;color:var(--texto)}
.t333-ac .ac-foto svg{width:22px;height:22px}
.t333-ac .ac-foto:focus-within{border-color:#3B63FF!important;box-shadow:0 0 0 3px rgba(59,99,255,.22)}
.t333-ac .al-elegida{margin:0;padding:8px 12px;border-radius:12px;background:rgba(48,209,88,.12);color:var(--texto);font-size:13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* comentario */
.t333-ac .ac-nota{width:100%;box-sizing:border-box;min-height:64px;padding:12px 14px;border-radius:16px;resize:vertical;
  border:1px solid var(--ac-borde);background:rgba(0,0,0,.16);color:var(--texto);font:500 16px/1.4 inherit}
:root[data-tema="claro"] .t333-ac .ac-nota{background:rgba(255,255,255,.8)}
.t333-ac .ac-nota:focus{outline:none;border-color:#3B63FF;box-shadow:0 0 0 3px rgba(59,99,255,.22)}

/* guardar */
.t333-ac .ac-guardar{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;margin:4px 0 0;padding:0 22px;
  border:0;border-radius:999px;cursor:pointer;color:#fff;font:800 16px/1 Manrope,system-ui,sans-serif;letter-spacing:.01em;
  background:var(--t330-grad,linear-gradient(135deg,#3B63FF 0%,#004BE2 60%,#0a2fae 100%));
  box-shadow:0 14px 28px -12px rgba(0,75,226,.9),0 1px 0 rgba(255,255,255,.2) inset;transition:transform .15s ease}
.t333-ac .ac-guardar:active{transform:scale(.985)}
.t333-ac .ac-guardar:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:340px){.t333-ac .ac-macros{grid-template-columns:1fr}}