.pato-switcher{--p-bg:#fff;--p-fg:#0f172a;--p-border:#e5e7eb;--p-hover:#f1f5f9;--p-accent:#6366f1;--p-radius:10px;--p-shadow:0 8px 24px -8px rgba(15,23,42,.18),0 2px 6px rgba(15,23,42,.06);font-family:inherit;font-size:14px;color:var(--p-fg);position:relative;display:inline-block;line-height:1}
.pato-switcher *,.pato-switcher *::before,.pato-switcher *::after{box-sizing:border-box}
.pato-switcher__list{margin:0;padding:6px;list-style:none;background:var(--p-bg);border:1px solid var(--p-border);border-radius:var(--p-radius);box-shadow:var(--p-shadow);min-width:160px}
.pato-switcher__item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;color:var(--p-fg);text-decoration:none;transition:background .15s}
.pato-switcher__item:hover{background:var(--p-hover)}
.pato-switcher__item.is-current{background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(6,182,212,.06));font-weight:600;color:var(--p-accent)}
.pato-switcher__flag{font-size:18px;line-height:1}
.pato-switcher__name{font-size:14px}
.pato-switcher__code{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.7}

.pato-switcher--inline .pato-switcher__list{display:flex;gap:4px;padding:4px;background:transparent;border:none;box-shadow:none;min-width:0}
.pato-switcher--inline .pato-switcher__item{padding:6px 10px;background:var(--p-bg);border:1px solid var(--p-border)}
.pato-switcher--inline .pato-switcher__item.is-current{border-color:var(--p-accent)}

.pato-switcher--flags .pato-switcher__list{display:flex;gap:4px;padding:0;background:transparent;border:none;box-shadow:none;min-width:0}
.pato-switcher--flags .pato-switcher__item{padding:4px 6px;background:transparent;border:none}
.pato-switcher--flags .pato-switcher__name,.pato-switcher--flags .pato-switcher__code{display:none}
.pato-switcher--flags .pato-switcher__flag{font-size:22px;filter:saturate(.85)}
.pato-switcher--flags .pato-switcher__item.is-current .pato-switcher__flag{filter:saturate(1.2);transform:scale(1.1)}

