/**
 * Component Library - Reusable UI Components
 * Production-ready, accessible components with BEM-style naming
 */

/* ============================================
   BUTTONS
   ============================================ */

.boton {
  --btn-height: 40px;
  --btn-padding-x: var(--espacio-4);
  --btn-font-size: var(--texto-sm);
  --btn-font-weight: var(--peso-fuente-seminegrita);
  --btn-border-radius: var(--radio-md);
  --btn-transition: all var(--duracion-rapida) var(--aceleracion-salida);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  height: var(--btn-height);
  padding-inline: var(--btn-padding-x);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--btn-border-radius);
  cursor: pointer;
  user-select: none;
  transition: var(--btn-transition);
  position: relative;
  overflow: hidden;
}

.boton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--duracion-rapida) var(--aceleracion-salida);
}

.boton:hover::before {
  opacity: var(--estado-opacidad-sobrevuelo);
}

.boton:active {
  transform: translateY(1px) scale(0.98);
}

.boton:active::before {
  opacity: var(--estado-opacidad-presionado);
}

.boton:focus-visible {
  outline: 2px solid var(--borde-foco);
  outline-offset: 2px;
}

.boton:disabled,
.boton[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(55%) brightness(0.9);
  box-shadow: none;
  transform: none;
}

.boton:disabled::before,
.boton[disabled]::before {
  display: none;
}

/* Button Variants */
.boton--primario {
  background: var(--color-primario-500);
  color: var(--texto-inverso);
  box-shadow: var(--sombra-sm),
    0 0 0 0 color-mix(in srgb, var(--color-primario-500) 45%, transparent);
  will-change: box-shadow;
}

.boton--primario:hover {
  background: var(--color-primario-600);
  box-shadow: var(--sombra-md),
    0 0 20px color-mix(in srgb, var(--color-primario-500) 35%, transparent);
}

.boton--primario:active {
  background: var(--color-primario-700);
}

.boton--secundario {
  background: var(--color-neutro-800);
  color: var(--texto-inverso);
  box-shadow: var(--sombra-sm);
}

.boton--secundario:hover {
  background: var(--color-neutro-900);
}

.boton--contorno {
  background: transparent;
  color: var(--texto-principal);
  border-color: var(--borde-normal);
}

.boton--contorno:hover {
  background: var(--superficie-sobrevuelo);
  border-color: var(--borde-fuerte);
}

.boton--fantasma {
  background: color-mix(in srgb, var(--vidrio-fondo) 70%, transparent);
  color: var(--texto-principal);
  border-color: var(--borde-sutil);
  backdrop-filter: var(--vidrio-fondo-difuso);
  -webkit-backdrop-filter: var(--vidrio-fondo-difuso);
}

.boton--fantasma:hover {
  background: color-mix(in srgb, var(--vidrio-fondo) 80%, transparent);
}

.boton--peligro {
  background: var(--color-error-500);
  color: var(--texto-inverso);
}

.boton--peligro:hover {
  background: var(--color-error-700);
}

/* Button Sizes */
.boton--pequeno {
  --btn-height: 32px;
  --btn-padding-x: var(--espacio-3);
  --btn-font-size: var(--texto-xs);
}

.boton--grande {
  --btn-height: 48px;
  --btn-padding-x: var(--espacio-6);
  --btn-font-size: var(--texto-md);
}

.boton--completo {
  width: 100%;
}

.boton--icono {
  --btn-padding-x: 0;
  width: var(--btn-height);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}

.boton--icono i {
  line-height: 1;
  display: block;
}

.boton--icono .fa-solid::before,
.boton--icono .fa-regular::before {
  line-height: 1;
}

.boton--icono-plano {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.boton--icono-plano::before {
  content: none;
}

.boton--icono-plano.boton--peligro {
  background: transparent;
  color: var(--color-error-500);
}

.boton--icono-plano.boton--peligro:hover {
  background: transparent;
  color: var(--color-error-700);
}

.boton--icono-peligro {
  background: color-mix(in srgb, var(--color-error-500) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-error-500) 40%, transparent);
  color: var(--color-error-500);
}

.boton--icono-peligro:hover {
  background: color-mix(in srgb, var(--color-error-500) 20%, transparent);
  border-color: color-mix(in srgb, var(--color-error-500) 55%, transparent);
  color: var(--color-error-700);
}

.boton--fantasma.boton--peligro {
  background: color-mix(in srgb, var(--color-error-500) 10%, var(--vidrio-fondo));
  border-color: color-mix(in srgb, var(--color-error-500) 40%, var(--borde-sutil));
  color: var(--color-error-500);
}

.boton--fantasma.boton--peligro:hover {
  background: color-mix(in srgb, var(--color-error-500) 14%, var(--vidrio-fondo));
  border-color: color-mix(in srgb, var(--color-error-500) 55%, var(--borde-fuerte));
  color: var(--color-error-700);
}

/* Button Loading State */
.boton--cargando {
  pointer-events: none;
  position: relative;
  color: transparent !important;
  text-shadow: none !important;
  -webkit-text-fill-color: transparent;
}

.boton--cargando::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: giro 0.6s linear infinite;
  color: var(--texto-inverso);
}

.boton--fantasma.boton--cargando::after,
.boton--contorno.boton--cargando::after {
  color: var(--texto-principal);
}

.boton--primario.boton--cargando::after {
  color: #fff;
}

