/* Celular con indicativo de país: selector con buscador (public/js/tienda/telefono.js).
   Lo cargan la tienda y el panel. Usa las variables de color de base.css. */
.telefono { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: stretch; }
.indicativo { position: relative; }
.indicativo__boton {
  display: inline-flex; align-items: center; gap: 6px; height: 100%; min-height: 48px; padding: 0 12px 0 14px;
  border: 1px solid var(--linea-fuerte, rgba(231, 207, 166, 0.22)); border-radius: var(--r-2, 12px);
  background: var(--roca-1, #1a1310); color: var(--texto, #f3e6d0); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.indicativo__boton:hover { border-color: var(--crema, #e7cfa6); }
.indicativo__boton:focus-visible { outline: 2px solid var(--crema, #e7cfa6); outline-offset: 2px; }
.indicativo__boton[aria-expanded='true'] { border-color: var(--magma, #c4471b); }
.indicativo__codigo { font-size: 0.78rem; font-weight: 600; color: var(--texto-3, #9c8a74); }
.indicativo__flecha { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--texto-3, #9c8a74); }
.indicativo__panel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: min(300px, 86vw);
  padding: 8px; border: 1px solid var(--linea-fuerte, rgba(231, 207, 166, 0.22)); border-radius: var(--r-2, 12px);
  background: var(--roca-1, #1a1310); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.indicativo__panel[hidden] { display: none; }
.indicativo__buscar {
  width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--linea-fuerte, rgba(231, 207, 166, 0.22));
  border-radius: 10px; background: var(--roca-0, #0e0a08); color: var(--texto, #f3e6d0); font: inherit;
}
.indicativo__buscar:focus { outline: 2px solid var(--magma, #c4471b); outline-offset: 0; }
.indicativo__lista { list-style: none; margin: 8px 0 0; padding: 0; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.indicativo__lista [role='option'] {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 10px; border-radius: 8px; cursor: pointer; color: var(--texto-2, #d9c7ae);
}
.indicativo__lista [role='option'][hidden] { display: none; }
.indicativo__op--activa { background: rgba(231, 207, 166, 0.08); color: var(--texto, #f3e6d0); }
.indicativo__lista [aria-selected='true'] { color: var(--crema, #e7cfa6); font-weight: 700; }
.indicativo__nombre { flex: 1; }
.indicativo__num { font-variant-numeric: tabular-nums; color: var(--texto-3, #9c8a74); }
.indicativo__vacio { margin: 10px 4px 4px; font-size: 0.86rem; color: var(--texto-3, #9c8a74); }
@media (prefers-reduced-motion: no-preference) { .indicativo__panel { animation: indicativo-abre 140ms ease-out; } }
@keyframes indicativo-abre { from { opacity: 0; transform: translateY(-4px); } }