/* Apéndice «Contactos» (chat entre usuarios) — Simón, 07/10/2026. Mismo archivo en Javi 1.2 y en Súper Javi.
   Todo va bajo #panel-contactos: no toca ninguna regla del chat. Usa las variables de color de cada app. */
#panel-contactos { --c-carbon:#0a0607; font-family:var(--f-texto,system-ui,sans-serif); color:var(--fg); }
#panel-contactos *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
#panel-contactos [hidden]{ display:none!important }
#panel-contactos button{ font:inherit; color:inherit; cursor:pointer; border:none; background:none; padding:0 }
#panel-contactos button:disabled{ opacity:.4 }
#panel-contactos svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
#panel-contactos input{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--borde); background:rgba(0,0,0,.35); color:var(--fg); font:inherit; outline:none }
#panel-contactos input:focus{ border-color:var(--oro) }
#panel-contactos .ct-v{ flex:1; min-height:0; display:flex; flex-direction:column }
#panel-contactos .ct-primario{ background:linear-gradient(180deg,var(--rojo2),var(--rojo)); border:1px solid var(--oro); border-radius:12px; padding:0 16px; min-height:42px; font-weight:600 }
#panel-contactos .ct-nota{ color:var(--mut); font-size:13px; margin:8px 0 14px }
#panel-contactos .ct-sesion{ margin:auto; padding:24px; text-align:center; color:var(--mut) }
#panel-contactos{ position:relative }
#panel-contactos .ct-aviso-desliz{ color:var(--mut); font-size:12px; text-align:center; padding:4px 0 8px }
/* escritorio (>=980 px): cajón a la derecha que abre el botón 👥 de la cabecera */
@media (min-width:980px){
  #panel-contactos{ display:none!important; position:fixed; top:0; right:0; bottom:0; width:min(440px,100vw); z-index:55; background:var(--carbon,#0a0607); border-left:1px solid var(--borde); box-shadow:-10px 0 40px rgba(0,0,0,.6) }
  #panel-contactos.ct-abierto{ display:flex!important }
}
/* lista */
#panel-contactos #ct-lista{ overflow-y:auto; padding-bottom:20px; }
#panel-contactos .ct-barra{ display:flex; align-items:center; padding:max(12px,env(safe-area-inset-top)) 16px 0; }
#panel-contactos #ct-lista > *{ flex:none }
#panel-contactos .ct-espacio{ flex:1 }
#panel-contactos .ct-redondo{ width:46px; height:46px; min-width:46px; border-radius:50%; background:rgba(60,22,26,.75); border:1px solid var(--borde); font-size:24px; display:flex; align-items:center; justify-content:center; padding:0; line-height:1 }
#panel-contactos .ct-redondo.ct-claro{ background:linear-gradient(180deg,var(--oro2),var(--oro)); color:#2a0a0d; border-color:var(--oro3); }
#panel-contactos .ct-titulo{ font:700 34px var(--f-texto); color:var(--oro2); margin:10px 16px 10px; letter-spacing:.5px }
#panel-contactos .ct-buscar{ display:flex; align-items:center; gap:8px; margin:0 16px 12px; padding:0 14px; height:42px; border-radius:21px; background:rgba(60,28,30,.55); border:1px solid rgba(220,171,36,.12); color:var(--mut) }
#panel-contactos .ct-buscar input{ border:none; background:none; padding:0; height:100%; font-size:16px }
#panel-contactos .ct-filtros{ display:flex; gap:8px; padding:0 16px 10px; overflow-x:auto; scrollbar-width:none }
#panel-contactos .ct-filtros::-webkit-scrollbar{display:none}
#panel-contactos .ct-chip{ flex:none; padding:7px 14px; border-radius:18px; border:1px solid var(--borde); background:rgba(40,16,18,.6); color:var(--mut); font-weight:600; font-size:15px }
#panel-contactos .ct-chip b{ font-weight:600; margin-left:3px }
#panel-contactos .ct-chip.ct-act{ background:linear-gradient(180deg,var(--oro2),var(--oro)); color:#2a0a0d; border-color:var(--oro3) }
#panel-contactos .ct-cto{ display:flex; align-items:center; gap:10px; padding:10px 12px 10px 16px; position:relative; user-select:none; -webkit-user-select:none; cursor:pointer }
#panel-contactos .ct-cto + .ct-cto::before{ content:""; position:absolute; top:0; left:74px; right:0; border-top:1px solid rgba(255,255,255,.07) }
#panel-contactos .ct-avatar{ width:52px; height:52px; border-radius:50%; flex:none; border:2px solid var(--oro); display:flex; align-items:center; justify-content:center; font:700 21px var(--f-titulo); color:var(--oro3); }
#panel-contactos .ct-cto .ct-t{ flex:1; min-width:0 }
#panel-contactos .ct-l1,#panel-contactos .ct-l2{ display:flex; align-items:center; gap:6px; min-width:0 }
#panel-contactos .ct-n{ flex:1; font-weight:700; font-size:16.500px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#panel-contactos .ct-hora{ font-size:12px; color:var(--mut); flex:none }
#panel-contactos .ct-hora.ct-nuevo{ color:var(--oro2) }
#panel-contactos .ct-u{ flex:1; color:var(--mut); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#panel-contactos .ct-u i{opacity:.7}
#panel-contactos .ct-ticks{ color:var(--oro2); letter-spacing:-3px; margin-right:3px }
#panel-contactos .ct-badge{ background:var(--oro); color:#1a1204; border-radius:11px; min-width:20px; text-align:center; padding:1px 6px; font-weight:700; font-size:12px; flex:none }
#panel-contactos .ct-pin{ width:15px; height:15px; fill:var(--mut); stroke:none; flex:none }
#panel-contactos .ct-etq{ display:inline-block; margin-top:3px; padding:1px 7px; border-radius:4px; background:var(--rojo); color:var(--oro3); font:700 11px var(--f-texto) }
#panel-contactos .ct-dos{ display:flex; gap:6px; flex:none }
#panel-contactos .ct-bt{ width:50px; padding:6px 0 5px; border-radius:12px; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; font-weight:600; border:1px solid var(--borde); }
#panel-contactos .ct-bt svg{ width:20px; height:20px }
#panel-contactos .ct-bt.ct-llamar{ background:rgba(40,16,18,.7); color:var(--oro2) }
#panel-contactos .ct-bt.ct-escribir{ background:linear-gradient(180deg,var(--rojo2),var(--rojo)); border-color:var(--oro); color:var(--oro3) }
#panel-contactos .ct-vacio{ color:var(--mut); padding:30px 20px; text-align:center }
/* chat */
#panel-contactos #ct-chat{ background:radial-gradient(900px 500px at 50% 0,rgba(110,14,20,.18),transparent 70%) }
#panel-contactos #ct-chatCab{ display:flex; align-items:center; gap:8px; padding:max(8px,env(safe-area-inset-top)) 12px 8px; background:rgba(14,8,9,.92); border-bottom:1px solid var(--borde) }
#panel-contactos .ct-volver{ height:44px; padding:0 10px 0 8px; border-radius:22px; background:rgba(60,22,26,.75); border:1px solid var(--borde); font-size:30px; line-height:1; display:flex; align-items:center; gap:3px; color:var(--oro2) }
#panel-contactos .ct-volver b{font:600 17px var(--f-texto)}
#panel-contactos #ct-chatCab .ct-avatar{ width:40px; height:40px; font-size:17px }
#panel-contactos .ct-chatQ{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center }
/* 04/11/2026: en 390 px el nombre y el número se cortaban («Juan P…», «+5841465…»): ahora pasan a dos líneas y el número se ve entero */
#panel-contactos #ct-chatNombre{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; min-width:0; overflow:hidden; overflow-wrap:anywhere; font-size:16px; line-height:1.2 }
#panel-contactos #ct-chatEstado{ display:block; min-width:0; overflow-wrap:anywhere; font-size:12px; color:var(--mut); line-height:1.25 }
#panel-contactos .ct-acciones{ display:flex; gap:4px; height:44px; padding:0 6px; border-radius:22px; background:rgba(60,22,26,.75); border:1px solid var(--borde); align-items:center }
#panel-contactos .ct-acciones button[hidden]{ display:none }
#panel-contactos .ct-acciones{ gap:2px }
#panel-contactos .ct-acciones button{ width:36px; height:40px; display:flex; align-items:center; justify-content:center; color:var(--oro2) }
#panel-contactos #ct-mensajes{ flex:1; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:4px }
#panel-contactos .ct-dia{ align-self:center; margin:10px 0 6px }
#panel-contactos .ct-dia span{ background:rgba(0,0,0,.55); border:1px solid var(--borde); padding:4px 14px; border-radius:10px; font-weight:600; font-size:13px }
#panel-contactos .ct-m{ max-width:80%; padding:7px 10px 6px; border-radius:14px; background:#241a1c; align-self:flex-start; overflow-wrap:anywhere; line-height:1.3; font-size:16px }
#panel-contactos .ct-m.ct-mio{ align-self:flex-end; background:linear-gradient(180deg,#7d1019,#5c0b12); border:1px solid rgba(227,37,47,.3) }
#panel-contactos .ct-m img{ max-width:100%; border-radius:10px; display:block; margin-bottom:2px }
#panel-contactos .ct-m audio{ max-width:220px; height:36px }
#panel-contactos .ct-m .ct-h{ float:right; margin:7px 0 -2px 10px; font-size:11px; color:rgba(244,239,228,.6) }
#panel-contactos .ct-m::after{content:"";display:block;clear:both}
#panel-contactos .ct-tick{ letter-spacing:-3px; margin-left:4px }
#panel-contactos .ct-tick.ct-entregado,#panel-contactos .ct-tick.ct-enviado{color:rgba(244,239,228,.6)}
#panel-contactos .ct-tick.ct-leido{ color:var(--oro2) }
#panel-contactos #ct-caja{ display:flex; gap:8px; padding:8px 10px; padding-bottom:max(10px,env(safe-area-inset-bottom)); align-items:center; background:rgba(10,6,7,.9) }
#panel-contactos #ct-caja #ct-texto{ flex:1; height:42px; border-radius:21px; background:rgba(60,28,30,.55); padding:0 16px; font-size:16px }
#panel-contactos .ct-ic{ width:42px; height:42px; min-width:42px; display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--fg); padding:0; line-height:1 }
#panel-contactos .ct-ic.ct-redondo{ width:44px; height:44px }
#panel-contactos #ct-bmasc svg,#panel-contactos #ct-bmas svg{width:28px;height:28px}
#panel-contactos .ct-ic.ct-grab{ background:var(--rojo2); color:#fff }
#panel-contactos #ct-grabando{ padding:8px 14px; color:var(--rojo2); border-top:1px solid var(--borde) }
#panel-contactos #ct-grabando button{margin-left:10px;color:var(--mut)}
/* hoja inferior y aviso */
#panel-contactos #ct-hoja{ position:absolute; inset:0; z-index:10; display:flex; align-items:flex-end }
#panel-contactos .ct-hoja-fondo{ position:absolute; inset:0; background:rgba(0,0,0,.6) }
#panel-contactos .ct-hoja-cuerpo{ position:relative; width:100%; max-height:80%; overflow:auto; background:#1a0e10; border-top:1px solid var(--oro); border-radius:22px 22px 0 0; padding:18px 16px max(20px,env(safe-area-inset-bottom)) }
#panel-contactos h3{ font-family:var(--f-titulo); color:var(--oro2); margin:6px 0 10px; font-size:14px; letter-spacing:1px }
#panel-contactos .ct-fila{ display:flex; gap:6px }
#panel-contactos .ct-fila input:first-child{flex:1.2}
#panel-contactos .ct-fila input:nth-child(2){flex:1.4}
#panel-contactos .ct-fila .ct-primario{padding:0 12px}
#panel-contactos .ct-ag{ display:flex; justify-content:space-between; gap:8px; padding:6px 0; color:var(--mut); font-size:14px }
#panel-contactos .ct-ag button{color:var(--rojo2)}
#panel-contactos .ct-grande{ width:100%; padding:14px; margin:6px 0; border-radius:14px; background:rgba(60,22,26,.75); border:1px solid var(--borde); font-weight:600; font-size:16px }
#panel-contactos #ct-aviso{ position:absolute; left:16px; right:16px; bottom:90px; z-index:20; padding:12px 16px; border-radius:14px; background:#2a1a1c; border:1px solid var(--oro); font-size:14px; text-align:center; box-shadow:0 6px 24px rgba(0,0,0,.6) }

