/*
========================================================
TALLERMAP
BASE DE FICHA PÚBLICA

Este archivo SOLO contiene estructura general.
NO contiene diseño verde.
NO contiene estilos específicos de Alicante.
NO duplica taller-publico-verde.css.
========================================================
*/


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

.ficha-publica {
    max-width: 1100px;
    margin: 46px auto;
    padding: 0 20px;
}


/* =====================================================
   BLOQUES PRINCIPALES
===================================================== */

.ficha-publica article,
.ficha-relacionados,
.ficha-contexto {
    background: #ffffff;
    border: 1px solid #e7ebf0;
    border-radius: 22px;
    box-shadow: 0 14px 38px rgba(18, 33, 56, .08);
}


.ficha-publica article {
    position: relative;
    overflow: hidden;
    padding: 36px;
}


/* línea superior base */

.ficha-publica article::before {
    content: "";
    position: absolute;

    inset:
        0
        0
        auto
        0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            #1246d8,
            #2f6df6
        );
}


/* =====================================================
   MIGAS
===================================================== */

.ficha-migas {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    align-items: center;

    margin:
        0
        0
        18px;

    font-size: .92rem;

    color: #657080;
}


.ficha-migas a {
    color: inherit;
    text-decoration: none;
}


.ficha-migas a:hover {
    text-decoration: underline;
}


.ficha-migas-separador {
    color: #9aa3af;
}


/* =====================================================
   TÍTULO Y DIRECCIÓN
===================================================== */

.ficha-publica h1 {
    margin:
        8px
        0
        10px;

    font-size:
        clamp(
            1.9rem,
            4vw,
            2.7rem
        );

    line-height: 1.08;

    letter-spacing: -.025em;

    color: #172033;
}


.ficha-publica-direccion {
    margin: 0;

    color: #5a6574;

    font-size: 1.08rem;
}


/* =====================================================
   ESTADO
===================================================== */

.ficha-estado {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    align-items: center;

    margin:
        16px
        0
        6px;
}


.ficha-insignia {
    display: inline-flex;
    align-items: center;

    padding:
        7px
        11px;

    border-radius: 999px;

    font-weight: 800;

    font-size: .86rem;

    background: #fff4d8;

    color: #725100;
}


.ficha-insignia.verificada {
    background: #e7f8ed;

    color: #126534;
}


.ficha-fecha {
    font-size: .9rem;

    color: #6a7482;
}


/* =====================================================
   FOTO / PORTADA
===================================================== */

.ficha-publica-foto {
    margin:
        22px
        0;

    border-radius: 18px;

    overflow: hidden;

    background: #eef2f4;

    box-shadow:
        inset
        0
        0
        0
        1px
        rgba(0, 0, 0, .04);
}


.ficha-publica-foto img {
    display: block;

    width: 100%;

    max-height: 320px;

    object-fit: cover;
}


/* =====================================================
   ACCIONES
===================================================== */

.ficha-publica-acciones,
.ficha-publica-gestion {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin:
        24px
        0;
}


.ficha-publica-acciones {
    padding: 16px;

    border:
        1px solid
        #e7ebf2;

    border-radius: 16px;

    background: #f8faff;
}


.ficha-publica-acciones .boton {
    flex:
        1
        1
        185px;

    min-height: 50px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    border-radius: 12px;

    font-weight: 800;

    box-shadow:
        0
        6px
        16px
        rgba(
            18,
            70,
            216,
            .08
        );

    transition:
        transform
        .15s
        ease,
        box-shadow
        .15s
        ease;
}


.ficha-publica-acciones
.boton:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0
        10px
        22px
        rgba(
            18,
            70,
            216,
            .14
        );
}


.accion-principal {
    font-weight: 900;
}


.accion-whatsapp {
    background: #167c3a;

    border-color: #167c3a;

    color: #ffffff;
}


/* =====================================================
   DATOS
===================================================== */

.ficha-publica-datos {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 12px;

    margin-top: 24px;
}


.ficha-publica-datos > p,
.ficha-publica-datos > div,
.ficha-publica-datos > details {
    margin: 0;

    padding:
        14px
        16px;

    border:
        1px solid
        #e6eaf0;

    border-radius: 14px;

    background: #fbfcfe;
}


.ficha-publica-datos
.taller-horario {
    grid-column:
        1
        /
        -1;
}


/* =====================================================
   VOLVER
===================================================== */

