/*
 * Compra Inteligente - Sistema de Diseño CSS
 * Basado en Montserrat y los lineamientos de Jana Farmacia
 */

/* La fuente ya NO se carga aquí. El @import bloqueaba el dibujado de la página
   hasta que Montserrat terminaba de bajar; ahora se carga con preconnect +
   link desde index.html (Epic 16, Fase 1 — 2026-08-26). Mismos pesos, mismo
   resultado visual, sin bloquear. */

:root {
  --ci-primary: #71bf45;
  --ci-primary-hover: #5ea637;
  --ci-primary-light: rgba(113, 191, 69, 0.10); /* mismo token que pm */
  --ci-primary-mid: rgba(113, 191, 69, 0.20);
  /* Verde accesible para fondos con texto blanco (WCAG AA ≈5:1) — UH10.4.
     El verde de marca (#71bf45) se reserva para acentos, badges y bordes. */
  --ci-primary-btn: #3f7d22;
  --ci-primary-btn-hover: #356a1d;
  --ci-accent: #ffc12b;
  --ci-accent-hover: #e5ab20;
  --ci-bg-dark: #0f172a;
  --ci-bg-light: #f8fafc;
  --ci-border: #e2e8f0;

  /* Escala de grises unificada con pedido-mostrador (pm-gray-50..400) */
  --ci-gray-50: #f8fafc;
  --ci-gray-100: #f1f5f9;
  --ci-gray-200: #e2e8f0;
  --ci-gray-300: #cbd5e1;
  --ci-gray-400: #94a3b8;

  --ci-text-main: #545454; /* gris cálido de pm (antes slate #1e293b) */
  --ci-text-muted: #64748b;
  --ci-white: #ffffff;
  --ci-error: #ef4444;
  --ci-success: #22c55e;
  --ci-warning: #f59e0b;

  --ci-font-sans: 'Montserrat', sans-serif;
  --ci-radius-sm: 6px;
  --ci-radius-base: 10px;

  --ci-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --ci-shadow-base: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --ci-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--ci-font-sans);
  background-color: var(--ci-bg-light);
  color: var(--ci-text-main);
  font-size: 14px; /* base compacta, como pm (.pm-wrap) */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* =========================================
   HEADER
   ========================================= */
/* Barra superior fija: tarjetas flotando sobre el fondo gris (estilo pedido-mostrador) */
.ci-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--ci-bg-light); /* gris: enmascara el contenido al hacer scroll */
  padding: 14px;
}

/* Encabezado = tarjeta blanca redondeada (exacto de .pm-header) */
.ci-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 11px 16px;
  background: var(--ci-white);
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-base);
  box-shadow: var(--ci-shadow-sm);
  margin-bottom: 14px;
}

.ci-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Marca — exacto de .pm-brand-logo (se ajusta por altura, 40px → ~258px ancho) */
.ci-brand-logo { height: 40px; width: auto; object-fit: contain; display: block; flex-shrink: 0; }
.ci-brand-name { font-size: 14px; font-weight: 700; color: var(--ci-text-main); }

/* Reloj del header — exacto de .pm-header-time */
.ci-clock {
  font-size: 11px;
  color: var(--ci-text-main);
  background: var(--ci-gray-50);
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--ci-gray-200);
  white-space: nowrap;
}

/* Pestañas: la píldora flota debajo del encabezado (no es una barra) */
.ci-tabs-bar {
  display: flex;
  align-items: center;
}

/* Control segmentado de píldoras — valores exactos de pedido-mostrador (.pm-tabs) */
.ci-tabs {
  display: flex;
  gap: 3px;
  background: var(--ci-gray-100);
  padding: 4px;
  border-radius: var(--ci-radius-base);
  width: fit-content;
}

.ci-nav-group { position: relative; }

/* Pestaña — exacto de .pm-tab */
.ci-nav-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-family: var(--ci-font-sans);
  padding: 8px 18px;
  border-radius: var(--ci-radius-sm);
  font-size: 12px;
  font-weight: 700;
  color: var(--ci-text-main);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  line-height: normal;
}
.ci-nav-group-btn:hover { color: var(--ci-primary); }
/* Pestaña activa — exacto de .pm-tab-activo (blanca, texto verde, sombra) */
.ci-nav-group.ci-nav-active > .ci-nav-group-btn {
  background: var(--ci-white);
  color: var(--ci-primary);
  box-shadow: var(--ci-shadow-sm);
}

.ci-nav-caret { font-size: 0.65rem; transition: transform 0.15s; }
.ci-nav-group.ci-nav-open > .ci-nav-group-btn .ci-nav-caret { transform: rotate(180deg); }

.ci-nav-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 210px;
  background: var(--ci-white);
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-base);
  box-shadow: var(--ci-shadow-lg);
  padding: 0.35rem;
  display: none;
  flex-direction: column;
  gap: 0.1rem;
  z-index: 150;
}
.ci-nav-group.ci-nav-open > .ci-nav-menu { display: flex; }

.ci-nav-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  background: none;
  border: none;
  font-family: var(--ci-font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ci-text-main);
  padding: 0.55rem 0.8rem;
  border-radius: var(--ci-radius-sm);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-align: left;
  white-space: nowrap;
}
.ci-nav-item:hover { background-color: var(--ci-gray-100); color: var(--ci-primary-hover); }
.ci-nav-item.active { background-color: var(--ci-primary-light); color: var(--ci-primary-hover); }