.pato-switcher--dropdown .pato-switcher__toggle{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:var(--p-bg);border:1px solid var(--p-border);border-radius:var(--p-radius);cursor:pointer;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s}
.pato-switcher--dropdown .pato-switcher__toggle:hover{border-color:var(--p-accent);box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.pato-switcher__caret{font-size:10px;opacity:.6;transition:transform .15s}
.pato-switcher--dropdown[data-open="true"] .pato-switcher__caret{transform:rotate(180deg)}
.pato-switcher--dropdown .pato-switcher__list{position:absolute;top:calc(100% + 4px);left:0;z-index:9999;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s}
.pato-switcher--dropdown[data-open="true"] .pato-switcher__list{opacity:1;visibility:visible;transform:translateY(0)}

.pato-switcher--floating{position:fixed;z-index:9990}
/* Widgets de chat (WhatsApp, Intercom, Tawk.to, etc.) suelen vivir entre 9999 y 99999. Nos mantenemos por debajo para no taparlos. */
.pato-switcher--pos-bottom-right{bottom:20px;right:20px}
.pato-switcher--pos-bottom-left{bottom:20px;left:20px}
.pato-switcher--pos-top-right{top:20px;right:20px}
.pato-switcher--pos-top-left{top:20px;left:20px}
.pato-switcher--floating .pato-switcher__toggle{display:flex;align-items:center;gap:6px;min-width:56px;height:48px;padding:0 14px;background:var(--p-bg);border:1px solid var(--p-border);border-radius:999px;cursor:pointer;font:inherit;color:var(--p-fg);box-shadow:var(--p-shadow);transition:transform .2s,box-shadow .2s}
.pato-switcher--floating .pato-switcher__toggle:hover{transform:translateY(-2px);box-shadow:0 14px 32px -10px rgba(15,23,42,.25)}
.pato-switcher--floating .pato-switcher__list{position:absolute;opacity:0;visibility:hidden;transform:scale(.95) translateY(8px);transform-origin:bottom right;transition:opacity .18s,transform .18s,visibility .18s;min-width:180px}
.pato-switcher--floating[data-open="true"] .pato-switcher__list{opacity:1;visibility:visible;transform:scale(1) translateY(0)}
.pato-switcher--pos-bottom-right .pato-switcher__list{bottom:calc(100% + 8px);right:0;transform-origin:bottom right}
.pato-switcher--pos-bottom-left .pato-switcher__list{bottom:calc(100% + 8px);left:0;transform-origin:bottom left}
.pato-switcher--pos-top-right .pato-switcher__list{top:calc(100% + 8px);right:0;transform-origin:top right}
.pato-switcher--pos-top-left .pato-switcher__list{top:calc(100% + 8px);left:0;transform-origin:top left}

/* ============ Variante TAB (pestañita anclada al borde, despliega vertical) ============ */
.pato-switcher--tab{position:fixed;z-index:9990}
.pato-switcher--tab.pato-switcher--pos-bottom-right{bottom:0;right:30px}
.pato-switcher--tab.pato-switcher--pos-bottom-left{bottom:0;left:30px}
.pato-switcher--tab.pato-switcher--pos-top-right{top:0;right:30px}
.pato-switcher--tab.pato-switcher--pos-top-left{top:0;left:30px}

/* La pestañita (toggle button) */
.pato-switcher--tab .pato-switcher__tab-handle{display:flex;align-items:center;gap:8px;padding:6px 14px;background:var(--p-bg);color:var(--p-fg);border:1px solid var(--p-border);cursor:pointer;font:inherit;font-size:13px;font-weight:600;box-shadow:0 -2px 8px rgba(0,0,0,.08);transition:padding .2s ease,opacity .2s ease,gap .2s ease}
/* Anclada abajo: esquinas SUPERIORES redondeadas, sin borde inferior */
.pato-switcher--tab.pato-switcher--pos-bottom-right .pato-switcher__tab-handle,.pato-switcher--tab.pato-switcher--pos-bottom-left .pato-switcher__tab-handle{border-radius:8px 8px 0 0;border-bottom:0}
/* Anclada arriba: esquinas INFERIORES redondeadas, sin borde superior */
.pato-switcher--tab.pato-switcher--pos-top-right .pato-switcher__tab-handle,.pato-switcher--tab.pato-switcher--pos-top-left .pato-switcher__tab-handle{border-radius:0 0 8px 8px;border-top:0;box-shadow:0 2px 8px rgba(0,0,0,.08)}

.pato-switcher--tab .pato-switcher__tab-flag{font-size:16px;line-height:1}
.pato-switcher--tab .pato-switcher__tab-label{font-size:12px;letter-spacing:.04em;opacity:.85}
/* Flecha CSS (triángulo) que apunta en el sentido del despliegue */
.pato-switcher--tab .pato-switcher__tab-arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;transition:transform .2s ease;opacity:.7}
.pato-switcher--tab.pato-switcher--pos-bottom-right .pato-switcher__tab-arrow,.pato-switcher--tab.pato-switcher--pos-bottom-left .pato-switcher__tab-arrow{border-bottom:5px solid currentColor}
.pato-switcher--tab.pato-switcher--pos-top-right .pato-switcher__tab-arrow,.pato-switcher--tab.pato-switcher--pos-top-left .pato-switcher__tab-arrow{border-top:5px solid currentColor}
.pato-switcher--tab[data-open="true"] .pato-switcher__tab-arrow,.pato-switcher--tab:hover .pato-switcher__tab-arrow{transform:rotate(180deg)}

