/* ==========================================================================
   Uri Translator — Widget Frontend
   ========================================================================== */

/* ── Variables ─────────────────────────────────────────────────────────────── */
.uri-translator-widget {
    --uri-bg:          #ffffff;
    --uri-bg-hover:    #f5f5f5;
    --uri-border:      rgba(0, 0, 0, 0.12);
    --uri-shadow:      0 4px 24px rgba(0, 0, 0, 0.14);
    --uri-radius:      14px;
    --uri-accent:      #2563eb;
    --uri-text:        #1a1a1a;
    --uri-text-muted:  #6b7280;
    --uri-transition:  0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --uri-loading:     #3b82f6;
}

/* ── Widget contenedor ─────────────────────────────────────────────────────── */
.uri-translator-widget {
    position:   fixed;
    z-index:    999999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    font-size:  14px;
    line-height: 1.4;
    box-sizing: border-box;
    background:       transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border:           none !important;
    box-shadow:       none !important;
}

#uri-translator-widget,
#uri-translator-widget * {
    box-sizing: border-box;
}

/* Neutralizar overrides agresivos de temas como Elementor, OceanWP, Astra, etc. */
#uri-translator-widget .uri-toggle-btn,
#uri-translator-widget .uri-toggle-btn:hover,
#uri-translator-widget .uri-toggle-btn:focus,
#uri-translator-widget .uri-toggle-btn:active {
    background:          transparent !important;
    background-color:    transparent !important;
    background-image:    none !important;
    border:              none !important;
    box-shadow:          none !important;
    -webkit-appearance:  none !important;
    appearance:          none !important;
}

.uri-translator-widget *,
.uri-translator-widget *::before,
.uri-translator-widget *::after {
    box-sizing: inherit;
}

/* ── Posiciones ─────────────────────────────────────────────────────────────── */
.uri-pos-bottom-right { bottom: 24px; right: 24px; }
.uri-pos-bottom-left  { bottom: 24px; left:  24px; }
.uri-pos-top-right    { top:    24px; right: 24px; }
.uri-pos-top-left     { top:    24px; left:  24px; }

/* ── Botón principal — solo bandera + chevron, sin fondo ────────────────────── */
.uri-toggle-btn {
    display:             flex !important;
    align-items:         center !important;
    gap:                 5px !important;
    padding:             4px 6px !important;
    background:          transparent !important;
    background-color:    transparent !important;
    background-image:    none !important;
    border:              none !important;
    border-radius:       0 !important;
    box-shadow:          none !important;
    -webkit-appearance:  none !important;
    appearance:          none !important;
    cursor:              pointer !important;
    color:               inherit !important;
    outline:             none !important;
    user-select:         none !important;
    transition:          opacity var(--uri-transition);
    text-shadow:         none !important;
}

.uri-toggle-btn:hover,
.uri-toggle-btn:focus,
.uri-toggle-btn:active {
    background:       transparent !important;
    background-color: transparent !important;
    box-shadow:       none !important;
    border:           none !important;
    outline:          none !important;
    opacity:          0.75;
}

.uri-toggle-btn:focus-visible {
    outline:        2px solid var(--uri-accent) !important;
    outline-offset: 3px !important;
}

/* Texto del idioma — oculto, solo accesibilidad */
.uri-current-label { display: none; }

.uri-current-flag {
    font-size:     24px;
    flex-shrink:   0;
    border-radius: 0 !important;
    overflow:      hidden;
}

/* Estado inicial sin idioma: placeholder vacío con tamaño mínimo */
.uri-current-flag:not([class*="fi-"]) {
    display:        inline-block;
    width:          1.3333em;
    height:         1em;
    background:     rgba(0,0,0,0.12);
}

.uri-chevron {
    width:       10px;
    height:      auto;
    flex-shrink: 0;
    transition:  transform var(--uri-transition);
    opacity:     0.7;
    color:       currentColor;
}

.uri-translator-widget.uri-open .uri-chevron {
    transform: rotate(180deg);
}

/* ── Dropdown ───────────────────────────────────────────────────────────────── */
.uri-dropdown {
    position:    absolute;
    background:  var(--uri-bg);
    border:      1.5px solid var(--uri-border);
    border-radius: var(--uri-radius);
    box-shadow:  var(--uri-shadow);
    min-width:   200px;
    max-height:  340px;
    overflow:    hidden;
    display:     flex;
    flex-direction: column;

    /* Posición dinámica según el widget */
    opacity:    0;
    transform:  translateY(8px) scale(0.97);
    pointer-events: none;
    transition: opacity var(--uri-transition),
                transform var(--uri-transition);
}

