/* ✅ NUEVO: Sistema fluido "como el agua" para bloques */
.omega-component-focus {
  outline: 3px solid #0f62fe !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 5px rgba(15, 98, 254, 0.24) !important;
  animation: omega-component-focus-pulse 1.25s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
.omega-component-focus-host {
  outline: 3px solid #0f62fe !important;
  outline-offset: 5px !important;
  box-shadow: 0 0 0 6px rgba(15, 98, 254, 0.2), 0 0 18px rgba(15, 98, 254, 0.32) !important;
  animation: omega-component-focus-pulse 1.25s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
@keyframes omega-component-focus-pulse {
  0%, 100% { outline-color: rgba(15, 98, 254, 0.5) !important; filter: brightness(1) !important; }
  50% { outline-color: #0f62fe !important; filter: brightness(1.08) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .omega-component-focus,
  .omega-component-focus-host { animation: none; }
}
#creditNoteForm:target,
#newCreditNote:target,
#productsTable:target,
#creditSearchForm:target,
#creditResultsTable:target {
  outline: 2px solid #0f62fe !important;
  outline-offset: 4px !important;
  animation: omega-component-focus-pulse 1.25s ease-in-out infinite;
}
/* Cards que ocupan altura flexible basada en viewport */
.card-fluid-height {
  /* Altura mínima */
  min-height: 300px;
  /* Altura máxima flexible basada en viewport height */
  max-height: calc(100vh - 120px); /* Resta header + padding */
  height: auto;
  display: flex;
  flex-direction: column;
}

.card-fluid-height .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Permitir que flex funcione */
  overflow: hidden;
}

/* Para layouts de 2 columnas fluidos */
.columns-container-fluid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px; /* ✅ CANON v265: Espaciado entre bloques */
  /* Altura flexible basada en viewport */
  min-height: calc(100vh - 25px); /* ✅ CANON v265: 5px top + 20px bottom = 25px */
  max-height: calc(100vh - 25px); /* ✅ CANON v265: Ajustado */
  height: auto;
}

/* Columnas individuales */
.columns-container-fluid .column {
  display: flex;
  flex-direction: column;
  gap: 5px; /* ✅ CANON v265: Espaciado entre bloques */
  min-height: 0;
}

/* Cards dentro de columnas fluidas crecen proporcionalmente */
.columns-container-fluid .card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.columns-container-fluid .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Patrón reutilizable: encabezado integrado solo en el panel primario. */
.card-split-header-layout { min-width: 0; min-height: 0; }
.card-full-height.card-split-header-layout > .card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 0;
}
.card-split-header-primary,
.card-split-header-secondary { display: flex; min-width: 0; min-height: 0; flex-direction: column; }
.card-split-header-primary > .card-header { flex: 0 0 auto; }
.card-split-header-primary > .card-body,
.card-split-header-secondary > .card-body { flex: 1 1 auto; min-width: 0; min-height: 0; }
@media (max-width: 767px) {
  .card-full-height.card-split-header-layout > .card-body { grid-template-columns: minmax(0, 1fr); }
}

/* ==================== SEARCH FORM ==================== */
/* CANON: 10px de padding inferior para separar formulario de tabla */

.search-form {
  padding-bottom: 0; /* ✅ ELIMINADO: El gap del card-body ya maneja los 10px */
}

/* ✅ EXCEPCIÓN: Cards SIN card-full-height necesitan padding-bottom porque no tienen gap */
.card:not(.card-full-height) .search-form {
  padding-bottom: 10px;
}

/* ==================== FORM GRID ==================== */
/* Grid 3 columnas con proporciones variables según el contenido */

.form-grid {
  display: grid;
  grid-template-columns: 0.6fr 1.2fr 1.2fr; /* 🔧 CORREGIDO: Primera columna más compacta (0.6fr), las otras dos más grandes (1.2fr) */
  gap: var(--omega-form-grid-gap); /* ✅ CANON GLOBAL */
  align-items: end; /* Alinear todos los elementos al final para consistencia */
  width: 100%; /* Ocupar el 100% del ancho para alineación perfecta con botones y tabla */
}

/* 🔧 CRÍTICO: Asegurar que todos los campos ocupen el 100% del espacio del grid */
.form-grid .form-field {
  width: 100%;
  min-width: 0; /* ✅ CRÍTICO: Permitir que los campos se adapten al ancho disponible */
  max-width: 100%;
}

/* Grid específico para formulario RMA (5 columnas) */
.form-grid-rma {
  grid-template-columns: 0.8fr 1.2fr 1.2fr 1fr 1fr; /* 🔧 CORREGIDO: Más espacio a fechas (1.2fr), menos a Serial/Categoría (1fr) */
  gap: var(--omega-form-grid-gap); /* ✅ CANON GLOBAL */
}