@supports (background: conic-gradient(from 0deg, #000 0deg 320deg, transparent 320deg 360deg)) {
  .boton--cargando::after {
    border: none;
    background: conic-gradient(from 0deg, currentColor 0deg 320deg, transparent 320deg 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  }
}

.boton-ir-arriba {
  position: fixed;
  right: var(--espacio-4);
  bottom: var(--espacio-4);
  width: 44px;
  height: 44px;
  border-radius: var(--radio-md);
  border: 1px solid color-mix(in srgb, var(--color-primario-500) 42%, var(--borde-sutil));
  background: color-mix(in srgb, var(--superficie-elevada) 88%, transparent);
  color: var(--color-primario-600);
  box-shadow: var(--sombra-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  z-index: var(--z-fijo);
  transition: opacity var(--duracion-rapida) var(--aceleracion-estandar),
    transform var(--duracion-rapida) var(--aceleracion-estandar),
    background var(--duracion-rapida) var(--aceleracion-estandar),
    color var(--duracion-rapida) var(--aceleracion-estandar),
    border-color var(--duracion-rapida) var(--aceleracion-estandar);
}

.boton-ir-arriba:hover {
  background: color-mix(in srgb, var(--color-primario-500) 14%, var(--superficie-elevada));
  color: var(--color-primario-700);
  border-color: color-mix(in srgb, var(--color-primario-500) 62%, var(--borde-normal));
}

.boton-ir-arriba:focus-visible {
  outline: 2px solid var(--borde-foco);
  outline-offset: 2px;
}

.boton-ir-arriba--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (max-width: 768px) {
  .boton-ir-arriba {
    right: var(--espacio-3);
    bottom: var(--espacio-3);
    width: 40px;
    height: 40px;
  }
}

/* ============================================
   INPUTS & FORMS
   ============================================ */

.formulario-campo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}

.formulario-etiqueta {
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuente-medio);
  color: var(--texto-principal);
  cursor: pointer;
}

.formulario-etiqueta--required::after {
  content: '*';
  color: var(--color-error-500);
  margin-left: var(--espacio-1);
}

.entrada {
  width: 100%;
  height: 44px;
  padding-inline: var(--espacio-4);
  font-size: var(--texto-sm);
  color: var(--texto-principal);
  background: color-mix(in srgb, var(--superficie-elevada) 95%, transparent);
  border: 1.5px solid var(--borde-normal);
  border-radius: var(--radio-lg);
  transition: all var(--duracion-rapida) var(--aceleracion-salida);
  position: relative;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.entrada[type='search'],
.busqueda-rapida__input[type='search'] {
  appearance: none;
  -webkit-appearance: none;
}

.entrada[type='search']::-webkit-search-decoration,
.entrada[type='search']::-webkit-search-cancel-button,
.entrada[type='search']::-webkit-search-results-button,
.entrada[type='search']::-webkit-search-results-decoration,
.busqueda-rapida__input[type='search']::-webkit-search-decoration,
.busqueda-rapida__input[type='search']::-webkit-search-cancel-button,
.busqueda-rapida__input[type='search']::-webkit-search-results-button,
.busqueda-rapida__input[type='search']::-webkit-search-results-decoration {
  display: none;
}

.entrada::-ms-clear,
.entrada::-ms-reveal,
.busqueda-rapida__input::-ms-clear,
.busqueda-rapida__input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

.entrada::placeholder {
  color: var(--texto-deshabilitado);
  transition: color var(--duracion-rapida) var(--aceleracion-salida);
}

.entrada::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radio-lg);
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.08) 50%,
      transparent 100%);
  opacity: 0;
  pointer-events: none;
}

.entrada:hover {
  border-color: var(--borde-fuerte);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: color-mix(in srgb, var(--superficie-elevada) 98%, var(--color-primario-500));
}

.entrada:focus {
  outline: none;
  border-color: var(--color-primario-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario-500) 20%, transparent),
    0 4px 16px color-mix(in srgb, var(--color-primario-500) 18%, transparent),
    inset 0 1px 2px color-mix(in srgb, var(--color-primario-500) 14%, transparent);
  background: color-mix(in srgb, var(--superficie-elevada) 98%, var(--color-primario-500));
}

.entrada:focus::placeholder {
  color: var(--texto-terciario);
}

.entrada:disabled {
  background: var(--superficie-hundida);
  color: var(--texto-deshabilitado);
  cursor: not-allowed;
  border-color: var(--borde-sutil);
}

.entrada--error {
  border-color: var(--color-error-500);
}

.entrada--error:hover {
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.12);
}

.entrada--error:focus {
  border-color: var(--color-error-600);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15),
    0 4px 16px rgba(239, 68, 68, 0.1);
}

.entrada--exito {
  border-color: var(--color-exito-500);
}

.entrada--exito:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15),
    0 4px 16px rgba(16, 185, 129, 0.1);
}

.textarea {
  min-height: 100px;
  padding-block: var(--espacio-3);
  resize: vertical;
  line-height: var(--alto-linea-relajado);
}

.entrada-group {
  display: flex;
  align-items: center;
  position: relative;
}

.entrada-group .entrada {
  flex: 1;
}

.entrada-group__prefix,
.entrada-group__suffix {
  position: absolute;
  display: flex;
  align-items: center;
  height: 100%;
  padding-inline: var(--espacio-3);
  color: var(--texto-terciario);
  pointer-events: none;
}

.entrada-group__prefix {
  left: 0;
}

.entrada-group__suffix {
  right: 0;
}

.entrada-group--prefix .entrada {
  padding-left: calc(var(--espacio-3) * 2 + 20px);
}

.entrada-group--suffix .entrada {
  padding-right: calc(var(--espacio-3) * 2 + 20px);
}

.formulario-helper {
  font-size: var(--texto-xs);
  color: var(--texto-terciario);
  line-height: var(--alto-linea-normal);
}

.formulario-error {
  font-size: var(--texto-xs);
  color: var(--color-error-500);
  display: flex;
  align-items: center;
  gap: var(--espacio-1);
}

/* Select */
.selector {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right var(--espacio-3) center;
  background-repeat: no-repeat;
  background-size: 20px;
  padding-right: calc(var(--espacio-3) * 2 + 20px);
}

.selector:hover,
.selector:focus,
.selector:focus-visible,
.selector:active,
.selector:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right var(--espacio-3) center;
  background-repeat: no-repeat;
  background-size: 20px;
}

/* Checkbox & Radio */
.casilla,
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-3);
  cursor: pointer;
  user-select: none;
  transition: all var(--duracion-rapida) var(--aceleracion-salida);
  padding: var(--espacio-2) var(--espacio-2);
  border-radius: var(--radio-md);
}

.casilla:hover,
.radio:hover {
  background: color-mix(in srgb, var(--superficie-sobrevuelo) 50%, transparent);
}

.casilla__entrada,
.radio__entrada {
  width: 22px;
  height: 22px;
  border: 2px solid var(--borde-normal);
  border-radius: var(--radio-sm);
  background: var(--superficie-elevada);
  cursor: pointer;
  transition: all var(--duracion-rapida) var(--aceleracion-salida);
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.radio__entrada {
  border-radius: 50%;
}

.casilla__entrada:hover,
.radio__entrada:hover {
  border-color: var(--color-primario-400);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primario-500) 18%, transparent);
}

.casilla__entrada:checked,
.radio__entrada:checked {
  background: linear-gradient(135deg, var(--color-primario-500), var(--color-primario-600));
  border-color: var(--color-primario-600);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primario-500) 35%, transparent);
}

.casilla__entrada:checked:hover,
.radio__entrada:checked:hover {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primario-500) 42%, transparent);
}

.casilla__entrada:checked::before {
  content: '';
  width: 10px;
  height: 6px;
  border: 2px solid white;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg) translateY(-1px);
}

.radio__entrada:checked::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.casilla__entrada:focus-visible,
.radio__entrada:focus-visible {
  outline: 2px solid var(--borde-foco);
  outline-offset: 2px;
}

/* ============================================
   CARDS
   ============================================ */

.tarjeta {
  background: var(--superficie-elevada);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
  transition: box-shadow var(--duracion-normal) var(--aceleracion-salida),
    transform var(--duracion-normal) var(--aceleracion-salida);
  will-change: transform, box-shadow;
}