/* pestaña de abajo y botón de cabecera (viven fuera del panel) */
nav#nav button .globo-ct{ position:absolute; top:6px; right:14%; min-width:16px; height:16px; border-radius:8px; background:var(--rojo2); color:#fff; font:600 10px var(--f-texto,system-ui); display:none; align-items:center; justify-content:center; padding:0 4px; font-style:normal; letter-spacing:0 }
nav#nav button .globo-ct.on{ display:flex }
#bcontactos{ display:none }
@media (min-width:980px){ #bcontactos:not([hidden]){ display:block } }

/* Avisos y no leídos (07/10/2026) */
#panel-contactos .ct-cto .ct-n{ font-weight:500 }
#panel-contactos .ct-cto.ct-sin .ct-n{ font-weight:800; color:#fff }
#panel-contactos .ct-cto.ct-sin .ct-u{ color:#fff; font-weight:600 }
#panel-contactos .ct-badge{ background:var(--rojo2,#e0252f); color:#fff; min-width:22px; font-size:13px; padding:2px 7px; box-shadow:0 0 0 2px rgba(224,37,47,.28) }
#panel-contactos .ct-badge.ct-badge-sil{ background:#6b6b6b; box-shadow:none }
#panel-contactos .ct-sil{ font-size:13px; opacity:.75; margin-left:4px; flex:none }

/* Enlaces con vista previa, menú de mensaje (copiar / reenviar / compartir) y texto que llega de «Compartir» (07/10/2026) */
#panel-contactos .ct-m{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none }
#panel-contactos .ct-m .ct-enl{ color:#8ec5ff; text-decoration:underline; -webkit-touch-callout:none }
#panel-contactos .ct-m.ct-mio .ct-enl{ color:#ffd9a0 }
#panel-contactos .ct-vp{ display:block; margin:6px 0 2px; border-radius:10px; overflow:hidden; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.1); color:inherit; text-decoration:none; -webkit-touch-callout:none }
#panel-contactos .ct-vp img{ width:100%; max-height:170px; object-fit:cover; border-radius:0; margin:0; display:block }
#panel-contactos .ct-vp-t{ display:block; padding:7px 10px 8px }
#panel-contactos .ct-vp-t b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; line-height:1.25 }
#panel-contactos .ct-vp-t i{ display:block; font-style:normal; font-size:12px; color:var(--mut); margin-top:2px }
#panel-contactos #ct-compartir{ display:flex; align-items:center; gap:8px; margin:0 14px 8px; padding:9px 12px; border-radius:12px; background:rgba(60,22,26,.75); border:1px solid var(--oro); font-size:14px }
#panel-contactos #ct-compartir span{ flex:1; min-width:0; overflow-wrap:anywhere }
#panel-contactos #ct-compartir button{ font-size:18px; padding:4px 8px }
#panel-contactos .ct-reenv{ cursor:pointer }

/* Mi perfil, foto y estado de cada contacto (07/10/2026) */
#panel-contactos .ct-avatar.ct-confoto{ background-size:cover; background-position:center; background-repeat:no-repeat; font-size:0 }
#panel-contactos .ct-est{ color:var(--oro2); opacity:.85; font-size:12.500px; font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px }
#panel-contactos .ct-perfil{ overflow-y:auto; padding-bottom:30px }
#panel-contactos .ct-perfil > *{ flex:none }
#panel-contactos .ct-pcuerpo{ padding:0 16px }
#panel-contactos .ct-pfoto{ display:flex; align-items:center; gap:14px; margin:4px 0 14px }
#panel-contactos .ct-pfoto .ct-avatar{ width:96px; height:96px; font-size:40px; flex:none }
#panel-contactos .ct-pfotoBt{ display:flex; flex-direction:column; gap:8px }
#panel-contactos .ct-plabel{ display:flex; justify-content:space-between; color:var(--oro2); font-size:13px; font-weight:600; margin:12px 2px 6px }
#panel-contactos .ct-plabel span{ color:var(--mut); font-weight:400 }
#panel-contactos textarea{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--borde); background:rgba(0,0,0,.35); color:var(--fg); font:inherit; font-size:16px; outline:none; resize:none }
#panel-contactos textarea:focus{ border-color:var(--oro) }
#panel-contactos .ct-ptel{ font-size:17px; margin:2px 2px 10px }
#panel-contactos .ct-ok{ color:#7ddc8a; font-size:13px; margin-left:6px }
#panel-contactos .ct-pend{ color:var(--rojo2); font-size:13px; margin-left:6px }
#panel-contactos .ct-pdos{ display:flex; justify-content:space-between; gap:10px; margin-top:10px; color:var(--mut) }
#panel-contactos .ct-pdos button{ padding:8px 4px; font-size:14px }
#panel-contactos #ct-pNuevoTel{ margin-bottom:6px }
#panel-contactos #ct-crop{ position:absolute; inset:0; z-index:15; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.82); padding:16px }
#panel-contactos .ct-crop-cuerpo{ width:100%; max-width:340px; background:#1a0e10; border:1px solid var(--oro); border-radius:20px; padding:16px; text-align:center }
#panel-contactos #ct-cMarco{ width:min(280px,100%); aspect-ratio:1; margin:6px auto 12px; border-radius:50%; overflow:hidden; border:2px solid var(--oro); touch-action:none; background:#000 }
#panel-contactos #ct-cLienzo{ width:100%; height:100%; display:block; touch-action:none; cursor:grab }
#panel-contactos #ct-cZoom{ padding:0; border:none; background:none; accent-color:var(--oro) }
#panel-contactos .ct-crop-cuerpo .ct-pdos{ align-items:center }

/* ---------- Llamadas y videollamadas (07/10/2026): pantalla completa, fuera del panel ---------- */
#ct-llamada{ position:fixed; inset:0; z-index:9500; display:flex; flex-direction:column; align-items:center; justify-content:space-between; background:radial-gradient(120% 90% at 50% 0%,#3a0d12 0%,#12070a 60%,#070304 100%); color:#fff; font-family:var(--f-texto,system-ui,sans-serif); padding:max(36px,env(safe-area-inset-top)) 20px max(34px,env(safe-area-inset-bottom)); }
#ct-llamada[hidden], #ct-llamada [hidden]{ display:none!important }
#ct-llamada *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent }
#ct-llamada #ctl-remoto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; display:none; z-index:0 }
#ct-llamada.ctl-video #ctl-remoto{ display:block }
#ct-llamada #ctl-yo{ position:absolute; top:max(16px,env(safe-area-inset-top)); right:14px; width:96px; height:128px; object-fit:cover; border-radius:14px; border:2px solid rgba(255,255,255,.7); background:#222; z-index:2; display:none; box-shadow:0 6px 20px rgba(0,0,0,.5) }
#ct-llamada.ctl-video #ctl-yo{ display:block }
#ct-llamada #ctl-yo.ctl-espejo{ transform:scaleX(-1) }
#ct-llamada .ctl-info{ position:relative; z-index:1; margin-top:8vh; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; text-shadow:0 2px 12px rgba(0,0,0,.8) }
#ct-llamada.ctl-video .ctl-info{ margin-top:2vh; align-self:flex-start; align-items:flex-start; text-align:left }
#ct-llamada .ctl-info b{ font-size:28px; font-weight:600 }
#ct-llamada .ctl-info span{ font-size:16px; opacity:.85 }
#ct-llamada .ctl-info .ct-avatar{ width:124px; height:124px; border-radius:50%; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-size:52px; font-weight:600; border:2px solid #dcab24; color:#fff }
#ct-llamada.ctl-video .ctl-info .ct-avatar{ display:none }
#ct-llamada .ctl-fila{ position:relative; z-index:1; display:flex; gap:18px; justify-content:center; align-items:flex-start; flex-wrap:wrap; width:100% }
#ct-llamada .ctl-b{ display:flex; flex-direction:column; align-items:center; gap:7px; color:#fff; font-size:13px; background:none; border:none; padding:0; cursor:pointer; min-width:68px; font-family:inherit }
#ct-llamada .ctl-b i{ font-style:normal; width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; font-size:26px }
#ct-llamada .ctl-b.ctl-on i{ background:#fff; color:#111 }
#ct-llamada .ctl-b.ctl-rojo i{ background:#d8262f }
#ct-llamada .ctl-b.ctl-verde i{ background:#22b45a }
#ct-llamada #ctl-ent{ gap:90px }
#ct-llamada #ctl-ent .ctl-b i{ width:72px; height:72px; font-size:30px }
/* burbuja de llamada en el chat */
#panel-contactos .ct-llam{ font-weight:500 }
#panel-contactos .ct-llam-perdida, #panel-contactos .ct-llam-rechazada{ color:#ff6b6b }
#panel-contactos .ct-mio .ct-llam-perdida, #panel-contactos .ct-mio .ct-llam-rechazada{ color:inherit; opacity:.85 }

/* ---- Ventana flotante, imagen sobre imagen y compartir pantalla en la llamada (07/10/2026, idea de Cris) ---- */
#ct-llamada{ touch-action:none; -webkit-user-select:none; user-select:none }
#ct-llamada #ctl-min{ position:absolute; top:max(10px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:3; width:54px; height:30px; border-radius:15px; border:none; background:rgba(0,0,0,.4); color:#fff; font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center }
#ct-llamada #ctl-minx{ display:none }
#ct-llamada #ctl-aviso{ position:absolute; z-index:5; left:50%; transform:translateX(-50%); bottom:140px; max-width:86%; background:rgba(0,0,0,.82); border:1px solid #dcab24; color:#fff; padding:9px 14px; border-radius:12px; font-size:13px; text-align:center }
#ct-llamada.ctl-ajena #ctl-remoto{ object-fit:contain }
#ct-llamada.ctl-comparte #ctl-yo{ display:none!important }
#ct-llamada .ctl-fila{ gap:14px }
#ct-llamada .ctl-b{ min-width:64px }
#ct-llamada.ctl-mini{ inset:auto; width:118px; height:168px; padding:0; border-radius:16px; overflow:hidden; border:2px solid #dcab24; box-shadow:0 8px 26px rgba(0,0,0,.6); cursor:grab; justify-content:center; z-index:9600 }
#ct-llamada.ctl-mini:active{ cursor:grabbing }
#ct-llamada.ctl-mini #ctl-yo, #ct-llamada.ctl-mini .ctl-fila, #ct-llamada.ctl-mini #ctl-min, #ct-llamada.ctl-mini #ctl-aviso, #ct-llamada.ctl-mini .ctl-info b{ display:none!important }
#ct-llamada.ctl-mini .ctl-info{ margin:0; align-self:center; align-items:center; text-align:center }
#ct-llamada.ctl-mini .ctl-info .ct-avatar{ display:flex; width:64px; height:64px; font-size:28px }
#ct-llamada.ctl-mini.ctl-video .ctl-info{ position:absolute; left:0; right:0; bottom:6px; margin:0; align-self:auto }
#ct-llamada.ctl-mini.ctl-video .ctl-info .ct-avatar{ display:none }
#ct-llamada.ctl-mini .ctl-info span{ font-size:12px; background:rgba(0,0,0,.55); padding:1px 7px; border-radius:9px }
#ct-llamada.ctl-mini.ctl-enpip #ctl-remoto{ visibility:hidden }
#ct-llamada.ctl-mini.ctl-enpip.ctl-video .ctl-info .ct-avatar{ display:flex }
#ct-llamada.ctl-mini.ctl-enpip.ctl-video .ctl-info{ top:30px; bottom:auto }
#ct-llamada.ctl-mini #ctl-minx{ position:absolute; z-index:4; top:5px; right:5px; width:28px; height:28px; border-radius:50%; border:none; background:#d8262f; color:#fff; font-size:14px; line-height:1; cursor:pointer; display:flex!important; align-items:center; justify-content:center; padding:0 }
#ct-llamada.ctl-mini #ctl-minx[hidden]{ display:none!important }
/* Borrar mensajes (07/10/2026) */
#panel-contactos .ct-m.ct-elim{ background:transparent; border:1px dashed rgba(244,239,228,.25); color:rgba(244,239,228,.6); font-style:italic }
#panel-contactos .ct-m.ct-elim.ct-mio{ background:transparent; border:1px dashed rgba(227,37,47,.35) }
#panel-contactos .ct-grande.ct-peligro{ color:#ff8a8a }

/* ---- Llamadas grupales (07/10/2026): cuadrícula de hasta 6 cuadros ajenos + el mío en la esquina; selector «Agregar participante» ---- */
#ct-llamada #ctl-grupo{ position:absolute; inset:0; z-index:0; display:none; gap:3px; padding:calc(max(10px,env(safe-area-inset-top)) + 92px) 3px 218px; background:#000; grid-auto-rows:minmax(0,1fr); overflow:hidden }
#ct-llamada.ctl-grupal #ctl-grupo{ display:grid }
#ct-llamada.ctl-grupal #ctl-remoto{ display:none!important }
#ct-llamada.ctl-grupal .ctl-info .ct-avatar{ display:none }
#ct-llamada.ctl-grupal .ctl-info{ margin-top:2vh; align-self:flex-start; align-items:flex-start; text-align:left }
#ct-llamada #ctl-grupo.ctl-g1, #ct-llamada #ctl-grupo.ctl-g2{ grid-template-columns:1fr }
#ct-llamada #ctl-grupo.ctl-g3, #ct-llamada #ctl-grupo.ctl-g4, #ct-llamada #ctl-grupo.ctl-g5, #ct-llamada #ctl-grupo.ctl-g6, #ct-llamada #ctl-grupo.ctl-g7{ grid-template-columns:1fr 1fr }
#ct-llamada .ctl-tile{ position:relative; min-height:0; min-width:0; background:#1b2430; border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center }
#ct-llamada .ctl-tile .ctl-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
#ct-llamada .ctl-tile .ctl-ini{ width:64px; height:64px; border-radius:50%; background:#3a0d12; border:2px solid #dcab24; display:none; align-items:center; justify-content:center; font-size:28px; font-weight:600 }
#ct-llamada .ctl-tile.ctl-sinvid .ctl-ini{ display:flex }
#ct-llamada .ctl-tile .ctl-nom{ position:absolute; left:6px; bottom:5px; font-size:12px; background:rgba(0,0,0,.5); padding:1px 7px; border-radius:9px; max-width:90% ; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#ct-llamada.ctl-mini #ctl-grupo{ padding:0 }
#ct-llamada.ctl-mini #ctl-selector{ display:none!important }
#ct-llamada #ctl-selector{ position:absolute; inset:0; z-index:6; background:rgba(0,0,0,.72); display:flex; align-items:flex-end; justify-content:center; touch-action:pan-y }
#ct-llamada #ctl-selector[hidden]{ display:none!important }
#ct-llamada .ctl-sel-caja{ width:100%; max-width:520px; max-height:70%; background:#1a0e10; border:1px solid #dcab24; border-radius:20px 20px 0 0; padding:16px 14px calc(14px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:8px }
#ct-llamada .ctl-sel-caja b{ font-size:18px } #ct-llamada .ctl-sel-caja small{ opacity:.7 }
#ct-llamada .ctl-sel-lista{ overflow-y:auto; touch-action:pan-y; display:flex; flex-direction:column; gap:4px; min-height:60px }
#ct-llamada .ctl-sel-fila{ display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.07); border:none; color:#fff; padding:8px 10px; border-radius:12px; font-size:16px; font-family:inherit; cursor:pointer; text-align:left }
#ct-llamada .ctl-sel-fila span{ flex:1 } #ct-llamada .ctl-sel-fila i{ font-style:normal; color:#dcab24; font-size:14px }
#ct-llamada .ctl-sel-fila .ct-avatar{ width:42px; height:42px; border-radius:50%; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-weight:600; flex:none }
#ct-llamada .ctl-sel-vacio{ opacity:.7; padding:10px 4px }
#ct-llamada .ctl-sel-x{ background:none; border:1px solid rgba(255,255,255,.35); color:#fff; padding:10px; border-radius:12px; font-size:15px; cursor:pointer; font-family:inherit }
#ct-llamada .ctl-sel-fila .ct-avatar{ border:2px solid #dcab24; font-size:18px; color:#fff; background-color:#3a0d12 }
#ct-llamada .ctl-sel-fila .ct-avatar.ct-confoto{ font-size:0 }
/* 07/10/2026: «Agregar número» — el botón Guardar va en su propia fila, para que el escudo flotante no lo tape en el iPhone */
#panel-contactos #ct-hojaAgregar .ct-fila{ flex-wrap:wrap }
#panel-contactos #ct-hojaAgregar .ct-fila input{ flex:1 1 40%; min-width:0 }
#panel-contactos #ct-hojaAgregar .ct-fila .ct-primario{ flex:1 1 100%; min-height:46px }

/* #757 (08/10/2026): el ejemplo de la casilla del número es solo un placeholder gris, no un número real */
#ct-nTel::placeholder, #ct-aTel::placeholder, #ct-pNuevoTel::placeholder { color: #8b8f98; opacity: 1; font-style: italic; }

/* Responder citando (08/10/2026) */
#panel-contactos .ct-cita{ border-left:3px solid #dcab24; background:rgba(0,0,0,.25); border-radius:8px; padding:4px 8px; margin:0 0 5px; font-size:13px; line-height:1.25; cursor:pointer; -webkit-touch-callout:none }
#panel-contactos .ct-cita b{ display:block; color:#dcab24; font-size:12px }
#panel-contactos .ct-cita span{ display:block; color:rgba(244,239,228,.78); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#panel-contactos #ct-citando{ display:flex; align-items:center; gap:8px; padding:6px 12px; background:rgba(10,6,7,.9); border-top:1px solid var(--borde) }
#panel-contactos #ct-citando[hidden]{ display:none }
#panel-contactos #ct-citandoT{ flex:1; min-width:0; border-left:3px solid #dcab24; padding-left:8px; font-size:13px }
#panel-contactos #ct-citandoT b{ display:block; color:#dcab24; font-size:12px }
#panel-contactos #ct-citandoT span{ display:block; color:rgba(244,239,228,.78); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#panel-contactos #ct-citandoX{ color:var(--mut); font-size:18px; padding:4px 8px }
#panel-contactos .ct-m.ct-resalta{ outline:2px solid #dcab24; outline-offset:2px }

#panel-contactos .ct-m img.ct-falla{ min-width:150px; min-height:60px; border:1px dashed rgba(220,171,36,.6); padding:14px 10px; box-sizing:border-box; color:#dcab24; font-size:13px; cursor:pointer }

#panel-contactos .ct-pdos.ct-grandes button{ flex:1; min-height:46px; font-size:15px; border:1px solid var(--borde); border-radius:12px }
#panel-contactos #ct-pQCodigo{ width:100%; box-sizing:border-box }

/* Bloquear y reportar (14/10/2026) */
#panel-contactos #ct-segDetalle{ padding:10px 12px; border-radius:14px; border:1px solid var(--borde); background:rgba(0,0,0,.35); color:inherit; font:inherit; font-size:16px }
#panel-contactos #ct-segReporte .ct-grande{ text-align:left }
#panel-contactos .ct-pdos.ct-grandes .ct-peligro{ color:#ff8a8a }

/* Menú del mensaje compacto y «Editando» (22/10/2026, Nerio): lista chica al centro, sin recuadros grandes */
#panel-contactos #ct-hoja.ct-compacta{ align-items:center; justify-content:center }
#panel-contactos #ct-hoja.ct-compacta .ct-hoja-cuerpo{ width:min(250px,80%); max-height:70%; padding:4px 0; border:1px solid rgba(244,239,228,.16); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.6) }
#panel-contactos #ct-hojaMsg h3{ display:none }
#panel-contactos #ct-hojaMsg .ct-grande{ margin:0; padding:9px 16px; border:0; border-bottom:1px solid rgba(244,239,228,.08); border-radius:0; background:transparent; font-size:15px; font-weight:500; text-align:left }
#panel-contactos #ct-hojaMsg .ct-grande:last-of-type{ border-bottom:0 }
#panel-contactos #ct-hojaMsg .ct-grande[hidden]{ display:none }
#panel-contactos #ct-editando{ display:flex; align-items:center; gap:8px; padding:6px 12px; background:rgba(10,6,7,.9); border-top:1px solid var(--borde) }
#panel-contactos #ct-editando[hidden]{ display:none }
#panel-contactos #ct-editandoT{ flex:1; min-width:0; border-left:3px solid #dcab24; padding-left:8px; font-size:13px }
#panel-contactos #ct-editandoT b{ display:block; color:#dcab24; font-size:12px }
#panel-contactos #ct-editandoX{ color:var(--mut); font-size:18px; padding:4px 8px }

/* build 15: número debajo del nombre (03/11/2026) */
#panel-contactos .ct-num{ color:var(--gris, #a89f99); font-size:13.500px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* Build 15 (03/11/2026): fila Walkie · Escribir · Llamar y ficha del contacto (M3 con los colores de la app) */
#panel-contactos .ct-dos{ gap:5px }
#panel-contactos .ct-bt.ct-walkie{ background:rgba(40,16,18,.7); color:var(--oro2); border-color:var(--oro) }
#panel-contactos .ct-bt.ct-walkie img{ height:30px; width:auto; object-fit:contain }
#panel-contactos .ct-chatQ, #panel-contactos #ct-chatAv{ cursor:pointer }
#panel-contactos #ct-hojaFicha{ text-align:center; padding-bottom:6px }
#panel-contactos .ct-ficha-av .ct-avatar{ width:104px; height:104px; font-size:44px; margin:0 auto }
#panel-contactos #ct-fichaNombre{ margin:14px 0 2px; font-size:24px }
#panel-contactos .ct-ficha-num{ color:var(--tenue,#b8b0a4); font-size:16px; margin-bottom:16px }
#panel-contactos .ct-ficha-bt{ display:flex; gap:10px; justify-content:center }
#panel-contactos .ct-fbt{ flex:1 1 0; min-height:76px; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; font-size:15px; font-weight:700; border:1px solid var(--borde); background:rgba(40,16,18,.7); color:var(--oro2) }
#panel-contactos .ct-fbt svg{ width:26px; height:26px }
#panel-contactos .ct-fbt img{ height:40px; width:auto; object-fit:contain }
#panel-contactos .ct-fbt.ct-escribir{ background:linear-gradient(180deg,var(--rojo2),var(--rojo)); border-color:var(--oro); color:var(--oro3) }
#panel-contactos .ct-fbt.ct-walkie{ border-color:var(--oro) }
#panel-contactos .ct-ficha-nota{ margin-top:16px }
#panel-contactos #ct-hoja.ct-arriba{ align-items:flex-start }
#panel-contactos #ct-hoja.ct-arriba .ct-hoja-cuerpo{ border-top:0; border-bottom:1px solid var(--oro); border-radius:0 0 22px 22px; padding-top:26px }

/* Recados de Alfa: conversación de solo lectura (sin caja de escribir, sin llamar, sin ficha) */
#panel-contactos #ct-chat.ct-solo #ct-caja, #panel-contactos #ct-chat.ct-solo #ct-bvideo, #panel-contactos #ct-chat.ct-solo #ct-bllamar, #panel-contactos #ct-chat.ct-solo #ct-bwalkie, #panel-contactos #ct-chat.ct-solo #ct-bseg { display:none }
#panel-contactos #ct-soloNota { margin:8px 12px calc(10px + env(safe-area-inset-bottom)); padding:10px 12px; border-radius:12px; border:1px solid var(--oro); background:rgba(40,16,18,.7); color:var(--oro3,#f5d98a); font-size:14px; line-height:1.35; text-align:center }
#panel-contactos .ct-recados { font-size:12px; font-weight:700; color:var(--oro2,#d9a93a); border:1px solid var(--oro,#d9a93a); border-radius:10px; padding:6px 10px }

/* Invitar a Javi (04/11/2026): la agenda del teléfono que todavía no está en Contactos */
#panel-contactos .ct-inv-t{ padding:20px 16px 2px; font-weight:700; color:var(--oro2); font-size:15px; letter-spacing:.3px }
#panel-contactos .ct-inv-n{ padding:0 16px 8px; color:var(--mut); font-size:13px; line-height:1.35 }
#panel-contactos .ct-inv{ display:flex; align-items:center; gap:10px; padding:8px 12px 8px 16px; min-height:60px; position:relative }
#panel-contactos .ct-inv + .ct-inv::before{ content:""; position:absolute; top:0; left:74px; right:0; border-top:1px solid rgba(255,255,255,.07) }
#panel-contactos .ct-inv .ct-t{ flex:1; min-width:0 }
#panel-contactos .ct-inv .ct-n{ font-weight:500; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#panel-contactos .ct-invitar{ flex:none; min-height:44px; min-width:84px; padding:0 14px; border-radius:12px; border:1px solid var(--oro); background:linear-gradient(180deg,var(--rojo2),var(--rojo)); color:var(--oro3); font-weight:600; font-size:14px }
#panel-contactos .ct-inv-mas{ display:block; margin:12px auto 22px; min-height:44px; padding:0 20px; border-radius:18px; border:1px solid var(--borde); background:rgba(40,16,18,.6); color:var(--oro2); font-weight:600; font-size:15px }
#panel-contactos .ct-inv-caja{ margin:8px 14px; padding:12px 14px; border:1px solid var(--borde); border-radius:14px; background:rgba(40,16,18,.6) }
#panel-contactos .ct-inv-caja p{ margin:0 0 10px; font-size:14px; line-height:1.4; color:var(--fg) }
#panel-contactos .ct-inv-perm{ width:100%; min-height:44px; border-radius:12px; border:1px solid var(--oro); background:linear-gradient(180deg,var(--oro2),var(--oro)); color:#2a0a0d; font-weight:700; font-size:15px }
#panel-contactos .ct-pabierto{ display:flex; gap:10px; align-items:flex-start; margin:12px 2px 0; font-size:13px; line-height:1.35; color:var(--texto,#e8e6e0) }
#panel-contactos .ct-pabierto input{ flex:0 0 auto; width:22px; height:22px; margin:1px 0 0; accent-color:var(--oro2) }
#panel-contactos #ct-vinculoNota { margin:8px 12px 0; padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:rgba(40,16,18,.55); color:#d9d2c6; font-size:13px; line-height:1.35; text-align:center }
#panel-contactos #ct-pVerifCodigo{ margin-top:10px }

/* ---- Botón Video en la lista y en la ficha (Nerio, 05/11/2026): mismo estilo que Llamar; con Walkie son 4 y entran en 390 px ---- */
#panel-contactos .ct-bt.ct-video{ background:rgba(40,16,18,.7); color:var(--oro2) }
#panel-contactos .ct-fbt.ct-video{ background:rgba(40,16,18,.7); color:var(--oro2) }
#panel-contactos .ct-dos:has(.ct-walkie):has(.ct-video){ gap:4px }
#panel-contactos .ct-dos:has(.ct-walkie):has(.ct-video) .ct-bt{ width:46px; font-size:10px }