/* ════════════════════════════════════════════════════════════════════════════
   phones.css — estilos exclusivos del módulo Teléfonos
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Tab pane layout ─────────────────────────────────────────────────────── */

#pills-telefonos {
  flex-direction: column;
  height: calc(100vh - 110px);
  overflow: hidden;
}
#pills-telefonos.show.active {
  display: flex !important;
  height: calc(100vh - 110px) !important;
  min-height: 0;
  overflow: hidden;
}
#pills-telefonos > .tab-section-header {
  position: static;
  top: unset;
  flex-shrink: 0;
}

@media (max-width: 767.98px) {
  /* Misma altura que desktop — el scroll interno sigue funcionando */
  #pills-telefonos .fv2-layout { flex-direction: column; }
  #pills-telefonos .dt-sidebar {
    width: 100% !important;
    border-right: none;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
  }
  #pills-telefonos .dt-sidebar.is-collapsed { height: 0; overflow: hidden; }
}

/* ── Fila del listado ────────────────────────────────────────────────────── */

.ph-row {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .5rem .75rem;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 8px;
  margin: 0 .5rem .28rem;
  background: rgba(255, 255, 255, .018);
  transition: background .12s, border-color .12s;
  min-width: 0;
  cursor: default;
}
.ph-row:hover {
  background: rgba(255, 255, 255, .038);
  border-color: rgba(148, 163, 184, .22);
}

/* Header: nombre a la izquierda, acciones a la derecha */
.ph-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
/* Cursor pointer en la zona muerta del header (indica que es colapsable) */
.ph-layout--compact .ph-header { cursor: pointer; }

.ph-name {
  flex: 0 0 auto;
  max-width: 72%;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  color: #e2e8f0;
  font-size: calc(0.875rem * var(--ph-fs, 1));
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  transition: color .12s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ph-name:hover { color: #93c5fd; }

.ph-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .28rem;
  margin-left: auto; /* empuja acciones a la derecha como en calls */
}


/* ── Filas de badges ─────────────────────────────────────────────────────── */

.ph-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .18rem .22rem;
  min-width: 0;
}

