/*==============================================================
   ASOL HAIR CARE — MÓDULO: INFORMACIÓN
   Depende de site.css
==============================================================*/


/*==============================================================
   CONTENEDOR
==============================================================*/

.admin-contenedor {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}


/*==============================================================
   ENCABEZADOS
==============================================================*/

.tiendas-encabezado {
    margin-bottom: 2rem;
}

    .tiendas-encabezado h1 {
        margin-bottom: .5rem;
    }

    .tiendas-encabezado p {
        margin: 0;
        color: var(--color-texto-suave);
    }


/*==============================================================
   GRID
==============================================================*/

.informacion-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}


/*==============================================================
   TARJETAS
==============================================================*/

.admin-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 18px;
    padding: 2rem 1.5rem;
    box-shadow: var(--sombra);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .admin-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    }


/*==============================================================
   IMÁGENES DE LAS TARJETAS
==============================================================*/

.informacion-imagen {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

    .informacion-imagen img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }


/*==============================================================
   TEXTO DE TARJETAS
==============================================================*/

.admin-card h2 {
    margin: 0 0 .75rem;
    color: var(--color-texto);
    font-size: 1.25rem;
    font-weight: 600;
}

.admin-card h3 {
    margin: .75rem 0 0;
    color: var(--color-primario);
    font-size: 1rem;
    font-weight: 600;
}

.admin-card p {
    margin: .5rem 0 0;
    color: var(--color-texto-suave);
    font-size: .95rem;
    line-height: 1.6;
}

    .admin-card p i {
        color: var(--color-primario);
        margin-right: .25rem;
    }


/*==============================================================
   BOTONES DE INFORMACIÓN
==============================================================*/

.admin-card > .boton {
    margin-top: 1.5rem;
}


/*==============================================================
   ACCIONES — MAPAS
==============================================================*/

.admin-card .acciones-admin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    width: 100%;
    margin-top: 1.5rem;
}

.boton--mapa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: auto;
    min-width: 125px;
    text-decoration: none;
}

    .boton--mapa img {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }


/*==============================================================
   HORARIOS
==============================================================*/

.horario-tienda {
    width: 100%;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-borde);
}

    .horario-tienda p {
        margin-top: .65rem;
    }

        .horario-tienda p:first-child {
            margin-top: 0;
        }

    .horario-tienda strong {
        color: var(--color-texto);
    }

    .horario-tienda span {
        color: var(--color-texto);
        font-weight: 500;
    }


/*==============================================================
   CONTACTO — WHATSAPP
==============================================================*/

.whatsapp-contacto {
    margin-top: .75rem;
}

    .whatsapp-contacto a {
        text-decoration: none;
    }

    .whatsapp-contacto h3 {
        margin: 0;
        color: #25D366;
        transition: opacity .2s ease, transform .2s ease;
    }

        .whatsapp-contacto h3:hover {
            opacity: .8;
            transform: translateY(-1px);
        }


/*==============================================================
   REDES SOCIALES
==============================================================*/

.redes-lista {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 1rem;
}

    .redes-lista a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .7rem;
        padding: .65rem;
        color: var(--color-texto);
        text-decoration: none;
        border-radius: var(--radio-pequeno);
        transition: background-color .2s ease, transform .2s ease;
    }

        .redes-lista a:hover {
            background: var(--color-bg-alt);
            transform: translateX(3px);
        }

    .redes-lista img {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

    .redes-lista h3 {
        margin: 0;
        color: var(--color-texto);
    }


/*==============================================================
   BOTÓN VOLVER
==============================================================*/

.volver-contenedor {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.25rem 20px 0;
}

.volver {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    width: auto;
}


/*==============================================================
   TABLET
==============================================================*/

@media (max-width: 900px) {

    .informacion-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
}


/*==============================================================
   MÓVIL
==============================================================*/

@media (max-width: 768px) {

    .admin-contenedor {
        padding: 0 16px;
    }

    .volver-contenedor {
        padding: 1rem 16px 0;
    }

    .informacion-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin-top: 1.5rem;
    }

    .admin-card {
        padding: 1.5rem 1.25rem;
        border-radius: 16px;
    }

    .informacion-imagen {
        width: 100px;
        height: 100px;
        margin-bottom: 1rem;
    }

    .admin-card h2 {
        font-size: 1.1rem;
    }

    .admin-card p {
        font-size: .9rem;
    }


    /* Mapas */

    .admin-card .acciones-admin {
        gap: .5rem;
    }

    .boton--mapa {
        flex: 1;
        min-width: 0;
        padding-left: .6rem;
        padding-right: .6rem;
    }


    /* Redes */

    .redes-lista a {
        padding: .75rem;
    }
}


/*==============================================================
   MÓVIL PEQUEÑO
==============================================================*/

@media (max-width: 480px) {

    .admin-contenedor {
        padding: 0 12px;
    }

    .volver-contenedor {
        padding-left: 12px;
        padding-right: 12px;
    }

    .admin-card {
        padding: 1.25rem 1rem;
    }

    .informacion-imagen {
        width: 85px;
        height: 85px;
    }

    .admin-card h2 {
        font-size: 1rem;
    }

    .admin-card p {
        font-size: .85rem;
    }
   

    /* Botones de mapas */

    .admin-card .acciones-admin {
        flex-direction: column;
        width: 100%;
    }

    .boton--mapa {
        width: 100%;
    }
}

/* ===========================
   CENTRADO EN MÓVIL
=========================== */

@media (max-width: 768px) {

    .informacion-grid {
        justify-items: center;
    }

        .informacion-grid .admin-card {
            width: 100%;
            max-width: 420px;
            text-align: center;
            align-items: center;
        }

            .informacion-grid .admin-card p {
                text-align: center;
            }

        .informacion-grid .acciones-admin {
            justify-content: center;
            width: 100%;
        }

        .informacion-grid .redes-lista {
            justify-content: center;
        }
}
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}