/* ==========================================================================
   Contamos juntos — contador de carbohidratos
   Se carga DESPUÉS de estilos.css y usa sus colores y tipografías
   (--tinta, --azul, --celeste, --cielo, --gris, --linea, --f-titulo, --f-texto).
   ========================================================================== */
:root {
  --cj-fondo: #F5FAFC;
  --verde: #12704F;
  --verde-suave: #E2F4EC;
  --ambar: #7A5208;
  --ambar-suave: #FFF5DF;
  --ambar-borde: #EDD8A6;
  --error: #B3261E;
  --error-suave: #FDEEEE;
  --error-borde: #F1C4C1;
  --bloque-vacio: #E3EEF3;
  --radio-app: 20px;
}
.cj-body { background: var(--cj-fondo); }
.nav a[aria-current="page"]:not(.nav__cta) { color: var(--azul); }

/* Íconos (SVG de línea, toman el color del texto) */
.ic {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Portada de la herramienta ---------- */
.cj-portada { background: var(--cielo); border-bottom: 1px solid var(--linea); overflow: hidden; }
.cj-portada__inner {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem);
  display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
.cj-eyebrow {
  margin: 0 0 .6rem; color: var(--azul);
  font: 700 .8rem/1.2 var(--f-texto); text-transform: uppercase; letter-spacing: .12em;
}
.cj-portada__titulo {
  font: 800 clamp(2.7rem, 7vw, 5rem)/.95 var(--f-titulo);
  letter-spacing: -.035em; margin: 0 0 1rem;
}
.cj-portada__bajada { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--gris); max-width: 44ch; margin: 0 0 1.4rem; }
.cj-sellos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.cj-sellos li {
  display: inline-flex; align-items: center; gap: .45rem;
  background: #fff; border: 1px solid var(--linea); border-radius: 999px;
  padding: .45rem .85rem; font-size: .9rem; font-weight: 700; line-height: 1.2;
}
.cj-sellos li[hidden] { display: none; }
.cj-sellos .ic { color: var(--azul); }
/* En compu: texto y sellos centrados en altura junto a la ilustración */
.cj-portada__inner { grid-template-rows: 1fr auto auto 1fr; row-gap: 0; }
.cj-portada__inner > div { grid-column: 1; grid-row: 2; }
.cj-sellos { grid-column: 1; grid-row: 3; }
.cj-ilustracion { margin: 0; justify-self: end; width: 100%; max-width: 330px; grid-column: 2; grid-row: 1 / -1; }
.cj-ilustracion svg { display: block; width: 100%; height: auto; overflow: visible; }
.cj-aro { stroke-dasharray: 880; stroke-dashoffset: 880; animation: dibujar-aro 1.6s .2s cubic-bezier(.65, 0, .35, 1) forwards; }
.cj-flota { transform-box: fill-box; animation: cj-flotar 3.4s ease-in-out infinite alternate; }
.cj-flota--2 { animation-delay: -1.2s; }
.cj-flota--3 { animation-delay: -2.3s; }
@keyframes cj-flotar { to { transform: translateY(-7px); } }
@media (max-width: 760px) {
  .cj-portada__inner { grid-template-columns: 1fr 120px; grid-template-rows: auto auto; align-items: start; }
  .cj-portada__inner > div { grid-row: 1; }
  .cj-ilustracion { max-width: 120px; grid-row: 1; }
  .cj-sellos { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 480px) {
  .cj-portada__inner { grid-template-columns: 1fr 88px; gap: 1rem; }
  .cj-ilustracion { max-width: 88px; }
  .cj-sellos li { font-size: .82rem; padding: .4rem .7rem; }
}

/* ---------- Pestañas: arriba en compu, barra inferior tipo app en celular ---------- */
.cj-tabs {
  position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); z-index: 40;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linea);
}
.cj-tabs__inner {
  max-width: var(--ancho); margin: 0 auto;
  padding: .55rem clamp(1.25rem, 4vw, 2.5rem);
  display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none;
}
.cj-tabs__inner::-webkit-scrollbar { display: none; }
.cj-tabs button {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  border: 0; background: transparent; color: var(--gris); cursor: pointer;
  font: 700 .98rem/1 var(--f-texto); padding: .7rem 1rem; border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}