/* 🔧 CRÍTICO: Asegurar que todos los campos ocupen el 100% del espacio del grid */
.form-grid-rma .form-field {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Responsive: 1 columna en móvil */
@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
    gap: var(--omega-form-grid-gap);
    width: 100%;
  }

  /* Grid RMA en mobile: layout especial según Figma */
  .form-grid-rma {
    grid-template-columns: 1fr 1fr; /* 2 columnas para pares de campos */
    gap: var(--omega-form-grid-gap);
  }

  /* Campos que ocupan toda la fila (2 columnas) */
  .form-grid-rma .form-field:has(#rmaNum),
  .form-grid-rma .form-field:has(#facturaNum2),
  .form-grid-rma #clienteField2,
  .form-grid-rma .form-field:has(#serial2),
  .form-grid-rma .form-field:has(#marca2),
  .form-grid-rma .form-field:has(#categoria2) {
    grid-column: 1 / -1; /* Ocupa todas las columnas */
  }

  .date-range-group,
  .category-brand-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
  }

  .date-range-group .form-field,
  .category-brand-group .form-field {
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  /* Ocultar el icono de flecha en móvil */
  .icon-arrow,
  .date-range-arrow {
    display: none !important;
  }
}

/* Grupo de fechas con flecha (Columna 2, Fila 1) */
.date-range-group {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 20px;
  width: 100%;
}

/* Opt-in para formularios alojados en card-body con overflow recortado. */
.search-form--clip-safe {
  padding-top: 3px;
}

.date-range-group .form-field {
  flex: 1; /* Cada campo crece igualmente */
  min-width: 0;
}

.date-range-arrow {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 16px;
  height: 25px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.date-range-arrow img {
  display: block;
  width: 12px;
  height: 10px;
}

/* Grupo Categoría + Marca (Columna 3, Fila 1) */
.category-brand-group {
  display: flex;
  gap: 18px;
  width: 100%;
}

.category-brand-group .form-field {
  min-width: 0;
}

.category-brand-group
  .form-field:not(.width-100):not(.width-full) {
  flex: 1;
  max-width: calc(50% - 9px);
}

/* ========================================
   SPACING ESTÁNDAR - Formulario a Tabla
   ======================================== */

.tabla-contenedor {
  margin-top: 0; /* ✅ CANON: Sin margin-top, el gap entre elementos lo maneja flexbox */
  margin-bottom: 0; /* ✅ REVERTIDO: Sin margin extra (gap del card-body maneja el espacio) */
}

/* ========================================
   CAMPOS DE FORMULARIO (Input, Select, Date)
   Diseño desde Figma
   ======================================== */

.form-field {
  position: relative;
  padding-top: 6px;
  padding-bottom: 3px;
  width: 100%;
}

.form-field-label {
  position: absolute;
  left: var(--omega-field-label-left, 7px);
  top: var(--omega-field-label-top, 12px);
  transform: translateY(-100%);
  font-family:
    "Roboto",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
  color: #0b0b0b;
  background-color: #ffffff;
  padding: 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 18px);
  z-index: 1;
  height: 14px;
  display: flex;
  align-items: flex-end;
  transition: color 0.2s;
}

.form-field-input,
.form-field-select,
.form-field-date {
  font-family:
    "Roboto",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.32px;
  color: #0b0b0b;
  background-color: #ffffff;
  border: 1px solid #949494;
  border-radius: 2px;
  padding: 3px 16px 4px 8px;
  width: 100%;
  height: 25px; /* 34px total (25px + 6px + 1px + 2px border = 34px) */
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    outline 0.2s;
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* FOCUS - Verde según sistema de diseño */
.form-field-input:focus,
.form-field-select:focus,
.form-field-date:focus {
  outline: none;
  border: 1px solid #077e38;
  border-radius: 2px;
  padding: 3px 16px 4px 8px;
}

.form-field-input:focus
  + .form-field-icon-outside
  + .form-field-label,
.form-field-select:focus
  + .form-field-icon-outside
  + .form-field-label,
.form-field-date:focus
  + .form-field-icon-outside
  + .form-field-label {
  color: #077e38;
}

/* Workaround para el label cuando el input tiene focus */
.form-field-input:focus ~ .form-field-label,
.form-field-select:focus ~ .form-field-label,
.form-field-date:focus ~ .form-field-label {
  color: #077e38;
}

.form-field-input::placeholder {
  color: transparent;
}

/* Gradiente interno para indicar overflow */
.form-field-input::after,
.form-field-date::after {
  content: "";
  position: absolute;
  right: 2px; /* ✅ RESTAURADO: Vuelve a 2px, ahora con z-index correcto */
  top: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none;
  z-index: 1; /* ✅ Capa 1: Debajo del icono (::before con z-index: 2) */
}

.form-field-input,
.form-field-date {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Select específico */
.form-field-select {
  appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11L3 6L3.7 5.3L8 9.6L12.3 5.3L13 6L8 11Z' fill='%23595D62'/%3E%3C/svg%3E"),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 100%
    );
  background-repeat: no-repeat;
  background-position:
    right 2px center,
    right 2px top 0;
  background-size:
    16px 16px,
    24px 100%;
}

/* Date input específico - Icono movido a ::before para control de z-index */
.form-field-date {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* ✅ Icono movido a ::before - ver más abajo */
}

/* Icono del calendario en ::before para tener z-index sobre el gradiente */
.form-field-date::before {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--omega-checkbox-size) !important;
  height: var(--omega-checkbox-size) !important;
  min-width: var(--omega-checkbox-size) !important;
  max-width: var(--omega-checkbox-size) !important;
  min-height: var(--omega-checkbox-size) !important;
  max-height: var(--omega-checkbox-size) !important;
  aspect-ratio: 1 / 1;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2H11V1H10V2H6V1H5V2H3C2.45 2 2 2.45 2 3V13C2 13.55 2.45 14 3 14H13C13.55 14 14 13.55 14 13V3C14 2.45 13.55 2 13 2ZM13 13H3V6H13V13ZM13 5H3V3H5V4H6V3H10V4H11V3H13V5Z' fill='%23595D62'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  pointer-events: none;
  z-index: 2; /* ✅ Capa 2: Por encima del gradiente */
}

/* Ocultar iconos nativos del navegador para date inputs */
.form-field-date::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 2px; /* 🔧 MOVIDO: de 4px → 2px - coincidir con background-position */
  width: var(--omega-checkbox-size) !important;
  height: var(--omega-checkbox-size) !important;
  min-width: var(--omega-checkbox-size) !important;
  max-width: var(--omega-checkbox-size) !important;
  min-height: var(--omega-checkbox-size) !important;
  max-height: var(--omega-checkbox-size) !important;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

.form-field-date::-webkit-inner-spin-button,
.form-field-date::-webkit-clear-button {
  display: none;
}

.form-field-date::-moz-calendar-picker-indicator {
  opacity: 0;
}

/* 🔧 CRÍTICO: Eliminar borde rojo del navegador cuando el campo date está inválido o vacío */
.form-field-date:invalid,
.form-field-date:out-of-range {
  border-color: #949494; /* Mantener borde gris, NO rojo */
  box-shadow: none; /* Eliminar cualquier sombra roja del navegador */
}

/* Asegurar que tampoco aparezca el borde rojo en focus cuando está inválido */
.form-field-date:focus:invalid,
.form-field-date:focus:out-of-range {
  border: 2px solid #077e38; /* Solo borde verde, NO rojo */
  border-color: #077e38 !important; /* Forzar verde */
  box-shadow: none; /* Eliminar cualquier sombra roja del navegador */
}

/* 🔧 MEGA CRÍTICO: Anular TODOS los estilos nativos del navegador para date inputs */
input[type="date"].form-field-date:invalid,
input[type="date"].form-field-date:out-of-range,
input[type="date"].form-field-date:-moz-ui-invalid,
input[type="date"].form-field-date:blank {
  border-color: #949494 !important;
  box-shadow: none !important;
  outline: none !important;
}

input[type="date"].form-field-date:focus:invalid,
input[type="date"].form-field-date:focus:out-of-range,
input[type="date"].form-field-date:focus:-moz-ui-invalid {
  border: 2px solid #077e38 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Anular estilos de validación del navegador */
input[type="date"].form-field-date {
  box-shadow: none !important;
}

input[type="date"].form-field-date:not(:focus):not(:disabled) {
  border-color: #949494 !important;
  box-shadow: none !important;
}

/* Mostrar ano en 2 digitos (visual) sin alterar valor real YYYY-MM-DD */
input[type="date"].form-field-date::-webkit-datetime-edit-year-field {
  width: 2.2ch;
  min-width: 2.2ch;
  max-width: 2.2ch;
  overflow: hidden;
  text-align: right;
}

/* Iconos externos (warning y locked) */
.form-field-icon-outside {
  position: absolute;
  right: -17.5px;
  top: 6px;
  height: 21px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
}

.form-field-icon-outside svg {
  display: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Canon table search field */
.omega-table-search-field {
  width: min(420px, 100%);
  margin-left: auto;
}

.omega-table-search-field--wide {
  width: min(560px, 100%);
}

/* Canon: búsqueda por alcance + término + acción explícita de búsqueda. */
.omega-table-search-scope {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 35px;
  box-sizing: border-box;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--border-secondary);
  border-radius: 2px;
  background: var(--bg-secondary);
}

/* Canon multi-select scope variant, reusable with OmegaTableSearchScope. */
.omega-table-search-scope--multi { overflow: visible; }
.omega-table-search-scope__trigger {
  display: inline-flex;
  box-sizing: border-box;
  width: auto;
  min-width: 78px;
  max-width: 126px;
  height: 25px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  margin: 4px;
  padding: 2px 7px;
  border: 0;
  border-radius: 2px;
  background: var(--main-bgs-paginas, #e3e6e8);
  color: var(--text-primary, #111);
  font: 400 12px/16px 'Atkinson Hyperlegible', 'IBM Plex Sans', sans-serif;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.omega-table-search-scope__trigger > span { overflow: hidden; text-overflow: ellipsis; }
.omega-table-search-scope__trigger > svg { width: 16px; height: 16px; flex: 0 0 16px; margin-left: auto; }
.omega-table-search-scope__menu {
  position: fixed;
  z-index: 2000;
  box-sizing: border-box;
  min-width: 190px;
  max-height: min(280px, calc(100vh - 8px));
  overflow: auto;
  padding: 4px;
  border: 1px solid var(--border-secondary, #949494);
  border-radius: 2px;
  background: var(--bg-secondary, #fff);
  color: var(--text-primary, #111);
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}
.omega-table-search-scope__menu[hidden] { display: none; }
.omega-table-search-scope__option {
  display: flex;
  min-height: 30px;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 2px;
  color: var(--text-primary, #111);
  font: 400 13px/18px 'IBM Plex Sans', sans-serif;
  cursor: pointer;
}
.omega-table-search-scope__option:hover { background: var(--omega-neutral-5, #f1f2f3); }
.omega-table-search-scope__option .maestro-checkbox-input { flex: 0 0 auto; }

html.dark .omega-table-search-scope__trigger { background: var(--omega-neutral-20, #454a4f); color: var(--text-primary, #fff); }
html.dark .omega-table-search-scope__menu { background: var(--bg-secondary, #262626); }
html.dark .omega-table-search-scope__option:hover { background: var(--omega-neutral-20, #454a4f); }

.omega-table-search-scope > select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  width: max-content;
  min-width: 0;
  max-width: 45%;
  height: 100%;
  flex: 0 1 auto;
  padding: 0 18px 0 8px;
  border: 0;
  border-right: 1px solid var(--border-secondary);
  border-radius: 0;
  background-color: var(--omega-neutral-5);
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11L3 5.99999L3.7 5.29999L8 9.59999L12.3 5.29999L13 5.99999L8 11Z' fill='black'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 16px 16px;
  color: var(--text-primary);
  font: 400 12px/16px 'IBM Plex Sans', sans-serif;
}

.omega-table-search-scope > .omega-table-search-scope__input {
  width: 1%;
  min-width: 40px;
  height: 100%;
  flex: 1 1 auto;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: 400 12px/16px 'IBM Plex Sans', sans-serif;
  box-shadow: none;
}

.omega-table-search-scope > .omega-table-search-scope__input:focus {
  outline: 0;
  box-shadow: none;
}

.omega-table-search-scope > .omega-table-search-scope__input::placeholder {
  color: var(--text-secondary);
  opacity: 1;
}

.omega-table-search-scope > .omega-table-search-scope__submit {
  display: inline-flex;
  min-width: 112px;
  height: 29px;
  min-height: 29px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-inline: 2px;
  padding: 4px 6px;
  border-radius: 2px;
  font: 700 11px/16px 'DM Sans', sans-serif;
  white-space: nowrap;
}

/* Keep the wider action on every search-scope variant, including module-specific submit classes. */
.omega-table-search-scope > button.btn-success[type="submit"] {
  min-width: 112px;
}

.omega-table-search-scope__submit .btn-text { flex: 0 0 auto; }
.omega-table-search-scope__submit .btn-icon { position: static; width: 16px; height: 16px; flex: 0 0 16px; transform: none; }
.omega-table-search-scope__submit .btn-icon svg { display: block; width: 16px; height: 16px; }

@media (max-width: 480px) {
  .omega-table-search-scope > select { max-width: 42%; }
  .omega-table-search-scope > .omega-table-search-scope__submit { min-width: 88px; }
  .omega-table-search-scope > button.btn-success[type="submit"] { min-width: 88px; }
}

.omega-table-search-field .form-field-input {
  padding-right: 34px !important;
}

.omega-table-search-field .form-field-icon-outside,
.omega-table-search-field .search-icon,
.omega-table-search-field .omega-table-search-icon-slot {
  position: absolute;
  right: 8px;
  top: calc(50% + 2px);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 17px;
  padding: 0;
}

.omega-table-search-field .form-field-icon-outside svg,
.omega-table-search-field .search-icon svg,
.omega-table-search-field .omega-table-search-icon-slot svg {
  display: block;
  width: 16px;
  height: 17px;
  flex-shrink: 0;
}

.omega-table-search-icon path {
  fill: currentColor !important;
  stroke: none !important;
}

.omega-table-search-field .omega-table-search-icon-slot {
  color: #595d62;
}

html.dark .omega-table-search-field .omega-table-search-icon-slot {
  color: #c6c6c6;
}

.omega-table-search-icon.is-hidden {
  display: none !important;
}

/* Canon opt-in: campo con icono textual o SVG al final. */
.form-field--trailing-icon .form-field-input {
  padding-right: 28px !important;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.form-field-trailing-icon {
  position: absolute;
  right: 2px;
  top: calc(50% + 2px);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 20px;
  pointer-events: none;
}

.form-field-trailing-icon img {
  display: block;
  width: 22px;
  height: 20px;
}

.form-field--end-icon :is(.form-field-input, .form-field-select, .form-field-date) {
  padding-right: 25px !important;
}

.form-field-end-icon {
  position: absolute;
  right: 3px;
  top: calc(50% + 2px);
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.form-field-end-icon img {
  display: block;
  max-width: 16px;
  max-height: 16px;
}

.omega-table-search-clear {
  position: absolute;
  right: 8px;
  top: calc(50% + 2px);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #595d62;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
}

.omega-table-search-clear[hidden] {
  display: none !important;
}

.omega-table-search-clear svg {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.omega-table-search-clear:hover {
  color: #161616;
}

.omega-table-search-clear:focus-visible {
  outline: 2px solid #0f62fe;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .omega-table-search-field {
    width: 100%;
    margin-left: 0;
  }
}

/* Icono de candado - Centralizado desde Figma (filled) */
.icon-locked {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: none; /* Oculto por defecto */
}

/* Mostrar candado SOLO cuando el padre tiene la clase is-disabled */
.form-field.is-disabled .icon-locked,
.notas-field.is-disabled .icon-locked {
  display: block;
  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 7H11V4C11 3.20435 10.6839 2.44129 10.1213 1.87868C9.55871 1.31607 8.79565 1 8 1C7.20435 1 6.44129 1.31607 5.87868 1.87868C5.31607 2.44129 5 3.20435 5 4V7H4C3.73478 7 3.48043 7.10536 3.29289 7.29289C3.10536 7.48043 3 7.73478 3 8V14C3 14.2652 3.10536 14.5196 3.29289 14.7071C3.48043 14.8946 3.73478 15 4 15H12C12.2652 15 12.5196 14.8946 12.7071 14.7071C12.8946 14.5196 13 14.2652 13 14V8C13 7.73478 12.8946 7.48043 12.7071 7.29289C12.5196 7.10536 12.2652 7 12 7ZM6 4C6 3.46957 6.21071 2.96086 6.58579 2.58579C6.96086 2.21071 7.46957 2 8 2C8.53043 2 9.03914 2.21071 9.41421 2.58579C9.78929 2.96086 10 3.46957 10 4V7H6V4ZM12 14H4V8H12V14Z" fill="%23000000"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Ocultar SVG inline de candado - usar solo el background de CSS */
svg.icon-locked {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  visibility: hidden !important;
}

/* Icono de flecha siempre visible en el campo DESDE */
.form-field-icon-outside .icon-arrow {
  display: block;
}

/* Estado de error */
.form-field.has-error .form-field-input,
.form-field.has-error .form-field-select,
.form-field.has-error .form-field-date {
  border-color: #da1e28;
  outline: 2px solid #da1e28;
  outline-offset: -2px;
}

.form-field.has-error .form-field-label {
  color: #da1e28;
}

.form-field.has-error .icon-warning {
  display: block;
}

/* Estado de error para textarea */
.form-field.has-error .form-textarea,
.form-textarea.has-error {
  border-color: #da1e28;
  outline: 2px solid #da1e28;
  outline-offset: -2px;
}

.form-field.has-error .form-textarea-label {
  color: #da1e28;
}

/* Estado disabled - Según Figma - MISMO GRIS PARA TODOS */
.form-field.is-disabled .form-field-input,
.form-field.is-disabled .form-field-select,
.form-field.is-disabled .form-field-date,
.form-field-input:disabled,
.form-field-select:disabled,
.form-field-date:disabled {
  background-color: #e3e6e8 !important; /* Forzar el gris correcto de Figma */
  color: #acb4b9 !important;
  cursor: not-allowed;
  border-color: #949494;
  -webkit-text-fill-color: #acb4b9; /* Para navegadores webkit */
  opacity: 1; /* Sobrescribir la opacidad por defecto del navegador */
}

.form-field.is-disabled .form-field-label {
  color: #595d62;
}

.form-field.is-disabled .icon-locked {
  display: block;
}

/* Ocultar icono del calendario cuando está disabled (se muestra icon-locked) */
.form-field.is-disabled .form-field-date::before,
.form-field-date:disabled::before {
  display: none; /* ✅ Ocultar el icono del calendario en disabled */
}

/* Ajustar gradiente para disabled */
.form-field.is-disabled .form-field-input::after,
.form-field.is-disabled .form-field-date::after,
.form-field-input:disabled::after,
.form-field-date:disabled::after {
  right: 2px; /* ✅ RESTAURADO: Vuelve a 2px con z-index correcto */
  background: linear-gradient(
    90deg,
    rgba(227, 230, 232, 0) 0%,
    rgba(227, 230, 232, 1) 100%
  );
  z-index: 1; /* ✅ Capa 1: Debajo del icono */
}

/* Select disabled: fade adaptado al gris de fondo (light mode) */
.form-field.is-disabled .form-field-select,
.form-field-select:disabled {
  background-image:
    url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11L3 6L3.7 5.3L8 9.6L12.3 5.3L13 6L8 11Z' fill='%23595D62'/%3E%3C/svg%3E"),
    linear-gradient(
      90deg,
      rgba(227, 230, 232, 0) 0%,
      rgba(227, 230, 232, 1) 100%
    ) !important;
  background-repeat: no-repeat;
  background-position:
    right 2px center,
    right 2px top 0;
  background-size:
    16px 16px,
    24px 100%;
}

/* ========================================
   BADGE DE ESTATUS - Registro de movimiento
   Diseño desde Figma
   ======================================== */

.badge-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 120px;
  min-width: 120px;
  max-width: 100%;
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 2px;
  border: 1px dashed transparent;
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Badge: Registro nuevo - Verde */
.badge-status-nuevo {
  background-color: rgba(46, 125, 50, 0.12);
  color: #077e38;
  border-color: #077e38;
}

/* Paleta compartida para estado "cargado / facturado" */
:root {
  --status-cargado-bg: rgba(255, 232, 163, 0.5);
  --status-cargado-fg: #ffb319;
}

/* Badge: Registro cargado - Amarillo claro (Figma 2026-02-10) */
.badge-status-cargado {
  background-color: var(--status-cargado-bg); /* Amarillo claro 50% opacidad */
  color: #ed4e0a; /* Amarillo/naranja para texto */
  border-color: #ed4e0a;
}

/* Badge: Registro no cargado - Azul */
.badge-status-no-cargado {
  background-color: rgba(24, 107, 233, 0.12);
  color: #186be9;
  border-color: #186be9;
}

/* Badge: Error - Rojo */
.badge-status-error {
  background-color: rgba(211, 45, 34, 0.12);
  color: #a40f16;
  border-color: #a40f16;
}

.badge-status-text {
  display: block;
  white-space: nowrap;
}

/* Mobile canon: badge autoajustable al contenido en todos los módulos */
@media (max-width: 899px) {
  .card-header-actions .badge-status {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 30px;
    padding: 4px 8px;
    flex: 0 0 auto;
  }

  .badge-status {
    width: auto !important;
    min-width: 0 !important;
  }

  .card-header-actions .badge-status .badge-status-text {
    white-space: nowrap !important;
    line-height: 1.1 !important;
  }
}

/* Dark mode: Registro nuevo debe usar el verde canonico de dark */
.dark .badge-status-nuevo {
  background-color: rgba(10, 191, 91, 0.16);
  color: var(--green-status);
  border-color: var(--green-status);
}

.dark .badge-status-cargado {
  background-color: rgba(237, 78, 10, 0.2);
  color: #ffb86b;
  border-color: #ff9a4d;
}

.dark .badge-status-no-cargado {
  background-color: rgba(24, 107, 233, 0.22);
  color: #7eb0ff;
  border-color: #4f94ff;
}

.dark .badge-status-error {
  background-color: rgba(211, 45, 34, 0.22);
  color: #ff9aa2;
  border-color: #ff7278;
}

/* ========================================
   CANON GLOBAL: Pointer de fila seleccionada
   ======================================== */
.canon-row-pointer {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #077e38;
  pointer-events: none;
  opacity: 0;
  transform: translate(-6px, -50%);
}

.canon-row-pointer.is-visible {
  animation: canon-row-pointer-bounce 3s ease-out forwards;
}

@keyframes canon-row-pointer-bounce {
  0% { opacity: 0; transform: translate(-12px, -50%) scale(0.92); }
  12% { opacity: 1; transform: translate(2px, -50%) scale(1); }
  20% { transform: translate(-3px, -50%) scale(0.995); }
  28% { transform: translate(2px, -50%) scale(1); }
  36% { transform: translate(-2px, -50%) scale(0.998); }
  44% { transform: translate(1.5px, -50%) scale(1); }
  52% { transform: translate(-1.5px, -50%) scale(0.999); }
  60% { transform: translate(1px, -50%) scale(1); }
  68% { transform: translate(-1px, -50%) scale(0.999); }
  76% { transform: translate(0.8px, -50%) scale(1); }
  84% { transform: translate(-0.6px, -50%) scale(1); }
  92% { opacity: 1; transform: translate(0.3px, -50%) scale(1); }
  100% { opacity: 1; transform: translate(0, -50%) scale(1); }
}

/* ========================================
   CHECKBOXES PERSONALIZADOS
   Diseño consistente en todo el sistema
   Diseño desde Figma - 16x16px
   ======================================== */

:root {
  --omega-checkbox-size: 12px;
  --omega-checkbox-radius: 2px;
  --omega-checkbox-border: #8d8d8d;
  --omega-checkbox-bg: #ffffff;
  --omega-checkbox-checked-bg: #161616;
  --omega-checkbox-checked-border: #161616;
  --omega-checkbox-focus-ring: rgba(15, 98, 254, 0.25);
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: var(--omega-checkbox-size) !important;
  height: var(--omega-checkbox-size) !important;
  min-width: var(--omega-checkbox-size) !important;
  max-width: var(--omega-checkbox-size) !important;
  min-height: var(--omega-checkbox-size) !important;
  max-height: var(--omega-checkbox-size) !important;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--omega-checkbox-border);
  border-radius: var(--omega-checkbox-radius);
  background: var(--omega-checkbox-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="checkbox"][hidden] {
  display: none !important;
}

input[type="checkbox"]::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s ease, transform 0.15s ease;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M8.91 1.63L3.75 6.79 1.09 4.14l-.7.7 3.36 3.36 5.86-5.86-.7-.71Z' fill='white'/%3E%3C/svg%3E");
}

input[type="checkbox"]:checked {
  border-color: var(--omega-checkbox-checked-border);
  background: var(--omega-checkbox-checked-bg);
}

input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: scale(1);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--omega-checkbox-focus-ring);
}

input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Checkboxes en headers de tabla: estilo negativo (12x12) */
th input[type="checkbox"],
.no-sort input[type="checkbox"] {
  border-color: #f4f4f4 !important;
  background: transparent !important;
}

th input[type="checkbox"]:checked,
.no-sort input[type="checkbox"]:checked {
  border-color: #f4f4f4 !important;
  background: #f4f4f4 !important;
}

th input[type="checkbox"]:checked::after,
.no-sort input[type="checkbox"]:checked::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M8.91 1.63L3.75 6.79 1.09 4.14l-.7.7 3.36 3.36 5.86-5.86-.7-.71Z' fill='%23161616'/%3E%3C/svg%3E") !important;
}

.maestro-checkbox-input {
  width: var(--omega-checkbox-size) !important;
  height: var(--omega-checkbox-size) !important;
  min-width: var(--omega-checkbox-size) !important;
  max-width: var(--omega-checkbox-size) !important;
  min-height: var(--omega-checkbox-size) !important;
  max-height: var(--omega-checkbox-size) !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
}

/* Base para checkbox custom */
.checkbox-custom {
  display: flex; /* ✅ CAMBIO CRÍTICO: flex en lugar de inline-flex para evitar bullets */
  align-items: center;
  justify-content: center;
  width: var(--omega-checkbox-size) !important;
  height: var(--omega-checkbox-size) !important;
  min-width: var(--omega-checkbox-size) !important;
  max-width: var(--omega-checkbox-size) !important;
  min-height: var(--omega-checkbox-size) !important;
  max-height: var(--omega-checkbox-size) !important;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--omega-checkbox-border);
  border-radius: var(--omega-checkbox-radius);
  background: var(--omega-checkbox-bg);
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  position: relative;
  overflow: hidden;
}

.checkbox-custom::before,
.checkbox-custom::marker {
  display: none !important;
  content: none !important;
}

/* Check interno para checkbox custom legacy (mismo canon que nativo) */
.checkbox-custom::after {
  content: "";
  display: block !important;
  width: 8px;
  height: 8px;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s ease, transform 0.15s ease;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M8.91 1.63L3.75 6.79 1.09 4.14l-.7.7 3.36 3.36 5.86-5.86-.7-.71Z' fill='white'/%3E%3C/svg%3E");
}

/* Checkbox desmarcado */
.checkbox-custom.unchecked {
  border-color: var(--omega-checkbox-border) !important;
  background: var(--omega-checkbox-bg) !important;
}

/* Checkbox marcado */
.checkbox-custom.checked {
  border-color: var(--omega-checkbox-checked-border) !important;
  background: var(--omega-checkbox-checked-bg) !important;
}

.checkbox-custom.checked::after {
  opacity: 1;
  transform: scale(1);
}

/* ✅ VARIANTE BLANCA - Para headers con fondo gris */
.checkbox-custom.checkbox-white.unchecked {
  border-color: #ffffff !important;
  background: transparent !important;
}

.checkbox-custom.checkbox-white.checked {
  border-color: #ffffff !important;
  background: #ffffff !important;
}

.checkbox-custom.checkbox-white.checked::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M8.91 1.63L3.75 6.79 1.09 4.14l-.7.7 3.36 3.36 5.86-5.86-.7-.71Z' fill='%23161616'/%3E%3C/svg%3E");
}

/* Hover states - Opcional: agregar opacidad o cambio de color */
.checkbox-custom:hover {
  opacity: 0.8;
}

/* ========================================
   BOTONES - Diseño desde Figma
   ======================================== */

:root {
  --omega-action-button-height: 30px;
  --omega-floating-button-height: 30px;
  --omega-floating-button-collapsed-height: 32px;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 140px;
  /* max-width eliminado para permitir que los botones crezcan según su contenido */
  height: var(--omega-action-button-height);
  min-height: var(--omega-action-button-height);
  padding: 4px 12px;
  font-family:
    "Roboto",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  background-color: #ffffff;
  color: #0b0b0b;
  border: 1px solid #595d62;
  border-radius: 2px;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
  white-space: nowrap;
  box-sizing: border-box;
  flex-shrink: 0; /* CRÍTICO: No permitir que se achiquen */
}

.btn-text {
  flex: 1;
  text-align: center;
  min-width: 0;
}

.btn-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.btn-icon--mask {
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.btn:hover {
  background-color: #f4f4f4;
  border-color: #0b0b0b;
}

.btn:active {
  background-color: #c6c6c6;
}

/* Focus VERDE según sistema de diseño */
.btn:focus {
  outline: 2px solid #077e38;
  outline-offset: -2px;
}

.btn:disabled {
  background-color: #ffffff;
  color: #c6c6c6;
  border-color: #c6c6c6;
  cursor: not-allowed;
}

/* Botón Success - Verde según Figma */
.btn-success {
  background-color: #077e38;
  color: #ffffff;
  border-color: #077e38;
}

.btn-success:hover {
  background-color: #065e2c;
}

.btn-success:active {
  background-color: #054520;
}

/* Focus VERDE */
.btn-success:focus {
  outline: 2px solid #077e38;
  outline-offset: -2px;
}

.btn-success .btn-icon svg path {
  fill: #ffffff;
}

.btn-success:disabled {
  background-color: #c6c6c6;
  border-color: #c6c6c6;
  color: #8d8d8d;
}

/* Botón Danger - Rojo según Figma */
.btn-danger {
  background-color: #a40f16;
  color: #ffffff;
  border-color: #a40f16;
}

.btn-danger:hover {
  background-color: #8a0c12;
}

.btn-danger:active {
  background-color: #70090e;
}

/* Focus ROJO */
.btn-danger:focus {
  outline: 2px solid #a40f16;
  outline-offset: -2px;
}

.btn-danger .btn-icon svg path {
  fill: #ffffff;
}

.btn-danger:disabled {
  background-color: #c6c6c6;
  border-color: #c6c6c6;
  color: #8d8d8d;
}

/* Botón negro sólido reutilizable (acciones primarias oscuras) */
.btn-black {
  background-color: #000000;
  color: #ffffff;
  border-color: #000000;
}

.btn-black:hover {
  background-color: #262626;
  border-color: #262626;
}

.btn-black:active {
  background-color: #404040;
  border-color: #404040;
}

.btn-black:focus {
  outline: 2px solid #077e38;
  outline-offset: -2px;
}

.btn-black:disabled {
  background-color: #c6c6c6;
  border-color: #c6c6c6;
  color: #8d8d8d;
}

/* Botón Outline Verde */
.btn-outline-green {
  font-family:
    "IBM Plex Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.16px;
  min-width: 160px;
  max-width: 220px; /* Limitar expansión excesiva */
  flex: 1; /* Permitir que el botón expanda */
  height: var(--omega-action-button-height);
  min-height: var(--omega-action-button-height);
  padding: 0 16px; /* ✅ Padding SIMÉTRICO para centrado perfecto */
  background-color: rgba(255, 255, 255, 0.01);
  color: #077e38;
  border: 2px solid #077e38;
  border-radius: 0;
  display: inline-flex; /* ✅ Flex para centrar contenido */
  align-items: center;
  justify-content: center; /* ✅ Centrar texto horizontalmente */
  position: relative; /* ✅ Para posicionar icono absolute */
  text-align: center;
  box-sizing: border-box;
}

.btn-outline-green:hover {
  background-color: #f0f7f4;
  border-color: #077e38;
}

.btn-outline-green:active {
  background-color: #d9ede3;
}

.btn-outline-green:focus {
  outline: 2px solid #077e38;
  outline-offset: -2px;
}

.btn-outline-green .btn-icon {
  position: absolute; /* ✅ Icono posicionado absolute */
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.btn-outline-green .btn-icon svg path {
  fill: #077e38;
}

/* Modificador opt-in para acciones cuyo ancho lo determina su contenido. */
.btn-compact {
  flex: 0 0 auto;
  width: 115px;
  min-width: 115px;
  max-width: 115px;
}

/* Composición opt-in para botones con texto e icono en flujo, sin solapamiento. */
.btn-content-spaced {
  gap: 8px;
  padding-left: 8px;
  padding-right: 8px;
}

.btn-content-spaced .btn-text {
  flex: 0 1 auto;
}

.btn-content-spaced .btn-icon {
  position: static;
  transform: none;
}

/* Botón Outline Rojo */
.btn-outline-red {
  font-family:
    "IBM Plex Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.16px;
  min-width: 160px;
  max-width: 220px; /* Limitar expansión excesiva */
  flex: 1; /* Permitir que el botón expanda */
  height: var(--omega-action-button-height);
  min-height: var(--omega-action-button-height);
  padding: 0 16px; /* ✅ Padding SIMÉTRICO para centrado perfecto */
  background-color: rgba(255, 255, 255, 0.01);
  color: #a40f16;
  border: 2px solid #a40f16;
  border-radius: 0;
  display: inline-flex; /* ✅ Flex para centrar contenido */
  align-items: center;
  justify-content: center; /* ✅ Centrar texto horizontalmente */
  position: relative; /* ✅ Para posicionar icono absolute */
  text-align: center;
  box-sizing: border-box;
}

.btn-outline-red:hover {
  background-color: #fef2f3;
  border-color: #a40f16;
}

.btn-outline-red:active {
  background-color: #fcd9db;
}

.btn-outline-red:focus {
  outline: 2px solid #a40f16;
  outline-offset: -2px;
}

.btn-outline-red .btn-icon {
  position: absolute; /* ✅ Icono posicionado absolute */
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.btn-outline-red .btn-icon svg path {
  fill: #a40f16;
}

/* Botón outline negro */
.btn-outline-black {
  font-family:
    "IBM Plex Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.16px;
  min-width: 160px;
  max-width: 220px;
  flex: 1;
  height: var(--omega-action-button-height);
  min-height: var(--omega-action-button-height);
  padding: 0 16px;
  background-color: rgba(255, 255, 255, 0.01);
  color: #161616;
  border: 1px solid #161616;
  border-radius: 0;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.btn-outline-black:hover {
  background-color: #f4f4f4;
  border-color: #161616;
}

.btn-outline-black:active {
  background-color: #e0e0e0;
}

.btn-outline-black:focus {
  outline: 2px solid #161616;
  outline-offset: -2px;
}

.btn-outline-black .btn-icon svg path {
  fill: #161616;
}

.btn-icon-right {
  right: 16px;
}

/* Pestañas internas de bloques reutilizables */
.block-tabs,
.consultar-more-tabs,
.tienda-language-tabs {
  position: relative;
  display: flex;
  align-items: end;
  gap: 5px;
  min-width: 0;
  width: 100%;
  flex-wrap: wrap;
  background: transparent;
  border-bottom: 1px solid #595d62;
}

.block-tab,
.consultar-more-tab,
.tienda-language-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  min-width: 100px;
  padding: 10px 20px;
  margin-left: 0;
  border: 0;
  border-top: 2px solid transparent;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  background: transparent;
  color: #161616;
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
}

.block-tab:first-child,
.consultar-more-tab:first-child,
.tienda-language-tab:first-child {
  margin-left: 0;
  border-left: 0;
}

.block-tab svg,
.consultar-more-tab svg,
.tienda-language-tab svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}

.block-tab svg path[fill="none"],
.block-tab svg circle[fill="none"],
.block-tab svg line,
.block-tab svg polyline,
.block-tab svg rect[fill="none"],
.consultar-more-tab svg path[fill="none"],
.consultar-more-tab svg circle[fill="none"],
.consultar-more-tab svg line,
.consultar-more-tab svg polyline,
.consultar-more-tab svg rect[fill="none"],
.tienda-language-tab svg path[fill="none"],
.tienda-language-tab svg circle[fill="none"],
.tienda-language-tab svg line,
.tienda-language-tab svg polyline,
.tienda-language-tab svg rect[fill="none"] {
  stroke: currentColor;
}

.block-tab svg path[fill]:not([fill="none"]),
.block-tab svg circle[fill]:not([fill="none"]),
.consultar-more-tab svg path[fill]:not([fill="none"]),
.consultar-more-tab svg circle[fill]:not([fill="none"]) {
  fill: currentColor;
}

.block-tab.is-active,
.consultar-more-tab.is-active,
.tienda-language-tab.is-active {
  position: relative;
  border-left: 1px solid #a40f16;
  border-right: 1px solid #a40f16;
  border-top: 3px solid #a40f16;
  border-bottom: 0;
  color: #a40f16;
  z-index: 5;
  border-radius: 3px 3px 2px 2px;
  background: #ffffff;
}

.block-tab.is-active::after,
.consultar-more-tab.is-active::after,
.tienda-language-tab.is-active::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 2px;
  background: #ffffff;
  pointer-events: none;
  z-index: 6;
}

.block-tab:focus-visible,
.consultar-more-tab:focus-visible,
.tienda-language-tab:focus-visible {
  outline: 2px solid #0f62fe;
  outline-offset: 1px;
}

.block-tabs-extra,
.consultar-more-tabs-extra,
.tienda-language-tabs-extra {
  margin-left: 8px;
  margin-right: 0;
  margin-bottom: 4px;
  min-width: 116px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #595d62;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  background: #ffffff;
  color: #161616;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.block-tabs-extra.is-hidden,
.consultar-more-tabs-extra.is-hidden,
.tienda-language-tabs-extra.is-hidden {
  display: none;
}

.block-tabs-extra strong,
.consultar-more-tabs-extra strong,
.tienda-language-tabs-extra strong {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  margin-left: 6px;
}

.block-tab-panel,
.consultar-more-panel,
.tienda-language-panel {
  display: none;
  min-height: 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease;
  will-change: opacity, transform;
}

.block-tab-panel.is-active,
.consultar-more-panel.is-active,
.tienda-language-panel.is-active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: auto;
}

.block-tab-panel.is-active.is-ready,
.consultar-more-panel.is-active.is-ready,
.tienda-language-panel.is-active.is-ready {
  opacity: 1;
  transform: translateY(0);
}

/* Dual panel blocks */
.dual-panel-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}

.dual-panel-block__pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

.dual-panel-block__pane--pad {
  padding: 12px 20px 20px;
}

.dual-panel-block__title {
  margin: 0 0 12px;
  color: var(--text-primary);
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

/* Preserve the dual-panel title scale when the page is hosted in the main layout. */
.main-content .dual-panel-block__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}

@media (max-width: 1023px) {
  .dual-panel-block--stack-tablet {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  .block-tabs,
  .consultar-more-tabs,
  .tienda-language-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .block-tab,
  .consultar-more-tab,
  .tienda-language-tab {
    min-width: 0;
    flex: none;
    white-space: normal;
    text-align: center;
  }

  .block-tabs-extra,
  .consultar-more-tabs-extra,
  .tienda-language-tabs-extra {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin: 8px 0 4px;
  }

  .block-tab-panel,
  .consultar-more-panel,
  .tienda-language-panel {
    min-width: 0;
  }
}

@media (min-width: 640px) and (max-width: 1399px) {
  .block-tabs,
  .consultar-more-tabs,
  .tienda-language-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .block-tab,
  .consultar-more-tab,
  .tienda-language-tab {
    min-width: 0;
    flex: none;
  }

  .block-tabs-extra,
  .consultar-more-tabs-extra,
  .tienda-language-tabs-extra {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin: 8px 0 4px;
  }
}

.tienda-language-fade {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 150ms ease, transform 150ms ease;
  will-change: opacity, transform;
}

.tienda-language-fade.is-ready {
  opacity: 1;
  transform: translateY(0);
}

.dark .block-tab,
.dark .consultar-more-tab,
.dark .tienda-language-tab {
  background: var(--card-background);
  color: var(--text-primary);
  border-right-color: var(--card-border);
  box-shadow: none;
  border-bottom-color: transparent;
}

.dark .block-tab.is-active,
.dark .consultar-more-tab.is-active,
.dark .tienda-language-tab.is-active {
  position: relative;
  border-left: 1px solid var(--red-status);
  border-right: 1px solid var(--red-status);
  color: var(--red-status);
  border-top: 3px solid var(--red-status);
  border-bottom: 0;
  z-index: 5;
  border-radius: 2px 2px 2px 2px;
}

.dark .block-tab.is-active::after,
.dark .consultar-more-tab.is-active::after,
.dark .tienda-language-tab.is-active::after {
  background: var(--card-background);
}

.dark .block-tabs-extra,
.dark .consultar-more-tabs-extra,
.dark .tienda-language-tabs-extra {
  background: var(--background);
  border-color: var(--card-border);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.32), inset 0 0 12px rgba(0, 0, 0, 0.24);
  color: var(--text-primary);
}

/* ========================================
   NOTICE BANNER (REUTILIZABLE)
   Avisos dismissibles por página (sin persistencia)
   ======================================== */

.notice-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid;
  border-radius: 2px;
  margin: 0;
  font-family:
    "IBM Plex Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.notice-banner__icon {
  width: 14px;
  height: 14px;
  flex: 0 0 16px;
  margin-top: 1px;
  color: inherit;
}

.notice-banner__content {
  flex: 1;
  min-width: 0;
}

.notice-banner__text {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.16px;
  color: inherit;
}

.notice-banner__title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.16px;
  color: inherit;
}

.notice-banner__description {
  margin: 2px 0 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.16px;
  color: inherit;
  opacity: 0.95;
}

.notice-banner__dismiss {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.notice-banner__dismiss:hover {
  background: rgba(0, 0, 0, 0.06);
}

.notice-banner__dismiss:focus-visible {
  outline: none;
  border-color: currentColor;
}

.notice-banner__dismiss svg {
  width: 14px;
  height: 14px;
}

.notice-banner--neutral {
  background: #eaf3ff;
  border-color: #9ec5f8;
  color: #1e3a8a;
}

.notice-banner--success {
  background: #e8f5ee;
  border-color: #8ad7a8;
  color: #0e6a34;
}

.notice-banner--warning {
  background: #fff4db;
  border-color: #d89b00;
  color: #8a5a00;
}

.notice-banner--danger {
  background: #fdebec;
  border-color: #f1a6aa;
  color: #a40f16;
}

html.dark .notice-banner--neutral {
  background: #1a2a40;
  border-color: #335f9f;
  color: #a7c7ff;
}

html.dark .notice-banner--success {
  background: #1b3a2a;
  border-color: #2b6a44;
  color: #86efac;
}

html.dark .notice-banner--warning {
  background: #3a2b13;
  border-color: #8f691f;
  color: #ffd166;
}

html.dark .notice-banner--danger {
  background: #3a1f22;
  border-color: #7a2f35;
  color: #ff9aa2;
}

/* ========================================
   MOBILE INPUT ZOOM FIX (GLOBAL)
   Evita auto-zoom en iOS al enfocar campos (<16px)
   Mantiene pinch-to-zoom disponible (no toca viewport)
   ======================================== */
@media (max-width: 768px) {
  :root {
    --mobile-input-font-size: 13px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="color"]),
  select,
  textarea,
  .form-field-input,
  .form-field-select,
  .form-field-date,
  .form-textarea,
  .search-modal-input {
    font-size: var(--mobile-input-font-size, 13px) !important;
  }
}

/* Responsive: Botones en móviles */
@media (max-width: 640px) {
  .btn {
    min-width: 90px;
    max-width: 100px;
    font-size: 11px;
    padding: 4px 6px;
  }

  .btn-icon {
    right: 6px;
  }

  /* Asegurar que el texto de los botones no se corte */
  .card-header-actions {
    flex-shrink: 0;
    min-width: max-content;
  }
}

/* Botones responsivos - solo icono en espacios reducidos */
.btn-responsive {
  min-width: 140px;
  flex-shrink: 0;
}

/* Primero achicamos un poco (pantallas medianas-grandes) */
@media (max-width: 800px) {
  .btn-responsive {
    min-width: 120px;
    padding: 4px 10px;
    font-size: 11px;
  }

  .btn-responsive .btn-icon {
    right: 10px;
  }
}

/* Luego achicamos más (pantallas medianas) */
@media (max-width: 700px) {
  .btn-responsive {
    min-width: 100px;
    padding: 4px 8px;
    font-size: 11px;
  }

  .btn-responsive .btn-icon {
    right: 8px;
  }
}

/* CRÍTICO: Pasar a solo icono ANTES para priorizar el título */
/* En pantallas de 650px o menos: solo icono (30x30px) */
@media (max-width: 650px) {
  .btn-responsive {
    min-width: 30px;
    width: 30px;
    padding: 4px;
  }

  .btn-responsive .btn-text {
    display: none;
  }

  .btn-responsive .btn-icon {
    position: static;
    transform: none;
  }
}

/* ========================================
   ANCHOS ESPECÍFICOS PARA CAMPOS DE FORMULARIO
   ======================================== */

/* Campos con ancho fijo de 100px (Devolución, Factura, Sucursal, Marca) */
.form-field.width-100 {
  width: 100px;
  min-width: 100px;
  max-width: 100px;
}

/* Campos libres al 100% (Serial, Categoría) */
.form-field.width-full {
  flex: 1;
  min-width: 0;
}

/* ========================================
   ANCHOS DE COLUMNAS DE TABLA
   Estilos reutilizables para colgroup
   ======================================== */

/* Tabla de facturas/devoluciones estándar (4 columnas) */
.col-numero {
  width: 80px;
}

.col-fecha {
  width: 100px;
}

.col-cliente {
  width: auto;
}

.col-monto {
  width: 90px;
}

.col-total {
  width: 90px;
}

/* Tabla de detalle de factura (5 columnas) */
/* Las columnas deben abrazar su contenido, excepto Descripción que toma el espacio restante */
.col-codigo {
  width: 72px;
}

.col-descripcion {
  width: auto; /* Toma el espacio restante disponible */
  min-width: 100px !important; /* ✅ Evitar compresión excesiva - permite scroll horizontal */
}

.col-precio {
  width: 72px;
}

.col-cantidad {
  width: 72px;
}

.col-devolucion {
  width: 72px;
}

/* Utilidades generales */
.tabla-contenedor-no-margin {
  margin-top: 0;
}

/* ========================================
   EMPTY STATE DE TABLAS
   Estilos para cuando la tabla no tiene datos
   ======================================== */

/* Fila de empty state */
.empty-state {
  background-color: transparent !important;
  cursor: default !important; /* ✅ CRÍTICO: Sin cursor pointer */
}

.empty-state:hover {
  background-color: transparent !important;
  cursor: default !important; /* ✅ CRÍTICO: Sin cursor pointer en hover */
}

.empty-state td {
  padding: 20px 24px !important; /* ✅ REDUCIDO de 40px a 20px vertical */
  text-align: center;
  border: none !important;
  cursor: default !important; /* ✅ CRÍTICO: Sin cursor pointer en celdas */
}

.empty-state td:hover {
  cursor: default !important; /* ✅ CRÍTICO: Sin cursor pointer en hover de celdas */
}

/* Contenedor del empty state */
.empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px; /* ✅ REDUCIDO de 16px a 12px */
  padding: 10px; /* ✅ REDUCIDO de 20px a 10px */
  /* SIN min-height para que se adapte al espacio disponible */
}

/* Icono del empty state */
.empty-state-content svg {
  width: 48px; /* ✅ REVERTIDO: Tamaño original */
  height: 48px;
  opacity: 0.6;
}

/* Icono por defecto del empty state de tabla. Se usa el glyph compartido
   carbon:search--locate; un SVG explícito en el contenido tiene precedencia. */
.tabla-maestro tbody tr.empty-state .empty-state-content:not(:has(svg))::before {
  content: "";
  display: block;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
    opacity: 0.6;
    background: center / contain no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjODg4ZDkyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTMwLDI4LjU4NTlsLTQuNjg4NS00LjY4ODRhOC4wMjgsOC4wMjgsMCwxLDAtMS40MTQsMS40MTRMMjguNTg1OSwzMFpNMTksMjVhNiw2LDAsMSwxLDYtNkE2LjAwNjYsNi4wMDY2LDAsMCwxLDE5LDI1WiIvPjxwYXRoIGQ9Ik0yIDEySDEwVjE0SDJ6Ii8+PHBhdGggZD0iTTIgMkgxOFY0SDJ6Ii8+PHBhdGggZD0iTTIgN0gxOFY5SDJ6Ii8+PC9zdmc+");
}

/* Texto principal */
.empty-state-text {
  font-family:
    "IBM Plex Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.16px;
  color: #595d62;
  margin: 0;
}

/* Subtexto */
.empty-state-subtext {
  font-family:
    "Roboto",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.16px;
  color: #949494;
  margin: 0;
}

/* ========================================
   EMPTY STATE DE SERIALES
   Estilos específicos para el empty state de seriales
   Tarea #26-03-12-A: Empty state mejorado siguiendo CANON Omega
   v297.19: Diseño minimalista - solo icono y texto, sin borde ni background
   ======================================== */

.seriales-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(140px, 30vh, 220px);
  padding: 16px 10px;
}

.seriales-empty-state .empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 190px;
  padding: 6px 4px;
}

.seriales-empty-state svg {
  width: 34px;
  height: 34px;
  opacity: 0.52;
  transition: opacity 0.2s ease;
}

.seriales-empty-state:hover svg {
  opacity: 0.65;
}

.seriales-empty-state .empty-state-text {
  font-family:
    "IBM Plex Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.16px;
  color: #525252;
  margin: 0;
  text-align: center;
}

.seriales-empty-state .empty-state-subtext {
  font-size: 12px;
  line-height: 1.35;
  color: #6f6f6f;
  text-align: center;
  text-wrap: balance;
}

/* ========================================
   MODAL EMAIL - Envío de correos
   Tarea #26-03-12-C: Modal de correo para RMA y Devoluciones
   v297.20: Diseño siguiendo CANON con chips de emails y tabla histórico
   ======================================== */

/* Contenedor específico para modal de email (más ancho) */
#email-modal .modal-container {
  max-width: 500px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

#email-modal .modal-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Info fija (solo lectura) */
.email-info-fija {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.32px;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.email-info-fija p {
  margin: 0 0 10px 0;
}

.email-info-fija p:last-child {
  margin-bottom: 0;
}

.email-info-fija strong {
  font-weight: 600;
}

/* Contenedor de chips de email - Siguiendo CANON de form-field */
.email-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 2px;
  align-items: center;
  padding: 6px 8px 1px 8px;
  min-height: 25px;
  height: auto;
  background: var(--input-background);
  border: 1px solid #949494;
  border-radius: 2px;
  box-sizing: border-box;
  transition: border-color 0.2s, outline 0.2s;
  cursor: text; /* Indicar que es clickeable para escribir */
}

.email-chips-container:focus-within {
  outline: none;
  border: 2px solid #077e38;
  padding: 5px 7px 0px 7px;
}

body.dark-mode .email-chips-container:focus-within {
  border-color: #077e38; /* Evitar doble borde en dark mode */
}

.email-chips-container:focus-within ~ .form-field-label {
  color: #077e38;
}

/* ✅ ESTADO DE ERROR para campo de emails - CANON */
.form-field.has-error .email-chips-container {
  border-color: #a40f16;
}

.form-field.has-error .form-field-label {
  color: #a40f16;
}

/* ✅ Asterisco ELIMINADO - No se usa en campo de emails */
.form-field.has-error .field-required-indicator {
  display: none; /* Asterisco desactivado */
}

/* Mensaje de error debajo del campo */
.form-field-error-message {
  display: none;
  font-family: "Roboto", sans-serif;
  font-size: 11px;
  line-height: normal;
  color: #a40f16;
  margin-top: 6px;
  margin-bottom: 0;
}

.form-field.has-error .form-field-error-message {
  display: block;
}

/* Chip individual de email - Estilo Figma */
.email-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 2px 2px 4px;
  background: #e3e6e8;
  border: 1px solid var(--input-background);
  border-radius: 2px;
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  line-height: 1;
  color: var(--foreground);
  box-shadow: 0px 2px 2px 0px rgba(51, 51, 51, 0.08);
  position: relative;
}

/* Chip manual (agregado a mano) - Verde según Figma */
.email-chip-manual {
  background: rgba(46, 125, 50, 0.12);
  border-color: var(--input-background);
}

.email-chip-manual .email-chip-text {
  color: #077e38;
}

.email-chip-manual .email-chip-remove {
  color: #077e38;
}

/* Chip inválido - Rojo para emails mal escritos */
.email-chip-invalid {
  background: rgba(164, 15, 22, 0.12);
  border-color: var(--input-background);
}

.email-chip-invalid .email-chip-text {
  color: #a40f16;
}

.email-chip-invalid .email-chip-remove {
  color: #a40f16;
}

.email-chip-text {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--foreground);
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.email-chip-remove:hover {
  opacity: 0.7;
}

.email-chip-remove svg {
  width: 8px;
  height: 8px;
}

/* Input de email dentro del contenedor de chips */
.email-input-inline {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 0;
  border: none !important; /* Forzar sin borde */
  background: transparent;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.32px;
  color: var(--foreground);
  outline: none !important; /* Forzar sin outline */
  display: inline-block;
  white-space: nowrap;
}

/* ✅ Asegurar que NO haya borde en ningún estado */
.email-input-inline:focus,
.email-input-inline:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ✅ Dark mode - Sin borde en el input */
body.dark-mode .email-input-inline,
body.dark-mode .email-input-inline:focus,
body.dark-mode .email-input-inline:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.email-input-inline::placeholder {
  color: #595d62;
  opacity: 0.6;
}

/* Evitar que el botón "+" cause salto de línea dentro del contenteditable */
.email-input-inline > * {
  display: inline-block;
  vertical-align: middle;
}

/* ✅ OCULTAR botón "+" cuando el input tiene foco (mientras el usuario escribe) */
.email-input-inline:focus .email-chip-add {
  display: none !important;
}

/* Botón + para agregar emails */
.email-chip-add {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 2px;
  background: #e3e6e8;
  border: 1px solid var(--input-background);
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.2s ease;
  box-shadow: 0px 2px 2px 0px rgba(51, 51, 51, 0.08);
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 2px;
}

.email-chip-add:hover {
  opacity: 0.8;
}

.email-chip-add svg {
  width: 16px;
  height: 16px;
}

.email-chip-add svg path {
  stroke: var(--foreground);
}

/* Dark mode - Mejor contraste para chips y botón */
.dark .email-chip {
  background: #3a3a3a;
  color: #ffffff;
}

.dark .email-chip-manual {
  background: rgba(46, 125, 50, 0.35);
  border-color: #3a3a3a;
}

.dark .email-chip-manual .email-chip-text {
  color: #4caf50;
}

.dark .email-chip-manual .email-chip-remove {
  color: #4caf50;
}

.dark .email-chip-invalid {
  background: rgba(164, 15, 22, 0.35);
  border-color: #3a3a3a;
}

.dark .email-chip-invalid .email-chip-text {
  color: #ff6b6b;
}

.dark .email-chip-invalid .email-chip-remove {
  color: #ff6b6b;
}

.dark .email-chip-add {
  background: #3a3a3a;
}

/* Campo de Mensaje opcional - EXACTO al diseño de Figma */
.mensaje-field {
  position: relative;
  width: 100%;
  min-height: 34px; /* Altura inicial como en Figma, permite crecer */
  padding-top: 6px;
  padding-bottom: 3px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}

.mensaje-field .form-textarea {
  width: 100%;
  height: 25px; /* Altura inicial */
  min-height: 25px !important;
  max-height: none; /* ✅ SIN LÍMITE - Se expande automáticamente */
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
  color: var(--foreground);
  background-color: var(--input-background);
  border: 1px solid #949494;
  border-radius: 2px;
  padding: 3px 5px 2px 8px; /* top: 3px, right: 5px, bottom: 2px, left: 8px como Figma */
  box-sizing: border-box;
  resize: none; /* ✅ Desactivar resize manual - Solo auto-expansión */
  transition: border-color 0.2s, outline 0.2s;
  overflow-y: hidden; /* ✅ Ocultar scroll - El textarea crece automáticamente */
}

.mensaje-field .form-textarea:focus {
  outline: none;
  border: 2px solid #077e38;
  padding: 2px 4px 1px 7px; /* Reducir 1px por el border de 2px */
}

.mensaje-field .form-textarea:focus ~ .form-textarea-label {
  color: #077e38;
}

/* Icono de resize específico para mensaje opcional - DENTRO del campo */
.mensaje-field .textarea-resize-icon {
  position: absolute;
  bottom: 6px; /* 3px del borde del textarea + 3px del padding-bottom */
  right: 5px; /* 3px del borde del textarea + 2px extra */
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 2;
}

/* Sección de histórico */
.email-historico-section {
  margin-top: 15px;
}

.email-historico-title {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: var(--text-primary);
  margin: 0 0 10px 0;
}

/* Footer del modal de email */
#email-modal .modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 15px 20px;
  border-top: 1px solid var(--border-primary);
}

/* Responsive para modal email */
@media (max-width: 640px) {
  #email-modal .modal-container {
    max-width: 100%;
    max-height: 95vh;
  }

  .email-chip-text {
    max-width: 120px;
  }

  .email-historico-table-wrapper {
    max-height: 120px;
  }
}

/* ========================================
   TOTALES Y NOTAS
   Sección debajo de la tabla de detalle
   ======================================== */

.totales-notas-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin-top: 20px; /* ✅ REVERTIDO: Separación estándar */
  width: 100%;
}

/* Campo de Notas (Textarea) */
.notas-field {
  position: relative;
  flex: 1 1 250px;
  min-width: 250px;
  min-height: 142px; /* Cambiado de height fijo a min-height */
  padding-top: 6px;
  padding-bottom: 3px;
  display: flex; /* Para que crezca con el contenido */
}

.form-textarea {
  width: 100%;
  min-height: 133px; /* Altura inicial calculada: 142px - 6px (padding-top) - 3px (padding-bottom) */
  max-height: 300px; /* Evitar que se solape con otros elementos */
  font-family:
    "Roboto",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
  color: var(--foreground);
  background-color: var(--input-background);
  border: 1px solid #949494;
  border-radius: 2px;
  padding: 4px 5px 4px 8px;
  box-sizing: border-box;
  resize: vertical; /* Solo permite resize vertical */
  transition:
    border-color 0.2s,
    outline 0.2s;
}

.form-textarea:focus {
  outline: none;
  border: 2px solid #077e38;
  padding: 3px 4px 3px 7px;
}

.form-textarea:disabled {
  background-color: #e3e6e8; /* Solo gris cuando disabled */
  color: #acb4b9;
  cursor: not-allowed;
}

/* Estado disabled para el campo de notas - mostrar candadito */
.notas-field.is-disabled .icon-locked {
  display: block;
}

/* ========================================
   UNIFORMIDAD GLOBAL DISABLED (CANON)
   Objetivo: un solo comportamiento para todos los modulos.
   ======================================== */

/* Quitar candados globalmente en campos bloqueados */
.form-field.is-disabled .icon-locked,
.notas-field.is-disabled .icon-locked,
.buscar-tag-lock {
  display: none !important;
}

/* Quitar pseudo-candados dibujados por ::after en modulos especificos */
.form-field.is-disabled::after,
.mensaje-field.is-disabled::after,
.notas-field.is-disabled::after {
  content: none !important;
  display: none !important;
}

/* Skin disabled global (light) */
.form-field.is-disabled .form-field-input,
.form-field.is-disabled .form-field-select,
.form-field.is-disabled .form-field-date,
.form-field.is-disabled .form-textarea,
.form-field-input:disabled,
.form-field-select:disabled,
.form-field-date:disabled,
.form-textarea:disabled,
textarea.form-field-input:disabled {
  background-color: #e3e6e8 !important;
  color: #acb4b9 !important;
  border-color: #949494 !important;
  -webkit-text-fill-color: #acb4b9 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

.form-field.is-disabled .form-field-label,
.form-field.is-disabled .form-textarea-label,
.notas-field.is-disabled .form-textarea-label {
  color: #595d62 !important;
}

/* Ocultar el indicador nativo de resize del navegador */
.form-textarea::-webkit-resizer {
  display: none;
}

.form-textarea::-moz-resizer {
  display: none;
}

.form-textarea-label {
  position: absolute;
  left: 8px;
  top: 10px;
  transform: translateY(-100%);
  font-family:
    "Roboto",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
  color: var(--foreground);
  background-color: var(--input-background);
  padding: 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 18px);
  z-index: 1;
  height: 14px;
  display: flex;
  align-items: flex-end;
}

.form-textarea:focus ~ .form-textarea-label {
  color: #077e38;
}

.textarea-resize-icon {
  position: absolute;
  bottom: 2px; /* 2px de separación del borde inferior */
  right: 2px; /* 2px de separación del borde derecho */
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 2; /* Asegurar que esté por encima del textarea */
}

.textarea-resize-icon svg {
  width: 16px;
  height: 16px;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
}

/* ===== TABLA HISTÓRICO DE CORREOS ===== */
.email-historico-section {
  margin-top: 15px;
}

.email-historico-title {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.16px;
  color: var(--foreground);
  margin: 0 0 10px 0;
}

.email-historico-table-wrapper {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #a8a8a8;
  border-radius: 2px;
  position: relative;
  /* ✅ Scrollbar más delgada - CANON */
  scrollbar-width: thin;
  scrollbar-color: #8d8d8d transparent;
}

/* ✅ Scrollbar personalizada para navegadores Webkit (Chrome, Edge, Safari) */
.email-historico-table-wrapper::-webkit-scrollbar {
  width: 6px;
}

.email-historico-table-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.email-historico-table-wrapper::-webkit-scrollbar-thumb {
  background: #8d8d8d;
  border-radius: 3px;
}

.email-historico-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #6f6f6f;
}

#email-historico-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  display: table;
  /* CRÍTICO: Eliminar cualquier scroll de la tabla */
  overflow: visible;
}

#email-historico-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #a8a8a8;
}

#email-historico-table tbody,
#email-historico-table thead {
  display: table-header-group;
  overflow: visible;
}

#email-historico-table tbody {
  display: table-row-group;
}

#email-historico-table tbody:has(tr.empty-state) {
  display: block;
  min-height: 120px;
  height: 120px;
  overflow: hidden;
}

