:root {
  --ureta-primary:       #007984;
  --ureta-primary-dark:  #005e68;
  --ureta-accent:        #f26522;
  --ureta-bg:            #f9f9f9;
}

body {
  background-color: var(--ureta-bg);
  font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
}

/* Sidebar */
.sidebar {
  width: 220px;
  min-height: 100vh;
  background-color: var(--ureta-primary);
  color: white;
}
.sidebar .nav-link {
  padding: 10px;
  border-radius: 6px;
  color: white;
  transition: background-color 0.2s;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  background-color: var(--ureta-primary-dark);
  font-weight: bold;
}
.sidebar .nav-link i {
  margin-right: 8px;
}

/* Logos y textos */
.login-logo {
  max-width: 180px;
}
h2 {
  color: var(--ureta-primary);
  font-weight: 600;
}

/* Card headers */
.card-title {
  font-weight: 600;
}
/* Header accent para todas las cards */
.card-header.header-accent {
  background-color: var(--ureta-primary);
  color: white;
  /* conserva padding y borde de Bootstrap */
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,0.125);
}

/* Warning card (text-bg-warning) */
.card.text-bg-warning {
  background-color: var(--ureta-accent);
  border: none;
  color: white;
}

/* Estados (badges) */
.estado-pendiente i,
.estado-validado i,
.estado-conciliado i,
.estado-enviado i,
.estado-recibido i,
.estado-recibida i,
.estado-recepcionado i,
.estado-anulado i,
.estado-incidencia i,
.estado-error i,
.estado-facturado i {
  margin-right: 0.4em;
  vertical-align: middle;
}
.estado-pendiente,
.estado-validado,
.estado-conciliado,
.estado-enviado,
.estado-recibido,
.estado-recibida,
.estado-recepcionado,
.estado-anulado,
.estado-incidencia,
.estado-error,
.estado-facturado {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.8em;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s ease;
}

/* Pendiente */
.btn.estado-pendiente:hover,
.btn.estado-pendiente.active {
  background-color: #F57C00 !important; /* naranja oscuro */
}

/* Validado */
.btn.estado-validado:hover,
.btn.estado-validado.active {
  background-color: #1E88E5 !important; /* azul oscuro */
}

/* Conciliado */
.btn.estado-conciliado:hover,
.btn.estado-conciliado.active {
  background-color: #1E88E5 !important; /* azul oscuro */
}

/* Enviado */
.btn.estado-enviado:hover,
.btn.estado-enviado.active {
  background-color: #43A047 !important; /* verde oscuro */
}

/* Recepcionado */
.btn.estado-recepcionado:hover,
.btn.estado-recepcionado.active {
  background-color: #43A047 !important; /* verde oscuro */
}

/* Recibido */
.btn.estado-recibida:hover,
.btn.estado-recibida.active {
  background-color: #F57C00 !important; /* verde oscuro */
}


/* Recibido */
.btn.estado-recibido:hover,
.btn.estado-recibido.active {
  background-color: #F57C00 !important; /* verde oscuro */
}

/* Facturado */
.btn.estado-facturado:hover,
.btn.estado-facturado.active {
  background-color: #5E35B1 !important; /* morado */
  color: white !important;
}

/* Anulado */
.btn.estado-anulado:hover,
.btn.estado-anulado.active {
  background-color: #E53935 !important; /* rojo oscuro */
}

/* Incidencia */
.btn.estado-incidencia:hover,
.btn.estado-incidencia.active {
  background-color: #FDD835 !important; /* amarillo oscuro */
  color: #000 !important;
}

/* Error IA */
.btn.estado-error:hover,
.btn.estado-error.active {
  background-color: #E57373 !important; /* rojo-rosado oscuro */
}

/* Todos (primario) */
.btn.estado-todos:hover,
.btn.estado-todos.active {
  background-color: var(--ureta-primary-dark) !important;
}

.btn.estado-contabilizada:hover,
.btn.estado-contabilizada.active {
  background-color: #17a2b8 !important;  /* turquesa oscuro */
  color: white !important;
}

/* Card error */
.card-error {
  background-color: #fce8e6;
  border: 1px solid #f5c2c0;
}
.card-error .card-header {
  background-color: #f5c2c0;
  color: #721c24;
}

/* Color de texto para pestañas no activas */
.nav-tabs .nav-link {
  color: var(--ureta-primary);
  background-color: transparent;
  border-color: transparent transparent var(--ureta-primary) transparent;
}

/* ——— Badges de estado independientes ——— */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.8em;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: filter 0.2s ease;
  color: white;
  white-space: nowrap;
  line-height: 1; 
}

/* Colores fijos */
.status-pendiente    { background-color: #F57C00; }  /* naranja */
.status-recibido     { background-color: #F57C00; }  /* naranja */
.status-recibida     { background-color: #F57C00; }  /* naranja */
.status-validado     { background-color: #1E88E5; }  /* azul */
.status-conciliado   { background-color: #1E88E5; }  /* azul */
.status-enviado      { background-color: #43A047; }  /* verde */
.status-anulado      { background-color: #E53935; }  /* rojo */
.status-incidencia   { background-color: #FDD835; color: black; } /* amarillo */
.status-error        { background-color: #E57373; }  /* rojo-rosado */
.status-recepcionado { background-color: #43A047; color: white; } /* morado oscuro */
.status-facturado    { background-color: #5E35B1; color: white; } /* morado */
.status-contabilizada { background-color: #17a2b8; color: white;} /* turquesa */
/* Badge de estado */
.status-importada_erp { background-color: #0dcaf0; color: #084298; } /* info */

/* Botón con estado (si usas .btn.estado-*) */
.btn.estado-importada_erp:hover,
.btn.estado-importada_erp.active {
  background-color: #0bbbdc !important; /* un poco más oscuro al hover */
  color: #084298 !important;
}

/* Card con estado (si pintas tarjetas con status-{{ estado }}) */
.card.status-importada_erp { background-color: #0dcaf0; }
.card.status-importada_erp .card-body { color: #084298; }
/* Hover para badges */
.status-badge:hover {
  filter: brightness(0.9);
}

/* Hover de pestaña no activa */
.nav-tabs .nav-link:hover {
  color: var(--ureta-primary-dark);
}

/* Pestaña activa: fondo primario y texto blanco */
.nav-tabs .nav-link.active {
  color: #fff;
  background-color: var(--ureta-primary);
  border-color: var(--ureta-primary) var(--ureta-primary) transparent;
}

/* Línea inferior para pestaña activa */
.nav-tabs .nav-link.active {
  border-bottom: 2px solid var(--ureta-primary-dark);
}