/* Frontend CSS for Aragon Popup Creator - All Display Types */

/* Variables */
:root {
    --aragon-z-banners: 9999995;
    --aragon-z-widgets: 9999997;
    --aragon-z-popups: 9999999;
    --aragon-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    --aragon-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --aragon-border-radius: 8px;
}

/* ===========================================
   POPUP STYLES (Modal Overlays)
   =========================================== */

/* Popup Overlays */
.aragon-popup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: var(--aragon-z-popups);
    backdrop-filter: blur(2px);
    animation: aragon-fade-in 0.3s ease-out;
}

.aragon-popup-overlay.aragon-popup-center {
    justify-content: center;
    align-items: center;
}

.aragon-popup-overlay.aragon-popup-top-center {
    justify-content: center;
    align-items: flex-start;
    padding-top: 10vh;
}

.aragon-popup-overlay.aragon-popup-bottom-center {
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 10vh;
}

/* Popup Container */
.aragon-popup {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    background: transparent;
    padding: 0;
    border-radius: 0;
    text-align: center;
    animation: aragon-scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Popup Images */
.aragon-popup img {
    border: 5px solid #fff;
    border-radius: var(--aragon-border-radius);
    max-width: 100%;
    height: auto;
    box-shadow: var(--aragon-shadow);
    transition: var(--aragon-transition);
}

.aragon-popup a:hover img {
    transform: scale(1.02);
}

/* Popup Close Button */
.aragon-popup-close {
    position: absolute;
    padding: 5px 10px !important;
    top: 5px;
    right: 5px;
    background: #ffffff !important;
    border: 2px solid #ccc;
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
    color: #666 !important;
    cursor: pointer;
    z-index: 10000;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: var(--aragon-transition);
}

.aragon-popup-close:hover {
    color: #ff0000;
    background-color: #f8f8f8;
    border-color: #ff0000;
    transform: scale(1.1);
}

.aragon-popup-close:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* ===========================================
   WIDGET STYLES (Fixed Corner Elements)
   =========================================== */

/* Widget Base */
.aragon-widget {
    position: fixed;
    width: 280px;
    max-height: 150px;
    z-index: var(--aragon-z-widgets);
    border-radius: var(--aragon-border-radius);
    box-shadow: var(--aragon-shadow);
    overflow: hidden;
    transition: var(--aragon-transition);
    cursor: pointer;
    background: white;
}

/* Remove pointer cursor for widgets without links */
.aragon-widget.aragon-widget-no-link {
    cursor: default;
}

/* Reduce hover effects for widgets without links */
.aragon-widget.aragon-widget-no-link:hover {
    transform: none;
    box-shadow: var(--aragon-shadow);
}

.aragon-widget.aragon-widget-no-link:hover .aragon-widget-image {
    transform: none;
}

.aragon-widget:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Special hover effects for centered widgets to preserve centering */
.aragon-widget-right-center:hover,
.aragon-widget-left-center:hover {
    transform: translateY(-50%) translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Override for centered widgets without links */
.aragon-widget.aragon-widget-no-link.aragon-widget-right-center:hover,
.aragon-widget.aragon-widget-no-link.aragon-widget-left-center:hover {
    transform: translateY(-50%);
    box-shadow: var(--aragon-shadow);
}

/* Widget Positioning */
.aragon-widget-top-right {
    top: 20px;
    right: 20px;
}

.aragon-widget-top-left {
    top: 20px;
    left: 20px;
}

.aragon-widget-right-center {
    top: 40%;
    right: 20px;
    transform: translateY(-50%);
}

.aragon-widget-left-center {
    top: 40%;
    left: 20px;
    transform: translateY(-50%);
}

.aragon-widget-bottom-right {
    bottom: 20px;
    right: 20px;
}

.aragon-widget-bottom-left {
    bottom: 20px;
    left: 20px;
}

/* Widget Stacking - Multiple widgets in same corner/edge */
.aragon-widget-top-right:nth-of-type(n+2) {
    top: calc(20px + (160px * var(--stack-index, 1)));
}

.aragon-widget-top-left:nth-of-type(n+2) {
    top: calc(20px + (160px * var(--stack-index, 1)));
}

.aragon-widget-right-center:nth-of-type(n+2) {
    top: calc(40% + (160px * var(--stack-index, 1)));
    transform: translateY(-50%);
}

.aragon-widget-right-center:nth-of-type(n+2):hover {
    transform: translateY(-50%) translateY(-2px) scale(1.02);
}

.aragon-widget-left-center:nth-of-type(n+2) {
    top: calc(40% + (160px * var(--stack-index, 1)));
    transform: translateY(-50%);
}

.aragon-widget-left-center:nth-of-type(n+2):hover {
    transform: translateY(-50%) translateY(-2px) scale(1.02);
}

.aragon-widget-bottom-right:nth-of-type(n+2) {
    bottom: calc(20px + (160px * var(--stack-index, 1)));
}

.aragon-widget-bottom-left:nth-of-type(n+2) {
    bottom: calc(20px + (160px * var(--stack-index, 1)));
}

/* Widget Images */
.aragon-widget-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--aragon-transition);
}