.tarjeta--interactive:hover {
  box-shadow: var(--sombra-md);
  transform: translateY(-2px);
}

.tarjeta--cristal {
  background: var(--vidrio-fondo);
  border-color: var(--vidrio-borde);
  backdrop-filter: var(--vidrio-fondo-difuso);
  -webkit-backdrop-filter: var(--vidrio-fondo-difuso);
  box-shadow: var(--vidrio-sombra);
}

.tarjeta__encabezado {
  padding: var(--espacio-5);
  border-bottom: 1px solid var(--borde-sutil);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
}

.tarjeta__body {
  padding: var(--espacio-5);
}

.tarjeta__pie {
  padding: var(--espacio-5);
  border-top: 1px solid var(--borde-sutil);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
}

/* ============================================
   BADGES & PILLS
   ============================================ */

.insignia {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  height: 24px;
  padding-inline: var(--espacio-2);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuente-seminegrita);
  line-height: 1;
  border-radius: var(--radio-completo);
  background: var(--superficie-hundida);
  color: var(--texto-secundario);
  border: 1px solid var(--borde-sutil);
}

.insignia--primario {
  background: var(--color-primario-50);
  color: var(--color-primario-700);
  border-color: var(--color-primario-200);
}

.insignia--exito {
  background: var(--color-exito-50);
  color: var(--color-exito-700);
  border-color: var(--color-exito-500);
}

.insignia--advertencia {
  background: var(--color-advertencia-50);
  color: var(--color-advertencia-700);
  border-color: var(--color-advertencia-500);
}

.insignia--error {
  background: var(--color-error-50);
  color: var(--color-error-700);
  border-color: var(--color-error-500);
}

.insignia--contorno {
  background: transparent;
}

/* ============================================
   PRODUCT IMAGE PLACEHOLDER
   ============================================ */

.producto-imagen--vacia {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--borde-normal) 70%, transparent);
  border-radius: inherit;
  color: var(--texto-terciario);
  cursor: pointer;
  padding: 0;
}

.producto-imagen--vacia i {
  font-size: 1rem;
}

.producto-imagen--vacia:hover {
  color: var(--color-primario-500);
  border-color: color-mix(in srgb, var(--color-primario-500) 45%, transparent);
}

.producto-miniatura {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.producto-miniatura__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--texto-terciario);
  transition: opacity var(--duracion-rapida) var(--aceleracion-salida);
}

.producto-miniatura__placeholder.skeleton {
  display: grid;
  width: 100%;
  height: 100%;
}

.producto-miniatura__placeholder i {
  position: relative;
  z-index: 1;
  font-size: 0.95rem;
}

.producto-miniatura--cargando .producto-miniatura__placeholder i {
  opacity: 0;
}

.producto-miniatura--cargando .producto-miniatura__placeholder.skeleton {
  transform: translateY(2px);
}

.producto-miniatura__placeholder--plano {
  position: static;
  width: 100%;
  height: 100%;
  border: 1px dashed color-mix(in srgb, var(--borde-normal) 70%, transparent);
  background: transparent;
}

.producto-miniatura__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duracion-rapida) var(--aceleracion-salida);
}

.producto-miniatura--lista .producto-miniatura__img {
  opacity: 1;
  pointer-events: auto;
}

.producto-miniatura--lista .producto-miniatura__placeholder {
  opacity: 0;
  pointer-events: none;
}

.producto-miniatura:not(.producto-miniatura--cargando) .producto-miniatura__placeholder.skeleton {
  animation: none;
}

.producto-miniatura:not(.producto-miniatura--cargando) .producto-miniatura__placeholder.skeleton::after {
  display: none;
}

.producto-miniatura--error .producto-miniatura__placeholder.skeleton {
  animation: none;
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--borde-normal) 70%, transparent);
}

.producto-miniatura--error .producto-miniatura__placeholder.skeleton::after {
  display: none;
}

.producto-miniatura--error .producto-miniatura__placeholder i {
  opacity: 1;
}