/* Usuario + "Cerrar sesión" dentro del menú ☰ (oculto en la barra de escritorio) */
.ci-nav-user { display: none; }
.ci-nav-username {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ci-text-muted);
  padding: 0.2rem 0.6rem 0.1rem;
}

/* Mostrador: único grupo (Consulta) mostrado plano, sin desplegable */
.ci-nav-group.ci-nav-flat { display: flex; gap: 0.25rem; }
.ci-nav-group.ci-nav-flat > .ci-nav-group-btn { display: none; }
.ci-nav-group.ci-nav-flat > .ci-nav-menu {
  position: static;
  display: flex;
  flex-direction: row;
  min-width: 0;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

.ci-cart-badge {
  display: inline-block;
  min-width: 1.3rem;
  margin-left: 0.3rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background-color: var(--ci-accent);
  color: var(--ci-text-main);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}

.ci-toast {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background-color: var(--ci-primary);
  color: #fff;
  padding: 0.65rem 1.25rem;
  border-radius: 10px;
  font-size: 0.87rem;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ci-toast.ci-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Header right */
.ci-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
  white-space: nowrap;
}

.ci-user-info {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ci-text-main);
}

.ci-server-status {
  font-size: 0.78rem;
  color: var(--ci-text-muted);
}

/* =========================================
   MAIN
   ========================================= */
.ci-main {
  flex: 1;
  padding: 0 14px 14px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Botón de menú móvil (UH10.2): oculto en escritorio, visible bajo 768px */
.ci-nav-toggle { display: none; font-size: 1.35rem; line-height: 1; }

/* =========================================
   AUTH / LOGIN
   ========================================= */
.ci-auth-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 3rem 2rem;
}

.ci-auth-card {
  background: var(--ci-white);
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius-base);
  box-shadow: var(--ci-shadow-lg);
  width: 100%;
  max-width: 420px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}

.ci-auth-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--ci-primary);
}

.ci-auth-header { text-align: center; margin-bottom: 2rem; }
.ci-auth-title { font-size: 1.5rem; font-weight: 700; margin-top: 0.5rem; }
.ci-auth-subtitle { font-size: 0.85rem; color: var(--ci-text-muted); margin-top: 0.25rem; }

/* =========================================
   CARDS
   ========================================= */
.ci-card {
  background: var(--ci-white);
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius-base);
  box-shadow: var(--ci-shadow-sm);
  padding: 1.15rem; /* densidad como pm (.pm-card 16px) */
}

.ci-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ci-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ci-text-main);
  margin-bottom: 1rem;
}

/* =========================================
   SEARCH (UH4.1)
   ========================================= */
.ci-search-card { padding-bottom: 1.25rem; }

.ci-search-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.ci-input-sku {
  flex: 1;
  max-width: 360px;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ci-search-hint {
  font-size: 0.8rem;
  color: var(--ci-text-muted);
  margin-top: 0.5rem;
}

.ci-search-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ci-border);
}

.ci-mode-btn {
  background: none;
  border: 1px solid var(--ci-border);
  font-family: var(--ci-font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ci-text-muted);
  padding: 0.45rem 1rem;
  border-radius: var(--ci-radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.ci-mode-btn:hover { background-color: rgba(113,191,69,0.08); color: var(--ci-primary); }
.ci-mode-btn.active { background-color: var(--ci-primary); color: #fff; border-color: var(--ci-primary); }

.ci-substancia-highlight { color: var(--ci-primary-hover); font-weight: 600; }

/* =========================================
   PRODUCT CARD
   ========================================= */
.ci-product-card { border-left: 4px solid var(--ci-primary); }

.ci-product-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.ci-product-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0.35rem 0 0.25rem;
}

.ci-product-desc { font-size: 0.85rem; color: var(--ci-text-muted); }

.ci-sku-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background-color: rgba(113,191,69,0.12);
  color: var(--ci-primary-hover);
  padding: 0.2rem 0.6rem;
  border-radius: var(--ci-radius-sm);
  text-transform: uppercase;
}

/* UH4.7 — Iconos de copiar el SKU y copiar el enlace del producto.
   Van siempre visibles (no solo al pasar el mouse) porque en tablet no hay hover
   y quedarían invisibles justo donde más se usan. white-space:nowrap evita que la
   pareja de iconos se parta del número en la columna estrecha del Catálogo. */
.ci-sku-acciones {
  display: inline-flex;
  align-items: center;
  gap: 0.05rem;
  margin-left: 0.25rem;
  vertical-align: middle;
  white-space: nowrap;
}
.ci-sku-accion {
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.2rem 0.25rem;
  opacity: 0.65;
}
.ci-sku-accion:hover { opacity: 1; }

.ci-unidad-badge {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ci-text-muted);
  background-color: var(--ci-bg-light);
  border: 1px solid var(--ci-border);
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
  white-space: nowrap;
}

/* =========================================
   PRICE COMPARISON (UH4.2)
   ========================================= */
.ci-compare-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ci-compare-header .ci-section-title { margin-bottom: 0; }

.ci-qty-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ci-qty-row .ci-label { margin-bottom: 0; font-size: 0.82rem; }

.ci-input-qty {
  width: 80px;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
}

.ci-compare-note {
  font-size: 0.78rem;
  color: var(--ci-text-muted);
  margin-top: 0.75rem;
  text-align: right;
}

/* =========================================
   TABLES
   ========================================= */