.aragon-widget:hover .aragon-widget-image {
    transform: scale(1.05);
}

/* Widget Links */
.aragon-widget-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* Widget Close Button */
.aragon-widget-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 0px !important;
    border-radius: 50% !important;
    font-size: 14px;
    font-weight: bold;
    color: #666 !important;
    cursor: pointer;
    z-index: 10001;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: Arial, sans-serif;
    transition: var(--aragon-transition);
    backdrop-filter: blur(4px);
}

.aragon-widget-close:hover {
    color: #ff0000;
    background-color: rgba(255, 255, 255, 1);
    border-color: #ff0000;
    transform: scale(1.1);
}

/* ===========================================
   BANNER STYLES (Top/Bottom Bars)
   =========================================== */

/* Banner Base */
.aragon-banner {
    position: relative;
    width: 100%;
    z-index: var(--aragon-z-banners);
    /* Repite lo que el render escribe en el style inline: asi el centrado no
       depende de un solo atributo y tambien cubre banners guardados antes */
    display: flex;
    align-items: center;
    background: white;
    /* Hairline como sombra y no como borde: un border-bottom se come 1px de la
       caja de contenido, y el flex centra dentro de ESA caja, asi que dejaba
       el texto medio pixel por encima del centro real de la barra. La sombra
       se dibuja fuera y no entra en el calculo */
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: var(--aragon-transition);
    animation: aragon-slide-down 0.5s ease-out;
}

.aragon-banner-top {
    position: relative;
    top: 0;
    margin-bottom: 0;
}

.aragon-banner-bottom {
    position: relative;
    bottom: 0;
    margin-top: 0;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
    animation: aragon-slide-up 0.5s ease-out;
}

/* Sticky Banners */
.aragon-banner-sticky.aragon-banner-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--aragon-z-banners);
}

.aragon-banner-sticky.aragon-banner-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--aragon-z-banners);
}

/* Push content down for sticky banners. Matches the banner's fixed 60px
   height; popup.js re-measures at runtime and also covers browsers
   without :has() support */
body:has(.aragon-banner-sticky.aragon-banner-top) {
    padding-top: 60px;
}

body:has(.aragon-banner-sticky.aragon-banner-bottom) {
    padding-bottom: 60px;
}

/* Banner Images */
.aragon-banner-image {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    display: block;
    transition: var(--aragon-transition);
}

.aragon-banner:hover .aragon-banner-image {
    transform: scale(1.01);
}

/* Banner Links */
.aragon-banner-link {
    /* Estirado a todo el alto para que la barra entera sea clicable, y flex
       centrado dentro para no perder el centrado justo al estirarse */
    display: flex;
    align-items: center;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    text-decoration: none;
}

/* Banner Close Button */
.aragon-banner-close {
    position: absolute;
    /* Centrada y no a 10px del borde: con la altura ya configurable, un banner
       de 50px dejaba la X visiblemente arriba y uno de 300px la dejaba perdida
       en la esquina */
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 0px !important;
    border-radius: 50%;
    font-size: 16px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    z-index: 10001;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: Arial, sans-serif;
    transition: var(--aragon-transition);
    backdrop-filter: blur(4px);
}