/* ============================================
   MODALS
   ============================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espacio-4);
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duracion-normal) var(--aceleracion-salida),
    visibility var(--duracion-normal) var(--aceleracion-salida);
}

.modal--bloqueante {
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 106, 0, 0.18), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(255, 128, 0, 0.12), transparent 60%),
    rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px) saturate(150%);
  pointer-events: auto;
}

.modal--posicionando .modal__contenido {
  transition: none;
}

.modal--abierto {
  opacity: 1;
  visibility: visible;
}

.modal__contenido {
  position: relative;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  pointer-events: auto;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--superficie-elevada) 96%, transparent),
      color-mix(in srgb, var(--superficie-elevada) 90%, transparent));
  border: 1px solid color-mix(in srgb, var(--borde-normal) 70%, var(--color-primario-500) 12%);
  border-radius: var(--radio-2xl);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32),
    0 6px 16px rgba(0, 0, 0, 0.28),
    0 0 0 1px color-mix(in srgb, var(--color-primario-500) 8%, transparent);
  transform: translate3d(var(--modal-x, 0px), calc(var(--modal-y, 0px) + 24px), 0) scale(0.97);
  transition: transform var(--duracion-normal) var(--aceleracion-salida);
  backdrop-filter: blur(12px) saturate(150%);
  will-change: transform;
}

.modal--abierto .modal__contenido {
  transform: translate3d(var(--modal-x, 0px), var(--modal-y, 0px), 0) scale(1);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42),
    0 10px 24px rgba(0, 0, 0, 0.3),
    0 0 0 1px color-mix(in srgb, var(--color-primario-500) 14%, transparent);
}

.modal__contenido::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 35%);
  opacity: 0.7;
  pointer-events: none;
}

.modal__contenido::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 12% 8%,
      color-mix(in srgb, var(--color-primario-500) 18%, transparent),
      transparent 55%);
  opacity: 0.5;
  pointer-events: none;
}

.modal__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espacio-4) var(--espacio-5);
  background: color-mix(in srgb, var(--superficie-hundida) 75%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--borde-normal) 75%, transparent);
}

.modal--arrastrable .modal__encabezado {
  cursor: grab;
  touch-action: none;
}

.modal--arrastrando .modal__encabezado {
  cursor: grabbing;
}

.modal--arrastrando .modal__contenido {
  transition: none;
}

.modal__titulo {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuente-negrita);
  color: var(--texto-principal);
  letter-spacing: -0.015em;
}

.modal__titulo-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radio-md);
  background: color-mix(in srgb, var(--superficie-hundida) 70%, transparent);
  color: var(--color-primario-500);
  border: 1px solid color-mix(in srgb, var(--borde-sutil) 70%, transparent);
}

.modal__titulo-icono--plano {
  background: transparent;
  border: none;
  box-shadow: none;
  width: auto;
  height: auto;
  padding: 0;
}

.modal__titulo-id-pref {
  color: var(--texto-principal);
}

.modal__titulo-id {
  color: var(--color-primario-500);
  font-weight: var(--peso-fuente-negrita);
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: transform 120ms ease-out;
}

.modal__titulo-id:hover,
.modal__titulo-id:focus-visible {
  text-decoration: none;
}

.modal__titulo-id-valor {
  color: var(--color-primario-500);
}

.modal__titulo-id--copiado {
  animation: rebote-escala 220ms ease-out;
}

.modal__titulo-id--presionado {
  transform: scale(0.96);
}

.modal__titulo-id--soltado {
  transform: scale(1.04);
}

.modal__acciones {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}

.modal__cerrar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-md);
  border: 1px solid color-mix(in srgb, var(--borde-sutil) 70%, transparent);
  color: var(--texto-secundario);
  background: color-mix(in srgb, var(--superficie-elevada) 88%, transparent);
  transition: background var(--duracion-rapida) var(--aceleracion-salida),
    color var(--duracion-rapida) var(--aceleracion-salida),
    transform var(--duracion-rapida) var(--aceleracion-salida);
}

.modal__cerrar:hover {
  background: color-mix(in srgb, var(--superficie-sobrevuelo) 80%, transparent);
  color: var(--texto-principal);
  transform: scale(1.04);
}

.modal__cuerpo {
  padding: var(--espacio-5);
  overflow-y: auto;
  max-height: calc(90vh - 140px);
  color: var(--texto-principal);
  background: color-mix(in srgb, var(--superficie-elevada) 94%, transparent);
}

.modal__pie {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--espacio-3);
  padding: var(--espacio-4) var(--espacio-5);
  border-top: 1px solid color-mix(in srgb, var(--borde-normal) 75%, transparent);
  background: color-mix(in srgb, var(--superficie-hundida) 75%, transparent);
}

.modal--appendice {
  background: transparent;
  backdrop-filter: none;
  justify-content: center;
  pointer-events: none;
}

.modal--appendice .modal__contenido {
  pointer-events: auto;
}

.modal__contenido--appendice {
  max-width: 420px;
  width: min(38vw, 420px);
  margin-right: 0;
  margin-left: clamp(220px, 26vw, 360px);
}

.modal__contenido--zoom-imagen,
.modal__contenido--zoom-mostrador,
.modal__contenido--listado-zoom {
  width: min(68vw, 420px);
  max-width: 420px;
  min-width: 260px;
  min-height: 260px;
  max-height: 75vh;
  overflow: hidden;
  position: relative;
  background: var(--superficie-elevada);
  resize: both;
}

.modal__contenido--zoom-imagen .modal__cuerpo,
.modal__contenido--zoom-mostrador .modal__cuerpo,
.modal__contenido--listado-zoom .modal__cuerpo {
  padding: var(--espacio-4);
  overflow: hidden;
  max-height: none;
  background: transparent;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-3);
  width: 100%;
  height: 100%;
  color: var(--texto-principal);
  text-align: center;
}

.zoom-imagen__area {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zoom-imagen__cuadro {
  overflow: hidden;
  background: var(--superficie-base);
  border: 1px solid color-mix(in srgb, var(--color-primario-500) 35%, var(--borde-sutil));
  border-radius: var(--radio-lg);
  display: grid;
  place-items: center;
}

.zoom-imagen__cuadro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zoom-imagen__sku {
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}


.detalle-venta {
  display: grid;
  gap: var(--espacio-3);
}

.detalle-fila {
  display: grid;
  grid-template-columns: minmax(160px, 200px) 1fr;
  gap: var(--espacio-3);
  align-items: center;
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-md);
  background: color-mix(in srgb, var(--superficie-hundida) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--borde-sutil) 70%, transparent);
}

.detalle-fila--item {
  grid-template-columns: minmax(180px, 1fr) auto;
}

.detalle-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-terciario);
  font-weight: var(--peso-fuente-seminegrita);
}

.detalle-etiqueta i {
  font-size: var(--texto-sm);
  color: var(--color-primario-500);
}

.detalle-valor {
  display: flex;
  align-items: center;
  font-size: var(--texto-sm);
  color: var(--texto-principal);
}

.detalle-valor--accion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
}

.busqueda-rapida {
  position: fixed;
  top: var(--espacio-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-modal);
  animation: busqueda-rapida-entrada var(--duracion-normal) var(--aceleracion-salida);
}

.busqueda-rapida__panel {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-xl);
  background: color-mix(in srgb, var(--superficie-elevada) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--borde-sutil) 80%, transparent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px) saturate(140%);
  position: relative;
  overflow: hidden;
}

.busqueda-rapida__panel i {
  color: var(--color-primario-600);
  text-shadow: 0 0 12px rgba(255, 128, 0, 0.25);
}

.busqueda-rapida__input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--texto-principal);
  font-size: var(--texto-md);
}

.busqueda-rapida__ayuda {
  font-size: var(--texto-xs);
  color: var(--texto-terciario);
  white-space: nowrap;
}

.busqueda-rapida__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 106, 0, 0.12) 40%, transparent 80%);
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}

.busqueda-rapida__panel--cargando {
  border-color: color-mix(in srgb, var(--color-primario-500) 35%, var(--borde-sutil));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25),
    0 0 0 1px color-mix(in srgb, var(--color-primario-500) 20%, transparent);
}

.busqueda-rapida__panel--cargando::after {
  opacity: 1;
  animation: destello-busqueda 1.1s ease-in-out infinite;
}

@keyframes destello-busqueda {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(120%);
  }
}

@media (max-width: 720px) {
  .busqueda-rapida {
    width: calc(100% - var(--espacio-6));
  }

  .busqueda-rapida__panel {
    grid-template-columns: 24px 1fr;
  }

  .busqueda-rapida__ayuda {
    display: none;
  }
}

@keyframes busqueda-rapida-entrada {
  from {
    opacity: 0;
    transform: translate3d(-50%, -8px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
}

.items-panel {
  display: grid;
  gap: var(--espacio-3);
}

.items-panel__acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
}

.items-panel__item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: var(--espacio-3);
  align-items: center;
  padding: var(--espacio-3);
  border-radius: var(--radio-lg);
  background: color-mix(in srgb, var(--superficie-hundida) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--borde-sutil) 70%, transparent);
}

.items-panel__thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radio-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--superficie-elevada) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--borde-sutil) 70%, transparent);
  color: var(--color-primario-500);
}

.items-panel__nombre {
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuente-seminegrita);
  color: var(--texto-principal);
}

.items-panel__meta {
  font-size: var(--texto-xs);
  color: var(--texto-terciario);
}

.items-panel__cantidad {
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuente-seminegrita);
  color: var(--texto-secundario);
}

@media (max-width: 1100px) {
  .modal--appendice {
    justify-content: center;
    align-items: flex-end;
    padding-bottom: var(--espacio-6);
  }

  .modal__contenido--appendice {
    width: min(92vw, 520px);
    margin-right: 0;
  }
}

@media (max-width: 640px) {
  .detalle-fila {
    grid-template-columns: 1fr;
    gap: var(--espacio-2);
  }

  .detalle-fila--item {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   TOASTS
   ============================================ */

