/* bloqueá el scroll global */
html, body { height:100%; overflow:hidden; }

/* padres sin overflow y con altura real de viewport */
.app, .main, .content, .col-identidades{
  height: 100dvh;        /* usa 100vh si tu navegador no soporta dvh */
  min-height: 0;
  overflow: hidden;
}

/* tarjeta en GRID: [título] [buscador] [lista (scroll)] [footer] */
:root{
  --topbar-h: 70px;    /* ajustá a tu navbar */
  --card-bg: #0b1222;
}

.id-card{
  display: grid;
  grid-template-rows: auto auto 1fr auto;   /* ← clave */
  height: calc(100dvh - var(--topbar-h));
  max-height: calc(100dvh - var(--topbar-h));
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;     /* el único scroll vive en la fila 3 */
  box-sizing: border-box;
}

/* título */
.id-card > h4{
  margin: 12px 12px 8px;
}

/* buscador */
.id-card .panel-header{
  padding: 8px 12px;
  border-top: 1px solid transparent;  /* para separar si querés */
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
}

/* LISTA scrolleable (fila 3) */
.id-accordion{
  min-height: 0;        /* imprescindible en grid/flex para permitir scroll */
  overflow: auto;       /* único scroll */
  padding: 8px 12px;
  scroll-behavior: smooth;
}

/* FOOTER fijo (fila 4) */
.id-footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--card-bg);
  box-shadow: 0 -6px 12px rgba(0,0,0,.25);
  /* sin sticky, sin absolute: el grid lo mantiene siempre visible */
}

/* opcional: scrollbar más prolija */
.id-accordion::-webkit-scrollbar{ width:10px; }
.id-accordion::-webkit-scrollbar-thumb{ background:#1f2a44; border-radius:8px; }
.id-accordion{ scrollbar-width: thin; }



/* === Layout deslizante para móvil === */
@media (max-width: 768px){

  .layout-chat {                /* tu contenedor general */
    display: flex;
    width: 300%;                /* tres paneles lado a lado */
    transition: transform .4s ease-in-out;
  }

  .col-identidades,
  .col-ambitos,
  .col-chat {
    width: 100%;
    flex-shrink: 0;
    height: 100dvh;
    min-height: 100%;
    overflow: hidden;
  }

  /* Estado inicial → muestra Identidades */
  html:not(.slide-ambitos):not(.slide-chat) .layout-chat {
    transform: translateX(0);
  }

  /* Al abrir Ámbitos */
  html.slide-ambitos .layout-chat {
    transform: translateX(-100%);
  }

  /* Al abrir Chat */
  html.slide-chat .layout-chat {
    transform: translateX(-200%);
  }
}




/* El card de Identidades es una columna: header arriba, lista ocupa el resto, footer abajo */
.id-card{
  display: flex;
  flex-direction: column;
  min-height: 0;  /* clave para que el hijo pueda scrollear */
}

/* Las partes superiores NO deben “empujar” */
.id-card .panel-header,
.id-card .search,
.id-card .search-tabs{
  flex: 0 0 auto;
}

/* La lista es el área scrolleable que arranca ARRIBA */
.id-accordion{
  flex: 1 1 auto;          /* ocupa el espacio libre */
  min-height: 0;           /* permite overflow en flex */
  overflow: auto;          /* scroll vertical acá */
  display: block !important;
  margin-top: 0 !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
  align-items: stretch !important;
}

/* Si tenés un footer dentro de la tarjeta, que no empuje */
.id-footer{
  flex: 0 0 auto;
}

/* Por si algún utilitario te lo estaba tirando al fondo */
.id-accordion, .id-accordion *{
  margin-block-end: 0 !important;   /* evita márgenes colapsados que “bajan” */
}




















.identity-context-menu {
  position: absolute;
  z-index: 9999;
  display: none;
  min-width: 230px;
  background: #020617;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.85);
  padding: 0.25rem 0;
  font-size: 0.78rem;
}

.identity-context-menu button {
  width: 100%;
  padding: 0.45rem 0.8rem;
  background: transparent;
  border: none;
  color: #e5e7eb;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.identity-context-menu button:hover {
  background: rgba(15, 23, 42, 0.85);
}

/* Botón ⋮ en cada identidad */
.id-menu-btn {
  margin-left: auto;
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  padding: 0 0.25rem;
  font-size: 1rem;
}

.id-menu-btn:hover {
  color: #e5e7eb;
}







/* =========================
   DPIA – Quitar separadores de contactos
========================= */

/* Card individual */
.id-item {
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 6px;   /* separación visual sin líneas */
  border-radius: 10px;
  display: block;
}

.id-item-agent {
  border: 1px solid rgba(56, 189, 248, 0.22) !important;
  background: linear-gradient(180deg, rgba(14, 24, 44, 0.94), rgba(8, 18, 34, 0.92));
}

.id-summary-agent {
  background: rgba(56, 189, 248, 0.07);
}

.id-badge-agent {
  background: rgba(56, 189, 248, 0.14);
  color: #bfefff;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}

/* Fila clickable */
.id-summary {
  border: none !important;
}

/* Si el details mete línea */
.id-item details,
.id-item summary {
  border: none !important;
   height: auto;
}

/* Evita divisores fantasmas */
.id-accordion > * {
  border-bottom: none !important;
}


/* ==============================
   Avatar Identidades
============================== */
/* ==============================
   Avatar DPIA Badge (FINAL)
============================== */

.id-chev-btn {
  all: unset;
  cursor: pointer;

  min-width: 48px;
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;

  border-radius: 100%;
  overflow: hidden;

  background: linear-gradient(160deg,#0e1b30,#0b1222);

  /* BORDE CON INSET (NO padding) */
  box-shadow:
    inset 0 0 0 2px #07d4f355,
    0 10px 20px rgba(0,0,0,.4);

  transition: transform .18s ease, box-shadow .18s ease;

  flex-shrink: 0;
}
 


/* Hover */

.id-chev-btn:hover {
  transform: scale(1.04);
  box-shadow:
    0 0 0 2px #22d3ee,
    0 0 12px #22d3ee55;
}

/* Avatar imagen */

.id-avatar {
  width: 100%;
  height: 100%;

  object-fit: cover;
  border-radius: 100%;

  display: block;
}


/* Indicador online */

.id-chev-btn::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 2px;

  width: 11px;
  height: 11px;

  background: #22ff88;

  border-radius: 100%;
  border: 2px solid #0b1222;

  box-shadow: 0 0 6px #22ff8899;
}

/* ==============================
   Summary layout (ALTURA REAL)
============================== */

.id-avatar-upload {
  margin-top: 6px;
}

.avatar-upload-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  background: #0b1426;
  border: 1px solid var(--border);
  border-radius: 10px;

  padding: 6px 10px;

  font-size: 13px;
  color: #7dd3fc;

  cursor: pointer;
}

.avatar-upload-label:hover {
  background: #12203a;
}

/* Ocultamos input real */
.avatar-input {
  display: none;
}


/* ==============================
   Evitar compresión de details
============================== */


/* Avatar más alto SIN cambiar summary */

/* ==============================
   ID BADGE CON STAR
============================== */
.id-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.id-badge:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* Estrellita roja cuando está starred */
.id-badge.starred::before {
  content: '⭐';
  font-size: 12px;
  color: #ef4444;
  display: inline-block;
  animation: starPop 0.4s ease-out;
}

@keyframes starPop {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}