.aragon-banner-close:hover {
    color: #ff0000;
    background-color: rgba(255, 255, 255, 1);
    border-color: #ff0000;
    /* Repite el translateY o el hover la avienta hacia abajo */
    transform: translateY(-50%) scale(1.1);
}

/* ===========================================
   TEXTO DEL BANNER - CENTRADO VERTICAL GARANTIZADO
   ===========================================

   El texto queda centrado en el alto del banner SIEMPRE: con cualquier alto,
   con cualquier tamano de letra, y venga el HTML de donde venga (editor
   clasico, Gutenberg, Avada Builder, Elementor...).

   El flex del contenedor centra la CAJA del texto, no lo que se VE dentro de
   ella. Dos cosas hinchan esa caja por un solo lado y son las que descentran:

   1. Los margenes verticales que el tema le pone a <p>, <h1>-<h6>, <ul>...
      Casi siempre el de abajo es mayor que el de arriba, asi que sobra caja
      por abajo y el texto se ve POR ENCIMA del centro. Anular solo el primer
      y el ultimo hijo DIRECTO no alcanza: los constructores envuelven el
      contenido (<div class="fusion-text"><p>...</p></div>) y el margen vivo
      queda un nivel mas adentro, fuera del alcance del combinador '>'.

   2. El hueco de las descendentes que el marquee deja bajo la linea base al
      ser inline-block, y el 1px del borde inferior, que con box-sizing
      border-box sale de la caja de contenido donde el flex hace el centrado.

   NO se usa text-box-trim: recortar hasta la altura de mayusculas centra
   mejor a ojo, pero solo lo soportan Chrome 133+ y Safari 18.2+, asi que la
   misma barra caeria distinta segun el navegador, y el desfase que introduce
   CRECE con el tamano de letra (2.8px a 16px, 7.4px a 48px) que es justo lo
   que se queria eliminar. Se centra por metricas.
*/
.aragon-banner-text {
    /* 22px es el estandar acordado en la review 2026-08-24: un banner debe
       jalar la vista. Aplica al texto plano; los headings que el editor
       inserte conservan la tipografia del sitio. */
    font-size: 22px;
    line-height: 1.4;
    color: #333;
    font-family: inherit;
    width: 100%;
    min-width: 0;
}

/* A CUALQUIER profundidad, no solo en los hijos directos: es lo unico que
   deja la caja del texto simetrica sin importar como envuelva el editor.
   !important porque compite con la hoja del tema (Avada cuelga las suyas de
   .fusion-body) que casi siempre se carga despues que esta. */
.aragon-banner-text,
.aragon-banner-text * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Devuelve aire ENTRE bloques hermanos y nunca en los bordes: separa parrafos
   sin volver a descentrar, porque lo que descentra es el margen del primero o
   el del ultimo, no el de en medio */
.aragon-banner-text * + * {
    margin-top: 0.35em !important;
}

/* El marquee NO puede ser inline-block: al sentarse sobre la linea base deja
   debajo el hueco de las descendentes, y esa franja entra en la caja que el
   flex centra, asi que el texto sube. Como item de un flex en fila el
   centrado es exacto, y el translate3d(-100%) del keyframe sigue midiendo el
   ancho real del contenido, que es lo que mantiene el movimiento identico. */
.aragon-banner-text.aragon-banner-marquee {
    display: flex;
    align-items: center;
}

.aragon-banner-marquee .aragon-marquee-content {
    /* flex-shrink 0 o el item se encogeria al ancho del banner y el -100%
       del keyframe recorreria esa medida en vez de la del texto */
    display: block;
    flex: 0 0 auto;
    /* La duracion la inyecta el render como variable en el style del banner.
       El 15s es el que estaba fijo aqui antes y queda como respaldo para los
       items guardados sin el campo. Es duracion, no velocidad: mas alto,
       mas lento */
    animation: aragon-marquee var(--aragon-marquee-duration, 15s) linear infinite;
    padding-left: 100%;
    white-space: nowrap;
}

/* Banner pegado con [vetc_banner]: fluye con el contenido de la pagina en vez
   de anclarse arriba o abajo, y nunca es sticky (quedarse pegado al hacer
   scroll es de un banner de borde, no de uno que vive dentro de una seccion) */