.cj-tabs button:hover { background: var(--cielo); color: var(--tinta); }
.cj-tabs button[aria-current="page"] { background: var(--tinta); color: #fff; }
@media (max-width: 760px) {
  .cj-body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .cj-tabs {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0;
    border-bottom: 0; border-top: 1px solid var(--linea);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -6px 22px rgba(13, 27, 76, .08);
  }
  .cj-tabs__inner { padding: .35rem .3rem; gap: .1rem; }
  .cj-tabs button {
    flex: 1 1 0; min-width: 0; flex-direction: column; gap: .22rem;
    padding: .45rem .1rem; border-radius: 12px; font-size: .72rem;
  }
  .cj-tabs button .ic { width: 1.5rem; height: 1.5rem; }
  .cj-tabs button[aria-current="page"] { background: var(--cielo); color: var(--azul); }
}

/* ---------- Estructura ---------- */
.cj {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2.5rem) clamp(3rem, 6vw, 4.5rem);
}
.cj h2, .cj h3, dialog h2 { font-family: var(--f-titulo); letter-spacing: -.02em; margin-top: 0; }
.cj h3 { font-size: 1.35rem; line-height: 1.15; font-weight: 800; margin-bottom: .9rem; }
.cj p { margin-top: 0; }
.cj-titular { margin-bottom: 1.75rem; max-width: 62ch; }
.cj-titular h2 { font: 800 clamp(2rem, 4.5vw, 3rem)/1.02 var(--f-titulo); letter-spacing: -.03em; margin: 0 0 .75rem; text-wrap: balance; }
.cj-titular p:last-child { margin-bottom: 0; }
.muted { color: var(--gris); }
.hidden { display: none !important; }
.columns { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: start; }
.columns > * { min-width: 0; } /* evita que la fila de categorías desplazable ensanche la página en celular */
.stack { display: grid; gap: 1.25rem; }
.row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.row h3 { margin-bottom: 0; }
.panel {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-app);
  padding: clamp(1.25rem, 3vw, 1.75rem); box-shadow: 0 1px 2px rgba(13, 27, 76, .04);
}
.btns { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 950px) { .columns { grid-template-columns: minmax(0, 1fr); } }

/* Pasos */
.cj-pasos { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.cj-pasos li { display: flex; gap: .8rem; align-items: flex-start; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; }
.cj-pasos b {
  flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--celeste); color: var(--tinta); font: 800 1.05rem/1 var(--f-titulo);
}
.cj-pasos strong { display: block; line-height: 1.3; }
.cj-pasos span { display: block; color: var(--gris); font-size: .9rem; line-height: 1.45; margin-top: .15rem; }
@media (max-width: 640px) {
  .cj-pasos { grid-template-columns: 1fr; gap: .45rem; }
  .cj-pasos li { padding: .7rem .9rem; align-items: center; }
  .cj-pasos b { width: 1.9rem; height: 1.9rem; font-size: .95rem; }
}

