:root {
  --color-primary: #00657f;
  --color-primary-50:  #e6f4f8;
  --color-primary-100: #cce9f1;
  --color-primary-200: #99d3e3;
  --color-primary-300: #66bdd6;
  --color-primary-400: #33a7c8;
  --color-primary-500: #00657f; /* primary */
  --color-primary-600: #00536a;
  --color-primary-700: #004155;
  --color-primary-800: #002f40;
  --color-primary-900: #001d2b;
}

#preloader {
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.6s ease,
        visibility 0s linear 0.6s;

    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    z-index: 999999;
}

html.dark #preloader {
    background: #181f26;
}

/* Tamaño del isotipo */
#isotipo-container svg {
    width: 150px;        /* Ajusta aquí el tamaño */
    height: auto;
    opacity: 0;
    transform: scale(0.8);
    animation: isotipoEnter 1s ease-out forwards;
    transform-origin: center center;
}

/* Animación de entrada */
@keyframes isotipoEnter {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#isotipo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.border-1 {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  
.opacity-3 {
    opacity: 3%;
  }
  
.size-26 {
    width: calc(var(--spacing) * 26);
    height: calc(var(--spacing) * 26);
 }