/* ═══════════════════════════════════════════════════════════════
 * bug-fixes-final.css — Batch de fixes visuales · 2026-05-25
 *
 * Audit a 20 módulos buscando patrones rotos comunes y aplicando
 * fixes CSS quirúrgicos SIN tocar el JS de cada uno.
 *
 * Carga AL FINAL del cascade (después de todos los otros CSS).
 * Cualquier !important acá es deliberado: pisa estilos inline malos.
 * ═══════════════════════════════════════════════════════════════ */

/* ═══ A · MODALES · que no se rompan en ningún viewport ══════ */
.modal {
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.modal > * { max-width: 100%; box-sizing: border-box; }
/* Modales muy anchos (>700px) → en pantallas medianas se ajustan */
@media (max-width: 900px) {
  .modal[style*="max-width:7"],
  .modal[style*="max-width:8"],
  .modal[style*="max-width:680"],
  .modal[style*="max-width:780"],
  .modal[style*="max-width:880"] {
    max-width: 96vw !important;
  }
}

/* ═══ B · TABLAS · wrapper de scroll automático ══════════════ */
/* Si una tabla excede el contenedor en desktop, mostrar scroll horizontal sin romper layout */
.panel table:not(.no-scroll),
.content table:not(.no-scroll),
.modal table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 901px) {
  /* En desktop ancho, las tablas vuelven a su display normal */
  .panel table:not(.no-scroll):not(.h-scroll-always),
  .content table:not(.no-scroll):not(.h-scroll-always),
  .modal table:not(.h-scroll-always) {
    display: table;
    overflow-x: visible;
  }
}

/* ═══ C · SELECTS · chevron consistente + sin estilos nativos ══ */
select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%238b949e' d='M6 8L0 0h12z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px !important;
  padding-right: 28px !important;
  cursor: pointer;
}
[data-theme="light"] select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236b7280' d='M6 8L0 0h12z'/></svg>") !important;
}
select::-ms-expand { display: none; }

/* ═══ D · TEXTAREAS · resize controlado ═════════════════════ */
textarea {
  resize: vertical !important;
  min-height: 70px;
  max-height: 400px;
  font-family: inherit !important;
}

/* ═══ E · INPUTS DE MONEDA (con $ o COP/USD) ════════════════ */
input[type="number"]:not(.cant),
input.money-input,
input[data-type="money"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}

/* ═══ F · BOTONES · texto largo que no rompa layout ═════════ */
.btn, button.btn, button:not(.btn-icon):not([class*="icon"]) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Excepción: botones dentro de barras flex que necesitan growth */
.btn-block { display: block; width: 100%; }

/* ═══ G · Z-INDEX hierarchy clara (evitar conflictos) ════════ */
/* Topbar:        50
   Sidebar:       100
   Tooltips:      500
   Dropdowns:     1000
   FAB botones:   8500
   Modales:       9000
   Toast:         9500
   Confirm:       9900 (sobre todos los modales) */
.modal-bg { z-index: 9000 !important; }
.toast    { z-index: 9500 !important; }
[id*="floating-btn"], .qa-fab { z-index: 8500 !important; }
.tooltip, [data-tooltip]::after { z-index: 9800 !important; }