.ci-table-wrap { overflow-x: auto; }

.ci-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.ci-table th {
  background-color: var(--ci-bg-light);
  border-bottom: 2px solid var(--ci-border);
  padding: 0.7rem 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ci-text-muted);
  text-align: left;
  white-space: nowrap;
}

.ci-table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--ci-border);
  color: var(--ci-text-main);
  vertical-align: middle;
}

.ci-table tr:last-child td { border-bottom: none; }
.ci-table tr:hover td { background-color: rgba(113,191,69,0.04); }

/* Best price row */
.ci-best-price td { background-color: rgba(113,191,69,0.06); }
.ci-best-price td:first-child { border-left: 3px solid var(--ci-primary); }
/* El precio de la fila del mejor proveedor va en verde de marca (los demás en gris). */
.ci-best-price .ci-price-unit,
.ci-best-price .ci-price-total { color: var(--ci-primary); }

.ci-best-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  background-color: var(--ci-primary);
  color: var(--ci-white);
  padding: 0.15rem 0.45rem;
  border-radius: 99px;
  margin-left: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ci-price-unit {
  font-weight: 700;
  font-size: 0.95rem;
  color: #545454; /* no-mejor en gris; la fila del mejor precio lo pisa con verde */
}

.ci-price-total {
  font-weight: 700;
  color: #545454;
  font-size: 1rem;
}

/* UH3.10 — El precio comparable, debajo del que manda el proveedor. Va en peso
   ligero a propósito: el número grande sigue siendo el de la factura.
   Los dos colores están MEDIDOS, no elegidos a ojo: a 0.72rem esto es texto
   pequeño y necesita 4.5:1. El gris de marca #7C7C7C se queda en 4.17:1 y no
   alcanza, por eso aquí va uno más oscuro. */
.ci-iva-nota {
  font-weight: 500;
  font-size: 0.72rem;
  color: #6B6B6B; /* 5.33:1 sobre blanco */
  margin-top: 0.15rem;
  white-space: nowrap;
}

.ci-iva-nota.ci-iva-incierto {
  font-style: italic;
  /* 5.62:1 sobre blanco y 5.36:1 sobre el verde al 6% de la fila del mejor
     precio, que es el otro fondo donde puede caer. */
  color: #7a660c;
}

.ci-text-right { text-align: right; }
.ci-text-center { text-align: center; }

.ci-table-empty {
  text-align: center;
  color: var(--ci-text-muted);
  padding: 2rem 1rem;
  font-style: italic;
}

/* =========================================
   BADGES
   ========================================= */
.ci-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Puntito de color (hereda el color del texto del badge), como pm */
.ci-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.ci-badge-green { background-color: #dcfce7; color: #166534; }
.ci-badge-gray  { background-color: #f1f5f9; color: #475569; }
.ci-badge-red   { background-color: #fee2e2; color: #991b1b; }
.ci-badge-amber { background-color: #fef3c7; color: #92400e; }
.ci-badge-blue  { background-color: #dbeafe; color: #1e40af; }

.ci-role-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
}

/* =========================================
   FORMS
   ========================================= */
.ci-form-group { margin-bottom: 1.25rem; }

.ci-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ci-text-main);
  margin-bottom: 0.4rem;
}

.ci-input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1.5px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-sm);
  font-family: var(--ci-font-sans);
  font-size: 0.9rem;
  color: var(--ci-text-main);
  background-color: var(--ci-gray-50); /* fondo gris claro, como pm */
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.ci-input:focus {
  outline: none;
  border-color: var(--ci-primary);
  background-color: var(--ci-white); /* se vuelve blanco al enfocar, como pm */
  box-shadow: 0 0 0 3px var(--ci-primary-light);
}

.ci-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--ci-text-muted);
  margin-top: 0.3rem;
}

/* =========================================
   BUTTONS
   ========================================= */
.ci-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  font-family: var(--ci-font-sans);
  font-size: 0.85rem;
  font-weight: 700; /* peso 700 como pm */
  border-radius: var(--ci-radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

.ci-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }

.ci-btn-primary {
  background-color: var(--ci-primary); /* verde de marca #71bf45 */
  color: var(--ci-white);
  box-shadow: 0 2px 8px rgba(113, 191, 69, 0.25);
}
.ci-btn-primary:hover:not(:disabled) {
  background-color: var(--ci-text-main); /* gris #545454 al pasar el cursor */
  color: var(--ci-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(84, 84, 84, 0.30);
}

.ci-btn-ghost {
  background-color: transparent;
  color: var(--ci-text-muted);
  border: 1px solid var(--ci-border);
}
.ci-btn-ghost:hover:not(:disabled) { background-color: var(--ci-bg-light); color: var(--ci-text-main); }

.ci-btn-danger { background-color: #fef2f2; color: var(--ci-error); border: 1px solid #fee2e2; }
.ci-btn-danger:hover:not(:disabled) { background-color: #fee2e2; }

.ci-btn-sm { padding: 0.42rem 0.85rem; font-size: 0.75rem; }
.ci-btn-block { width: 100%; }

.ci-btn-icon {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: var(--ci-text-muted);
  padding: 0.25rem;
  border-radius: var(--ci-radius-sm);
  transition: all 0.2s;
}
.ci-btn-icon:hover { background-color: var(--ci-bg-light); color: var(--ci-text-main); }

/* Accesibilidad (UH10.4): foco visible al navegar con teclado */
.ci-btn:focus-visible,
.ci-btn-icon:focus-visible,
.ci-nav-group-btn:focus-visible,
.ci-nav-item:focus-visible,
.ci-mode-btn:focus-visible {
  outline: 2px solid var(--ci-primary-btn);
  outline-offset: 2px;
}

/* Áreas táctiles cómodas (~44px) en dispositivos táctiles */
@media (pointer: coarse) {
  .ci-btn, .ci-btn-sm, .ci-btn-icon, .ci-nav-item, .ci-nav-group-btn { min-height: 44px; }
  .ci-btn-icon { min-width: 44px; }
}

/* =========================================
   ALERTS
   ========================================= */
.ci-alert {
  padding: 0.75rem 1rem;
  border-radius: var(--ci-radius-sm);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.ci-alert-danger  { background-color: #fef2f2; border: 1px solid #fee2e2; color: var(--ci-error); }
.ci-alert-success { background-color: #f0fdf4; border: 1px solid #dcfce7; color: #166534; }
.ci-alert-warning { background-color: #fffbeb; border: 1px solid #fde68a; color: #92400e; }

/* =========================================
   MODAL
   ========================================= */
.ci-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.ci-modal {
  background: var(--ci-white);
  border-radius: var(--ci-radius-base);
  box-shadow: var(--ci-shadow-lg);
  width: 100%;
  max-width: 460px;
  /* Todos los modales: altura tope + columna flex, para que el encabezado y el
     pie queden fijos y solo el cuerpo se desplace (uniforme entre chicos y grandes) */
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
}

.ci-modal-lg {
  max-width: 720px;
}

.ci-modal-header {
  flex-shrink: 0; /* encabezado fijo, no se encoge ni se desplaza */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--ci-border);
}

.ci-modal-header h3 { font-size: 1rem; font-weight: 700; }

.ci-modal-body {
  padding: 1.5rem;
  overflow-y: auto; /* solo el cuerpo se desplaza cuando el contenido es alto */
  flex: 1 1 auto;
}

.ci-modal-footer {
  flex-shrink: 0; /* pie fijo, siempre visible */
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--ci-border);
}

/* Pie con varias acciones (p. ej. Orden de Compra): permite que envuelvan */
.ci-modal-footer-wrap { flex-wrap: wrap; gap: 0.5rem; }
.ci-oc-enviado-label { align-self: center; }

/* Empuja un botón al extremo izquierdo del pie (Quitar configuración), dejando
   el resto de acciones agrupadas a la derecha */
.ci-footer-push { margin-right: auto; }

/* Barra de acciones de un formulario en una vista (no modal), p. ej. Configuración
   SMTP: mismas acciones agrupadas a la derecha, igual que el pie de los modales */
.ci-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* =========================================
   FOOTER
   ========================================= */
.ci-footer {
  background-color: var(--ci-white);
  border-top: 1px solid var(--ci-border);
  padding: 1rem 2rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ci-text-muted);
  margin-top: auto;
}

/* =========================================
   UTILITIES
   ========================================= */
.ci-hidden { display: none !important; }

/* Utilidades de texto y layout (UH10.1 — reemplazan estilos inline repetidos) */
.ci-text-sm { font-size: 0.8rem; }
.ci-text-xs { font-size: 0.72rem; }
.ci-muted { color: var(--ci-text-muted); }
.ci-form-narrow { max-width: 480px; }
.ci-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
}

/* Carga y estados vacíos (UH10.3) */
.ci-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--ci-gray-200);
  border-top-color: var(--ci-primary);
  border-radius: 50%;
  animation: ci-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes ci-spin { to { transform: rotate(360deg); } }

.ci-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.75rem 1rem;
  color: var(--ci-text-muted);
  font-size: 0.85rem;
}

.ci-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  color: var(--ci-text-muted);
  text-align: center;
}
.ci-empty-icon { font-size: 1.7rem; opacity: 0.55; line-height: 1; }
.ci-empty-text { font-size: 0.85rem; max-width: 440px; }

/* Filas seleccionables (UH3.1 — preview de Excel) */
.ci-row-selectable { cursor: pointer; }
.ci-row-selectable:hover > td { background-color: rgba(113,191,69,0.08) !important; }
.ci-row-selected > td { background-color: rgba(113,191,69,0.15) !important; }
.ci-row-selected > td:first-child { border-left: 3px solid var(--ci-primary); }
.ci-mt-1 { margin-top: 0.25rem; }
.ci-mt-2 { margin-top: 0.5rem; }

/* UH11.4 / UH11.6 — Búsqueda agrupada por equivalencia (sustancia + concentración + forma, sin contenido).
   Los equivalentes quedan adyacentes bajo un encabezado de grupo (UH11.6); dentro, el más barato primero. */
