/**
 * css/componentes.css
 * Tacos POST — SaaS multi-tenant POS
 *
 * Contenido:
 *   1. Badges de estatus
 *   2. Botones
 *   3. Inputs y formularios
 *   4. Cards de pedido
 *   5. Columna kanban
 *   6. Toast / notificaciones inline
 *   7. Modal
 *   8. Spinner de carga
 *   9. Tabla de admin
 *  10. Empty state
 *  11. Header de vista
 */

/* ─────────────────────────────────────────────
   1. BADGES DE ESTATUS
   ───────────────────────────────────────────── */

.badge {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--espacio-1);
  padding:        var(--espacio-1) var(--espacio-3);
  border-radius:  var(--radio-pill);
  font-size:      var(--text-xs);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  line-height:    1;
  white-space:    nowrap;
}

/* Punto indicador de estatus */
.badge::before {
  content:       '';
  display:       inline-block;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    currentColor;
  flex-shrink:   0;
}

.badge-pendiente {
  background: rgba(244, 162, 97, 0.15);
  color:      var(--color-pendiente);
  border:     1px solid rgba(244, 162, 97, 0.30);
}

.badge-preparando {
  background: rgba(69, 123, 157, 0.15);
  color:      var(--color-preparando);
  border:     1px solid rgba(69, 123, 157, 0.30);
  /* Punto pulsante mientras se prepara */
}

.badge-preparando::before {
  animation: pulso 1.4s ease-in-out infinite;
}

.badge-terminado {
  background: rgba(45, 198, 83, 0.15);
  color:      var(--color-terminado);
  border:     1px solid rgba(45, 198, 83, 0.30);
}

@keyframes pulso {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

/* Badge genérico de rol */
.badge-rol {
  background: rgba(var(--color-primario-rgb), 0.10);
  color:      var(--color-primario);
  border:     1px solid rgba(var(--color-primario-rgb), 0.20);
}

.badge-rol::before { display: none; }

/* ─────────────────────────────────────────────
   2. BOTONES
   ───────────────────────────────────────────── */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--espacio-2);
  padding:         var(--espacio-3) var(--espacio-6);
  border-radius:   var(--radio-card);
  font-family:     var(--fuente-base);
  font-size:       var(--text-base);
  font-weight:     var(--font-weight-semibold);
  line-height:     1;
  white-space:     nowrap;
  transition:
    background var(--transition-base),
    transform   var(--transition-fast),
    box-shadow  var(--transition-base),
    opacity     var(--transition-base);
  user-select: none;
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

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

/* Variantes */
.btn-primary {
  background: var(--color-primario);
  color:      #fff;
}

.btn-primary:hover:not(:disabled) {
  background:  var(--color-primario-dark);
  box-shadow:  var(--sombra-primario);
}

.btn-secondary {
  background: var(--color-secundario);
  color:      #fff;
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-secundario-dark);
}

.btn-success {
  background: var(--color-terminado);
  color:      #fff;
}

.btn-success:hover:not(:disabled) {
  background: #24a845;
}

.btn-ghost {
  background: transparent;
  color:      currentColor;
  border:     2px solid currentColor;
  opacity:    0.7;
}

.btn-ghost:hover:not(:disabled) {
  opacity:    1;
  background: rgba(255,255,255,0.08);
}

.btn-danger {
  background: transparent;
  color:      var(--color-error);
  border:     1px solid rgba(var(--color-primario-rgb), 0.30);
}

.btn-danger:hover:not(:disabled) {
  background: rgba(var(--color-primario-rgb), 0.10);
}

/* Tamaños */
.btn-sm {
  padding:   var(--espacio-2) var(--espacio-4);
  font-size: var(--text-sm);
}

.btn-lg {
  padding:   var(--espacio-4) var(--espacio-8);
  font-size: var(--text-lg);
}

.btn-block {
  width: 100%;
}

/* Botón solo ícono */
.btn-icon {
  padding:       var(--espacio-3);
  border-radius: var(--radio-card);
  aspect-ratio:  1;
}

