/* ============================================================
   PUNTO 2 UX — Proyecto guiado para principiantes
   Cambios visuales y de navegación interna; no altera cálculos.
   ============================================================ */
.project-guide{
  background:var(--white); border:1px solid var(--line); border-radius:16px;
  padding:18px 20px; margin-bottom:16px;
}
.project-guide-head{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; margin-bottom:12px; }
.project-guide-head h2{ font-size:1.08rem; }
.project-guide-head p{ margin:4px 0 0; color:var(--cacao-soft); font-size:.82rem; max-width:650px; }
.project-guide-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.project-guide-step{ border:1px solid var(--line); background:var(--cream); border-radius:10px; padding:10px 12px; font-size:.78rem; font-weight:700; color:var(--cacao-soft); }
.project-guide-step b{ display:block; font-family:'Space Mono',monospace; font-size:.66rem; color:var(--raspberry-deep); margin-bottom:2px; }
.project-guide-step.done{ background:#e8f5e9; border-color:#b7dfc0; color:#2e7d32; }
.project-step-actions{ display:flex; justify-content:flex-end; margin-top:12px; }
.project-create-intro{
  background:linear-gradient(135deg, rgba(224,57,158,.08), rgba(21,155,149,.08));
  border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-bottom:14px;
}
.project-create-intro h2{ font-size:1.08rem; margin-bottom:4px; }
.project-create-intro p{ margin:0; color:var(--cacao-soft); font-size:.84rem; }
.project-create-tip{ margin-top:8px; font-size:.76rem; color:var(--cacao-soft); }
@media(max-width:640px){
  .project-guide{ padding:15px 14px; }
  .project-guide-steps{ grid-template-columns:1fr; }
  .project-step-actions .btn{ width:100%; }
  .project-create-intro{ padding:14px; }
}

/* ============================================================
   RESPONSIVE — tablet (≤1024px) and mobile (≤640px / ≤420px)
   ============================================================ */

/* ---- Tablet ---- */
@media(max-width:1024px){
  main{ padding:24px 20px 0; }
  header.hero{ padding:38px 20px 30px; }
  .ing-grid{ grid-template-columns:1fr 1fr; }
  .hero-inner{ padding-right:56px; }
}

/* ---- Table scroll wrapper (all breakpoints, safety net) ---- */
.table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll table.rows{ min-width:380px; }

/* ---- Mobile tab bar becomes a horizontal swipe strip ---- */
@media(max-width:640px){
  nav.tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; justify-content:flex-start; margin:-18px 16px 0; }
  nav.tabs button{ flex:0 0 auto; min-width:auto; white-space:nowrap; padding:10px 14px; }
  nav.subtabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; justify-content:flex-start; scrollbar-width:none; }
  nav.subtabs::-webkit-scrollbar{ display:none; }
  nav.subtabs button{ flex:0 0 auto; min-width:auto; white-space:nowrap; padding:8px 12px; }
}

@media(max-width:640px){
  header.hero{ padding:30px 16px 40px; }
  header.hero h1{ font-size:1.5rem; }
  header.hero p{ font-size:.88rem; }
  .hero-inner{ padding-right:52px; }
  main{ padding:20px 16px 0; }
  .card{ padding:18px 16px 16px; border-radius:14px; }
  .card-head h2{ font-size:1.05rem; }
  .card-head{ flex-direction:column; align-items:flex-start; gap:4px; }
  .num-badge{ order:-1; }

  .ing-grid{ grid-template-columns:1fr; }
  .ing-top{ align-items:center; }
  .unit-pair{ grid-template-columns:1fr 1fr; }

  .pill-row{ flex-direction:column; }
  .pill{ min-width:0; }

  .summary{ padding:20px 16px; border-radius:14px; }
  .sum-line{ font-size:.84rem; }
  .sum-line.total{ font-size:1rem; }
  .sum-line.total span:last-child{ font-size:1.15rem; }

  .shape-btns button{ flex:1 1 auto; text-align:center; padding:8px 8px; font-size:.75rem; }

  .btn{ width:100%; }
  .grid2, .grid3{ gap:10px; }

  table.rows th:nth-child(1), table.rows td:nth-child(1){ min-width:120px; }

  .plan-badge{ top:10px; left:10px; padding:6px 10px; font-size:.76rem; gap:4px; }
  .settings-fab{ width:38px; height:38px; font-size:1rem; top:10px; right:10px; }
  .timers-fab{ top:52px; font-size:1.25rem; }
  /* .back-fab/.forward-fab eliminados (2026-09-17) -- help-fab y
     save-recipe-fab suben 2 posiciones (84px, 2×42px acá en mobile). */
  .help-fab{ top:94px; font-size:1.1rem; }
  .save-recipe-fab{ top:136px; font-size:1rem; }
}