.aragon-banner-embed {
    position: relative;
    width: 100%;
    margin: 0;
}

/* Patrones de fondo. Van sobre el background-color del banner, hechos con
   gradientes para no obligar a subir una imagen. Cuando hay imagen de fondo,
   el patron no aplica: la imagen ya ocupa la capa de background */
.aragon-pattern-stripes {
    background-image: repeating-linear-gradient(
        90deg,
        var(--aragon-pattern-color, rgba(0, 0, 0, 0.06)) 0 12px,
        transparent 12px 24px
    );
}

.aragon-pattern-diagonal {
    background-image: repeating-linear-gradient(
        45deg,
        var(--aragon-pattern-color, rgba(0, 0, 0, 0.06)) 0 10px,
        transparent 10px 20px
    );
}

.aragon-pattern-dots {
    background-image: radial-gradient(var(--aragon-pattern-color, rgba(0, 0, 0, 0.12)) 1.5px, transparent 1.6px);
    background-size: 14px 14px;
}

.aragon-pattern-grid {
    background-image:
        linear-gradient(var(--aragon-pattern-color, rgba(0, 0, 0, 0.07)) 1px, transparent 1px),
        linear-gradient(90deg, var(--aragon-pattern-color, rgba(0, 0, 0, 0.07)) 1px, transparent 1px);
    background-size: 18px 18px;
}

