/* ═══════════════════════════════════════════════════════════════
 * currency-modal.css — Modal de selección de moneda (compartido)
 *
 * Usado por index.ejs, explorar.ejs y tienda/[slug].ejs vía _head.ejs
 * (con cache-busting _v('currency-modal-css')).
 *
 * El markup vive en includes/_currency-modal.ejs.
 * ═══════════════════════════════════════════════════════════════ */

/* ═══ Keyframes del modal ═══ */
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes overlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ═══ MODAL ═══ */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  animation: overlayIn 0.2s ease;
}
/* Edge-to-edge: 20px de aire + insets seguros del teléfono. */
.modal-overlay.open {
  display: flex; align-items: center; justify-content: center;
  padding: calc(20px + var(--sat, env(safe-area-inset-top, 0px)))
           calc(20px + env(safe-area-inset-right, 0px))
           calc(20px + env(safe-area-inset-bottom, 0px))
           calc(20px + env(safe-area-inset-left, 0px));
  /* Si un modal no cupiera igual, el fondo se puede desplazar: así nunca queda
     contenido inalcanzable fuera de la pantalla. */
  overflow-y: auto;
}
.modal {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; width: 100%; max-width: 400px;
  animation: modalIn 0.25s ease; overflow: hidden;
  /* ═══ NINGÚN MODAL MÁS ALTO QUE LA PANTALLA ═══
     Cabecera y pie quedan fijos y solo se desliza el cuerpo. Antes el modal
     genérico no tenía tope: cabecera + cuerpo (80dvh) + pie podían sumar más
     que el alto real de la pantalla y la ventana se salía por arriba y por
     abajo (en el celular, con la barra del navegador o el teclado abierto).
     Es el mismo esquema que ya usaba el modal de producto. */
  display: flex; flex-direction: column;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
}
.modal > .modal-header,
.modal > .modal-footer { flex-shrink: 0; }
.modal > .modal-body { flex: 1 1 auto; min-height: 0; max-height: none; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.modal-header .modal-title { font-size: 15px; font-weight: 600; margin: 0; }
.modal-close {
  width: 28px; height: 28px; border-radius: 8px;
  background: transparent; border: none; color: var(--text-dim);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: all 0.2s;
}
.modal-close:hover { background: var(--white-10); color: var(--text); }
/* OJO: este archivo se carga en TODAS las páginas (va en _head), así que su
   `.modal-body` es el que usan también los modales del panel (producto,
   variantes, licencia, archivos…). Antes decía `max-height: 360px`: eso dejaba
   un recuadro de 360px con su propio scroll DENTRO del scroll del modal. En el
   celular se siente como «no se puede deslizar» y el botón de guardar queda
   fuera de la vista. Se deja un tope GENEROSO (80% del alto real de la pantalla,
   `dvh`) que protege del desborde sin encerrar el contenido; el modal de moneda
   —que es una lista corta— conserva su propio tope. */
.modal-body {
  padding: 8px;
  max-height: 80vh;
  max-height: 80dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#modal-moneda .modal-body { max-height: 360px; }

.currency-option {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  cursor: pointer; transition: all 0.2s ease;
  border: 1px solid transparent;
}
.currency-option:hover { background: var(--white-5); }
.currency-option.active {
  background: var(--purple-10); border-color: var(--purple-20);
}
.currency-flag {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.currency-info { flex: 1; }
.currency-name { font-size: 13px; font-weight: 500; }
.currency-sub { font-size: 11px; color: var(--text-dim); }
.currency-check {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--purple); color: #fff;
  display: none; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0;
}
.currency-option.active .currency-check { display: flex; }