/* ═══ H · CARDS · evitar overflow de contenido largo ═══════ */
.project-card,
.po-card,
.supplier-card,
.card {
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.project-card .project-title,
.project-card [class*="title"] {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ═══ I · IMÁGENES · max-width automático ═══════════════════ */
.modal img:not([style*="width"]),
.content img:not([style*="width"]) {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ═══ J · CODE BLOCKS · scroll horizontal sin romper layout ═ */
pre, code {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  word-wrap: normal;
}
pre {
  white-space: pre;
  padding: 12px 14px;
  background: var(--bg2);
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.5;
}

/* ═══ K · LISTAS dentro de cards · evitar overflow ═══════════ */
.modal ul, .modal ol,
.card ul, .card ol {
  padding-left: 22px;
  margin: 8px 0;
}
.modal ul li, .modal ol li {
  margin-bottom: 4px;
}

/* ═══ L · CHECKBOXES / RADIOS · estilo unificado ════════════ */
input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
  vertical-align: middle;
}
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

/* ═══ M · LINKS · color de marca consistente ═════════════════ */
a:not(.btn):not(.nav-item):not([class*="brand"]) {
  color: var(--accent);
  text-decoration: none;
  transition: opacity 120ms ease;
}
a:not(.btn):not(.nav-item):hover { opacity: 0.8; text-decoration: underline; }

/* ═══ N · HEADERS de paneles consistentes ═══════════════════ */
.panel h1, .panel h2, .panel h3,
.modal-title {
  letter-spacing: -0.3px;
  line-height: 1.25;
}

/* ═══ O · SCROLL inside modals (sin scrollbar fea) ══════════ */
.modal {
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}

/* ═══ P · TAGS / CHIPS / PILLS · estilo consistente ═════════ */
.tag, .chip, .pill, [class*="pill"]:not(.swiper-pagination-bullet) {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface2);
  color: var(--text2);
  letter-spacing: 0.2px;
}

/* ═══ Q · SPINNERS / LOADERS centrados ══════════════════════ */
.spinner, [class*="spinner"], .loading {
  display: inline-block;
  vertical-align: middle;
}

/* ═══ R · TOOLTIPS sin escape de pantalla ══════════════════ */
[data-tooltip]::after {
  max-width: min(300px, 80vw);
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
  line-height: 1.4;
}

/* ═══ S · BOTONES CON ÍCONO + TEXTO · alineación uniforme ══ */
button > svg + span,
button > i + span,
.btn > svg + span,
.btn > i + span {
  margin-left: 6px;
}

/* ═══ T · CONTENT padding consistente ═══════════════════════ */
.content {
  scroll-padding-top: 60px;  /* evita que el topbar tape contenido cuando se hace anchor scroll */
}

/* ═══ U · FORMS · spacing consistente entre fields ══════════ */
.field, .form-field, [class*="form-row"] {
  margin-bottom: 14px;
}
.field:last-child, .form-field:last-child { margin-bottom: 0; }

/* ═══ V · DISABLED state visible ════════════════════════════ */
button:disabled, input:disabled, select:disabled, textarea:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ═══ W · LOADING SKELETONS sin glitch en dark mode ═════════ */
[data-theme="light"] .sk,
[data-theme="light"] .skeleton {
  background: linear-gradient(90deg, #f0f0f5 0%, #fafafa 50%, #f0f0f5 100%) !important;
}

/* ═══ X · DROPDOWN MENUS · animación de entrada ═════════════ */
[role="menu"], .dropdown-menu, [class*="dropdown"][class*="open"] {
  animation: dropdownEnter 180ms cubic-bezier(0.0, 0.0, 0.2, 1);
  transform-origin: top;
}
@keyframes dropdownEnter {
  from { opacity: 0; transform: scaleY(0.95) translateY(-4px); }
  to   { opacity: 1; transform: scaleY(1)    translateY(0);    }
}

/* ═══ Y · NUMERIC ROWS · alineación derecha en tablas ══════ */
table td[data-type="money"],
table td[data-type="number"],
.budget-table .col-num,
.aiu-table .col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ═══ Z · PRINT styles · que se vea bien al imprimir ═══════ */
@media print {
  .sidebar, .topbar, .bottom-nav,
  #qa-fab, [id*="floating-btn"],
  .toast, .modal-bg { display: none !important; }
  .content { padding: 0; }
  body { background: white; color: black; }
  .budget-table th { background: #f0f0f0; color: #000; }
}

/* ═══ FIX FINAL · contenedores que evitan layout shift ══════ */
img, video, iframe { aspect-ratio: attr(width) / attr(height); }

/* ═══ ENABLE: scroll smooth en toda la app ══════════════════ */
html { scroll-behavior: smooth; }