/* ==========================================================================
   Hoja de estilos del plugin "Proyectos y Reformas A+B".
   --------------------------------------------------------------------------
   Contiene lo que Elementor Site Settings no cubre de forma nativa:

     1. Indicador de disponibilidad (widget custom, contacto).
     2. Línea de cota — elemento firma de la marca, reutilizable como
        clase CSS `ab-cota` desde cualquier heading de Elementor
        (Advanced → CSS Classes).

   El resto del sistema (colores, tipografías, botones) vive en
   Elementor Site Settings para que el cliente lo edite sin código.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Indicador de disponibilidad
   Bloque de la portada de /contacto/: lee por la forma (cuadrado relleno
   = abierto, cuadrado hueco = cerrado), no por color de acento.
   -------------------------------------------------------------------------- */

.ab-estado-disponibilidad {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid #2E2E2E;
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #B5B5B5;
}

.ab-estado-disponibilidad__indicador {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border: 1px solid #FFFFFF;
}

.ab-estado-disponibilidad--abierto {
    border-color: #FFFFFF;
    color: #FFFFFF;
}

.ab-estado-disponibilidad--abierto .ab-estado-disponibilidad__indicador {
    background: #FFFFFF;
    animation: ab-latido 2.4s ease-in-out infinite;
}

@keyframes ab-latido {
    50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
    .ab-estado-disponibilidad--abierto .ab-estado-disponibilidad__indicador {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   2. Línea de cota

   `<span class="ab-cota ab-cota--inversa">Quiénes somos</span>`

   Como heading de Elementor (cualquier nivel h1-h6) añade la clase
   `ab-cota` (con modificadores `ab-cota--inicio` y `ab-cota--inversa`
   cuando proceda) en "Advanced → CSS Classes".

   El `<` que se suele dibujar a la izquierda viene de ::before; el de
   la derecha, de ::after. El cuerpo del elemento (label) va centrado
   entre ambas líneas mediante flex.
   -------------------------------------------------------------------------- */

.ab-cota {
    display: flex;
    align-items: center;
    gap: 1rem;

    font-family: 'IBM Plex Mono', 'Consolas', monospace !important;
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;

    color: #6B6B6B;
}

.ab-cota::before,
.ab-cota::after {
    content: "";
    flex: 1 1 auto;
    height: 8px;
    border-bottom: 1px solid currentColor;
}
.ab-cota::before { border-left:  1px solid currentColor; }
.ab-cota::after  { border-right: 1px solid currentColor; }

/* Arranca pegada al texto: el trazo izquierdo no se extiende. */
.ab-cota--inicio::before { flex: 0 0 28px; }

/* Variante sobre fondo oscuro, como la portada de /contacto. */
.ab-cota--inversa { color: #8A8A8A; }

/* Las cabeceras de Heading de Elementor traen márgenes por defecto. La
   cota no los quiere porque ya controla su propio espaciado. */
.elementor-widget-heading .ab-cota { margin: 0 !important; }