body {
  background-color: #f5f7fa;
  /* gris muy claro para dar contraste con las tarjetas*/
}

#inicio {
  background-image: url("/assets/fondo-0f4fcb22.webp");
  /* Usa tu imagen optimizada */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  /* Asegura que cubra toda la pantalla */
}

.info-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.info-line strong {
  min-width: 120px;
  font-weight: bold;
}

/* Custom inputs */
.custom-input {
  min-width: 4em;
}

.white-letters {
  color: #ffffff !important;
}

/* Tabla sticky */
.tabla-sticky {
  overflow-x: auto;
}

.sticky-header th {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;
}

.sticky-line {
  border-collapse: separate !important;
  border-spacing: 0;
}

.table-container {
  overflow: auto;
  max-height: 50rem;
  /* ajusta como quieras */
}

.table-container-special {
  overflow: visible !important;
  max-height: none !important;
  /* o ajusta si realmente necesitas limitar altura */
}

.tabla-sticky th,
.tabla-sticky td {
  text-align: center;
  vertical-align: middle;
}

.highlight-header {
  background-color: #f0f0f0 !important;
  border-color: #444;
  outline-offset: -2px;
}

.highlight-header input {
  background-color: #f0f0f0 !important;
}

.highlight-header input:focus {
  background-color: #FFFFFF !important;
  border: solid 1px #000000 !important;
}

.tabla-sticky .sticky-col {
  /* Celdas sticky */
  position: sticky;
  background-color: white;
  z-index: 1;
}

.tabla-sticky tr:focus-within {
  background-color: #e5e5e5 !important;
  outline: 2px solid #444;
  outline-offset: -2px;
}

.tabla-sticky tr:focus-within .col-ref,
.tabla-sticky tr:focus-within .col-art {
  /* Bordeado entero */
  background-color: #e5e5e5 !important;
  box-shadow:
    inset 0 2px 0 #444,
    /* borde superior */
    inset 0 -2px 0 #444;
  /* borde inferior */
}

.tabla-sticky .col-ref {
  /* Referencia */
  left: 0;
  width: 120px;
}

.tabla-sticky .col-art {
  /* Artículo */
  left: 120px;
  /* igual al ancho de col-ref */
  z-index: 2;
  width: 150px;
}

/* Unidades realtivas? */

.tabla-sticky input:focus {
  border-color: #444 !important;
  box-shadow: 0 0 0 1px #444 !important;
  outline: none !important;
}

.tabla-sticky th.col-ref {
  position: sticky;
  left: 0;
  z-index: 3;
  background-color: white;
}

.tabla-sticky th.col-art {
  position: sticky;
  left: 120px;
  /* mismo valor que el .col-ref width */
  z-index: 4;
  background-color: white;
}

.tabla-sticky td.col-ref,
.tabla-sticky td.col-art {
  z-index: 15 !important;
}

/* Encabezados por encima */
.tabla-sticky th.col-ref {
  z-index: 20;
}

.tabla-sticky th.col-art {
  z-index: 21;
}

/* Celdas sticky de tbody */
.tabla-sticky td.col-ref {
  left: 0;
  z-index: 1;
}

.tabla-sticky td.col-art {
  left: 120px;
  z-index: 2;
}

/* Atenúa todas las celdas… */
tr.is-locked > td {
  opacity: 0.4;
}
  /* Custom nav links */
  .custom-links {
    color: #ffffff !important;
    transition: color 0.3s ease !important;
    background-color: transparent !important;
    cursor: pointer !important;
  }

/* …menos la última (Ver + Acciones) */
tr.is-locked > td:last-child,
tr.is-locked > td:last-child * {
  opacity: 1;
}

/* Custom nav links */
.custom-links {
  color: #ffffff !important;
  transition: color 0.3s ease !important;
  background-color: transparent !important;
  cursor: pointer !important;
}

.custom-links:hover {
  color: #1B1F3B !important;
  background-color: transparent !important;
}

.navbar-link::after {
  border-color: #ffffff !important;
}