.notificacion-contenedor {
  position: fixed;
  bottom: var(--espacio-4);
  right: var(--espacio-4);
  z-index: var(--z-notificacion);
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--espacio-3);
  pointer-events: none;
}

.notificacion {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-width: 300px;
  max-width: 420px;
  padding: var(--espacio-4) var(--espacio-4);
  background: color-mix(in srgb, var(--superficie-elevada) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--borde-sutil) 70%, transparent);
  border-radius: var(--radio-lg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px) saturate(140%);
  pointer-events: auto;
  animation: deslizar-derecha var(--duracion-normal) var(--aceleracion-salida);
  transform-origin: right center;
  transition: transform var(--duracion-rapida) var(--aceleracion-salida),
    box-shadow var(--duracion-rapida) var(--aceleracion-salida);
}

.notificacion--exito {
  border-left: 4px solid var(--color-exito-500);
}

.notificacion--advertencia {
  border-left: 4px solid var(--color-advertencia-500);
}

.notificacion--error {
  border-left: 4px solid var(--color-error-500);
}

.notificacion--info {
  border-left: 4px solid var(--color-informacion-500);
}

.notificacion__icono {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-md);
  background: color-mix(in srgb, var(--superficie-sobrevuelo) 70%, transparent);
  color: var(--texto-principal);
}

.notificacion__contenido {
  flex: 1;
}

.notificacion__titulo {
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuente-seminegrita);
  color: var(--texto-principal);
  margin-bottom: var(--espacio-1);
}

.notificacion__mensaje {
  font-size: var(--texto-xs);
  color: var(--texto-secundario);
}

.notificacion__cerrar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-sm);
  color: var(--texto-terciario);
  transition: background var(--duracion-rapida) var(--aceleracion-salida),
    color var(--duracion-rapida) var(--aceleracion-salida),
    transform var(--duracion-rapida) var(--aceleracion-salida);
}

.notificacion__cerrar:hover {
  background: color-mix(in srgb, var(--superficie-sobrevuelo) 75%, transparent);
  color: var(--texto-principal);
  transform: scale(1.05);
}

.notificacion:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28);
}

/* ============================================
   TOOLTIPS
   ============================================ */

.tooltip {
  position: relative;
  display: inline-flex;
}

.tooltip__contenido {
  position: absolute;
  bottom: calc(100% + var(--espacio-2));
  left: 50%;
  transform: translateX(-50%);
  padding: var(--espacio-2) var(--espacio-3);
  background: var(--color-neutro-900);
  color: var(--texto-inverso);
  font-size: var(--texto-xs);
  line-height: var(--alto-linea-normal);
  border-radius: var(--radio-md);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duracion-rapida) var(--aceleracion-salida),
    visibility var(--duracion-rapida) var(--aceleracion-salida),
    transform var(--duracion-rapida) var(--aceleracion-salida);
  z-index: var(--z-ayuda);
}

.tooltip:hover .tooltip__contenido,
.tooltip:focus-within .tooltip__contenido {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-4px);
}

/* ============================================
   SKELETON LOADERS
   ============================================ */

.skeleton {
  position: relative;
  overflow: hidden;
  display: inline-block;
  background: color-mix(in srgb, var(--superficie-presionada) 82%, var(--texto-principal) 12%);
  animation: pulso-suave 1.4s ease-in-out infinite;
  border-radius: var(--radio-sm);
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, var(--superficie-presionada) 40%, white 60%) 45%,
      color-mix(in srgb, var(--superficie-presionada) 20%, white 80%) 50%,
      color-mix(in srgb, var(--superficie-presionada) 40%, white 60%) 55%,
      transparent 100%);
  animation: destello-barra 1.1s ease-in-out infinite;
}

.skeleton--text {
  display: block;
}

.skeleton--text {
  height: 1em;
  margin-bottom: var(--espacio-2);
}

.skeleton--heading {
  height: 1.5em;
  margin-bottom: var(--espacio-3);
}

.skeleton--avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.skeleton--boton {
  height: 40px;
  width: 120px;
}

.skeleton--tarjeta {
  height: 200px;
  width: 100%;
}

/* ============================================
   EMPTY STATES
   ============================================ */

.vacio-estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--espacio-8) var(--espacio-6);
  gap: var(--espacio-4);
}

.vacio-estado__icono {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--superficie-hundida);
  border-radius: var(--radio-completo);
  color: var(--texto-terciario);
  font-size: var(--texto-xxl);
}

.vacio-estado__titulo {
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuente-seminegrita);
  color: var(--texto-principal);
}

.vacio-estado__descripcion {
  font-size: var(--texto-sm);
  color: var(--texto-terciario);
  font-style: italic;
  margin-top: calc(-1 * var(--espacio-2));
  max-width: 400px;
}

.vacio-estado p {
  margin: 0;
}

.vacio-estado--compacto {
  padding: var(--espacio-5) var(--espacio-4);
  gap: var(--espacio-3);
}

.vacio-estado--compacto .vacio-estado__icono {
  width: 48px;
  height: 48px;
  font-size: var(--texto-xl);
}

/* ============================================
   TABS
   ============================================ */

.tabs {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
}

.tabs__lista {
  display: flex;
  gap: var(--espacio-2);
  border-bottom: 1px solid var(--borde-sutil);
  overflow-x: auto;
}

.tabs__trigger {
  position: relative;
  padding: var(--espacio-3) var(--espacio-4);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuente-medio);
  color: var(--texto-secundario);
  background: none;
  border: none;
  border-radius: var(--radio-md) var(--radio-md) 0 0;
  cursor: pointer;
  transition: color var(--duracion-rapida) var(--aceleracion-salida);
  white-space: nowrap;
}

.tabs__trigger:hover {
  color: var(--texto-principal);
  background: var(--superficie-sobrevuelo);
}

.tabs__trigger--activo {
  color: var(--texto-principal);
}

.tabs__trigger--activo::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primario-500);
}

.tabs__contenido {
  display: none;
  animation: desvanecer-entrada var(--duracion-rapida) var(--aceleracion-salida);
}

.tabs__contenido--activo {
  display: block;
}

/* ============================================
   ACCORDION
   ============================================ */

.acordeon {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}

.acordeon__item {
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-lg);
  overflow: hidden;
}

.acordeon__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espacio-4);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuente-medio);
  color: var(--texto-principal);
  background: var(--superficie-elevada);
  border: none;
  cursor: pointer;
  transition: background var(--duracion-rapida) var(--aceleracion-salida);
}

