/* Static Map Styles for Visit Location */
.visit-location-map img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.visit-location-info {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.visit-location-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.visit-location-links .button {
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 4px;
  font-size: 12px;
  display: inline-block;
  color: white;
}

/* Custom styles for Active Admin forms */

/* Make select2 dropdowns wider in master forms */
.edit_master .select2-container,
.new_master .select2-container {
  min-width: 400px !important;
  width: 100% !important;
  max-width: 600px !important;
}

/* Style for select2 selection box */
.edit_master .select2-selection,
.new_master .select2-selection {
  min-height: 38px !important;
  padding: 4px !important;
}

/* Make the dropdown results wider only in master forms */
.edit_master .select2-dropdown,
.new_master .select2-dropdown {
  min-width: 400px !important;
}

/* General form input improvements for masters */
.edit_master input[type="text"],
.edit_master input[type="number"],
.edit_master select,
.new_master input[type="text"],
.new_master input[type="number"],
.new_master select {
  min-width: 400px;
  width: 100%;
  max-width: 600px;
}

/* Specific styles for category selects */
#master_seccion_input .select2-container,
#master_categoria_input .select2-container,
#master_subcategoria_input .select2-container,
#master_clase_input .select2-container,
#master_sector_input .select2-container,
#master_nivel1_input .select2-container,
#master_nivel2_input .select2-container,
#master_nivel3_input .select2-container {
  width: 100% !important;
  max-width: 600px !important;
}

/* Make form labels more visible */
.edit_master label,
.new_master label {
  font-weight: 600;
  color: #333;
  min-width: 150px;
  display: inline-block;
}

/* Improve form fieldset spacing */
.edit_master fieldset,
.new_master fieldset {
  margin-bottom: 2rem;
}

/* Make the form inputs container wider */
.edit_master .inputs,
.new_master .inputs {
  max-width: 900px;
}

/* Style for form list items */
.edit_master fieldset > ol > li,
.new_master fieldset > ol > li {
  margin-bottom: 1.5rem;
}

/* Improve select2 search box */
.select2-search__field {
  width: 100% !important;
  padding: 6px !important;
}

/* Better hover state for select2 options */
.select2-results__option--highlighted {
  background-color: #3b82f6 !important;
}

/* Style for disabled select2 */
.select2-container--disabled .select2-selection {
  background-color: #f3f4f6;
  cursor: not-allowed;
}

/* Ensure category hierarchy is visible */
.select2-results__option {
  padding: 8px 12px !important;
  font-size: 14px !important;
}

/* Add some spacing between form sections */
#master_seccion_input,
#master_categoria_input,
#master_subcategoria_input,
#master_clase_input,
#master_sector_input,
#master_nivel1_input,
#master_nivel2_input,
#master_nivel3_input {
  margin-bottom: 1.2rem;
}

/* Styles for Master Show Page */
.master-info-panel .panel_contents {
  padding: 20px;
}

.category-hierarchy {
  display: flex;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
}

.category-icon {
  margin-right: 10px;
  font-size: 18px;
}

.categorization-panel {
  background: #f0f8ff;
}

.categorization-panel h3 {
  background: #4a90e2;
  color: white;
  padding: 10px 15px;
  margin: 0;
  font-size: 14px;
}

.custom-categorization-panel {
  background: #f5f5ff;
}

.custom-categorization-panel h3 {
  background: #7c3aed;
  color: white;
  padding: 10px 15px;
  margin: 0;
  font-size: 14px;
}

.butcher-info-panel {
  background: #fff5f5;
}

.butcher-info-panel h3 {
  background: #dc2626;
  color: white;
  padding: 10px 15px;
  margin: 0;
  font-size: 14px;
}

.additional-info-panel {
  background: #f9fafb;
}

.additional-info-panel h3 {
  background: #6b7280;
  color: white;
  padding: 10px 15px;
  margin: 0;
  font-size: 14px;
}

.image-panel h3 {
  background: #10b981;
  color: white;
  padding: 10px 15px;
  margin: 0;
  font-size: 14px;
}

.quick-actions-panel h3 {
  background: #f59e0b;
  color: white;
  padding: 10px 15px;
  margin: 0;
  font-size: 14px;
}

/* Searchable account locals picker (reusable) */
.account-locals-picker {
  max-width: 900px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.account-locals-picker__section {
  margin-top: 14px;
}

.account-locals-picker__section.is-hidden {
  display: none;
}

.account-locals-picker__section-title {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}

.account-locals-picker__input {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-sizing: border-box;
}

.account-locals-picker__meta {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

.account-locals-picker__selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 20px;
  max-height: 160px;
  overflow-y: auto;
}

.account-locals-picker__selected-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid #d7e3ff;
  border-radius: 999px;
  background: #f4f8ff;
  color: #1e293b;
  font-size: 12px;
}

.account-locals-picker__selected-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-locals-picker__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 11px;
  border: none;
  border-radius: 999px;
  background: #315efb;
  padding: 0;
  margin: 0;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.account-locals-picker__results {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
}

.account-locals-picker__results.is-empty {
  display: none;
}

.account-locals-picker__result {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid #edf2f7;
  background: #fff;
  color: #0f172a !important;
  opacity: 1;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.account-locals-picker__result:hover {
  background: #eff6ff;
  color: #0f172a !important;
}

.account-locals-picker__result:focus {
  outline: none;
  background: #dbeafe;
  color: #0f172a !important;
}

.account-locals-picker__empty {
  padding: 12px;
  color: #6b7280;
}

.dark .account-locals-picker {
  background: #0f172a;
  border-color: #334155;
  box-shadow: none;
}

.dark .account-locals-picker__section-title {
  color: #94a3b8;
}

.dark .account-locals-picker__input {
  background: #111827;
  border-color: #475569;
  color: #e5e7eb;
}

.dark .account-locals-picker__input::placeholder {
  color: #94a3b8;
}

.dark .account-locals-picker__meta {
  color: #94a3b8;
}

.dark .account-locals-picker__selected-item {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

.dark .account-locals-picker__remove {
  background: #3b82f6;
  color: #eff6ff;
}

.dark .account-locals-picker__results {
  background: #111827;
  border-color: #334155;
}

.dark .account-locals-picker__result {
  background: #111827;
  border-bottom-color: #1f2937;
  color: #e5e7eb !important;
}

.dark .account-locals-picker__result:hover {
  background: #1e293b;
  color: #f8fafc !important;
}

.dark .account-locals-picker__result:focus {
  background: #1d4ed8;
  color: #eff6ff !important;
}

.dark .account-locals-picker__empty {
  color: #94a3b8;
}

/* ── User Index: assignment pills ───────────────────────────────── */

.assignment-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  margin: 2px 0;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  font-size: 12px;
  line-height: 1.4;
  max-width: 280px;
  flex-wrap: wrap;
}

.assignment-pill a {
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.assignment-pill a:hover {
  text-decoration: underline;
}

.assignment-pill-position {
  color: #475569;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}

.assignment-pill-position::before {
  content: '\00b7';
  margin-right: 4px;
  color: #cbd5e1;
  font-weight: 700;
}

.assignment-pill-position--empty {
  color: #9ca3af;
  font-style: italic;
}

.dark .assignment-pill {
  background: #1e293b;
  border-color: #334155;
}

.dark .assignment-pill a {
  color: #60a5fa;
}

.dark .assignment-pill-position {
  color: #94a3b8;
}

.dark .assignment-pill-position::before {
  color: #475569;
}

.dark .assignment-pill-position--empty {
  color: #6b7280;
}

.locals-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 2px 8px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
}

.dark .locals-count-pill {
  background: #1e293b;
  color: #60a5fa;
}

/* ── User Hub: assignments table ───────────────────────────────── */

.dark #assignments-hub {
  color: #e5e7eb;
}

.dark .assignments-hub-table th {
  color: #94a3b8;
  border-bottom-color: #374151;
}

.dark .assignments-hub-table td {
  border-bottom-color: #1f2937;
  color: #d1d5db;
}

.dark .assignments-hub-table .locals-count {
  background: #1e293b;
  color: #60a5fa;
}

.dark .edit-locals-btn {
  border-color: #4b5563 !important;
  color: #d1d5db !important;
}

.dark .remove-assignment-btn {
  border-color: #7f1d1d !important;
  color: #f87171 !important;
}

.dark #assignments-empty {
  color: #6b7280 !important;
}

/* ── User Wizard ───────────────────────────────────────────────── */

#user-wizard {
  max-width: 700px;
  margin: 0 auto;
  padding: 30px 20px;
}

.wizard-header {
  margin-bottom: 28px;
}

.wizard-steps-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 8px;
}

.wizard-step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 100px;
}

.wizard-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  border: 2px solid #d1d5db;
  color: #9ca3af;
  background: #fff;
  transition: all 0.2s;
}

.wizard-step-dot.active .wizard-step-number {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

.wizard-step-dot.completed .wizard-step-number {
  border-color: #22c55e;
  background: #22c55e;
  color: #fff;
}

.wizard-step-label {
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
  text-align: center;
}

.wizard-step-dot.active .wizard-step-label {
  color: #2563eb;
  font-weight: 600;
}

.wizard-step-dot.completed .wizard-step-label {
  color: #22c55e;
}

.wizard-step-line {
  flex: 1;
  height: 2px;
  background: #d1d5db;
  margin: 0 8px;
  margin-bottom: 22px;
}

.wizard-field {
  margin-bottom: 16px;
}

.wizard-field label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 13px;
  color: #374151;
}

.wizard-field label abbr {
  color: #dc2626;
  text-decoration: none;
}

.wizard-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
  background: #fff;
  color: #1f2937;
}

.wizard-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.wizard-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.wizard-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.wizard-nav-btn--primary {
  background: #2563eb;
  color: #fff;
  border: 1px solid #2563eb;
}

.wizard-nav-btn--primary:hover {
  background: #1d4ed8;
}

.wizard-nav-btn--secondary {
  background: #f8f9fa;
  color: #374151;
  border: 1px solid #d1d5db;
}

.wizard-nav-btn--secondary:hover {
  background: #f3f4f6;
}

/* Wizard dark mode */
.dark #user-wizard {
  color: #e5e7eb;
}

.dark .wizard-step-number {
  border-color: #4b5563;
  color: #6b7280;
  background: #1f2937;
}

.dark .wizard-step-dot.active .wizard-step-number {
  border-color: #3b82f6;
  background: #3b82f6;
  color: #fff;
}

.dark .wizard-step-dot.completed .wizard-step-number {
  border-color: #22c55e;
  background: #22c55e;
}

.dark .wizard-step-line {
  background: #4b5563;
}

.dark .wizard-field label {
  color: #d1d5db;
}

.dark .wizard-input {
  background: #1f2937;
  border-color: #4b5563;
  color: #e5e7eb;
}

.dark .wizard-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.dark .wizard-nav {
  border-top-color: #374151;
}

.dark .wizard-nav-btn--secondary {
  background: #374151;
  color: #d1d5db;
  border-color: #4b5563;
}

.dark .wizard-nav-btn--secondary:hover {
  background: #4b5563;
}

.dark form.user_assignment select,
.dark .user_assignments form select,
.dark #main_content form select {
  background-color: #111827;
  border-color: #475569;
  color: #e5e7eb;
}

.dark form.user_assignment select option,
.dark .user_assignments form select option,
.dark #main_content form select option {
  background-color: #111827;
  color: #e5e7eb;
}

.special-status-panel h3 {
  background: #ffc107;
  color: #856404;
  padding: 10px 15px;
  margin: 0;
  font-size: 14px;
}

/* Improve attribute tables in show view */
.attributes_table th {
  width: 150px;
  font-weight: 600;
  color: #4b5563;
  background: #f9fafb;
  padding: 10px 15px;
}

.attributes_table td {
  padding: 10px 15px;
}

/* Style for product image container */
.product-image-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2px;
  border-radius: 10px;
}

.product-image-container > a {
  display: inline-block;
  background: white;
  padding: 20px;
  border-radius: 8px;
}

/* Hover effects for panels */
.panel:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

/* Button styles in show view */
.quick-actions-panel .button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 6px;
  transition: transform 0.2s ease;
}

.quick-actions-panel .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Status tags improvements - class-based (used by status_tag class: option) */
.status_tag.yes, .status-tag.yes {
  background: #10b981 !important;
  color: white !important;
}

.status_tag.no, .status-tag.no {
  background: #ef4444 !important;
  color: white !important;
}

.status_tag.warning, .status-tag.warning {
  background: #f59e0b !important;
  color: white !important;
}

.status_tag.primary, .status-tag.primary,
.status_tag.blue, .status-tag.blue {
  background: #3b82f6 !important;
  color: white !important;
}

.status_tag.orange, .status-tag.orange {
  background: #f97316 !important;
  color: white !important;
}

/* Status tags - data-status based (ActiveAdmin v4 uses data-status attribute) */
.status-tag[data-status="published"],
.status-tag[data-status="closed"] {
  background: #10b981 !important;
  color: white !important;
}

.status-tag[data-status="performed"] {
  background: #f97316 !important;
  color: white !important;
}

.status-tag[data-status="progress"] {
  background: #f59e0b !important;
  color: white !important;
}

.status-tag[data-status="planned"] {
  background: #3b82f6 !important;
  color: white !important;
}

.status-tag[data-status="not_published"] {
  background: #f59e0b !important;
  color: white !important;
}

.status-tag[data-status="rejected"] {
  background: #ef4444 !important;
  color: white !important;
}

.status-tag[data-status="activo"] {
  background: #10b981 !important;
  color: white !important;
}

.status-tag[data-status="inactivo"] {
  background: #ef4444 !important;
  color: white !important;
}

.status-tag[data-status="nuevo"] {
  background: #f59e0b !important;
  color: white !important;
}

/* Responsive columns for show view */
@media (max-width: 768px) {
  .columns {
    display: block !important;
  }

  .column {
    width: 100% !important;
    margin-bottom: 20px;
  }

  /* Ocultar la columna ID en mobile en cualquier index AA (el ID, si
     interesa, debería mostrarse como tag dentro del row). AA v4 marca la
     celda con data-column="id". Mantenemos selectable_column para batch. */
  th[data-column="id"],
  td[data-column="id"] {
    display: none !important;
  }
}

/* Estilos compartidos: span "sin tipo" del index de planogram_modules. */
.pm-tipo-text.empty {
  color: #9ca3af;
  font-style: italic;
}
.dark .pm-tipo-text.empty {
  color: #6b7280;
}

/* Select con chevron custom via SVG (color-scheme dark no es confiable
   en algunos browsers headless / sin tema OS). */
#tipoMuebleModal #tipoMuebleSelect {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23475569' d='M2 4l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px !important;
}
.dark #tipoMuebleModal #tipoMuebleSelect {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23cbd5e1' d='M2 4l4 4 4-4'/></svg>") !important;
}

/* Dark mode overrides para los modales construidos con estilos inline
   (visits_observation.js, planogram_module_tipo_inline.js). Necesitamos
   !important para sobreescribir cuando .dark está en <html>. */
.dark #observationModal > div,
.dark #tipoMuebleModal > div {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}
.dark #observationModal > div > div:first-child,
.dark #observationModal > div > div:last-child,
.dark #tipoMuebleModal > div > div:first-child,
.dark #tipoMuebleModal > div > div:last-child {
  border-color: #374151 !important;
}
.dark #observationModal h3,
.dark #observationModal label,
.dark #tipoMuebleModal h3,
.dark #tipoMuebleModal label {
  color: #f1f5f9 !important;
}
.dark #observationModal #closeObservationModal,
.dark #tipoMuebleModal #closeTipoMuebleModal {
  color: #94a3b8 !important;
}
.dark #observationModal #observationText,
.dark #tipoMuebleModal #tipoMuebleSelect {
  background-color: #111827 !important;
  border-color: #374151 !important;
  color: #f1f5f9 !important;
  color-scheme: dark !important;
}
.dark #observationModal #observationText::placeholder {
  color: #64748b !important;
}
.dark #observationModal #cancelObservation,
.dark #tipoMuebleModal #cancelTipoMueble {
  background: #374151 !important;
  border-color: #4b5563 !important;
  color: #f1f5f9 !important;
}

/* MagnificPopup custom styles */
.mfp-bg {
  background: rgba(0, 0, 0, 0.9) !important;
}

.mfp-figure {
  background: transparent !important;
}

.mfp-container {
  padding: 40px;
}

.mfp-image-holder .mfp-close {
  color: white !important;
  font-size: 36px !important;
  opacity: 0.8;
  right: 20px;
  top: 20px;
}

.mfp-image-holder .mfp-close:hover {
  opacity: 1;
}

.mfp-title {
  color: white !important;
  font-size: 16px !important;
  padding: 8px 24px !important;
  background: rgba(0, 0, 0, 0.7);
  margin-top: 10px;
  border-radius: 4px;
}

.mfp-img {
  max-height: 90vh !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

/* Ensure image popup links work in show view */
.product-image-container a.image-popup {
  cursor: zoom-in;
  position: relative;
  display: block;
}

.product-image-container a.image-popup:hover img {
  opacity: 0.95;
  transform: scale(1.02);
  transition: all 0.3s ease;
}

/* Add zoom icon on hover */
.product-image-container a.image-popup::after {
  content: "🔍";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.product-image-container a.image-popup:hover::after {
  opacity: 0.8;
}

/* Styles for General Categories Form */
.general_categories.new form fieldset.inputs,
.general_categories.edit form fieldset.inputs {
  padding: 0;
}

/* Styles for Custom Categories Form */
.custom_categories.new form fieldset.inputs,
.custom_categories.edit form fieldset.inputs {
  padding: 0;
}

.general_categories.new form fieldset.inputs ol,
.general_categories.edit form fieldset.inputs ol,
.custom_categories.new form fieldset.inputs ol,
.custom_categories.edit form fieldset.inputs ol {
  padding: 20px 30px;
  margin: 0;
}

.general_categories.new form fieldset.inputs ol > li,
.general_categories.edit form fieldset.inputs ol > li,
.custom_categories.new form fieldset.inputs ol > li,
.custom_categories.edit form fieldset.inputs ol > li {
  padding: 12px 0;
  margin: 0 0 15px 0;
  list-style: none;
}

.general_categories.new form fieldset.inputs ol > li label,
.general_categories.edit form fieldset.inputs ol > li label,
.custom_categories.new form fieldset.inputs ol > li label,
.custom_categories.edit form fieldset.inputs ol > li label {
  width: 25%;
  float: left;
  text-align: left;
  padding-right: 15px;
  padding-left: 0;
}

.general_categories.new form fieldset.inputs ol > li input,
.general_categories.edit form fieldset.inputs ol > li input,
.general_categories.new form fieldset.inputs ol > li select,
.general_categories.edit form fieldset.inputs ol > li select {
  width: 70%;
  float: left;
}

.level-input {
  margin-bottom: 15px;
  padding: 12px 0;
  background: transparent;
  border-radius: 5px;
  clear: both;
}

.level-input label {
  width: 25% !important;
  float: left !important;
  text-align: left !important;
  padding-right: 15px !important;
  padding-left: 0 !important;
}

.level-input input,
.level-input select {
  width: 70% !important;
  float: left !important;
}

#general_category_level_type {
  width: 100%;
  max-width: 600px;
}

#parent_selection {
  margin-top: 20px;
  margin-bottom: 20px;
  clear: both;
}

#parent_selection {
  padding: 12px 0;
  background: transparent;
  border-radius: 5px;
  margin: 15px 0;
}

#parent_selection label {
  width: 25% !important;
  float: left !important;
  text-align: left !important;
  padding-right: 15px !important;
  padding-left: 0 !important;
}

#parent_selection .select2-container {
  width: 70% !important;
  float: left !important;
}