/* ---- Very small phones ---- */
@media(max-width:420px){
  :root{ font-size:15px; }
  header.hero h1{ font-size:1.3rem; }
  .eyebrow{ font-size:.65rem; }
  .card-sub{ font-size:.8rem; }
  .ing-block .val{ font-size:.9rem; }
  .pill b{ font-size:.92rem; }
}

/* ---- Larger desktop: give ingredient cards more breathing room ---- */
@media(min-width:1200px){
  main, nav.tabs, .hero-inner, footer.note{ max-width:1180px; }
  .ing-grid{ grid-template-columns:1.1fr 1.3fr 1.3fr 1fr; }
}

/* ---- Touch target safety net ---- */
@media(hover:none) and (pointer:coarse){
  input[type=text], input[type=number], select, .btn, .btn-add, .shape-btns button, nav.tabs button{ min-height:40px; }
  .btn-del{ min-width:36px; min-height:36px; }
}


/* ============================================================
   PUNTO 5 · EXPERIENCIA MÓVIL, CLARIDAD VISUAL Y CONSISTENCIA
   Capa conservadora: no modifica lógica ni oculta funciones.
   ============================================================ */

/* Evita desbordes por valores, etiquetas y controles largos. */
.card, .panel, .subpanel, .inv-subpanel, .grid2, .grid3,
.result-toggle-body, .result-breakdown-body, .project-step-accordion-body{
  min-width:0;
}
.card *, .result-toggle *, .project-step-accordion *{ box-sizing:border-box; }

/* Acciones y controles: jerarquía consistente y foco visible. */
.btn, .btn-add, nav.tabs button, nav.subtabs button,
.project-step-accordion-summary, .result-toggle summary,
.result-breakdown-toggle>summary{
  -webkit-tap-highlight-color:transparent;
}
.btn:focus-visible, .btn-add:focus-visible, .btn-del:focus-visible,
nav.tabs button:focus-visible, nav.subtabs button:focus-visible,
.project-step-accordion-summary:focus-visible,
.result-toggle summary:focus-visible,
.result-breakdown-toggle>summary:focus-visible{
  outline:3px solid rgba(21,155,149,.42);
  outline-offset:2px;
}

/* Los bloques plegables existentes se sienten como controles tocables. */
.project-step-accordion-summary,
.result-toggle summary,
.result-breakdown-toggle>summary{
  min-height:44px;
  display:flex;
  align-items:center;
}

/* Tablas: desplazamiento local, nunca de toda la página. */
.table-scroll{
  max-width:100%;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
}
.table-scroll table{ margin-bottom:0; }
table.rows th, table.rows td{ vertical-align:middle; }

/* Resultado aprobado: conserva jerarquía y mejora lectura en anchos estrechos. */
.result-hero-main .rh-value,
.result-metric .rh-small-value,
.result-profit-item b{
  overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums;
}
.result-explain{ line-height:1.5; }
.result-breakdown-toggle>summary{ justify-content:space-between; gap:10px; }

