body {
    padding-top: 60px; /* Reducido para ajustarse a la nueva altura del navbar */
}


.row-save {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px;
}

.btn-save {
  background-color: white;
  border: none;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.3s, transform 0.3s;
  flex: 1;
  margin: 5px;
}
#tablaActivos tbody tr td:not(.action-cell),
#tablaEliminados tbody tr td:not(.action-cell) {
    cursor: pointer;
}

.btn-save:hover {
  background-color: rgb(31, 127, 195);
  transform: scale(1.05);
  color: white;
}


.btn-save:disabled {
  background-color: rgb(180, 180, 180); /* Color de fondo gris */
  color: rgb(220, 220, 220); /* Color de texto más claro */
  cursor: not-allowed; /* Cursor que indica que el botón no se puede presionar */
}

.btn-save:disabled:hover {
  transform: none; /* No se aplica el efecto de escala al pasar el cursor sobre un botón deshabilitado */
}


/* Botón Danger */
.btn-danger {
  background-color: #dc3545; /* Rojo */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-danger:hover {
  background-color: #c82333; /* Rojo más oscuro */
}

/* Botón Success */
.btn-success {
  background-color: #28A747; /* Verde */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-success:hover {
  background-color: #218838; /* Verde más oscuro */
}

/* Botón Secondary */
.btn-secondary {
  background-color: #6c757d; /* Gris */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-secondary:hover {
  background-color: #5a6268; /* Gris más oscuro */
}

/* Botón Primary */
.btn-primary {
  background-color: #007bff; /* Azul */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: #0069d9; /* Azul más oscuro */
}

