/* =========================================================
   UBICACIÓN:
   frontend/src/pages/operaciones/etiquetas-moose/etiquetas-moose.css

   WIRTZ HUB · OPERACIONES · ETIQUETAS MOOSE
   CSS

   PARTE 1 DE 3

   CONTIENE:
   - Página base
   - Header
   - Acciones
   - Botones
   - Métricas
   - Toolbar
   - Búsqueda
   - Filtros
   - Selección
   - Tabla base
   - Estados generales
   ========================================================= */


/* =========================================================
   01. PÁGINA
   ========================================================= */

.etiquetas-moose-page {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  font-family:
    "DM Sans",
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: var(--text-primary, #f5f5f5);
}


/* =========================================================
   02. HEADER
   ========================================================= */

.etiquetas-moose-head {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}


.etiquetas-moose-brand {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}


.etiquetas-moose-brand__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.025)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.16);
}


.etiquetas-moose-brand__icon .icon {
  width: 20px;
  height: 20px;
}


.etiquetas-moose-brand__copy {
  min-width: 0;
}


.etiquetas-moose-eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary, #8d8d8d);
}


.etiquetas-moose-brand__copy h1 {
  margin: 0;
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--text-primary, #f5f5f5);
}


.etiquetas-moose-brand__copy p {
  margin: 7px 0 0;
  max-width: 720px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary, #a6a6a6);
}


/* =========================================================
   03. HEADER ACTIONS
   ========================================================= */

.etiquetas-moose-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}


/* =========================================================
   04. BOTONES
   ========================================================= */

.etiquetas-moose-btn,
.etiquetas-moose-icon-btn {
  box-sizing: border-box;
  font-family: inherit;
  font-synthesis: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}


.etiquetas-moose-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-primary, #f5f5f5);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    transform 140ms ease,
    opacity 140ms ease;
}


.etiquetas-moose-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.13);
}


.etiquetas-moose-btn:active:not(:disabled) {
  transform: translateY(1px);
}


.etiquetas-moose-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


.etiquetas-moose-btn .icon {
  width: 15px;
  height: 15px;
}


.etiquetas-moose-btn--primary {
  background: var(--accent, #f4f4f4);
  color: var(--accent-foreground, #101010);
  border-color: transparent;
}


.etiquetas-moose-btn--primary:hover:not(:disabled) {
  background: var(--accent-hover, #ffffff);
  border-color: transparent;
}


.etiquetas-moose-btn.is-active {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
}


.etiquetas-moose-icon-btn {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-secondary, #b3b3b3);
  cursor: pointer;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease,
    opacity 140ms ease;
}


.etiquetas-moose-icon-btn:hover:not(:disabled) {
  color: var(--text-primary, #ffffff);
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.12);
}


.etiquetas-moose-icon-btn:active:not(:disabled) {
  transform: translateY(1px);
}


.etiquetas-moose-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}


.etiquetas-moose-icon-btn .icon {
  width: 15px;
  height: 15px;
}


.etiquetas-moose-icon-btn.is-danger {
  color: #d97b7b;
}


.etiquetas-moose-icon-btn.is-danger:hover:not(:disabled) {
  background: rgba(217, 123, 123, 0.08);
  border-color: rgba(217, 123, 123, 0.18);
}


/* =========================================================
   05. MÉTRICAS
   ========================================================= */

.etiquetas-moose-metrics {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}


.etiquetas-moose-metric {
  min-width: 0;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.018)
    );
}


.etiquetas-moose-metric > span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary, #8f8f8f);
}


.etiquetas-moose-metric > strong {
  display: block;
  margin-top: 7px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--text-primary, #f8f8f8);
}


.etiquetas-moose-metric > small {
  margin-top: 7px;
  font-size: 11px;
  color: var(--text-tertiary, #818181);
}


/* =========================================================
   06. WORKSPACE
   ========================================================= */

.etiquetas-moose-workspace {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.016);
}


/* =========================================================
   07. TOOLBAR
   ========================================================= */

.etiquetas-moose-toolbar {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}


.etiquetas-moose-toolbar__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}


/* =========================================================
   08. BÚSQUEDA
   ========================================================= */

.etiquetas-moose-search {
  position: relative;
  min-width: 260px;
  max-width: 560px;
  flex: 1 1 420px;
}


.etiquetas-moose-search > .icon {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  color: var(--text-tertiary, #747474);
  pointer-events: none;
}


.etiquetas-moose-search input {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0 40px 0 36px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  outline: none;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-primary, #f6f6f6);
  font-family: inherit;
  font-size: 12px;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}


.etiquetas-moose-search input::placeholder {
  color: var(--text-tertiary, #666666);
}


.etiquetas-moose-search input:focus {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.025);
}


.etiquetas-moose-search button {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-tertiary, #777777);
  transform: translateY(-50%);
  cursor: pointer;
}


.etiquetas-moose-search button:hover {
  color: var(--text-primary, #ffffff);
  background: rgba(255, 255, 255, 0.05);
}


.etiquetas-moose-search button .icon {
  width: 14px;
  height: 14px;
}


/* =========================================================
   09. FILTROS
   ========================================================= */

.etiquetas-moose-filter-panel {
  width: 100%;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.018);
}


.etiquetas-moose-filter-panel[hidden] {
  display: none !important;
}


.etiquetas-moose-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}


.etiquetas-moose-filter-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}


/* =========================================================
   10. FIELDS
   ========================================================= */

.etiquetas-moose-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}


.etiquetas-moose-field > span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #a8a8a8);
}


.etiquetas-moose-field > span strong {
  color: #d88484;
}


.etiquetas-moose-field > small {
  margin-top: -2px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-tertiary, #777777);
}


.etiquetas-moose-field input,
.etiquetas-moose-field select,
.etiquetas-moose-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  outline: none;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-primary, #f7f7f7);
  font-family: inherit;
  font-size: 12px;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}


.etiquetas-moose-field input,
.etiquetas-moose-field select {
  height: 38px;
  padding: 0 11px;
}