#email-historico-table tbody tr.empty-state {
  display: block;
  width: 100%;
  height: 100%;
}

#email-historico-table tbody tr.empty-state td {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 12px;
  border: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

#email-historico-table tbody tr.empty-state .empty-state-content {
  width: min(280px, calc(100% - 24px));
  margin: 0 auto;
  text-align: center;
}

#email-historico-table tbody tr.empty-state .empty-state-content svg {
  display: block;
  width: 48px;
  height: 48px;
  opacity: 0.6;
  margin: 0 auto 8px;
}

#email-historico-table thead th {
  padding: 5px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.32px;
  color: #ffffff;
  text-align: left;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.04);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0; /* CRÍTICO: Fuerza que las celdas respeten el ancho de table-layout:fixed */
}

#email-historico-table tbody td {
  padding: 5px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.32px;
  color: var(--foreground);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.04);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0; /* CRÍTICO: Fuerza que las celdas respeten el ancho de table-layout:fixed */
}



#email-historico-table tbody tr:last-child td {
  border-bottom: none;
}

#email-historico-table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Columna de fecha */
#email-historico-table th:nth-child(2),
#email-historico-table td:nth-child(2) {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
}

/* Columna de correo - Ancho flexible */
#email-historico-table th:nth-child(3),
#email-historico-table td:nth-child(3) {
  width: auto;
  min-width: 0;
}