.ci-eqgroup > td { border-top: 2px solid #CBD5E1; }
.ci-eqheader > td {
  background: var(--ci-primary-light, #eef7e8);
  color: var(--ci-primary);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.4rem 0.75rem;
  border-top: 2px solid #CBD5E1;
  letter-spacing: 0.01em;
}
/* Precio: el mejor del grupo en verde de marca; los demás en gris. */
.ci-desde { font-weight: 700; color: #545454; white-space: nowrap; }
.ci-desde-mejor { color: var(--ci-primary); }
.ci-nprov { display: block; font-size: 0.72rem; color: var(--ci-text-muted); font-weight: 400; }
.ci-sinstock { color: #94A3B8; font-weight: 600; white-space: nowrap; }
.ci-nostock-nota { display: block; font-size: 0.68rem; font-weight: 600; color: #b45309; white-space: nowrap; }
/* UH4.5 — antigüedad del precio. Deliberadamente discreta: acompaña al dato,
   no compite con él. El color se reserva para el precio y la disponibilidad. */
.ci-fecha-rel { white-space: nowrap; color: var(--ci-text-muted); font-size: 0.78rem; }
/* En los resultados de búsqueda cae DEBAJO del precio (mismo recurso que
   .ci-nprov y .ci-nostock-nota), para no ensanchar la tabla. */
.ci-desde-fecha { display: block; font-size: 0.68rem; font-weight: 400; }
.ci-mejor {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ci-primary);
  background: var(--ci-primary-light, #eef7e8);
  border-radius: 6px;
  padding: 0.05rem 0.35rem;
  vertical-align: middle;
}
.ci-pendiente-chip {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #92610a;
  background: #fff4d6;
  border: 1px solid #ffe4a1;
  border-radius: 6px;
  padding: 0.05rem 0.4rem;
  white-space: nowrap;
}

/* Búsqueda por sustancia (UH11.6): encabezados centrados y CONGELADOS al hacer
   scroll vertical dentro de la tabla (mismo enfoque que Comparación Masiva). */
#sustanciaResultsWrap { max-height: 65vh; overflow: auto; }
#sustanciaResults .ci-table thead th {
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Tarjeta del producto (búsqueda por SKU): una sola fila de campos, encabezado
   (etiqueta) arriba y valor abajo — SKU · Nombre · Sustancia · Concentración ·
   Forma · Contenido · Marca. Se envuelve en pantallas angostas. */
.ci-product-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
  align-items: flex-start;
}
.ci-pf { min-width: 0; text-align: center; } /* encabezado y valor centrados en cada campo */
.ci-pf-lbl {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ci-text-muted);
  margin-bottom: 0.2rem;
  white-space: nowrap;
}
.ci-pf-val { font-size: 0.95rem; font-weight: 600; color: var(--ci-text-main); }
/* Encabezados centrados en todos los campos; el CONTENIDO se centra de Sustancia en
   adelante. SKU y Nombre mantienen su valor alineado a la izquierda. */
.ci-pf-sku .ci-pf-val { text-align: left; }
/* El nombre se muestra en una sola fila (la columna se ensancha lo necesario). */
.ci-pf-nombre .ci-pf-val { font-weight: 700; text-align: left; white-space: nowrap; }

/* Comparación de precios por proveedor (búsqueda por SKU): todo centrado —
   encabezados y celdas— salvo la primera columna (Proveedor), que queda a la izquierda. */
#priceTable th, #priceTable td { text-align: center; }
#priceTable th:first-child, #priceTable td:first-child { text-align: left; }

/* =========================================
   BULK COMPARE (UH4.3)
   ========================================= */

.ci-bulk-stats-card { margin-bottom: 1rem; }

.ci-bulk-stats-row {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: center;
}

.ci-bulk-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}

.ci-bulk-stat-num {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.ci-bulk-stat-label {
  font-size: 0.78rem;
  color: var(--ci-text-muted);
  margin-top: 0.2rem;
  text-align: center;
}

.ci-bulk-table {
  min-width: 600px;
  font-size: 0.84rem;
  /* separate (no collapse) para que las celdas fijas tapen de verdad a las que
     se desplazan: con border-collapse:collapse el fondo/z-index no pinta bien */
  border-collapse: separate;
  border-spacing: 0;
}

/* Comparación masiva: congelar encabezado y primeras columnas (Código, Nombre, Cant.) */
.ci-bulk-scroll {
  overflow: auto;
  max-height: 75vh;
}

/* Centrar TODO el contenido (encabezados y celdas) */
.ci-bulk-table th, .ci-bulk-table td { text-align: center; }

/* Encabezado fijo arriba al hacer scroll vertical */
.ci-bulk-table thead th {
  position: sticky;
  top: 0;
  z-index: 21;
}

/* Las 3 primeras columnas se quedan fijas a la izquierda (ancho fijo para que calce) */
.ci-bulk-table th:nth-child(1), .ci-bulk-table td:nth-child(1),
.ci-bulk-table th:nth-child(2), .ci-bulk-table td:nth-child(2),
.ci-bulk-table th:nth-child(3), .ci-bulk-table td:nth-child(3) {
  position: sticky;
  background: var(--ci-white);
}
.ci-bulk-table th:nth-child(1), .ci-bulk-table td:nth-child(1) { left: 0;     min-width: 120px; max-width: 120px; }
.ci-bulk-table th:nth-child(2), .ci-bulk-table td:nth-child(2) { left: 120px; min-width: 200px; max-width: 200px; white-space: normal; }
.ci-bulk-table th:nth-child(3), .ci-bulk-table td:nth-child(3) { left: 320px; min-width: 65px;  max-width: 65px;  border-right: 2px solid var(--ci-gray-200); }

/* Todas las celdas que se desplazan quedan posicionadas con z-index bajo, para que
   el pintado respete el z-index y NO se cuele su texto sobre las columnas fijas
   (bug de Chrome con celdas sticky en tablas). */
.ci-bulk-table tbody td,
.ci-bulk-table tfoot td { position: relative; z-index: 0; }

/* Celdas fijas del cuerpo/pie, por encima de las columnas que se desplazan */
.ci-bulk-table tbody td:nth-child(-n+3),
.ci-bulk-table tfoot td:nth-child(-n+3) { z-index: 20; }

/* Esquina: las 3 cabeceras fijas quedan fijas en ambos ejes y por encima de todo */
.ci-bulk-table thead th:nth-child(-n+3) { z-index: 22; background: var(--ci-bg-light); }

/* En hover, las celdas fijas deben seguir OPACAS (si no, el hover semitransparente
   las vuelve translúcidas y se ve el texto de las columnas de atrás). */
.ci-bulk-table tbody tr:hover td:nth-child(-n+3) { background-color: #f1f8ec; }

.ci-bulk-best-cell {
  background-color: rgba(113, 191, 69, 0.07);
}
/* Precios de la comparación masiva: el mejor por fila en verde de marca; los demás
   en gris (el orden importa: la regla del mejor va después para ganar por especificidad igual). */
.ci-bulk-table tbody td.ci-text-right { color: #545454; }
.ci-bulk-table tbody td.ci-bulk-best-cell { color: var(--ci-primary); }

.ci-bulk-best-col {
  background-color: var(--ci-bg-light);
}

.ci-bulk-row-notfound td {
  color: var(--ci-text-muted); /* atenuado sin opacity (la opacity transparentaba las columnas fijas) */
}

.ci-bulk-footer-row td {
  border-top: 2px solid var(--ci-border);
  background-color: var(--ci-bg-light);
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.ci-bulk-actions {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0 0.5rem;
  flex-wrap: wrap;
}

/* =========================================
   ESTADO DE CUENTA (UH7.1)
   ========================================= */

.ci-account-filters {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.ci-account-filters .ci-form-group {
  margin-bottom: 0;
  flex: 1;
  min-width: 160px;
}

.ci-account-filters-buttons {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.ci-account-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

.ci-account-summary-card {
  padding: 1rem;
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius-sm);
  background: var(--ci-bg-light);
}

.ci-account-summary-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ci-text-muted);
  margin-bottom: 0.35rem;
}

.ci-account-summary-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ci-text-main);
}

/* =========================================
   PRODUCTOS PENDIENTES (UH11.5)
   ========================================= */

.ci-pend-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.ci-pend-search { flex: 1 1 260px; margin: 0; }

.ci-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: var(--ci-text-main);
  white-space: nowrap;
  cursor: pointer;
}
.ci-check-inline input { width: 1.05rem; height: 1.05rem; cursor: pointer; }

.ci-pend-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.1rem;
}
.ci-pend-pager-info { font-size: 0.83rem; color: var(--ci-text-muted); }

.ci-pend-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}
@media (max-width: 480px) {
  .ci-pend-modal-grid { grid-template-columns: 1fr; }
}