/* Estado de carga en botón */
.btn.loading {
  pointer-events: none;
  opacity:        0.8;
}

.btn.loading::after {
  content:          '';
  width:            1em;
  height:           1em;
  border:           2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius:    50%;
  animation:        spin 0.6s linear infinite;
}

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

/* ─────────────────────────────────────────────
   3. INPUTS Y FORMULARIOS
   ───────────────────────────────────────────── */

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

.input-label {
  font-size:      var(--text-sm);
  font-weight:    var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  opacity:        0.7;
}

.input {
  width:         100%;
  padding:       var(--espacio-3) var(--espacio-4);
  border:        1.5px solid var(--gris-300);
  border-radius: var(--radio-card);
  font-size:     var(--text-base);
  background:    transparent;
  transition:    border-color var(--transition-base),
                 box-shadow   var(--transition-base);
  -webkit-appearance: none;
  appearance:    none;
}

.input:focus {
  border-color: var(--color-primario);
  box-shadow:   0 0 0 3px rgba(var(--color-primario-rgb), 0.15);
  outline:      none;
}

.input::placeholder {
  opacity: 0.4;
}

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

.input-error:focus {
  box-shadow: 0 0 0 3px rgba(var(--color-primario-rgb), 0.15);
}

.input-hint {
  font-size: var(--text-sm);
  opacity:   0.55;
}

.input-hint.error {
  color:   var(--color-error);
  opacity: 1;
}

/* Grupo input + botón en línea (ej: buscador) */
.input-addon {
  display:     flex;
  align-items: stretch;
  gap:         0;
}

.input-addon .input {
  border-radius: var(--radio-card) 0 0 var(--radio-card);
  flex:          1;
}

.input-addon .btn {
  border-radius: 0 var(--radio-card) var(--radio-card) 0;
}

/* ─────────────────────────────────────────────
   4. CARDS DE PEDIDO
   ───────────────────────────────────────────── */

.card-pedido {
  border-radius:  var(--radio-card);
  padding:        var(--espacio-4);
  box-shadow:     var(--sombra-card);
  display:        flex;
  flex-direction: column;
  gap:            var(--espacio-3);
  transition:
    transform   var(--transition-base),
    box-shadow  var(--transition-base);
}

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

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

.card-pedido-mesa {
  font-family:    var(--fuente-display);
  font-size:      var(--text-xl);
  font-weight:    var(--font-weight-black);
  letter-spacing: var(--letter-spacing-tight);
  line-height:    1;
}

.card-pedido-hora {
  font-family: var(--fuente-mono);
  font-size:   var(--text-xs);
  opacity:     0.5;
}

/* Lista de ítems dentro del card */
.card-pedido-items {
  display:        flex;
  flex-direction: column;
  gap:            var(--espacio-2);
}

.card-item {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--espacio-3);
  padding:         var(--espacio-2) var(--espacio-3);
  border-radius:   var(--radio-sm);
}

