/*
 * Componentes visuales reutilizables: botones, tarjetas, etiquetas de estado, mensajes y estados vacios.
 */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-2);
    max-width: 100%;
    padding: 0.85rem 1.6rem;
    border-radius: var(--radio-medio);
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.boton:hover {
    transform: translateY(-2px);
}

.boton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.boton-principal {
    background: var(--degradado-marca);
    color: var(--color-blanco);
    box-shadow: var(--sombra-destacada);
}

.boton-secundario {
    background: var(--color-superficie);
    color: var(--color-texto-principal);
    border-color: var(--color-borde);
}

.boton-secundario:hover {
    border-color: var(--color-violeta-brillante);
}

.tarjeta {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
    padding: var(--espacio-4);
    box-shadow: var(--sombra-suave);
}

.tarjeta-evento,
.tarjeta-resultado {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-medio);
    padding: var(--espacio-4);
    box-shadow: var(--sombra-suave);
    height: 100%;
}

.imagen-redondeada {
    border-radius: var(--radio-medio);
}

.imagen-vista-previa {
    margin-bottom: var(--espacio-3);
}

.imagen-detalle {
    margin-block: var(--espacio-4);
}

.etiqueta-estado {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radio-pequeno);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--color-superficie-elevada);
    color: var(--color-texto-secundario);
    border: 1px solid var(--color-borde);
}

.etiqueta-estado--exito {
    color: var(--color-exito);
    border-color: var(--color-exito);
}

.etiqueta-estado--alerta {
    color: var(--color-alerta);
    border-color: var(--color-alerta);
}

.etiqueta-estado--error {
    color: var(--color-error);
    border-color: var(--color-error);
}

.mensaje-exito,
.mensaje-error {
    padding: var(--espacio-3);
    border-radius: var(--radio-medio);
    font-weight: 600;
    margin-bottom: var(--espacio-3);
}

.mensaje-exito {
    background: rgba(34, 197, 94, 0.12);
    color: var(--color-exito);
    border: 1px solid var(--color-exito);
}

.mensaje-error {
    background: rgba(239, 68, 68, 0.12);
    color: var(--color-error);
    border: 1px solid var(--color-error);
}

.estado-vacio {
    text-align: center;
    padding: var(--espacio-5);
    color: var(--color-texto-secundario);
    border: 1px dashed var(--color-borde);
    border-radius: var(--radio-medio);
}

.acceso {
    display: grid;
    align-items: center;
    min-height: calc(100svh - 8rem);
}

.acceso__rejilla {
    display: grid;
    overflow: hidden;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-medio);
    box-shadow: var(--sombra-destacada);
}

.acceso__bienvenida {
    position: relative;
    min-height: 18rem;
    overflow: hidden;
    background: var(--color-morado-profundo);
}

.acceso__bienvenida>img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.acceso__bienvenida::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(58, 9, 91, 0.94), rgba(74, 13, 115, 0.7));
}

.acceso__bienvenida-contenido {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: end;
    min-height: 18rem;
    padding: var(--espacio-5);
}

.acceso__bienvenida-contenido>img {
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: var(--espacio-4);
}

.acceso__bienvenida-contenido h1,
.acceso__bienvenida-contenido p {
    color: var(--color-blanco);
}

.acceso__bienvenida-contenido .texto-eslogan {
    margin-bottom: var(--espacio-2);
    color: var(--color-blanco);
}

.acceso__bienvenida-contenido p:last-child {
    max-width: 30rem;
    margin-bottom: 0;
}

.acceso__panel {
    display: grid;
    align-content: center;
    gap: var(--espacio-4);
    padding: var(--espacio-5);
}

.acceso__panel-cabecera h2 {
    margin-bottom: var(--espacio-2);
}

.acceso__panel-cabecera p:last-child {
    margin-bottom: 0;
}

.acceso__formulario {
    max-width: none;
}

.acceso__formulario .boton {
    width: 100%;
}

.aviso-cookies {
    position: fixed;
    z-index: 1000;
    right: var(--espacio-3);
    bottom: var(--espacio-3);
    left: var(--espacio-3);
    margin: 0;
    padding: var(--espacio-4);
    background: var(--color-morado-profundo);
    border: 1px solid var(--color-violeta-brillante);
    border-radius: var(--radio-medio);
    box-shadow: var(--sombra-destacada);
}

.aviso-cookies__contenido {
    display: grid;
    gap: var(--espacio-3);
    max-width: var(--ancho-contenido);
    margin-inline: auto;
}

.aviso-cookies h2,
.aviso-cookies p,
.aviso-cookies a {
    color: var(--color-blanco);
}

.aviso-cookies h2,
.aviso-cookies p {
    margin: 0;
}

.aviso-cookies a {
    text-decoration-thickness: 0.15em;
}

.aviso-cookies__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

.migas-de-pan {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1);
    font-size: 0.9rem;
    color: var(--color-texto-secundario);
    margin-bottom: var(--espacio-3);
}

.migas-de-pan a {
    color: var(--color-texto-secundario);
}

.panel-estadistico {
    display: grid;
    gap: var(--espacio-2);
    padding: var(--espacio-4);
    background: var(--color-superficie-elevada);
    border-radius: var(--radio-medio);
    border: 1px solid var(--color-borde);
}

.panel-estadistico strong {
    font-size: 1.6rem;
    color: var(--color-texto-principal);
}

.rejilla-tarjetas {
    display: grid;
    gap: var(--espacio-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

@media (max-width: 679px) {
    .acceso {
        min-height: auto;
        padding-block: 3rem;
    }

    .acceso__bienvenida,
    .acceso__bienvenida-contenido {
        min-height: 16rem;
    }

    .acceso__bienvenida-contenido,
    .acceso__panel {
        padding: var(--espacio-4);
    }

    .acceso__bienvenida-contenido>img {
        width: 3.75rem;
        height: 3.75rem;
        margin-bottom: var(--espacio-3);
    }
}

@media (min-width: 680px) {
    .acceso__rejilla {
        grid-template-columns: minmax(0, 1.1fr) minmax(22rem, 0.9fr);
        min-height: 34rem;
    }

    .acceso__bienvenida,
    .acceso__bienvenida-contenido {
        min-height: 34rem;
    }

    .aviso-cookies__contenido {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .aviso-cookies .boton {
        justify-self: end;
    }
}