/* Badge base */
.ph-badge {
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: calc(0.76rem * var(--ph-fs, 1));
  font-weight: 500;
  line-height: 1.4;
  padding: 0.22rem 0.6rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.ph-badge i { font-size: .65rem; flex-shrink: 0; opacity: .75; }

/* ── Chip group: label encima, valores abajo ─────────────────────────────── */
.ph-chip-group {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  margin-bottom: .75rem;
}
.ph-chip-group:last-child { margin-bottom: 0; }

/* ── Type tag label ──────────────────────────────────────────────────────── */
.ph-type-tag {
  display: inline-flex;
  align-items: center;
  gap: .18rem;
  font-size: calc(0.64rem * var(--ph-fs, 1));
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: .62;
  margin-right: .1rem;
}
.ph-type-tag i { font-size: .6rem; }
.ph-type-tag--phone { color: #93c5fd; }
.ph-type-tag--int   { color: #cbd5e1; }
.ph-type-tag--email { color: #6ee7b7; }
.ph-type-tag--tags  { color: #d8b4fe; }
.ph-type-tag--obs   { color: rgba(148,163,184,.55); }

/* Teléfonos — azul/cian, mismo tono que badges de estado */
.ph-chips--phone .ph-badge {
  background: rgba(59, 130, 246, .12);
  border-color: rgba(59, 130, 246, .28);
  color: #93c5fd;
}
.ph-chips--phone .ph-badge i { color: #93c5fd; opacity: .8; }

/* Internos y correos — mismo tono slate neutro */
.ph-chips--internal .ph-badge,
.ph-chips--email .ph-badge {
  background: rgba(100, 116, 139, .15);
  border-color: rgba(100, 116, 139, .28);
  color: #cbd5e1;
}

/* ── Highlight de búsqueda ────────────────────────────────────────────────── */
.ph-hl {
  background: rgba(250, 204, 21, .28);
  color: #fde68a;
  border-radius: 2px;
}

/* ── Modal edición — sección de campo ───────────────────────────────────── */
.ph-required { color: #f87171; margin-left: .18rem; }

.ph-field-section { padding: .65rem .9rem .75rem; }

.ph-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .55rem;
}
.ph-field-header .form-label { color: rgba(203,213,225,.75); font-size: .8rem; font-weight: 500; }

.ph-add-btn {
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  font-size: .73rem;
  padding: .2rem .6rem;
  border: 1px solid rgba(148,163,184,.42);
  background: rgba(255,255,255,.05);
  color: rgba(203,213,225,.82);
  border-radius: .32rem;
  cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
  line-height: 1.4;
  white-space: nowrap;
  font-weight: 500;
}
.ph-add-btn i { font-size: .68rem; }
.ph-add-btn:hover  { border-color: rgba(99,179,237,.6); color: #7dd3fc; background: rgba(59,130,246,.12); }
.ph-add-btn:focus-visible { outline: 2px solid rgba(96,165,250,.5); outline-offset: 1px; }

/* ── Entradas dinámicas ──────────────────────────────────────────────────── */
.phones-entry-list { display: flex; flex-direction: column; gap: .35rem; }

.phones-entry-wrap {
  display: flex;
  flex-direction: column;
  border-radius: .42rem;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.04);
  /* sin overflow:hidden → permite que la sugerencia de email se muestre */
  transition: border-color .13s, background .13s;
}
.phones-entry-wrap:focus-within {
  border-color: rgba(96,165,250,.55);
  background: rgba(59,130,246,.05);
}

.phones-entry-row {
  display: flex;
  align-items: stretch;
  border-radius: calc(.42rem - 1px);
  overflow: hidden; /* clip de botones al border-radius */
}

.phones-drag-handle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 .42rem;
  cursor: grab;
  color: rgba(255,255,255,.28);
  font-size: .9rem;
  border-right: 1px solid rgba(148,163,184,.22);
  user-select: none;
  transition: color .13s, background .13s;
}
.phones-drag-handle:hover  { color: rgba(255,255,255,.65); background: rgba(255,255,255,.04); }
.phones-drag-handle:active { cursor: grabbing; }

.phones-entry-row .phones-entry-input {
  flex: 1 1 0;
  min-width: 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: .42rem .65rem;
  font-size: .84rem;
  color: #e2e8f0;
}
.phones-entry-row .phones-entry-input:focus    { box-shadow: none !important; outline: none; }
.phones-entry-row .phones-entry-input::placeholder { color: rgba(148,163,184,.35); }

.phones-highlight-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 .55rem;
  font-size: .76rem;
  line-height: 1;
  border: none;
  border-left: 1px solid rgba(148,163,184,.22);
  border-radius: 0;
  background: transparent;
  color: rgba(255,255,255,.28);
  cursor: pointer;
  transition: color .13s, background .13s;
}
.phones-highlight-toggle:hover:not(.has-color) {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
}
.phones-highlight-toggle.has-color { font-weight: 600; }

.phones-entry-remove {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 .55rem;
  font-size: .76rem;
  border: none;
  border-left: 1px solid rgba(148,163,184,.22);
  border-radius: 0;
  background: transparent;
  color: rgba(248,113,113,.55);
  cursor: pointer;
  transition: color .13s, background .13s;
}
.phones-entry-remove:hover { background: rgba(248,113,113,.12); color: #f87171; }

.phones-entry-ghost { opacity: .28; border-radius: .42rem; }

/* ── Fila marcada para eliminar (con opción de deshacer) ─────────────────── */
.ph-pending-delete {
  border-color: rgba(248,113,113,.35) !important;
  background:   rgba(248,113,113,.06) !important;
  opacity: .6;
}
.ph-pending-delete .phones-entry-input {
  text-decoration: line-through;
  color: rgba(148,163,184,.5) !important;
  pointer-events: none;
}
.ph-pending-delete .phones-drag-handle,
.ph-pending-delete .phones-highlight-toggle {
  pointer-events: none;
  opacity: .3;
}
.ph-pending-delete .phones-entry-remove {
  color: rgba(74,222,128,.65);
}
.ph-pending-delete .phones-entry-remove:hover {
  background: rgba(34,197,94,.12);
  color: #4ade80;
}

/* ── Color picker inline ─────────────────────────────────────────────────── */
.phones-color-picker {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .5rem .32rem 1.9rem;
  background: rgba(255,255,255,.02);
  border-top: 1px solid rgba(148,163,184,.1);
  flex-wrap: wrap;
}
.phones-color-picker.d-none { display: none !important; }

.ph-swatches {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Swatch "sin color / predeterminado" */
.ph-swatch--none {
  background: rgba(100,116,139,.2);
  border: 2px solid rgba(148,163,184,.35);
  color: rgba(148,163,184,.6);
  font-size: .7rem;
}
.ph-swatch--none:hover {
  background: rgba(100,116,139,.38);
  border-color: rgba(148,163,184,.65);
  color: #cbd5e1;
}
.ph-swatch--none.is-active {
  border-color: rgba(255,255,255,.75);
  background: rgba(100,116,139,.4);
  color: #e2e8f0;
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(255,255,255,.25);
}

.ph-swatch {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  color: #fff;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, border-color .12s;
  flex-shrink: 0;
}
.ph-swatch:hover {
  transform: scale(1.2);
  box-shadow: 0 0 0 3px rgba(255,255,255,.2);
}
.ph-swatch.is-active {
  border-color: rgba(255,255,255,.85);
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(255,255,255,.35);
}

.ph-custom-wrap {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  margin-left: .1rem;
  flex-shrink: 0;
}
.ph-custom-wrap:hover { color: rgba(255,255,255,.8); }
.ph-color-custom {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: .3rem;
  border: 1px solid rgba(255,255,255,.2);
  padding: 0;
  cursor: pointer;
  background: transparent;
}

/* ── Highlighted badge in list ───────────────────────────────────────────── */
.ph-badge--hl {
  font-weight: 600;
}

/* ── Modal detalle ───────────────────────────────────────────────────────── */
#phoneDetailContent { padding: 1rem; }

.phones-data-chips { display: flex; flex-wrap: wrap; gap: .2rem .35rem; align-items: center; }
.phones-data-chip  {
  display: inline-flex; align-items: center; gap: .22rem;
  font-size: .75rem; color: rgba(226, 232, 240, .82); white-space: nowrap;
}
.phones-data-chip i { font-size: .63rem; opacity: .6; flex-shrink: 0; }
.phones-data-chip--internal { color: rgba(147, 197, 253, .8); }
.phones-data-chip--internal i { color: rgba(147, 197, 253, .6); }

/* ── Secciones del listado (Fijados / Favoritos / Otros) ────────────────── */
.ph-section-label {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(148,163,184,.4);
  padding: .5rem .75rem .2rem;
  margin-top: .2rem;
}
.ph-section-label:first-child { margin-top: 0; }
.ph-section--pinned i { color: #60a5fa; }
.ph-section--favs   i { color: #f59e0b; }
.ph-section--rest   i { color: rgba(148,163,184,.4); }

/* ── Botones pin y favorito en la fila del listado ───────────────────────── */
.ph-action-pin,
.ph-action-fav {
  transition: color .15s;
  color: rgba(148,163,184,.45) !important;
}
.ph-action-pin.is-active,
.ph-action-fav.is-active       { opacity: 1 !important; }
.ph-action-pin.is-active       { color: #60a5fa !important; }
.ph-action-fav.is-active       { color: #f59e0b !important; }

@keyframes ph-action-saved {
  0%   { transform: scale(1.55); opacity: 1; }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1);    opacity: 1; }
}
.ph-action-saved { animation: ph-action-saved .32s cubic-bezier(.2,.8,.3,1) forwards; }

/* ── Toggles pin/fav — input-group del nombre ───────────────────────────── */
.ph-name-group .ph-ig-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .65rem;
  border: 1px solid rgba(148,163,184,.18);
  border-right: none;
  background: rgba(15,23,42,.92);
  color: rgba(148,163,184,.38);
  font-size: .84rem;
  cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
  line-height: 1;
}
.ph-name-group .ph-ig-btn:first-child {
  border-radius: .35rem 0 0 .35rem;
}
.ph-name-group .ph-ig-btn:hover:not(.is-active) {
  color: rgba(148,163,184,.72);
  background: rgba(255,255,255,.05);
}
.ph-name-group .ph-ig-btn--pin.is-active {
  color: #60a5fa;
  background: rgba(59,130,246,.18);
  border-color: rgba(96,165,250,.4);
}
.ph-name-group .ph-ig-btn--fav.is-active {
  color: #f59e0b;
  background: rgba(245,158,11,.15);
  border-color: rgba(245,158,11,.4);
}
/* El form-control hereda el borde del tema oscuro vía fv2-edit-modal */
.ph-name-group .form-control {
  border-left: 1px solid rgba(148,163,184,.18) !important;
}

/* ── Animaciones de polling (insert / update / remove) ──────────────────── */

/* Entrada suave de nuevo registro */
.ph-row--new {
  opacity: 0;
  transform: translateY(-6px);
}
.ph-row--new-show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .28s ease, transform .28s ease;
}

/* Flash de actualización */
@keyframes ph-row-flash {
  0%   { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.32); }
  100% { background: rgba(255,255,255,.018); border-color: rgba(148,163,184,.1); }
}
.ph-row--updated { animation: ph-row-flash 1.4s ease forwards; }

/* Salida de registro eliminado */
@keyframes ph-row-exit {
  to { opacity: 0; transform: translateY(-4px); }
}
.ph-row--removing {
  animation: ph-row-exit .22s ease forwards;
  pointer-events: none;
}

/* ── Sentinel de scroll infinito ────────────────────────────────────────── */
.ph-scroll-sentinel {
  display: flex;
  justify-content: center;
  padding: .6rem 0 1.8rem;
  font-size: .7rem;
  color: rgba(148,163,184,.35);
  letter-spacing: .04em;
  pointer-events: none;
  user-select: none;
}

/* ── Modal papelera / auditoría ─────────────────────────────────────────── */
.ph-trash-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Toolbar de filtros (admin) */
.ph-trash-toolbar {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  padding: .6rem .9rem;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(148,163,184,.1);
  flex-shrink: 0;
}
.ph-trash-search-wrap {
  display: flex;
  align-items: center;
  gap: .38rem;
  flex: 1 1 180px;
  min-width: 140px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.25);
  border-radius: .35rem;
  padding: .24rem .58rem;
}
.ph-trash-search-icon  { color: rgba(148,163,184,.45); font-size: .75rem; flex-shrink: 0; }
.ph-trash-search-input {
  border: none; background: transparent;
  color: #e2e8f0; font-size: .8rem; outline: none; flex: 1; min-width: 0;
}
.ph-trash-search-input::placeholder { color: rgba(148,163,184,.32); }
.ph-trash-search-clear {
  background: none; border: none; padding: 0 .1rem;
  color: rgba(148,163,184,.45); font-size: .72rem;
  cursor: pointer; line-height: 1; flex-shrink: 0;
  transition: color .12s;
}
.ph-trash-search-clear:hover { color: #f87171; }

.ph-trash-select,
.ph-trash-date {
  background: rgba(15,23,42,.92);
  border: 1px solid rgba(148,163,184,.25);
  border-radius: .35rem;
  color: #e2e8f0;
  font-size: .78rem;
  padding: .24rem .52rem;
  outline: none;
  color-scheme: dark;
}
.ph-trash-date-sep { color: rgba(148,163,184,.35); font-size: .75rem; }


.ph-trash-clear-btn {
  padding: .25rem .58rem;
  border-radius: .35rem;
  border: 1px solid rgba(148,163,184,.22);
  background: transparent;
  color: rgba(148,163,184,.6);
  font-size: .78rem;
  cursor: pointer;
  transition: border-color .13s, color .13s;
  white-space: nowrap;
}
.ph-trash-clear-btn:hover { border-color: rgba(148,163,184,.45); color: #cbd5e1; }

/* Lista de registros */
.ph-trash-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.18) transparent;
}
.ph-trash-list { display: flex; flex-direction: column; padding: .5rem; gap: .32rem; }

.ph-trash-loading,
.ph-trash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: 3rem 1rem;
  color: rgba(148,163,184,.45);
  font-size: .83rem;
  text-align: center;
}

.ph-trash-row {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(148,163,184,.12);
  border-radius: .45rem;
  padding: .58rem .8rem;
  display: flex;
  flex-direction: column;
  gap: .28rem;
  transition: background .12s;
}
.ph-trash-row:hover { background: rgba(255,255,255,.04); }

.ph-trash-row-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
  min-width: 0;
}
.ph-trash-name {
  font-size: .87rem;
  font-weight: 600;
  color: #cbd5e1;
  min-width: 0;
}
.ph-trash-date {
  font-size: .7rem;
  color: rgba(148,163,184,.5);
  flex-shrink: 0;
  white-space: nowrap;
}
.ph-trash-by strong { color: rgba(203,213,225,.55); }

.ph-trash-chips {
  display: flex;
  align-items: center;
  gap: .2rem;
  flex-wrap: wrap;
}
.ph-trash-chip-label {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(148,163,184,.42);
  min-width: 2.2rem;
  flex-shrink: 0;
}
.ph-trash-chip {
  padding: .07rem .4rem;
  border-radius: .3rem;
  background: rgba(100,116,139,.18);
  border: 1px solid rgba(100,116,139,.28);
  color: #94a3b8;
  font-size: .7rem;
  white-space: nowrap;
}
.ph-trash-chip--tag {
  border-radius: 999px;
  background: rgba(168,85,247,.12);
  border-color: rgba(168,85,247,.28);
  color: #d8b4fe;
}

.ph-trash-obs {
  font-size: .7rem;
  color: rgba(148,163,184,.45);
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Barra de filtro por tipo ────────────────────────────────────────────── */
.ph-trash-kind-bar {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem .9rem;
  border-bottom: 1px solid rgba(148,163,184,.1);
  background: rgba(255,255,255,.015);
  flex-shrink: 0;
}
.ph-trash-kind-btn {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .22rem .65rem;
  border-radius: .35rem;
  border: 1px solid rgba(148,163,184,.2);
  background: transparent;
  color: rgba(148,163,184,.55);
  font-size: .76rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
  white-space: nowrap;
}
.ph-trash-kind-btn i { font-size: .7rem; }
.ph-trash-kind-btn:hover:not(.is-active) {
  border-color: rgba(148,163,184,.38);
  color: #cbd5e1;
  background: rgba(255,255,255,.04);
}
.ph-trash-kind-btn.is-active {
  background: rgba(255,255,255,.07);
  border-color: rgba(148,163,184,.38);
  color: #e2e8f0;
  font-weight: 600;
}

/* Título + badge de tipo dentro de cada fila */
.ph-trash-row-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  min-width: 0;
}

.ph-trash-kind-badge {
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  padding: .1rem .45rem;
  border-radius: .3rem;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.ph-trash-kind-badge--contact {
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.3);
  color: #93c5fd;
}
.ph-trash-kind-badge--entry {
  background: rgba(168,85,247,.12);
  border: 1px solid rgba(168,85,247,.3);
  color: #d8b4fe;
}

/* Fila de entrada individual */
.ph-trash-row--entry { border-color: rgba(168,85,247,.15); }

.ph-trash-entry-value {
  padding: .08rem .42rem;
  border-radius: .3rem;
  border: 1px solid rgba(100,116,139,.28);
  background: rgba(100,116,139,.15);
  color: #cbd5e1;
  font-size: .8rem;
  font-weight: 500;
}
.ph-trash-entry-context {
  font-size: .68rem;
  color: rgba(148,163,184,.4);
  display: flex;
  align-items: center;
  gap: .22rem;
}
.ph-trash-restore-btn--entry {
  background: rgba(168,85,247,.1);
  border-color: rgba(168,85,247,.3);
  color: #d8b4fe;
}
.ph-trash-restore-btn--entry:hover {
  background: rgba(168,85,247,.2);
  border-color: rgba(168,85,247,.5);
}

.ph-trash-row-footer { display: flex; justify-content: flex-end; padding-top: .12rem; }
.ph-trash-restore-btn {
  display: inline-flex;
  align-items: center;
  padding: .22rem .65rem;
  border-radius: .35rem;
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.32);
  color: #6ee7b7;
  font-size: .74rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .13s, border-color .13s;
}
.ph-trash-restore-btn:hover { background: rgba(16,185,129,.2); border-color: rgba(16,185,129,.5); }

/* ── Control tamaño de texto ─────────────────────────────────────────────── */
.ph-font-size-ctrl {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(148,163,184,.32);
  border-radius: .35rem;
  overflow: hidden;
  flex-shrink: 0;
}
.ph-fs-btn {
  background: rgba(255,255,255,.04);
  border: none;
  color: rgba(203,213,225,.78);
  padding: 0.32rem 0.6rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: background .13s, color .13s;
  white-space: nowrap;
}
.ph-fs-btn:hover:not(:disabled)  { background: rgba(255,255,255,.09); color: #e2e8f0; }
.ph-fs-btn:disabled               { opacity: .3; cursor: default; }
.ph-fs-btn + .ph-fs-btn           { border-left: 1px solid rgba(148,163,184,.22); }

/* ── Tags en la lista principal ──────────────────────────────────────────── */
.ph-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .22rem;
  align-items: center;
}
.ph-tag {
  display: inline-flex;
  align-items: center;
  padding: .1rem .52rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: calc(.68rem * var(--ph-fs, 1));
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: .01em;
}
.ph-tag--neutral {
  background: rgba(100,116,139,.15);
  border-color: rgba(100,116,139,.28);
  color: #cbd5e1;
}

/* ── Observaciones en la lista ───────────────────────────────────────────── */
.ph-obs {
  font-size: calc(.72rem * var(--ph-fs, 1));
  color: rgba(148,163,184,.6);
  font-style: italic;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Vista compacta — Bootstrap 5.3 collapse nativo ─────────────────────── */

/* Chevron: oculto por defecto (se renderiza solo en modo compacto) */
.ph-compact-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  background: none;
  border: none;
  padding: 0;
  border-radius: 50%;
  color: rgba(148,163,184,.4);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.ph-compact-toggle:hover             { color: #93c5fd; background: rgba(147,197,253,.1); }
.ph-compact-toggle i                 { font-size: .68rem; transition: transform .2s ease; }
/* Bootstrap actualiza aria-expanded → rotamos el chevron */
.ph-compact-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.ph-compact-toggle[aria-expanded="true"]   { color: rgba(147,197,253,.7); }

/* En modo compacto el botón está visible (se inyecta sin d-none en renderPhoneRow) */
.ph-layout--compact .ph-compact-toggle { display: inline-flex; }

/* Botón del toolbar activo */
#phonesLayoutToggle.is-active { color: #93c5fd !important; }

/* ── Label de entrada (input-group) ─────────────────────────────────────── */
.phones-entry-row .phones-entry-label {
  flex: 0 0 145px;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-right: 1px solid rgba(148,163,184,.2) !important;
  color: rgba(148,163,184,.32);
  font-size: .8rem;
  padding: .42rem .55rem;
  transition: color .12s;
}
.phones-entry-row .phones-entry-label:not(:placeholder-shown) { color: #e2e8f0; }
.phones-entry-row .phones-entry-label:focus    { box-shadow: none !important; outline: none; }
.phones-entry-row .phones-entry-label::placeholder { color: rgba(148,163,184,.28); font-style: italic; }

/* Label en los chips del listado */
.ph-chip-name {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .65;
  margin-right: .1rem;
  white-space: nowrap;
}

/* ── Validación de email en formulario ───────────────────────────────────── */
.ph-email-invalid-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 .45rem;
  border: none;
  border-left: 1px solid rgba(148,163,184,.22);
  background: transparent;
  color: rgba(248,113,113,.72);
  font-size: .72rem;
  line-height: 1;
  cursor: default;
}

/* ── Tooltip flotante de validación de email ─────────────────────────────── */
.ph-email-tooltip {
  position: fixed;
  z-index: 9050;
  background: #1e293b;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: .52rem;
  padding: .55rem .75rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
  min-width: 170px;
  max-width: 290px;
  pointer-events: auto;
}
.ph-email-tip-label {
  display: flex;
  align-items: center;
  gap: .28rem;
  font-size: .72rem;
  color: rgba(148,163,184,.65);
  margin-bottom: .35rem;
}
.ph-email-tip-label i { font-size: .7rem; }
.ph-email-tip-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.ph-email-tip-val {
  font-size: .8rem;
  color: #e2e8f0;
  font-weight: 500;
  word-break: break-all;
  flex: 1 1 0;
}
.ph-email-tip-apply {
  background: rgba(59,130,246,.18);
  border: 1px solid rgba(59,130,246,.42);
  border-radius: .32rem;
  color: #93c5fd;
  font-size: .72rem;
  font-weight: 600;
  padding: .2rem .55rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s;
  white-space: nowrap;
}
.ph-email-tip-apply:hover { background: rgba(59,130,246,.32); }

.ph-email-tip-advice {
  display: flex;
  align-items: flex-start;
  gap: .28rem;
  margin-top: .38rem;
  padding-top: .35rem;
  border-top: 1px solid rgba(148,163,184,.14);
  font-size: .7rem;
  color: rgba(148,163,184,.6);
  line-height: 1.45;
}
.ph-email-tip-advice i { font-size: .65rem; flex-shrink: 0; margin-top: .1rem; }

/* Badge de email inválido en la lista principal */
.ph-chip-invalid {
  color: rgba(248,113,113,.65);
  font-size: .58rem;
  margin-left: .12rem;
  flex-shrink: 0;
}

/* (tag input en formulario — usa phones-entry-wrap/row igual que teléfonos) */

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1023.98px) {
  .ph-badge { font-size: calc(0.72rem * var(--ph-fs, 1)); padding: .18rem .5rem; }
}

/* 768px–991px: pantallas medianas-chicas */
@media (max-width: 991.98px) {
  #pills-telefonos { height: calc(100vh - 95px); }
  #pills-telefonos.show.active { height: calc(100vh - 95px) !important; }
  .ph-row  { padding: .44rem .62rem; }
  .ph-badge { font-size: calc(0.71rem * var(--ph-fs, 1)); padding: .17rem .48rem; }
  #pills-telefonos .tab-section-header .btn-label { display: none; }
}

@media (max-width: 767.98px) {
  #pills-telefonos { height: calc(100vh - 80px); }
  #pills-telefonos.show.active { height: calc(100vh - 80px) !important; }
  .ph-row   { padding: .42rem .55rem; margin: 0 .3rem .22rem; gap: .2rem; }
  .ph-name  { font-size: calc(0.84rem * var(--ph-fs, 1)); }
  .ph-badge { font-size: calc(0.69rem * var(--ph-fs, 1)); padding: .16rem .44rem; }
  .ph-font-size-ctrl { display: none; }
}