/* Amora — tema "cuaderno": papel cálido, tinta, bordes marcados. Nada de deck oscuro. */
:root{
  --paper:#FBF7F2; --paper2:#FFFFFF; --sand:#F1E9DE;
  --ink:#20182B; --ink-soft:#6B6076; --line:#20182B;
  --indigo:#4338CA; --mint:#0F9D77; --amber:#E9A13B; --coral:#E4572E; --lila:#EDE9FE;
  --r:16px; --shadow:4px 4px 0 var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--sand);color:var(--ink);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.app{position:relative;width:min(460px,100vw);height:min(960px,100dvh);background:var(--paper);
  display:flex;flex-direction:column;overflow:hidden}
@media(min-width:540px) and (min-height:820px){
  .app{border:2px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);height:900px}
}
.view{display:none;flex-direction:column;flex:1;min-height:0}
.view.active{display:flex}
.scroll{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch}
[hidden]{display:none !important}
.mut{color:var(--ink-soft)} .sm{font-size:13px} .center{text-align:center} .grow{flex:1}
h1{font-size:inherit;font-weight:inherit;margin:0}
.display{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.5px}
.display.big{font-size:34px}
h1.display{font-size:30px;margin-bottom:6px}
.sm-title{font-size:22px}
h1.sm-title{font-size:22px;margin-bottom:0}

/* Texto para quien navega a oido: existe en la pagina, no ocupa sitio */
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- bloques de papel ---------- */
.paper{background:var(--paper2);border:2px solid var(--ink);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);margin-bottom:16px}
.paper.flat{box-shadow:none}
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 16px 10px;border-bottom:2px solid var(--ink)}

/* ---------- controles ---------- */
.btn{display:block;width:100%;border:2px solid var(--ink);border-radius:99px;padding:13px 18px;font-size:15px;
  font-weight:700;font-family:inherit;cursor:pointer;background:var(--paper2);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:none}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.mint{background:var(--mint);color:#fff}
.btn.amber{background:var(--amber);color:var(--ink)}
.btn.indigo{background:var(--indigo);color:#fff}
.btn.plain{border:0;box-shadow:none;background:transparent;color:var(--ink-soft);font-weight:600}
.btn.tiny{width:auto;padding:9px 14px;font-size:13px;box-shadow:2px 2px 0 var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.link-btn{background:none;border:0;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;padding:4px}
.link-btn.danger{color:var(--coral);font-weight:600;font-size:13px}
input,select,textarea{width:100%;font-family:inherit;font-size:15px;padding:12px 13px;margin-bottom:12px;
  background:var(--paper);border:2px solid var(--ink);border-radius:12px;color:var(--ink);outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--indigo);background:#fff}

/* Anillo de foco visible en todo lo que se puede pulsar o escribir.
   :focus-visible y no :focus para que no salte con el raton. */
:focus-visible{outline:3px solid var(--indigo);outline-offset:2px;border-radius:4px}
button:focus-visible,a:focus-visible,[role="button"]:focus-visible,
[tabindex]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--indigo);outline-offset:2px}
h1[tabindex]:focus-visible{outline-offset:4px}
/* El titulo recibe el foco al cambiar de vista: ahi no se pinta anillo, solo
   sirve para que el lector de pantalla empiece a leer por el sitio correcto */
h1[tabindex]:focus:not(:focus-visible){outline:none}
label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-soft);margin-bottom:5px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg{display:flex;border:2px solid var(--ink);border-radius:99px;overflow:hidden;margin-bottom:16px}
.seg-btn{flex:1;border:0;background:var(--paper2);font:inherit;font-weight:700;padding:11px;cursor:pointer;color:var(--ink-soft)}
.seg-btn.on{background:var(--ink);color:var(--paper)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.chip{border:2px solid var(--ink);background:var(--paper2);border-radius:99px;padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer}
.chip.on{background:var(--lila);border-color:var(--indigo);color:var(--indigo)}

/* ---------- entrar ---------- */
.auth{justify-content:center;padding:26px}
.brand{text-align:center;margin-bottom:22px}
.logo{font-family:Georgia,serif;font-size:46px;letter-spacing:-1px}
.logo-img{width:min(230px,62%);height:auto;display:block;margin:0 auto}
.logo-btn{border:2px solid var(--ink);background:var(--paper2);border-radius:50%;width:44px;height:44px;
  padding:5px;cursor:pointer;box-shadow:2px 2px 0 var(--ink);display:grid;place-items:center;flex:0 0 44px}
.logo-btn:active{transform:translate(2px,2px);box-shadow:none}
.logo-btn img{width:100%;height:100%;object-fit:contain;display:block}
.tagline{color:var(--ink-soft);margin-top:8px;line-height:1.5}

/* ---------- alta ---------- */
.steps{display:flex;gap:6px;padding:16px 16px 0}
.steps i{flex:1;height:5px;border-radius:99px;background:var(--sand);border:1px solid var(--ink)}
.steps i.on{background:var(--indigo)}

/* ---------- tablero ---------- */
.chip-stat{border:2px solid var(--ink);background:var(--amber);border-radius:99px;padding:7px 13px;font-weight:800;
  font-size:13px;cursor:pointer;font-family:inherit;box-shadow:2px 2px 0 var(--ink)}
.card-title{font-family:Georgia,serif;font-size:19px;margin-bottom:4px}
.kicker{font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--indigo);margin-bottom:6px}
.opt{display:block;width:100%;text-align:left;border:2px solid var(--ink);background:var(--paper);border-radius:12px;
  padding:12px 14px;margin-top:8px;font:inherit;font-weight:600;cursor:pointer;position:relative;overflow:hidden}
