/* ceiba.to — mobile-first overlay fixes
 * Centralized CSS partial inyectado en todos los HTML después del <style> inline.
 * Aplica reglas mobile-first sin reescribir el CSS legacy de cada página.
 *
 * Patterns referenciados:
 *   - mobile-tap-target (≥44×44 en .ceiba-wp-select__pill, .theme-toggle, .theme-btn, .lang-btn, .btn)
 *   - mobile-no-zoom-input (font-size 16px en input/select/textarea)
 *   - mobile-safe-area-insets (env(safe-area-inset-*) en nav sticky + footer)
 *   - mobile-readable-prose (line-height 1.6+ + clamp en headings)
 *
 * Source-of-truth: /home/inge/koa/05_services/ceiba-to/_shared/mobile-fixes.css
 * Última actualización: 2026-05-19
 */

/* ============== 1. Inputs / selects / textareas: no zoom iOS ============== */
input,
select,
textarea {
  font-size: 16px;
}

@media (min-width: 768px) {
  input,
  select,
  textarea {
    font-size: 14px;
  }
}

/* ============== 2. Tap targets ≥44×44 ============== */
.ceiba-wp-select__pill,
.theme-toggle,
.theme-btn,
.lang-btn,
.level-toggle a,
.btn,
button {
  min-height: 44px;
}