/* Tabla del Catálogo de Productos (UH11.7): celdas algo más compactas para que
   quepan las acciones sin desbordar; los botones se envuelven si el ancho aprieta. */
#catalogoView .ci-table th,
#catalogoView .ci-table td { padding: 0.65rem 0.7rem; }
.ci-pend-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}
/* SKU repetido bajo el nombre: solo se usa en móvil (ver media query). */
.ci-cat-sku-movil { display: none; }

/* Encabezados ordenables del Catálogo (UH11.7b): clic para ordenar por esa columna. */
.ci-th-sortable { cursor: pointer; user-select: none; }
.ci-th-sortable:hover { color: var(--ci-primary); }
.ci-th-arrow { margin-left: 0.3rem; font-size: 0.7rem; }

/* =========================================
   CARRITO (UH5.1)
   ========================================= */

.ci-cart-group { margin-bottom: 1.25rem; }

.ci-cart-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ci-cart-select {
  font-size: 0.8rem;
  padding: 0.4rem 0.6rem;
}

/* =========================================
   ORDEN DE COMPRA (UH6.1)
   ========================================= */

.ci-oc-doc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--ci-primary);
  margin-bottom: 1.25rem;
}

.ci-oc-section {
  margin-bottom: 1.25rem;
  padding: 0.9rem 1rem;
  background: var(--ci-bg-light);
  border-radius: var(--ci-radius-sm);
  border: 1px solid var(--ci-border);
  font-size: 0.87rem;
  line-height: 1.6;
}

.ci-oc-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ci-text-muted);
  margin-bottom: 0.35rem;
}

.ci-oc-doc-footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ci-border);
  font-size: 0.83rem;
  color: var(--ci-text-muted);
}

/* Modal más ancho que el resto de los ci-modal-lg (solo este), para que la
   columna Producto no salte tanto de línea con nombres largos */
#ocModal .ci-modal-lg { max-width: 900px; }

/* Modal de comparación de precios (Productos encontrados): mismo ajuste que el de
   OC, para que la tabla de proveedores no necesite scroll horizontal */
#comparacionModal .ci-modal-lg { max-width: 900px; }

/* El encabezado ahora muestra los 7 campos del producto (SKU/Nombre/Sustancia/...) y
   puede envolver a 2 líneas; el botón de cerrar se ancla arriba, no al centro. */
#comparacionModal .ci-modal-header { align-items: flex-start; }
#comparacionModal .ci-modal-header .ci-btn-icon { flex-shrink: 0; }