.etiquetas-moose-field textarea {
  min-height: 70px;
  padding: 10px 11px;
  resize: vertical;
  line-height: 1.45;
}


.etiquetas-moose-field input:focus,
.etiquetas-moose-field select:focus,
.etiquetas-moose-field textarea:focus {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.02);
}


.etiquetas-moose-field input::placeholder,
.etiquetas-moose-field textarea::placeholder {
  color: var(--text-tertiary, #696969);
}


/* =========================================================
   11. ACTIVE FILTERS
   ========================================================= */

.etiquetas-moose-active-filters {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}


.etiquetas-moose-filter-chip {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-secondary, #b5b5b5);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}


.etiquetas-moose-filter-chip:hover {
  color: var(--text-primary, #ffffff);
  background: rgba(255, 255, 255, 0.055);
}


.etiquetas-moose-filter-chip .icon {
  width: 12px;
  height: 12px;
}


/* =========================================================
   12. SELECTION BAR
   ========================================================= */

.etiquetas-moose-selection-bar {
  display: none;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
}


.etiquetas-moose-selection-bar.is-visible {
  display: flex;
}


.etiquetas-moose-selection-bar__summary {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}


.etiquetas-moose-selection-bar__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.055);
}


.etiquetas-moose-selection-bar__icon .icon {
  width: 16px;
  height: 16px;
}


.etiquetas-moose-selection-bar__summary > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}


.etiquetas-moose-selection-bar__summary strong {
  font-size: 12px;
  color: var(--text-primary, #f8f8f8);
}


.etiquetas-moose-selection-bar__summary span {
  font-size: 10px;
  color: var(--text-tertiary, #858585);
}


.etiquetas-moose-selection-bar__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}


/* =========================================================
   13. TABLE WRAP
   ========================================================= */

.etiquetas-moose-table-wrap {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.012);
}


.etiquetas-moose-data-table-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
}


.etiquetas-moose-data-table-scroll::-webkit-scrollbar {
  height: 8px;
}


.etiquetas-moose-data-table-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}


/* =========================================================
   14. TABLE
   ========================================================= */

.etiquetas-moose-data-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
  table-layout: auto;
}


.etiquetas-moose-data-table th,
.etiquetas-moose-data-table td {
  box-sizing: border-box;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  vertical-align: middle;
  text-align: left;
}


.etiquetas-moose-data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(18, 18, 18, 0.98);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-tertiary, #7f7f7f);
}


.etiquetas-moose-data-table td {
  font-size: 11px;
  color: var(--text-secondary, #b4b4b4);
}


.etiquetas-moose-data-table tbody tr {
  transition:
    background 120ms ease,
    box-shadow 120ms ease;
}


.etiquetas-moose-data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.022);
}


.etiquetas-moose-data-table tbody tr.is-selected {
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.34);
}


.etiquetas-moose-data-table tbody tr:last-child td {
  border-bottom: 0;
}


.etiquetas-moose-data-table .is-check {
  width: 44px;
  text-align: center;
}


.etiquetas-moose-data-table .is-quantity {
  width: 145px;
  text-align: center;
}


.etiquetas-moose-data-table .is-actions {
  width: 200px;
  text-align: right;
}


/* =========================================================
   15. TABLE CONTENT
   ========================================================= */

.etiquetas-moose-table-primary {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}


.etiquetas-moose-table-primary strong {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-primary, #ededed);
}


.etiquetas-moose-table-primary small {
  font-size: 9px;
  color: var(--text-tertiary, #6e6e6e);
}


.etiquetas-moose-description-cell {
  min-width: 240px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}


.etiquetas-moose-description-cell strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-primary, #ececec);
}


.etiquetas-moose-description-cell small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  color: var(--text-tertiary, #777777);
}


.etiquetas-moose-code {
  font-family:
    "DM Mono",
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;
  font-size: 10px;
  letter-spacing: -0.01em;
  color: var(--text-secondary, #c4c4c4);
}


.etiquetas-moose-country {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-tertiary, #858585);
}


/* =========================================================
   16. STATUS
   ========================================================= */

.etiquetas-moose-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.018);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}


.etiquetas-moose-status > span {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
}


.etiquetas-moose-status.is-active {
  color: #9fc9ac;
}


.etiquetas-moose-status.is-active > span {
  background: #75a884;
}


.etiquetas-moose-status.is-inactive {
  color: #ad8585;
}


.etiquetas-moose-status.is-inactive > span {
  background: #9e6565;
}


/* =========================================================
   17. CHECKBOX
   ========================================================= */

.etiquetas-moose-check {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-flex;
  cursor: pointer;
}


.etiquetas-moose-check input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}


.etiquetas-moose-check span {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.02);
  transition:
    background 120ms ease,
    border-color 120ms ease;
}


.etiquetas-moose-check input:checked + span {
  background: var(--accent, #f4f4f4);
  border-color: var(--accent, #f4f4f4);
}


.etiquetas-moose-check input:checked + span::after {
  content: "";
  width: 7px;
  height: 4px;
  margin-top: -2px;
  border-left: 1.7px solid #101010;
  border-bottom: 1.7px solid #101010;
  transform: rotate(-45deg);
}


.etiquetas-moose-check input:disabled + span {
  opacity: 0.28;
}


/* =========================================================
   18. QUANTITY
   ========================================================= */

.etiquetas-moose-quantity {
  display: inline-grid;
  grid-template-columns: 30px 52px 30px;
  align-items: center;
  gap: 4px;
}


.etiquetas-moose-quantity button,
.etiquetas-moose-quantity input {
  height: 30px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-primary, #f2f2f2);
}


.etiquetas-moose-quantity button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 7px;
  cursor: pointer;
}


.etiquetas-moose-quantity button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}


.etiquetas-moose-quantity button:disabled,
.etiquetas-moose-quantity input:disabled {
  opacity: 0.28;
}


.etiquetas-moose-quantity button .icon {
  width: 13px;
  height: 13px;
}


.etiquetas-moose-quantity input {
  width: 52px;
  padding: 0 5px;
  border-radius: 7px;
  outline: none;
  text-align: center;
  font-family: inherit;
  font-size: 10px;
}