/* Columna de usuario - Ancho fijo */
#email-historico-table th:nth-child(4),
#email-historico-table td:nth-child(4) {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
}

/* Columnas de checkbox y botón - Ancho fijo 36px según CANON */
.email-historico-checkbox-col {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding: 0 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
}

.email-historico-delete-col {
  width: var(--table-action-cell-size, 28px) !important;
  min-width: var(--table-action-cell-size, 28px) !important;
  max-width: var(--table-action-cell-size, 28px) !important;
  padding: 3px !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
}

/* Centrado horizontal de checkboxes en tabla histórico */
.email-historico-checkbox-col .checkbox-custom,
.email-historico-checkbox-col .checkbox-header-all {
  margin: 0 auto;
  display: block;
}

/* Columnas con texto que pueden truncarse - Sistema CANON de tooltips */
#email-historico-table tbody td:not(.email-historico-checkbox-col):not(.email-historico-delete-col) {
  cursor: default;
  position: relative;
}

/* Botón de eliminar en histórico de correos - 29x18px según Figma */
.btn-delete-email-historico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  width: var(--table-action-button-size, 21px) !important;
  height: var(--table-action-button-size, 21px) !important;
  padding: 0;
  background: var(--table-action-delete-bg);
  color: var(--table-action-delete-fg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, transform 90ms ease, box-shadow 90ms ease;
  flex-shrink: 0;
  vertical-align: middle;
}