.acordeon__trigger:hover {
  background: var(--superficie-sobrevuelo);
}

.acordeon__icono {
  transition: transform var(--duracion-normal) var(--aceleracion-salida);
}

.acordeon__item--abierto .acordeon__icono {
  transform: rotate(180deg);
}

.acordeon__contenido {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duracion-normal) var(--aceleracion-salida);
}

.acordeon__item--abierto .acordeon__contenido {
  max-height: 1000px;
}

.acordeon__body {
  padding: var(--espacio-4);
  color: var(--texto-secundario);
  font-size: var(--texto-sm);
  line-height: var(--alto-linea-relajado);
}

/* ============================================
   TABLE
   ============================================ */

.tabla-contenedor {
  overflow-x: auto;
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-lg);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
}

.tabla thead {
  background: var(--superficie-hundida);
  border-bottom: 1px solid var(--borde-normal);
}

.tabla th {
  padding: var(--espacio-3) var(--espacio-4);
  text-align: left;
  font-weight: var(--peso-fuente-seminegrita);
  color: var(--texto-principal);
  white-space: nowrap;
}

.tabla td {
  padding: var(--espacio-3) var(--espacio-4);
  color: var(--texto-secundario);
  border-bottom: 1px solid var(--borde-sutil);
}

.tabla tbody tr:last-child td {
  border-bottom: none;
}

.tabla tbody tr:hover {
  background: var(--superficie-sobrevuelo);
}

/* ============================================
   DIVIDER
   ============================================ */

.separador {
  height: 1px;
  background: var(--borde-sutil);
  border: none;
  margin: var(--espacio-4) 0;
}

.separador--vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
  margin: 0 var(--espacio-4);
}

/* ============================================
   SPINNER
   ============================================ */

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--borde-sutil);
  border-top-color: var(--color-primario-500);
  border-radius: 50%;
  animation: giro 0.6s linear infinite;
}

.spinner--grande {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

.spinner--pequeno {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

/* ============================================
   DASHBOARD HELPERS
   ============================================ */

.cristal {
  background: var(--vidrio-fondo);
  border: 1px solid var(--vidrio-borde);
  backdrop-filter: var(--vidrio-fondo-difuso);
  -webkit-backdrop-filter: var(--vidrio-fondo-difuso);
  box-shadow: var(--vidrio-sombra);
}

.lista-item__etiqueta {
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuente-seminegrita);
  color: var(--texto-principal);
  display: block;
}

.lista-item__meta {
  font-size: var(--texto-xs);
  color: var(--texto-terciario);
}

.lista-item__accion {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
}

.estadisticas-cuadricula {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--espacio-4);
}

.estadistica-tarjeta {
  display: flex;
  gap: var(--espacio-4);
  padding: var(--espacio-5);
  border-radius: var(--radio-lg);
  border: 1px solid var(--borde-sutil);
  background: var(--superficie-elevada);
}

.estadistica-tarjeta__icono {
  width: 48px;
  height: 48px;
  border-radius: var(--radio-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-inverso);
  font-size: 20px;
}

.estadistica-tarjeta__icono--primario {
  background: var(--color-primario-500);
}

.estadistica-tarjeta__icono--exito {
  background: var(--color-exito-500);
}

.estadistica-tarjeta__icono--accent {
  background: var(--color-acento-500);
}

.estadistica-tarjeta__icono--advertencia {
  background: var(--color-advertencia-500);
}

.estadistica-tarjeta__etiqueta {
  font-size: var(--texto-xs);
  color: var(--texto-terciario);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-letra-mas-amplio);
}

.estadistica-tarjeta__value {
  font-size: var(--texto-xxl);
  font-weight: var(--peso-fuente-negrita);
  margin: var(--espacio-1) 0;
}

.estadistica-tarjeta__trend {
  font-size: var(--texto-xs);
  display: flex;
  align-items: center;
  gap: var(--espacio-1);
  color: var(--texto-terciario);
}

.estadistica-tarjeta__trend--up {
  color: var(--color-exito-700);
}

.estadistica-tarjeta__trend--neutral {
  color: var(--texto-terciario);
}

.cuadricula {
  display: grid;
  gap: var(--espacio-4);
}

.cuadricula--2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.busqueda-bar {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}

.busqueda-bar--principal {
  gap: var(--espacio-4);
}

.entrada-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.entrada-wrapper--lupa {
  --lupa-icono: 22px;
  --lupa-gap: var(--espacio-2);
  --lupa-separador: 1px;
  isolation: isolate;
}

.entrada-wrapper--lupa::after {
  content: '';
  position: absolute;
  left: calc(var(--espacio-3) + var(--lupa-icono) + var(--lupa-gap));
  top: 50%;
  transform: translateY(-50%);
  width: var(--lupa-separador);
  height: 68%;
  background: color-mix(in srgb, var(--color-primario-500) 22%, var(--borde-normal));
  pointer-events: none;
}

.entrada-wrapper--lupa .entrada {
  position: relative;
  z-index: 1;
  padding-left: calc(var(--espacio-3) + var(--lupa-icono) + var(--lupa-gap) + var(--lupa-separador) + var(--lupa-gap));
}

.entrada--busqueda {
  padding-left: calc(var(--espacio-3) * 2 + 18px);
}

.entrada--principal {
  height: 54px;
  font-size: var(--texto-md);
  font-weight: var(--peso-fuente-medio);
  border-radius: var(--radio-xl);
  background: color-mix(in srgb, var(--superficie-elevada) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primario-500) 30%, var(--borde-sutil));
  transition: border-color var(--duracion-rapida) var(--aceleracion-salida),
    box-shadow var(--duracion-rapida) var(--aceleracion-salida),
    background var(--duracion-rapida) var(--aceleracion-salida);
}

.entrada--principal:focus {
  border-color: var(--color-primario-500);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primario-500) 14%, transparent),
    0 8px 18px rgba(0, 0, 0, 0.12);
  background: color-mix(in srgb, var(--superficie-elevada) 96%, var(--color-primario-500));
}

.entrada-icono {
  position: absolute;
  left: var(--espacio-3);
  color: var(--color-primario-600);
  opacity: 0.9;
  text-shadow: 0 0 12px rgba(255, 128, 0, 0.25);
}