/* Botón Warning */
.btn-warning {
  background-color: #ffc107; /* Amarillo */
  color: black;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-warning:hover {
  background-color: #e0a800; /* Amarillo más oscuro */
}

/* Botón Info */
.btn-info {
  background-color: #17a2b8; /* Cyan */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-info:hover {
  background-color: #138496; /* Cyan más oscuro */
}

/* Botón Light */
.btn-light {
  background-color: #f8f9fa; /* Blanco */
  color: black;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-light:hover {
  background-color: #e2e6ea; /* Blanco más oscuro */
}

/* Botón Dark */
.btn-dark {
  background-color: darkslategray;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-dark:hover{
  background-color: #1e1e1e;
}




#installButton {
  position: fixed;
  bottom: 40px;
  right: 40px;
  background-color: #007bff;
  color: white;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  display: none;
  /* Inicialmente oculto */
}

#installButton:hover {
  background-color: #0056b3;
}

/* Estilo para pantallas grandes */
.swal2-popup {
  font-size: 1.1em !important;
  width: 95% !important;
}

/* Estilo para dispositivos móviles */
@media (max-width: 768px) {
  .swal2-popup {
      font-size: 0.8em !important;
      width: 100% !important;
  }
  .imagen-movil-altura {
    max-height: 400px;
    overflow: hidden;
  }
}


/* Fondo blanco para el modal sweetAlert2 de busqueda de productos  */
#search-results tr {
    background-color: white;
  }

  .list-group-item {
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .list-group-item:hover,
  .list-group-item:focus {
    background-color: #f5f5f5;
  }

  .list-group-item.active {
    background-color: #007bff;
    color: #fff;
  }

  /* Separacion entre grupos de facturas en saldos iniciales  */

  .last-in-group {
    border-bottom: 2px solid black;
    margin-bottom: 10px;
  }


/* Estilos modernos para inputs, textareas - optimizados para astigmatismo */
input, textarea {
  border: 2px solid #888888 !important; /* Borde más oscuro y grueso */
  border-radius: 6px !important;
  padding: 10px 14px !important; /* Padding aumentado */
  line-height: 1.7 !important; /* Mayor espaciado entre líneas */
  color: #000000 !important; /* Negro para máximo contraste */
  background-color: #fff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; /* Sombra más pronunciada */
  transition: all 0.2s ease-in-out !important;
  font-size: 1.1rem !important; /* Tamaño de fuente aumentado */
  font-weight: 600 !important; /* Texto más grueso */
  letter-spacing: 0.3px !important; /* Mejor separación entre letras */
}

/* Estilos específicos para selects - más definidos y sin transparencias - optimizados para astigmatismo */
select {
  border: 3px solid #3a5a8c !important; /* Borde más grueso y oscuro */
  border-radius: 6px !important;
  padding: 10px 14px !important; /* Padding aumentado */
  line-height: 1.7 !important; /* Mayor espaciado entre líneas */
  color: #000000 !important; /* Negro para máximo contraste */
  background-color: #ffffff !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3) !important; /* Sombra más pronunciada */
  transition: all 0.2s ease-in-out !important;
  font-weight: 700 !important; /* Texto más grueso */
  font-size: 1.1rem !important; /* Tamaño de fuente aumentado */
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233a5a8c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; /* Flecha más grande y gruesa */
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 40px !important; /* Mayor espacio para la flecha */
  letter-spacing: 0.3px !important; /* Mejor separación entre letras */
}

/* Estilos para el estado hover - optimizados para astigmatismo */
input:hover:not(:disabled):not([readonly]),
textarea:hover:not(:disabled):not([readonly]) {
  border-color: #000000 !important; /* Negro para máximo contraste */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3) !important; /* Sombra más pronunciada */
}

/* Estilos para el estado hover de selects - optimizados para astigmatismo */
select:hover:not(:disabled):not([readonly]) {
  border-color: #000000 !important; /* Negro para máximo contraste */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important; /* Sombra más pronunciada */
  background-color: #f0f0f0 !important; /* Fondo ligeramente gris para destacar */
}

/* Estilos para el estado focus - optimizados para astigmatismo */
input:focus:not(:disabled):not([readonly]),
textarea:focus:not(:disabled):not([readonly]) {
  border-color: #000000 !important; /* Negro para máximo contraste */
  box-shadow: 0 0 0 4px rgba(58, 90, 140, 0.5) !important; /* Sombra de foco más visible */
  outline: none !important;
}

/* Estilos para el estado focus de selects */
select:focus:not(:disabled):not([readonly]) {
  border-color: #4a6fa5 !important;
  box-shadow: 0 0 0 3px #4a6fa5 !important; /* Sin transparencia */
  outline: none !important;
  background-color: #f0f4f9 !important; /* Fondo ligeramente diferente cuando está enfocado */
}

/* Estilos para inputs y textareas deshabilitados y readonly - optimizados para astigmatismo */
input:disabled, textarea:disabled,
input[readonly], textarea[readonly] {
  color: #000000 !important; /* Negro para máxima visibilidad */
  font-weight: 700 !important; /* Texto más grueso */
  background-color: #d1d5db !important; /* Gris más oscuro para mejor contraste */
  border-color: #888888 !important; /* Borde más oscuro */
  cursor: not-allowed !important;
  opacity: 1 !important; /* Sin reducción de opacidad */
  box-shadow: none !important;
}

/* Estilos para selects deshabilitados y readonly - optimizados para astigmatismo */
select:disabled, select[readonly] {
  color: #000000 !important; /* Negro para máxima visibilidad */
  font-weight: 700 !important; /* Texto más grueso */
  background-color: #b0b5bd !important; /* Gris aún más oscuro para mejor contraste */
  border-color: #666666 !important; /* Borde más oscuro y visible */
  cursor: not-allowed !important;
  opacity: 1 !important; /* Sin reducción de opacidad */
  box-shadow: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; /* Flecha negra más grande y gruesa */
  font-size: 1.1rem !important; /* Tamaño de fuente aumentado */
}

/* Estilos para las opciones dentro de los selects - optimizados para astigmatismo */
option {
  color: #000000 !important; /* Negro puro */
  background-color: #ffffff !important;
  font-weight: 700 !important; /* Texto más grueso */
  padding: 12px !important; /* Padding aumentado */
  font-size: 1.2rem !important; /* Tamaño de fuente aumentado */
  letter-spacing: 0.3px !important; /* Mejor separación entre letras */
}

/* Animación suave para cuando un elemento se habilita */
@keyframes enableAnimation {
  0% {
    background-color: #e5e7eb;
    color: #000000;
    font-weight: 600;
    transform: scale(1);
  }
  50% {
    transform: scale(1.01);
  }
  100% {
    background-color: #fff;
    color: #000000; /* Mantener negro */
    font-weight: normal;
    transform: scale(1);
  }
}

/* Aplicar la animación cuando el elemento está habilitado */
input:not(:disabled):not([readonly]),
textarea:not(:disabled):not([readonly]) {
  animation: enableAnimation 0.5s;
}

/* Selects siempre con texto negro */
select:not(:disabled):not([readonly]) {
  animation: enableAnimation 0.5s;
  color: #000000 !important;
  font-weight: 600 !important;
}

/* Estilos para los span dentro de input-groups - mejor contraste */
.input-group-text {
  border: 1px solid #d1d5db !important;
  background-color: #e5e7eb !important; /* Fondo más oscuro para mejor contraste */
  color: #000000 !important; /* Texto negro para máxima visibilidad */
  padding: 8px 12px !important;
  font-size: 1rem !important;
  font-weight: 600 !important; /* Texto semi-negrita para mayor legibilidad */
  line-height: 1.5 !important;
  border-radius: 6px !important;
}

/* Ajustes para input-groups */
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group-text:first-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group-text:last-child {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Estilos para inputs de tipo checkbox y radio */
input[type="checkbox"],
input[type="radio"] {
  width: 1.5rem !important;
  height: 1.5rem !important;
  margin-right: 0.5rem !important;
  vertical-align: middle !important;
  position: relative !important;
  cursor: pointer !important;
  border: 2px solid #4a6fa5 !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: #4a6fa5 !important;
  border-color: #4a6fa5 !important;
  box-shadow: 0 0 5px rgba(74, 111, 165, 0.5) !important;
}

/* Estilos mejorados para switches (form-switch) - optimizados para astigmatismo y evitar efecto blanquecino */
.form-switch .form-check-input {
  width: 4.5rem !important; /* Ancho aumentado */
  height: 2.2rem !important; /* Altura aumentada */
  border-radius: 2rem !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000000'/%3e%3c/svg%3e") !important;
  background-position: left center !important;
  background-size: contain !important;
  border: 3px solid #000000 !important; /* Borde negro más grueso */
  transition: all 0.3s ease !important;
  margin-right: 1.5rem !important; /* Mayor margen */
  margin-left: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4) !important; /* Sombra más pronunciada */
  background-color: #e0e0e0 !important; /* Color de fondo gris oscuro por defecto */
}

.form-switch .form-check-input:checked {
  background-color: #4a6fa5 !important;
  border-color: #4a6fa5 !important;
  background-position: right center !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
  box-shadow: 0 0 8px rgba(74, 111, 165, 0.7) !important;
}

/* Estilos mejorados para el estado focus de los switches - evita el efecto blanquecino */
.form-switch .form-check-input:focus {
  border-color: #000000 !important;
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25) !important;
  background-color: #e0e0e0 !important; /* Color de fondo más oscuro cuando tiene focus pero no está checked */
}