/* ---------- Formularios ---------- */
.field { display: block; font-size: .92rem; font-weight: 700; margin-bottom: .4rem; }
input, select, textarea {
  width: 100%; padding: .75rem .9rem; margin: 0 0 1rem;
  border: 1.5px solid #C5DCE6; border-radius: 12px;
  background: #fff; color: var(--tinta); font: inherit; font-size: 1rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--azul); }
textarea { min-height: 90px; resize: vertical; }
input[type="checkbox"] { width: 1.2rem; height: 1.2rem; margin: 0 .6rem 0 0; flex: none; accent-color: var(--azul); }
input[type="file"] { font-size: .9rem; }
input:disabled, select:disabled, textarea:disabled { background: #F3F7F9; cursor: not-allowed; }
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.toolbar { display: flex; align-items: end; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.5rem; }
.toolbar > div { flex: 1; min-width: 180px; }
.toolbar select { margin-bottom: 0; }
.checkrow { font-size: .92rem; display: flex; align-items: flex-start; line-height: 1.5; margin: .75rem 0 1.25rem; }
.checkrow input { margin-top: .15rem; }
.status { min-height: 1.2rem; font-size: .92rem; color: var(--error); line-height: 1.5; margin-top: .5rem; }
@media (max-width: 550px) { .twocol { grid-template-columns: 1fr; } .toolbar > div { min-width: 130px; } }

/* ---------- Botones ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.4rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--azul); color: #fff; font: 700 1rem/1.15 var(--f-texto); text-decoration: none;
  transition: background-color .15s ease, transform .15s ease, color .15s ease;
}
.button:hover:not(:disabled) { background: #1225A8; transform: translateY(-1px); }
.button.secondary { background: var(--cielo); color: var(--tinta); }
.button.secondary:hover:not(:disabled) { background: #D3F0F8; }
.button.outline { background: transparent; border: 2px solid var(--tinta); color: var(--tinta); }
.button.outline:hover:not(:disabled) { background: var(--tinta); color: #fff; }
.button.small { min-height: 38px; padding: .45rem .95rem; font-size: .88rem; }
.button.block { width: 100%; }
.button:disabled { opacity: .45; cursor: default; }
.linkbtn {
  background: none; border: 0; padding: .5rem; cursor: pointer; color: var(--azul);
  font: 700 .92rem/1.2 var(--f-texto); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.close { background: none; border: 0; color: var(--gris); padding: .4rem .7rem; font-size: 1.8rem; line-height: 1; cursor: pointer; border-radius: 10px; }
.close:hover { background: var(--cielo); }

/* ---------- Contar: modos, categorías y referencia ---------- */
.modos { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; padding: .3rem; margin-bottom: 1.25rem; background: var(--cielo); border-radius: 14px; }
.modos button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border: 0; background: transparent; color: var(--gris); cursor: pointer;
  padding: .65rem .5rem; border-radius: 11px; font: 700 .95rem/1.15 var(--f-texto);
}
.modos button.active { background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgba(13, 27, 76, .12); }
.cj-cats { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.25rem 0 1rem; }
.cj-cats button {
  flex: none; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  border: 1.5px solid var(--linea); background: #fff; color: var(--tinta);
  border-radius: 999px; padding: .42rem .8rem; font: 700 .86rem/1.1 var(--f-texto);
}
.cj-cats button:hover { border-color: var(--celeste); }
.cj-cats button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
@media (max-width: 640px) {
  .cj-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .35rem; margin-right: -1.25rem; padding-right: 1.25rem; scrollbar-width: none; }
  .cj-cats::-webkit-scrollbar { display: none; }
}
.food-ref { padding: 1.1rem 1.2rem; border-radius: 16px; background: var(--cielo); margin: 0 0 1.1rem; }
.food-ref__cabeza { display: flex; align-items: center; gap: .6rem; }
.food-ref__icono { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #fff; color: var(--azul); }
.food-ref__icono .ic { width: 1.45rem; height: 1.45rem; }
.food-ref strong { display: block; font: 800 1.6rem/1.1 var(--f-titulo); letter-spacing: -.02em; margin: .8rem 0 .5rem; }
.food-ref strong small { font: 700 1rem var(--f-texto); color: var(--gris); letter-spacing: 0; }
.badge { display: inline-block; font-size: .78rem; font-weight: 700; padding: .3rem .6rem; border-radius: 8px; background: var(--ambar-suave); color: var(--ambar); }
.badge.label { background: var(--verde-suave); color: var(--verde); }
.caption { font-size: .88rem; line-height: 1.55; color: var(--gris); }
.calc { font-size: .95rem; background: #F1F6F9; border-left: 4px solid var(--celeste); padding: .75rem .9rem; border-radius: 10px; line-height: 1.6; margin-bottom: .9rem; font-variant-numeric: tabular-nums; }
.notice { padding: .9rem 1rem; border-radius: 14px; background: var(--ambar-suave); border: 1px solid var(--ambar-borde); font-size: .92rem; line-height: 1.6; }
.aviso-alimento { margin: .2rem 0 .8rem; border-left: 4px solid var(--rojo); font-weight: 700; color: var(--tinta); }
.notice.blue { background: var(--cielo); border-color: var(--linea); }
.notice.error { background: var(--error-suave); border-color: var(--error-borde); color: var(--error); }

/* ---------- Mi plato ---------- */
.meal-item { padding: .9rem 0; border-bottom: 1px solid var(--linea); display: grid; grid-template-columns: 1fr auto; gap: .6rem; }
.meal-item strong { font-size: 1rem; }
.meal-item .caption { margin: .3rem 0 0; }
.meal-item .hc { font: 800 1.15rem/1.2 var(--f-titulo); text-align: right; white-space: nowrap; }
.meal-item .linkbtn { display: block; margin-left: auto; padding-right: 0; font-size: .85rem; }
.plato-vacio { display: flex; align-items: center; gap: .8rem; padding: 1.1rem 0; color: var(--gris); }
.plato-vacio .ic { width: 2.4rem; height: 2.4rem; color: var(--celeste); }
.plato-vacio p { margin: 0; }
.total {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin: 1rem 0 .6rem; padding: 1.05rem 1.25rem; border-radius: 16px; background: var(--tinta); color: #fff;
}
.total span { font-weight: 700; }
.total strong { font: 800 clamp(2.1rem, 5vw, 2.7rem)/1 var(--f-titulo); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.total small { font: 700 1rem var(--f-texto); letter-spacing: 0; opacity: .85; }
.blocks { display: flex; flex-wrap: wrap; gap: .3rem; margin: .6rem 0; }
.block {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--celeste); color: var(--tinta); font: 800 .72rem/1 var(--f-texto);
}
.block.partial { background: linear-gradient(to right, var(--celeste) var(--fill), var(--bloque-vacio) var(--fill)); box-shadow: inset 0 0 0 1px #B5D6E2; }

/* ---------- Aprender ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 1.5rem; }
.learn-card { background: #fff; border: 1px solid var(--linea); border-top: 4px solid var(--celeste); border-radius: var(--radio-app); padding: 1.4rem; }
.learn-card h3 { font-size: 1.2rem; }
.learn-card p { margin-bottom: 0; }
.learn-card .number { display: inline-block; font-size: .8rem; font-weight: 700; background: var(--cielo); color: var(--azul); padding: .35rem .7rem; border-radius: 999px; margin-bottom: .9rem; }
.lesson { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 0 0 1.5rem; }
.nutrition { border: 2px solid var(--tinta); padding: 1.1rem 1.2rem; border-radius: 12px; max-width: 380px; background: #fff; }
.nutrition h4 { font: 800 1.1rem var(--f-titulo); margin: 0 0 .25rem; }
.nutrition .nutrow { padding: .55rem 0; border-bottom: 1px solid #C9D3DC; display: flex; justify-content: space-between; gap: .5rem; font-size: .95rem; }
.nutrition .highlight { background: var(--verde-suave); font-weight: 700; padding: .7rem; border-radius: 8px; border-bottom: 0; color: var(--verde); }
@media (max-width: 950px) { .cards { grid-template-columns: repeat(2, 1fr); } .lesson { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

/* ---------- Practicar ---------- */
.quiz { max-width: 780px; margin: 0 auto; }
.quiz h3 { font-size: clamp(1.25rem, 3vw, 1.55rem); line-height: 1.25; }
.quiz .answer {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: #fff; color: var(--tinta); font: 400 1.02rem/1.4 var(--f-texto);
  padding: 1rem 1.1rem; border: 1.5px solid #C5DCE6; border-radius: 14px; margin: .6rem 0;
  transition: border-color .15s ease, background-color .15s ease;
}
.quiz .answer:hover:not(:disabled) { border-color: var(--azul); background: var(--cielo); }
.quiz .answer.correct { background: var(--verde-suave); border-color: var(--verde); font-weight: 700; }
.quiz .answer.wrong { background: var(--error-suave); border-color: #D27C76; }
.quiz .answer:disabled { cursor: default; }
.progress { height: 8px; border-radius: 99px; background: var(--bloque-vacio); margin: 1rem 0 1.4rem; overflow: hidden; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--celeste), var(--azul)); border-radius: 99px; transition: width .3s ease; }
.result-big { font: 800 clamp(3rem, 9vw, 4.5rem)/1 var(--f-titulo); color: var(--azul); margin: 1.2rem 0; }
#quizFeedback { font-size: 1rem; }

/* ---------- Familia, registro y fuentes ---------- */
.profile-card { padding: .9rem 0; border-bottom: 1px solid var(--linea); }
.profile-card .caption { margin: .2rem 0 0; }
.ratio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1rem; }
.ratio-grid .caption { margin: -.7rem 0 1rem; font-size: .8rem; }
@media (max-width: 550px) { .ratio-grid { grid-template-columns: 1fr; } }
details { margin-top: 1rem; }
summary { cursor: pointer; font-weight: 700; color: var(--azul); padding: .3rem 0; }
.history-item { border-bottom: 1px solid var(--linea); padding: 1.1rem 0; }
.history-item h3 { font-size: 1.1rem; margin: 0; }
.history-item .caption { margin: .3rem 0 0; }
.tablewrap { overflow: auto; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .75rem .6rem; border-bottom: 1px solid var(--linea); }
th { color: var(--gris); font-size: .85rem; }
td:nth-child(2) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.source-list { padding-left: 1.2rem; }
.source-list li { margin-bottom: 1rem; line-height: 1.6; }
.source-list a { font-weight: 700; }
.cj-aviso {
  display: flex; gap: .8rem; align-items: flex-start; margin-top: 2rem; padding: 1rem 1.2rem;
  border-radius: var(--radio); background: #fff; border: 1px solid var(--linea); color: var(--gris); font-size: .92rem; line-height: 1.55;
}
.cj-aviso .ic { color: var(--azul); width: 1.6rem; height: 1.6rem; margin-top: .1rem; }
.cj-aviso p { margin: 0; }

/* ---------- Diálogos y aviso flotante ---------- */
dialog {
  width: calc(100% - 28px); max-width: 620px; max-height: 90vh;
  border: 0; border-radius: 22px; padding: clamp(1.25rem, 4vw, 1.75rem); color: var(--tinta);
  box-shadow: 0 20px 60px rgba(13, 27, 76, .3);
}
dialog h2 { font-size: 1.5rem; margin: 0; }
dialog::backdrop { background: rgba(13, 27, 76, .7); }
.toast {
  position: fixed; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 60;
  background: var(--tinta); color: #fff; padding: .85rem 1.3rem; border-radius: 14px; max-width: min(92%, 480px);
  box-shadow: 0 10px 28px rgba(13, 27, 76, .3); font-weight: 700; text-align: center;
}
@media (max-width: 760px) { .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }

@media (prefers-reduced-motion: reduce) {
  .cj-aro { animation: none; stroke-dashoffset: 0; }
  .cj-flota { animation: none; }
}

/* ---------- Impresión: solo el resumen de la comida ---------- */
.printTitle { display: none; }
@media print {
  body, .cj-body { background: #fff; padding: 0; }
  .cabezal, .pie, .cj-portada, .cj-tabs, .cj-pasos, #foodpanel, .cj-aviso, .toast, dialog, button, .no-print { display: none !important; }
  .cj { padding: 0; }
  .cj-seccion { display: none !important; }
  #contar { display: block !important; }
  .columns { display: block; }
  .stack > :not(#summaryPanel) { display: none !important; }
  #summaryPanel { border: 0; padding: 0; box-shadow: none; }
  .printTitle { display: block !important; font: 800 1.6rem var(--f-titulo); }
  .toolbar label { font-size: .8rem; }
  .toolbar select, input, textarea { border: 0; padding: 0; }
  .total { background: #fff; color: var(--tinta); border: 2px solid var(--tinta); }
  .caption { color: #333; }
}