.btn-delete-email-historico:hover {
  background: var(--table-action-delete-hover-bg);
  color: var(--table-action-delete-hover-fg);
}

.btn-delete-email-historico:active {
  background: var(--table-action-delete-active-bg);
  color: var(--table-action-delete-active-fg);
  transform: translateY(1px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.btn-delete-email-historico:focus {
  outline: none;
}

.btn-delete-email-historico svg {
  display: block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  overflow: visible;
  transform: none;
}

.btn-delete-email-historico svg path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: var(--table-action-icon-stroke-width, 0.6);
}

/* Checkbox del header para seleccionar todos - Variante blanca para header gris */
.checkbox-header-all {
  width: 16px;
  height: 16px;
  border: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

/* Estado unchecked - Solo borde blanco */
.checkbox-header-all {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2H3C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V13C2 13.2652 2.10536 13.5196 2.29289 13.7071C2.48043 13.8946 2.73478 14 3 14H13C13.2652 14 13.5196 13.8946 13.7071 13.7071C13.8946 13.5196 14 13.2652 14 13V3C14 2.73478 13.8946 2.48043 13.7071 2.29289C13.5196 2.10536 13.2652 2 13 2V2ZM3 13V3H13V13H3Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

/* Estado checked - Borde blanco + checkmark */
.checkbox-header-all.checked {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2H3C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V13C2 13.2652 2.10536 13.5196 2.29289 13.7071C2.48043 13.8946 2.73478 14 3 14H13C13.2652 14 13.5196 13.8946 13.7071 13.7071C13.8946 13.5196 14 13.2652 14 13V3C14 2.73478 13.8946 2.48043 13.7071 2.29289C13.5196 2.10536 13.2652 2 13 2V2ZM7 10.75L4.5 8.27135L5.2954 7.5L7 9.1728L10.7044 5.5L11.5002 6.2886L7 10.75Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

.checkbox-header-all:hover {
  opacity: 0.8;
}

/* Columna de Totales */
.totales-column {
  flex: 1 1 250px;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  border-bottom: 1px dashed #595d62;
  font-family:
    "IBM Plex Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.16px;
  color: #0b0b0b;
}

.total-label {
  font-weight: 400;
  text-align: left;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.total-value {
  font-weight: 700;
  text-align: right;
  flex-shrink: 0; /* No permitir que los valores se encojan */
  margin-left: 10px; /* Separación mínima del label */
}

.total-final {
  border-bottom: 1px dashed #595d62;
}

.total-value-final {
  font-family:
    "IBM Plex Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  text-align: right;
  flex-shrink: 0; /* No permitir que el valor final se encojan */
  margin-left: 10px; /* Separación mínima del label */
}

/* Responsive: Mobile - Columna arriba, totales abajo */
@media (max-width: 768px) {
  .totales-notas-container {
    flex-direction: column;
    gap: 15px; /* Reducido de 20px */
    margin-top: 20px; /* ✅ REVERTIDO: Separación estándar */
    margin-bottom: 5px; /* Reducido más para menos espacio antes de controles */
  }

  .notas-field,
  .totales-column {
    width: 100%;
    min-width: 100%;
  }
}

/* ========================================
   BOTONES DE PAGINACIÓN
   Diseño desde Figma - Estilo CANON
   ======================================== */

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  width: 32px;
  height: 32px;
  padding: 4px 12px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #0b0b0b;
  background-color: transparent;
  border: 1px solid #595d62;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  box-sizing: border-box;
}

.pagination-btn:hover {
  background-color: #f4f4f4;
  border-color: #0b0b0b;
}

.pagination-btn:active {
  background-color: #c6c6c6;
}

/* Botón activo/seleccionado - Rojo según Figma */
.pagination-btn-active {
  background-color: #a40f16;
  color: #ffffff;
  border-color: #a40f16;
  font-weight: 700;
}

.pagination-btn-active:hover {
  background-color: #8a0d12;
  border-color: #8a0d12;
}

.pagination-btn-active:active {
  background-color: #6e0a0e;
}

/* Focus VERDE según sistema de diseño */
.pagination-btn:focus {
  outline: 2px solid #077e38;
  outline-offset: -2px;
}

/* Botones de navegación (anterior/siguiente) - Solo icono, 24x24px */
.pagination-btn svg {
  width: 24px;
  height: 24px;
  display: block;
}

.pagination-btn:disabled {
  background-color: transparent;
  color: #c6c6c6;
  border-color: #c6c6c6;
  cursor: not-allowed;
  opacity: 0.5;
}

.pagination-btn:disabled svg path {
  fill: #c6c6c6;
}

/* ========================================
   CONTROLES (Dropdown + Botones)
   Sección al final del bloque
   ======================================== */

.controles-container {
  display: flex;
  flex-wrap: wrap; /* Permitir wrap */
  gap: 18px; /* Gap de 18px como en Figma */
  align-items: center;
  justify-content: center; /* Centrar horizontalmente */
  padding: 10px 0;
  margin-top: 10px;
  width: 100%;
}

/* El dropdown - crece con min-width */
.controles-container .form-field {
  flex: 3 1 0; /* 30% del espacio - Cambiado de "1 1 0" */
  min-width: 150px; /* Ancho mínimo como en Figma */
  max-width: none;
}

.controles-botones {
  display: flex;
  flex-wrap: wrap; /* Permitir wrap de botones */
  gap: 10px;
  align-items: center;
  justify-content: flex-end; /* ✅ Alinear botones a la derecha */
  flex: 7 1 0; /* 70% del espacio - Cambiado de "1 1 0" */
  min-width: 170px; /* Ancho mínimo del contenedor */
  max-width: 600px; /* Ancho máximo como en Figma */
}

/* Los botones se distribuyen equitativamente */
.controles-botones .btn {
  flex: 1 1 0; /* Crecen proporcionalmente */
  min-width: 180px; /* Ancho mínimo de cada botón como en Figma */
  white-space: nowrap;
}

/* Responsive: Mobile - Todo apilado verticalmente al 100% */
@media (max-width: 1500px) {
  .controles-container {
    flex-direction: column;
    align-items: stretch; /* Los elementos ocupan 100% del ancho */
    gap: 18px;
    padding: 10px 0;
  }

  .controles-container .form-field {
    width: 100%;
    max-width: 100%;
    min-width: auto;
    flex: 0 0 auto;
  }

  .controles-botones {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    align-items: stretch; /* Los botones ocupan 100% */
    gap: 10px;
    min-width: auto;
    flex: 0 0 auto;
  }

  /* MOSTRAR TEXTO en botones de reimpresión en mobile */
  .controles-botones .btn {
    width: 100%;
    max-width: 100%;
    min-width: auto;
    padding: 8px 40px 8px 16px; /* Mantener espacio para ícono */
    flex: 0 0 auto;
    font-size: 14px; /* Aumentado de 12px a 14px para mejor legibilidad en mobile */
  }

  .controles-botones .btn .btn-text {
    display: inline !important;
  }

  .controles-botones .btn .btn-icon {
    position: absolute !important;
    right: 16px !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
  }
}

/* ========================================
   CARD CON ALTURA COMPLETA
   Para bloques que ocupan 100% vertical
   ======================================== */

.card-full-height {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0; /* CRÍTICO: Permitir que flex funcione */
}

/* ✅ V262: FIX DESBORDAMIENTO - Contener contenido dentro del card */
.card-full-height .card-body {
  flex: 1; /* Crecer para ocupar espacio disponible */
  display: flex;
  flex-direction: column;
  min-height: 0; /* ✅ CAMBIADO: De 100% a 0 - Evitar crecimiento excesivo */
  max-height: 100%; /* ✅ AGREGADO: Límite superior - No crecer más allá del card */
  overflow: hidden; /* ✅ CRÍTICO: Evitar que el contenido desborde */
  gap: 10px; /* ✅ CANON FIJO: 10px entre formulario y tabla SIEMPRE */
  padding: 0 20px 20px 20px; /* ✅ CANON: SIEMPRE 20px de padding en el fondo, SIN padding-top */
}

/* ✅ v289: FIX CRÍTICO - Card-body scrollable en detalle de factura cuando contenido no cabe */
.card-detail-invoice .card-body {
  overflow-y: auto !important; /* ✅ Permitir scroll vertical cuando contenido excede altura */
  overflow-x: hidden !important; /* Ocultar scroll horizontal */
}

/* ✅ CRÍTICO: La tabla dentro del card-body DEBE crecer también */
.card-full-height .card-body .tabla-contenedor {
  flex: 1; /* Ocupar el espacio restante después del formulario */
  display: flex;
  flex-direction: column;
  min-height: 0; /* Permitir que funcione el flex */
  overflow: hidden; /* ✅ V262: CAMBIADO de visible a hidden - Contener footer dentro del card */
  gap: 0; /* Sin gap entre tabla y footer */
}

/* ✅ v288b: FIX CRÍTICO - Tabla de detalle NO debe usar flex: 1, debe tener altura máxima fija */
.card-full-height .card-body .tabla-contenedor:has(#table-detail),
.card-full-height .card-body .tabla-contenedor:has(#RMAProductsTable) {
  flex: 0 0 auto !important; /* ✅ NO ocupar todo el espacio - altura basada en contenido */
  max-height: 540px !important; /* ✅ Limitar altura para dejar espacio a totales-notas */
  overflow: visible !important; /* ✅ Permitir que el scrollbar del tbody sea visible */
}

/* La tabla dentro de tabla-contenedor debe ocupar todo el espacio */
.card-full-height .card-body .tabla-contenedor .tabla-maestro {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%; /* ✅ CRÍTICO: No crecer más allá del contenedor */
}

/* El tbody dentro de la tabla crece para llenar el espacio */
.card-full-height .card-body .tabla-contenedor .tabla-maestro tbody {
  flex: 1;
  min-height: 189px; /* Mínimo: 7 filas */
  height: auto !important; /* Anular altura fija */
  overflow-y: auto;
  max-height: 100%; /* ✅ v281: RESTAURADO para tablas SIN paginación (Buscar RMA, Buscar Factura) */
}

/* ✅ v291: FIX RESPONSIVE - Tabla "Detalle de factura" con altura flexible según resolución */
.card-full-height .card-body .tabla-contenedor:has(#table-detail) .tabla-maestro tbody,
.card-full-height .card-body .tabla-contenedor:has(#RMAProductsTable) .tabla-maestro tbody {
  min-height: 100px !important; /* ✅ BASE: Altura mínima para mobile/tablet */
  max-height: 100px !important; /* ✅ BASE: Altura máxima para mobile/tablet - tbody con scroll */
  overflow-y: auto !important; /* ✅ Scroll vertical interno en el tbody */
  display: block; /* ✅ CRÍTICO: Necesario para que overflow-y funcione */
}

/* ✅ v294: Desktop normal (900px+) - Altura 150px */
@media (min-width: 900px) {
  .card-full-height .card-body .tabla-contenedor:has(#table-detail) .tabla-maestro tbody,
  .card-full-height .card-body .tabla-contenedor:has(#RMAProductsTable) .tabla-maestro tbody {
    min-height: 150px !important;
    max-height: 150px !important;
  }
}

/* ✅ v294: Desktop grande (1600px+) - Altura 200px NUEVO - Más conservador */
@media (min-width: 1600px) {
  .card-full-height .card-body .tabla-contenedor:has(#table-detail) .tabla-maestro tbody,
  .card-full-height .card-body .tabla-contenedor:has(#RMAProductsTable) .tabla-maestro tbody {
    min-height: 200px !important;
    max-height: 200px !important;
  }
}

/* ✅ v294: Desktop XL (1900px+) - Altura 280px REDUCIDO de 350px */
@media (min-width: 1900px) {
  .card-full-height .card-body .tabla-contenedor:has(#table-detail) .tabla-maestro tbody,
  .card-full-height .card-body .tabla-contenedor:has(#RMAProductsTable) .tabla-maestro tbody {
    min-height: 280px !important;
    max-height: 280px !important;
  }
}

/* ✅ v290: CRÍTICO - thead y tr deben ajustarse al ancho cuando tbody es display: block */
.card-full-height .card-body .tabla-contenedor:has(#table-detail) .tabla-maestro thead,
.card-full-height .card-body .tabla-contenedor:has(#RMAProductsTable) .tabla-maestro thead,
.card-full-height .card-body .tabla-contenedor:has(#table-detail) .tabla-maestro thead tr,
.card-full-height .card-body .tabla-contenedor:has(#RMAProductsTable) .tabla-maestro thead tr,
.card-full-height .card-body .tabla-contenedor:has(#table-detail) .tabla-maestro tbody tr,
.card-full-height .card-body .tabla-contenedor:has(#RMAProductsTable) .tabla-maestro tbody tr {
  display: table; /* ✅ Mantener comportamiento de tabla */
  width: 100%; /* ✅ Ocupar todo el ancho disponible */
  table-layout: fixed; /* ✅ Respetar anchos de colgroup */
}

/* ✅ v281: OVERRIDE para tablas CON DataTables - NO limitar altura para mostrar paginación */
.card-full-height .card-body .tabla-contenedor.has-datatables .tabla-maestro tbody {
  max-height: none; /* ✅ Sin límite para que la paginación sea visible */
}

/* ✅ v286: FIX CANÓNICO - En resoluciones bajas, limitar altura y ajustar tabla */
@media (max-width: 900px) {
  /* Limitar altura del card-body al viewport en mobile */
  .card-detail-invoice .card-body {
    max-height: calc(100vh - 200px) !important; /* ✅ Limitar altura al viewport */
  }
  
  /* La tabla NO debe usar flex: 1 en mobile - debe crecer naturalmente */
  .card-detail-invoice .card-body .tabla-contenedor {
    flex: 0 1 auto !important; /* ✅ NO ocupar todo el espacio - crecer según contenido */
    overflow: visible !important; /* ✅ Permitir que scrollbar sea visible */
    max-height: none !important; /* ✅ Sin límite - crecer naturalmente */
  }

  /* Devoluciones/RMA mobile: sin scroll interno en detalle de factura */
  body:has(.card-search-returns) .card-detail-invoice .card-body,
  body:has(.card-search-rma) .card-detail-invoice .card-body {
    max-height: none !important;
    overflow-y: visible !important;
  }

  body:has(.card-search-returns) #table-detail tbody,
  body:has(.card-search-rma) #RMAProductsTable tbody {
    display: table-row-group !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
}

/* ✅ CRÍTICO: El footer NO debe crecer, debe ser de altura fija */
.card-full-height .card-body .tabla-contenedor .table-footer {
  flex: 0 0 auto; /* NO crecer, altura fija */
  flex-shrink: 0; /* NO encogerse nunca */
}

/* ========================================
   LISTA DE SERIALES
   Items con iconos de agregar/quitar
   ======================================== */

.seriales-list {
  display: flex;
  flex-direction: column;
  gap: 5px; /* ✅ Aumentado a 5px para mejor respiro */
  padding: 7px 0 0 0; /* ✅ Aumentado a 7px top */
  width: 100%;
  margin-left: -20px; /* ✅ Compensar padding-left del card-body para alinear iconos sobre margen */
  padding-left: 20px; /* ✅ Recrear espacio para los iconos en posición absoluta */
}

/* 📜 SCROLLBAR INTERNO: Para cuando hay muchos seriales (20+) */
.seriales-list-scrollable {
  overflow-x: hidden; /* Sin scroll horizontal en ningún caso */
}

/* ✅ v296: MOBILE - SIN scroll interno, crece libremente con el contenido */
@media (max-width: 899px) {
  .seriales-list-scrollable {
    min-height: auto !important; /* Sin mínimo forzado - altura natural */
    max-height: none !important; /* SIN límite - crece todo lo necesario */
    overflow-y: visible !important; /* Sin scroll interno */
    padding-right: 0; /* Sin espacio para scrollbar (no existe) */
  }
}

/* ✅ v296: DESKTOP - CON scroll interno controlado */
@media (min-width: 900px) {
  .seriales-list-scrollable {
    min-height: 180px; /* Mínimo para mostrar 4 seriales */
    max-height: 400px; /* Límite razonable - luego scroll */
    overflow-y: auto; /* Scroll interno cuando excede */
    padding-right: 5px; /* Espacio para el scrollbar */
  }

  .seriales-list-scrollable.seriales-list-empty {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: hidden !important;
    padding-right: 0 !important;
  }
}

/* 🎨 ESTILOS PERSONALIZADOS DE SCROLLBAR (SOLO DESKTOP) */
@media (min-width: 900px) {
  /* Webkit browsers */
  .seriales-list-scrollable::-webkit-scrollbar {
    width: 8px;
  }

  .seriales-list-scrollable::-webkit-scrollbar-track {
    background: #f4f4f4;
    border-radius: 4px;
  }

  .seriales-list-scrollable::-webkit-scrollbar-thumb {
    background: #c6c6c6;
    border-radius: 4px;
  }

  .seriales-list-scrollable::-webkit-scrollbar-thumb:hover {
    background: #8d8d8d;
  }

  /* Firefox */
  .seriales-list-scrollable {
    scrollbar-width: thin;
    scrollbar-color: #c6c6c6 #f4f4f4;
  }
}

.serial-item {
  display: flex;
  align-items: center;
  gap: 7px; /* ✅ Aumentado a 7px para separación icono-texto */
  padding: 0px 0px;
  border-radius: 4px;
  transition: background-color 150ms ease, transform 100ms ease;
  cursor: pointer;
  position: relative; /* ✅ Contexto para posición absoluta del icono */
  padding-left: 0px; /* ✅ Sin padding: texto alineado al borde izquierdo del contenido */
}

.serial-item:hover {
  background-color: #f4f4f4;
  transform: translateY(-1px);
}

/* Dark mode hover */
.dark .serial-item:hover {
  background-color: #262626;
}

.serial-icon {
  position: absolute; /* ✅ Posición absoluta sobre el margen */
  left: -17px; /* ✅ 17px a la izquierda del texto (sobre el padding del card-body) */
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 150ms ease;
}

.serial-icon:hover {
  transform: scale(1.15);
}

.serial-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.serial-text {
  font-family:
    "Roboto",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 12px; /* ✅ Aumentado a 12px para mejor legibilidad */
  font-weight: 400;
  line-height: normal;
  color: #0b0b0b;
  flex: 1;
  user-select: text;
}

/* Dark mode text */
.dark .serial-text {
  color: #f4f4f4;
}

/* Icono verde (agregar) */
.serial-icon-add {
  color: #077e38;
}

.serial-icon-add svg path {
  fill: #077e38;
}

/* Icono rojo (quitar) */
.serial-icon-remove {
  color: #a40f16;
}

.serial-icon-remove svg path {
  fill: #a40f16;
}

/* Sección de seriales */
.seriales-section {
  width: 100%;
  flex: 1 1 0; /* ✅ CRÍTICO: Distribuir espacio equitativamente entre secciones */
  min-height: 0; /* Permitir que flex funcione correctamente */
  overflow: visible; /* ✅ CAMBIADO: Permitir que iconos absolutos sean visibles */
  display: flex;
  flex-direction: column;
}

.seriales-section-title {
  font-family:
    "IBM Plex Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.16px;
  color: #0b0b0b;
  padding: 15px 0 5px 0; /* Más espacio arriba (15px) y menos abajo (5px) */
}

/* Campo de serial con icono de agregar */
.serial-input-container {
  padding: 0;
  width: 100%;
}

/* ========================================
   ICONO DENTRO DEL CAMPO DE SERIAL
   Icono + verde posicionado a la derecha
   ======================================== */

.form-field-icon-inside {
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
}

.form-field-icon-inside svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Input con icono interno - reducir padding derecho */
.serial-input-with-icon {
  padding-right: 5px !important;
  text-transform: uppercase;
}

.serial-input-with-icon:focus {
  padding-right: 4px !important;
}

/* ========================================
   ICONO DENTRO DEL CAMPO DE SERIAL
   Icono + verde posicionado a la derecha
   ======================================== */

.serial-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s;
}

.serial-icon:hover {
  opacity: 0.8;
}

.serial-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* ========================================
   BOTÓN DE MINIMIZAR (Toggle Form)
   Para colapsar/expandir bloques en mobile
   ======================================== */

.toggle-form-btn,
.toggle-block-btn {
  display: none; /* Oculto por defecto en desktop */
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 4px;
  background-color: #ffffff;
  border: 1px solid #595d62;
  border-radius: 2px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s, border-color 0.2s;
}

.toggle-form-btn:hover,
.toggle-block-btn:hover {
  background-color: #f4f4f4;
  border-color: #0b0b0b;
}

.toggle-form-btn:active,
.toggle-block-btn:active {
  background-color: #e3e6e8;
}

.toggle-form-btn svg,
.toggle-block-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease; /* ✅ Animación suave de rotación */
}

/* Efecto de rotación cuando está minimizado */
.toggle-form-btn.rotating svg,
.toggle-block-btn.rotating svg,
.card.minimized .toggle-block-btn svg {
  transform: rotate(180deg);
}

.toggle-form-btn svg path,
.toggle-block-btn svg path {
  fill: currentColor; /* ✅ Hereda color del botón para dark mode */
}

/* ✅ Color del botón (usado por currentColor) */
.toggle-form-btn,
.toggle-block-btn {
  color: #000000; /* Light mode */
}

/* Dark mode */
.dark .toggle-form-btn,
.dark .toggle-block-btn {
  color: #ffffff;
  background-color: #1a1a1a;
  border-color: #3a3a3a;
}

.dark .toggle-form-btn:hover,
.dark .toggle-block-btn:hover {
  background-color: #2a2a2a;
  border-color: #4a4a4a;
}

/* Mostrar SOLO en mobile */
@media (max-width: 899px) {
  /* ✅ v297.5: Cambiado de 767px a 899px para coincidir con breakpoint de minimizado */
  .toggle-form-btn,
  .toggle-block-btn {
    display: flex;
  }
}

/* ========================================
   BOTONES FLOTANTES
   Botonera fija en bottom-right (desktop) or bottom-center (mobile)
   Sistema de overflow con menú de elipsis para mobile
   ✅ CANON v297.6: 5px del borde (no más espacio innecesario)
   ======================================== */

.floating-buttons {
  position: fixed;
  bottom: 5px; /* ✅ CANON v297.6: 5px del borde inferior */
  right: 5px; /* ✅ CANON v297.6: 5px del borde derecho */
  z-index: 1000;
}

.floating-buttons-container {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #69757c;
  border-radius: 2px;
  box-shadow: 0 14px 36px rgba(17, 24, 39, 0.24), 0 6px 18px rgba(17, 24, 39, 0.16);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.floating-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: var(--omega-floating-button-height);
  min-height: var(--omega-floating-button-height);
  padding: 0 12px;
  box-sizing: border-box;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-family:
    "IBM Plex Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.16px;
  white-space: nowrap;
  transition: opacity 0.2s, background-color 0.2s;
}

.floating-btn:hover {
  opacity: 0.85;
}

.floating-btn:active {
  opacity: 0.7;
}

/* Estado colapsado - solo íconos */
.floating-buttons.collapsed .floating-btn {
  height: var(--omega-floating-button-collapsed-height);
  min-height: var(--omega-floating-button-collapsed-height);
  padding: 4px;
}

.floating-buttons.collapsed .floating-btn-text {
  display: none;
}

.floating-buttons.collapsed .floating-btn svg {
  width: 24px;
  height: 24px;
}

/* Estado expandido - con texto */
.floating-buttons:not(.collapsed) .floating-btn svg {
  width: 16px;
  height: 16px;
}

/* Botón verde */
.floating-btn-green {
  background-color: #077e38;
  color: #ffffff;
}

.floating-btn-green svg path {
  fill: #ffffff;
}

/* Botón negro */
.floating-btn-black {
  background-color: #000000;
  color: #ffffff;
}

.floating-btn-black svg path {
  fill: #ffffff;
}

/* Botón outline negro */
.floating-btn-outline-black {
  background-color: transparent;
  color: #000000;
  border: 1px solid #000000;
}

.floating-btn-outline-black svg path {
  fill: #000000;
}

/* Botón outline rojo */
.floating-btn-outline-red {
  background-color: transparent;
  color: #a40f16;
  border: 1px solid #a40f16;
}

.floating-btn-outline-red svg path {
  fill: #a40f16;
}

/* Botón rojo */
.floating-btn-red {
  background-color: #a40f16;
  color: #ffffff;
}

.floating-btn-red svg path {
  fill: #ffffff;
}

/* Botón toggle (flecha) */
.floating-toggle-btn {
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  border: 1px solid #595d62;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.16), 0px 0px 1px 0px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s;
  padding: 0;
}

.floating-toggle-btn:hover {
  background-color: #f4f4f4;
}

/* Icono de flecha rota cuando está colapsado */
.floating-buttons.collapsed .floating-toggle-btn {
  transform: translateY(-50%) rotate(180deg);
}

/* ========================================
   SISTEMA DE OVERFLOW - BOTÓN DE ELIPSIS
   ======================================== */

/* Botón de overflow (tres puntos) - Oculto por defecto */
.floating-btn-overflow {
  position: relative;
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #595d62 !important;
  outline: 1px solid #595d62 !important;
  outline-offset: 0;
  width: var(--omega-floating-button-collapsed-height);
  height: var(--omega-floating-button-collapsed-height);
  min-width: var(--omega-floating-button-collapsed-height);
  min-height: var(--omega-floating-button-collapsed-height);
  padding: 4px;
  display: none; /* Oculto por defecto, se muestra con JS */
  box-sizing: border-box;
}

.floating-btn-overflow:hover {
  background-color: #f4f4f4;
  border-color: #595d62 !important;
  outline-color: #595d62 !important;
}

.floating-btn-overflow svg {
  width: 24px !important;
  height: 24px !important;
}

/* Menú desplegable de overflow */
.floating-overflow-menu {
  position: fixed; /* ✅ FIJO respecto al viewport, no al contenedor */
  bottom: auto; /* Se calculará con JS */
  left: 50%; /* ✅ Centro horizontal del viewport */
  transform: translateX(-50%); /* ✅ Centrado perfecto */
  background-color: #ffffff;
  border: 1px solid #69757c;
  border-radius: 2px;
  box-shadow: 0 14px 36px rgba(17, 24, 39, 0.24), 0 6px 18px rgba(17, 24, 39, 0.16);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  display: none; /* Oculto por defecto */
  flex-direction: column;
  gap: 0;
  padding: 4px;
  min-width: auto; /* ✅ Ancho automático según contenido */
  width: max-content; /* ✅ Ancho del texto más largo */
  max-width: calc(100vw - 40px); /* ✅ No exceder viewport */
  z-index: 10000; /* ✅ Por encima de todo */
}

/* Mostrar menú cuando está activo */
.floating-overflow-menu.active {
  display: flex;
}

/* Botones dentro del menú de overflow */
.floating-overflow-menu .floating-btn {
  width: 100%;
  justify-content: flex-start; /* ✅ Alineado a la izquierda */
  padding: 10px 12px;
  border-radius: 2px;
  gap: 8px;
  text-align: left; /* ✅ Texto alineado a la izquierda */
  white-space: nowrap; /* ✅ No romper el texto */
}

.floating-overflow-menu .floating-btn:hover {
  background-color: #f4f4f4;
  opacity: 1;
}

/* Mostrar texto en botones del menú */
.floating-overflow-menu .floating-btn .floating-btn-text {
  display: inline !important;
  text-align: left; /* ✅ Texto alineado a la izquierda */
  flex: 1; /* ✅ Tomar el espacio restante */
}

/* Iconos en botones del menú */
.floating-overflow-menu .floating-btn svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
  margin-right: 0; /* ✅ Sin margen, el gap lo maneja */
}

/* Botones ocultos por overflow - se mueven al menú */
.floating-btn.overflow-hidden {
  display: none !important;
}

/* Responsive: Mobile */
@media (max-width: 768px) {
  .floating-buttons {
    bottom: 5px; /* ✅ CANON v297.6: 5px del borde inferior */
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: 9999;
    width: fit-content;
    max-width: calc(100vw - 10px); /* ✅ CANON v297.6: Margen 5px × 2 = 10px */
  }

  .floating-buttons-container {
    width: auto;
    max-width: calc(100vw - 10px);
    padding: 8px 10px;
    gap: 10px;
    justify-content: center;
  }

  .floating-buttons.floating,
  .floating-buttons.anchored {
    width: fit-content;
    max-width: calc(100vw - 10px);
  }

  /* Solo estado colapsado en mobile - Botones más grandes */
  .floating-buttons .floating-btn {
    height: var(--omega-floating-button-collapsed-height);
    min-height: var(--omega-floating-button-collapsed-height);
    padding: 4px;
    min-width: var(--omega-floating-button-collapsed-height);
    justify-content: center;
  }

  .floating-buttons .floating-btn-text {
    display: none !important;
  }

  .floating-buttons .floating-btn svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* Ocultar botón toggle en mobile */
  .floating-toggle-btn {
    display: none !important;
  }
  
  /* Botón de overflow en mobile: visible solo cuando JS lo habilita */
  .floating-btn-overflow {
    display: none;
  }
  
  /* Menú de overflow en mobile - centrado respecto al viewport */
  .floating-overflow-menu {
    /* Ya está centrado globalmente con position: fixed */
    /* No necesita override adicional */
  }

}

/* ========================================
   BOTONES FLOTANTES INTELIGENTES v297.6
   ✅ NUEVO CANON: Animación basada en visibilidad 50/51%
   - Flota cuando <50% de la botonera es visible
   - Ancla cuando ≥51% de la botonera es visible
   - Animación simple y ligera (solo sombra)
   - 10px de margen derecho (respiro visual)
   ======================================== */

/* Modo FLOTANTE: Botones fijos con sombra pronunciada */
.floating-buttons.floating {
  position: fixed;
  bottom: 5px; /* ✅ CANON v297.6: 5px del borde inferior */
  right: 10px; /* ✅ 10px de respiro del borde derecho */
  z-index: 1000;
}

/* Contenedor en modo flotante: Solo sombra pronunciada (SIN escala) */
.floating-buttons.floating .floating-buttons-container {
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.28), 0 8px 22px rgba(15, 23, 42, 0.2) !important;
  transition: box-shadow 0.25s ease-in-out; /* ✅ Solo transición de sombra */
}

/* Modo ANCLADO: Botones como contenido normal */
.floating-buttons.anchored {
  position: static;
  display: flex;
  justify-content: flex-end;
  margin: 5px 10px 5px 0; /* ✅ 5px arriba/abajo, 10px derecha (respiro) */
  width: 100%;
}

/* Contenedor en modo anclado: Sombra más sutil */
.floating-buttons.anchored .floating-buttons-container {
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.28), 0 8px 22px rgba(15, 23, 42, 0.2) !important;
  transition: box-shadow 0.25s ease-in-out;
}

/* En modo anclado, NO centrar el contenedor (mantener alineado a la derecha) */
.floating-buttons.anchored .floating-buttons-container {
  margin: 0; /* ✅ Sin auto (no centrar) */
}

/* ========================================
   KEYFRAMES: Animaciones visuales para flotar/anclar
   ======================================== */

/* Animación FLOTAR: Slide up + bounce (efecto "pop") */
@keyframes floatUp {
  0% {
    transform: translateY(20px);
    opacity: 0.7;
  }
  60% {
    transform: translateY(-5px); /* Pequeño rebote hacia arriba */
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Animación ANCLAR: Settle down suave */
@keyframes anchorDown {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

/* Mobile: Modo anclado también alineado a la derecha */
@media (max-width: 768px) {
  .floating-buttons.anchored {
    transform: none; /* Remover translateX del modo flotante */
    left: auto;
    right: auto;
    margin: 5px auto; /* ✅ CANON v297.6: centrado en mobile */
    justify-content: center; /* ✅ Mantener centrado en mobile */
  }
}

/* ========================================
   AJUSTES ESPECÍFICOS DE CAMPOS
   Reducir max-width de campos solicitados
   ======================================== */

/* Responsive: Mobile */
@media (max-width: 768px) {
  /* Ajustes específicos para campos en mobile si son necesarios */
}

/* ========================================
   BOTÓN DE ELIMINAR FILA (X) - Tablas
   Botón rectangular rojo 33x18px (mismo tamaño que botón +)
   ======================================== */

.btn-delete-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  width: var(--table-action-button-size, 21px) !important;
  height: var(--table-action-button-size, 21px) !important;
  padding: 0;
  background: var(--table-action-delete-bg);
  color: var(--table-action-delete-fg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, transform 90ms ease, box-shadow 90ms ease;
  flex-shrink: 0;
  vertical-align: middle; /* ✅ Centrado vertical */
  margin: 0; /* ✅ Sin margen que pueda desalinear */
}

.btn-delete-row:hover {
  background: var(--table-action-delete-hover-bg);
  color: var(--table-action-delete-hover-fg);
}

.btn-delete-row:active {
  background: var(--table-action-delete-active-bg);
  color: var(--table-action-delete-active-fg);
  transform: translateY(1px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.btn-delete-row:focus {
  outline: none; /* ✅ CORREGIDO: Eliminar borde verde innecesario */
}

.btn-delete-row svg {
  display: block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  overflow: visible;
  transform: none;
}

.btn-delete-row svg path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: var(--table-action-icon-stroke-width, 0.6);
}

/* ========================================
   BOTÓN DE AGREGAR A DETALLE (+) - Tablas
   Botón rectangular verde 33x18px (mismo tamaño que botón X)
   ======================================== */

.btn-add-to-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  width: var(--table-action-button-size, 21px) !important;
  height: var(--table-action-button-size, 21px) !important;
  padding: 0;
  background: var(--table-action-check-bg);
  color: var(--table-action-check-fg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, transform 90ms ease, box-shadow 90ms ease;
  flex-shrink: 0;
  vertical-align: middle; /*  Centrado vertical */
  margin: 0; /* ✅ Sin margen que pueda desalinear */
}

.btn-add-to-detail:hover {
  background: var(--table-action-check-hover-bg);
  color: var(--table-action-check-hover-fg);
}

.btn-add-to-detail:active {
  background: var(--table-action-check-active-bg);
  color: var(--table-action-check-active-fg);
  transform: translateY(1px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.btn-add-to-detail:focus {
  outline: none; /* Sin outline - ya tenemos highlights en las filas */
}

.btn-add-to-detail svg {
  display: block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  overflow: visible;
  transform: none;
}

.btn-add-to-detail svg path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: var(--table-action-icon-stroke-width, 0.6);
}

/* ========================================
   BOTONES DE ACCIÓN EN TABLA DETALLE
   Botones canónicos de lápiz y check
   ======================================== */

.table-action-btn-check,
.table-action-btn-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--table-action-button-size, 21px) !important;
  height: var(--table-action-button-size, 21px) !important;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
  margin: 0 auto;
  transition: background-color 140ms ease, color 140ms ease, transform 90ms ease, box-shadow 90ms ease, opacity 0.2s ease;
}

.table-action-btn-check {
  background: var(--table-action-check-bg) !important;
  color: var(--table-action-check-fg) !important;
}

.table-action-btn-edit {
  background: var(--table-action-edit-bg) !important;
  color: var(--table-action-edit-fg) !important;
}

.table-action-btn-check:hover {
  background: var(--table-action-check-hover-bg) !important;
  color: var(--table-action-check-hover-fg) !important;
}

.table-action-btn-edit:hover {
  background: var(--table-action-edit-hover-bg) !important;
  color: var(--table-action-edit-hover-fg) !important;
}

.table-action-btn-check:active {
  background: var(--table-action-check-active-bg) !important;
  color: var(--table-action-check-active-fg) !important;
}

.table-action-btn-edit:active {
  background: var(--table-action-edit-active-bg) !important;
  color: var(--table-action-edit-active-fg) !important;
}

.table-action-btn-check:active,
.table-action-btn-edit:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.table-action-btn-check svg,
.table-action-btn-edit svg {
  display: block;
  width: 16px !important;
  height: 16px !important;
  overflow: visible;
}

.table-action-btn-check svg path {
  fill: currentColor !important;
  stroke: currentColor !important;
  stroke-width: var(--table-action-icon-stroke-width, 0.6) !important;
}

.table-action-btn-edit svg path {
  fill: currentColor !important;
  stroke: none !important;
}

.table-action-btn-check,
.table-action-btn-edit {
  list-style: none !important;
  list-style-type: none !important;
}

.tabla-maestro tbody tr td:has(> .btn-delete-row),
.tabla-maestro tbody tr td:has(> .btn-add-to-detail),
.tabla-maestro tbody tr td:has(> .table-action-btn-check),
.tabla-maestro tbody tr td:has(> .table-action-btn-edit),
.tabla-maestro tbody tr td:has(> .consultar-edit-btn) {
  width: var(--table-action-cell-size, 28px);
  min-width: var(--table-action-cell-size, 28px);
  max-width: var(--table-action-cell-size, 28px);
  padding: 3px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.btn-icon-right {
  right: 16px;
}

/* ========================================
   NORMALIZACION GLOBAL DE CAMPOS (CANON)
   Fuerza consistencia cross-modulo sin tocar HTML por pagina.
   ======================================== */

.form-field-input,
.form-field-select,
.form-field-date,
.form-textarea,
.mensaje-field .form-textarea {
  font-size: 13px !important;
  line-height: 16px !important;
}

.form-field-input {
  padding: 4px 8px 3px 8px !important;
}

.form-field-select,
.form-field-date {
  padding: 4px 16px 3px 8px !important;
}

.form-field-input:focus {
  padding: 4px 8px 3px 8px !important;
}

.form-field-select:focus,
.form-field-date:focus {
  padding: 4px 16px 3px 8px !important;
}

.form-textarea,
.mensaje-field .form-textarea {
  padding: 5px 5px 3px 8px !important;
}

.form-textarea:focus,
.mensaje-field .form-textarea:focus {
  padding: 4px 4px 2px 7px !important;
}

.form-field-label,
.form-textarea-label {
  top: var(--omega-field-label-top, 12px) !important;
  left: 7px !important;
}

/* Hover global de campos: borde negro con fade in/out */
.form-field-input,
.form-field-select,
.form-field-date,
.form-textarea,
.mensaje-field .form-textarea {
  transition:
    border-color 180ms ease-in-out,
    outline-color 180ms ease-in-out,
    box-shadow 180ms ease-in-out;
}

.form-field-input:hover:not(:focus):not(:disabled),
.form-field-select:hover:not(:focus):not(:disabled),
.form-field-date:hover:not(:focus):not(:disabled),
.form-textarea:hover:not(:focus):not(:disabled),
.mensaje-field .form-textarea:hover:not(:focus):not(:disabled) {
  border-color: #000000 !important;
}

/* No hover negro en estados bloqueados o con error */
.form-field.is-disabled .form-field-input:hover,
.form-field.is-disabled .form-field-select:hover,
.form-field.is-disabled .form-field-date:hover,
.form-field.is-disabled .form-textarea:hover,
.notas-field.is-disabled .form-textarea:hover,
.form-field.has-error .form-field-input:hover,
.form-field.has-error .form-field-select:hover,
.form-field.has-error .form-field-date:hover,
.form-field.has-error .form-textarea:hover {
  border-color: inherit !important;
}

/* Refuerzo global: ano visual en 2 digitos en todos los date WebKit/Blink */
input[type="date"]::-webkit-datetime-edit-year-field,
input.form-field-date::-webkit-datetime-edit-year-field {
  width: 2ch !important;
  min-width: 2ch !important;
  max-width: 2ch !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-align: right !important;
}

/* Shared switch used by global controls and page-level settings. */
.canonical-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--text-secondary);
  font: 400 12px/16px "IBM Plex Sans", sans-serif;
  cursor: pointer;
  user-select: none;
}
.canonical-toggle input {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  opacity: 0;
  pointer-events: none;
}
.canonical-toggle-track {
  position: relative;
  width: 36px;
  height: 18px;
  flex: 0 0 36px;
  border: 2px solid var(--border-secondary);
  border-radius: 2px;
  background: var(--bg-secondary);
  box-sizing: border-box;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.canonical-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 1px;
  background: var(--text-secondary);
  transition: transform 160ms ease, background-color 160ms ease;
}
.canonical-toggle:hover .canonical-toggle-track {
  border-color: var(--text-secondary);
}
.canonical-toggle input:checked + .canonical-toggle-track {
  border-color: var(--green-status);
  background: var(--green-status);
}
.canonical-toggle input:checked + .canonical-toggle-track .canonical-toggle-thumb {
  background: var(--success-foreground);
  transform: translateX(18px);
}
.canonical-toggle input:focus-visible + .canonical-toggle-track {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}
.canonical-toggle:has(input:disabled) {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: .64;
}