.entrada-wrapper--lupa .entrada-icono {
  color: var(--color-primario-500);
  opacity: 1;
  text-shadow: none;
  width: var(--lupa-icono);
  height: var(--lupa-icono);
  z-index: 2;
  pointer-events: none;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

[data-theme='dark'] .entrada-wrapper--lupa::after {
  background: color-mix(in srgb, var(--color-primario-500) 26%, var(--borde-normal));
}

[data-theme='dark'] .entrada-wrapper--lupa .entrada-icono {
  background: transparent;
  border-color: transparent;
}

.entrada-accion {
  position: absolute;
  right: var(--espacio-2);
}

.entrada--busqueda {
  padding-right: var(--espacio-4);
}

.filtros {
  display: none;
  margin-top: var(--espacio-4);
  padding-top: var(--espacio-4);
  border-top: 1px solid var(--borde-sutil);
}

.filtros--visible {
  display: block;
}

.filtros__acciones {
  margin-top: var(--espacio-4);
  display: flex;
  justify-content: flex-end;
  gap: var(--espacio-3);
}

.formulario-cuadricula {
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.tecla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 var(--espacio-2);
  border-radius: var(--radio-sm);
  background: var(--superficie-hundida);
  border: 1px solid var(--borde-sutil);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuente-seminegrita);
  color: var(--texto-secundario);
}

.pedidos-busqueda {
  border-radius: var(--radio-2xl);
  position: relative;
  overflow: hidden;
  backdrop-filter: var(--vidrio-fondo-difuso);
  -webkit-backdrop-filter: var(--vidrio-fondo-difuso);
  border: 1px solid color-mix(in srgb, var(--color-primario-500) 30%, var(--borde-sutil));
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
}

.pedidos-busqueda::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radio-2xl);
  background: linear-gradient(120deg, rgba(255, 128, 0, 0.15), transparent 55%);
  opacity: 0.5;
  pointer-events: none;
}

.pedidos-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  flex-wrap: wrap;
}

.pedidos-resultados {
  margin-top: var(--espacio-5);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--espacio-5);
}

.pedidos-resultados>.pedido-card {
  animation: deslizar-arriba var(--duracion-normal) var(--aceleracion-salida);
}

.pedido-card {
  display: grid;
  gap: var(--espacio-3);
  background: linear-gradient(160deg,
      color-mix(in srgb, var(--superficie-elevada) 94%, transparent),
      color-mix(in srgb, var(--superficie-elevada) 88%, transparent));
  border: 1px solid color-mix(in srgb, var(--color-primario-500) 28%, var(--borde-sutil));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  position: relative;
  overflow: hidden;
  border-radius: var(--radio-xl);
}

.pedido-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(255, 128, 0, 0.12), transparent 55%);
  opacity: 0.6;
  pointer-events: none;
}

.pedido-card .tarjeta__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--espacio-3);
}

.pedido-card.tarjeta--interactive:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.24);
}

.pedido-card--vacio {
  grid-column: 1 / -1;
}

.pedido-card--seleccionado {
  border-color: color-mix(in srgb, var(--color-primario-500) 55%, var(--borde-sutil));
  box-shadow: 0 12px 26px rgba(255, 128, 0, 0.2);
}

.pedido-card--seleccionado.tarjeta--interactive:hover {
  box-shadow: 0 12px 26px rgba(255, 128, 0, 0.2), 0 18px 40px rgba(0, 0, 0, 0.22);
}

.pedido-card__encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espacio-3);
}

.pedido-card__titulo {
  font-size: var(--texto-md);
  font-weight: var(--peso-fuente-seminegrita);
  color: var(--texto-principal);
}

.pedido-card__subtitulo {
  font-size: var(--texto-xs);
  color: var(--texto-terciario);
}

.pedido-card__meta {
  display: grid;
  gap: var(--espacio-2);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  font-size: var(--texto-sm);
  color: var(--texto-secundario);
}

.pedido-card__meta span {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}

.pedido-card__lista {
  display: grid;
  gap: var(--espacio-2);
  font-size: var(--texto-sm);
  color: var(--texto-secundario);
}

.pedido-card__lista span {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: 6px 10px;
  border-radius: var(--radio-md);
  background: color-mix(in srgb, var(--superficie-hundida) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--borde-sutil) 60%, transparent);
}

.pedido-card__acciones {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  flex-wrap: wrap;
}

.pedido-card__meta span i {
  color: var(--color-primario-500);
}

.mostrador-form {
  overflow: hidden;
  margin-bottom: var(--espacio-4);
  position: relative;
}

.mostrador-form::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 128, 0, 0.15), transparent 55%);
  opacity: 0.5;
  pointer-events: none;
}

.mostrador-form__body {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(160px, 0.8fr) minmax(120px, 0.4fr) auto;
  gap: var(--espacio-3);
  align-items: end;
  position: relative;
  z-index: 1;
}

.mostrador-form__campo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}

.mostrador-form__boton {
  height: 48px;
}

.mostrador-panel {
  display: grid;
  grid-template-columns: minmax(320px, 2fr) minmax(260px, 1fr);
  column-gap: var(--espacio-4);
  row-gap: var(--espacio-2);
}

.mostrador-panel__columna {
  min-height: 260px;
  transition: border-color var(--duracion-rapida) var(--aceleracion-salida),
    box-shadow var(--duracion-rapida) var(--aceleracion-salida);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mostrador-panel__columna::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 12%, rgba(255, 128, 0, 0.12), transparent 55%);
  opacity: 0.6;
  pointer-events: none;
}

.mostrador-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
}

.mostrador-panel__columna--destino {
  border-color: color-mix(in srgb, var(--color-primario-500) 28%, var(--borde-sutil));
}

.mostrador-panel__columna--sobre {
  border-color: color-mix(in srgb, var(--color-primario-500) 45%, var(--borde-sutil));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

.mostrador-panel__columna:focus-within {
  outline: 2px solid var(--borde-foco);
  outline-offset: 2px;
}

.mostrador-panel__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
}

.mostrador-panel__encabezado h3 {
  font-size: var(--texto-md);
  font-weight: var(--peso-fuente-seminegrita);
  color: var(--texto-principal);
}

.mostrador-panel__lista {
  display: grid;
  gap: var(--espacio-4);
  align-content: start;
  grid-auto-rows: min-content;
  min-height: 0;
}

.mostrador-panel__lista--vacio {
  place-items: center;
  align-content: center;
}

.mostrador-panel__estado {
  width: 100%;
  min-height: 200px;
  align-self: stretch;
}

.mostrador-panel__skeleton-carga {
  width: 100%;
  min-height: 200px;
  display: grid;
  align-content: center;
  gap: var(--espacio-2);
  padding: var(--espacio-6) var(--espacio-4);
}

.mostrador-panel__skeleton-carga .skeleton {
  width: min(260px, 100%);
}

.mostrador-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
  border-radius: var(--radio-lg);
  background: linear-gradient(160deg,
      color-mix(in srgb, var(--superficie-elevada) 94%, transparent),
      color-mix(in srgb, var(--superficie-elevada) 88%, transparent));
  border: 1px solid color-mix(in srgb, var(--borde-sutil) 80%, transparent);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
  cursor: grab;
  transition: transform var(--duracion-rapida) var(--aceleracion-salida),
    box-shadow var(--duracion-rapida) var(--aceleracion-salida),
    border-color var(--duracion-rapida) var(--aceleracion-salida);
  position: relative;
  overflow: hidden;
}

