/* sm-telefono.css — Teléfono con país (assets/js/sm-telefono.js, tanda 63). Lo cargan el ERP (header.php) y el portal
   (header_clientes.php). Botón con bandera pegado al campo, como una sola pieza; lista flotante con bandera, país y código.
   Tokens del tema con respaldo (el portal no define todos). */
.sm-tel-caja { position: relative; display: flex; align-items: stretch; width: 100%; }
.sm-tel-caja > input { flex: 1 1 auto; min-width: 0; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.sm-tel-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 11px; margin-right: -1px;
  border: 1px solid var(--sm-line, #d0d5dd); border-radius: var(--sm-r-sm, 10px) 0 0 var(--sm-r-sm, 10px);
  background: var(--sm-surface-2, #f4f5f7); color: var(--sm-ink, #1f2937); font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer;
  transition: background .15s, border-color .15s; }
.sm-tel-btn:hover { background: var(--sm-surface, #fff); }
.sm-tel-btn:focus-visible { outline: 2px solid var(--sm-primary, #2A61A8); outline-offset: 1px; position: relative; z-index: 2; }
.sm-tel-btn[aria-expanded="true"] .sm-tel-chev { transform: rotate(180deg); }
.sm-tel-flag { display: block; width: 22px; height: 15px; border-radius: var(--sm-r-xs, 3px); object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); flex: 0 0 auto; }
.sm-tel-flag--otro { width: auto; height: auto; font-size: 18px; box-shadow: none; color: var(--sm-muted, #6b7280); }
.sm-tel-cod { font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: left; }
.sm-tel-chev { font-size: 18px; color: var(--sm-muted, #6b7280); transition: transform .15s; }
.sm-tel-caja--lg .sm-tel-btn { font-size: 1.05rem; padding-left: 14px; }
.sm-tel-caja--sm .sm-tel-btn { font-size: .82rem; padding-left: 8px; }

.sm-tel-lista { position: absolute; z-index: 1090; top: calc(100% + 6px); left: 0; min-width: 240px; max-height: 300px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  background: var(--sm-surface, #fff); color: var(--sm-ink, #1f2937); border: 1px solid var(--sm-line, #d0d5dd); border-radius: var(--sm-r-md, 14px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18); animation: sm-tel-in .14s ease-out; }
.sm-tel-lista[hidden] { display: none; }
.sm-tel-op { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--sm-r-sm, 10px); cursor: pointer; font-size: .92rem; outline: none; }
.sm-tel-op:hover, .sm-tel-op:focus { background: var(--sm-surface-2, #f4f5f7); }
.sm-tel-op[aria-selected="true"] { background: color-mix(in srgb, var(--sm-primary, #2A61A8) 12%, transparent); font-weight: 700; }
.sm-tel-op[aria-selected="true"]::after { content: 'check'; font-family: 'Material Symbols Outlined'; margin-left: 4px; color: var(--sm-primary, #2A61A8); font-size: 18px; }
.sm-tel-op-nom { flex: 1 1 auto; }
.sm-tel-op-cod { color: var(--sm-muted, #6b7280); font-variant-numeric: tabular-nums; font-size: .86rem; }
.sm-tel-op:nth-last-child(1) { margin-top: 4px; border-top: 1px solid var(--sm-line, #e5e7eb); border-top-left-radius: 0; border-top-right-radius: 0; }
@keyframes sm-tel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sm-tel-lista { animation: none; } }