/* Mantiene el color azul cuando está checked y tiene focus */
.form-switch .form-check-input:checked:focus {
  background-color: #4a6fa5 !important;
  border-color: #4a6fa5 !important;
  box-shadow: 0 0 0 0.25rem rgba(74, 111, 165, 0.4) !important;
}

.form-switch .form-check-label {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #000000 !important;
  cursor: pointer !important;
  user-select: none !important;
}

/* Animación para el switch cuando cambia de estado - mejorada para evitar efectos blanquecinos */
@keyframes switchToggle {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.form-switch .form-check-input:checked {
  animation: switchToggle 0.3s ease-in-out;
  background-color: #4a6fa5 !important; /* Mantiene el color azul durante la animación */
}

.form-switch .form-check-input:not(:checked) {
  animation: switchToggle 0.3s ease-in-out;
  background-color: #e0e0e0 !important; /* Color gris oscuro para mejor visibilidad */
}

/* Estilos adicionales para mejorar la accesibilidad de los switches - optimizados para astigmatismo */
.form-check.form-switch {
  display: flex !important;
  align-items: center !important;
  padding: 0.3rem 0.5rem !important; /* Padding aumentado */
  border-radius: 0.5rem !important;
  transition: background-color 0.3s ease !important;
  margin-bottom: 1rem !important; /* Mayor margen inferior */
  background-color: #e0e5f0 !important; /* Color sólido en lugar de transparencia */
  border: 1px solid #888888 !important; /* Borde visible */
}

.form-check.form-switch:hover {
  background-color: #c8d1e6 !important; /* Color sólido en lugar de transparencia */
  border-color: #000000 !important; /* Borde negro para máximo contraste */
}

/* Estado activo del switch con indicador visual adicional */
.form-check.form-switch .form-check-input:checked ~ .form-check-label::after {
  content: '\2713'; /* Checkmark symbol */
  display: inline-block;
  margin-left: 0.5rem;
  color: #4a6fa5;
  font-weight: bold;
  font-size: 1.2rem;
}

/* Mejora para usuarios con problemas visuales - modo de alto contraste */
@media (prefers-contrast: more) {
  .form-switch .form-check-input {
    border: 3px solid #000000 !important;
    background-color: #ffffff !important;
  }

  .form-switch .form-check-input:checked {
    background-color: #000000 !important;
    border-color: #000000 !important;
  }

  .form-check.form-switch {
    background-color: #f0f0f0 !important;
    border-left: 6px solid #000000 !important;
  }
}

/* Estilos para inputs de tipo number */
input[type="number"] {
  -moz-appearance: textfield !important;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Estilos para inputs de tipo date */
input[type="date"] {
  padding-right: 0.75rem !important;
}

/* Estilos para inputs de tipo search - optimizados para astigmatismo */
input[type="search"] {
  font-size: 1.5rem !important; /* Tamaño de fuente aumentado */
  padding: 10px 16px !important; /* Padding aumentado */
  border-radius: 8px !important;
  border: 3px solid #3a5a8c !important; /* Borde más grueso y visible */
  font-weight: 600 !important; /* Texto más grueso */
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none !important;
  height: 1em !important;
  width: 1em !important;
  border-radius: 50% !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") no-repeat 50% 50% !important;
  cursor: pointer !important;
}

/* Estilos para placeholder - más oscuros para mejor visibilidad */
::placeholder {
  color: #6b7280 !important; /* Gris más oscuro para mejor contraste */
  opacity: 1 !important;
  font-weight: 500 !important; /* Un poco más grueso para mejor legibilidad */
}

:-ms-input-placeholder {
  color: #6b7280 !important;
  font-weight: 500 !important;
}

::-ms-input-placeholder {
  color: #6b7280 !important;
  font-weight: 500 !important;
}

/* Estilos para spans en input-groups */
.input-group-text span {
  border: none !important;
}

/* Hago que no aparezca el botón de imprimir cuando lo haga*/
@media print {
  .no-print {
      display: none;
  }
}

/* Clase para botón de header de pantalla completa */
.no-underline {
  text-decoration: none !important;
  color: white !important;
}

.digital-clock {
  color: #000;
  text-shadow: none;
  font: bold 20px/24px 'Arial', sans-serif;
}

.card-header .row.align-items-center {
  text-align: center;
}

.celdas_seleccionables {
  cursor: pointer;
}


/* Reglas para que la paginación sea responsiva */
.pagination-container {
  overflow-x: auto;
  white-space: nowrap;
}
.pagination-container .pagination {
  display: inline-block;
}

/* Reglas para ocultar puntos suspensivos en pantallas pequeñas y ajustar el tamaño de los botones */
@media (max-width: 576px) {
  .pagination-container .page-item.d-none.d-sm-inline {
    display: none;
  }
  .pagination-container .page-link {
    min-width: 30px; /* Ajusta esto según necesites */
  }
}

/* Esta regla ya está definida arriba con más detalle */


.red_font {
  color: darkred;
}

.blue_font {
  color: darkblue;
}

/* Estilos específicos para el encabezado - Terrones POS - Optimizados para astigmatismo */
/* Paleta de colores basada en #4a6fa5 con mayor contraste */
:root {
  --terrones-primary: #3a5a8c; /* Color principal */
  --terrones-primary-dark: #2a4266; /* Versión más oscura del color principal para mayor contraste */
  --terrones-primary-light: #6b8cbe; /* Versión clara del color principal */
  --terrones-accent: #8c5a2a; /* Color complementario/acento más oscuro para mejor contraste */
  --terrones-neutral-dark: #1a2836; /* Color neutro oscuro más intenso */
  --terrones-neutral-light: #ffffff; /* Blanco puro para máximo contraste */
}

.terrones_header_navbar {
  background-color: var(--terrones-primary-dark) !important; /* Color sólido en lugar de gradiente */
  box-shadow: 0 3px 8px #000000; /* Sombra sólida sin transparencia */
  border-bottom: 2px solid #000000; /* Borde más definido y visible */
}

.terrones_header_brand {
  font-weight: 900; /* Negrita extra para mayor legibilidad */
  letter-spacing: 0.8px; /* Mayor separación entre letras */
  padding: 6px 18px; /* Padding vertical reducido, horizontal mantenido */
  border-radius: 6px; /* Bordes más redondeados */
  transition: all 0.3s ease;
  position: relative;
  font-size: 1.5rem; /* Tamaño de fuente aumentado */
  color: #ffffff !important; /* Color blanco sólido para máximo contraste */
  background-color: #2a4266; /* Fondo sólido para el texto */
  border: 2px solid #ffffff; /* Borde blanco para destacar */
}

.terrones_header_brand:hover {
  background-color: #3a5a8c; /* Color sólido en lugar de transparencia */
  transform: translateY(-2px); /* Efecto más pronunciado */
  border-color: #ffcc00; /* Cambio de color de borde para indicar hover */
}

.terrones_header_brand_text {
  opacity: 1;
  font-weight: 800; /* Negrita extra para mayor legibilidad */
  transition: all 0.3s ease;
  color: #ffffff !important; /* Color blanco sólido */
  background-color: #4a6fa5; /* Fondo sólido sin transparencia */
  padding: 5px 10px; /* Padding aumentado */
  border-radius: 6px; /* Bordes más redondeados */
  margin-left: 8px; /* Mayor separación del texto principal */
  border: 1px solid #ffffff; /* Borde blanco para destacar */
  font-size: 1.1rem; /* Tamaño de fuente aumentado */
}

.terrones_header_brand:hover .terrones_header_brand_text {
  transform: scale(1.08); /* Efecto de escala más pronunciado */
  background-color: #6b8cbe; /* Color más claro al hacer hover */
  border-color: #ffcc00; /* Cambio de color de borde para indicar hover */
}

.terrones_header_navlink {
  position: relative;
  padding: 8px 18px; /* Padding vertical reducido, horizontal mantenido */
  margin: 0 4px; /* Mayor separación entre elementos */
  font-weight: 800; /* Negrita extra para mayor legibilidad */
  font-size: 1.15rem; /* Tamaño de letra aumentado */
  transition: all 0.3s ease;
  border-radius: 6px; /* Bordes más redondeados */
  letter-spacing: 0.5px; /* Mayor separación entre letras */
  color: #ffffff !important; /* Color blanco para máximo contraste */
  border: 1px solid #6b8cbe; /* Borde visible */
  background-color: #3a5a8c; /* Fondo sólido */
}

.terrones_header_navlink:hover {
  background-color: #8c5a2a; /* Color sólido sin transparencia */
  transform: translateY(-2px); /* Efecto más pronunciado */
  color: #ffffff; /* Texto blanco para máximo contraste */
  font-weight: 800; /* Negrita extra */
  box-shadow: 0 3px 6px #000000; /* Sombra sólida sin transparencia */
  border-color: #ffcc00; /* Borde amarillo para indicar hover */
}

/* Estilo especial para el enlace de cerrar sesión - optimizado para astigmatismo */
.nav-item:last-child .terrones_header_navlink {
  position: relative;
  background-color: #8c2a2a; /* Rojo oscuro para indicar acción de cierre */
  border: 2px solid #ffffff; /* Borde blanco más visible */
  font-weight: 800; /* Negrita extra */
}

.nav-item:last-child .terrones_header_navlink:hover {
  background-color: #b22222; /* Rojo más brillante al hacer hover */
  transform: scale(1.05); /* Efecto de escala en lugar de animación de brillo */
  border-color: #ffcc00; /* Borde amarillo para indicar hover */
}

.terrones_header_navlink::after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px; /* Línea más gruesa */
  bottom: 0;
  left: 50%;
  background-color: #ffcc00; /* Amarillo para mayor contraste */
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.terrones_header_navlink:hover::after {
  width: 80%; /* Mayor ancho para ser más visible */
}

.terrones_header_dropdown {
  border: 2px solid #000000; /* Borde negro sólido */
  border-radius: 8px;
  box-shadow: 0 5px 10px #000000; /* Sombra sólida sin transparencia */
  padding: 12px 0; /* Padding vertical aumentado */
  margin-top: 10px;
  background-color: #ffffff; /* Fondo blanco sólido */
  animation: terrones_header_fadeIn 0.3s ease;
  border-top: 4px solid #8c5a2a; /* Borde superior más grueso */
}

@keyframes terrones_header_fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.terrones_header_dropdown_item {
  padding: 12px 20px; /* Padding vertical aumentado */
  font-weight: 800; /* Negrita extra para mayor legibilidad */
  font-size: 1.2rem; /* Tamaño de letra aumentado */
  color: #000000; /* Negro para máximo contraste */
  border-radius: 6px; /* Bordes redondeados */
  margin: 6px 5px; /* Mayor separación vertical entre elementos */
  transition: all 0.2s ease;
  letter-spacing: 0.4px; /* Mayor separación entre letras */
  background-color: #ffffff; /* Fondo blanco puro */
  border: 1px solid #3a5a8c; /* Borde completo en lugar de solo izquierdo */
  border-left-width: 5px; /* Borde izquierdo más grueso */
}

.terrones_header_dropdown_item:hover {
  background-color: #3a5a8c; /* Color sólido */
  color: #ffffff; /* Texto blanco para máximo contraste */
  transform: translateX(5px); /* Efecto más pronunciado */
  font-weight: 800; /* Negrita extra */
  box-shadow: 0 3px 6px #000000; /* Sombra sólida sin transparencia */
  border-color: #ffcc00; /* Borde amarillo para indicar hover */
}

.terrones_header_toggler {
  border: 2px solid #ffffff; /* Borde blanco visible */
  padding: 10px; /* Padding aumentado */
  border-radius: 6px; /* Bordes más redondeados */
  background-color: #3a5a8c; /* Color sólido sin transparencia */
  transition: all 0.3s ease;
}

.terrones_header_toggler:hover {
  background-color: #8c5a2a; /* Color sólido sin transparencia */
  border-color: #ffcc00; /* Borde amarillo para indicar hover */
}

.terrones_header_toggler:focus {
  box-shadow: 0 0 0 4px #4a6fa5; /* Sombra sólida sin transparencia */
  outline: 2px solid #ffffff; /* Contorno blanco visible */
}

/* Mejoras para dispositivos móviles - optimizadas para astigmatismo */
@media (max-width: 992px) {
  .terrones_header_collapse {
    background-color: #2a4266; /* Color sólido más oscuro */
    border-radius: 8px;
    padding: 8px; /* Padding reducido */
    margin-top: 10px;
    box-shadow: 0 5px 10px #000000; /* Sombra sólida sin transparencia */
    border: 2px solid #ffffff; /* Borde blanco visible */
  }

  .terrones_header_dropdown {
    background-color: #1a2836; /* Color sólido oscuro */
    border: 2px solid #ffffff; /* Borde blanco más visible */
  }

  .terrones_header_dropdown_item {
    color: #ffffff !important; /* Texto blanco */
    font-size: 1.2rem; /* Tamaño de letra aumentado */
    padding: 14px 20px; /* Padding vertical aumentado */
    margin: 6px 5px; /* Mayor separación entre elementos */
    font-weight: 800; /* Negrita extra para mayor legibilidad */
    background-color: #3a5a8c; /* Color sólido sin transparencia */
    border-radius: 6px; /* Bordes redondeados */
    border: 1px solid #ffffff; /* Borde blanco visible */
  }

  .terrones_header_dropdown_item:hover {
    background-color: #8c5a2a; /* Color sólido sin transparencia */
    color: #ffffff;
    transform: translateX(5px); /* Efecto de movimiento */
    border-color: #ffcc00; /* Borde amarillo para indicar hover */
  }

  .terrones_header_brand {
    font-size: 1.3rem; /* Tamaño de letra aumentado */
    padding: 6px 15px; /* Padding vertical reducido, horizontal mantenido */
    border: 2px solid #ffffff; /* Borde blanco más visible */
  }

  .terrones_header_navlink {
    padding: 8px 18px; /* Padding vertical reducido, horizontal mantenido */
    margin: 4px 0; /* Separación vertical reducida */
    border-radius: 8px;
    border: 2px solid #ffffff; /* Borde blanco más visible */
    font-size: 1.2rem; /* Tamaño de letra aumentado */
  }
}