.opt:hover{background:var(--lila)}
.opt.picked{background:var(--lila);border-color:var(--indigo)}
.opt.right{background:#DCFCE7;border-color:var(--mint)}
.opt.wrong{background:#FEE2E2;border-color:var(--coral)}
.opt .pctbar{position:absolute;left:0;top:0;bottom:0;background:rgba(67,56,202,.12);z-index:0}
.opt span{position:relative;z-index:1}
.opt .pct{float:right;font-size:12px;color:var(--indigo);font-weight:800}

.people{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pcard{border:2px solid var(--ink);border-radius:var(--r);background:var(--paper2);overflow:hidden;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.pcard:active{transform:translate(3px,3px);box-shadow:none}
.pcard .ph{position:relative;aspect-ratio:1/1;background:var(--sand)}
.pcard .ph img{width:100%;height:100%;object-fit:cover;display:block}
.pcard .badge{position:absolute;left:8px;bottom:8px;background:var(--paper2);border:2px solid var(--ink);border-radius:99px;
  padding:3px 9px;font-size:12px;font-weight:800}
.pcard .badge.hi{background:var(--mint);color:#fff;border-color:var(--ink)}
.pcard .nm{padding:9px 10px 11px;font-weight:700;font-size:14px;border-top:2px solid var(--ink)}
.pcard .nm small{display:block;font-weight:500;color:var(--ink-soft);font-size:12px;margin-top:2px}
.flag{position:absolute;right:8px;top:8px;background:var(--amber);border:2px solid var(--ink);border-radius:99px;
  font-size:10px;font-weight:800;padding:2px 7px}
.rowscroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;margin:0 -16px;padding-left:16px;padding-right:16px}
.rowscroll .pcard{flex:0 0 152px}
.callout{border:2px dashed var(--ink);border-radius:var(--r);padding:14px;margin-bottom:16px;background:var(--lila)}

/* ---------- ficha de persona ---------- */
.hero{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.hero img{width:88px;height:88px;border-radius:14px;border:2px solid var(--ink);object-fit:cover}
.ring{--p:0;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;flex:0 0 74px;
  background:conic-gradient(var(--mint) calc(var(--p)*1%), var(--sand) 0);border:2px solid var(--ink)}
.ring b{background:var(--paper2);width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:16px}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;margin-top:10px}
.stat-row div{border:2px solid var(--ink);border-radius:12px;padding:9px 4px;background:var(--paper)}
.stat-row .n{font-size:19px;font-weight:800} .stat-row .l{font-size:10px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.5px}
.lock{background:var(--sand);border:2px dashed var(--ink);border-radius:12px;padding:14px;text-align:center}
.answer-line{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--sand);font-size:14px}
.answer-line .tick{font-weight:800}
.answer-line.same .tick{color:var(--mint)} .answer-line.diff .tick{color:var(--coral)}

/* ---------- listas ---------- */
.tile{display:flex;gap:12px;align-items:center;padding:11px;border:2px solid var(--ink);border-radius:var(--r);
  background:var(--paper2);margin-bottom:10px;cursor:pointer}
.tile img{width:52px;height:52px;border-radius:12px;border:2px solid var(--ink);object-fit:cover}
.tile .name{font-weight:800}
.tile .last{color:var(--ink-soft);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.tile .pill{margin-left:auto;background:var(--coral);color:#fff;border-radius:99px;padding:2px 9px;font-size:12px;font-weight:800}
.blurcard img{filter:blur(14px)}

/* ---------- chat ---------- */
.chat-head{gap:6px}
.chat-head img{width:38px;height:38px;border-radius:10px;border:2px solid var(--ink);object-fit:cover}
.chat-head .btn.tiny{padding:9px 11px;font-size:12px}
.chat-head .btn.icono{padding:9px 8px;font-size:14px}
.chat-head .grow{min-width:0}
#chat-name,#chat-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:9px;background:var(--paper)}
.msg{max-width:76%;padding:10px 13px;border:2px solid var(--ink);border-radius:14px;font-size:15px;line-height:1.4}
.msg.them{background:var(--paper2);align-self:flex-start;border-bottom-left-radius:4px}
.msg.me{background:var(--lila);align-self:flex-end;border-bottom-right-radius:4px}
.msg.sys{align-self:center;background:var(--sand);border-style:dashed;font-size:13px;text-align:center;max-width:88%}
.msg .time{display:block;font-size:10px;color:var(--ink-soft);margin-top:4px}
.composer{display:flex;gap:8px;padding:10px 12px;border-top:2px solid var(--ink);background:var(--paper2)}
.composer input{margin:0}
.duel{border-bottom:2px solid var(--ink);background:var(--lila);padding:14px 16px}
.duel .kicker{color:var(--indigo)}

/* ---------- perfil / tienda ---------- */
.kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--sand);font-size:14px}
.kv:last-child{border:0}
.tag-plan{display:inline-block;border:2px solid var(--ink);border-radius:99px;padding:3px 11px;font-size:12px;font-weight:800;background:var(--sand)}
.tag-plan.paid{background:var(--amber)}
.wallet{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.wallet div{border:2px solid var(--ink);border-radius:12px;padding:10px 3px;background:var(--paper)}
.wallet .n{font-size:19px;font-weight:800} .wallet .l{font-size:10px;color:var(--ink-soft)}
.store{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.store button{border:2px solid var(--ink);border-radius:12px;background:var(--paper);padding:12px 8px;cursor:pointer;font:inherit}
.store .t{font-weight:700;font-size:13px} .store .p{font-weight:800;color:var(--indigo);margin-top:5px}
.rank{display:flex;justify-content:space-between;padding:7px 0;font-size:14px;border-bottom:1px solid var(--sand)}
.rank.me{font-weight:800;color:var(--indigo)}

/* ---------- nav ---------- */
.nav{display:flex;border-top:2px solid var(--ink);background:var(--paper2)}
.nav button{flex:1;border:0;background:transparent;font:inherit;font-weight:700;font-size:13px;padding:14px 0;
  color:var(--ink-soft);cursor:pointer;position:relative}
.nav button.on{color:var(--ink)}
.nav button.on::after{content:"";position:absolute;left:26%;right:26%;bottom:7px;height:3px;background:var(--indigo);border-radius:99px}
.dot{position:absolute;top:9px;right:22%;width:8px;height:8px;background:var(--coral);border:1px solid var(--ink);border-radius:50%}

/* ---------- modales ---------- */
.modal{position:fixed;inset:0;background:rgba(32,24,43,.45);display:flex;align-items:flex-end;justify-content:center;z-index:60}
.modal.center{align-items:center}
.modal[hidden]{display:none}
.sheet{background:var(--paper);width:min(460px,100%);max-height:92dvh;overflow-y:auto;border:2px solid var(--ink);
  border-radius:22px 22px 0 0;padding:24px 16px 28px;position:relative}
.close{position:absolute;top:12px;right:14px;border:0;background:transparent;font-size:19px;cursor:pointer;color:var(--ink)}
.pop{width:min(360px,88%);text-align:center;margin:0}
.match-photos{display:flex;justify-content:center;margin:14px 0}
.match-photos img{width:84px;height:84px;border-radius:14px;border:2px solid var(--ink);object-fit:cover;margin:0 -6px}
.plan{border:2px solid var(--ink);border-radius:var(--r);padding:14px;margin-bottom:10px;background:var(--paper2);cursor:pointer}
.plan.sel{background:var(--lila);border-color:var(--indigo);box-shadow:3px 3px 0 var(--indigo)}
.plan .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.plan .pname{font-family:Georgia,serif;font-size:17px}
.plan .price{font-weight:800}
.plan ul{margin:8px 0 0 17px;color:var(--ink-soft);font-size:13px}
.cycles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.cycles button{border:2px solid var(--ink);border-radius:12px;background:var(--paper2);padding:9px 4px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.cycles button.sel{background:var(--ink);color:var(--paper)}
.cycles .save{display:block;font-size:10px;color:var(--mint);font-weight:800}
.cycles button.sel .save{color:var(--amber)}
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);background:var(--ink);color:var(--paper);
  border-radius:99px;padding:11px 18px;font-size:14px;z-index:90;max-width:88%;text-align:center}
.toast[hidden]{display:none}

/* ---------- negocio ---------- */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.metric{border:2px solid var(--ink);border-radius:var(--r);padding:12px;background:var(--paper2)}
.metric .k{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--ink-soft)}
.metric .v{font-size:21px;font-weight:800;margin-top:3px}
.metric.rev{background:#DCFCE7}
.bar-line{height:9px;border:2px solid var(--ink);border-radius:99px;overflow:hidden;margin:4px 0 10px;background:var(--paper)}
.bar-line i{display:block;height:100%;background:var(--indigo)}
.spark{display:flex;align-items:flex-end;gap:3px;height:74px;border-bottom:2px solid var(--ink);padding-top:6px}
.spark i{flex:1;background:var(--indigo);border:1px solid var(--ink);border-radius:3px 3px 0 0;min-height:3px}

/* ---------- verificacion ---------- */
.cam-wrap{position:relative;border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;background:#000;
  aspect-ratio:3/4;margin:12px 0;display:grid;place-items:center}
.cam-wrap video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cam-wrap.empty::after{content:"Cámara no disponible";color:#fff;font-size:13px;position:absolute}
.shots{display:flex;gap:8px;margin-bottom:12px}
.shots img{width:64px;height:84px;object-fit:cover;border:2px solid var(--ink);border-radius:10px}
.shots .ok{font-size:11px;font-weight:800;color:var(--mint);align-self:center}
.consent{display:flex;gap:9px;align-items:flex-start;margin:14px 0;text-transform:none;letter-spacing:0;font-weight:400}
.consent input{width:20px;height:20px;margin:2px 0 0;flex:0 0 20px}
.estado{display:inline-block;border:2px solid var(--ink);border-radius:99px;padding:3px 11px;font-size:12px;font-weight:800}
.estado.pending{background:var(--amber)} .estado.approved{background:var(--mint);color:#fff}
.estado.rejected{background:#FEE2E2}
.price-card{border:2px solid var(--ink);border-radius:var(--r);padding:16px;margin-bottom:12px;background:var(--paper2);cursor:pointer}
.price-card.sel{background:var(--lila);border-color:var(--indigo);box-shadow:4px 4px 0 var(--indigo)}
.price-card .amount{font-family:Georgia,serif;font-size:30px}
.price-card .per{color:var(--ink-soft);font-size:13px}
.price-card .save{display:inline-block;background:var(--mint);color:#fff;border-radius:99px;padding:2px 9px;font-size:11px;font-weight:800;margin-left:8px}
.incluye li{margin-bottom:5px;color:var(--ink-soft);font-size:14px}

/* ---------- citas y avisos ---------- */
.bell{position:relative;border:2px solid var(--ink);background:var(--paper2);border-radius:50%;width:38px;height:38px;
  font-size:16px;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.bell .dot{top:4px;right:4px}
.datebox{border-bottom:2px solid var(--ink);background:#FFF7E8;padding:14px 16px}
.datebox .kicker{color:var(--amber)}
/* Resumen mensual. Aire, serif para el texto y una cifra grande en
   monoespaciada por fila: se lee como una pagina, no como un panel de
   control. Nada de barras de progreso ni de colores de semaforo, que es
   como se cuelan las metricas de vanidad por la puerta de atras.
   La monoespaciada es la del sistema y no una webfont: traerse Plex Mono
   seria la primera dependencia externa del proyecto, y encima una peticion
   a un tercero desde la pantalla mas privada de la app. */
.resumen .mes{font-family:Georgia,serif;font-size:21px;margin-bottom:2px}
.resumen-fila{display:flex;gap:14px;align-items:baseline;padding:12px 0;
  border-bottom:1px dashed var(--linea,#d8d2c6)}
.resumen-fila:last-of-type{border-bottom:0}
.resumen-cifra{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:26px;
  font-weight:700;line-height:1;min-width:62px;text-align:right}
.resumen-que{font-family:Georgia,serif;font-size:15px;line-height:1.35}
.resumen-pie{font-size:12px;color:var(--ink-soft);margin-top:3px}
.resumen-vacio{font-family:Georgia,serif;font-size:15px;line-height:1.5;color:var(--ink-soft)}

/* Horas de silencio: dos horas y un interruptor. El input[type=time] es el
   control nativo —accesible con teclado y sin una sola libreria— y aqui solo
   se le pone el mismo marco que a los demas campos. */
.horas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.horas label{display:block;font-size:12px;font-weight:700;color:var(--ink-soft)}
.horas input[type=time]{width:100%;margin-top:4px}
.silencio-ahora{border:2px solid var(--indigo);border-radius:12px;background:var(--lila);
  padding:8px 11px;margin-top:10px;font-size:13px;font-weight:700;color:var(--indigo)}

/* El aviso de cobro se ve, pero no tapa nada ni pide permiso para cerrarse:
   solo tiene que estar ahi los tres dias que importan */
.aviso-cobro{border-color:var(--amber);background:#FEF6E7}
.date-card{border:2px solid var(--ink);border-radius:var(--r);background:var(--paper2);padding:14px;margin-bottom:12px;box-shadow:3px 3px 0 var(--ink)}
/* Una pareja se enseña siempre entera: dos caras juntas, nunca una sola */
.par-fotos{display:flex;margin-bottom:8px}
.par-fotos img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--ink);background:var(--paper)}
.par-fotos img+img{margin-left:-14px}
.date-card.past{box-shadow:none;background:var(--paper)}
.date-when{font-family:Georgia,serif;font-size:17px}
.date-meta{color:var(--ink-soft);font-size:13px;margin-top:3px}
.estado-cita{display:inline-block;border:2px solid var(--ink);border-radius:99px;padding:2px 9px;font-size:11px;font-weight:800}
.estado-cita.proposed{background:var(--amber)} .estado-cita.accepted{background:var(--mint);color:#fff}
.estado-cita.declined,.estado-cita.canceled{background:#FEE2E2} .estado-cita.done{background:var(--sand)}
.safety{border:2px dashed var(--coral);border-radius:var(--r);padding:12px;margin-top:10px;background:#FFF5F2}
.safety .kicker{color:var(--coral)}
.checkins{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.checkins button{border:2px solid var(--ink);border-radius:99px;background:var(--paper2);padding:7px 11px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.checkins button.sos{background:var(--coral);color:#fff}
.aviso{display:flex;gap:10px;border:2px solid var(--ink);border-radius:var(--r);padding:12px;margin-bottom:10px;background:var(--paper2);cursor:pointer}
.aviso.nuevo{background:var(--lila);border-color:var(--indigo)}
.aviso .t{font-weight:700;font-size:14px}
.aviso .b{color:var(--ink-soft);font-size:13px;margin-top:2px}
.aviso .c{font-size:11px;color:var(--ink-soft);margin-top:4px}
.follow{justify-content:center;padding:20px}
.share-link{background:var(--sand);border:2px solid var(--ink);border-radius:12px;padding:10px;font-size:12px;word-break:break-all;margin:10px 0}

/* ---------- sala en vivo ---------- */
.clock{font-family:Georgia,serif;font-size:20px;font-weight:700;min-width:44px;text-align:right}
.live-hero{border:2px solid var(--ink);border-radius:var(--r);padding:18px;background:var(--lila);box-shadow:var(--shadow);margin-bottom:16px;text-align:center}
.live-hero .display{font-size:26px}
.countdown{font-family:Georgia,serif;font-size:40px;margin:8px 0}
.bar-vote{position:relative;border:2px solid var(--ink);border-radius:12px;padding:11px 13px;margin-top:8px;overflow:hidden;background:var(--paper)}
.bar-vote i{position:absolute;left:0;top:0;bottom:0;background:rgba(67,56,202,.18);z-index:0}
.bar-vote.mayoria i{background:rgba(15,157,119,.28)}
.bar-vote span{position:relative;z-index:1;font-weight:600}
.bar-vote b{position:relative;z-index:1;float:right}
.bar-vote.mia{border-color:var(--indigo)}
.podio{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--sand);font-size:14px}
.podio.yo{font-weight:800;color:var(--indigo)}
.msg.voice{display:flex;align-items:center;gap:8px}
.msg.voice audio{height:34px;max-width:190px}
.rec{background:var(--coral);color:#fff}
.filtro{border:2px solid var(--ink);border-radius:12px;padding:10px;margin-bottom:8px;background:var(--paper)}
.filtro select{margin:6px 0 0}

/* ---------- videocita ---------- */
.video{background:#12100F}
.video .bar{border-bottom-color:#3A3634;background:var(--paper)}
.stage{flex:1;min-height:0;display:grid;gap:6px;padding:6px;background:#12100F;
  grid-template-columns:1fr;align-content:center}
.stage.dos{grid-template-rows:1fr 1fr}
.stage.grupo{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.tile-v{position:relative;background:#000;border:2px solid var(--ink);border-radius:14px;overflow:hidden;min-height:120px}
.tile-v video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.tile-v.yo video{transform:scaleX(-1)}
.tile-v .quien{position:absolute;left:8px;bottom:8px;background:rgba(18,16,15,.72);color:#fff;
  border-radius:99px;padding:3px 10px;font-size:12px;font-weight:700}
.tile-v .sincam{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:13px;gap:8px;
  grid-auto-flow:row;text-align:center;padding:12px}
.tile-v .sincam img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid #fff}
.vcontrols{display:flex;justify-content:center;gap:12px;padding:12px;background:var(--paper);border-top:2px solid var(--ink)}
.round-v{width:52px;height:52px;border-radius:50%;border:2px solid var(--ink);background:var(--paper2);
  font-size:19px;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.round-v.off{background:var(--sand);opacity:.6}
.round-v.danger{background:var(--coral);color:#fff}
.video .scroll{background:var(--paper);max-height:52%}
.consent-card{border:2px solid var(--ink);border-radius:var(--r);padding:18px;background:var(--paper2);box-shadow:var(--shadow);text-align:center}
.consent-card .display{font-size:22px;margin:8px 0}
.preview{width:100%;max-width:220px;aspect-ratio:3/4;border:2px solid var(--ink);border-radius:14px;
  object-fit:cover;background:#000;margin:12px auto;display:block;transform:scaleX(-1)}
.quien-lista{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.quien-lista span{border:2px solid var(--ink);border-radius:99px;padding:4px 11px;font-size:12px;font-weight:700;background:var(--paper)}
.quien-lista span.ok{background:var(--mint);color:#fff}
.quien-lista span.no{background:#FEE2E2}

/* ---------- bloqueo instantaneo ---------- */
.btn.danger-btn{background:#FEE2E2;border-color:var(--coral);color:var(--coral)}
.aviso-politica{border:2px dashed var(--ink);border-radius:12px;padding:10px;background:var(--sand);font-size:13px;margin-bottom:12px}
.foto-acciones{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
/* ---------- buscar en las conversaciones ---------- */
.buscador{padding:12px 16px 0}
.buscador input{margin:0}
.buscachat{display:flex;align-items:center;gap:4px;padding:8px 12px;border-bottom:2px solid var(--ink);background:var(--sand)}
.buscachat input{margin:0;flex:1;min-width:0;padding:8px 11px;font-size:14px}
.buscachat .link-btn{font-size:18px;padding:2px 5px;line-height:1}
.buscachat .cuenta{font-size:12px;font-weight:800;color:var(--ink-soft);white-space:nowrap;padding:0 2px}
mark{background:var(--amber);color:var(--ink);border-radius:3px;padding:0 2px;font-weight:700}
.hallazgo{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;font:inherit;cursor:pointer;
  padding:11px;border:2px solid var(--ink);border-radius:var(--r);background:var(--paper2);
  box-shadow:3px 3px 0 var(--ink);margin-bottom:10px;color:var(--ink)}
.hallazgo:hover{background:var(--lila)}
.hallazgo img{width:40px;height:40px;border-radius:10px;border:2px solid var(--ink);object-fit:cover;flex:0 0 40px}
.hallazgo .grow{display:block;min-width:0}
.hallazgo .quien{display:block;font-weight:800;font-size:14px}
.hallazgo .cuando{font-weight:500;color:var(--ink-soft);font-size:12px}
.hallazgo .texto{display:block;font-size:13px;line-height:1.45;margin-top:3px;word-break:break-word}
.fragmento{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 12px;background:var(--amber);border-bottom:2px solid var(--ink);font-size:13px;font-weight:700}
.msg.hallado{outline:3px solid var(--indigo);outline-offset:3px}

/* ---------- deshacer envio ---------- */
.msg.retirado{background:transparent;border-style:dashed;color:var(--ink-soft);font-style:italic;font-size:13px}
.msg.me{cursor:pointer}
.msg.abierta{box-shadow:3px 3px 0 var(--ink)}
.msg .retirar{display:block;width:100%;margin-top:9px;padding:6px 10px;font:inherit;font-size:12px;font-weight:800;
  border:2px solid var(--ink);border-radius:99px;background:var(--paper2);color:var(--coral);cursor:pointer}

/* ---------- selector de salas tematicas ---------- */
.salas-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;margin-bottom:4px;scrollbar-width:none}
.salas-chips::-webkit-scrollbar{display:none}
.salas-chips .chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;
  gap:1px;line-height:1.25;padding:7px 12px}
.salas-chips .chip small{font-weight:600;font-size:11px;color:var(--ink-soft)}
.salas-chips .chip.on small{color:var(--indigo)}

/* ---------- disponible hoy ---------- */
.libre-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 12px;background:var(--mint);color:#fff;border-bottom:2px solid var(--ink);
  font-size:13px;font-weight:700}
.libre-bar .btn{flex:0 0 auto}
.tile .last .libre{color:var(--mint)}

/* ---------- idioma ---------- */
.idiomas{justify-content:center;margin-top:18px}

/* ---------- caso compartido ---------- */
.prueba{border:2px solid var(--ink);border-radius:12px;background:var(--paper);
  padding:10px;margin-top:10px;max-height:340px;overflow-y:auto;font-size:13px;line-height:1.5}
.prueba .linea{padding:4px 0;border-bottom:1px solid var(--sand)}
.prueba .linea:last-child{border-bottom:0}
.prueba .linea.reportado{color:var(--ink)}
.prueba .linea.reportante{color:var(--ink-soft)}
.prueba .marca{display:inline-block;margin-left:6px;font-size:11px;font-weight:800;
  font-style:normal;color:var(--coral);border:1px solid var(--coral);border-radius:99px;padding:0 6px}