.navbar-link:hover::after,
.navbar-link.is-active::after {
  border-color: #1B1F3B !important;
}

.navbar-dropdown {
  background-color: #00A3E0 !important;
  color: black;
}

.dropdown .dropdown-menu {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    max-height 0.4s ease,
    opacity 0.35s ease,
    visibility 0s linear 0.4s;
  transform-origin: top;
  will-change: max-height, opacity;
}

.dropdown.is-active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    max-height 0.4s ease,
    opacity 0.35s ease;
}

/* Botón para cliente */
.button.is-light {
  background-color: #00A3E0 !important;
  color: #ffffff !important;
  border: none;
}

.button.is-light-eye {
  background-color: #00A3E0 !important;
  color: #1B1F3B !important;
  border: none;
}

.button.is-light-eye:hover {
  background-color: #0075BE !important;
}

.button.is-light:hover {
  background-color: #0075BE !important;
}

/* Color para albaranes cerrados */
.is-selected {
  background-color: #b1e997 !important;
  color: #1B1F3B !important;
}

tr.is-selected .button.is-info {
  color: white !important;
}

/* Botón rojo para admin */
.button.is-danger {
  background-color: #D72638 !important;
  color: #ffffff !important;
  border: none;
}

.button.is-danger:hover {
  background-color: #b91e2e !important;
}

.button.is-warning {
  background-color: #48cae4 !important;
  color: #ffffff !important;
  border: none;
}

.button.is-warning:hover {
  background-color: #09adce !important;
}

.button.is-secondary {
  background-color: #002D72 !important;
  color: #ffffff !important;
  border: none;
}

.button.is-secondary:hover {
  background-color: #001a4d !important;
}

.button.is-info:hover {
  background-color: #3a6fc5; /* más intenso */
  color: #fff;
}

/* Botón primario */
.button.is-primary {
  background-color: #023e8a !important;
  color: #ffffff !important;
  border: none;
}

.button.is-primary:hover {
  background-color: #022b61 !important;
}

.has-incidence {
  background-color: #f37f8b !important;
}

/* Animación para las targetas */
.tarjetas:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* Notificaciones */
.notifications {
  max-width: 600px;
  position: fixed;
  z-index: 1000;
  top: 20px;
  left: 20px;
}

/* Footer */
html,
body {
  margin: 0;
}

.cart-title-input {
  border: none;
  box-shadow: none;
  background: transparent;
  font-weight: bold;
  text-align: center;
  font-size: 1rem;
  /* ajusta según tu diseño */
  cursor: text;
}

.layout-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
}

.table.is-vcentered td,
.table.is-vcentered th {
  vertical-align: middle;
}

/* Transición cambio de tema */
html,
body,
.navbar,
.hero,
.button,
.custom-links {
  transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

/* Imagen de establecimiento TomSelect */
.ts-option-image {
  width: 45px;
  height: 45px;
  margin-right: 12px;
  border-radius: 6px;
  vertical-align: middle;
  object-fit: cover;
}

.truncate-content {
  display: -webkit-box;
  -webkit-line-clamp: 4; /* número de líneas que quieres mostrar */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* utilitario - variación colores */
.no-select {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge antiguo */
}

.has-text-primary-gold {
  color: rgba(226, 193, 5, 0.6);
}

@media print {

  body {
    zoom: 90%;
  }

  .print-columns {
    display: flex !important;
    flex-direction: row !important;
    gap: 5rem;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
  }

  .print-columns .column {
    flex: 1;
    max-width: 50%;
  }

  table {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tfoot {
    display: table-footer-group;
  }

  nav,
  .navbar,
  .footer,
  .theme-toggle,
  .button,
  .is-not-printable {
    display: none !important;
  }

  .container,
  .section,
  .columns {
    margin: 0;
    padding: 0;
  }

  html,
  body {
    background: white !important;
    color: black !important;
  }

  a {
    text-decoration: none !important;
    color: black !important;
  }
}