.etiquetas-moose-quantity input::-webkit-inner-spin-button,
.etiquetas-moose-quantity input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}


/* =========================================================
   19. TABLE ACTIONS
   ========================================================= */

.etiquetas-moose-table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}


/* =========================================================
   20. EMPTY / DENIED
   ========================================================= */

.etiquetas-moose-empty,
.etiquetas-moose-denied,
.etiquetas-moose-inline-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 34px 20px;
  text-align: center;
}


.etiquetas-moose-empty > .icon,
.etiquetas-moose-inline-empty > .icon {
  width: 22px;
  height: 22px;
  color: var(--text-tertiary, #707070);
}


.etiquetas-moose-empty strong,
.etiquetas-moose-inline-empty strong {
  font-size: 12px;
  color: var(--text-primary, #eeeeee);
}


.etiquetas-moose-empty p,
.etiquetas-moose-inline-empty p {
  max-width: 520px;
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-tertiary, #7b7b7b);
}


.etiquetas-moose-denied {
  min-height: 320px;
  flex-direction: row;
  align-items: center;
  text-align: left;
}


.etiquetas-moose-denied__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
}


.etiquetas-moose-denied__icon .icon {
  width: 19px;
  height: 19px;
}


.etiquetas-moose-denied > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}


.etiquetas-moose-denied > div > span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-tertiary, #7e7e7e);
}


.etiquetas-moose-denied > div > strong {
  font-size: 14px;
  color: var(--text-primary, #efefef);
}


.etiquetas-moose-denied > div > p {
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary, #9a9a9a);
}


/* =========================================================
   21. SKELETON
   ========================================================= */

.etiquetas-moose-skeleton {
  display: block;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.025)
    );
  background-size: 220% 100%;
  animation: etiquetasMooseSkeleton 1.25s linear infinite;
}


@keyframes etiquetasMooseSkeleton {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -20% 0;
  }
}


/* =========================================================
   22. SPINNER
   ========================================================= */

.etiquetas-moose-page .is-spinning,
.etiquetas-moose-modal .is-spinning,
.etiquetas-moose-toast .is-spinning {
  animation: etiquetasMooseSpin 0.85s linear infinite;
}


@keyframes etiquetasMooseSpin {
  to {
    transform: rotate(360deg);
  }
}


/* =========================================================
   FIN · PARTE 1 DE 3
   ========================================================= */
   /* =========================================================
   PARTE 2 DE 3

   PAGINACIÓN
   MODALES
   FORMULARIOS
   SWITCH
   DETALLE
   BARCODE INFO
   IMPORTACIÓN
   HISTORIALES
   GENERACIONES
   ========================================================= */


/* =========================================================
   23. PAGINACIÓN
   ========================================================= */

.etiquetas-moose-pagination {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px 2px;
}


.etiquetas-moose-pagination__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}


.etiquetas-moose-pagination__info span {
  font-size: 10px;
  color: var(--text-secondary, #9c9c9c);
}


.etiquetas-moose-pagination__info span strong {
  color: var(--text-primary, #ededed);
}


.etiquetas-moose-pagination__info small {
  font-size: 9px;
  color: var(--text-tertiary, #707070);
}


.etiquetas-moose-pagination__buttons {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
}


.etiquetas-moose-pagination__buttons button {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-secondary, #a3a3a3);
  cursor: pointer;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    opacity 120ms ease;
}


.etiquetas-moose-pagination__buttons button:hover:not(:disabled) {
  color: var(--text-primary, #ffffff);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}


.etiquetas-moose-pagination__buttons button:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}


.etiquetas-moose-pagination__buttons button .icon {
  width: 14px;
  height: 14px;
}


.etiquetas-moose-pagination__buttons > span {
  min-width: 32px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary, #efefef);
}


/* =========================================================
   24. MODAL MOUNT
   ========================================================= */

.etiquetas-moose-modal-mount {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  pointer-events: none;
}


.etiquetas-moose-modal-mount.is-open {
  display: block;
  pointer-events: auto;
}


.etiquetas-moose-modal-open {
  overflow: hidden;
}


/* =========================================================
   25. MODAL BACKDROP
   ========================================================= */

.etiquetas-moose-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}


/* =========================================================
   26. MODAL
   ========================================================= */

.etiquetas-moose-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(92vw, 620px);
  max-height: min(88vh, 920px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 15px;
  background: rgba(17, 17, 17, 0.985);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


.etiquetas-moose-modal--small {
  width: min(92vw, 460px);
}


.etiquetas-moose-modal--medium {
  width: min(92vw, 620px);
}


.etiquetas-moose-modal--large {
  width: min(94vw, 900px);
}


.etiquetas-moose-modal--xlarge {
  width: min(96vw, 1180px);
}


/* =========================================================
   27. MODAL HEADER
   ========================================================= */

.etiquetas-moose-modal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 17px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}


.etiquetas-moose-modal__title {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 11px;
}


.etiquetas-moose-modal__icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
}


.etiquetas-moose-modal__icon .icon {
  width: 16px;
  height: 16px;
}


.etiquetas-moose-modal__title > div {
  min-width: 0;
}


.etiquetas-moose-modal__title h2 {
  margin: 1px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary, #f5f5f5);
}


.etiquetas-moose-modal__title p {
  margin: 5px 0 0;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-tertiary, #808080);
}


/* =========================================================
   28. MODAL BODY
   ========================================================= */

.etiquetas-moose-modal__body {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  padding: 17px;
  scrollbar-width: thin;
}


.etiquetas-moose-modal__body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}


.etiquetas-moose-modal__body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}


/* =========================================================
   29. MODAL FOOTER
   ========================================================= */

.etiquetas-moose-modal__footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 17px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(255, 255, 255, 0.01);
}


/* =========================================================
   30. MODAL LOADING
   ========================================================= */

.etiquetas-moose-modal-loading {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: var(--text-tertiary, #818181);
}


.etiquetas-moose-modal-loading .icon {
  width: 22px;
  height: 22px;
}


.etiquetas-moose-modal-loading span {
  font-size: 10px;
}


/* =========================================================
   31. FORM
   ========================================================= */

.etiquetas-moose-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}