.card-item-nombre {
  flex:        1;
  font-size:   var(--text-sm);
  font-weight: var(--font-weight-medium);
  min-width:   0;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.card-item-cantidad {
  font-family:    var(--fuente-mono);
  font-size:      var(--text-sm);
  font-weight:    var(--font-weight-bold);
  min-width:      1.5rem;
  text-align:     center;
  flex-shrink:    0;
}

/* Animación de entrada para nuevos cards */
.card-pedido-nuevo {
  animation: entrada-card 0.35s var(--transition-spring) both;
}

@keyframes entrada-card {
  from {
    opacity:   0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity:   1;
    transform: translateY(0) scale(1);
  }
}

/* Card de cobro — resumen de total */
.card-cobro {
  border-radius: var(--radio-card);
  padding:       var(--espacio-4);
  box-shadow:    var(--sombra-card);
}

.card-cobro-total {
  display:     flex;
  align-items: baseline;
  gap:         var(--espacio-2);
}

.card-cobro-total-label {
  font-size:   var(--text-sm);
  font-weight: var(--font-weight-medium);
  opacity:     0.6;
}

.card-cobro-total-valor {
  font-family:    var(--fuente-display);
  font-size:      var(--text-3xl);
  font-weight:    var(--font-weight-black);
  letter-spacing: var(--letter-spacing-tight);
  line-height:    1;
}

.card-cobro-aviso {
  margin-top:  var(--espacio-3);
  font-size:   var(--text-sm);
  color:       var(--color-warning);
  font-weight: var(--font-weight-medium);
}

/* ─────────────────────────────────────────────
   5. COLUMNA KANBAN
   ───────────────────────────────────────────── */

.kanban {
  display:    grid;
  grid-template-columns:
    repeat(3, minmax(var(--kanban-col-min), var(--kanban-col-max)));
  gap:        var(--espacio-6);
  padding:    var(--espacio-6);
  min-height: 100vh;
  align-items: start;
}

.kanban-col {
  display:        flex;
  flex-direction: column;
  gap:            var(--espacio-4);
  min-height:     200px;
}

.kanban-col-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--espacio-2) var(--espacio-1);
  position:        sticky;
  top:             var(--espacio-4);
  z-index:         var(--z-sticky);
}

.kanban-col-titulo {
  font-family:    var(--fuente-display);
  font-size:      var(--text-sm);
  font-weight:    var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  opacity:        0.6;
}

.kanban-col-contador {
  font-family:    var(--fuente-mono);
  font-size:      var(--text-xs);
  font-weight:    var(--font-weight-bold);
  padding:        2px var(--espacio-2);
  border-radius:  var(--radio-pill);
  min-width:      1.5rem;
  text-align:     center;
}

/* ─────────────────────────────────────────────
   6. TOAST / NOTIFICACIONES INLINE
   ───────────────────────────────────────────── */

.toast-container {
  position:       fixed;
  bottom:         var(--espacio-6);
  right:          var(--espacio-6);
  z-index:        var(--z-toast);
  display:        flex;
  flex-direction: column;
  gap:            var(--espacio-3);
  pointer-events: none;
}

.toast {
  display:        flex;
  align-items:    flex-start;
  gap:            var(--espacio-3);
  padding:        var(--espacio-4);
  border-radius:  var(--radio-card);
  box-shadow:     var(--sombra-lg);
  max-width:      360px;
  pointer-events: auto;
  animation:      toast-in 0.3s var(--transition-spring) both;
  border-left:    4px solid currentColor;
}

.toast.saliendo {
  animation: toast-out 0.25s ease forwards;
}

.toast-success { color: var(--color-success);  }
.toast-error   { color: var(--color-error);    }
.toast-warning { color: var(--color-warning);  }
.toast-info    { color: var(--color-info);     }

.toast-icono {
  font-size:   1.2em;
  flex-shrink: 0;
  line-height: 1;
}

.toast-texto {
  flex: 1;
}

.toast-titulo {
  font-weight: var(--font-weight-semibold);
  font-size:   var(--text-sm);
  line-height: var(--line-height-snug);
}

.toast-cuerpo {
  font-size:   var(--text-sm);
  opacity:     0.8;
  margin-top:  var(--espacio-1);
}

@keyframes toast-in {
  from {
    opacity:   0;
    transform: translateX(24px) scale(0.95);
  }
  to {
    opacity:   1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toast-out {
  to {
    opacity:   0;
    transform: translateX(24px) scale(0.95);
  }
}

/* ─────────────────────────────────────────────
   7. MODAL
   ───────────────────────────────────────────── */

.modal-overlay {
  position:    fixed;
  inset:       0;
  z-index:     var(--z-modal);
  display:     flex;
  align-items: center;
  justify-content: center;
  padding:     var(--espacio-6);
  animation:   fade-in 0.2s ease both;
}

.modal-overlay::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal {
  position:       relative;
  border-radius:  var(--radio-lg);
  padding:        var(--espacio-8);
  width:          100%;
  max-width:      480px;
  max-height:     90vh;
  overflow-y:     auto;
  box-shadow:     var(--sombra-xl);
  animation:      modal-in 0.3s var(--transition-spring) both;
}

.modal-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--espacio-4);
  margin-bottom:   var(--espacio-6);
}

