.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.uppercase-input {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* =========================
   HEADER SUPERIOR (ROJO GRANAUTO)
========================= */
header,
nav,
#header,
#top-bar,
.top-bar {
  background-color: #C21A26 !important;
  color: #ffffff;
}

.header-title-text {
  color: var(--color-text-main);
}

.header-icon {
  width: 150px;     /* Ajusta el tamaño del logo */
  height: 40px;     /* Alto de la barra */
  display: flex;
  align-items: center;
}

.header-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;  /* evita deformación */
}

/* Texto del título en blanco */
header h1,
header h2,
nav h1,
nav h2 {
  color: #ffffff;
}

/* =========================
   FONDO GENERAL
========================= */
body {
  background-color: #e5e7eb; /* gris claro */
}

/* =========================
   INPUT VIN
========================= */
#vin-input {
  background-color: #ffffff !important;
  color: #000000;
}

/* =========================
   BOTONES
========================= */
#btn-execute,
#btn-clear,
#btn-pdf {
  background-color: #C21A26 !important;
  color: #000000 !important;
  border: 2px solid #000000;
}

/* =========================
   BOTÓN EJECUTAR (NEGRO SIEMPRE)
========================= */
#btn-execute {
  background-color: #303030 !important;
  color: #ffffff !important;
  border: 2px solid #000000;
}

#btn-execute:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Hover elegante */
#btn-execute:hover,
#btn-clear:hover,
#btn-pdf:hover {
  background-color: #000000 !important;
  color: #C21A26 !important;
}

/* =========================
   TARJETA DE RESULTADOS
========================= */
#results-panel {
  background-color: #ffffff;
}

/* =========================
   INPUTS DENTRO DE TARJETA (si los hubiera)
========================= */
#results-panel input,
#results-panel textarea {
  background-color: #ffffff;
  color: #000000;
}

/* =========================
   ESTADOS DE CUPÓN
========================= */

/* Badge de estado con colores */
.status-success {
  color: #059669 !important; /* green-600 */
}

.status-error {
  color: #DC2626 !important; /* red-600 */
}

.status-warning {
  color: #D97706 !important; /* yellow-600 */
}

.status-info {
  color: #6B7280 !important; /* zinc-500 */
}

/* Animación de fade in para información de cupón */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.coupon-info-enter {
  animation: fadeIn 0.3s ease-out;
}