.etiquetas-moose-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}


/* =========================================================
   32. SWITCH
   ========================================================= */

.etiquetas-moose-switch {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.018);
  cursor: pointer;
}


.etiquetas-moose-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}


.etiquetas-moose-switch__control {
  position: relative;
  width: 34px;
  height: 19px;
  flex: 0 0 34px;
  margin-top: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  transition: background 140ms ease;
}


.etiquetas-moose-switch__control::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #898989;
  transition:
    left 140ms ease,
    background 140ms ease;
}


.etiquetas-moose-switch input:checked + .etiquetas-moose-switch__control {
  background: rgba(141, 190, 153, 0.25);
}


.etiquetas-moose-switch input:checked + .etiquetas-moose-switch__control::after {
  left: 18px;
  background: #93c4a0;
}


.etiquetas-moose-switch > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}


.etiquetas-moose-switch strong {
  font-size: 11px;
  color: var(--text-primary, #ededed);
}


.etiquetas-moose-switch small {
  font-size: 9px;
  line-height: 1.4;
  color: var(--text-tertiary, #777777);
}


/* =========================================================
   33. FORM NOTE
   ========================================================= */

.etiquetas-moose-form-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.018);
}


.etiquetas-moose-form-note > .icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-top: 1px;
  color: var(--text-secondary, #aaa);
}


.etiquetas-moose-form-note > div {
  min-width: 0;
}


.etiquetas-moose-form-note strong {
  display: block;
  font-size: 10px;
  color: var(--text-primary, #ededed);
}


.etiquetas-moose-form-note p {
  margin: 4px 0 0;
  font-size: 9px;
  line-height: 1.45;
  color: var(--text-tertiary, #777777);
}


/* =========================================================
   34. DETAIL
   ========================================================= */

.etiquetas-moose-detail {
  display: flex;
  flex-direction: column;
  gap: 13px;
}


.etiquetas-moose-detail__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.032),
      rgba(255, 255, 255, 0.015)
    );
}


.etiquetas-moose-detail__hero > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}


.etiquetas-moose-detail__hero > div > span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary, #777);
}


.etiquetas-moose-detail__hero > div > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary, #f4f4f4);
}


/* =========================================================
   35. BARCODE INFO
   ========================================================= */

.etiquetas-moose-barcode-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.022);
}


.etiquetas-moose-barcode-info__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
}


.etiquetas-moose-barcode-info__icon .icon {
  width: 18px;
  height: 18px;
}


.etiquetas-moose-barcode-info > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}


.etiquetas-moose-barcode-info > div > span {
  font-size: 9px;
  color: var(--text-tertiary, #777777);
}


.etiquetas-moose-barcode-info > div > strong {
  font-family:
    "DM Mono",
    "SFMono-Regular",
    Consolas,
    monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary, #f2f2f2);
}


.etiquetas-moose-barcode-info > div > small {
  font-size: 9px;
  color: var(--text-tertiary, #747474);
}


/* =========================================================
   36. DETAIL GRID
   ========================================================= */

.etiquetas-moose-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}


.etiquetas-moose-detail-grid > article {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.015);
}


.etiquetas-moose-detail-grid > article > span {
  font-size: 9px;
  color: var(--text-tertiary, #767676);
}


.etiquetas-moose-detail-grid > article > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: var(--text-primary, #e7e7e7);
}


/* =========================================================
   37. DETAIL DESCRIPTIONS
   ========================================================= */

.etiquetas-moose-detail-descriptions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


.etiquetas-moose-detail-descriptions > article {
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.014);
}


.etiquetas-moose-detail-descriptions span {
  display: block;
  margin-bottom: 5px;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-tertiary, #757575);
}


.etiquetas-moose-detail-descriptions p {
  margin: 0;
  font-size: 10px;
  line-height: 1.55;
  color: var(--text-secondary, #b0b0b0);
}


/* =========================================================
   38. DETAIL ACTIONS
   ========================================================= */

.etiquetas-moose-detail-actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding-top: 4px;
}


.etiquetas-moose-detail-quantity {
  display: flex;
  flex-direction: column;
  gap: 6px;
}


.etiquetas-moose-detail-quantity > span {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-tertiary, #767676);
}


.etiquetas-moose-detail-actions__buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}


/* =========================================================
   39. IMPORT PREVIEW
   ========================================================= */

.etiquetas-moose-import-preview,
.etiquetas-moose-import-history-detail,
.etiquetas-moose-generation-detail {
  display: flex;
  flex-direction: column;
  gap: 13px;
}


/* =========================================================
   40. IMPORT METRICS
   ========================================================= */

.etiquetas-moose-import-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}


.etiquetas-moose-import-metrics > article {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.015);
}


.etiquetas-moose-import-metrics span {
  display: block;
  font-size: 9px;
  color: var(--text-tertiary, #767676);
}


.etiquetas-moose-import-metrics strong {
  display: block;
  margin-top: 6px;
  font-size: 17px;
  color: var(--text-primary, #efefef);
}


.etiquetas-moose-import-metrics .is-new strong {
  color: #93c4a0;
}


.etiquetas-moose-import-metrics .is-update strong {
  color: #c3b48b;
}


.etiquetas-moose-import-metrics .is-error strong {
  color: #d58686;
}


/* =========================================================
   41. IMPORT TABLE
   ========================================================= */

.etiquetas-moose-import-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}


.etiquetas-moose-import-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}


.etiquetas-moose-import-table th,
.etiquetas-moose-import-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  text-align: left;
  vertical-align: middle;
}


.etiquetas-moose-import-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(20, 20, 20, 0.99);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary, #777777);
}