/* Lista de idiomas — se despliega vertical desde la pestaña */
.pato-switcher--tab .pato-switcher__list{position:absolute;opacity:0;visibility:hidden;transform:translateY(6px) scale(.96);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;background:var(--p-bg);color:var(--p-fg);border:1px solid var(--p-border);box-shadow:0 -6px 20px rgba(0,0,0,.1);min-width:180px;padding:6px}
/* Para tab anclada abajo: lista despliega HACIA ARRIBA */
.pato-switcher--tab.pato-switcher--pos-bottom-right .pato-switcher__list{bottom:100%;right:-1px;border-radius:8px 8px 0 8px;transform-origin:bottom right}
.pato-switcher--tab.pato-switcher--pos-bottom-left .pato-switcher__list{bottom:100%;left:-1px;border-radius:8px 8px 8px 0;transform-origin:bottom left}
/* Para tab anclada arriba: lista despliega HACIA ABAJO */
.pato-switcher--tab.pato-switcher--pos-top-right .pato-switcher__list{top:100%;right:-1px;border-radius:0 8px 8px 8px;transform-origin:top right;box-shadow:0 6px 20px rgba(0,0,0,.1)}
.pato-switcher--tab.pato-switcher--pos-top-left .pato-switcher__list{top:100%;left:-1px;border-radius:8px 0 8px 8px;transform-origin:top left;box-shadow:0 6px 20px rgba(0,0,0,.1)}

