/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BASE — Defensas globales mobile-first
   Frutos Tropicales Peru Export S.A.C.

   Aplica reglas conservadoras que previenen problemas comunes
   en TODOS los HTMLs del portal sin tocar archivos individuales.

   Breakpoints:
   - Mobile:  320px – 767px (base)
   - Tablet:  768px – 1023px
   - Desktop: 1024px+
   ═══════════════════════════════════════════════════════════ */

/* ────── Reset universal de box-model y tipografía ────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
  /* No bloquear overflow-x globalmente: rompe position:sticky en algunos navegadores.
     Solo cuando es necesario (mobile) lo aplicamos abajo. */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ────── Media fluida y elementos que pueden desbordar ────── */
img, video, picture, canvas, svg, iframe, embed, object {
  max-width: 100%;
  height: auto;
}
canvas { display: block; }

/* Tablas con scroll horizontal automático cuando son grandes */
table { max-width: 100%; }
.table-container,
.table-wrapper,
.table-wrap,
[class*="table-wrap"],
[class*="table-container"] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.table-container::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar,
[class*="table-wrap"]::-webkit-scrollbar { height: 8px; }

/* Pre/code wrappeables */
pre, code, kbd, samp {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}
pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Inputs siempre dentro de su contenedor */
input, select, textarea, button {
  max-width: 100%;
  font-family: inherit;
}

/* ════════════════════════════════════════════════════
   MOBILE (≤767px) — defensas críticas
   ════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Evitar scroll horizontal por hijos rebeldes */
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Hijos directos no desbordan */
  body > * {
    max-width: 100vw;
  }

  /* iOS: prevenir zoom automático al enfocar inputs (font-size <16px) */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea {
    font-size: 16px;
  }

  /* Touch targets ≥40px (Apple HIG / Material) */
  button, .btn, [role="button"], a.btn, a.button,
  input[type="submit"], input[type="button"], input[type="reset"] {
    min-height: 40px;
    padding-block: max(8px, 0.5em);
  }
  /* Iconos pequeños/toggles dentro de barras NO inflar */
  .topbar button, .topbar .btn,
  [class*="topbar"] button, [class*="topbar"] .btn,
  .theme-toggle, .topbar-toggle, .menu-toggle {
    min-height: auto;
  }

  /* Grids/rows con min-width fijos: forzar fluidez */
  [class*="grid"] > *,
  [class*="row"] > * { min-width: 0; }

  /* Texto largo no rompe layout */
  h1, h2, h3, h4, h5, h6, p, span, td, th, li, dd, dt, label {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* Modales nunca exceder viewport */
  [class*="modal"], [role="dialog"] {
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }

  /* Cards y panels: padding más compacto cuando heredan ancho 100% */
  .container, .wrapper, .content, main, [role="main"] {
    padding-inline: clamp(8px, 3vw, 20px);
  }

  /* Forms con grids fijos: forzar 1 col */
  .form-grid, [class*="form-grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════
   MOBILE PEQUEÑO (≤360px) — extra defensa
   ════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  /* Reducir padding lateral para máxima superficie útil */
  .container, .wrapper, main, [role="main"] {
    padding-inline: 6px;
  }

  /* Tipografías un poco más pequeñas si están muy grandes */
  body { font-size: 14px; }

  /* Cards con padding mínimo */
  [class*="card"], .panel { padding: 10px; }
}

/* ════════════════════════════════════════════════════
   TABLET (768px – 1023px) — aprovechar espacio
   ════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Inputs vuelven a 14px en tablet+ (espacio sobra) */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea {
    font-size: 14px;
  }

  /* Grids de 1col en mobile suben a 2col en tablet si tienen auto-fit */
  /* (las apps ya definen sus propios breakpoints, esto es complemento) */
}

/* ════════════════════════════════════════════════════
   ORIENTACIÓN HORIZONTAL (landscape mobile)
   ════════════════════════════════════════════════════ */
@media (max-width: 767px) and (orientation: landscape) {
  /* Reducir altura sticky/fixed para no tapar tanto */
  .topbar, [class*="topbar"], .header, [class*="header"] {
    min-height: auto;
  }
}

/* ════════════════════════════════════════════════════
   REDUCED MOTION (accesibilidad)
   ════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════
   FOCUS VISIBLE (accesibilidad teclado)
   ════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ════════════════════════════════════════════════════
   PRINT (impresión limpia)
   ════════════════════════════════════════════════════ */
@media print {
  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .topbar, [class*="topbar"], .sidebar, [class*="sidebar"],
  nav, footer, .btn, button { display: none !important; }
  body { padding: 0; }
  .card, [class*="card"], .panel { break-inside: avoid; page-break-inside: avoid; }
}