.etiquetas-moose-import-table td {
  font-size: 9px;
  color: var(--text-secondary, #aaa);
}


.etiquetas-moose-import-table tbody tr:last-child td {
  border-bottom: 0;
}


/* =========================================================
   42. IMPORT ACTION
   ========================================================= */

.etiquetas-moose-import-action,
.etiquetas-moose-import-result {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}


.etiquetas-moose-import-action {
  border: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-secondary, #aaa);
}


.etiquetas-moose-import-action.is-insertar {
  color: #92bf9d;
}


.etiquetas-moose-import-action.is-actualizar {
  color: #c3b78f;
}


.etiquetas-moose-import-action.is-error {
  color: #d48383;
}


.etiquetas-moose-import-result {
  color: #9fb6a5;
  background: rgba(120, 170, 130, 0.06);
}


.etiquetas-moose-import-result.is-error {
  color: #d38a8a;
  background: rgba(190, 90, 90, 0.06);
}


/* =========================================================
   43. IMPORT WARNING
   ========================================================= */

.etiquetas-moose-import-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(190, 170, 100, 0.12);
  border-radius: 10px;
  background: rgba(190, 170, 100, 0.035);
}


.etiquetas-moose-import-warning > .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 1px;
  color: #b7aa7e;
}


.etiquetas-moose-import-warning strong {
  display: block;
  font-size: 10px;
  color: #cbc09c;
}


.etiquetas-moose-import-warning p {
  margin: 4px 0 0;
  font-size: 9px;
  line-height: 1.45;
  color: #938a70;
}


.etiquetas-moose-import-limit-note {
  margin: -3px 0 0;
  font-size: 9px;
  color: var(--text-tertiary, #707070);
}


.etiquetas-moose-import-preview__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}


/* =========================================================
   44. HISTORY LIST
   ========================================================= */

.etiquetas-moose-history-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}


.etiquetas-moose-history-item {
  display: grid;
  grid-template-columns:
    minmax(220px, 1.8fr)
    repeat(4, minmax(80px, 0.7fr))
    auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.014);
}


.etiquetas-moose-history-item:hover {
  background: rgba(255, 255, 255, 0.025);
}


.etiquetas-moose-history-item__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}


.etiquetas-moose-history-item__main > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  color: var(--text-tertiary, #777777);
}


.etiquetas-moose-history-item__main > strong {
  font-size: 10px;
  color: var(--text-primary, #ececec);
}


.etiquetas-moose-history-item__main > small {
  font-size: 8px;
  color: var(--text-tertiary, #696969);
}


.etiquetas-moose-history-item__metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
}


.etiquetas-moose-history-item__metric > span {
  font-size: 8px;
  color: var(--text-tertiary, #6f6f6f);
}


.etiquetas-moose-history-item__metric > strong {
  font-size: 11px;
  color: var(--text-primary, #e4e4e4);
}


.etiquetas-moose-history-item__metric.is-new > strong {
  color: #8fbc9a;
}


.etiquetas-moose-history-item__metric.is-update > strong {
  color: #c3b48e;
}


.etiquetas-moose-history-item__metric.is-error > strong {
  color: #d48787;
}


.etiquetas-moose-history-item__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}


/* =========================================================
   45. GENERATION PRODUCTS
   ========================================================= */

.etiquetas-moose-generation-products {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.etiquetas-moose-generation-products > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}


.etiquetas-moose-generation-products > header > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}


.etiquetas-moose-generation-products > header span {
  font-size: 9px;
  color: var(--text-tertiary, #747474);
}


.etiquetas-moose-generation-products > header strong {
  font-size: 13px;
  color: var(--text-primary, #ededed);
}


.etiquetas-moose-generation-products__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}


.etiquetas-moose-generation-products__list > article {
  display: grid;
  grid-template-columns:
    minmax(170px, 1fr)
    minmax(170px, 1fr)
    90px;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.012);
}


.etiquetas-moose-generation-products__list > article > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}


