/* =========================
   Vars + Reset
========================= */
:root{
  --bg:#0b1220;            /* fondo principal */
  --panel:#0e1627;         /* panel cards */
  --card:#111b2f;          /* cards internas */
  --muted:#9aa4b2;
  --text:#e5edf5;
  --border:rgba(255,255,255,.08);
  --accent:#22d3ee;        /* cyan */
  --accent-strong:#06f0ff; /* botón */
  --ok:#22c55e;
  --danger:#ef4444;
  --badge:#1b2437;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --footer-h: 56px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; color:var(--text); background:linear-gradient(180deg,#091019,#0b1220 30%, #0b1220);
  font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}


:root { --gap-nav-wrap: 1px; }

.wrap{
  padding-top: var(--gap-nav-wrap); /* crea el mismo espacio bajo la nav */
}

/* =========================
   Navbar mínima
========================= */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; background:rgba(9,16,25,.6); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:8px; font-weight:600; }
.dot{ width:10px; height:10px; background:#16f2ff; border-radius:999px; display:inline-block; box-shadow:0 0 10px #16f2ff88; }
.pill{ padding:6px 12px; border:1px solid var(--border); border-radius:20px; color:#cbd5e1; background:#0f182b; }

/* Botones */
.btn{
  padding:8px 12px; border-radius:10px; border:1px solid var(--border);
  background:#0f182b; color:#cbd5e1; cursor:pointer; transition:transform .08s ease, box-shadow .12s ease, background .12s;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.25); }
.btn-accent{ background:var(--accent-strong); color:#00313a; border-color:transparent; }
.btn-accent:hover{ box-shadow:0 8px 20px rgba(6,240,255,.25); }

/* =========================
   Contenedor + Grid 12 (3-3-6)
========================= */
.wrap{
  /* Usá todo el ancho sin “playas” */
  max-width:none; width:100%;
  padding-inline: clamp(8px, 1.2vw, 16px);
  padding-block:16px;
  overflow-x: hidden;  /* ← FIX SAFARI: previene overflow horizontal */
}
.app-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap: clamp(12px, 1vw, 24px);
}

/* Pegamos la columna del chat a la derecha eliminando el gap a su izquierda */
.col-chat {
  margin-left: auto !important;
  margin-right: 0px !important;
}
  
.col-identidades{ grid-column:1 / span 3; min-width: 0; }  /* ← FIX SAFARI */
.col-ambitos    { grid-column:4 / span 3; min-width: 0; }  /* ← FIX SAFARI */
.col-chat       { grid-column:7 / span 6; min-width: 0; }  /* ← FIX SAFARI */

/* =========================
   Cards comunes
========================= */
.card, .id-card, .ambito-board, .chat{
  background:linear-gradient(180deg, #0f1a2b, #0e1627 60%);
  border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
}
.id-card h4{ margin:12px 16px; font-size:16px; letter-spacing:.2px; }

/* =========================
   Buscador + Tabs User/Domain
========================= */
.panel-header{ padding:12px; border-bottom:1px solid var(--border); }
.search{
  display:flex; align-items:center; gap:8px; background:#0b1426; border:1px solid var(--border);
  padding:10px 12px; border-radius:12px;
}
.search span{ opacity:.8; }
.search input{
  flex:1; border:none; outline:none; color:var(--text); background:transparent;
  font-size:14px;
}
.search-tabs{ display:flex; gap:8px; margin-top:10px; }
.search-tabs .tab{
  flex:0 0 auto; padding:6px 12px; border:1px solid var(--border);
  border-radius:999px; background:#0b1426; color:#cbd5e1; cursor:pointer;
}
.search-tabs .tab.active{
  background:#111827; color:var(--accent); border-color:#22d3ee80;
  box-shadow:0 0 0 1px #22d3ee40 inset;
}

/* =========================
   Identidades (accordion)
========================= */
.id-accordion{ padding:10px; }
.id-item{ background:var(--card); border:1px solid var(--border); border-radius:12px; margin:10px 0; overflow:hidden; }
.id-summary{
  display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; user-select:none;
}
.id-summary:hover{ background:#0f1a2b; }
.id-chev{ opacity:.7; }
details[open] .id-chev{ transform:rotate(90deg); transition:transform .12s ease; }
.id-name{ font-weight:600; }
.id-badge{
  margin-left:auto; font-size:12px; color:#cbd5e1; background:#0b1426; padding:4px 8px; border-radius:999px; border:1px solid var(--border);
}
.id-body{ display:flex; flex-wrap:wrap; gap:10px; padding:8px 14px 12px; color:#cbd5e1; }
.id-field{ background:#0b1426; padding:6px 8px; border-radius:8px; border:1px solid var(--border); }
.id-actions{ display:flex; gap:10px; padding:10px 14px 14px; }

/* =========================
   Ámbitos / Badges
========================= */
.ambito-board{ padding:12px; }
.ambito-card{
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px;
  margin:12px 0;
}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--badge); border:1px solid var(--border); color:#cbd5e1;
  padding:6px 10px; border-radius:999px; font-size:12px;
}

/* =========================
   Chat
========================= */
.col-chat .chat
.ctx-badge{
  position:relative; top:10px; left:10px;
  display:inline-flex; align-items:center; gap:8px;
  background:#0b1426; border:1px solid var(--border); color:#cbe7ff;
  padding:6px 10px; border-radius:999px; box-shadow:0 4px 16px rgba(0,0,0,.25);
}
/* Botón info contexto */

.ctx-info-btn {
  all: unset;
  cursor: pointer;
  margin-left: 6px;
  font-size: 14px;
  color: #7dd3fc;
}

.ctx-info-btn:hover {
  opacity: .8;
}

/* Panel desplegable */

.ctx-extra {
  margin: 8px 12px;
  padding: 8px 10px;
  background: #0b1426;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  color: var(--muted);
}

/* Utilidad */

.hidden {
  display: none !important;
}

.msgs{
  flex:1; overflow:auto; margin:12px; border-radius:12px; background:radial-gradient(1200px 600px at 80% -40%, rgba(34,211,238,.06), transparent 60%);
  border:1px solid var(--border);
}
.chat-input{
  display:flex; flex-direction: column; gap:0; padding:0; border-top:1px solid var(--border);
  background:linear-gradient(180deg, #0d1728, #0b1426 70%);
  border-radius:0 0 14px 14px;
}

.chat-input-inner {
  display:flex; gap:10px; padding:10px 12px; align-items: center;
}

.chat-input input{
  flex:1; border:none; outline:none; padding:10px 12px; border-radius:10px;
  background:#0b1426; color:var(--text); border:1px solid var(--border);
}

/* Mensajes (opcional básico) */
.message{ padding:10px 14px; margin:10px 12px; border-radius:12px; max-width:70%; }
.message.me{ margin-left:auto; background:#15324a; }
.message.other{ background:#0f1a2b; }

/* Scrollbar bonito */
.msgs::-webkit-scrollbar{ width:10px; }
.msgs::-webkit-scrollbar-thumb{ background:#1f2a3d; border-radius:8px; }
.msgs::-webkit-scrollbar-track{ background:transparent; }

/* =========================
   Utilidades
========================= */
.hidden{ display:none!important; }
.center{ display:flex; align-items:center; justify-content:center; }

/* =========================
   Responsive
========================= */
@media (max-width: 1200px){
  .wrap{ padding-inline: clamp(8px, 2vw, 12px); }
}

@media (max-width: 768px){
  .col-chat{ padding-top: 6px; }
}

/* =========================
   Modo claro rápido (si algún día lo alternás)
========================= */
/* =========================
   🌞 Modo claro · Sobrio / global
   ========================= */
body.theme-light{
  /* Fondo general gris suave */
  --bg:           #eef1f6;      /* gris muy claro */
  --panel:        #ffffff;      /* paneles blancos */
  --card:         #ffffff;

  /* Texto */
  --text:         #111827;
  --text-muted:   #6b7280;

  /* Bordes */
  --border:       #d8e0ec;
  --badge:        #e6f3ff;

  /* Celeste bandera como acento */
  --accent:        #00AEEF;     /* celeste bandera */
  --accent-strong: #0284c7;     /* celeste un poco más oscuro p/ botones */
  --accent-weak:   rgba(0,174,239,.18);

  background: #eef1f6;
}

/* =========================
   NAVBAR · claro sobrio
   ========================= */
body.theme-light .nav {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 4px rgba(15,23,42,.06);
}

/* Punto indicador */
body.theme-light .dot {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-weak);
}

/* Pill de identidad */
body.theme-light .pill {
  background: #f3f4ff;
  color: var(--text);
  border-color: #d1d5eb;
}

/* Botón dentro de la nav (My domain / Claro-Oscuro) */
body.theme-light .nav .btn {
  background: #f3f4ff;
  border-color: #d1d5eb;
  color: #111827;
}
body.theme-light .nav .btn:hover {
  background: #e5e7ff;
}

/* =========================
   Botones generales
   ========================= */
body.theme-light .btn{
  background: #f9fafb;
  color: #111827;
  border-color: #d1d5db;
}
body.theme-light .btn:hover{
  background: #eef2ff;
}

body.theme-light .btn-accent{
  background: var(--accent-strong);
  color: #ffffff;
  border-color: var(--accent-strong);
}
body.theme-light .btn-accent:hover{
  filter: brightness(1.05);
}

/* =========================
   Panels en MODO CLARO
   ========================= */

/* Cards grandes: identidades, ámbitos, chat */
body.theme-light .card,
body.theme-light .id-card,
body.theme-light .amb-card,
body.theme-light .ambito-board,
body.theme-light .chat{
  background: linear-gradient(
    180deg,
    #ffffff,
    #f5f7fb 70%
  );
  border-color: #e5e7eb;
}

/* Items dentro de las cards (accordion, etc.) */
body.theme-light .id-item,
body.theme-light .amb-item{
  background: #f9fafb;
  border-color: #e5e7eb;
}

/* Summary de cada item (fila clickable) */
body.theme-light .id-summary,
body.theme-light .amb-summary{
  background: #f9fafb;
}
body.theme-light .id-summary:hover,
body.theme-light .amb-summary:hover{
  background: #eef2ff;
}

body.theme-light details[open] > .id-summary,
body.theme-light details[open] > .amb-summary{
  background: #e5ecff;
  border-color: var(--accent-weak);
}

/* Badges (estado activo, etc.) */
/* Badges “activo” en celeste suave */
body.theme-light .amb-badge,
body.theme-light .id-badge{
  background: var(--badge);
  border-color: rgba(0,174,239,.35);
  color: #02608b;
}

/* =========================
   Inputs coherentes
   ========================= */
body.theme-light .search,
body.theme-light .id-field,
body.theme-light .chat-input input{
  background: #f9fafb;
  border-color: #d1d5db;
  color: var(--text);
}

/* Tabs User / Domain */
body.theme-light .search-tabs .tab{
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #374151;
}
/* Tabs User/Domain con celeste */
body.theme-light .search-tabs .tab.active{
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}
/* Burbujas de mensaje propios en celeste bandera */
body.theme-light .msg-owner .msg-body{
  background: #5e5e5e;
  color: #ffffff;
}

/* Emoji-only en tema claro: sin burbuja */
body.theme-light .msg-body.msg-body--emoji {
  background: transparent;
  color: inherit;
}

/* ===== SOLO EMOJI: estilos neutrales =====*/
body.theme-light .msg-body.msg-body--emoji .msg-text {
  color: inherit;
}


/* =========================
   Ajustes finos MODO CLARO
   (inputs chat, buscadores, hovers)
   ========================= */

/* --- Barra de input del chat --- */
body.theme-light .chat-input{
  background: #f3f4f6;                       /* gris claro suave */
  border-top: 1px solid var(--border);
  border-radius: 0 0 14px 14px;
}

body.theme-light .chat-input input{
  background: #e5edf5;                       /* gris-azul suave */
  border: 1px solid rgba(148,163,184,.7);
  color: var(--text);
}

/* Botones del chat (clip, mic, send) */
body.theme-light .chat-btn{
  background: #e5edf5;
  border: 1px solid rgba(148,163,184,.7);
  color: #0f172a;
}
body.theme-light .chat-btn:hover{
  background: #dde7f4;
}

/* Botón de enviar: acento celeste */
body.theme-light .chat-btn-send{
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #ffffff;
}
body.theme-light .chat-btn-send:hover{
  filter: brightness(1.05);
}

/* --- Header de búsqueda (identidades / ámbitos) --- */
body.theme-light .amb-panel-header{
  background: #f3f4f6;
  border-bottom: 1px solid var(--border);
}

body.theme-light .amb-search{
  background: #e5edf5;
  border: 1px solid rgba(148,163,184,.7);
  border-radius: 999px;
  padding-inline: 10px;
}
body.theme-light .amb-search input{
  background: transparent;
  color: var(--text);
}

/* Tabs User / Domain (un poco más de feedback) */
body.theme-light .search-tabs .tab:hover:not(.active){
  background: #e0e7f0;
}

/* --- Hover en identidades (summary) --- */
body.theme-light .id-summary{
  background: #f9fafb;
  border-radius: 10px;
}
body.theme-light .id-summary:hover{
  background: #e5edf5;                       /* highlight suave */
}
body.theme-light details[open] > .id-summary{
  background: #dde9ff;
  border: 1px solid var(--accent-weak);
}
/* =========================
   Panel de mensajes · Modo claro
   ========================= */

/* Fondo del área donde se ven los mensajes */
body.theme-light .msgs{
  background: #e5edf5;                 /* gris-azul suave */
  border-color: #d1d5db;
}

/* Opcional: un leve gradiente para más profundidad */
body.theme-light .col-chat .chat{
  background: linear-gradient(
    180deg,
    #f5f7fb 0%,
    #e5edf5 30%,
    #dde4f0 100%
  );
}

























/* --- Head de Ámbitos con botón --- */
.ambito-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid var(--border);
}
.btn-ghost-sm{
  padding:6px 10px; border-radius:8px; border:1px solid var(--border);
  background:#0b1426; color:#cbd5e1; cursor:pointer;
}

/* --- Animación/colapso del medio --- */
/* Estado normal (3-3-6) ya existente */
.col-identidades{ grid-column:1 / span 3; }
.col-ambitos    { grid-column:4 / span 3; transition:transform .18s ease, opacity .18s ease, max-height .18s ease; }
.col-chat       { grid-column:7 / span 6; position:relative; padding-right: 0; }

/* Estado colapsado: ocultamos Ámbitos y expandimos Chat */
.ambitos-collapsed .col-ambitos{
  pointer-events:none;
  opacity:0;
  transform:translateX(-12px);           /* PC: pliega hacia la izquierda */
  display:none;                           /* saca del flujo para que el chat se expanda */
}
.ambitos-collapsed .col-chat{
  grid-column:4 / span 9;                 /* ocupa 4..12 (9/12) */
  padding-right: 0;
}

/* Handle para reabrir (apoyado en el borde izquierdo del chat) */
.ambitos-handle{
  position:absolute; left:-10px; top:56px;
  transform:translateX(-100%);
  padding:6px 8px; border-radius:8px;
  background:#0b1426; border:1px solid var(--border);
  color:#cbd5e1; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.hidden{ display:none!important; }

/* --- Comportamiento en pantallas pequeñas --- */
/* --- Comportamiento en pantallas pequeñas --- */
@media (max-width: 768px){
  .ambitos-collapsed .col-ambitos{
    display:none;
    opacity:0; transform:translateY(-12px);
  }
  .ambitos-collapsed .col-chat{
    grid-column:1 / -1;
  }

  .ambitos-handle{
    left:10px; top:-10px; transform:none;
  }
}



.id-summary{ cursor:default; }
.id-chev-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; padding:0 2px; border:none; background:transparent; color:inherit; cursor:pointer;
  transition:transform .12s ease, opacity .12s ease;
}
details[open] .id-chev-btn{ transform:rotate(90deg); }


/* === Mobile: carrusel horizontal con snap === */
/* === Mobile: carrusel horizontal con snap === */
@media (max-width: 768px) {
  .wrap {
    padding-inline: 0;
  }

  .col-chat {
    padding-left: 0;
    padding-right: 0;
  }

 /* 1. Bloqueamos el scroll del cuerpo para que no "baile" la pantalla */
  html, body {
    height: 100%;
    overflow: hidden;
    position: fixed; /* Evita tirones en iOS */
    width: 100%;
  }
  /* 1) Contenedor principal: que scrollee normal en Y */
  .wrap {
    overflow-x: hidden;
    overflow-y: visible;    /* 👈 ya no tiene scroll propio */
  }

  /* 2) Fila deslizable en X, sin altura fija */
  .app-grid {
    display: flex;
    flex-direction: row;

    overflow-x: auto;       /* swipe lateral entre paneles */
    overflow-y: hidden;     /* no scrollea en vertical, eso lo hacen las columnas */

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    min-height: 0;          /* importante para que los hijos calculen bien */
  }

  /* 3) Cada panel ocupa el ancho de la pantalla, altura automática */
   /* 4. LAS COLUMNAS (Cada "slide" del carrusel) */
  .col-identidades,
  .col-ambitos,
  .col-chat {
    /* Forzamos que cada una sea exactamente del ancho de la pantalla */
    flex: 0 0 100vw !important; 
    min-width: 100vw;
    height: 100%;
    
    /* Scroll vertical propio para el contenido */
    overflow-y: auto !important;
    overflow-x: hidden;
    
    scroll-snap-align: start;
    scroll-snap-stop: always;
    
    /* Muy importante para que el scroll horizontal no se bloquee por el vertical */
    touch-action: pan-y; 
    overscroll-behavior-y: contain;
  }
}




@media (max-width: 768px) {
  /* Contenedor de mensajes */
  #msgs {
    /* IMPORTANTE: pan-y permite scroll vertical del chat, 
       pero evita que el navegador intente scrollear horizontalmente 
       el contenedor PADRE (.app-grid) desde aquí adentro. */
    touch-action: pan-y !important; 
    overscroll-behavior-y: contain;
    position: relative;
  }

  /* El mensaje individual que tiene el swipe de respuesta */
  .msg {
    /* Aquí permites que tu JS de swipe-reply funcione, 
       pero bloqueas que el gesto llegue al fondo de la app */
    touch-action: pan-y; 
    user-select: none;
  }
}




/* oculta barras de scroll cuando el JS está scrolleando */
.hide-scrollbar, 
.hide-scrollbar * {
  scrollbar-width: none !important;        /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar,
.hide-scrollbar *::-webkit-scrollbar {
  display: none !important;                /* Chrome / Edge / Safari */
}


/* =========================
   panel-header en MODO CLARO
   ========================= */
body.theme-light .id-card .panel-header,
body.theme-light .amb-card .panel-header,
body.theme-light .panel-header{
  background: #f3f4f6;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

/* Buscador dentro del panel (identidades/ámbitos) */
body.theme-light .id-card .panel-header .search,
body.theme-light .amb-panel-header .amb-search{
  background: #e5edf5;
  border: 1px solid rgba(148,163,184,.7);
}









/* ===== MyDomain SOLO en modo claro ===== */
body.theme-light .my-domain-left,
body.theme-light .my-domain-right{
  background: #f3f4f6;          /* gris suave, mismo tono que el resto */
  border-right: 1px solid #e5e7eb;
  color: var(--text);
}

/* Acordeón de ámbitos dentro de MyDomain en claro */
body.theme-light .my-domain-left .amb-summary{
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

body.theme-light .my-domain-left details[open] > .amb-summary{
  background: #e5ecff;
  border-color: var(--accent-weak);
}