#ocModalBody .ci-table th:nth-child(1),
#ocModalBody .ci-table td:nth-child(1) { width: 110px; }
#ocModalBody .ci-table th:nth-child(3),
#ocModalBody .ci-table td:nth-child(3) { width: 70px; }
#ocModalBody .ci-table th:nth-child(4),
#ocModalBody .ci-table td:nth-child(4) { width: 120px; white-space: nowrap; }
#ocModalBody .ci-table th:nth-child(5),
#ocModalBody .ci-table td:nth-child(5) { width: 120px; white-space: nowrap; }

.ci-cart-oc-bar {
  display: flex;
  justify-content: flex-end;
  padding-top: 1rem;
}

/* =========================================
   RESPONSIVO (UH10.2) — breakpoints 768 / 480, alineados con pedido-mostrador
   ========================================= */

/* ── Navegación: el ☰ aparece cuando la barra de píldoras ya no cabe (≤ 1200px) ── */
@media (max-width: 1200px) {
  .ci-nav-toggle { display: inline-flex; margin-left: auto; }

  /* Resultados de búsqueda: con 8 columnas (Laboratorio incluida) la tabla no cabe
     en tablet y el precio —la columna "Desde"— quedaba fuera de la pantalla. Se
     compactan las celdas solo aquí, con el mismo relleno que ya usa el Catálogo.
     En escritorio la tabla conserva su holgura. */
  #sustanciaResults .ci-table th,
  #sustanciaResults .ci-table td { padding: 0.65rem 0.7rem; }

  /* Las pestañas se despliegan como tarjeta blanca debajo del encabezado */
  #appNav.ci-tabs-bar {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    background: var(--ci-white);
    border: 1px solid var(--ci-gray-200);
    border-radius: var(--ci-radius-base);
    box-shadow: var(--ci-shadow-sm);
    padding: 0.5rem;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
  #appNav.ci-tabs-bar.ci-nav-mobile-open { display: flex; }

  /* El contenedor segmentado se vuelve lista vertical (sin fondo de píldora) */
  .ci-tabs {
    flex-direction: column;
    background: none;
    padding: 0;
    width: auto;
    gap: 0.15rem;
  }

  /* Cada grupo ocupa el ancho; el submenú se expande en acordeón (reutiliza ci-nav-open) */
  .ci-nav-group { position: static; width: 100%; }
  .ci-nav-group-btn { width: 100%; justify-content: space-between; }
  .ci-nav-menu {
    position: static;
    min-width: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0.1rem 0 0.35rem 0.5rem;
  }

  /* El usuario y "Cerrar sesión" se mueven dentro del menú ☰ */
  #headerUser { display: none; }
  .ci-nav-user {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--ci-gray-200);
  }
}

/* El reloj se oculta cuando el header se aprieta (≤ 980px) */
@media (max-width: 980px) {
  .ci-clock { display: none; }
}

/* ── Tablet y móvil (≤ 768px) ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .ci-main { padding: 18px 14px; gap: 1rem; }

  .ci-header { padding: 0.6rem 1rem; gap: 0.6rem; }

  /* Modales a pantalla completa */
  .ci-modal-overlay { padding: 0; }
  .ci-modal,
  .ci-modal-lg {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  /* Tablas: ocultar columnas secundarias en tablet (Bloque B) */
  .ci-tabla-comparacion th:nth-child(2),
  .ci-tabla-comparacion td:nth-child(2) { display: none; } /* Precio unitario */

  #suppliersView .ci-table th:nth-child(2), #suppliersView .ci-table td:nth-child(2),
  #suppliersView .ci-table th:nth-child(3), #suppliersView .ci-table td:nth-child(3),
  #suppliersView .ci-table th:nth-child(4), #suppliersView .ci-table td:nth-child(4),
  #suppliersView .ci-table th:nth-child(5), #suppliersView .ci-table td:nth-child(5) { display: none; } /* Código, Contacto, Email, Teléfono */

  #ordersView .ci-table th:nth-child(3),
  #ordersView .ci-table td:nth-child(3) { display: none; } /* Fecha */

  #historialView .ci-table th:nth-child(2),
  #historialView .ci-table td:nth-child(2) { display: none; } /* Método */

  /* Búsqueda por sustancia (UH11.4): ocultar Sustancia y Forma en tablet */
  #sustanciaResults .ci-table th:nth-child(2), #sustanciaResults .ci-table td:nth-child(2),
  #sustanciaResults .ci-table th:nth-child(4), #sustanciaResults .ci-table td:nth-child(4) { display: none; }

  /* Catálogo de Productos (UH11.7): ocultar Sustancia, Marca y Laboratorio en tablet */
  #catalogoView .ci-table th:nth-child(3), #catalogoView .ci-table td:nth-child(3),
  #catalogoView .ci-table th:nth-child(4), #catalogoView .ci-table td:nth-child(4),
  #catalogoView .ci-table th:nth-child(5), #catalogoView .ci-table td:nth-child(5) { display: none; }
}