.mostrador-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(255, 128, 0, 0.16), transparent 55%);
  opacity: 0.6;
  pointer-events: none;
}

.mostrador-item:focus-visible {
  outline: 2px solid var(--borde-foco);
  outline-offset: 2px;
}

.mostrador-item:active {
  cursor: grabbing;
}

.mostrador-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
  border-color: color-mix(in srgb, var(--color-primario-500) 35%, var(--borde-sutil));
}

.mostrador-item--arrastrando {
  opacity: 0.55;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
  border-color: color-mix(in srgb, var(--color-primario-500) 40%, var(--borde-sutil));
}

.mostrador-item__nombre {
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuente-seminegrita);
  color: var(--texto-principal);
  margin-bottom: var(--espacio-1);
}

.mostrador-item__thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radio-md);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--superficie-hundida) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--borde-sutil) 70%, transparent);
  color: var(--texto-terciario);
  font-size: 18px;
}
.mostrador-item__info {
  min-width: 0;
}

.mostrador-item__meta {
  font-size: var(--texto-xs);
  color: var(--texto-terciario);
}

@media (max-width: 900px) {
  .mostrador-form__body {
    grid-template-columns: 1fr;
  }

  .mostrador-panel {
    grid-template-columns: 1fr;
  }

  .mostrador-form__boton {
    width: 100%;
  }
}

.masivo-acciones {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-lg);
  background: var(--superficie-elevada);
  border: 1px solid var(--borde-sutil);
}

.masivo-acciones--visible {
  display: flex;
}

.progreso-item {
  display: grid;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-3);
}

.progreso-item__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuente-seminegrita);
}

.progreso-item__etiqueta {
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuente-seminegrita);
  color: var(--texto-principal);
}

.progreso-item__valor {
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuente-seminegrita);
  color: var(--texto-principal);
}

.progreso-item__meta {
  font-size: var(--texto-xs);
  color: var(--texto-terciario);
}

.progreso-bar {
  width: 100%;
  height: 8px;
  border-radius: var(--radio-completo);
  background: var(--superficie-hundida);
  overflow: hidden;
}

.progreso-bar__fill {
  height: 100%;
  background: var(--color-primario-500);
  border-radius: inherit;
}

.insignia--pequeno {
  height: 20px;
  font-size: var(--texto-xxs);
  padding-inline: var(--espacio-2);
}

.usuario-tarjeta {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
  height: 52px;
  width: 100%;
  border-radius: var(--radio-md);
  background: var(--superficie-hundida);
  border: 1px solid var(--borde-sutil);
  transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.usuario-tarjeta__info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.05s,
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  width: auto;
}

#cerrar-sesion-boton span {
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
  white-space: nowrap;
}

.usuario-tarjeta__accion {
  --btn-height: 34px;
  --btn-padding-x: 0;
  width: 34px;
  min-width: 34px;
  height: 34px;
  margin-left: auto;
  border-radius: var(--radio-sm);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--texto-terciario);
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.usuario-tarjeta__accion::before {
  content: none;
}

.usuario-tarjeta__accion:focus-visible {
  outline: none;
  box-shadow: none;
}

.usuario-tarjeta__accion:hover {
  color: var(--color-primario-600);
}

.usuario-tarjeta__accion.boton--fantasma:hover {
  background: transparent;
  border-color: transparent;
}

.usuario-tarjeta__accion:active {
  transform: none;
}

.barra-lateral--colapsado .usuario-tarjeta__info {
  opacity: 0;
  width: 0;
  pointer-events: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-6px);
}

.barra-lateral--colapsado .usuario-tarjeta {
  position: relative;
  width: 100%;
  height: 52px;
  padding: var(--espacio-3);
  border-radius: var(--radio-md);
  justify-content: center;
  padding-inline: calc((100% - 36px) / 2);
  gap: 0;
  margin-inline: 0;
}

.barra-lateral--colapsado #cerrar-sesion-boton {
  width: 100%;
  height: 52px;
  padding: var(--espacio-3);
  padding-inline: calc((100% - 24px) / 2);
  column-gap: 0;
  grid-template-columns: 24px 0;
  justify-content: start;
  border-radius: var(--radio-md);
}

.barra-lateral--colapsado .usuario-tarjeta__accion {
  position: absolute;
  inset: 50% auto auto 50%;
  opacity: 0;
  width: 36px;
  min-width: 36px;
  height: 36px;
  margin-left: 0;
  pointer-events: none;
  color: #fff;
  transform: translate(-50%, -50%);
}

.barra-lateral--colapsado .usuario-tarjeta__accion:hover,
.barra-lateral--colapsado .usuario-tarjeta__accion:active {
  transform: translate(-50%, -50%);
}

.barra-lateral--colapsado .usuario-tarjeta:hover .usuario-tarjeta__accion {
  opacity: 1;
  pointer-events: auto;
}

.barra-lateral--colapsado .usuario-tarjeta:hover .avatar {
  filter: brightness(0.5);
}

#cerrar-sesion-boton {
  width: 100%;
  height: 52px;
  padding: var(--espacio-3);
  display: grid;
  align-items: center;
  grid-template-columns: 24px 1fr;
  column-gap: var(--espacio-3);
  justify-content: start;
  text-align: left;
  transition: background var(--duracion-rapida) var(--aceleracion-salida),
    color var(--duracion-rapida) var(--aceleracion-salida),
    border-color var(--duracion-rapida) var(--aceleracion-salida);
}

#cerrar-sesion-boton i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  line-height: 1;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.barra-lateral--colapsado #cerrar-sesion-boton i {
  transform: scale(1.15);
}

.barra-lateral--colapsado-listo .usuario-tarjeta {
  justify-content: center;
  gap: 0;
}

.barra-lateral--colapsado-listo .usuario-tarjeta__info {
  display: none;
}

.barra-lateral--colapsado-listo .usuario-tarjeta__accion {
  display: inline-flex;
}

.barra-lateral--colapsado .avatar {
  transform: none;
}

.barra-lateral--colapsado-listo #cerrar-sesion-boton {
  column-gap: 0;
  grid-template-columns: 24px 0;
  justify-content: center;
}

.barra-lateral--colapsado #cerrar-sesion-boton span {
  opacity: 0;
  width: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.barra-lateral--colapsado-listo #cerrar-sesion-boton span {
  opacity: 0;
  width: 0;
  pointer-events: none;
}

.usuario-tarjeta__nombre {
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuente-seminegrita);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usuario-tarjeta__rol {
  font-size: var(--texto-xs);
  color: var(--texto-terciario);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primario-100);
  color: var(--color-primario-700);
  display: grid;
  place-items: center;
  line-height: 1;
  font-size: 14px;
  font-weight: var(--peso-fuente-negrita);
  flex-shrink: 0;
  transition: filter 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}