/* ==========================================================================
   COMPONENTES REUTILIZABLES - EXTRANET HALTER
   Botones, formularios, tarjetas, badges, alerts, íconos
   Requiere importar primero: variables.css
   ========================================================================== */

/* BOTONES */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: var(--espaciado-sm) var(--espaciado-md);
  font-family: var(--fuente-base);
  font-size: var(--tamano-base);
  font-weight: 500;
  border: var(--borde-grueso) solid transparent;
  border-radius: var(--borde-radio);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}

.btn i {
  font-size: 1.1em;
}

/* Estilos de botones principales */
.btn-primary {
  background-color: var(--color-primario);
  color: white;
  border-color: var(--color-primario-dark);
}
.btn-primary:hover {
  background-color: var(--color-primario-dark);
}

/* Botón con fondo blanco y borde primario */
.btn-outline {
  background-color: transparent;
  color: var(--color-primario);
  border-color: var(--color-primario);
}
.btn-outline:hover {
  background-color: var(--color-hover);
  color: white;
}

/* Botón invertido (para visibilidad como el botón "Detalle") */
.btn-invertido {
  background-color: white;
  color: var(--color-primario);
  border: var(--borde-grueso) solid var(--color-primario);
}
.btn-invertido:hover {
  background-color: var(--color-primario);
  color: white;
}

/* FORMULARIOS */
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: var(--espaciado-sm);
  font-size: var(--tamano-base);
  border: var(--borde-grueso) solid var(--color-borde);
  border-radius: var(--borde-radio);
  background-color: var(--color-input-bg);
  transition: border-color 0.2s;
  font-family: var(--fuente-base);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primario);
  background-color: #fff;
}

/* TARJETAS */
.card {
  background-color: white;
  border: var(--borde-grueso) solid var(--color-borde);
  border-radius: var(--borde-radio);
  padding: var(--espaciado-md);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  margin-bottom: var(--espaciado-md);
}

/* BADGES */
.badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: var(--tamano-chico);
  font-weight: 600;
  border-radius: var(--borde-radio);
  background-color: var(--color-secundario);
  color: white;
  vertical-align: middle;
}
.badge i {
  margin-right: 4px;
}

.badge.success { background-color: var(--color-exito); }
.badge.warning { background-color: var(--color-warning); }
.badge.danger  { background-color: var(--color-alerta); }
.badge.info    { background-color: var(--color-info); }

/* ALERTS */
.alert {
  padding: var(--espaciado-sm) var(--espaciado-md);
  border-radius: var(--borde-radio);
  font-size: var(--tamano-base);
  margin-bottom: var(--espaciado-md);
}

.alert-success { background-color: #dff0d8; color: #3c763d; }
.alert-info    { background-color: #d9edf7; color: #31708f; }
.alert-warning { background-color: #fcf8e3; color: #8a6d3b; }
.alert-danger  { background-color: #f2dede; color: #a94442; }

/* MODALES */
.modal-header {
  background-color: var(--color-primario);
  color: white;
  border-bottom: none;
  padding: var(--espaciado-md);
  border-top-left-radius: var(--borde-radio);
  border-top-right-radius: var(--borde-radio);
}

.modal-body {
  padding: var(--espaciado-md);
  background-color: #f9f9f9;
  color: var(--color-texto);
}

.modal-footer {
  border-top: none;
  background-color: #f0f0f0;
  padding: var(--espaciado-md);
}

/* ÍCONOS GRANDES DENTRO DE BOTONES */
.btn-icono {
  display: inline-flex;
  align-items: center;
  font-size: 1.1em;
}



.autocomplete-box {
  max-height: 200px;
  overflow-y: auto;
  border-radius: 4px;
}

.autocomplete-item:hover {
  background-color: #f0f0f0;
}