#value_inputs {
  margin-top: 15px;
  clear: both;
}

#inherited_fields_notice {
  margin-bottom: 15px;
  margin-left: 20%;
  width: 75%;
}

/* Ensure proper field widths */
#general_category_seccion,
#general_category_categoria,
#general_category_subcategoria,
#general_category_clase {
  width: 100%;
  max-width: 600px;
}

/* Fix for form hints */
.general_categories p.inline-hints {
  margin-left: 25%;
  clear: both;
  padding-top: 5px;
  color: #666;
  font-size: 0.9em;
}

/* Fix alignment for dynamic fields */
.level-input li.input {
  clear: both;
  overflow: hidden;
}

.level-input li.input:after {
  content: "";
  display: table;
  clear: both;
}

/* Fix for boolean checkbox */
.general_categories .boolean label {
  width: auto !important;
  float: none !important;
  margin-left: 25%;
}

.general_categories .boolean input[type="checkbox"] {
  width: auto !important;
  float: none !important;
  margin-right: 10px;
}

/* Clear floats */
.general_categories form fieldset.inputs ol > li:after {
  content: "";
  display: table;
  clear: both;
}

/* Panel styles */
.general_categories .panel {
  margin-bottom: 20px;
}

.general_categories .panel h3 {
  font-size: 1.1em;
  padding: 10px 15px;
  margin: 0;
}

/* Specific styles for the form panel content */
.general_categories form .panel_contents {
  padding: 20px 30px !important;
}

/* Ensure proper spacing for fields inside panels */
.general_categories #value_inputs > div {
  padding: 12px 0;
  margin: 10px 0;
}

/* Special handling for parent_id field with Select2 - only in forms, not index */
.general_categories.new #general_category_parent_id_input .select2-container,
.general_categories.edit #general_category_parent_id_input .select2-container,
.custom_categories.new #custom_category_parent_id_input .select2-container,
.custom_categories.edit #custom_category_parent_id_input .select2-container {
  width: 70% !important;
  max-width: 600px !important;
}

/* Width for the Select2 wrapper span */
.general_categories.new #general_category_parent_id_input > span,
.general_categories.edit #general_category_parent_id_input > span,
.custom_categories.new #custom_category_parent_id_input > span,
.custom_categories.edit #custom_category_parent_id_input > span {
  width: 80% !important;
}

.general_categories li[data-field-type="parent-selection"] {
  padding: 12px 0;
  margin: 0 0 15px 0;
}

/* Style the level type selector with proper spacing */
.general_categories li.select.input.optional {
  padding: 12px 0 !important;
  margin: 0 0 15px 0 !important;
  background: transparent;
}

/* Active checkbox styling */
.general_categories li.boolean.input.optional {
  padding: 12px 0 !important;
  margin: 0 0 15px 0 !important;
  background: transparent;
}

/* Account Cards Grid Styles */
/* ActiveAdmin uses table structure for grid, so we need to style the table cells */
.custom-grid table {
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 20px;
}

.custom-grid tbody {
  display: block;
  width: 100%;
}

.custom-grid tr {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  justify-content: flex-start;
}

.custom-grid td.account {
  display: block;
  width: 280px !important; /* Fixed width for all cards */
  flex: 0 0 280px; /* Prevent flex from changing the width */
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

/* Ensure all account cards have the same size */
.custom-grid .account-card {
  width: 280px !important; /* Fixed width */
  height: 100%;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .custom-grid td.account {
    width: 100% !important;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .custom-grid .account-card {
    width: 100% !important;
  }

  .custom-grid tr {
    flex-direction: column;
    align-items: center;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .custom-grid td.account {
    width: 260px !important;
    flex: 0 0 260px;
  }

  .custom-grid .account-card {
    width: 260px !important;
  }
}

@media (min-width: 1025px) {
  /* Default 280px width is maintained */
}

/* Spacing for pagination in Locals Summary panel */
.locals-summary-panel .panel_contents nav.pagination,
.locals-summary-panel .panel_contents .pagination {
  margin: 12px 15px 18px;
}

/* Footer pagination layout and spacing like ActiveAdmin */
.locals-summary-panel .paginated_collection_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px; /* inner spacing so it doesn't touch panel border */
  border-top: 1px solid #e5e7eb; /* subtle separator above footer */
  background: transparent;
}

/* Reset margins for pagination inside footer to avoid collapsing with panel border */
.locals-summary-panel .paginated_collection_footer nav.pagination,
.locals-summary-panel .paginated_collection_footer .pagination {
  margin: 0; /* override top helper spacing */
}

/* Tweak info text color to match AA tone */
.locals-summary-panel .paginated_collection_footer .pagination_information {
  color: #6b7280; /* gray-600 */
}

/* Account Card Logo Link Hover Effect */
.account-card .logo-container {
  position: relative;
}

.account-card .logo-link {
  position: relative;
  display: block;
  cursor: pointer;
}

/* Ensure icon is above image */
.account-card .logo-link .link-icon {
  z-index: 100 !important;
}

/* ========================================
   Planogram Items - Bandeja Grouping
   ======================================== */

/* Group header row */
.bandeja-group-header {
  cursor: pointer;
  user-select: none;
  background: #f8fafc !important;
  border-left: 3px solid #6366f1;
}

.bandeja-group-header + .bandeja-row {
  border-top: none;
}

/* Visual separation between groups */
.bandeja-row + .bandeja-group-header td {
  border-top: 2px solid #e2e8f0;
}

.bandeja-group-header:hover {
  background: #eef2ff !important;
}

.bandeja-group-header td {
  padding: 10px 14px !important;
  border-bottom: 1px solid #e2e8f0;
}

.bandeja-header-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bandeja-chevron {
  width: 18px;
  text-align: center;
  color: #6366f1;
  font-size: 12px;
}

.bandeja-label {
  font-weight: 700;
  font-size: 13px;
  color: #1e293b;
  letter-spacing: 0.02em;
}

.bandeja-count {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  background: #e2e8f0;
  padding: 1px 8px;
  border-radius: 10px;
  margin-left: 6px;
}

/* Tags for promo/laminado/pesable */
.pi-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pi-tag-green {
  background: #dcfce7;
  color: #166534;
}

.pi-tag-blue {
  background: #dbeafe;
  color: #1e40af;
}

/* Footer summary */
.bandeja-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-top: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-top: none;
  border-radius: 0 0 6px 6px;
  font-size: 12px;
  color: #64748b;
}

.bandeja-footer-total {
  font-weight: 600;
  color: #475569;
}

.bandeja-footer-sep {
  color: #cbd5e1;
  font-size: 14px;
}

.bandeja-footer-info {
  color: #94a3b8;
}

/* Dark mode */
.dark .bandeja-group-header {
  background: #1e293b !important;
  border-left-color: #818cf8;
}

.dark .bandeja-group-header:hover {
  background: #334155 !important;
}

.dark .bandeja-group-header td {
  border-bottom-color: #334155;
}

.dark .bandeja-chevron {
  color: #818cf8;
}

.dark .bandeja-label {
  color: #e2e8f0;
}

.dark .bandeja-count {
  color: #94a3b8;
  background: #334155;
}

.dark .pi-tag-green {
  background: #064e3b;
  color: #6ee7b7;
}

.dark .pi-tag-blue {
  background: #1e3a5f;
  color: #93c5fd;
}

.dark .bandeja-footer {
  background: #1e293b;
  border-color: #334155;
}

.dark .bandeja-footer-total {
  color: #cbd5e1;
}

.dark .bandeja-footer-sep {
  color: #475569;
}

.dark .bandeja-footer-info {
  color: #64748b;
}

.dark .bandeja-row + .bandeja-group-header td {
  border-top-color: #475569;
}

/* Form: inline field rows (pair fields side by side) */
li.inline-row-start {
  display: inline-block;
  width: 48%;
  vertical-align: top;
  margin-right: 2%;
}

li.inline-row-end {
  display: inline-block;
  width: 48%;
  vertical-align: top;
}

/* Form: pair of money fields con switch toggle compacto al centro.
   Diseñado para "propuesto → [toggle] → aprobado" en una sola fila.
   Al activar el toggle, el modelo (sync_approved_amounts) autocompleta
   el monto aprobado con el monto propuesto (o la estimación del sistema
   para gasolina). Las flechas decorativas refuerzan el flujo visual. */
li.inline-amount-1,
li.inline-amount-2,
li.inline-amount-check {
  display: inline-block;
  vertical-align: top;
}

li.inline-amount-1 { width: 42%; margin-right: 2%; }
li.inline-amount-check {
  width: 10%;
  margin-right: 2%;
  padding-top: 2.4rem;
  text-align: center;
}
li.inline-amount-2 { width: 42%; }

/* Hide native checkbox; el <label> que lo envuelve se convierte en toggle. */
li.inline-amount-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

li.inline-amount-check label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  font-size: 0.75rem;
  color: #64748b; /* slate-500 */
  position: relative;
}

/* Track del toggle */
li.inline-amount-check label::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 18px;
  background: #cbd5e1; /* slate-300 */
  border-radius: 999px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.dark li.inline-amount-check label::before { background: #475569; }

/* Bolita del toggle */
li.inline-amount-check label::after {
  content: "";
  position: absolute;
  left: 2px;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: left 0.2s;
}

/* Estado checked: track verde, bolita a la derecha, texto en verde */
li.inline-amount-check label:has(input:checked)::before { background: #10b981; /* emerald-500 */ }
li.inline-amount-check label:has(input:checked)::after  { left: 16px; }
li.inline-amount-check label:has(input:checked) { color: #047857; /* emerald-700 */ }

/* User form: has_many assignments inline row */
[data-has-many-association="user_assignments"] .has-many-fields ol {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

[data-has-many-association="user_assignments"] .has-many-fields ol > li.input {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}

[data-has-many-association="user_assignments"] .has-many-fields ol > li.has-many-delete {
  flex: none;
  margin-bottom: 0;
}

/* ── Dropdown Actions (AA v4 replacement) ──────────────────────── */

.aa-dropdown-actions {
  position: relative;
  display: inline-block;
}

.aa-dropdown-actions__trigger {
  display: inline-block;
  background: none;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 18px;
  cursor: pointer;
  color: #64748b;
  line-height: 1;
  letter-spacing: 2px;
  user-select: none;
}

.aa-dropdown-actions__trigger:hover {
  background: #f1f5f9;
  color: #334155;
}

.aa-dropdown-actions__menu {
  display: none;
  position: fixed;
  z-index: 9999;
  min-width: 160px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  list-style: none;
}

.aa-dropdown-actions__menu.is-open {
  display: block;
}

.aa-dropdown-actions__menu li a {
  display: block;
  padding: 7px 14px;
  font-size: 13px;
  color: #334155;
  text-decoration: none;
  white-space: nowrap;
}

.aa-dropdown-actions__menu li a:hover,
.aa-dropdown-actions__menu li button:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.aa-dropdown-actions__menu li form {
  margin: 0;
  padding: 0;
}

.aa-dropdown-actions__menu li button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 14px;
  font-size: 13px;
  color: #475569;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.aa-dropdown-actions__menu li:last-child {
  border-top: 1px solid #e2e8f0;
  margin-top: 4px;
  padding-top: 4px;
}

.aa-dropdown-actions__menu li:last-child a,
.aa-dropdown-actions__delete-link {
  color: #dc2626;
}

.aa-dropdown-actions__menu li:last-child a:hover,
.aa-dropdown-actions__delete-link:hover {
  background: #fef2f2;
}


/* Dark mode */
.dark .aa-dropdown-actions__trigger {
  border-color: #374151;
  color: #94a3b8;
}

.dark .aa-dropdown-actions__trigger:hover {
  background: #1f2937;
  color: #e2e8f0;
}

.dark .aa-dropdown-actions__menu {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.dark .aa-dropdown-actions__menu li a,
.dark .aa-dropdown-actions__menu li button {
  color: #e2e8f0;
}

.dark .aa-dropdown-actions__menu li a:hover,
.dark .aa-dropdown-actions__menu li button:hover {
  background: #374151;
}

.dark .aa-dropdown-actions__menu li:last-child {
  border-top-color: #374151;
}

.dark .aa-dropdown-actions__menu li:last-child a,
.dark .aa-dropdown-actions__delete-link {
  color: #f87171;
}

.dark .aa-dropdown-actions__menu li:last-child a:hover,
.dark .aa-dropdown-actions__delete-link:hover {
  background: #371717;
}

/* Inline checkboxes row */
fieldset.inline-checkboxes-row > ol {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

fieldset.inline-checkboxes-row > ol > li {
  flex: 0 0 auto;
  padding: 0 !important;
}

fieldset.inline-checkboxes-row > legend {
  display: none;
}

fieldset.inline-checkboxes-row {
  padding-bottom: 16px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid #e5e7eb;
}

.dark fieldset.inline-checkboxes-row {
  border-bottom-color: #374151;
}

/* Inline has_many form for Question Options */
fieldset.class_for_inline_has_many_form > ol {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

fieldset.class_for_inline_has_many_form > ol > li {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
}

fieldset.class_for_inline_has_many_form > ol > li.input.string {
  min-width: 150px;
}

fieldset.class_for_inline_has_many_form > ol > li.input.string[id$="_code_input"] {
  flex: 0 0 80px;
  min-width: 80px;
}

fieldset.class_for_inline_has_many_form > ol > li.input.numeric {
  min-width: 80px;
  flex: 0 0 80px;
}

fieldset.class_for_inline_has_many_form > ol > li.boolean {
  flex: 0 0 auto;
  min-width: auto;
  align-self: center;
  padding-top: 16px !important;
}

fieldset.class_for_inline_has_many_form > ol > li label {
  font-size: 11px;
  margin-bottom: 2px;
}

fieldset.class_for_inline_has_many_form > ol > li.has-many-delete {
  flex: 0 0 auto;
  min-width: auto;
  align-self: center;
  padding-top: 16px !important;
}

/* ========== NSG Visit Item Card Layout (minimalista slate + indigo) ========== */

.vi-card {
  padding: 14px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Layout principal: imagen | body | side */
.vi-card__main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* Imagen ref */
.vi-card__ref-img {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}
.vi-card__ref-img img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.vi-card__ref-img--empty {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
}
.dark .vi-card__ref-img--empty {
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.25);
}

/* Body central */
.vi-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vi-card__name {
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  line-height: 1.35;
}
.dark .vi-card__name {
  color: #f1f5f9;
}
.vi-card__name--disabled {
  opacity: 0.45;
  text-decoration: line-through;
}

.vi-card__name-link {
  color: inherit;
  text-decoration: none;
}
.vi-card__name-link:hover {
  color: #4f46e5;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.dark .vi-card__name-link:hover {
  color: #818cf8;
}

.vi-card__meta {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dark .vi-card__meta {
  color: #94a3b8;
}

.vi-card__chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
  white-space: nowrap;
}
.dark .vi-card__chip {
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
}

.vi-card__id-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  white-space: nowrap;
}
.dark .vi-card__id-tag {
  color: #64748b;
}

/* Toggles row */
.vi-card__toggles {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.vi-card__toggle-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vi-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 10px 4px 5px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: transparent;
  user-select: none;
  transition: border-color 0.15s, background 0.15s;
}
.vi-card__toggle:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}
.dark .vi-card__toggle {
  border-color: rgba(148, 163, 184, 0.25);
}
.dark .vi-card__toggle:hover {
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(148, 163, 184, 0.08);
}

.vi-card__toggle-label {
  font-size: 11px;
  font-weight: 500;
  color: #475569;
}
.dark .vi-card__toggle-label {
  color: #cbd5e1;
}

/* Switch (track + thumb) — controlado por data-toggle-value */
.vi-card__switch {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 15px;
  flex-shrink: 0;
}
.vi-card__switch .toggle-switch-track {
  position: absolute;
  inset: 0;
  background: #e2e8f0;
  border-radius: 999px;
  transition: background 0.18s ease;
}
.vi-card__switch .toggle-switch-thumb {
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}
.dark .vi-card__switch .toggle-switch-track {
  background: rgba(148, 163, 184, 0.25);
}
/* Activo: indigo-600 + thumb a la derecha */
.vi-card__toggle[data-toggle-value="true"] .toggle-switch-track {
  background: #4f46e5;
}
.vi-card__toggle[data-toggle-value="true"] .toggle-switch-thumb {
  transform: translateX(11px);
}

.vi-card__toggle-img {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: 5px;
  flex-shrink: 0;
}
.vi-card__toggle-img img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.vi-card__toggle-img:hover {
  background: rgba(79, 70, 229, 0.10);
}

/* Side derecho: score + edit + stock */
.vi-card__side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 80px;
}

.vi-card__score-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vi-card__score {
  text-align: right;
  white-space: nowrap;
  font-feature-settings: "tnum";
}
.vi-card__score-value {
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
}
.dark .vi-card__score-value {
  color: #f1f5f9;
}
.vi-card__score-unit {
  font-size: 11px;
  color: #94a3b8;
  margin-left: 2px;
}

.vi-card__edit {
  color: #94a3b8;
  font-size: 13px;
  padding: 4px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.vi-card__edit:hover {
  color: #4f46e5;
}
.dark .vi-card__edit {
  color: #64748b;
}
.dark .vi-card__edit:hover {
  color: #818cf8;
}

.vi-card__stock {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  font-feature-settings: "tnum";
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dark .vi-card__stock {
  color: #64748b;
}
.vi-card__stock-label {
  opacity: 0.85;
}
.vi-card__stock-value {
  color: #475569;
  font-weight: 500;
}
.dark .vi-card__stock-value {
  color: #cbd5e1;
}
.vi-card__stock-icon {
  opacity: 0.6;
  font-size: 10px;
}

/* Descargos — caja slate sutil con icono ámbar (sin border-left chunky) */
.vi-card__descargos {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #475569;
}
.dark .vi-card__descargos {
  background: rgba(148, 163, 184, 0.06);
  border-color: rgba(148, 163, 184, 0.18);
  color: #cbd5e1;
}

.vi-card__descargos-label {
  font-size: 11px;
  font-weight: 600;
  color: #b45309;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.2px;
}
.vi-card__descargos-label i {
  font-size: 10px;
}
.dark .vi-card__descargos-label {
  color: #fbbf24;
}

.vi-card__descargos-status {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
  white-space: nowrap;
}
.vi-card__descargos-status.is-valid {
  background: #ecfdf5;
  color: #047857;
}
.vi-card__descargos-status.is-rejected {
  background: #fef2f2;
  color: #b91c1c;
}
.dark .vi-card__descargos-status {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
}
.dark .vi-card__descargos-status.is-valid {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}
.dark .vi-card__descargos-status.is-rejected {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

.vi-card__descargos-reasons {
  font-size: 11px;
  opacity: 0.85;
}

.vi-card__descargos-comment {
  font-size: 11px;
  font-style: italic;
  opacity: 0.7;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vi-card__descargos-spacer {
  flex: 1;
}

.vi-card__descargos-img img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.vi-card__descargos-edit {
  color: #94a3b8;
  font-size: 11px;
  padding: 2px 4px;
}
.vi-card__descargos-edit:hover {
  color: #4f46e5;
}
.dark .vi-card__descargos-edit {
  color: #64748b;
}
.dark .vi-card__descargos-edit:hover {
  color: #818cf8;
}

/* Questions */
.vi-card__questions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

.vi-card__questions-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vi-card__questions-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #94a3b8;
}
.dark .vi-card__questions-title {
  color: #64748b;
}

.vi-card__questions-count {
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  white-space: nowrap;
}
.vi-card__questions-count.is-complete {
  background: #eef2ff;
  color: #4338ca;
}
.vi-card__questions-count.is-empty {
  background: #f1f5f9;
  color: #94a3b8;
}
.dark .vi-card__questions-count {
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
}
.dark .vi-card__questions-count.is-complete {
  background: rgba(99, 102, 241, 0.18);
  color: #c7d2fe;
}
.dark .vi-card__questions-count.is-empty {
  background: rgba(148, 163, 184, 0.10);
  color: #64748b;
}

.vi-card__questions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 14px;
}

.vi-card__questions-multi {
  margin-top: 8px;
}

/* Multi-select dropdown */
.multi-select-dropdown {
  position: relative;
  margin-top: 1px;
}

.multi-select-dropdown__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid rgba(128,128,128,0.25);
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  min-height: 26px;
}

.multi-select-dropdown__trigger:hover {
  border-color: rgba(128,128,128,0.45);
}

.multi-select-dropdown__text {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.multi-select-dropdown__badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 500;
  background: #dbeafe;
  color: #1e40af;
  white-space: nowrap;
  line-height: 1.4;
}

.dark .multi-select-dropdown__badge {
  background: #1e3a5f;
  color: #93c5fd;
}

.multi-select-dropdown__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 220px;
  z-index: 100;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 4px 0;
  margin-top: 2px;
  max-height: 200px;
  overflow-y: auto;
}

.multi-select-dropdown.is-open .multi-select-dropdown__panel {
  display: block;
}

.multi-select-dropdown.is-open .multi-select-dropdown__trigger {
  border-color: #3b82f6;
}

.multi-select-dropdown__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
}

.multi-select-dropdown__option:hover {
  background: #f3f4f6;
}

.multi-select-dropdown__check {
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #d1d5db;
  border-radius: 3px;
  font-size: 10px;
  flex: 0 0 16px;
  color: transparent;
}

.multi-select-dropdown__option.is-selected .multi-select-dropdown__check {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}

.multi-select-dropdown__option span {
  flex: 1;
  min-width: 0;
}

/* Dark mode */
.dark .multi-select-dropdown__panel {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.dark .multi-select-dropdown__option:hover {
  background: #374151;
}

/* Estilos dark-mode para .vi-card__edit / toggles ya viven al lado de su rule base. */

/* ========== Visit Item Show Page (minimalista slate + indigo) ========== */

/* Hero: 4 imágenes */
.vi-show__hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 20px;
}
.dark .vi-show__hero {
  background: rgba(148, 163, 184, 0.04);
  border-color: rgba(148, 163, 184, 0.15);
}

.vi-show__image-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vi-show__image {
  width: 100%;
  height: 160px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.vi-show__image:hover {
  transform: scale(1.02);
}
.dark .vi-show__image {
  background: rgba(148, 163, 184, 0.05);
}

.vi-show__image--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  cursor: default;
  transition: none;
}
.vi-show__image--empty:hover {
  transform: none;
}
.vi-show__image--empty i {
  font-size: 24px;
  color: #cbd5e1;
}
.dark .vi-show__image--empty {
  background: rgba(148, 163, 184, 0.06);
  border-color: rgba(148, 163, 184, 0.20);
}
.dark .vi-show__image--empty i {
  color: rgba(148, 163, 184, 0.45);
}

.vi-show__image-label {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
}
.dark .vi-show__image-label {
  color: #64748b;
}

/* Layout 2/3 + 1/3 */
.vi-show__col-main { /* hereda anchos de AA columns */ }
.vi-show__col-side { }

/* Panel base */
.vi-show__panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.dark .vi-show__panel {
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(148, 163, 184, 0.15);
}

.vi-show__panel-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
  margin-bottom: 14px;
}
.dark .vi-show__panel-title {
  color: #64748b;
}

/* Score card (Compliance Total) */
.vi-show__score {
  text-align: center;
  padding: 18px 0 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}
.dark .vi-show__score {
  border-bottom-color: rgba(148, 163, 184, 0.12);
}
.vi-show__score-value {
  font-size: 40px;
  font-weight: 600;
  color: #0f172a;
  font-feature-settings: "tnum";
  line-height: 1;
}
.dark .vi-show__score-value {
  color: #f1f5f9;
}
.vi-show__score-unit {
  font-size: 18px;
  font-weight: 500;
  color: #94a3b8;
  margin-left: 4px;
}
.vi-show__score-label {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
}
.dark .vi-show__score-label {
  color: #64748b;
}

/* Audit pills (Presencia / Fleje / Promo / Visibilidad) */
.vi-show__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vi-show__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
}
.dark .vi-show__pill {
  background: rgba(148, 163, 184, 0.06);
  border-color: rgba(148, 163, 184, 0.18);
  color: #cbd5e1;
}
.vi-show__pill i {
  font-size: 10px;
}
.vi-show__pill.is-ok {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca;
}
.vi-show__pill.is-ok i {
  color: #4f46e5;
}
.dark .vi-show__pill.is-ok {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.28);
  color: #c7d2fe;
}
.dark .vi-show__pill.is-ok i {
  color: #818cf8;
}
.vi-show__pill.is-no {
  /* mantiene look slate base, sin agregar carga visual */
  color: #64748b;
}
.vi-show__pill.is-no i {
  color: #cbd5e1;
}
.dark .vi-show__pill.is-no i {
  color: rgba(148, 163, 184, 0.45);
}

