/* Hace un filtro en javascript para sortear las fechas en Publicaciones */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');

body{
    font-family: "Exo 2", sans-serif;
    background-color: #212529; /* Color de fondo oscuro */
    background-image: radial-gradient(#2e2e2e 1px, transparent 0);
    background-size: 16px 16px; /* Espaciado del patrón */
}

input:focus{
  color: rgb(255, 94, 0)!important;
  border-color: rgb(255, 94, 0)!important;
}

.bg-primary{
  color:white!important;
  border-color: rgb(255, 94, 0)!important;
  background: rgb(255, 94, 0)!important;
}

.bg-primary a{
  color: white!important;
}

.border-primary{
  border-color: rgb(255, 94, 0)!important;
}
/* a{
  color: white!important;
  text-decoration: none;
}

a:hover{
  color: rgb(255, 94, 0)!important;
} */

#center .card{
  border: transparent!important;
  background: transparent!important;
}

.border-transparent{
  border: transparent!important;
}

#fecha p{
  text-decoration: none;
  position: absolute;
  top: 2%;
  right: 5%;
  padding: 0px!important;
  margin: 0px!important;
}

.pblanco{
  color: white!important;
}

.pnaranjo{
  color: rgb(255, 94, 0)!important;
}

#center{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bg{
    z-index: 10;
}

.btn-outline-primary{
  color: rgb(255, 94, 0);
  border-color: rgb(255, 94, 0);
}

.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus, .btn-outline-primary:visited{
  background: rgb(255, 94, 0)!important;
  color: white!important;
  border-color: rgb(255, 94, 0)!important;
}

.tooltip-inner {
    max-width: 500px;
    /* If max-width does not work, try using width instead */
    width: 350px;
    text-align: justify;
    text-justify: inter-word;
    margin-left: 58%;
}

.tooltip .tooltip-arrow {
    margin-left: 55%;
}

.bg::after, .bg::before{
  content: '';
  position: absolute;
  height: 102%;
  width: 101%;
  background: conic-gradient(from var(--angle),  transparent 50%,rgb(255, 94, 0));
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -10;
  padding: 3px;
  animation: 3s spin linear infinite;
  border-radius: 1rem; /* o el valor que uses en tu .bg */
  box-sizing: border-box;
  mask:
  linear-gradient(#fff 0 0) content-box,
  linear-gradient(#fff 0 0);
  mask-composite: exclude;          /* Firefox/ED  */
  -webkit-mask-composite: xor;      /* Chrome/Safari */
}

.bg::before{
  filter: blur(1.5rem);
  opacity: 0.5;
}

@keyframes spin{
  from{
    --angle: 0deg;
  }
  to{
    --angle: 360deg;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}