.aragon-pattern-checks {
    background-image:
        linear-gradient(45deg, var(--aragon-pattern-color, rgba(0, 0, 0, 0.06)) 25%, transparent 25% 75%, var(--aragon-pattern-color, rgba(0, 0, 0, 0.06)) 75%),
        linear-gradient(45deg, var(--aragon-pattern-color, rgba(0, 0, 0, 0.06)) 25%, transparent 25% 75%, var(--aragon-pattern-color, rgba(0, 0, 0, 0.06)) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

.aragon-pattern-chevron {
    background-image:
        linear-gradient(135deg, var(--aragon-pattern-color, rgba(0, 0, 0, 0.06)) 25%, transparent 25%),
        linear-gradient(225deg, var(--aragon-pattern-color, rgba(0, 0, 0, 0.06)) 25%, transparent 25%);
    background-size: 16px 16px;
}

@keyframes aragon-marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

/* ===========================================
   RESPONSIVE DESIGN
   =========================================== */

/* Tablet adjustments */
/* "Show on Mobile" apagado. La variable es lo que lee popup.js: preguntarle al
   navegador si la regla aplica evita repetir el breakpoint en el JS, que es
   como los dos se desincronizan.

   !important porque jQuery escribe `display` inline al hacer fadeIn/fadeOut y
   un estilo inline le gana a la hoja de estilos.

   La unica regla que oculta vive DENTRO de este @media, asi que en escritorio
   no hay nada que la active: la garantia es estructural, no algo que haya que
   volver a probar en cada cambio. */
.aragon-hide-mobile {
    --aragon-hidden: 0;
}

@media (max-width: 768px) {
    .aragon-hide-mobile {
        --aragon-hidden: 1;
        display: none !important;
    }
}

@media (max-width: 768px) {
    .aragon-popup {
        max-width: 95vw;
        max-height: 95vh;
    }
    
    .aragon-widget {
        width: 240px;
        max-height: 120px;
    }
    
    .aragon-widget-top-right,
    .aragon-widget-bottom-right {
        right: 15px;
    }
    
    .aragon-widget-top-left,
    .aragon-widget-bottom-left {
        left: 15px;
    }
    
    .aragon-widget-top-right,
    .aragon-widget-top-left {
        top: 15px;
    }
    
    .aragon-widget-bottom-right,
    .aragon-widget-bottom-left {
        bottom: 15px;
    }
    
    .aragon-banner-image {
        max-height: 150px;
    }
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .aragon-popup {
        max-width: 98vw;
        max-height: 98vh;
    }
    
    .aragon-popup img {
        border-width: 3px;
    }
    
    .aragon-widget {
        width: 200px;
        max-height: 100px;
    }
    
    .aragon-widget-top-right,
    .aragon-widget-bottom-right {
        right: 10px;
    }
    
    .aragon-widget-top-left,
    .aragon-widget-bottom-left {
        left: 10px;
    }
    
    .aragon-widget-top-right,
    .aragon-widget-top-left {
        top: 10px;
    }
    
    .aragon-widget-bottom-right,
    .aragon-widget-bottom-left {
        bottom: 10px;
    }
    
    .aragon-widget-close {
        width: 28px;
        height: 28px;
        font-size: 16px;
        top: 5px;
        right: 5px;
    }
    
    /* Reduce widget stacking spacing on mobile */
    .aragon-widget-top-right:nth-of-type(n+2) {
        top: calc(10px + (110px * var(--stack-index, 1)));
    }
    
    .aragon-widget-top-left:nth-of-type(n+2) {
        top: calc(10px + (110px * var(--stack-index, 1)));
    }
    
    .aragon-widget-bottom-right:nth-of-type(n+2) {
        bottom: calc(10px + (110px * var(--stack-index, 1)));
    }
    
    .aragon-widget-bottom-left:nth-of-type(n+2) {
        bottom: calc(10px + (110px * var(--stack-index, 1)));
    }
    
    .aragon-widget-right-center:nth-of-type(n+2) {
        top: calc(40% + (110px * var(--stack-index, 1)));
        transform: translateY(-50%);
    }
    
    .aragon-widget-left-center:nth-of-type(n+2) {
        top: calc(40% + (110px * var(--stack-index, 1)));
        transform: translateY(-50%);
    }
    
    .aragon-widget-right-center:nth-of-type(n+2):hover {
        transform: translateY(-50%) translateY(-2px) scale(1.02);
    }
    
    .aragon-widget-left-center:nth-of-type(n+2):hover {
        transform: translateY(-50%) translateY(-2px) scale(1.02);
    }
    
    .aragon-banner-close {
        width: 24px;
        height: 24px;
        font-size: 14px;
        right: 8px;
    }
    
    .aragon-banner-image {
        max-height: 120px;
    }
}

/* ===========================================
   ANIMATIONS
   =========================================== */

@keyframes aragon-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes aragon-scale-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes aragon-slide-down {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes aragon-slide-up {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes aragon-widget-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@keyframes aragon-widget-bounce-centered {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(-50%);
    }
    40% {
        transform: translateY(-50%) translateY(-10px);
    }
    60% {
        transform: translateY(-50%) translateY(-5px);
    }
}

/* Widget entrance animation */
.aragon-widget {
    animation: aragon-scale-in 0.5s ease-out, aragon-widget-bounce 1s ease-in-out 0.5s;
}

/* Centered widgets use different bounce animation */
.aragon-widget-right-center,
.aragon-widget-left-center {
    animation: aragon-scale-in 0.5s ease-out, aragon-widget-bounce-centered 1s ease-in-out 0.5s;
}

/* ===========================================
   ACCESSIBILITY
   =========================================== */

/* Screen reader text */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* Focus indicators */
.aragon-popup-close:focus,
.aragon-widget-close:focus,
.aragon-banner-close:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .aragon-popup img {
        border-color: #000;
    }
    
    .aragon-widget {
        border-color: #000;
    }
    
    .aragon-banner {
        box-shadow: 0 1px 0 #000;
    }

    .aragon-banner-bottom {
        box-shadow: 0 -1px 0 #000;
    }
    
    .aragon-popup-close,
    .aragon-widget-close,
    .aragon-banner-close {
        border-color: #000;
        background: #fff;
        color: #000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .aragon-popup-overlay,
    .aragon-popup,
    .aragon-widget,
    .aragon-banner,
    .aragon-popup img,
    .aragon-widget-image,
    .aragon-banner-image {
        animation: none;
        transition: none;
    }
    
    .aragon-popup-close:hover,
    .aragon-widget-close:hover {
        transform: none;
    }

    /* No 'none': el translateY no es una animacion, es lo que la mantiene
       centrada, y quitarlo la avienta media altura hacia abajo */
    .aragon-banner-close:hover {
        transform: translateY(-50%);
    }
}

/* ===========================================
   PRINT STYLES
   =========================================== */

@media print {
    .aragon-popup-overlay,
    .aragon-widget,
    .aragon-banner {
        display: none !important;
    }
}