.ficha-publica-volver {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 18px;

    padding:
        8px
        12px;

    border-radius: 999px;

    background: #eef3ff;

    color: #2046a5;

    text-decoration: none;

    font-weight: 800;
}


.ficha-publica-volver:hover {
    background: #e4ecff;
}


/* =====================================================
   ESPECIALIDADES
===================================================== */

.ficha-publica
.especialidades {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 20px;
}


.ficha-publica
.especialidades > * {
    margin: 0;
}


/* =====================================================
   AVISO
===================================================== */

.ficha-aviso {
    margin:
        24px
        0
        0;

    padding:
        16px
        18px;

    border-left:
        4px solid
        #cfd7e4;

    border-radius: 12px;

    background: #f7f9fc;

    color: #4a5565;
}


/* =====================================================
   GESTIÓN
===================================================== */

.ficha-publica-gestion {
    margin:
        18px
        0
        0;

    padding-top: 18px;

    border-top:
        1px solid
        #edf0f4;

    gap: 10px;
}


.ficha-publica-gestion
.boton {
    flex:
        1
        1
        220px;

    min-height: 42px;

    text-align: center;

    border-radius: 10px;

    font-size: .92rem;

    font-weight: 700;

    box-shadow: none;
}


.ficha-publica-gestion
#reclamar-ficha {
    background: #eef3ff;

    border-color: #dbe5ff;

    color: #244a9f;
}


.ficha-publica-gestion
#corregir-ficha {
    background: #ffffff;

    border-color: #e2e7ee;

    color: #4f5968;
}


.ficha-publica-gestion
.boton:hover {
    transform: none;

    box-shadow: none;

    filter:
        brightness(.98);
}


/* =====================================================
   CONTEXTO Y RELACIONADOS
===================================================== */

.ficha-contexto,
.ficha-relacionados {
    margin-top: 24px;

    padding: 30px;
}


.ficha-contexto h2,
.ficha-relacionados h2 {
    margin-top: 0;

    color: #1d2638;
}


.ficha-contexto-enlaces {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 18px;
}


.ficha-relacionados-lista {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 16px;
}


.taller-relacionado {
    display: flex;

    flex-direction: column;

    gap: 8px;

    min-height: 165px;

    padding: 18px;

    border:
        1px solid
        #e4e8ed;

    border-radius: 16px;

    color: inherit;

    text-decoration: none;

    background: #ffffff;

    transition:
        transform
        .15s
        ease,
        box-shadow
        .15s
        ease,
        border-color
        .15s
        ease;
}


.taller-relacionado:hover {
    transform:
        translateY(-3px);

    border-color: #cdd8ed;

    box-shadow:
        0
        12px
        26px
        rgba(
            24,
            39,
            75,
            .10
        );
}


.taller-relacionado strong {
    font-size: 1.04rem;

    color: #1d2638;
}


.taller-relacionado small {
    color: #58626f;
}


.ficha-cargando {
    color: #697380;
}


.ficha-relacionados-vacio {
    padding: 14px;

    border-radius: 12px;

    background: #f5f7fa;
}


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

@media
(max-width: 820px) {

    .ficha-publica-datos {
        grid-template-columns:
            1fr;
    }


    .ficha-publica-datos
    .taller-horario {
        grid-column:
            auto;
    }


    .ficha-relacionados-lista {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


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

@media
(max-width: 600px) {

    .ficha-publica {
        margin-top: 22px;

        padding:
            0
            12px
            88px;
    }


    .ficha-publica article,
    .ficha-contexto,
    .ficha-relacionados {
        padding:
            22px
            18px;

        border-radius: 18px;
    }


    .ficha-publica h1 {
        font-size: 2rem;
    }


    .ficha-publica-acciones {
        position: static;

        bottom: auto;

        z-index: auto;

        padding: 10px;

        border-radius: 14px;

        background: #ffffff;

        box-shadow: none;

        backdrop-filter: none;
    }


    .ficha-publica-acciones
    .boton,

    .ficha-publica-gestion
    .boton {
        width: 100%;

        flex-basis: 100%;
    }


    .ficha-relacionados-lista {
        grid-template-columns:
            1fr;
    }


    .ficha-publica-datos > p,
    .ficha-publica-datos > div,
    .ficha-publica-datos > details {
        padding:
            13px
            14px;
    }


    .ficha-publica-foto img {
        max-height: 260px;
    }
}