/* Apertura por click (JS añade data-open) Y por hover (CSS puro) */
.pato-switcher--tab[data-open="true"] .pato-switcher__list,.pato-switcher--tab:hover .pato-switcher__list{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.pato-switcher--tab .pato-switcher__item{color:var(--p-fg)}

/* Estado minimizado: tras elegir idioma, solo bandera + pequeña, semi-transparente */
.pato-switcher--tab.is-minimized .pato-switcher__tab-handle{padding:4px 8px;gap:0;opacity:.5}
.pato-switcher--tab.is-minimized .pato-switcher__tab-label,.pato-switcher--tab.is-minimized .pato-switcher__tab-arrow{display:none}
.pato-switcher--tab.is-minimized .pato-switcher__tab-flag{font-size:14px}
/* Al hover sobre minimizado, vuelve al estado expandido */
.pato-switcher--tab.is-minimized:hover .pato-switcher__tab-handle{padding:6px 14px;gap:8px;opacity:1}
.pato-switcher--tab.is-minimized:hover .pato-switcher__tab-label,.pato-switcher--tab.is-minimized:hover .pato-switcher__tab-arrow{display:inline}
.pato-switcher--tab.is-minimized:hover .pato-switcher__tab-flag{font-size:16px}

/* ============ Variante TOGGLE (2 idiomas, switch redondeado) ============ */
.pato-switcher--toggle{--p-tw:92px;--p-th:40px;--p-tpad:3px;--p-tknob:calc(var(--p-th) - (var(--p-tpad) * 2));--p-tmove:calc(var(--p-tw) - var(--p-tknob) - (var(--p-tpad) * 2));--p-tease:cubic-bezier(.34,1.56,.64,1);display:inline-block;position:relative;font-family:inherit}
.pato-switcher--toggle .pato-switcher__t-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.pato-switcher--toggle .pato-switcher__t-label{display:inline-block;width:var(--p-tw);height:var(--p-th);background:#f3f4f6;border-radius:999px;box-shadow:inset 0 6px 12px rgba(0,0,0,.12),inset 0 -6px 12px rgba(255,255,255,.6);cursor:pointer;transition:background .25s ease;overflow:hidden;position:relative}
.pato-switcher--toggle .pato-switcher__t-label:hover{background:#eef0f3}
.pato-switcher--toggle .pato-switcher__t-edge{position:absolute;top:50%;transform:translateY(-50%);user-select:none;pointer-events:none;opacity:.9;display:flex;align-items:center;justify-content:center;line-height:0}
.pato-switcher--toggle .pato-switcher__t-edge--left{left:8px}
.pato-switcher--toggle .pato-switcher__t-edge--right{right:8px}
.pato-switcher--toggle .pato-switcher__t-edge-img{width:18px;height:12px;display:block;border-radius:2px;object-fit:cover;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.pato-switcher--toggle .pato-switcher__t-knob{position:absolute;top:var(--p-tpad);left:var(--p-tpad);width:var(--p-tknob);height:var(--p-tknob);border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 8px 18px rgba(0,0,0,.18);transition:transform .45s var(--p-tease),box-shadow .25s ease;will-change:transform;overflow:hidden;line-height:0}
.pato-switcher--toggle .pato-switcher__t-knob-flag{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .25s ease;user-select:none;pointer-events:none}
.pato-switcher--toggle .pato-switcher__t-knob-img{width:24px;height:16px;display:block;border-radius:2px;object-fit:cover}
.pato-switcher--toggle .pato-switcher__t-knob-flag--right{opacity:1}
.pato-switcher--toggle .pato-switcher__t-knob-flag--left{opacity:0}
.pato-switcher--toggle .pato-switcher__t-input:not(:checked) + .pato-switcher__t-label .pato-switcher__t-knob-flag--left{opacity:1}
.pato-switcher--toggle .pato-switcher__t-input:not(:checked) + .pato-switcher__t-label .pato-switcher__t-knob-flag--right{opacity:0}
.pato-switcher--toggle .pato-switcher__t-input:checked + .pato-switcher__t-label .pato-switcher__t-knob{transform:translateX(var(--p-tmove))}
.pato-switcher--toggle .pato-switcher__t-label:active .pato-switcher__t-knob{transform:scale(.96)}
.pato-switcher--toggle .pato-switcher__t-input:checked + .pato-switcher__t-label:active .pato-switcher__t-knob{transform:translateX(var(--p-tmove)) scale(.96)}
.pato-switcher--toggle .pato-switcher__t-input:focus-visible + .pato-switcher__t-label{outline:2px solid var(--p-accent,#6366f1);outline-offset:2px}
.pato-switcher--toggle .pato-switcher__sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pato-switcher--toggle .pato-switcher__t-link{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media (prefers-color-scheme:dark){
  .pato-switcher--toggle .pato-switcher__t-label{background:#334155;box-shadow:inset 0 6px 12px rgba(0,0,0,.4),inset 0 -6px 12px rgba(255,255,255,.05)}
  .pato-switcher--toggle .pato-switcher__t-label:hover{background:#3a4659}
  .pato-switcher--toggle .pato-switcher__t-knob{background:#f1f5f9}
}
@media (prefers-reduced-motion:reduce){
  .pato-switcher--toggle .pato-switcher__t-knob{transition:transform .2s linear,box-shadow .2s linear}
}

/* Loading state — spinner al click mientras navega */
.pato-switcher.is-loading{pointer-events:none;opacity:.55;position:relative}
.pato-switcher.is-loading::after{content:'';position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:pato-spin .7s linear infinite;z-index:10}
@keyframes pato-spin{to{transform:rotate(360deg)}}

.pato-switcher-warning{background:#fff3cd;border:1px solid #ffd966;color:#664d03;padding:10px 14px;border-radius:8px;font-size:13px}
.pato-switcher-warning a{color:#664d03;font-weight:600}

.pato-faq__item{padding:10px 0;border-bottom:1px solid var(--p-border,#e5e7eb)}
.pato-faq__item summary{cursor:pointer;font-weight:600;font-size:15px}
.pato-faq__answer{margin-top:8px;color:#475569;line-height:1.6}
.pato-howto{margin:0 0 1em 0;padding-left:20px;line-height:1.6}

@media (prefers-color-scheme:dark){
  .pato-switcher{--p-bg:#1e293b;--p-fg:#f1f5f9;--p-border:#334155;--p-hover:#334155}
}
@media (prefers-reduced-motion:reduce){
  .pato-switcher *{transition:none!important}
}