/* Espaciado consistente para grupos de acciones sin cambiar su orden. */
.recipe-actions, .timer-btns, .project-step-actions{ gap:8px; }

@media(max-width:640px){
  /* Evita zoom automático de iOS y mejora precisión táctil. */
  input[type=text], input[type=number], input[type=email], input[type=tel],
  input[type=date], input[type=time], select, textarea{
    font-size:16px !important;
    min-height:44px;
  }
  textarea{ min-height:92px; }

  .btn, .btn-add, .shape-picker-btn, .shape-picker-option,
  nav.tabs button, nav.subtabs button{
    min-height:44px;
  }
  .btn-del{ min-width:44px; min-height:44px; }

  /* Navegación: se mantiene en la misma posición y solo mejora el uso táctil. */
  nav.tabs{
    gap:4px;
    padding:5px;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
  }
  nav.tabs button{
    scroll-snap-align:start;
    padding:10px 13px;
  }
  nav.subtabs{
    gap:4px;
    scroll-snap-type:x proximity;
  }
  nav.subtabs button{ scroll-snap-align:start; }

  /* Contenido: menos aire desperdiciado sin comprimir la lectura. */
  main{ padding-left:14px; padding-right:14px; }
  .card{ margin-bottom:14px; padding:16px 14px; }
  .card-sub{ line-height:1.45; margin-bottom:13px; }
  .formula-note{ line-height:1.45; }

  /* Acciones principales ocupan toda la anchura útil y quedan separadas. */
  .recipe-actions, .timer-btns{
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }
  .recipe-actions .btn, .timer-btns .btn{ width:100%; }

  /* Resultado: lectura rápida con tarjetas apiladas y cifras estables. */
  .result-toggle{ margin-top:16px; margin-bottom:16px; }
  .result-toggle summary{ padding:15px 14px; }
  .result-toggle-body{ padding:14px; }
  .result-hero{ gap:10px; }
  .result-hero-main{ padding:17px 14px; }
  .result-hero-main .rh-value{ font-size:clamp(1.9rem,10vw,2.55rem); }
  .result-metric{ padding:12px; }
  .result-profit-row{ gap:10px; }
  .result-profit-item{ padding:12px; }
  .result-breakdown-body{ padding:12px; }

  /* Los FAB existentes no cambian de función, pero interfieren menos con el contenido. */
  .settings-fab{
    box-shadow:0 3px 10px rgba(59,36,26,.12);
  }

  /* Cualquier contenido ancho queda contenido dentro de su propia sección. */
  img, svg, canvas{ max-width:100%; height:auto; }
  pre, code{ max-width:100%; overflow-wrap:anywhere; }
}

@media(max-width:430px){
  main{ padding-left:12px; padding-right:12px; }
  nav.tabs{ margin-left:12px; margin-right:12px; }
  .card{ padding:15px 12px; }
  .project-guide{ padding:14px 12px; }
  .project-create-intro{ padding:13px 12px; }

  /* Un solo dato por fila cuando el ancho ya no permite comparación cómoda. */
  .result-hero, .result-profit-row{ grid-template-columns:1fr; }
  .result-metric, .result-profit-item{ text-align:left; }

  /* Evita que títulos y estados compitan por espacio. */
  .project-step-accordion-summary{
    flex-wrap:wrap;
    gap:6px 10px;
    padding-top:11px;
    padding-bottom:11px;
  }
  .project-step-accordion-status{ margin-left:auto; }
}

@media(hover:none) and (pointer:coarse){
  /* Estándar táctil de ~44 px sin alterar controles de escritorio. */
  input[type=text], input[type=number], input[type=email], input[type=tel],
  input[type=date], input[type=time], select, textarea,
  .btn, .btn-add, .shape-picker-btn, .shape-picker-option,
  nav.tabs button, nav.subtabs button{
    min-height:44px;
  }
  .btn-del{ min-width:44px; min-height:44px; }
}