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

@font-face {
    font-family: "ubuntu";
    src: url("../ubuntu/ubuntu-font-family-0.80/Ubuntu-B.ttf");
}

* {
    font-family: Arial;
}

.titulo {
    @apply text-4xl mobile:text-2xl font-black;
}

.subtitulo {
    @apply text-2xl mobile:text-lg font-semibold;
}

.parrafo {
    @apply text-xl mobile:text-base;
}

.parrafoxs {
    @apply text-sm;
}

.btn{
    font-family: "ubuntu" !important;
}

.boxShadow {
    box-shadow: 9px 9px 25px #9d9d9d, -9px -9px 25px #ffffff;
}

.divShadow {
    background: white;
    box-shadow: 5px 5px 20px #b3b3b3, -5px -5px 20px #ffffff;
}

img {
    -webkit-user-drag: none;
}

tbody tr:nth-child(2n) {
    background-color: #f2f3ff; /* Color para filas pares */
}

tbody tr:nth-child(2n + 1) {
    background-color: #fafaff; /* Color para filas impares (puedes cambiarlo) */
}

.mySwiper2 img {
    @apply size-full;
    object-fit: cover;
    object-position: center;
}

.item .activeIcon {
    @apply hidden;
}

.item.active .inactiveIcon {
    @apply hidden;
}

.item.active .activeIcon {
    @apply block;
}

.item:not(.active) .content {
    @apply h-0 overflow-hidden py-0;
}

.item .content {
    @apply p-8;
}

.alert {
    position: absolute;
    z-index: 100;
    right: 0;
    margin-right: 7vw;
    padding: .7rem 2rem;
    font-weight: 700;
    color: white;
    border-radius: 5px;
    box-shadow: 2px 2px 3px #00000052;
}

.alert-success {
    background-color: #00b894;
}

.alert-danger {
    background-color: #d63031;
}

.error {
    color: #d63031;
}

@media screen and (max-width: 768px) {
    .item {
        @apply p-2;
    }

    .header--item {
        overflow: auto;
    }

    .header--item-header {
        min-width: auto;
        padding-block: 1.5rem;
    }

    .content--text {
        overflow: auto;
        gap: 1rem;
        align-items: flex-start;
    }

    .container--fields {
        flex-direction: column !important;
    }

    .button-form--campaigns {
        text-align: center;
    }
}


/* Esconder el checkbox por defecto */
input[type="checkbox"] {
  display: none;
}

/* Estilo para el contenedor visible */
[type="checkbox"]:checked + p {
  @apply text-secundary font-medium pl-2 transition-all;

}

swiper-container img{
    object-fit: cover;
    width: 100% !important;
    height: 100% !important;
}

#ImagenTP{

    border-image: fill 0 linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0%, #F3F4F6 100%);;
}