.etiquetas-moose-generation-products__list span {
  font-size: 8px;
  color: var(--text-tertiary, #6d6d6d);
}


.etiquetas-moose-generation-products__list strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: var(--text-primary, #e7e7e7);
}


/* =========================================================
   FIN · PARTE 2 DE 3
   ========================================================= */
   /* =========================================================
   ETIQUETAS MOOSE · FIX MODO CLARO

   UBICACIÓN:
   frontend/src/pages/operaciones/etiquetas-moose/
   etiquetas-moose.css

   AGREGAR AL FINAL DEL ARCHIVO
   ========================================================= */


/* =========================================================
   DETECCIÓN TEMA CLARO
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-page,
body[data-theme="light"] .etiquetas-moose-page,
html.light .etiquetas-moose-page,
body.light .etiquetas-moose-page,
[data-theme="light"] .etiquetas-moose-page {
  color: #171717;
}


/* =========================================================
   BOTONES GENERALES
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-btn:not(.etiquetas-moose-btn--primary),
body[data-theme="light"] .etiquetas-moose-btn:not(.etiquetas-moose-btn--primary),
html.light .etiquetas-moose-btn:not(.etiquetas-moose-btn--primary),
body.light .etiquetas-moose-btn:not(.etiquetas-moose-btn--primary),
[data-theme="light"] .etiquetas-moose-btn:not(.etiquetas-moose-btn--primary) {
  background: #ffffff !important;
  border-color: #d9dce1 !important;
  color: #25282d !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}


html[data-theme="light"] .etiquetas-moose-btn:not(.etiquetas-moose-btn--primary):hover:not(:disabled),
body[data-theme="light"] .etiquetas-moose-btn:not(.etiquetas-moose-btn--primary):hover:not(:disabled),
html.light .etiquetas-moose-btn:not(.etiquetas-moose-btn--primary):hover:not(:disabled),
body.light .etiquetas-moose-btn:not(.etiquetas-moose-btn--primary):hover:not(:disabled),
[data-theme="light"] .etiquetas-moose-btn:not(.etiquetas-moose-btn--primary):hover:not(:disabled) {
  background: #f5f6f8 !important;
  border-color: #c7cbd1 !important;
  color: #101214 !important;
}


/* =========================================================
   BOTÓN PRIMARIO
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-btn--primary,
body[data-theme="light"] .etiquetas-moose-btn--primary,
html.light .etiquetas-moose-btn--primary,
body.light .etiquetas-moose-btn--primary,
[data-theme="light"] .etiquetas-moose-btn--primary {
  background: #111214 !important;
  border-color: #111214 !important;
  color: #ffffff !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.14),
    0 4px 12px rgba(0, 0, 0, 0.08);
}


html[data-theme="light"] .etiquetas-moose-btn--primary:hover:not(:disabled),
body[data-theme="light"] .etiquetas-moose-btn--primary:hover:not(:disabled),
html.light .etiquetas-moose-btn--primary:hover:not(:disabled),
body.light .etiquetas-moose-btn--primary:hover:not(:disabled),
[data-theme="light"] .etiquetas-moose-btn--primary:hover:not(:disabled) {
  background: #27292d !important;
  border-color: #27292d !important;
  color: #ffffff !important;
}


/* =========================================================
   BOTONES DE ICONOS
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-icon-btn,
body[data-theme="light"] .etiquetas-moose-icon-btn,
html.light .etiquetas-moose-icon-btn,
body.light .etiquetas-moose-icon-btn,
[data-theme="light"] .etiquetas-moose-icon-btn {
  background: #ffffff !important;
  border-color: #d9dce1 !important;
  color: #656b73 !important;
}


html[data-theme="light"] .etiquetas-moose-icon-btn:hover:not(:disabled),
body[data-theme="light"] .etiquetas-moose-icon-btn:hover:not(:disabled),
html.light .etiquetas-moose-icon-btn:hover:not(:disabled),
body.light .etiquetas-moose-icon-btn:hover:not(:disabled),
[data-theme="light"] .etiquetas-moose-icon-btn:hover:not(:disabled) {
  background: #f2f4f6 !important;
  border-color: #c9cdd3 !important;
  color: #17191c !important;
}


/* =========================================================
   ICONOS LUCIDE DENTRO DE BOTONES
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-btn:not(.etiquetas-moose-btn--primary) .icon,
body[data-theme="light"] .etiquetas-moose-btn:not(.etiquetas-moose-btn--primary) .icon,
html.light .etiquetas-moose-btn:not(.etiquetas-moose-btn--primary) .icon,
body.light .etiquetas-moose-btn:not(.etiquetas-moose-btn--primary) .icon,
[data-theme="light"] .etiquetas-moose-btn:not(.etiquetas-moose-btn--primary) .icon,
html[data-theme="light"] .etiquetas-moose-icon-btn .icon,
body[data-theme="light"] .etiquetas-moose-icon-btn .icon,
html.light .etiquetas-moose-icon-btn .icon,
body.light .etiquetas-moose-icon-btn .icon,
[data-theme="light"] .etiquetas-moose-icon-btn .icon {
  color: currentColor !important;
  stroke: currentColor !important;
}


/* =========================================================
   BOTÓN ACTIVO · FILTROS
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-btn.is-active,
body[data-theme="light"] .etiquetas-moose-btn.is-active,
html.light .etiquetas-moose-btn.is-active,
body.light .etiquetas-moose-btn.is-active,
[data-theme="light"] .etiquetas-moose-btn.is-active {
  background: #eceff2 !important;
  border-color: #bfc4cb !important;
  color: #111214 !important;
}


/* =========================================================
   BOTÓN PELIGRO
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-icon-btn.is-danger,
body[data-theme="light"] .etiquetas-moose-icon-btn.is-danger,
html.light .etiquetas-moose-icon-btn.is-danger,
body.light .etiquetas-moose-icon-btn.is-danger,
[data-theme="light"] .etiquetas-moose-icon-btn.is-danger {
  color: #dc4545 !important;
}


html[data-theme="light"] .etiquetas-moose-icon-btn.is-danger:hover:not(:disabled),
body[data-theme="light"] .etiquetas-moose-icon-btn.is-danger:hover:not(:disabled),
html.light .etiquetas-moose-icon-btn.is-danger:hover:not(:disabled),
body.light .etiquetas-moose-icon-btn.is-danger:hover:not(:disabled),
[data-theme="light"] .etiquetas-moose-icon-btn.is-danger:hover:not(:disabled) {
  background: #fff1f1 !important;
  border-color: #efbcbc !important;
  color: #c83232 !important;
}


/* =========================================================
   QUANTITY · BOTONES + INPUT
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-quantity button,
body[data-theme="light"] .etiquetas-moose-quantity button,
html.light .etiquetas-moose-quantity button,
body.light .etiquetas-moose-quantity button,
[data-theme="light"] .etiquetas-moose-quantity button {
  background: #ffffff !important;
  border-color: #d9dce1 !important;
  color: #4f555c !important;
}


html[data-theme="light"] .etiquetas-moose-quantity button:hover:not(:disabled),
body[data-theme="light"] .etiquetas-moose-quantity button:hover:not(:disabled),
html.light .etiquetas-moose-quantity button:hover:not(:disabled),
body.light .etiquetas-moose-quantity button:hover:not(:disabled),
[data-theme="light"] .etiquetas-moose-quantity button:hover:not(:disabled) {
  background: #f1f3f5 !important;
  border-color: #c7cbd1 !important;
  color: #111214 !important;
}


html[data-theme="light"] .etiquetas-moose-quantity input,
body[data-theme="light"] .etiquetas-moose-quantity input,
html.light .etiquetas-moose-quantity input,
body.light .etiquetas-moose-quantity input,
[data-theme="light"] .etiquetas-moose-quantity input {
  background: #ffffff !important;
  border-color: #d9dce1 !important;
  color: #17191c !important;
}


/* =========================================================
   TOOLBAR · INPUT BÚSQUEDA
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-search input,
body[data-theme="light"] .etiquetas-moose-search input,
html.light .etiquetas-moose-search input,
body.light .etiquetas-moose-search input,
[data-theme="light"] .etiquetas-moose-search input {
  background: #ffffff !important;
  border-color: #dde0e4 !important;
  color: #17191c !important;
}


html[data-theme="light"] .etiquetas-moose-search input::placeholder,
body[data-theme="light"] .etiquetas-moose-search input::placeholder,
html.light .etiquetas-moose-search input::placeholder,
body.light .etiquetas-moose-search input::placeholder,
[data-theme="light"] .etiquetas-moose-search input::placeholder {
  color: #8a9098 !important;
}


html[data-theme="light"] .etiquetas-moose-search > .icon,
body[data-theme="light"] .etiquetas-moose-search > .icon,
html.light .etiquetas-moose-search > .icon,
body.light .etiquetas-moose-search > .icon,
[data-theme="light"] .etiquetas-moose-search > .icon {
  color: #767c84 !important;
  stroke: currentColor !important;
}


/* =========================================================
   MÉTRICAS
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-metric,
body[data-theme="light"] .etiquetas-moose-metric,
html.light .etiquetas-moose-metric,
body.light .etiquetas-moose-metric,
[data-theme="light"] .etiquetas-moose-metric {
  background: #ffffff !important;
  border-color: #e1e3e6 !important;
}


html[data-theme="light"] .etiquetas-moose-metric > strong,
body[data-theme="light"] .etiquetas-moose-metric > strong,
html.light .etiquetas-moose-metric > strong,
body.light .etiquetas-moose-metric > strong,
[data-theme="light"] .etiquetas-moose-metric > strong {
  color: #17191c !important;
}


html[data-theme="light"] .etiquetas-moose-metric > span,
body[data-theme="light"] .etiquetas-moose-metric > span,
html.light .etiquetas-moose-metric > span,
body.light .etiquetas-moose-metric > span,
[data-theme="light"] .etiquetas-moose-metric > span {
  color: #6d737b !important;
}


html[data-theme="light"] .etiquetas-moose-metric > small,
body[data-theme="light"] .etiquetas-moose-metric > small,
html.light .etiquetas-moose-metric > small,
body.light .etiquetas-moose-metric > small,
[data-theme="light"] .etiquetas-moose-metric > small {
  color: #818790 !important;
}


/* =========================================================
   WORKSPACE
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-workspace,
body[data-theme="light"] .etiquetas-moose-workspace,
html.light .etiquetas-moose-workspace,
body.light .etiquetas-moose-workspace,
[data-theme="light"] .etiquetas-moose-workspace {
  background: #ffffff !important;
  border-color: #e2e4e7 !important;
}


/* =========================================================
   TABLA · TEXTO
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-data-table td,
body[data-theme="light"] .etiquetas-moose-data-table td,
html.light .etiquetas-moose-data-table td,
body.light .etiquetas-moose-data-table td,
[data-theme="light"] .etiquetas-moose-data-table td {
  color: #5d636a !important;
}


html[data-theme="light"] .etiquetas-moose-table-primary strong,
body[data-theme="light"] .etiquetas-moose-table-primary strong,
html.light .etiquetas-moose-table-primary strong,
body.light .etiquetas-moose-table-primary strong,
[data-theme="light"] .etiquetas-moose-table-primary strong,
html[data-theme="light"] .etiquetas-moose-description-cell strong,
body[data-theme="light"] .etiquetas-moose-description-cell strong,
html.light .etiquetas-moose-description-cell strong,
body.light .etiquetas-moose-description-cell strong,
[data-theme="light"] .etiquetas-moose-description-cell strong {
  color: #25282c !important;
}


html[data-theme="light"] .etiquetas-moose-table-primary small,
body[data-theme="light"] .etiquetas-moose-table-primary small,
html.light .etiquetas-moose-table-primary small,
body.light .etiquetas-moose-table-primary small,
[data-theme="light"] .etiquetas-moose-table-primary small,
html[data-theme="light"] .etiquetas-moose-description-cell small,
body[data-theme="light"] .etiquetas-moose-description-cell small,
html.light .etiquetas-moose-description-cell small,
body.light .etiquetas-moose-description-cell small,
[data-theme="light"] .etiquetas-moose-description-cell small {
  color: #7e848c !important;
}


html[data-theme="light"] .etiquetas-moose-code,
body[data-theme="light"] .etiquetas-moose-code,
html.light .etiquetas-moose-code,
body.light .etiquetas-moose-code,
[data-theme="light"] .etiquetas-moose-code {
  color: #555b62 !important;
}


html[data-theme="light"] .etiquetas-moose-country,
body[data-theme="light"] .etiquetas-moose-country,
html.light .etiquetas-moose-country,
body.light .etiquetas-moose-country,
[data-theme="light"] .etiquetas-moose-country {
  color: #686e76 !important;
}


/* =========================================================
   CABECERA TABLA
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-data-table th,
body[data-theme="light"] .etiquetas-moose-data-table th,
html.light .etiquetas-moose-data-table th,
body.light .etiquetas-moose-data-table th,
[data-theme="light"] .etiquetas-moose-data-table th {
  background: #171717 !important;
  color: #aeb2b7 !important;
}


/* =========================================================
   BORDES DE FILAS
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-data-table th,
html[data-theme="light"] .etiquetas-moose-data-table td,
body[data-theme="light"] .etiquetas-moose-data-table th,
body[data-theme="light"] .etiquetas-moose-data-table td,
html.light .etiquetas-moose-data-table th,
html.light .etiquetas-moose-data-table td,
body.light .etiquetas-moose-data-table th,
body.light .etiquetas-moose-data-table td,
[data-theme="light"] .etiquetas-moose-data-table th,
[data-theme="light"] .etiquetas-moose-data-table td {
  border-bottom-color: #e8eaed !important;
}


/* =========================================================
   ROW HOVER
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-data-table tbody tr:hover,
body[data-theme="light"] .etiquetas-moose-data-table tbody tr:hover,
html.light .etiquetas-moose-data-table tbody tr:hover,
body.light .etiquetas-moose-data-table tbody tr:hover,
[data-theme="light"] .etiquetas-moose-data-table tbody tr:hover {
  background: #f7f8f9 !important;
}


/* =========================================================
   ROW SELECTED
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-data-table tbody tr.is-selected,
body[data-theme="light"] .etiquetas-moose-data-table tbody tr.is-selected,
html.light .etiquetas-moose-data-table tbody tr.is-selected,
body.light .etiquetas-moose-data-table tbody tr.is-selected,
[data-theme="light"] .etiquetas-moose-data-table tbody tr.is-selected {
  background: #f0f2f4 !important;
  box-shadow: inset 2px 0 0 #555b62 !important;
}


/* =========================================================
   CHECKBOX
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-check span,
body[data-theme="light"] .etiquetas-moose-check span,
html.light .etiquetas-moose-check span,
body.light .etiquetas-moose-check span,
[data-theme="light"] .etiquetas-moose-check span {
  background: #ffffff !important;
  border-color: #bfc4ca !important;
}


html[data-theme="light"] .etiquetas-moose-check input:checked + span,
body[data-theme="light"] .etiquetas-moose-check input:checked + span,
html.light .etiquetas-moose-check input:checked + span,
body.light .etiquetas-moose-check input:checked + span,
[data-theme="light"] .etiquetas-moose-check input:checked + span {
  background: #17191c !important;
  border-color: #17191c !important;
}


html[data-theme="light"] .etiquetas-moose-check input:checked + span::after,
body[data-theme="light"] .etiquetas-moose-check input:checked + span::after,
html.light .etiquetas-moose-check input:checked + span::after,
body.light .etiquetas-moose-check input:checked + span::after,
[data-theme="light"] .etiquetas-moose-check input:checked + span::after {
  border-color: #ffffff !important;
}


/* =========================================================
   STATUS
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-status,
body[data-theme="light"] .etiquetas-moose-status,
html.light .etiquetas-moose-status,
body.light .etiquetas-moose-status,
[data-theme="light"] .etiquetas-moose-status {
  background: #ffffff !important;
  border-color: #dfe2e5 !important;
}


html[data-theme="light"] .etiquetas-moose-status.is-active,
body[data-theme="light"] .etiquetas-moose-status.is-active,
html.light .etiquetas-moose-status.is-active,
body.light .etiquetas-moose-status.is-active,
[data-theme="light"] .etiquetas-moose-status.is-active {
  color: #32834d !important;
}


/* =========================================================
   FILTROS · CAMPOS
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-filter-panel,
body[data-theme="light"] .etiquetas-moose-filter-panel,
html.light .etiquetas-moose-filter-panel,
body.light .etiquetas-moose-filter-panel,
[data-theme="light"] .etiquetas-moose-filter-panel {
  background: #ffffff !important;
  border-color: #e0e3e6 !important;
}


html[data-theme="light"] .etiquetas-moose-field input,
html[data-theme="light"] .etiquetas-moose-field select,
html[data-theme="light"] .etiquetas-moose-field textarea,
body[data-theme="light"] .etiquetas-moose-field input,
body[data-theme="light"] .etiquetas-moose-field select,
body[data-theme="light"] .etiquetas-moose-field textarea,
html.light .etiquetas-moose-field input,
html.light .etiquetas-moose-field select,
html.light .etiquetas-moose-field textarea,
body.light .etiquetas-moose-field input,
body.light .etiquetas-moose-field select,
body.light .etiquetas-moose-field textarea,
[data-theme="light"] .etiquetas-moose-field input,
[data-theme="light"] .etiquetas-moose-field select,
[data-theme="light"] .etiquetas-moose-field textarea {
  background: #ffffff !important;
  border-color: #d7dbe0 !important;
  color: #17191c !important;
}


/* =========================================================
   MODALES CLAROS
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-modal,
body[data-theme="light"] .etiquetas-moose-modal,
html.light .etiquetas-moose-modal,
body.light .etiquetas-moose-modal,
[data-theme="light"] .etiquetas-moose-modal {
  background: #ffffff !important;
  border-color: #dcdfe3 !important;
  color: #17191c !important;
}


html[data-theme="light"] .etiquetas-moose-modal__head,
body[data-theme="light"] .etiquetas-moose-modal__head,
html.light .etiquetas-moose-modal__head,
body.light .etiquetas-moose-modal__head,
[data-theme="light"] .etiquetas-moose-modal__head {
  border-bottom-color: #e4e6e9 !important;
}


html[data-theme="light"] .etiquetas-moose-modal__footer,
body[data-theme="light"] .etiquetas-moose-modal__footer,
html.light .etiquetas-moose-modal__footer,
body.light .etiquetas-moose-modal__footer,
[data-theme="light"] .etiquetas-moose-modal__footer {
  background: #fafafa !important;
  border-top-color: #e4e6e9 !important;
}


/* =========================================================
   TEXTOS MODAL
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-modal__title h2,
body[data-theme="light"] .etiquetas-moose-modal__title h2,
html.light .etiquetas-moose-modal__title h2,
body.light .etiquetas-moose-modal__title h2,
[data-theme="light"] .etiquetas-moose-modal__title h2 {
  color: #17191c !important;
}


html[data-theme="light"] .etiquetas-moose-modal__title p,
body[data-theme="light"] .etiquetas-moose-modal__title p,
html.light .etiquetas-moose-modal__title p,
body.light .etiquetas-moose-modal__title p,
[data-theme="light"] .etiquetas-moose-modal__title p {
  color: #737981 !important;
}


/* =========================================================
   MOBILE / DESKTOP · disabled
   ========================================================= */

html[data-theme="light"] .etiquetas-moose-btn:disabled,
body[data-theme="light"] .etiquetas-moose-btn:disabled,
html.light .etiquetas-moose-btn:disabled,
body.light .etiquetas-moose-btn:disabled,
[data-theme="light"] .etiquetas-moose-btn:disabled,
html[data-theme="light"] .etiquetas-moose-icon-btn:disabled,
body[data-theme="light"] .etiquetas-moose-icon-btn:disabled,
html.light .etiquetas-moose-icon-btn:disabled,
body.light .etiquetas-moose-icon-btn:disabled,
[data-theme="light"] .etiquetas-moose-icon-btn:disabled {
  opacity: 0.42 !important;
}


/* =========================================================
   FIN · FIX MODO CLARO
   ========================================================= */