/* Meta line bajo pills (stock + comment) */
.vi-show__meta {
  margin-top: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: #475569;
}
.dark .vi-show__meta {
  color: #cbd5e1;
}
.vi-show__meta-label {
  color: #94a3b8;
  font-weight: 500;
}
.vi-show__meta-value {
  color: #0f172a;
  font-weight: 500;
  font-feature-settings: "tnum";
}
.dark .vi-show__meta-value {
  color: #f1f5f9;
}
.vi-show__meta-icon {
  font-size: 10px;
  color: #94a3b8;
  margin-right: 4px;
}
.vi-show__meta-sep {
  color: #cbd5e1;
}
.dark .vi-show__meta-sep {
  color: rgba(148, 163, 184, 0.30);
}

.vi-show__price-inline {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: #475569;
}
.dark .vi-show__price-inline {
  border-top-color: rgba(148, 163, 184, 0.12);
}

/* Filas tipo definición (label + valor) */
.vi-show__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
}
.vi-show__row:last-child {
  border-bottom: none;
}
.dark .vi-show__row {
  border-bottom-color: rgba(148, 163, 184, 0.10);
}
.vi-show__row--comment {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.vi-show__row-label {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  flex-shrink: 0;
  text-transform: none;
}
.dark .vi-show__row-label {
  color: #64748b;
}

.vi-show__row-value {
  color: #0f172a;
  text-align: right;
  word-break: break-word;
}
.vi-show__row--comment .vi-show__row-value {
  text-align: left;
  font-style: italic;
  color: #475569;
}
.dark .vi-show__row-value {
  color: #f1f5f9;
}

.vi-show__row-value--product {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: right;
}

.vi-show__row-edit {
  color: #94a3b8;
  font-size: 11px;
  padding: 0 2px;
}
.vi-show__row-edit:hover {
  color: #4f46e5;
}
.dark .vi-show__row-edit {
  color: #64748b;
}
.dark .vi-show__row-edit:hover {
  color: #818cf8;
}

/* Status (estado dot + texto) */
.vi-show__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vi-show__status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.vi-show__status-dot.is-on {
  background: #4f46e5;
}
.vi-show__status-dot.is-off {
  background: #cbd5e1;
}
.dark .vi-show__status-dot.is-on {
  background: #818cf8;
}
.dark .vi-show__status-dot.is-off {
  background: rgba(148, 163, 184, 0.30);
}

/* Chip genérico (option, OCR status) */
.vi-show__chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: #f1f5f9;
  color: #475569;
  white-space: nowrap;
}
.vi-show__chip.is-valid {
  background: #ecfdf5;
  color: #047857;
}
.vi-show__chip.is-rejected {
  background: #fef2f2;
  color: #b91c1c;
}
.vi-show__chip.is-pending {
  background: #fffbeb;
  color: #b45309;
}
.dark .vi-show__chip {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
}
.dark .vi-show__chip.is-valid {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}
.dark .vi-show__chip.is-rejected {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}
.dark .vi-show__chip.is-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

/* Preguntas */
.vi-show__question {
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}
.vi-show__question:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.vi-show__question:first-child {
  padding-top: 0;
}
.dark .vi-show__question {
  border-bottom-color: rgba(148, 163, 184, 0.10);
}

.vi-show__question-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
  margin-bottom: 5px;
}
.dark .vi-show__question-label {
  color: #64748b;
}

.vi-show__question-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.vi-show__question-multi {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vi-show__question-answer {
  font-size: 13px;
  color: #0f172a;
}
.dark .vi-show__question-answer {
  color: #f1f5f9;
}

.vi-show__question-captured {
  font-size: 11px;
  color: #64748b;
  font-feature-settings: "tnum";
}
.dark .vi-show__question-captured {
  color: #94a3b8;
}
/* Precio fuera del rango configurado en Question (expected_price_min/max).
   Hover muestra el rango esperado vía title attr. */
.vi-show__price-oor {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #fef2f2;
  color: #991b1b;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  cursor: help;
}
.dark .vi-show__price-oor {
  background: rgba(127, 29, 29, 0.25);
  color: #fecaca;
}

.vi-show__question-empty {
  font-size: 12px;
  font-style: italic;
  color: #cbd5e1;
}
.dark .vi-show__question-empty {
  color: rgba(148, 163, 184, 0.40);
}

/* Información (info1..info5) en grid */
.vi-show__info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.vi-show__info-cell {
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 6px;
}
.dark .vi-show__info-cell {
  background: rgba(148, 163, 184, 0.06);
}

.vi-show__info-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
  margin-bottom: 4px;
}
.dark .vi-show__info-label {
  color: #64748b;
}

.vi-show__info-value {
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  font-feature-settings: "tnum";
}
.dark .vi-show__info-value {
  color: #f1f5f9;
}

/* Precios grid (project_type=price) */
.vi-show__price-grid {
  display: flex;
  flex-direction: column;
}