/* Pills nav: bumpear padding y font-size mobile */
@media (max-width: 640px) {
  .ceiba-wp-select__pill {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  .ceiba-wp-select__row {
    gap: 8px !important;
  }
  .ceiba-wp-select__groups {
    width: 100%;
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }
  .ceiba-wp-select__group {
    flex: 0 1 auto;
  }
}

/* Theme toggle / nav buttons: 44×44 enforced */
.theme-toggle,
.theme-btn {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Iconos dentro del theme toggle: tamaño consistente */
.theme-toggle svg,
.theme-btn svg {
  width: 18px;
  height: 18px;
}

/* ============== 3. Safe-area insets en navs sticky ============== */
.ceiba-wp-select {
  padding-left:  max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

@supports (padding: env(safe-area-inset-top)) {
  .ceiba-wp-select {
    padding-top: max(10px, env(safe-area-inset-top));
  }
}

/* ============== 4. Code blocks: wrap en mobile en lugar de scroll-x ============== */
@media (max-width: 480px) {
  pre,
  .wp-content pre,
  .container pre {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    font-size: 0.78em !important;
    line-height: 1.45;
    padding: 0.8rem 1rem !important;
  }
  code {
    word-break: break-word;
  }
}

/* ============== 5. Tablas responsive: scroll-x wrap ============== */
@media (max-width: 640px) {
  .wp-content table,
  .container table,
  article table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.85rem;
  }
  .wp-content table th,
  .wp-content table td {
    padding: 0.5rem 0.6rem !important;
    white-space: nowrap;
  }
}

/* ============== 6. Imágenes/iframes responsivos ============== */
img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* ============== 7. Layout breakpoint 640px adicional ============== */
@media (max-width: 640px) {
  .wp-layout {
    grid-template-columns: 1fr !important;
    padding: 1rem !important;
    gap: 0 !important;
  }
  .wp-toc {
    padding: 1rem 0 !important;
    margin-bottom: 1.5rem;
    position: static !important;
  }
  .wp-content {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }
  .wp-content h1 {
    font-size: clamp(1.6rem, 6vw, 2rem) !important;
    line-height: 1.2 !important;
  }
  .wp-content h2 {
    font-size: clamp(1.25rem, 5vw, 1.5rem) !important;
    line-height: 1.25 !important;
  }
  .wp-content h3 {
    font-size: clamp(1.1rem, 4vw, 1.25rem) !important;
  }

  /* Container y hero genéricos: padding lateral suficiente */
  .container,
  .hero {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* CTA stacks verticales en mobile (start-* pages) */
  .cta-row,
  .nav-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* ============== 8. Hero typography fluid scaling ============== */
@media (max-width: 480px) {
  h1.hero-title,
  .hero h1,
  .hero-text h1 {
    font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
    line-height: 1.15 !important;
  }
}

/* ============== 9. Theme toggle inyectado (whitepaper-*.html) ============== */
.ceiba-wp-select__theme {
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid var(--border, #e5e3da);
  background: var(--bg2, #ffffff);
  color: var(--text, #1a1820);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  margin-left: 8px;
  transition: border-color 0.15s, background 0.15s;
}

.ceiba-wp-select__theme:hover {
  border-color: var(--text2, #4a4858);
}

.ceiba-wp-select__theme svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ceiba-wp-select__theme .icon-sun {
  display: none;
}

[data-theme="dark"] .ceiba-wp-select__theme .icon-moon {
  display: none;
}

[data-theme="dark"] .ceiba-wp-select__theme .icon-sun {
  display: block;
}

/* ============== 10. Footer safe-area ============== */
footer {
  padding-bottom: max(2rem, calc(2rem + env(safe-area-inset-bottom)));
}

/* ============== 11. Anti-overflow universal mobile ============== */
/* Cualquier elemento que se salga del viewport horizontal en mobile
 * debe respetar el ancho del contenedor padre, no del viewport.
 * El body con overflow-x: hidden ya está en el inline CSS de varios
 * archivos — esto es seguridad adicional.
 */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Containers con max-width fijo deben tener padding lateral y width: 100% */
  .container,
  main,
  section,
  .wp-layout,
  .hero,
  .nav-container,
  .footer-content {
    max-width: 100% !important;
    width: 100%;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    box-sizing: border-box;
  }

  /* Grids multi-columna se colapsan a 1 columna */
  [class*="grid-cols-"]:not([class*="grid-cols-1"]),
  [style*="grid-template-columns"][style*="repeat"],
  .grid-2,
  .grid-3,
  .grid-4,
  .production-grid,
  .features-grid,
  .examples-grid,
  .three-col,
  .two-col {
    grid-template-columns: 1fr !important;
  }

  /* Tipografía hero / títulos masivos: clamp para no overflow */
  h1 {
    font-size: clamp(1.75rem, 7vw, 3rem) !important;
    line-height: 1.15 !important;
    word-break: break-word;
  }
  h2 {
    font-size: clamp(1.4rem, 5.5vw, 2.25rem) !important;
    line-height: 1.2 !important;
  }
  h3 {
    font-size: clamp(1.15rem, 4vw, 1.5rem) !important;
  }

  /* Hero overlines / chips no overflowan */
  .hero-overline,
  .hero-tagline,
  .breadcrumb {
    font-size: clamp(0.7rem, 2.2vw, 0.875rem);
    word-break: break-word;
  }

  /* Imágenes/videos/iframes ya respetan width arriba, refuerzo con object-fit */
  img,
  video,
  iframe,
  svg {
    max-width: 100%;
    height: auto;
  }

  /* Elementos absolute decorativos que se salen (hero-glow, tree-bg, etc.) */
  .hero-glow,
  .tree-bg,
  .decoration,
  [class*="-glow"],
  [class*="-decoration"] {
    max-width: 100vw;
    overflow: hidden;
  }

  /* Tabs / pill rows: scroll horizontal en lugar de wrap roto */
  .tabs,
  .pill-row,
  .level-toggle,
  .ceiba-wp-select__row,
  .nav-actions {
    flex-wrap: wrap;
  }

  /* Long URLs / strings en links — wrap */
  a, p, li, td, code {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Botones full-width opcional en CTAs principales (no en cada button) */
  .btn-primary.btn-block,
  .cta-primary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ============== 12. Anti-overflow extra para <480px ============== */
@media (max-width: 480px) {
  /* Padding interno reducido aún más, sin que se rompa */
  .container,
  main,
  section {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Reducir margins entre secciones */
  section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* Hero typography aún más ajustada */
  h1 {
    font-size: clamp(1.6rem, 8vw, 2.25rem) !important;
  }
}

/* ============== 13. Tablet portrait specific ============== */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Asegurar que layouts 3-col bajen a 2-col en tablet */
  .production-grid,
  .features-grid,
  .examples-grid,
  .three-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============== 14. Hamburger / mobile drawer (index.html, network.html, badge-demo.html) ============== */
/* Inyectado por _shared/nav-mobile.js. Solo visible en mobile. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  border-radius: 10px;
  background: var(--bg-card, transparent);
  color: var(--text-primary, currentColor);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
  border-color: var(--green, #16a34a);
  outline: none;
}
.nav-toggle svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-toggle .icon-x { display: none; }
nav.is-open .nav-toggle .icon-burger { display: none; }
nav.is-open .nav-toggle .icon-x { display: block; }

@media (max-width: 600px) {
  .nav-toggle { display: inline-flex; }

  /* Drawer abierto: revertir el display:none que cada página tiene en .nav-links */
  nav.is-open .nav-links {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 0 !important;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--bg, #fdfcf8);
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.12));
    padding: 0.5rem 1.25rem max(1rem, env(safe-area-inset-bottom));
    box-shadow: 0 14px 32px rgba(0,0,0,0.10);
    z-index: 95;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  nav.is-open .nav-links > a {
    display: block;
    padding: 14px 4px;
    font-size: 1rem;
    color: var(--text-primary, currentColor) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border, #e5e3da) 50%, transparent);
  }
  nav.is-open .nav-links > a:last-of-type { border-bottom: 0; }
  nav.is-open .nav-links .lang-switch,
  nav.is-open .nav-links .theme-toggle {
    margin: 10px 0 0;
    align-self: flex-start;
  }
  nav.is-open .nav-links .lang-switch {
    display: inline-flex;
    gap: 6px;
  }

  body.nav-open { overflow: hidden; }
}