/* 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);
    background: white;
    border-bottom: 1px solid 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;
    border-bottom: none;
    border-top: 1px solid 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 {
    display: block;
    width: 100%;
    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);
}

/* Banner text and marquee styles */
.aragon-banner-text {
    font-size: 16px;
    line-height: 1.4;
    color: #333;
    font-family: inherit;
}

/* El contenido sale del editor envuelto en <p>, y casi todos los temas le dan
   al parrafo un margen inferior mas grande que el superior. Ese margen entra
   en la caja que el flex centra, asi que el texto que se VE queda por encima
   del centro aunque la caja este perfectamente centrada. Anular el margen del
   primero y el ultimo hijo empareja la caja con su contenido. */
.aragon-banner-text > *:first-child,
.aragon-marquee-content > *:first-child {
    margin-top: 0;
}

.aragon-banner-text > *:last-child,
.aragon-marquee-content > *:last-child {
    margin-bottom: 0;
}

.aragon-banner-marquee .aragon-marquee-content {
    display: inline-block;
    /* 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 {
        border-color: #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;
    }
}