/* ==========================================================================
   Tribum — sistema de diseño base
   Paleta: verde azulado (marca, confianza) + ámbar (acción de venta/cobro).
   ========================================================================== */

:root {
  --tribum-teal-700: #0f6f66;
  --tribum-teal-600: #128577;
  --tribum-teal-500: #159c8a;
  --tribum-teal-100: #e3f3f0;
  --tribum-amber-500: #f2994a;
  --tribum-amber-600: #e07b1f;
  --tribum-cream: #faf8f5;
  --tribum-ink: #22302e;

  /* Reskin de las variables de Bootstrap 5.3: reutiliza todos los componentes
     (botones, badges, focus rings, links) sin tener que sobreescribir cada
     clase una por una. */
  --bs-primary: var(--tribum-teal-700);
  --bs-primary-rgb: 15, 111, 102;
  --bs-link-color: var(--tribum-teal-700);
  --bs-link-color-rgb: 15, 111, 102;
  --bs-link-hover-color: var(--tribum-teal-600);
  --bs-link-hover-color-rgb: 18, 133, 119;
  --bs-body-bg: var(--tribum-cream);
  --bs-body-color: var(--tribum-ink);
  --bs-border-radius: 0.6rem;
  --bs-border-radius-sm: 0.4rem;
  --bs-border-radius-lg: 0.85rem;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

h1, h2, h3, .navbar-brand {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---- Navbar: la marca lleva el color principal para que se identifique
   de inmediato como Tribum, incluso antes de leer el contenido. ---- */
.navbar-tribum {
  background: linear-gradient(180deg, var(--tribum-teal-700), var(--tribum-teal-600));
}

.navbar-tribum .navbar-brand,
.navbar-tribum .nav-link {
  color: rgba(255, 255, 255, 0.92) !important;
}

.navbar-tribum .nav-link:hover,
.navbar-tribum .nav-link:focus {
  color: #ffffff !important;
}

.navbar-tribum .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.4);
}

.navbar-tribum .navbar-toggler-icon {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Botón de acción principal del navbar ("Nueva venta"): usa el color de
   acento (ámbar) para destacar por sobre el resto de la navegación — es la
   acción que un cajero necesita encontrar sin pensar. */
.btn-acento {
  background-color: var(--tribum-amber-500);
  border-color: var(--tribum-amber-500);
  color: #241505;
  font-weight: 600;
}

.btn-acento:hover,
.btn-acento:focus {
  background-color: var(--tribum-amber-600);
  border-color: var(--tribum-amber-600);
  color: #241505;
}

/* ---- Tarjetas de contenido: la mayoría de las pantallas envuelven su
   contenido principal en .card-tribum para separarlo visualmente del fondo
   crema y darle profundidad sin recargar la interfaz. ---- */
.card-tribum {
  background: #ffffff;
  border: 1px solid rgba(15, 111, 102, 0.08);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 1px 2px rgba(34, 48, 46, 0.04), 0 8px 24px rgba(34, 48, 46, 0.06);
  padding: 1.5rem;
}

@media (max-width: 575.98px) {
  .card-tribum {
    padding: 1rem;
    border-radius: var(--bs-border-radius);
  }
}

.tribum-total {
  font-size: 2rem;
  font-weight: 700;
  /* !important: se usa dentro de celdas de tabla, donde la regla de color de
     Bootstrap (.table > :not(caption) > * > *) tiene más especificidad que
     una clase sola y ganaría en su lugar. */
  color: var(--tribum-teal-700) !important;
}

.table-tribum thead {
  background-color: var(--tribum-teal-100);
}

.table-tribum thead th {
  color: var(--tribum-teal-700);
  font-weight: 600;
  border-bottom: none;
}

.btn {
  font-weight: 500;
}

/* Bootstrap 5.3 compila .btn-primary/.btn-outline-primary/.list-group-item.active
   con colores propios de cada componente (no heredan --bs-primary del :root),
   así que hay que reescribir esas variables puntualmente para que sigan la marca. */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--tribum-teal-700);
  --bs-btn-border-color: var(--tribum-teal-700);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--tribum-teal-600);
  --bs-btn-hover-border-color: var(--tribum-teal-600);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--tribum-teal-600);
  --bs-btn-active-border-color: var(--tribum-teal-600);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--tribum-teal-700);
  --bs-btn-disabled-border-color: var(--tribum-teal-700);
}

.btn-outline-primary {
  --bs-btn-color: var(--tribum-teal-700);
  --bs-btn-border-color: var(--tribum-teal-700);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--tribum-teal-700);
  --bs-btn-hover-border-color: var(--tribum-teal-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--tribum-teal-700);
  --bs-btn-active-border-color: var(--tribum-teal-700);
  --bs-btn-disabled-color: var(--tribum-teal-700);
  --bs-btn-disabled-border-color: var(--tribum-teal-700);
}

.list-group-item.active {
  background-color: var(--tribum-teal-700);
  border-color: var(--tribum-teal-700);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--tribum-teal-500);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ---- Barra fija de atajos de teclado (pantalla de venta): discreta, siempre
   visible, pegada al fondo para no competir con el carrito ni el buscador.
   Blanca con sombra hacia arriba (como una toolbar flotante) en vez de una
   franja de color plana, para no chocar con el resto del sistema de diseño
   (tarjetas blancas redondeadas sobre fondo crema). La página que la usa
   oculta el footer del sitio (ViewData["OcultarFooter"]) para que no queden
   superpuestos. Oculta en pantallas chicas (d-md-block en el markup) — el
   teclado físico y el lector de código de barras son el caso de uso de
   escritorio/caja. ---- */
.barra-atajos {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: #ffffff;
  box-shadow: 0 -1px 2px rgba(34, 48, 46, 0.04), 0 -8px 24px rgba(34, 48, 46, 0.06);
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  padding: 0.55rem 1rem;
  text-align: center;
}

.barra-atajos kbd {
  font-size: 0.7rem;
  color: var(--tribum-ink);
  background-color: var(--tribum-teal-100);
  border: 1px solid rgba(15, 111, 102, 0.15);
  box-shadow: none;
}