.vi-show__ocr-tag {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dark .vi-show__ocr-tag {
  border-top-color: rgba(148, 163, 184, 0.12);
}

/* Barcode */
.vi-show__panel--barcode {
  text-align: center;
}
.vi-show__barcode img {
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto;
}

/* Coverage Plan Header */
.cp-header {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.dark .cp-header {
  background: #0f172a;
  border-color: #334155;
}

/* KPI Badges — base neutra slate, valor con color semántico */
.cp-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: #f8fafc;
}
.dark .cp-badge { background: rgba(30,41,59,0.5); }

/* Value color (semantic) */
.cp-badge--total .cp-badge__value { color: #0f172a; }
.cp-badge--visited .cp-badge__value { color: #059669; }
.cp-badge--planned .cp-badge__value { color: #d97706; }
.cp-badge--unplanned .cp-badge__value { color: #dc2626; }

.dark .cp-badge--total .cp-badge__value { color: #f1f5f9; }
.dark .cp-badge--visited .cp-badge__value { color: #34d399; }
.dark .cp-badge--planned .cp-badge__value { color: #fbbf24; }
.dark .cp-badge--unplanned .cp-badge__value { color: #f87171; }

/* Label always slate-500 (mismo color en todas las cards) */
.cp-badge__value { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-badge__label { font-size: 11px; font-weight: 500; color: #64748b; text-transform: uppercase; letter-spacing: .5px; }
.dark .cp-badge__label { color: #94a3b8; }

/* Progress bar */
.cp-progress-track { flex: 1; min-width: 120px; display: flex; align-items: center; gap: 8px; }
.cp-progress-bar { flex: 1; background: #e5e7eb; border-radius: 10px; height: 8px; overflow: hidden; }
.dark .cp-progress-bar { background: #475569; }
.cp-progress-fill { height: 100%; border-radius: 10px; transition: width 0.3s; }

/* Divider */
.cp-divider { border-top: 1px solid #f1f5f9; margin-bottom: 12px; }
.dark .cp-divider { border-color: #334155; }

/* Chips — minimalist slate base, indigo accent solo en activo */
.cp-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  margin-right: 4px;
  border: 1px solid transparent;
  transition: background 0.15s;
}
.cp-chip--active {
  background: #eef2ff;
  color: #4338ca;
  border-color: #c7d2fe;
}
.cp-chip--inactive {
  background: transparent;
  color: #64748b;
  border-color: #e2e8f0;
}
.cp-chip--inactive:hover { background: #f8fafc; color: #334155; }
.dark .cp-chip--active {
  background: rgba(99,102,241,0.18);
  color: #c7d2fe;
  border-color: rgba(99,102,241,0.35);
}
.dark .cp-chip--inactive {
  color: #94a3b8;
  border-color: #334155;
}
.dark .cp-chip--inactive:hover { background: rgba(30,41,59,0.6); color: #cbd5e1; }

.cp-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-right: 4px;
}
.dark .cp-filter-label { color: #64748b; }

.cp-separator { width: 1px; height: 20px; background: #e2e8f0; }
.dark .cp-separator { background: #475569; }

/* Search & Auditor inputs */
.cp-search-input {
  padding: 5px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 12px;
  width: 200px;
  background: #fff;
  color: #1e293b;
}
.dark .cp-search-input {
  background: #0f172a;
  border-color: #475569;
  color: #e2e8f0;
}
.cp-search-btn {
  padding: 5px 10px;
  background: #1e293b;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.dark .cp-search-btn { background: #e2e8f0; color: #0f172a; }
.cp-select {
  padding: 5px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 12px;
  background: #fff;
  color: #1e293b;
}
.dark .cp-select {
  background: #0f172a;
  border-color: #475569;
  color: #e2e8f0;
}
.cp-clear-link {
  font-size: 11px;
  color: #6b7280;
  text-decoration: none;
  padding: 5px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.dark .cp-clear-link {
  background: #334155;
  border-color: #475569;
  color: #94a3b8;
}

/* Frequency override indicator (account_locals index) */
.override-indicator:hover .override-tooltip {
  display: block !important;
}
.dark .override-tooltip {
  background: #1e293b !important;
  border-color: #334155 !important;
}
.dark .override-tooltip > div:first-child {
  color: #94a3b8 !important;
}
.dark .override-tooltip div[style*="border-bottom"] {
  border-color: #334155 !important;
}

/* Chip input (account edit: Cadena, Zone) -- theme-aware via CSS vars */
.chip-input-wrapper {
  --chip-box-bg: #fff;
  --chip-box-border: #d1d5db;
  --chip-box-focus-border: #3b82f6;
  --chip-box-focus-shadow: rgba(59, 130, 246, 0.15);
  --chip-bg: #e5e7eb;
  --chip-text: #1f2937;
  --chip-remove-bg: #d1d5db;
  --chip-remove-color: #4b5563;
  --chip-remove-hover-bg: #9ca3af;
  --chip-remove-hover-color: #fff;
  --chip-text-input-color: #1f2937;
  --sugg-label: #6b7280;
  --sugg-bg: #fff;
  --sugg-border: #d1d5db;
  --sugg-color: #374151;
  --sugg-selected-bg: #f3f4f6;
  --sugg-selected-border: #9ca3af;
  --sugg-selected-color: #9ca3af;
}
.dark .chip-input-wrapper {
  --chip-box-bg: #0f172a;
  --chip-box-border: #334155;
  --chip-box-focus-border: #60a5fa;
  --chip-box-focus-shadow: rgba(96, 165, 250, 0.25);
  --chip-bg: #334155;
  --chip-text: #e2e8f0;
  --chip-remove-bg: #475569;
  --chip-remove-color: #cbd5e1;
  --chip-remove-hover-bg: #64748b;
  --chip-remove-hover-color: #fff;
  --chip-text-input-color: #e2e8f0;
  --sugg-label: #94a3b8;
  --sugg-bg: #0f172a;
  --sugg-border: #475569;
  --sugg-color: #cbd5e1;
  --sugg-selected-bg: #1e293b;
  --sugg-selected-border: #475569;
  --sugg-selected-color: #64748b;
}

/* Reference Images bucket browser -- theme-aware via CSS vars */
.reference-images-page {
  --ri-text: #111827;
  --ri-text-muted: #6b7280;
  --ri-border: #d1d5db;
  --ri-border-light: #e5e7eb;
  --ri-input-bg: #fff;
  --ri-card-bg: #fff;
  --ri-thumb-bg: #f3f4f6;
}
.dark .reference-images-page {
  --ri-text: #e5e7eb;
  --ri-text-muted: #94a3b8;
  --ri-border: #475569;
  --ri-border-light: #334155;
  --ri-input-bg: #1e293b;
  --ri-card-bg: #0f172a;
  --ri-thumb-bg: #1e293b;
}

/* ===================================================================
   NSG: traditional desktop columns (vi_nsg_traditional_columns)
   Mobile transforma estas columnas a card via admin_mobile.css.
   =================================================================== */

/* Foto referencia */
.vi-nsg-ref-img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* Producto: nombre + meta + chips + comentario */
.vi-nsg-product { line-height: 1.35; }
.vi-nsg-name {
  font-weight: 600;
  font-size: 13px;
  color: #111827;
  margin-bottom: 2px;
}
.dark .vi-nsg-name { color: #f3f4f6; }
.vi-nsg-name--disabled {
  opacity: 0.5;
  text-decoration: line-through;
}
.vi-nsg-name-link {
  color: inherit;
  text-decoration: none;
}
.vi-nsg-name-link:hover {
  color: #4f46e5;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dark .vi-nsg-name-link:hover { color: #818cf8; }

.vi-nsg-meta {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 2px;
}
.dark .vi-nsg-meta { color: #9ca3af; }

.vi-nsg-chips {
  margin-top: 2px;
}
.vi-nsg-chip {
  display: inline-block;
  background: rgba(248, 113, 113, 0.15);
  color: #b91c1c;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 9999px;
  margin-right: 4px;
}
.dark .vi-nsg-chip { color: #fca5a5; }

.vi-nsg-comment {
  margin-top: 4px;
  font-size: 11px;
  color: #6b7280;
  font-style: italic;
}
.vi-nsg-comment i {
  margin-right: 4px;
  font-size: 10px;
  opacity: 0.7;
}

/* Toggle cell layout (cell que contiene switch + thumbnail) */
.vi-nsg-toggle-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Stack vertical: switch + sublabel debajo. Sublabel reitera el nombre
   de la columna en formato compacto para no perder la asociación con
   el header al hacer scroll. white-space:nowrap + font-size pequeño
   evita que expanda el ancho de la columna. */
.vi-nsg-toggle-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.vi-nsg-toggle-sublabel {
  font-size: 9px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  font-weight: 600;
}
.dark .vi-nsg-toggle-sublabel { color: #94a3b8; }

/* Stack vertical: thumbnail + link "abrir en nueva pestaña" debajo */
.vi-nsg-img-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.vi-nsg-img-newtab {
  font-size: 10px;
  color: #6b7280;
  line-height: 1;
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 3px;
}
.vi-nsg-img-newtab:hover {
  color: #2563eb;
  background: #f3f4f6;
}
.dark .vi-nsg-img-newtab { color: #94a3b8; }
.dark .vi-nsg-img-newtab:hover { color: #60a5fa; background: #1e293b; }

/* Planogram items index — Foto column. Stack vertical: thumb + sublabel
   diferenciando si es foto del auditor (planogram_item_photo) o del master. */
.pi-photo-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: 1;
}
.pi-photo-sublabel {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
}
.pi-photo-sublabel--auditor {
  color: #4f46e5;
  background: #e0e7ff;
}
.dark .pi-photo-sublabel--auditor {
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.18);
}
.pi-photo-sublabel--master {
  color: #9ca3af;
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  padding: 1px 0;
}
.dark .pi-photo-sublabel--master { color: #6b7280; }

/* Score / cumplimiento */
.vi-nsg-score {
  font-weight: 700;
  font-size: 14px;
  color: #111827;
}
.dark .vi-nsg-score { color: #f3f4f6; }
.vi-nsg-score-empty {
  color: #9ca3af;
  font-size: 14px;
}

/* Oculta toda la columna DESCARGOS cuando ningún item de la tabla
   tiene descargo (no se renderiza ningún .vi-nsg-disc). Aplica a
   th + td via la clase compartida. */
#index_table_visit_items:not(:has(.vi-nsg-disc)) .vi-nsg-col-descargos {
  display: none;
}

/* Descargos chip (link al modal) */
.vi-nsg-disc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.vi-nsg-disc i {
  font-size: 10px;
}
.vi-nsg-disc-letters {
  letter-spacing: 0.5px;
}
.vi-nsg-disc-status {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.85;
  margin-left: 2px;
}
.vi-nsg-disc--pending {
  background: #fef3c7;
  color: #92400e;
}
.vi-nsg-disc--valid {
  background: #dcfce7;
  color: #166534;
}
.vi-nsg-disc--rejected {
  background: #fee2e2;
  color: #991b1b;
}
.dark .vi-nsg-disc--pending {
  background: rgba(245, 158, 11, 0.2);
  color: #fde68a;
}
.dark .vi-nsg-disc--valid {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}
.dark .vi-nsg-disc--rejected {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

/* Questions count badge — clickeable: abre modal con questions */
.vi-nsg-q-count {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.vi-nsg-q-count:hover {
  filter: brightness(0.95);
}
.vi-nsg-q-count.is-complete {
  background: #dcfce7;
  color: #166534;
}
.vi-nsg-q-count.is-partial {
  background: #fef3c7;
  color: #92400e;
}
.vi-nsg-q-count.is-empty {
  background: #f3f4f6;
  color: #6b7280;
}
.dark .vi-nsg-q-count.is-complete {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}
.dark .vi-nsg-q-count.is-partial {
  background: rgba(245, 158, 11, 0.2);
  color: #fde68a;
}
.dark .vi-nsg-q-count.is-empty {
  background: rgba(107, 114, 128, 0.25);
  color: #d1d5db;
}
/* Wrapper que mantiene contador + badge OOR en la misma línea
   (el TD ancestro fuerza display:block en sus spans hijos). */
.vi-nsg-q-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
/* Badge ⚠ junto al contador Quest. cuando hay precios fuera del rango
   configurado en la question (expected_price_min/max). El hover muestra
   cuántos VIOs están fuera de rango. */
.vi-nsg-q-oor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 4px;
  background: #fee2e2;
  color: #dc2626;
  font-size: 11px;
  font-weight: 700;
  cursor: help;
}
.vi-nsg-q-oor:hover { background: #fecaca; }
.dark .vi-nsg-q-oor {
  background: rgba(220, 38, 38, 0.25);
  color: #fca5a5;
}
.dark .vi-nsg-q-oor:hover { background: rgba(220, 38, 38, 0.35); }

/* Acciones */
.vi-nsg-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vi-nsg-action {
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vi-nsg-action--view { color: #6b7280; }
.vi-nsg-action--edit { color: #2563eb; }
.vi-nsg-action-label { display: none; }

/* ===================================================================
   PRICE: traditional desktop columns (vi_price_traditional_columns)
   Reusa estilos de vi_nsg_* para foto/producto/quest/actions y agrega
   estilos específicos para precio/promo/ocr/mecanica/marcas.
   =================================================================== */

/* Marcas (chips coloreados) — flex wrap inline. */
.vi-price-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Celda de precio minimalista — toda la celda es link al modal,
   ✎ aparece solo en hover. */
.vi-price-cell {
  min-width: 90px;
}

a.vi-price-cell-link,
a.vi-price-cell-link:hover,
a.vi-price-cell-link:visited {
  display: block;
  padding: 4px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
a.vi-price-cell-link:hover {
  background: rgba(99, 102, 241, 0.06);
  text-decoration: none;
}
.dark a.vi-price-cell-link:hover {
  background: rgba(99, 102, 241, 0.12);
}

.vi-price-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.vi-price-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vi-price-value {
  font-weight: 700;
  font-size: 14px;
  color: #111827;
  white-space: nowrap;
}
.dark .vi-price-value {
  color: #f3f4f6;
}

.vi-price-empty {
  font-size: 18px;
  color: #cbd5e1;
  font-weight: 400;
}
.dark .vi-price-empty {
  color: #475569;
}

.vi-price-pencil {
  font-size: 11px;
  color: #6b7280;
  opacity: 0;
  transition: opacity 0.15s;
}
.vi-price-cell-link:hover .vi-price-pencil {
  opacity: 0.7;
}

/* Tiempo relativo de updated_at en la línea meta — verde sutil
   cuando es muy reciente (<1h) para destacar items recién editados. */
.vi-meta-updated {
  cursor: help;
  white-space: nowrap;
}
.vi-meta-updated--recent {
  color: #16a34a;
  font-weight: 600;
}
.dark .vi-meta-updated--recent {
  color: #4ade80;
}
.vi-meta-updated-icon {
  font-size: 9px;
  margin-right: 1px;
  opacity: 0.7;
}

/* Indicador de foto adjunta — siempre visible cuando existe imagen
   (fleje para precio, promo/fleje/presence para promo). */
.vi-price-photo-mark {
  font-size: 11px;
  color: #6366f1;
  opacity: 0.65;
}
.dark .vi-price-photo-mark {
  color: #a5b4fc;
}

.vi-price-ref {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
  white-space: nowrap;
}
.dark .vi-price-ref {
  color: #64748b;
}


/* OCR icon */
.vi-price-ocr {
  font-size: 18px;
  cursor: help;
}
.vi-price-ocr--ok { color: #059669; }
.vi-price-ocr--err { color: #dc2626; }
.vi-price-ocr--pending { color: #f59e0b; }

/* IA propuesta — paralela a OCR. Color según confidence o estado.
   Click lleva al panel del visit show con anchor al panel. */
.vi-price-ai {
  font-size: 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
}
.vi-price-ai:hover { background: #f1f5f9; }
.vi-price-ai--high { color: #16a34a; }
.vi-price-ai--medium { color: #f59e0b; }
.vi-price-ai--low { color: #94a3b8; }
.vi-price-ai--applied { color: #16a34a; }
.vi-price-ai--reverted { color: #64748b; opacity: 0.6; }

/* Mecánica chip */
.vi-price-mecanica {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.1);
  color: #4338ca;
  font-weight: 600;
}
.dark .vi-price-mecanica {
  background: rgba(99, 102, 241, 0.2);
  color: #c7d2fe;
}

/* ============================================================
   Visit Items Expand (VIE) — sub-row con questions inline en
   el index nsg, en reemplazo del modal. Estilo form-edit:
   cada option seleccionada acopla sus extras inline.
   ============================================================ */
.vie-row td {
  background: #f9fafb;
  padding: 0 !important;
  border-bottom: 1px solid #e5e7eb;
}
.dark .vie-row td { background: #0f172a; border-bottom-color: #334155; }

.vie-panel {
  padding: 14px 18px 14px 84px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vie-panel-loading,
.vie-panel-error {
  padding: 18px;
  text-align: center;
  color: #6b7280;
  font-size: 12px;
}
.dark .vie-panel-loading,
.dark .vie-panel-error { color: #9ca3af; }
.vie-panel-error { color: #dc2626; }

.vie-question {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 14px;
}
.dark .vie-question {
  background: #1e293b;
  border-color: #334155;
}

.vie-q-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.vie-q-title {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}
.dark .vie-q-title { color: #f1f5f9; }
.vie-q-meta {
  font-size: 10px;
  font-weight: 500;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 9999px;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dark .vie-q-meta { background: #334155; color: #cbd5e1; }
.vie-q-chip {
  font-size: 10px;
  font-weight: 500;
  color: #1e40af;
  background: #dbeafe;
  border: 1px solid #93c5fd;
  border-radius: 9999px;
  padding: 2px 8px;
}
.dark .vie-q-chip {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
}

.vie-q-options {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.vie-opt-row {
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  padding: 5px 8px;
  transition: background 0.1s;
}
.vie-opt-row.is-selected {
  background: #eff6ff;
  border-left: 3px solid #3b82f6;
  padding-left: 10px;
  margin: 2px 0;
}
.dark .vie-opt-row.is-selected {
  background: rgba(59, 130, 246, 0.1);
  border-left-color: #60a5fa;
}
.vie-opt-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #374151;
  cursor: default;
  user-select: none;
  margin: 0;
}
/* pointer-events:none asegura que click sobre el texto no produce
   ningún evento — el toggle solo ocurre con click directo en el input.
   Evita perder un visit_item_option (con sus extras) por click accidental
   en la etiqueta. */
.vie-opt-text {
  cursor: default;
  pointer-events: none;
}
.dark .vie-opt-label { color: #cbd5e1; }
.vie-opt-row.is-selected .vie-opt-label {
  color: #111827;
  font-weight: 500;
}
.dark .vie-opt-row.is-selected .vie-opt-label { color: #f1f5f9; }

.vie-opt-input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #2563eb;
  flex-shrink: 0;
}

.vie-opt-extras {
  display: none;
  margin-top: 6px;
  padding-left: 24px;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.vie-opt-row.is-selected .vie-opt-extras { display: flex; }

.vie-extra-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vie-extra-field label {
  font-size: 10px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.dark .vie-extra-field label { color: #94a3b8; }
/* Estilo "input pill" sólo para number/text. En checkbox, fijar
   border/background/padding rompe el render nativo (el ✓ desaparece
   aunque DOM tenga checked=true). El checkbox usa accent-color y nada más. */
.vie-extra-input:not([type="checkbox"]) {
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  font-size: 12px;
  color: #111827;
  background: #fff;
  width: 90px;
  font-family: inherit;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.dark .vie-extra-input:not([type="checkbox"]) {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}
.vie-extra-input:not([type="checkbox"]):focus {
  outline: 2px solid #93c5fd;
  outline-offset: -1px;
}
/* Precio fuera del rango configurado en Question (expected_price_min/max).
   El hover muestra el rango esperado vía title attr. */
.vie-extra-input--oor:not([type="checkbox"]) {
  border-color: #dc2626 !important;
  background-color: #fef2f2 !important;
  color: #991b1b !important;
  font-weight: 600;
}
.dark .vie-extra-input--oor:not([type="checkbox"]) {
  background-color: rgba(127, 29, 29, 0.25) !important;
  color: #fecaca !important;
}
.vie-extra-field--oor label { color: #dc2626 !important; font-weight: 600; }
.vie-oor-badge {
  display: inline-block;
  margin-left: 2px;
  color: #dc2626;
  font-size: 12px;
  line-height: 1;
  cursor: help;
}
.vie-extra-input:not([type="checkbox"]).is-saving {
  border-color: #fbbf24;
  background-color: #fffbeb;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.25);
}
.dark .vie-extra-input:not([type="checkbox"]).is-saving { background-color: rgba(251, 191, 36, 0.1); }
.vie-extra-input:not([type="checkbox"]).is-saved {
  border-color: #10b981;
  background-color: #ecfdf5;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
}
.dark .vie-extra-input:not([type="checkbox"]).is-saved { background-color: rgba(16, 185, 129, 0.1); }
.vie-extra-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
}
.vie-extra-checkbox input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #2563eb;
}
.vie-extra-checkbox label {
  text-transform: none;
  letter-spacing: 0;
  color: #374151;
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
}
.dark .vie-extra-checkbox label { color: #cbd5e1; }
.vie-extra-comment { flex: 1; min-width: 200px; }
.vie-extra-comment .vie-extra-input { width: 100%; }

/* Caret en el badge de questions cuando es expand-trigger */
.vi-nsg-q-count.is-expand-trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vi-nsg-q-count.is-expand-trigger::before {
  content: '▶';
  font-size: 8px;
  transition: transform 0.15s;
  opacity: 0.6;
}
.vi-nsg-q-count.is-expanded::before { transform: rotate(90deg); }

/* VisitNoteTemplate — color picker (radio chips) */
.color-radio-input ol{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:6px 0 0;list-style:none;}
.color-radio-input li.choice{margin:0;}
.color-radio-input li.choice label{display:inline-flex;align-items:center;justify-content:center;padding:6px 16px;border-radius:9999px;font-size:12px;font-weight:600;cursor:pointer;border:2px solid transparent;text-transform:capitalize;user-select:none;line-height:1.4;}
.color-radio-input li.choice input[type=radio]{position:absolute;opacity:0;width:0;height:0;}
.color-radio-input li.choice:has(input:checked) label{outline:2px solid #4f46e5;outline-offset:2px;}
.dark .color-radio-input li.choice:has(input:checked) label{outline-color:#a5b4fc;}
.color-radio-input li.choice:has(input[value=slate]) label{background:#e2e8f0;color:#334155;}
.dark .color-radio-input li.choice:has(input[value=slate]) label{background:rgba(148,163,184,0.18);color:#cbd5e1;}
.color-radio-input li.choice:has(input[value=indigo]) label{background:#e0e7ff;color:#4338ca;}
.dark .color-radio-input li.choice:has(input[value=indigo]) label{background:rgba(99,102,241,0.22);color:#c7d2fe;}
.color-radio-input li.choice:has(input[value=blue]) label{background:#dbeafe;color:#1e40af;}
.dark .color-radio-input li.choice:has(input[value=blue]) label{background:rgba(59,130,246,0.22);color:#bfdbfe;}
.color-radio-input li.choice:has(input[value=teal]) label{background:#ccfbf1;color:#0f766e;}
.dark .color-radio-input li.choice:has(input[value=teal]) label{background:rgba(20,184,166,0.22);color:#99f6e4;}
.color-radio-input li.choice:has(input[value=green]) label{background:#dcfce7;color:#15803d;}
.dark .color-radio-input li.choice:has(input[value=green]) label{background:rgba(34,197,94,0.22);color:#bbf7d0;}
.color-radio-input li.choice:has(input[value=amber]) label{background:#fef3c7;color:#92400e;}
.dark .color-radio-input li.choice:has(input[value=amber]) label{background:rgba(245,158,11,0.22);color:#fde68a;}
.color-radio-input li.choice:has(input[value=orange]) label{background:#ffedd5;color:#9a3412;}
.dark .color-radio-input li.choice:has(input[value=orange]) label{background:rgba(249,115,22,0.22);color:#fed7aa;}
.color-radio-input li.choice:has(input[value=red]) label{background:#fee2e2;color:#991b1b;}
.dark .color-radio-input li.choice:has(input[value=red]) label{background:rgba(239,68,68,0.22);color:#fecaca;}
.color-radio-input li.choice:has(input[value=pink]) label{background:#fce7f3;color:#9d174d;}
.dark .color-radio-input li.choice:has(input[value=pink]) label{background:rgba(236,72,153,0.22);color:#fbcfe8;}
.color-radio-input li.choice:has(input[value=purple]) label{background:#ede9fe;color:#6b21a8;}
.dark .color-radio-input li.choice:has(input[value=purple]) label{background:rgba(168,85,247,0.22);color:#e9d5ff;}

/* VisitNoteTemplate form — label + code en misma fila */
.vnt-form > fieldset > ol{display:flex;flex-wrap:wrap;gap:14px 16px;}
.vnt-form > fieldset > ol > li{flex:1 1 100%;}
.vnt-form > fieldset > ol > li.col-half{flex:1 1 calc(50% - 8px);min-width:220px;}

/* Color picker — badge informativo (círculo con N) para colores ya usados */
.color-radio-input .color-usage-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  margin-left:6px;
  border-radius:9999px;
  background:rgba(15,23,42,0.18);
  color:inherit;
  font-size:10px;
  font-weight:700;
  line-height:1;
  font-variant-numeric:tabular-nums;
  cursor:help;
}
.dark .color-radio-input .color-usage-badge{
  background:rgba(15,23,42,0.45);
}

/* Dashboard: tabla de avance por review (suavizar borders en dark mode) */
.dash-progress thead th{
  border-bottom:1px solid #e5e7eb;
}
.dash-progress tbody td{
  border-bottom:1px solid #f3f4f6;
}
.dash-progress tbody tr:last-child td{
  border-bottom:none;
}
.dash-account{
  color:#111827;
}
.dash-muted{
  color:#6b7280;
}
.dark .dash-progress thead th{
  border-bottom-color:rgba(148,163,184,0.18);
}
.dark .dash-progress tbody td{
  border-bottom-color:rgba(148,163,184,0.08);
}
.dark .dash-account{
  color:#f1f5f9;
}
.dark .dash-muted{
  color:#94a3b8;
}

/* Dark mode: subir lightness de los links en tablas index/data
   (default blue-500 #3b82f6 → blue-400 #60a5fa) para mejorar contraste
   contra el fondo navy. Aplica a anchors dentro de tablas index_table
   y data-table, y a los del panel dashboard. */
.dark .index_table a,
.dark .data-table a,
.dark .dash-progress a{
  color:#60a5fa;
}
.dark .index_table a:hover,
.dark .data-table a:hover,
.dark .dash-progress a:hover{
  color:#93c5fd;
}

/* Variables usadas por la columna "Categoría general/custom" en
   admin/masters.rb. Permiten override en dark mode sin tocar los
   inline styles de las celdas. */
:root{
  --catgen-bg:#fafafa;
  --catgen-border:#f0f0f0;
  --catgen-text:#111827;
  /* Description column en masters: texto muted (EAN, SKU, gramos, etc.)
     y botón "Editar" con borde indigo-100 + ícono indigo-600 */
  --mst-text-muted:#475569;
  --mst-accent:#4f46e5;
  --mst-accent-border:#e0e7ff;
}
.dark{
  --catgen-bg:rgba(148,163,184,0.08);
  --catgen-border:rgba(148,163,184,0.15);
  --catgen-text:#f1f5f9;
  --mst-text-muted:#cbd5e1;
  --mst-accent:#a5b4fc;
  --mst-accent-border:rgba(99,102,241,0.40);
}

/* Botones "(DEV)" e indigo-light en general: el inline style usa
   bg #eef2ff / color #4338ca / border #c7d2fe (indigo-50/700/200).
   En dark mode ese bg casi-blanco quema contra el navy: override vía
   attribute selector + !important (necesario para battir inline). */
.dark [style*="#eef2ff"]{
  background:rgba(99,102,241,0.18) !important;
  color:#c7d2fe !important;
  border-color:rgba(99,102,241,0.40) !important;
}
.dark [style*="#eef2ff"]:hover{
  background:rgba(99,102,241,0.28) !important;
}

/* ===== Tooltip de Cumplimiento en /admin/visits/:id/visit_items =====
   CSS-only popover sobre el "%" de la columna Cumpl. Muestra una tabla
   con el desglose por ponderación (Presencia/Fleje/Promo/Visibilidad/
   Facing): peso × valor = aporte, y total al pie. Aparece on-hover y
   on-focus; se posiciona absolute sobre el viewport relativo de la
   celda. */
.cumpl-tt{
  position:relative;
  display:inline-block;
}
.cumpl-tt__trigger{
  cursor:help;
  border-bottom:1px dotted #94a3b8;
}
.cumpl-tt__popover{
  /* position: fixed para evitar que el overflow del wrapper de la
     tabla (.index-as-table) recorte el popover. Las coordenadas se
     calculan en JS (cumpl_tooltip.js) y se inyectan vía CSS variables
     --cumpl-tt-top / --cumpl-tt-left. El popover crece hacia
     arriba-izquierda desde el punto (top-right del trigger). */
  position:fixed;
  top:var(--cumpl-tt-top, -9999px);
  left:var(--cumpl-tt-left, -9999px);
  z-index:9999;
  min-width:300px;
  padding:10px 12px;
  background:#ffffff;
  color:#0f172a;
  border:1px solid #e2e8f0;
  border-radius:6px;
  box-shadow:0 8px 24px rgba(15,23,42,0.12), 0 2px 6px rgba(15,23,42,0.08);
  font-size:12px;
  line-height:1.4;
  opacity:0;
  visibility:hidden;
  transform:translate(-100%, calc(-100% - 8px));
  transition:opacity 120ms ease, visibility 120ms;
  pointer-events:none;
  white-space:normal;
  text-align:left;
}
.cumpl-tt:hover .cumpl-tt__popover,
.cumpl-tt:focus-within .cumpl-tt__popover{
  opacity:1;
  visibility:visible;
}
/* Caret pointing down to the trigger (top-right corner aligned) */
.cumpl-tt__popover::after{
  content:"";
  position:absolute;
  top:100%;
  right:14px;
  border:6px solid transparent;
  border-top-color:#ffffff;
  /* sutil sombra del caret */
  filter:drop-shadow(0 1px 0 #e2e8f0);
}
.cumpl-tt__title{
  font-size:10px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#64748b;
  margin-bottom:6px;
}
.cumpl-tt__table{
  width:100%;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.cumpl-tt__table th{
  font-size:10px;
  font-weight:500;
  color:#64748b;
  text-align:left;
  padding:2px 6px 4px;
  border-bottom:1px solid #e2e8f0;
}
.cumpl-tt__table td{
  padding:3px 6px;
}
.cumpl-tt__label{ color:#334155; }
.cumpl-tt__pond{ color:#334155; text-align:right; }
.cumpl-tt__op{ color:#94a3b8; padding:3px 2px; }
.cumpl-tt__val{ color:#0f172a; text-align:center; min-width:36px; }
.cumpl-tt__result{ color:#0f172a; text-align:right; font-weight:600; }
.cumpl-tt__row--zero .cumpl-tt__result,
.cumpl-tt__row--zero .cumpl-tt__val{ color:#94a3b8; }
.cumpl-tt__row--ok .cumpl-tt__result{ color:#059669; }
.cumpl-tt__total td{
  border-top:1px solid #e2e8f0;
  padding-top:6px;
  font-weight:600;
}
.cumpl-tt__total .cumpl-tt__label{
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:0.06em;
  color:#64748b;
}
.cumpl-tt__total .cumpl-tt__result{
  font-size:13px;
  color:#0f172a;
}

/* ---- Dark mode: popover oscuro estilo Tippy/GitHub ---- */
.dark .cumpl-tt__popover{
  background:#1e293b;
  color:#f1f5f9;
  border-color:#334155;
  box-shadow:0 8px 24px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.15);
}
.dark .cumpl-tt__popover::after{
  border-top-color:#1e293b;
  filter:none;
}
.dark .cumpl-tt__title,
.dark .cumpl-tt__table th,
.dark .cumpl-tt__total .cumpl-tt__label{
  color:#94a3b8;
}
.dark .cumpl-tt__table th,
.dark .cumpl-tt__total td{
  border-color:#334155;
}
.dark .cumpl-tt__label,
.dark .cumpl-tt__pond{ color:#cbd5e1; }
.dark .cumpl-tt__op{ color:#64748b; }
.dark .cumpl-tt__val,
.dark .cumpl-tt__result,
.dark .cumpl-tt__total .cumpl-tt__result{ color:#f1f5f9; }
.dark .cumpl-tt__row--zero .cumpl-tt__result,
.dark .cumpl-tt__row--zero .cumpl-tt__val{ color:#64748b; }
.dark .cumpl-tt__row--ok .cumpl-tt__result{ color:#34d399; }
/* Estilos personalizados para el login de ActiveAdmin */

/* Ocultar el header y footer de ActiveAdmin en el login */
body.logged_out #header,
body.logged_out #title_bar,
body.logged_out #footer {
  display: none !important;
}

/* Remover el padding del wrapper */
body.logged_out #wrapper {
  padding: 0 !important;
}

/* Ajustar el contenido principal */
body.logged_out #active_admin_content {
  padding: 0 !important;
  margin: 0 !important;
}

/* Estilo para mensajes flash */
body.logged_out .flash {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  margin: 0;
  border-radius: 0;
}

/* Animación de entrada */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logged_out form {
  animation: fadeIn 0.5s ease-out;
}
/* ===== Link discreto para nombres clickeables (navega al show) =====
   Usado por el nombre del Local en Visits y la Categoría en
   PlanogramModules. */

.visit-local-link,
.pm-category-link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.visit-local-link:hover,
.pm-category-link:hover {
  color: #4f46e5;
  text-decoration: underline;
}

.dark .visit-local-link:hover,
.dark .pm-category-link:hover {
  color: #818cf8;
}

/* ===== Acciones del index de Visits =====
   Estilo compartido desktop+mobile. En mobile se vuelven botones
   thumb-friendly con texto. */

.visit-actions-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.visit-action-btn {
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.visit-action-btn--items { color: #8b5cf6; }
.visit-action-btn--view  { color: #6b7280; }
.visit-action-btn--edit  { color: #3b82f6; }

.visit-action-label { display: none; }

/* ===== Mobile: scopes y action items en fila scrolleable ===== */
/* Aplica a cualquier index del admin. */

@media (max-width: 768px) {

  /* --- Scope filters (Todos / Unplanned / ...) --- */

  .scopes {
    overflow: hidden;
  }

  .scopes .index-button-group {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    /* Indicador visual de scroll: degradado a la derecha */
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    padding-right: 24px;
  }

  .scopes .index-button-group::-webkit-scrollbar {
    display: none; /* WebKit */
  }

  .scopes .index-button {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px;
    padding: 6px 10px;
  }

  .scopes .scopes-count {
    font-size: 11px;
    margin-left: 4px;
  }

  /* --- Action items del header (Añadir, Calculate, Delete, ...) --- */
  /* :has() selecciona el contenedor flex-wrap que envuelve los botones,
     funcione el botón como <a class="action-item-button"> o como
     <form><button class="action-item-button"></form> (button_to). */

  .flex.flex-wrap:has(.action-item-button) {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    padding-right: 24px;
  }

  .flex.flex-wrap:has(.action-item-button)::-webkit-scrollbar {
    display: none;
  }

  .flex.flex-wrap:has(.action-item-button) > * {
    flex: 0 0 auto;
  }

  .action-item-button {
    white-space: nowrap;
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* ===== Mobile: tabla → cards (visits) ===== */

@media (max-width: 768px) {

  #index_table_visits {
    border: none;
    background: transparent;
    width: 100%;
  }

  #index_table_visits thead {
    display: none;
  }

  #index_table_visits tbody,
  #index_table_visits tbody tr {
    display: block;
    width: 100%;
  }

  #index_table_visits tbody tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "select  local      status"
      "compl   compl      compl"
      "auditor auditor    date"
      "obs     obs        obs"
      "actions actions    actions";
    column-gap: 12px;
    row-gap: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 14px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    align-items: start;
  }

  .dark #index_table_visits tbody tr {
    background: #1f2937;
    border-color: #374151;
  }

  /* Reset de cada celda: bloques sin padding ni borde de tabla. */
  #index_table_visits tbody td {
    display: block;
    padding: 0;
    border: none;
  }

  /* Posicionamiento por columna del DOM:
     1 = selectable (checkbox)
     2 = id (oculto en mobile)
     3 = local
     4 = cumplimiento
     5 = estado
     6 = auditor
     7 = fecha
     8 = observación (oculto en mobile)
     9 = acciones */
  #index_table_visits tbody td:nth-child(1) {
    grid-area: select;
    align-self: center;
  }

  #index_table_visits tbody td:nth-child(2) {
    display: none;
  }

  #index_table_visits tbody td:nth-child(3) {
    grid-area: local;
    align-self: center;
    min-width: 0; /* permite que el nombre haga ellipsis si es muy largo */
  }

  #index_table_visits tbody td:nth-child(4) {
    grid-area: compl;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 2px;
  }

  /* Quita el margin-bottom que tiene inline el % para que quede
     alineado con la línea extra (items / módulos) en flex. */
  #index_table_visits tbody td:nth-child(4) > div:first-child {
    margin-bottom: 0 !important;
  }

  #index_table_visits tbody td:nth-child(5) {
    grid-area: status;
    align-self: center;
    justify-self: end;
    text-align: right;
  }

  #index_table_visits tbody td:nth-child(6) {
    grid-area: auditor;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
  }

  #index_table_visits tbody td:nth-child(7) {
    grid-area: date;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
    justify-self: end;
    text-align: right;
  }

  /* Observación: visible inline (sin modal) sólo si tiene contenido.
     El botón edit + el width fijo del cell se neutralizan en mobile. */
  #index_table_visits tbody td:nth-child(8) {
    grid-area: obs;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
    font-size: 12px;
    color: #374151;
  }
  #index_table_visits tbody td:nth-child(8):has(.visit-obs-cell.empty) {
    display: none;
  }
  #index_table_visits tbody td:nth-child(8) .visit-obs-cell {
    width: auto;
    align-items: flex-start;
  }
  #index_table_visits tbody td:nth-child(8) .visit-obs-icon {
    display: inline-block;
    color: #f59e0b;
    font-size: 12px;
    margin-top: 2px;
    flex-shrink: 0;
  }
  .dark #index_table_visits tbody td:nth-child(8) .visit-obs-icon {
    color: #fbbf24;
  }
  #index_table_visits tbody td:nth-child(8) .visit-obs-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  #index_table_visits tbody td:nth-child(8) .edit-observation-btn {
    display: none;
  }

  #index_table_visits tbody td:nth-child(9) {
    grid-area: actions;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
  }

  .dark #index_table_visits tbody td:nth-child(4),
  .dark #index_table_visits tbody td:nth-child(6),
  .dark #index_table_visits tbody td:nth-child(7),
  .dark #index_table_visits tbody td:nth-child(8),
  .dark #index_table_visits tbody td:nth-child(9) {
    border-top-color: #374151;
  }

  /* Detalles secundarios de fecha (Revisión: Xmin, por user) que no
     aportan en mobile. */
  .visit-date-detail {
    display: none;
  }

  /* Oculta la barra de cumplimiento en mobile — la info del % y los
     items quedan en una sola línea, sin barra. */
  #index_table_visits tbody td:nth-child(4) > div[style*="height: 6px"] {
    display: none !important;
  }

  /* ===== Botones de acción thumb-friendly ===== */

  .visit-actions-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .visit-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    min-height: 34px;
  }

  .visit-action-btn--items {
    background: #ede9fe;
    color: #6d28d9;
  }
  .visit-action-btn--view {
    background: #f3f4f6;
    color: #374151;
  }
  .visit-action-btn--edit {
    background: #dbeafe;
    color: #1d4ed8;
  }

  .dark .visit-action-btn--items {
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
  }
  .dark .visit-action-btn--view {
    background: rgba(107, 114, 128, 0.25);
    color: #d1d5db;
  }
  .dark .visit-action-btn--edit {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
  }

  .visit-action-label {
    display: inline;
  }
}

/* ===== Mobile: tabla → cards (planogram_modules) ===== */

@media (max-width: 768px) {

  #index_table_planogram_modules {
    border: none;
    background: transparent;
    width: 100%;
  }

  #index_table_planogram_modules thead {
    display: none;
  }

  #index_table_planogram_modules tbody,
  #index_table_planogram_modules tbody tr {
    display: block;
    width: 100%;
  }

  #index_table_planogram_modules tbody tr {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    /* Layout default sin tracks_prices */
    grid-template-areas:
      "photo   category   modulo"
      "items   items      view";
    column-gap: 8px;
    row-gap: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 14px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    align-items: start;
  }

  /* Cuando el proyecto trackea precios, expandir el grid: precios bajo
     modulo, anomalías en la fila de acciones a la izquierda. */
  #index_table_planogram_modules tbody tr:has(td[data-column="precios"]) {
    grid-template-areas:
      "photo   category   modulo"
      "photo   category   precios"
      "anomal  items      view";
  }

  .dark #index_table_planogram_modules tbody tr {
    background: #1f2937;
    border-color: #374151;
  }

  #index_table_planogram_modules tbody td {
    display: block;
    padding: 0;
    border: none;
  }

  /* Selectors por data-column (AA v4 los agrega automáticamente). Más
     robusto que :nth-child contra columnas condicionales / reorder. */

  #index_table_planogram_modules tbody td[data-column="id"] {
    display: none;
  }

  #index_table_planogram_modules tbody td[data-column="category_name"] {
    grid-area: category;
    align-self: center;
    font-weight: 600;
    font-size: 13px;
    color: #111827;
  }
  .dark #index_table_planogram_modules tbody td[data-column="category_name"] {
    color: #f3f4f6;
  }

  #index_table_planogram_modules tbody td[data-column="modulo"] {
    grid-area: modulo;
    align-self: center;
    justify-self: end;
    text-align: right;
    font-size: 12px;
    color: #6b7280;
  }
  .dark #index_table_planogram_modules tbody td[data-column="modulo"] {
    color: #9ca3af;
  }

  #index_table_planogram_modules tbody td[data-column="modulo_photo"] {
    grid-area: photo;
    align-self: center;
  }

  #index_table_planogram_modules tbody td[data-column="modulo_photo"] img {
    max-width: 80px;
    max-height: 80px;
    height: auto;
    width: auto;
    border-radius: 8px;
    object-fit: cover;
    display: block;
  }

  #index_table_planogram_modules tbody td[data-column="precios"] {
    grid-area: precios;
    align-self: center;
    justify-self: end;
    text-align: right;
    font-size: 12px;
  }

  #index_table_planogram_modules tbody td[data-column="anomalias"] {
    grid-area: anomal;
    align-self: center;
    font-size: 12px;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
  }
  .dark #index_table_planogram_modules tbody td[data-column="anomalias"] {
    border-top-color: #374151;
  }

  #index_table_planogram_modules tbody td[data-column="planogram_items"] {
    grid-area: items;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
  }

  /* Última columna sin data-column (column '') → "Vista Módulo". */
  #index_table_planogram_modules tbody td:last-child {
    grid-area: view;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
  }

  .dark #index_table_planogram_modules tbody td[data-column="planogram_items"],
  .dark #index_table_planogram_modules tbody td:last-child {
    border-top-color: #374151;
  }

  /* Botones de acción full-width dentro de su celda en mobile. */
  #index_table_planogram_modules tbody td[data-column="planogram_items"] .action-item-button,
  #index_table_planogram_modules tbody td:last-child .action-item-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 36px;
    border-radius: 6px;
  }
}


/* ===== Indicador de promoción inline (círculo verde con P) =====
   Se renderiza al lado del precio en planogram_items para indicar
   que el item está en promoción sin ocupar espacio horizontal. */

.pi-promo-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: #16a34a;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  margin-left: 4px;
  vertical-align: middle;
  cursor: help;
}

.dark .pi-promo-circle {
  background: #22c55e;
}

/* ===== Brand badges (Marca / Proveedor / Procedencia) =====
   Estilo común desktop+mobile. Se renderizan dentro de una sola
   celda 'Marcas' generada por planogram_items.rb cuando el
   proyecto tiene facing_with_custom_brands. */

.pi-brand-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  margin-right: 4px;
}

.pi-brand-badge--marca { background: #e0e7ff; color: #3730a3; }
.pi-brand-badge--prov  { background: #fef3c7; color: #92400e; }
.pi-brand-badge--proc  { background: #ccfbf1; color: #115e59; }

.dark .pi-brand-badge--marca { background: rgba(99, 102, 241, 0.2);  color: #c7d2fe; }
.dark .pi-brand-badge--prov  { background: rgba(245, 158, 11, 0.2); color: #fde68a; }
.dark .pi-brand-badge--proc  { background: rgba(20, 184, 166, 0.2); color: #99f6e4; }

/* ===== Mobile: tabla → cards (planogram_items) ===== */

@media (max-width: 768px) {

  #index_table_planogram_items {
    border: none;
    background: transparent;
    width: 100%;
  }

  #index_table_planogram_items thead {
    display: none;
  }

  #index_table_planogram_items tbody,
  #index_table_planogram_items tbody tr {
    display: block;
    width: 100%;
  }

  /* Bandeja headers se mantienen como divisores (el JS de toggle
     sigue funcionando porque la clase .bandeja-group-header no la toco). */
  #index_table_planogram_items tbody tr.bandeja-group-header {
    margin: 8px 0;
  }

  #index_table_planogram_items tbody tr.bandeja-group-header > td {
    display: block;
    padding: 0;
    border: none;
  }

  /* Cards: solo filas no-header. */
  #index_table_planogram_items tbody tr:not(.bandeja-group-header) {
    display: grid;
    grid-template-columns: auto auto 1fr 1fr 1fr;
    grid-template-areas:
      "pos     foto    desc    desc    desc"
      "pos     foto    ean     caras   precio"
      "actions actions actions actions actions";
    column-gap: 8px;
    row-gap: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 8px;
    padding: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    align-items: center;
  }

  .dark #index_table_planogram_items tbody tr:not(.bandeja-group-header) {
    background: #1f2937;
    border-color: #374151;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td {
    display: block;
    padding: 0;
    border: none;
  }

  /* DOM order:
     1 pos | 2 foto | 3 ean | 4 desc | 5 caras | 6 precio
     [opcional cuando facing_custom: 7 marcas]
     último = actions
     (Tags ya no es columna — pesable/laminado van inline en desc,
      promo va inline en precio.) */

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(1) {
    grid-area: pos;
    align-self: center;
    justify-self: center;
    min-width: 24px;
    font-size: 14px;
    font-weight: 700;
    color: #6b7280;
    text-align: center;
  }
  .dark #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(1) {
    color: #9ca3af;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(2) {
    grid-area: foto;
    align-self: center;
  }

  /* Foto agrandada en mobile (28px → 40px). El override del style
     inline va con !important para ganar al style="width:28px;..." */
  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(2) img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 6px;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(2) > i.fa-image {
    font-size: 28px !important;
    opacity: 0.25;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(4) {
    grid-area: desc;
    font-size: 13px;
    line-height: 1.3;
    align-self: center;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(3) {
    grid-area: ean;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    overflow: visible;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(3)::before {
    content: "EAN ";
    font-size: 11px;
    color: #9ca3af;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(5) {
    grid-area: caras;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(5)::before {
    content: "Caras ";
    font-size: 11px;
    color: #9ca3af;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(6) {
    grid-area: precio;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    text-align: right;
    white-space: nowrap;
    overflow: visible;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(6)::before {
    content: "Precio ";
    font-size: 11px;
    color: #9ca3af;
  }

  /* Acciones: siempre la última columna. */
  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:last-child {
    grid-area: actions;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
  }

  .dark #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:last-child {
    border-top-color: #374151;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:last-child .data-table-resource-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:last-child .data-table-resource-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    background: #f3f4f6;
    color: #374151;
  }

  .dark #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:last-child .data-table-resource-actions a {
    background: rgba(107, 114, 128, 0.25);
    color: #d1d5db;
  }

  /* Eliminar oculto en card mobile — acción destructiva accesible
     desde el show del item. */
  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:last-child .data-table-resource-actions a[data-method="delete"] {
    display: none;
  }

  /* ===== Caso facing_with_custom_brands: 8 columnas =====
     La columna 'Marcas' (única, generada por planogram_items.rb) se ubica
     entre Precio y Acciones. Los badges van inline dentro de esa celda. */

  #index_table_planogram_items tbody tr:not(.bandeja-group-header):has(td:nth-child(8)) {
    grid-template-areas:
      "pos     foto    desc        desc        desc"
      "pos     foto    ean         caras       precio"
      "marcas  marcas  marcas      marcas      marcas"
      "actions actions actions     actions     actions";
  }

  /* Celda 'Marcas' como flex container — los badges fluyen pegados con
     wrap natural si no caben en una línea. */
  #index_table_planogram_items tbody tr:not(.bandeja-group-header):has(td:nth-child(8)) > td:nth-child(7) {
    grid-area: marcas;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px dashed #f3f4f6;
  }

  .dark #index_table_planogram_items tbody tr:not(.bandeja-group-header):has(td:nth-child(8)) > td:nth-child(7) {
    border-top-color: #374151;
  }

  /* En mobile el margin-right del badge sobra (ya hay gap del flex). */
  #index_table_planogram_items tbody tr:not(.bandeja-group-header):has(td:nth-child(8)) > td:nth-child(7) .pi-brand-badge {
    margin-right: 0;
  }
}

/* ===== Mobile: tabla → cards (visit_items / nsg) ===== */

@media (max-width: 768px) {

  #index_table_visit_items:not(:has(.vi-price-cell)) {
    border: none;
    background: transparent;
    width: 100%;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) thead {
    display: none;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody tr {
    display: block;
    width: 100%;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody tr {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      "select foto product score"
      "select foto product score"
      "presencia presencia presencia presencia"
      "fleje    fleje    fleje    fleje"
      "promo    promo    promo    promo"
      "descargos descargos descargos descargos"
      "quest    quest    quest    quest"
      "actions  actions  actions  actions";
    column-gap: 8px;
    row-gap: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 14px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    align-items: start;
  }

  .dark #index_table_visit_items:not(:has(.vi-price-cell)) tbody tr {
    background: #1f2937;
    border-color: #374151;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td {
    display: block;
    padding: 0;
    border: none;
  }

  /* DOM: 1=select | 2=id (oculto) | 3=foto | 4=product | 5=pres | 6=fleje
     | 7=promo | 8=score | 9=descargos | 10=quest | 11=actions */

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(1) {
    grid-area: select;
    align-self: center;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(2) {
    display: none;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(3) {
    grid-area: foto;
    align-self: center;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(3) .vi-nsg-ref-img {
    width: 56px;
    height: 56px;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(4) {
    grid-area: product;
    align-self: center;
    min-width: 0;
  }

  /* Score / Descargos / Quest / Actions: nth-last-child para que las
     posiciones se mantengan estables aunque se inserte la columna
     opcional 'Visibilidad' (cuando facing_as_separate_section). */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-last-child(4) {
    grid-area: score;
    align-self: center;
    justify-self: end;
    text-align: right;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-last-child(4) .vi-nsg-score {
    font-size: 18px;
  }

  /* Toggle rows estilo iOS list-tile: [imagen] [label flex:1] [switch right] */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(5) { grid-area: presencia; }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(6) { grid-area: fleje; }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(7) { grid-area: promo; }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(5),
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(6),
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(7) {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #f3f4f6;
  }

  /* El wrapper .vi-nsg-toggle-cell (necesario para desktop) se "borra"
     del layout en mobile con display: contents — sus hijos pasan a ser
     flex items directos del td, así el order y flex:1 funcionan. */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(5) > .vi-nsg-toggle-cell,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(6) > .vi-nsg-toggle-cell,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(7) > .vi-nsg-toggle-cell {
    display: contents;
  }

  .dark #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(5),
  .dark #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(6),
  .dark #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(7) {
    border-top-color: #374151;
  }

  /* Reordenamos children via flex order:
     0 = imagen | 1 = label (::before) | 3 = switch (a la derecha) */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(5)::before { content: "Presencia"; }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(6)::before { content: "Fleje"; }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(7)::before { content: "Promo"; }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(5)::before,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(6)::before,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(7)::before {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
  }

  /* Sin '>' porque display:contents no cambia el DOM — el toggle y la
     img siguen siendo descendientes (no hijos directos) del td. */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(5) .vi-card__toggle-img,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(6) .vi-card__toggle-img,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(7) .vi-card__toggle-img {
    order: 0;
    flex-shrink: 0;
    padding: 0;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(5) .vi-card__toggle-img img,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(6) .vi-card__toggle-img img,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(7) .vi-card__toggle-img img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(5) .vi-card__toggle,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(6) .vi-card__toggle,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(7) .vi-card__toggle {
    order: 3;
    flex-shrink: 0;
  }

  /* Switch más grande estilo iOS (40x22 vs 26x15 desktop). */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody .vi-card__switch {
    width: 40px;
    height: 22px;
  }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody .vi-card__switch .toggle-switch-thumb {
    width: 18px;
    height: 18px;
    top: 2px;
    left: 2px;
  }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody .vi-card__toggle[data-toggle-value="true"] .toggle-switch-thumb {
    transform: translateX(18px);
  }

  /* Esconder fila promo cuando el item no tiene ask_promo (cell vacío). */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(7):not(:has(.vi-card__toggle)) {
    display: none;
  }

  /* Descargos / Questions / Actions: nth-last-child para estabilidad. */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-last-child(3) {
    grid-area: descargos;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
  }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-last-child(2) {
    grid-area: quest;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
  }
  .dark #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-last-child(3),
  .dark #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-last-child(2) {
    border-top-color: #374151;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-last-child(3):empty,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-last-child(2):empty {
    display: none;
  }

  /* Questions: prefijar "Questions:" */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-last-child(2):not(:empty) {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-last-child(2):not(:empty)::before {
    content: "Questions";
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
  }

  /* Acciones: 2 botones thumb-friendly. */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:last-child {
    grid-area: actions;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
  }
  .dark #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:last-child {
    border-top-color: #374151;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:last-child .vi-nsg-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:last-child .vi-nsg-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    min-height: 36px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:last-child .vi-nsg-action--view {
    background: #f3f4f6;
    color: #374151;
  }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:last-child .vi-nsg-action--edit {
    background: #dbeafe;
    color: #1d4ed8;
  }
  .dark #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:last-child .vi-nsg-action--view {
    background: rgba(107, 114, 128, 0.25);
    color: #d1d5db;
  }
  .dark #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:last-child .vi-nsg-action--edit {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:last-child .vi-nsg-action-label {
    display: inline;
  }

  /* ===== Variante con Visibilidad (facing_as_separate_section) =====
     Cuando la tabla tiene 12 cols (visibilidad agregada antes de cumpl),
     reorganiza el grid agregando la fila de visibilidad. */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody tr:has(td:nth-child(12)) {
    grid-template-areas:
      "select foto product score"
      "select foto product score"
      "presencia presencia presencia presencia"
      "fleje    fleje    fleje    fleje"
      "promo    promo    promo    promo"
      "visibilidad visibilidad visibilidad visibilidad"
      "descargos descargos descargos descargos"
      "quest    quest    quest    quest"
      "actions  actions  actions  actions";
  }

  /* Visibilidad: 8va columna cuando la tabla tiene 12 (facing case).
     Mismo styling que las otras toggle rows. */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody tr:has(td:nth-child(12)) > td:nth-child(8) {
    grid-area: visibilidad;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #f3f4f6;
  }
  .dark #index_table_visit_items:not(:has(.vi-price-cell)) tbody tr:has(td:nth-child(12)) > td:nth-child(8) {
    border-top-color: #374151;
  }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody tr:has(td:nth-child(12)) > td:nth-child(8) > .vi-nsg-toggle-cell {
    display: contents;
  }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody tr:has(td:nth-child(12)) > td:nth-child(8)::before {
    content: "Visibilidad";
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
  }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody tr:has(td:nth-child(12)) > td:nth-child(8) .vi-card__toggle {
    order: 3;
    flex-shrink: 0;
  }
}

/* ===== Mobile: tabla → cards (visit_items / price) =====
   Detecta tabla price via :has(.vi-price-cell). Las reglas nsg también
   matchearían el mismo #index_table_visit_items pero usan nth-child
   sobre posiciones distintas; las reglas price acá usan selectores de
   clase para que sean estables sin importar columnas opcionales y
   tomen precedencia sobre las nsg cuando aplica. */

@media (max-width: 768px) {

  #index_table_visit_items:has(.vi-price-cell) {
    border: none;
    background: transparent;
    width: 100%;
  }

  #index_table_visit_items:has(.vi-price-cell) thead {
    display: none;
  }

  #index_table_visit_items:has(.vi-price-cell) tbody {
    display: block;
    width: 100%;
  }

  #index_table_visit_items:has(.vi-price-cell) tbody tr {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      "select foto product ocr"
      "select foto product ocr"
      "marcas marcas marcas marcas"
      "precio precio precio precio"
      "promo  promo  promo  promo"
      "mec    mec    mec    mec"
      "quest  quest  quest  quest"
      "actions actions actions actions";
    column-gap: 8px;
    row-gap: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 14px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    align-items: start;
  }

  .dark #index_table_visit_items:has(.vi-price-cell) tbody tr {
    background: #1f2937;
    border-color: #374151;
  }

  #index_table_visit_items:has(.vi-price-cell) tbody td {
    display: block;
    padding: 0;
    border: none;
  }

  /* Map cells to grid areas via classes (estables ante columnas opcionales). */
  #index_table_visit_items:has(.vi-price-cell) tbody td:nth-child(1) {
    grid-area: select;
    align-self: center;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td:nth-child(2) {
    display: none; /* ID hidden */
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-ref {
    grid-area: foto;
    align-self: center;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-ref .vi-nsg-ref-img {
    width: 56px;
    height: 56px;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-product {
    grid-area: product;
    align-self: center;
    min-width: 0;
  }

  /* Marcas (chips coloreados) */
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-brands {
    grid-area: marcas;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
  }
  .dark #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-brands {
    border-top-color: #374151;
  }
  /* Cuando no hay marcas el cell queda vacío — ocultar la fila. */
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-brands:empty {
    display: none;
  }

  /* Precio + Promo lado a lado, label arriba pequeño + valor grande. */
  /* Precio / Promo iOS-style: cada uno fila full-width, label izq, valor der. */
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-precio,
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-promo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid #f3f4f6;
  }
  .dark #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-precio,
  .dark #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-promo {
    border-top-color: #374151;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-precio { grid-area: precio; }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-promo { grid-area: promo; }

  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-precio::before,
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-promo::before {
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-precio::before { content: "Precio"; }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-promo::before { content: "Promo"; }

  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-precio > .vi-price-cell,
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-promo > .vi-price-cell {
    flex-shrink: 0;
    text-align: right;
  }
  /* Mobile: ref inline al lado del valor (override del stacked desktop). */
  #index_table_visit_items:has(.vi-price-cell) tbody .vi-price-main {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody .vi-price-value {
    font-size: 15px;
  }

  /* OCR en el header (top-right) — solo el icono, sin label, sin border. */
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-ocr {
    grid-area: ocr;
    align-self: center;
    justify-self: end;
    display: flex;
    align-items: center;
  }
  /* Icono más chico para que no domine el header. */
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-ocr .vi-price-ocr {
    font-size: 16px;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-mecanica {
    grid-area: mec;
    padding: 8px 0;
    border-top: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-mecanica:not(:empty)::before {
    content: "Mecánica";
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-mecanica:empty {
    display: none;
  }
  .dark #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-ocr,
  .dark #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-mecanica {
    border-top-color: #374151;
  }

  /* Quest. iOS-style: label izq, badge der. */
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-questions {
    grid-area: quest;
    padding: 8px 0;
    border-top: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-questions:not(:empty)::before {
    content: "Questions";
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-questions:empty {
    display: none;
  }
  .dark #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-questions {
    border-top-color: #374151;
  }

  /* Acciones — botones thumb-friendly (mismo estilo que nsg). */
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-actions {
    grid-area: actions;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
  }
  .dark #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-actions {
    border-top-color: #374151;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-actions .vi-nsg-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-actions .vi-nsg-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    min-height: 36px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-actions .vi-nsg-action--view {
    background: #f3f4f6;
    color: #374151;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-actions .vi-nsg-action--edit {
    background: #dbeafe;
    color: #1d4ed8;
  }
  .dark #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-actions .vi-nsg-action--view {
    background: rgba(107, 114, 128, 0.25);
    color: #d1d5db;
  }
  .dark #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-actions .vi-nsg-action--edit {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-actions .vi-nsg-action-label {
    display: inline;
  }
}

/* ===== Buscador de visita en el header — modo mobile expandido =====
   En <sm el form arranca con `hidden`. Cuando el usuario toca el botón
   de lupa, el JS le quita `hidden` y le agrega `is-mobile-open`, y al
   título le agrega `is-mobile-hidden`. */
@media (max-width: 639px) {
  #header-visit-search-form.is-mobile-open {
    display: flex;
    flex: 1 1 0%;
    min-width: 0;
  }
  #header-title-wrap.is-mobile-hidden {
    display: none;
  }
}

/* ===== /admin/app_links: índice responsive en mobile =====
   La tabla tiene 8 columnas (audience, platform, channel, label, url,
   enabled, updated_at, acciones). En mobile (≤768px) dejamos sólo 4:
   PLATFORM (con icono), LABEL, URL (botones Copiar/Share), ACCIONES.
   Ocultamos audience(1) — redundante con LABEL —, channel(3),
   enabled(6), updated_at(7). Identificamos la tabla con
   :has(.app-link-copy-btn) — sin necesidad de body class. */
@media (max-width: 768px) {
  table.data-table:has(.app-link-copy-btn) thead th:nth-child(1),
  table.data-table:has(.app-link-copy-btn) tbody td:nth-child(1),
  table.data-table:has(.app-link-copy-btn) thead th:nth-child(3),
  table.data-table:has(.app-link-copy-btn) tbody td:nth-child(3),
  table.data-table:has(.app-link-copy-btn) thead th:nth-child(6),
  table.data-table:has(.app-link-copy-btn) tbody td:nth-child(6),
  table.data-table:has(.app-link-copy-btn) thead th:nth-child(7),
  table.data-table:has(.app-link-copy-btn) tbody td:nth-child(7) {
    display: none;
  }

  /* Padding compacto + tipografía más chica. */
  table.data-table:has(.app-link-copy-btn) th,
  table.data-table:has(.app-link-copy-btn) td {
    padding: 6px 8px;
    font-size: 12px;
  }

  /* Botones de la columna URL (col 5) apilados con poco margen. */
  table.data-table:has(.app-link-copy-btn) tbody td:nth-child(5) {
    white-space: nowrap;
  }
  table.data-table:has(.app-link-copy-btn) tbody td:nth-child(5) .app-link-share-btn {
    margin-left: 0;
    margin-top: 2px;
  }

  /* Acciones (Ver/Editar/Eliminar) apiladas, sin separador "·". */
  table.data-table:has(.app-link-copy-btn) tbody td:last-child {
    white-space: nowrap;
  }
  table.data-table:has(.app-link-copy-btn) tbody td:last-child a {
    display: block;
    line-height: 1.6;
  }
  table.data-table:has(.app-link-copy-btn) .app-link-actions__sep {
    display: none;
  }

  /* LABEL (col 4): limitar ancho para que no consuma demasiado. */
  table.data-table:has(.app-link-copy-btn) tbody td:nth-child(4) {
    max-width: 120px;
    word-break: break-word;
  }

  /* Acciones: en mobile mostrar sólo iconos (no labels) para que entren. */
  table.data-table:has(.app-link-copy-btn) .app-link-action__label {
    display: none;
  }
  table.data-table:has(.app-link-copy-btn) .app-link-action__icon {
    font-size: 14px;
  }
}

/* En desktop mostrar el label y ocultar el icono (default).
   Specificity alta para battir las reglas de FontAwesome / ActiveAdmin. */
@media (min-width: 769px) {
  table.data-table .app-link-action__icon {
    display: none !important;
  }
}
@tailwind base;
@tailwind components;
@tailwind utilities;


/*@layer components {*/
.color-header-app{
  @apply bg-gray-900 pb-24;
}

.link-menu{
  @apply text-gray-600 rounded-md bg-white bg-opacity-0 px-3 py-2 text-sm font-medium hover:bg-opacity-10 hover:text-white;
}

.boton{
  @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-teal-500 hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500;
}

[aria-current]:not([aria-current="false"]) {
  @apply text-white bg-gray-700;
}

.pagy-nav {
  @apply isolate inline-flex -space-x-px rounded-md shadow-sm;
  @apply text-gray-700;
}

.pagy-nav.pagination {
  @apply isolate inline-flex -space-x-px rounded-md shadow-sm;
}

.page.next a {
  @apply relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.page.prev a {
  @apply relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.page.next.disabled {
  @apply relative inline-flex items-center rounded-r-md border border-gray-300 bg-slate-100 px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.page.prev.disabled {
  @apply relative inline-flex items-center rounded-l-md border border-gray-300 bg-slate-100 px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.page a, .page.gap {
  @apply bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center border px-4 py-2 text-sm font-medium focus:z-20;
}

.page.active {
  @apply z-10 border-indigo-500 bg-indigo-50 text-indigo-600 relative inline-flex items-center border px-4 py-2 text-sm font-medium focus:z-20;
}

.pagy-info {
  @apply text-sm text-gray-700;
}

/* Client Portal - Japanese-Swiss Design Tokens */
:root {
  --jp-bg: #F7F6F3;
  --jp-text: #2D2D2D;
  --jp-muted: #6B7280;
  --jp-border: #E8E6E1;
  --jp-navy: #3D5A80;
  --jp-danger: #C53D43;
  --jp-success: #10B981;
  --jp-active-bg: #EEF2F7;
  --jp-radius: 2px;
}

/* Typography */
.font-heading {
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
}

.font-body {
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
}

.font-mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* Buttons */
.btn-primary {
  font-family: 'Sora', sans-serif;
  @apply inline-flex items-center px-4 py-2 text-xs font-medium text-white transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2;
  background: var(--jp-text);
  border-radius: var(--jp-radius);
  focus-ring-color: var(--jp-navy);
}
.btn-primary:hover { opacity: 0.85; }

.btn-secondary {
  font-family: 'Sora', sans-serif;
  @apply inline-flex items-center px-4 py-2 text-xs font-medium transition-all duration-150;
  color: var(--jp-text);
  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius);
  background: transparent;
}
.btn-secondary:hover { background: var(--jp-active-bg); }

.btn-export {
  font-family: 'Sora', sans-serif;
  @apply inline-flex items-center gap-x-1.5 px-3 py-1.5 text-xs font-medium transition-all duration-150;
  color: var(--jp-text);
  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius);
  background: transparent;
}
.btn-export:hover { background: var(--jp-active-bg); }

/* Form Elements */
.filter-select {
  font-family: 'Sora', sans-serif;
  @apply block w-full py-2 pl-3 pr-10 text-sm transition-shadow duration-150;
  color: var(--jp-text);
  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius);
  background: white;
}
.filter-select:focus { border-color: var(--jp-navy); outline: none; box-shadow: 0 0 0 1px var(--jp-navy); }

.filter-input {
  font-family: 'Sora', sans-serif;
  @apply block w-full py-2 pl-3 text-sm transition-shadow duration-150;
  color: var(--jp-text);
  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius);
  background: white;
}
.filter-input:focus { border-color: var(--jp-navy); outline: none; box-shadow: 0 0 0 1px var(--jp-navy); }

/* Cards - minimal with border, no shadow, transparent bg */
.card {
  @apply overflow-hidden;
  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius);
}

.card-header {
  @apply px-5 py-3;
  border-bottom: 1px solid var(--jp-border);
}

.card-body {
  @apply px-5 py-4;
}

/* KPI Card - clean border style, transparent bg */
.kpi-card {
  @apply overflow-hidden transition-all duration-200;
  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius);
}
.kpi-card:hover { border-color: var(--jp-navy); }

/* Utilities */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Gauge animation */
@keyframes gauge-fill {
  from { stroke-dasharray: 0 326.7; }
}
.gauge-animate {
  animation: gauge-fill 1s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .gauge-animate { animation: none; }
}

/* ==========================================================
   Gondola View V2 — Performance-optimized stylesheet
   BEM naming: .gv2-*
   No gradients on mass elements, no box-shadow per product,
   no transitions on table cells.
   ========================================================== */

/* Container */
.gv2-container {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
  margin: 10px auto 0;
}

/* Header */
.gv2-header {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #dee2e6;
}

.gv2-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.5em;
  font-weight: 600;
}

.gv2-header i {
  color: #6c757d;
  margin-right: 10px;
}

/* Stats cards */
.gv2-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}

.gv2-stat {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 15px 20px;
  min-width: 140px;
  flex: 0 1 auto;
}

.gv2-stat__label {
  font-size: 0.75em;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
  font-weight: 600;
}

.gv2-stat__value {
  font-size: 1.8em;
  font-weight: bold;
  color: #212529;
  line-height: 1;
  margin: 5px 0;
}

.gv2-stat__sub {
  font-size: 0.85em;
  color: #6c757d;
  margin-top: 2px;
}

/* Stat card variants */
.gv2-stat--alert .gv2-stat__value { color: #dc3545; }
.gv2-stat--alert-has { background: #fff5f5; border-color: #feb2b2; }
.gv2-stat--alert-ok  { background: #f0fdf4; border-color: #86efac; }
.gv2-stat--alert-ok .gv2-stat__value { color: #16a34a; }
.gv2-stat--success { background: #f0fdf4; border-color: #86efac; }
.gv2-stat--success .gv2-stat__value { color: #16a34a; }
.gv2-stat--warning { background: #fffbeb; border-color: #fde68a; }
.gv2-stat--warning .gv2-stat__value { color: #f59e0b; }
.gv2-stat--info { background: #eff6ff; border-color: #93c5fd; }
.gv2-stat--info .gv2-stat__value { color: #2563eb; }

/* Legend */
.gv2-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
  padding: 15px;
  background: white;
  border-radius: 8px;
}

.gv2-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gv2-legend__color {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.gv2-legend__text {
  font-size: 0.85em;
  color: #495057;
}

/* No-master section */
.gv2-nomaster {
  background: white;
  border: 2px solid #dc3545;
  border-radius: 8px;
  margin: 20px 0;
  overflow: hidden;
}

.gv2-nomaster__header {
  background: #dc3545;
  color: white;
  padding: 15px 20px;
  cursor: pointer;
  user-select: none;
}

.gv2-nomaster__header:hover {
  background: #c82333;
}

.gv2-nomaster__header h3 {
  margin: 0;
  font-size: 1.2em;
  font-weight: 600;
  color: white !important;
}

.gv2-nomaster__body {
  padding: 20px;
  background: #fff5f5;
  max-height: 400px;
  overflow-y: auto;
}

.gv2-nomaster__body.collapsed {
  display: none;
}

.gv2-nomaster__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
}

.gv2-nomaster__card {
  background: white;
  border: 1px solid #feb2b2;
  border-radius: 6px;
  padding: 12px;
}

.gv2-nomaster__card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e9ecef;
}

.gv2-nomaster__badge {
  background: #dc3545;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  font-weight: bold;
}

.gv2-nomaster__module-info {
  font-size: 0.85em;
  color: #6c757d;
  font-weight: 600;
}

.gv2-nomaster__ean {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 4px;
}

.gv2-nomaster__ean label {
  font-weight: 600;
  color: #495057;
  font-size: 0.9em;
}

.gv2-nomaster__ean-value {
  font-family: monospace;
  font-size: 1.1em;
  color: #212529;
  font-weight: bold;
}

.gv2-nomaster__info-row {
  font-size: 0.85em;
  color: #6c757d;
  margin: 4px 0;
}

.gv2-nomaster__info-row i {
  width: 16px;
  margin-right: 5px;
}

.gv2-nomaster__actions {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}

.gv2-nomaster__btn {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #dee2e6;
  background: white;
  color: #495057;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8em;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.gv2-nomaster__btn:hover {
  transform: translateY(-1px);
}

.gv2-nomaster__btn--locate:hover { background: #17a2b8; color: white; border-color: #17a2b8; }
.gv2-nomaster__btn--edit:hover   { background: #ffc107; color: #212529; border-color: #ffc107; }
.gv2-nomaster__btn--create:hover { background: #28a745; color: white; border-color: #28a745; }

/* Filter buttons */
.gv2-filters {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}

.gv2-filters__btn {
  padding: 10px 20px;
  background: white;
  border: 2px solid #dee2e6;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gv2-filters__btn:hover {
  background: #f8f9fa;
}

.gv2-filters__btn--active {
  background: #dc3545;
  color: white;
  border-color: #dc3545;
}

/* Category header */
.gv2-category {
  background: #495057;
  color: white;
  padding: 15px;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  margin: 30px 0 10px 0;
  border-radius: 8px 8px 0 0;
}

/* Gondola shelf / table */
.gv2-shelf {
  background: white;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  overflow-x: auto;
  margin: 0 0 20px 0;
}

.gv2-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.gv2-table th {
  background: #343a40;
  color: white;
  padding: 12px 8px;
  text-align: center;
  font-weight: 600;
  font-size: 0.9em;
  border-right: 1px solid #6c757d;
  position: sticky;
  top: 0;
  z-index: 10;
}

.gv2-table th:last-child {
  border-right: none;
}

.gv2-table .gv2-th--module {
  background: #0056b3;
  color: white;
  font-size: 1.1em;
  letter-spacing: 0.5px;
  border-left: 3px solid #343a40 !important;
  border-right: 3px solid #343a40 !important;
}

.gv2-table .gv2-th--module:first-of-type {
  border-left: none !important;
}

.gv2-table .gv2-td--bandeja {
  background: #138496 !important;
  color: white !important;
  font-weight: 600;
  padding: 10px;
  text-align: center;
  width: 80px;
  font-size: 0.85em;
  border-right: 2px solid #dee2e6;
}

.gv2-table td {
  border: 1px solid #e9ecef;
  padding: 4px;
  vertical-align: top;
  min-width: 120px;
  background: white;
}

.gv2-table td.gv2-td--separator {
  border-left: 4px solid #343a40 !important;
}

.gv2-table tr:nth-child(even) td:not(.gv2-td--bandeja) {
  background: #f8f9fa;
}

/* Module header links */
.gv2-module-links {
  display: inline-flex;
  gap: 8px;
  margin-left: 8px;
}

.gv2-module-links a {
  text-decoration: none;
}

.gv2-module-links a i {
  font-size: 0.85em;
  color: white;
  opacity: 0.9;
  cursor: pointer;
}

.gv2-module-links a:hover i {
  opacity: 1;
}

/* Product slot */
.gv2-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  min-height: 80px;
  position: relative;
}

/* Empty slot */
.gv2-slot--empty {
  border: 2px dashed #dee2e6;
  background: #f8f9fa;
  min-height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-size: 0.8em;
}

/* Product item — FLAT colors, no gradients, no individual box-shadow */
.gv2-product {
  background: #95a5a6;
  color: white;
  padding: 10px 8px;
  border-radius: 8px;
  text-align: center;
  width: 100%;
  cursor: pointer;
  position: relative;
  overflow: visible;
}

.gv2-product:hover {
  filter: brightness(1.1);
}

.gv2-product--main-provider {
  background: #3a7bd5;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.gv2-product--promo {
  background: #e67e22;
  color: #fff;
}

.gv2-product--laminado {
  background: #1abc9c;
}

.gv2-product--no-master {
  background: #dc3545;
  border: 2px dashed #ffc107;
}

/* Product sub-elements */
.gv2-product__no-master-tag {
  position: absolute;
  top: 2px;
  left: 2px;
  background: #ffc107;
  color: #212529;
  font-size: 0.6em;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: bold;
}

.gv2-product__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  background-color: white;
  border: 2px solid rgba(255,255,255,0.9);
  cursor: zoom-in;
  z-index: 3;
}

.gv2-product__pos {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  font-size: 0.6em;
  padding: 1px 4px;
  border-radius: 3px;
}

.gv2-product__ean {
  font-size: 0.75em;
  font-weight: bold;
  margin-bottom: 4px;
  word-break: break-all;
}

.gv2-product__caras {
  background: rgba(255, 255, 255, 0.3);
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 0.7em;
  margin-top: 4px;
  display: inline-block;
}

.gv2-product__price {
  font-size: 0.65em;
  margin-top: 2px;
  opacity: 0.9;
}

.gv2-product__promo-tag {
  font-size: 0.6em;
  margin-top: 2px;
}

/* Tooltip — single global element, transitions allowed here */
.gv2-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.95);
  color: white;
  border-radius: 8px;
  font-size: 0.85em;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  min-width: 280px;
  max-width: 380px;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  overflow: hidden;
}

.gv2-tooltip--visible {
  opacity: 1;
  visibility: visible;
}

.gv2-tooltip__image {
  width: 100%;
  height: 180px;
  object-fit: contain;
  background: #f8f9fa;
  border-radius: 8px 8px 0 0;
  display: block;
  border-bottom: 1px solid #e9ecef;
}

.gv2-tooltip__info {
  font-size: 12px;
  line-height: 1.5;
  color: ghostwhite;
  text-align: left;
  padding: 10px;
}

.gv2-tooltip__info strong {
  color: white;
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 5px;
}

.gv2-tooltip__info span {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.gv2-tooltip__info i {
  width: 18px;
  color: whitesmoke;
  margin-right: 6px;
  font-size: 11px;
}

/* Photo modal */
.gv2-photo-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.gv2-photo-modal__img {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
}

.gv2-photo-modal__caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  font-size: 18px;
}

.gv2-photo-modal__close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.gv2-photo-modal__close:hover {
  color: #ffc107;
}

/* Edit item modal — transitions OK for single modal */
.gv2-edit-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
}

.gv2-edit-modal__content {
  background-color: #fefefe;
  margin: 2% auto;
  padding: 0;
  border: 1px solid #888;
  width: 95%;
  max-width: 1400px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  position: relative;
  z-index: 1001;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
}

.gv2-edit-modal__header {
  padding: 20px 25px;
  background: #5a67d8;
  color: white;
  border-radius: 10px 10px 0 0;
  position: relative;
}

.gv2-edit-modal__header h2 {
  margin: 0;
  font-size: 1.5em;
  color: white;
}

.gv2-edit-modal__close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  line-height: 20px;
}

.gv2-edit-modal__close:hover {
  color: #ffc107;
}

.gv2-edit-modal__body {
  padding: 20px;
  display: flex;
  gap: 30px;
  overflow-y: auto;
  flex: 1;
  position: relative;
}

.gv2-edit-modal__form-section {
  flex: 1;
  position: relative;
  z-index: 1;
  min-width: 400px;
}

.gv2-edit-modal__image-section {
  flex: 0 0 45%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gv2-edit-modal__image-section img {
  max-width: 100%;
  max-height: 500px;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  cursor: zoom-in;
}

.gv2-edit-modal__footer {
  padding: 15px 20px;
  background: #f8f9fa;
  border-top: 1px solid #dee2e6;
  border-radius: 0 0 10px 10px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Form styles in modal */
.gv2-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.gv2-form__section-title {
  grid-column: span 2;
  font-size: 0.95em;
  font-weight: 600;
  color: #495057;
  padding-bottom: 8px;
  border-bottom: 2px solid #e9ecef;
  margin-top: 15px;
  margin-bottom: 5px;
}

.gv2-form__section-title:first-child {
  margin-top: 0;
}

.gv2-form__section-title i {
  margin-right: 8px;
  color: #5a67d8;
}

.gv2-form__group {
  display: flex;
  flex-direction: column;
}

.gv2-form__group--full {
  grid-column: span 2;
}

.gv2-form__group label {
  font-weight: 600;
  margin-bottom: 5px;
  color: #495057;
  font-size: 0.9em;
}

.gv2-form__group input,
.gv2-form__group select {
  padding: 10px 12px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 1em;
  background-color: white;
}

.gv2-form__group input:focus,
.gv2-form__group select:focus {
  outline: none;
  border-color: #5a67d8;
  box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.15);
}

/* Buttons */
.gv2-btn {
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  font-size: 1em;
  cursor: pointer;
}

.gv2-btn--primary {
  background: #5a67d8;
  color: white;
}

.gv2-btn--primary:hover {
  background: #4c51bf;
}

.gv2-btn--secondary {
  background: #6c757d;
  color: white;
}

.gv2-btn--secondary:hover {
  background: #5a6268;
}

/* EAN check */
.gv2-ean-check-btn {
  padding: 0 15px;
  background: #5a67d8;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
}

.gv2-ean-check-btn:hover {
  background: #4c51bf;
}

.gv2-ean-validation {
  margin-top: 5px;
  font-size: 0.85em;
  display: flex;
  align-items: center;
  gap: 5px;
}

.gv2-ean-validation--checking { color: #856404; }
.gv2-ean-validation--valid    { color: #155724; }
.gv2-ean-validation--invalid  { color: #721c24; }
.gv2-ean-validation--pesable  { color: #004085; background: #cce5ff; padding: 4px 8px; border-radius: 4px; margin-top: 5px; }

/* Master info section */
.gv2-master-info {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
}

.gv2-master-info__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.gv2-master-info__header h4 {
  margin: 0;
  color: #495057;
  font-size: 1.1em;
}

.gv2-master-status {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.85em;
  font-weight: 600;
}

.gv2-master-status--exists     { background: #d4edda; color: #155724; }
.gv2-master-status--not-exists { background: #f8d7da; color: #721c24; }

.gv2-master-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 15px;
}

.gv2-master-detail__label {
  font-size: 0.85em;
  color: #6c757d;
  margin-bottom: 2px;
}

.gv2-master-detail__value {
  font-size: 0.95em;
  color: #212529;
  font-weight: 500;
}

.gv2-master-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.gv2-btn-master {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
  color: #495057;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-size: 0.9em;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.gv2-btn-master:hover {
  background: #5a67d8;
  color: white;
  border-color: #5a67d8;
  text-decoration: none;
}

.gv2-btn-master--primary {
  background: #5a67d8;
  color: white;
  border: none;
}

.gv2-btn-master--primary:hover {
  background: #4c51bf;
}

/* Loading spinner */
.gv2-spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #5a67d8;
  border-radius: 50%;
  animation: gv2-spin 1s linear infinite;
  margin-left: 10px;
}

@keyframes gv2-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Image fullscreen btn */
.gv2-fullscreen-btn {
  margin-top: 10px;
  background: #5a67d8;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
}

.gv2-fullscreen-btn:hover {
  background: #4c51bf;
}

/* Highlight animation (only applied to single element via JS) */
.gv2-product--highlighted {
  animation: gv2-highlight-pulse 1s ease-in-out 3;
  box-shadow: 0 0 20px rgba(255, 193, 7, 0.8);
  transform: scale(1.05);
  z-index: 1000;
  position: relative;
}

@keyframes gv2-highlight-pulse {
  0%   { box-shadow: 0 0 20px rgba(255, 193, 7, 0.8); }
  50%  { box-shadow: 0 0 40px rgba(255, 193, 7, 1); }
  100% { box-shadow: 0 0 20px rgba(255, 193, 7, 0.8); }
}

/* Action buttons */
.gv2-actions {
  text-align: center;
  margin: 30px 0;
}

.gv2-actions a,
.gv2-actions button {
  margin: 0 10px;
}

/* Notification toast */
.gv2-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: white;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease;
  max-width: 350px;
  min-width: 250px;
}

.gv2-toast--visible {
  opacity: 1;
  transform: translateX(0);
}

.gv2-toast__content {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.gv2-toast__content i { font-size: 18px; }

.gv2-toast--success { border-left: 4px solid #28a745; }
.gv2-toast--success i { color: #28a745; }
.gv2-toast--error   { border-left: 4px solid #dc3545; }
.gv2-toast--error i   { color: #dc3545; }
.gv2-toast--warning { border-left: 4px solid #ffc107; }
.gv2-toast--warning i { color: #ffc107; }
.gv2-toast--info    { border-left: 4px solid #17a2b8; }
.gv2-toast--info i    { color: #17a2b8; }

/* Responsive */
@media (max-width: 1200px) {
  .gv2-edit-modal__content {
    width: 98%;
    max-width: none;
  }

  .gv2-edit-modal__body {
    flex-direction: column;
  }

  .gv2-edit-modal__image-section {
    flex: none;
    width: 100%;
    order: -1;
  }

  .gv2-edit-modal__image-section img {
    max-height: 300px;
  }
}

/* Helper classes */
.gv2-text-muted { color: #6c757d; }
.gv2-master-product-img { max-width: 100%; height: 120px; object-fit: contain; border-radius: 4px; border: 1px solid #dee2e6; cursor: zoom-in; }
.gv2-input-replacement { padding: 10px 12px; border: 1px solid #ced4da; border-radius: 6px; font-size: 1em; width: 100%; background-color: white; color: inherit; box-sizing: border-box; }

/* ── Dark mode ──────────────────────────────────────────────────────── */
.dark .gv2-container { background: #1e293b; }

.dark .gv2-header { border-bottom-color: #475569; }
.dark .gv2-header h2 { color: #e2e8f0; }
.dark .gv2-header i { color: #94a3b8; }

/* Stat cards */
.dark .gv2-stat { background: #334155; border-color: #475569; }
.dark .gv2-stat__label { color: #94a3b8; }
.dark .gv2-stat__value { color: #f1f5f9; }
.dark .gv2-stat__sub { color: #94a3b8; }
.dark .gv2-stat--alert-has { background: #451a1a; border-color: #991b1b; }
.dark .gv2-stat--alert-ok { background: #14532d; border-color: #166534; }
.dark .gv2-stat--success { background: #14532d; border-color: #166534; }
.dark .gv2-stat--warning { background: #422006; border-color: #854d0e; }
.dark .gv2-stat--info { background: #1e3a5f; border-color: #1e40af; }

/* Legend */
.dark .gv2-legend { background: #334155; }
.dark .gv2-legend__text { color: #cbd5e1; }

/* No-master section */
.dark .gv2-nomaster { background: #334155; }
.dark .gv2-nomaster__body { background: #2d1b1b; }
.dark .gv2-nomaster__card { background: #334155; border-color: #991b1b; }
.dark .gv2-nomaster__card-head { border-bottom-color: #475569; }
.dark .gv2-nomaster__module-info { color: #94a3b8; }
.dark .gv2-nomaster__ean { background: #1e293b; }
.dark .gv2-nomaster__ean label { color: #cbd5e1; }
.dark .gv2-nomaster__ean-value { color: #f1f5f9; }
.dark .gv2-nomaster__info-row { color: #94a3b8; }
.dark .gv2-nomaster__btn { background: #1e293b; color: #cbd5e1; border-color: #475569; }

/* Filter buttons */
.dark .gv2-filters__btn { background: #334155; color: #cbd5e1; border-color: #475569; }
.dark .gv2-filters__btn:hover { background: #475569; }

/* Category header */
.dark .gv2-category { background: #334155; }

/* Table / shelf */
.dark .gv2-shelf { background: #334155; border-color: #475569; }
.dark .gv2-table td { border-color: #475569; background: #1e293b; color: #e2e8f0; }
.dark .gv2-table tr:nth-child(even) td:not(.gv2-td--bandeja) { background: #273549; }
.dark .gv2-table td.gv2-td--separator { border-left-color: #1e293b !important; }

/* Empty slot */
.dark .gv2-slot--empty { border-color: #475569; background: #1e293b; color: #64748b; }

/* Edit modal */
.dark .gv2-edit-modal__content { background-color: #1e293b; border-color: #475569; }
.dark .gv2-edit-modal__body { color: #e2e8f0; }
.dark .gv2-edit-modal__footer { background: #334155; border-top-color: #475569; }
.dark .gv2-edit-modal__image-section img { box-shadow: 0 4px 12px rgba(0,0,0,0.4); }

/* Form in modal */
.dark .gv2-form__section-title { color: #cbd5e1; border-bottom-color: #475569; }
.dark .gv2-form__group label { color: #cbd5e1; }
.dark .gv2-form__group input,
.dark .gv2-form__group select { background-color: #334155; border-color: #475569; color: #e2e8f0; }

/* EAN validation */
.dark .gv2-ean-validation--checking { color: #fbbf24; }
.dark .gv2-ean-validation--valid { color: #4ade80; }
.dark .gv2-ean-validation--invalid { color: #f87171; }
.dark .gv2-ean-validation--pesable { color: #60a5fa; background: #1e3a5f; }

/* Master info */
.dark .gv2-master-info { background: #334155; border-color: #475569; }
.dark .gv2-master-info__header h4 { color: #cbd5e1; }
.dark .gv2-master-detail__label { color: #94a3b8; }
.dark .gv2-master-detail__value { color: #f1f5f9; }
.dark .gv2-master-status--exists { background: #14532d; color: #4ade80; }
.dark .gv2-master-status--not-exists { background: #451a1a; color: #f87171; }
.dark .gv2-btn-master { background: #1e293b; color: #cbd5e1; border-color: #475569; }
.dark .gv2-btn-master:hover { background: #5a67d8; color: white; border-color: #5a67d8; }

/* Spinner */
.dark .gv2-spinner { border-color: #475569; border-top-color: #5a67d8; }

/* Helpers */
.dark .gv2-text-muted { color: #94a3b8; }
.dark .gv2-master-product-img { border-color: #475569; }
.dark .gv2-input-replacement { background-color: #334155; border-color: #475569; color: #e2e8f0; }

/* Toast */
.dark .gv2-toast { background: #334155; color: #e2e8f0; }
.dark .gv2-toast__content { color: #e2e8f0; }

/* Print */
@media print {
  .gv2-actions,
  .gv2-nomaster,
  .gv2-filters,
  .gv2-edit-modal,
  .gv2-photo-modal,
  .gv2-tooltip,
  .gv2-toast,
  .header,
  .sidebar,
  .footer,
  #active_admin_content > .action_items {
    display: none !important;
  }

  .gv2-container {
    margin: 0;
    padding: 10px;
  }

  .gv2-table {
    font-size: 0.8em;
  }

  .gv2-product {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(/images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(/images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(/images/marker-icon.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}
/* ── Module View – Visual Shelf ───────────────────────────── */

.mv-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Header ──────────────────────────────────────────────── */
.mv-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.dark .mv-header {
  background: #1e293b;
  border-color: #334155;
}

.mv-header__photo {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  cursor: pointer;
}

.dark .mv-header__photo { border-color: #475569; }

.mv-header__info { flex: 1; }

.mv-header__title {
  margin: 0 0 6px;
  font-size: 1.3em;
  font-weight: 700;
  color: #1e293b;
}

.dark .mv-header__title { color: #f1f5f9; }

.mv-header__meta {
  margin: 0;
  font-size: 0.9em;
  color: #64748b;
  line-height: 1.6;
}

.dark .mv-header__meta { color: #94a3b8; }

.mv-header__meta strong { color: #334155; }
.dark .mv-header__meta strong { color: #cbd5e1; }

/* ── Stats bar ───────────────────────────────────────────── */
.mv-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.mv-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.85em;
  color: #475569;
}

.dark .mv-stat {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}

.mv-stat__value {
  font-weight: 700;
  color: #1e293b;
}

.dark .mv-stat__value { color: #f1f5f9; }

.mv-stat--alert .mv-stat__value { color: #dc2626; }
.dark .mv-stat--alert .mv-stat__value { color: #f87171; }

.mv-stat--warning .mv-stat__value { color: #d97706; }
.dark .mv-stat--warning .mv-stat__value { color: #fbbf24; }

.mv-toggles {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.mv-stat--toggle {
  gap: 8px;
}

/* ── Toggle switch ──────────────────────────────────────── */
.mv-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
}

.mv-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.mv-toggle__slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #cbd5e1;
  border-radius: 20px;
  transition: background 0.2s;
}

.mv-toggle__slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.mv-toggle input:checked + .mv-toggle__slider {
  background: #3b82f6;
}

.mv-toggle input:checked + .mv-toggle__slider::before {
  transform: translateX(16px);
}

.dark .mv-toggle__slider {
  background: #475569;
}

.dark .mv-toggle input:checked + .mv-toggle__slider {
  background: #3b82f6;
}

/* ── Shelf unit ──────────────────────────────────────────── */
.mv-shelf {
  border: 2px solid #94a3b8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow-x: auto;
}

.dark .mv-shelf {
  background: #0f172a;
  border-color: #475569;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ── Bandeja (shelf row) ─────────────────────────────────── */
.mv-bandeja {
  display: flex;
  align-items: flex-end;
  min-height: 140px;
  padding: 8px 8px 0;
}

.mv-bandeja__label {
  flex-shrink: 0;
  width: 40px;
  text-align: center;
  font-size: 0.75em;
  font-weight: 700;
  color: #64748b;
  padding-bottom: 8px;
  line-height: 1.2;
}

.dark .mv-bandeja__label { color: #94a3b8; }

.mv-bandeja__label span {
  display: block;
  font-size: 1.4em;
  color: #334155;
}

.dark .mv-bandeja__label span { color: #e2e8f0; }

.mv-bandeja__items {
  display: flex;
  align-items: stretch;
  gap: 4px;
  flex: 1;
  padding-bottom: 4px;
}

/* Shelf divider (metal bar) */
.mv-divider {
  height: 6px;
  background: linear-gradient(180deg, #d1d5db 0%, #9ca3af 40%, #b0b6bf 60%, #d1d5db 100%);
  border-radius: 1px;
  margin: 0 8px;
}

.dark .mv-divider {
  background: linear-gradient(180deg, #475569 0%, #334155 40%, #3f4f63 60%, #475569 100%);
}

/* Last divider = shelf bottom */
.mv-divider--bottom {
  height: 8px;
  border-radius: 0 0 6px 6px;
  margin: 0;
}

/* ── Product card ────────────────────────────────────────── */
.mv-product {
  flex-shrink: 0;
  width: 120px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px;
  text-align: center;
  transition: box-shadow 0.15s, transform 0.15s;
  cursor: default;
}

.mv-product:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

.dark .mv-product {
  background: #1e293b;
  border-color: #334155;
}

.dark .mv-product:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Promo highlight */
.mv-product[data-promo="true"] {
  border-left: 3px solid #f59e0b;
  background: #fffbeb;
}

.dark .mv-product[data-promo="true"] {
  border-left-color: #d97706;
  background: #1c1a0e;
}

/* Fill mode: items expand to fill bandeja */
.mv-shelf--fill .mv-product {
  flex: 1 1 0;
  width: auto;
  min-width: 100px;
}

.mv-shelf--fill .mv-product--empty {
  display: none;
}

/* Empty position */
.mv-product--empty {
  border-style: dashed;
  border-color: #cbd5e1;
  opacity: 0.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}

.dark .mv-product--empty { border-color: #475569; }

.mv-product--empty i {
  font-size: 1.4em;
  color: #94a3b8;
  margin-bottom: 4px;
}

/* Product image */
.mv-product__img-wrap {
  position: relative;
  width: 100%;
  height: 80px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 4px;
  background: #f8fafc;
}

.dark .mv-product__img-wrap { background: #0f172a; }

.mv-product__img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
  cursor: pointer;
}

.mv-product__no-img {
  font-size: 2em;
  color: #cbd5e1;
}

.dark .mv-product__no-img { color: #475569; }

/* Position badge */
.mv-product__pos {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 0.65em;
  font-weight: 700;
  background: rgba(30,41,59,0.7);
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.3;
}

/* Product info */
.mv-product__desc {
  font-size: 0.7em;
  line-height: 1.3;
  color: #334155;
  max-height: 2.6em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 2px;
}

.dark .mv-product__desc { color: #cbd5e1; }

.mv-product__ean {
  font-size: 0.6em;
  color: #94a3b8;
  font-family: monospace;
  margin-bottom: 2px;
}

.dark .mv-product__ean { color: #64748b; }

.mv-product__details {
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: 0.65em;
  color: #64748b;
}

.dark .mv-product__details { color: #94a3b8; }

.mv-product__details strong { color: #334155; }

.mv-product__promo {
  color: #d97706;
}

.dark .mv-product__promo { color: #fbbf24; }
.dark .mv-product__details strong { color: #e2e8f0; }

/* Badges */
.mv-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  margin-top: 3px;
}

.mv-badge {
  font-size: 0.6em;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.4;
  text-transform: uppercase;
}

.mv-badge--promo {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f59e0b;
}

.dark .mv-badge--promo {
  background: #451a03;
  color: #fbbf24;
  border-color: #b45309;
}

.mv-badge--no-master {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #ef4444;
}

.dark .mv-badge--no-master {
  background: #450a0a;
  color: #f87171;
  border-color: #dc2626;
}

.mv-badge--precio {
  background: #ecfdf5;
  color: #065f46;
}

.dark .mv-badge--precio {
  background: #022c22;
  color: #6ee7b7;
}

/* ── Edit button on product card ─────────────────────────── */
.mv-product__edit-btn {
  display: none;
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 4px;
  background: rgba(59,130,246,0.85);
  color: #fff;
  font-size: 0.65em;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.mv-product__edit-btn:hover { background: rgba(37,99,235,1); }

.mv-product { position: relative; }
.mv-product:hover .mv-product__edit-btn { display: flex; }

/* ── Modal ───────────────────────────────────────────────── */
.mv-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
}

.mv-modal__content {
  background: #fff;
  border-radius: 10px;
  width: 440px;
  max-width: 92vw;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  overflow: hidden;
}

.dark .mv-modal__content {
  background: #1e293b;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.mv-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
}

.dark .mv-modal__header { border-color: #334155; }

.mv-modal__header h3 {
  margin: 0;
  font-size: 1em;
  color: #1e293b;
}

.dark .mv-modal__header h3 { color: #f1f5f9; }

.mv-modal__close {
  background: none;
  border: none;
  font-size: 1.4em;
  cursor: pointer;
  color: #94a3b8;
  padding: 0;
  line-height: 1;
}

.mv-modal__close:hover { color: #475569; }
.dark .mv-modal__close:hover { color: #e2e8f0; }

.mv-modal__subheader {
  padding: 8px 18px;
  font-size: 0.8em;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.dark .mv-modal__subheader {
  color: #94a3b8;
  background: #0f172a;
  border-color: #334155;
}

.mv-modal__body { padding: 16px 18px; }

.mv-form__group {
  margin-bottom: 12px;
}

.mv-form__group label {
  display: block;
  font-size: 0.8em;
  font-weight: 600;
  color: #475569;
  margin-bottom: 4px;
}

.dark .mv-form__group label { color: #94a3b8; }

.mv-form__group input,
.mv-form__group select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  font-size: 0.9em;
  background: #fff;
  color: #1e293b;
  box-sizing: border-box;
}

.dark .mv-form__group input,
.dark .mv-form__group select {
  background: #0f172a;
  border-color: #475569;
  color: #f1f5f9;
}

.mv-form__group input:focus,
.mv-form__group select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
}

.mv-form__row {
  display: flex;
  gap: 10px;
}

.mv-form__row .mv-form__group { flex: 1; }

.mv-modal__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid #e2e8f0;
}

.dark .mv-modal__footer { border-color: #334155; }

.mv-modal__status {
  margin-right: auto;
  font-size: 0.8em;
}

.mv-modal__status--ok { color: #16a34a; }
.dark .mv-modal__status--ok { color: #4ade80; }

.mv-modal__status--error { color: #dc2626; }
.dark .mv-modal__status--error { color: #f87171; }

.mv-modal__btn {
  padding: 7px 16px;
  border-radius: 5px;
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.mv-modal__btn--cancel {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

.dark .mv-modal__btn--cancel {
  background: #334155;
  color: #cbd5e1;
  border-color: #475569;
}

.mv-modal__btn--cancel:hover { background: #e2e8f0; }
.dark .mv-modal__btn--cancel:hover { background: #475569; }

.mv-modal__btn--save {
  background: #3b82f6;
  color: #fff;
}

.mv-modal__btn--save:hover { background: #2563eb; }

.mv-modal__btn--save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Card photo badge (audit photo shortcut) ─────────────── */
/* Positioned at the bottom-right of the product image so it doesn't
   collide with the edit button that appears on hover at the card's
   top-right corner. */
.mv-product__photo-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.92);
  color: #fff;
  font-size: 10px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, background 0.15s ease;
}

.mv-product__photo-badge:hover {
  background: rgba(29, 78, 216, 1);
  transform: scale(1.08);
  color: #fff;
}

/* ── Audit photo preview (inside edit modal) ─────────────── */
.mv-photo-preview {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.dark .mv-photo-preview { border-color: #334155; }

.mv-photo-preview__title {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dark .mv-photo-preview__title { color: #cbd5e1; }

.mv-photo-preview__img {
  display: block;
  max-width: 100%;
  max-height: 240px;
  border-radius: 6px;
  cursor: pointer;
  object-fit: contain;
  background: #f1f5f9;
}

.dark .mv-photo-preview__img { background: #0f172a; }

/* ── Price Reference ─────────────────────────────────────── */
.mv-price-ref {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.dark .mv-price-ref { border-color: #334155; }

.mv-price-ref__title {
  font-size: 0.75em;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.dark .mv-price-ref__title { color: #94a3b8; }

.mv-price-ref__body {
  font-size: 0.82em;
}

.mv-price-ref__spinner {
  color: #94a3b8;
  font-size: 0.85em;
}

.mv-price-ref__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 3px;
  background: #f8fafc;
}

.dark .mv-price-ref__row { background: #0f172a; }

.mv-price-ref__label {
  font-weight: 600;
  color: #334155;
  font-size: 0.9em;
}

.dark .mv-price-ref__label { color: #cbd5e1; }

.mv-price-ref__stats {
  display: flex;
  gap: 10px;
  color: #64748b;
  font-size: 0.9em;
}

.dark .mv-price-ref__stats { color: #94a3b8; }

.mv-price-ref__stats strong {
  color: #1e293b;
}

.dark .mv-price-ref__stats strong { color: #f1f5f9; }

.mv-price-ref__count {
  font-size: 0.8em;
  color: #94a3b8;
  margin-left: 4px;
}

.mv-price-ref__warn {
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  font-size: 0.82em;
  font-weight: 600;
}

.dark .mv-price-ref__warn {
  background: #450a0a;
  border-color: #7f1d1d;
  color: #fca5a5;
}

.mv-price-ref__section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}

.dark .mv-price-ref__section { border-color: #334155; }

.mv-price-ref__section-title {
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
  margin-bottom: 4px;
}

.dark .mv-price-ref__section-title { color: #94a3b8; }

.mv-price-ref__row--market {
  padding: 3px 6px;
}

.mv-price-ref__regular {
  color: #94a3b8;
  font-size: 0.9em;
  margin-right: 2px;
}

.mv-price-ref__promo {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.8em;
  font-weight: 600;
  padding: 0 5px;
  border-radius: 3px;
  margin-left: 6px;
}

.dark .mv-price-ref__promo {
  background: #451a03;
  color: #fbbf24;
}

/* ── Shelf + Photo layout ───────────────────────────────── */
.mv-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.mv-layout__shelf {
  flex: 1;
  min-width: 0;
}

.mv-layout__photo {
  flex-shrink: 0;
  width: 460px;
}

.mv-layout__photo-sticky {
  position: sticky;
  top: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.dark .mv-layout__photo-sticky {
  background: #1e293b;
  border-color: #334155;
}

.mv-layout__photo-label {
  padding: 8px 12px;
  font-size: 0.8em;
  font-weight: 600;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
}

.dark .mv-layout__photo-label {
  color: #94a3b8;
  border-color: #334155;
}

.mv-layout__photo-img {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
}

@media (max-width: 900px) {
  .mv-layout {
    flex-direction: column;
  }

  .mv-layout__photo {
    width: 100%;
    order: -1;
  }

  .mv-layout__photo-sticky {
    position: static;
  }

  .mv-layout__photo-img {
    max-height: 300px;
    object-fit: contain;
  }
}

/* ── Empty state ─────────────────────────────────────────── */
.mv-empty {
  text-align: center;
  padding: 40px 20px;
  color: #94a3b8;
}

.mv-empty i {
  font-size: 2.5em;
  margin-bottom: 12px;
  display: block;
}

/* ── Print styles ────────────────────────────────────────── */
@page {
  size: portrait;
  margin: 8mm;
}

@media print {
  /* Reset page layout */
  html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 10px;
  }

  .mv-container { max-width: 100%; padding: 0; margin: 0; }

  /* Hide AA chrome */
  #header, #title_bar, .action_items,
  #footer, #sidebar, .flashes,
  .breadcrumb, #utility_nav { display: none !important; }

  #active_admin_content { margin: 0; padding: 0; }
  #wrapper { margin: 0; padding: 0; }

  /* Header compact */
  .mv-header {
    padding: 4px 8px;
    margin-bottom: 4px;
    border: none;
    background: none;
  }

  .mv-header__meta { font-size: 0.8em; line-height: 1.3; }

  /* Stats – single compact line */
  .mv-stats {
    margin-bottom: 4px;
    gap: 3px;
  }

  .mv-stat { padding: 2px 6px; font-size: 0.75em; border: none; background: none; }
  .mv-toggles { display: none; }

  /* Shelf */
  .mv-shelf {
    box-shadow: none;
    border-width: 1px;
    border-color: #666;
  }

  .mv-bandeja {
    min-height: auto;
    padding: 2px 3px 0;
  }

  .mv-bandeja__label { width: 28px; font-size: 0.65em; padding-bottom: 2px; }
  .mv-bandeja__items { gap: 2px; padding-bottom: 2px; }

  .mv-divider { height: 3px; margin: 0 3px; }

  /* Product cards – very compact */
  .mv-product {
    width: 80px;
    padding: 2px;
    border: 1px solid #999;
    border-radius: 2px;
    background: #fff !important;
  }

  .mv-product:hover { box-shadow: none; transform: none; }

  .mv-product[data-promo="true"] {
    border-left: 2px solid #d97706;
    background: #fff !important;
  }

  .mv-product__img-wrap {
    height: 40px;
    background: #fff;
    margin-bottom: 1px;
  }

  .mv-product__img { max-height: 40px; }

  .mv-product__desc { font-size: 0.55em; max-height: 2.2em; margin-bottom: 1px; color: #000; }
  .mv-product__ean { font-size: 0.5em; color: #333; }
  .mv-product__details { font-size: 0.55em; color: #333; gap: 3px; }
  .mv-product__details strong { color: #000; }
  .mv-product__pos { font-size: 0.55em; padding: 0 2px; }
  .mv-badges { margin-top: 1px; }
  .mv-badge { font-size: 0.5em; padding: 0 2px; }
  .mv-product__no-img { font-size: 1.4em; }

  .mv-product__edit-btn { display: none !important; }

  /* Hide photo and modal */
  .mv-layout__photo { display: none !important; }
  .mv-layout { flex-direction: column; }
  .mv-modal { display: none !important; }
  .mv-price-ref { display: none !important; }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */


.circle-logo {
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}