.modal-titulo {
  font-family:    var(--fuente-display);
  font-size:      var(--text-xl);
  font-weight:    var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
}

.modal-cerrar {
  flex-shrink:   0;
  width:         2rem;
  height:        2rem;
  border-radius: var(--radio-sm);
  display:       flex;
  align-items:   center;
  justify-content: center;
  opacity:       0.5;
  transition:    opacity var(--transition-base);
}

.modal-cerrar:hover { opacity: 1; }

.modal-footer {
  display:         flex;
  gap:             var(--espacio-3);
  justify-content: flex-end;
  margin-top:      var(--espacio-6);
}

@keyframes modal-in {
  from {
    opacity:   0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity:   1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─────────────────────────────────────────────
   8. SPINNER DE CARGA
   ───────────────────────────────────────────── */

.spinner {
  display:       inline-block;
  width:         1.5rem;
  height:        1.5rem;
  border:        2.5px solid rgba(currentColor, 0.2);
  border-top-color: currentColor;
  border-radius: 50%;
  animation:     spin 0.6s linear infinite;
  flex-shrink:   0;
}

.spinner-sm { width: 1rem;   height: 1rem;   border-width: 2px;   }
.spinner-lg { width: 2.5rem; height: 2.5rem; border-width: 3px;   }

/* Estado de carga de página completa */
.loading-page {
  position:        fixed;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             var(--espacio-4);
  z-index:         var(--z-modal);
}

.loading-page .spinner {
  width:        3rem;
  height:       3rem;
  border-width: 3px;
  color:        var(--color-primario);
}

/* ─────────────────────────────────────────────
   9. TABLA DE ADMIN
   ───────────────────────────────────────────── */

.tabla-wrapper {
  overflow-x:    auto;
  border-radius: var(--radio-card);
  box-shadow:    var(--sombra-card);
}

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

.tabla th {
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  font-size:      var(--text-xs);
  padding:        var(--espacio-3) var(--espacio-4);
  text-align:     left;
  white-space:    nowrap;
  opacity:        0.6;
}

.tabla td {
  padding:     var(--espacio-3) var(--espacio-4);
  white-space: nowrap;
}

.tabla tbody tr {
  transition: background var(--transition-fast);
}

.tabla tbody tr:hover {
  background: rgba(var(--color-primario-rgb), 0.04);
}

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

/* ─────────────────────────────────────────────
   10. EMPTY STATE
   ───────────────────────────────────────────── */

.empty-state {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--espacio-4);
  padding:         var(--espacio-12) var(--espacio-6);
  text-align:      center;
  opacity:         0.55;
}

.empty-state-icono {
  font-size: var(--text-4xl);
  line-height: 1;
  opacity:  0.4;
}

.empty-state-titulo {
  font-family:    var(--fuente-display);
  font-size:      var(--text-xl);
  font-weight:    var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
}

.empty-state-cuerpo {
  font-size: var(--text-sm);
  max-width: 24ch;
}

/* ─────────────────────────────────────────────
   11. HEADER DE VISTA
   ───────────────────────────────────────────── */

.vista-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--espacio-4);
  padding:         var(--espacio-4) var(--espacio-6);
  position:        sticky;
  top:             0;
  z-index:         var(--z-sticky);
}

.vista-header-titulo {
  font-family:    var(--fuente-display);
  font-size:      var(--text-lg);
  font-weight:    var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  display:        flex;
  align-items:    center;
  gap:            var(--espacio-3);
}

.vista-header-acciones {
  display:     flex;
  align-items: center;
  gap:         var(--espacio-3);
}