/* Arriba → dropdown hacia abajo */
.uri-pos-bottom-right .uri-dropdown,
.uri-pos-bottom-left  .uri-dropdown {
    bottom:    calc(100% + 10px);
}

/* Abajo → dropdown hacia arriba */
.uri-pos-top-right .uri-dropdown,
.uri-pos-top-left  .uri-dropdown {
    top: calc(100% + 10px);
    transform: translateY(-8px) scale(0.97);
}

/* Alineación horizontal */
.uri-pos-bottom-right .uri-dropdown,
.uri-pos-top-right    .uri-dropdown {
    right: 0;
}

.uri-pos-bottom-left .uri-dropdown,
.uri-pos-top-left    .uri-dropdown {
    left: 0;
}

/* Estado abierto */
.uri-translator-widget.uri-open .uri-dropdown {
    opacity:        1;
    transform:      translateY(0) scale(1);
    pointer-events: auto;
}

/* ── Lista de idiomas ───────────────────────────────────────────────────────── */
.uri-lang-list {
    list-style: none;
    margin:     0;
    padding:    6px;
    overflow-y: auto;
    flex:       1;
    scrollbar-width: thin;
    scrollbar-color: var(--uri-border) transparent;
}

.uri-lang-list::-webkit-scrollbar       { width: 4px; }
.uri-lang-list::-webkit-scrollbar-track { background: transparent; }
.uri-lang-list::-webkit-scrollbar-thumb { background: var(--uri-border); border-radius: 4px; }

.uri-lang-btn {
    display:        flex;
    align-items:    center;
    gap:            10px;
    width:          100%;
    padding:        9px 12px;
    background:     transparent;
    border:         none;
    border-radius:  8px;
    cursor:         pointer;
    color:          var(--uri-text);
    text-align:     left;
    transition:     background var(--uri-transition), color var(--uri-transition);
    outline:        none;
}

.uri-lang-btn:hover {
    background: var(--uri-bg-hover);
}

.uri-lang-btn:focus-visible {
    outline: 2px solid var(--uri-accent);
    outline-offset: -2px;
}

.uri-lang-btn.uri-active {
    background: rgba(37, 99, 235, 0.09);
    color:      var(--uri-accent);
    font-weight: 600;
}

.uri-lang-btn .uri-flag {
    font-size:     20px;
    flex-shrink:   0;
    border-radius: 0 !important;
    overflow:      hidden;
}

.uri-lang-btn .uri-lang-native {
    font-weight: 500;
    flex:        1;
}

.uri-lang-btn .uri-lang-name {
    font-size:  12px;
    color:      var(--uri-text-muted);
    flex-shrink: 0;
}

.uri-lang-btn.uri-active .uri-lang-name {
    color: var(--uri-accent);
    opacity: 0.8;
}

/* ── Barra de carga ─────────────────────────────────────────────────────────── */
.uri-loading-bar {
    height:     3px;
    background: transparent;
    overflow:   hidden;
    flex-shrink: 0;
}

.uri-loading-progress {
    height:     100%;
    width:      0;
    background: linear-gradient(90deg, var(--uri-loading), #60a5fa);
    border-radius: 2px;
    transition: none;
}

.uri-translator-widget.uri-translating .uri-toggle-btn {
    opacity: 0.85;
    cursor:  wait;
}

.uri-translator-widget.uri-translating .uri-loading-progress {
    animation: uri-progress-anim 1.6s ease-in-out infinite;
}

@keyframes uri-progress-anim {
    0%   { width: 0%;   opacity: 1; }
    60%  { width: 80%;  opacity: 1; }
    100% { width: 100%; opacity: 0; }
}

/* ── Status bar ─────────────────────────────────────────────────────────────── */
.uri-status-bar {
    font-size:  12px;
    color:      var(--uri-text-muted);
    padding:    0 12px 8px;
    min-height: 0;
    text-align: center;
}

/* ── Modo oscuro automático ─────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .uri-translator-widget {
        --uri-bg:         #1e1e2e;
        --uri-bg-hover:   #2a2a3c;
        --uri-border:     rgba(255, 255, 255, 0.12);
        --uri-shadow:     0 4px 24px rgba(0, 0, 0, 0.5);
        --uri-text:       #e2e8f0;
        --uri-text-muted: #94a3b8;
        --uri-accent:     #60a5fa;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .uri-pos-bottom-right { bottom: 16px; right: 16px; }
    .uri-pos-bottom-left  { bottom: 16px; left:  16px; }
    .uri-pos-top-right    { top:    16px; right: 16px; }
    .uri-pos-top-left     { top:    16px; left:  16px; }

    .uri-toggle-btn {
        padding: 9px 13px;
        font-size: 13px;
    }

    .uri-dropdown {
        max-height: 260px;
        min-width: 180px;
    }
}