@tailwind base;
@tailwind components;
@tailwind utilities;


@layer utilities {
  .bg-azulOscuro { background-color: #15365B !important; }
  .text-dorado { color: #DD770E !important; }
  .border-dorado { border-color: #b26422 !important; }
  .bg-rojoOscuro { background-color: #8B0000 !important; }
  .hover:bg-red-500:hover { background-color: #a10000 !important; } 
}


/* Estilos del header */
header {
    position: fixed !important;  /* Se mantiene fijo */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;  /* Se mantiene por encima de otros elementos */
    background-color: #15365B !important;  /* Azul oscuro */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para efecto flotante */
    padding: 1.5rem 0; /* Mantiene el padding */
}

/* Asegurar que el fondo azul se aplique en cualquier parte */
.bg-azulOscuro {
    background-color: #15365B !important;
}

/* Asegurar que el texto dorado se aplique correctamente */
.text-dorado {
    color: #b26422 !important;
}

/* Ajuste para evitar que el contenido quede tapado */
body {
    padding-top: 80px;

}

html, body {
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
}

.container, main {
  height: auto !important;
  overflow: visible !important;
}

.border-dorado {
    border-color: #b26422 !important;
  }
  .bg-dorado {
    background-color: #b26422 !important;
  }
  .text-dorado {
    color: #b26422 !important;
  }
  
  .icon-hover-effect {
    transition: all 0.3s ease-in-out;
    color: white; /* color inicial */
  }
  .icon-hover-effect:hover {
    transform: scale(1.2);
    color: #b26422 !important; /* dorado al pasar el mouse */
  }