/* ── Móvil (≤ 480px) ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ci-main { padding: 14px 10px; }
  .ci-card { padding: 1rem; }
  .ci-header { padding: 0.55rem 0.8rem; gap: 0.5rem; }
  .ci-brand-logo { height: 26px; }

  /* Tablas: ocultar columnas adicionales en móvil (Bloque B) */
  .ci-tabla-comparacion th:nth-child(4),
  .ci-tabla-comparacion td:nth-child(4) { display: none; } /* Disponibilidad */

  #suppliersView .ci-table th:nth-child(6), #suppliersView .ci-table td:nth-child(6),
  #suppliersView .ci-table th:nth-child(7), #suppliersView .ci-table td:nth-child(7) { display: none; } /* Conexión, Frecuencia */

  #ordersView .ci-table th:nth-child(2),
  #ordersView .ci-table td:nth-child(2) { display: none; } /* Proveedor */

  #accountView .ci-table th:nth-child(2),
  #accountView .ci-table td:nth-child(2) { display: none; } /* Fecha */

  #usersView .ci-table th:nth-child(2),
  #usersView .ci-table td:nth-child(2) { display: none; } /* Usuario */

  #historialView .ci-table th:nth-child(4),
  #historialView .ci-table td:nth-child(4) { display: none; } /* Detalle */

  /* Búsqueda por sustancia (UH11.4): en móvil ocultar además Concentración y Contenido
     para que NO se corte "Desde" (el precio). Queda: Producto, Marca, Desde. */
  #sustanciaResults .ci-table th:nth-child(3), #sustanciaResults .ci-table td:nth-child(3),
  #sustanciaResults .ci-table th:nth-child(5), #sustanciaResults .ci-table td:nth-child(5) { display: none; }

  /* Catálogo de Productos (UH11.7): en móvil solo quedan Nombre, Estado, Precio y
     Acciones. La columna SKU se oculta y se muestra como línea secundaria bajo el
     nombre (así Editar/Eliminar no se cortan). Sustancia/Marca/Laboratorio ya están
     ocultas (tablet + estas); Prov. también se oculta para dejar espacio. */
  #catalogoView .ci-table th:nth-child(1), #catalogoView .ci-table td:nth-child(1),
  #catalogoView .ci-table th:nth-child(7), #catalogoView .ci-table td:nth-child(7) { display: none; }
  #catalogoView .ci-table { font-size: 0.82rem; }
  #catalogoView .ci-table th, #catalogoView .ci-table td { padding: 0.55rem 0.5rem; }
  .ci-cat-sku-movil {
    display: block;
    font-size: 0.72rem;
    color: var(--ci-text-muted);
    margin-top: 0.15rem;
  }

  /* Estado de Cuenta: los botones de filtro pasan a fila completa y se reparten
     el ancho para evitar el overflow horizontal en pantallas estrechas.
     El selector incluye .ci-account-filters para ganar a la regla .ci-form-group
     (misma especificidad, gana por orden) y se anula el min-width heredado. */
  .ci-account-filters .ci-account-filters-buttons { flex: 1 1 100%; min-width: 0; }
  .ci-account-filters-buttons .ci-btn { flex: 1; }
}

/* =========================================
   UH3.7 — REPORTE DE "PROBAR IMPORTACION"
   ========================================= */
/* Los modales de configuracion crecen a 900px: con el boton nuevo en el pie y el
   reporte dentro, 720px quedaba apretado (decision de Gerardo, 2026-08-08). */
#apiConfigModal .ci-modal-lg,
#ftpConfigModal .ci-modal-lg { max-width: 980px; }

/* Con "Probar importación" son CINCO botones en el pie y se partían en dos filas
   (reportado por Gerardo el 2026-08-09). Se ensancha el modal y se compactan los
   botones lo justo para que quepan en una sola línea, sin recortar los textos:
   una etiqueta como "Probar importación" tiene que leerse completa. */
#apiConfigModal .ci-modal-footer,
#ftpConfigModal .ci-modal-footer { gap: 0.5rem; padding: 1rem 1.25rem; flex-wrap: nowrap; }
#apiConfigModal .ci-modal-footer .ci-btn,
#ftpConfigModal .ci-modal-footer .ci-btn {
  padding: 0.55rem 0.9rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* En pantallas donde de verdad no caben, vuelven a envolverse en vez de
   desbordar el modal. */
@media (max-width: 1020px) {
  #apiConfigModal .ci-modal-footer,
  #ftpConfigModal .ci-modal-footer { flex-wrap: wrap; }
}

.ci-reporte-sim h4 { font-size: 0.95rem; margin-bottom: 0.6rem; }

/* Tarjetas de cifras: el "que paso" de un vistazo antes de leer el detalle. */
.ci-sim-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.ci-sim-cifra {
  background: var(--ci-bg-light);
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius-sm);
  padding: 0.6rem 0.75rem;
}
.ci-sim-cifra-lbl {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ci-text-muted);
  font-weight: 700;
}
.ci-sim-cifra-val { font-size: 1.15rem; font-weight: 700; color: var(--ci-text-main); }
.ci-sim-cifra-val.ci-sim-ojo { color: var(--ci-error); }

/* Avisos. El rojo se reserva para lo que de verdad amerita detenerse. */
.ci-sim-alerta {
  border-radius: var(--ci-radius-sm);
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  border: 1px solid;
}
.ci-sim-alerta-alta  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.ci-sim-alerta-media { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.ci-sim-alerta-info  { background: #f8fafc; border-color: var(--ci-border); color: var(--ci-text-muted); }
.ci-sim-alerta-ok    { background: var(--ci-primary-light); border-color: var(--ci-primary); color: var(--ci-primary-hover); }

.ci-sim-tabla { font-size: 0.78rem; }
.ci-sim-tabla td.ci-sim-sube { color: var(--ci-error); font-weight: 600; }
.ci-sim-tabla td.ci-sim-baja { color: var(--ci-primary-hover); font-weight: 600; }