/* ═══════════ LLAMADAS CON IA (llamadas.html) · solo lo propio de esta página ═══════════ */
[lang|=zh]{font-family:var(--sans),'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif}
.demo-nota a{color:var(--tea-3);text-underline-offset:3px}
@media (max-width:920px){.heroe-in{grid-template-columns:minmax(0,1fr)}}

/* ── héroe: vuestra centralita con IA y la red de llamadas en Europa ── */
.red-llam{position:relative;max-width:520px;margin:0 auto;display:flex;flex-direction:column}
.red-mapa{width:100%;height:auto;overflow:visible}
.red-mapa .tierra circle{fill:rgba(191,173,255,.2)}
.red-mapa .ciudad circle{fill:#7D61F5;transition:fill .3s}
.red-mapa .ciudad text{font-family:Lato,sans-serif;font-size:10.5px;fill:var(--ink-3);opacity:0;transition:opacity .35s}
.red-mapa .ciudad.on circle{fill:var(--tea-3)}
.red-mapa .ciudad.on text{opacity:1;fill:var(--ink)}
.red-mapa .ciudad.fija text{opacity:1;fill:var(--ink-2);font-weight:600}
.red-mapa .ciudad.fija circle{fill:var(--tea-2)}
.red-mapa .ciudad.entra.on circle{fill:var(--amb)}
.red-mapa .ciudad.lejos .flecha{fill:none;stroke:#7D61F5;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.red-mapa .ciudad.lejos.on .flecha{stroke:var(--tea-3)}
.red-mapa .ciudad.lejos text{font-weight:600}
.red-mapa .sede circle.c{fill:var(--tea-2)}
.red-mapa .sede circle.h{fill:none;stroke:var(--tea-2);stroke-width:1.2;opacity:.5;transform-box:fill-box;transform-origin:center;animation:latidoR 2.4s ease-out infinite}
.red-mapa .sede text{font-family:Lato,sans-serif;font-size:11px;font-weight:600;fill:var(--ink)}
.red-mapa .sede text.s{font-size:9.5px;font-weight:500;fill:var(--tea-3)}
@keyframes latidoR{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.4);opacity:0}}
.red-mapa .arco{fill:none;stroke:var(--tea-2);stroke-width:1.7;stroke-dasharray:4 7;opacity:0;transition:opacity .4s}
.red-mapa .arco.on{opacity:.95;animation:flujo 1s linear infinite}
.red-mapa .arco.entra{stroke:var(--amb);animation-direction:reverse}
.red-mapa .eco{fill:none;stroke:var(--tea-3);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center}
.red-mapa .eco.on{animation:ecoR 1.8s ease-out infinite}
.red-mapa .eco.entra{stroke:var(--amb)}
@keyframes ecoR{0%{transform:scale(.6);opacity:.9}100%{transform:scale(4);opacity:0}}
.red-tarj{position:relative;z-index:2;align-self:flex-end;margin-top:-15%;width:min(360px,84%);padding:13px 14px 12px;border-radius:15px;background:rgba(14,21,27,.93);border:1px solid var(--line-2);box-shadow:0 30px 60px -24px rgba(0,0,0,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity .4s,transform .45s var(--ease)}
.red-tarj.fuera{opacity:.25;transform:translateY(6px)}
.rt-cab{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.rt-dir,.rt-idi{font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;white-space:nowrap}
.rt-dir{background:rgba(150,123,255,.16);color:var(--tea-3)}
.red-tarj.entra .rt-dir{background:rgba(182,242,58,.16);color:var(--amb)}
.rt-idi{background:rgba(255,255,255,.08);color:var(--ink-2)}
.rt-t{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.rt-quien{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;margin-bottom:9px}
.rt-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--tea-2);color:#0B1115}
.rt-av .ic{width:17px;height:17px}
.rt-quien b{display:block;font-size:13px;font-weight:600;line-height:1.25}
.rt-quien small{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-onda{display:flex;align-items:center;gap:2px;height:22px}
.rt-onda i{width:3px;height:22%;border-radius:2px;background:var(--tea-2);opacity:.45}
.red-tarj.habla .rt-onda i{animation:onda 1s ease-in-out infinite;opacity:1}
.red-tarj.entra .rt-onda i{background:var(--amb)}
.rt-onda i:nth-child(2){animation-delay:-.3s!important}.rt-onda i:nth-child(3){animation-delay:-.6s!important}.rt-onda i:nth-child(4){animation-delay:-.15s!important}.rt-onda i:nth-child(5){animation-delay:-.45s!important}.rt-onda i:nth-child(6){animation-delay:-.75s!important}.rt-onda i:nth-child(7){animation-delay:-.25s!important}
.rt-orig{margin:0;font-size:14px;line-height:1.45;color:var(--ink);min-height:2.9em}
.rt-trad{margin:5px 0 0;font-size:12.5px;line-height:1.4;color:var(--ink-3);min-height:1.4em}
.rt-trad:not(:empty)::before{content:"ES · ";font-family:var(--mono);font-size:10.5px;color:var(--tea-2)}
.rt-res{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:12px;font-weight:600;color:var(--ok);background:rgba(63,217,154,.12);border-radius:999px;padding:4px 10px;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.rt-res.ver{opacity:1;transform:none}
.rt-res::before{content:"✓"}
@media (max-width:560px){
  .red-tarj{width:100%;margin-top:-10%}
  .red-mapa .ciudad text{font-size:12px}
}

/* ── ejemplos de voz: reproductor por llamada ── */
.ej-idi{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:24px}
.ej-idi button{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass);font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:background-color .25s,border-color .25s,color .25s}
.ej-idi button:hover{border-color:var(--tea-2);color:var(--ink)}
.ej-idi button .cod{font-family:var(--mono);font-size:11px;font-weight:600;padding:3px 6px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--tea-3)}
.ej-idi button .n{font-size:12px;color:var(--ink-3);font-weight:500}
.ej-idi button[aria-pressed="true"]{background:var(--tea-2);border-color:var(--tea-2);color:#0B1115}
.ej-idi button[aria-pressed="true"] .cod{background:rgba(11,17,21,.14);color:#0B1115}
.ej-idi button[aria-pressed="true"] .n{color:#1B2934}
.ej-cuerpo{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:18px;align-items:start}
.ej-lista{display:flex;flex-direction:column;gap:8px;list-style:none}
.ej-lista li[hidden]{display:none}
.ej-it{width:100%;display:grid;grid-template-columns:44px 1fr;gap:2px 12px;align-items:center;text-align:left;padding:12px 14px 12px 12px;border-radius:14px;border:1px solid var(--line);background:var(--glass);cursor:pointer;transition:border-color .25s,background-color .25s,transform .25s var(--ease)}
.ej-it:hover{border-color:var(--line-2);transform:translateY(-1px)}
.ej-it[aria-current="true"]{border-color:var(--tea-2);background:rgba(124,92,255,.1)}
.ej-it .cod{grid-row:span 2;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:600;background:rgba(150,123,255,.12);color:var(--tea-3);position:relative}
.ej-it[aria-current="true"] .cod{background:var(--tea-2);color:#0B1115}
.ej-it .cod .eq{position:absolute;right:-4px;bottom:-4px;display:none;gap:1.5px;align-items:flex-end;height:14px;padding:2px 3px;border-radius:5px;background:var(--amb)}
.ej-it .cod .eq i{width:2px;height:40%;background:#101701;border-radius:1px;animation:onda .9s ease-in-out infinite}
.ej-it .cod .eq i:nth-child(2){animation-delay:-.3s}.ej-it .cod .eq i:nth-child(3){animation-delay:-.6s}
.ej-it.sonando .cod .eq{display:flex}
.ej-it b{font-size:14.5px;font-weight:600;line-height:1.3}
.ej-it small{font-size:12.5px;color:var(--ink-3);line-height:1.35}
.ej-rep{position:relative;border-radius:20px;padding:22px 22px 18px;background:linear-gradient(165deg,rgba(27,45,57,.92),rgba(13,20,25,.92));border:1px solid var(--line-2);box-shadow:0 40px 90px -50px rgba(124,92,255,.55);min-width:0}
.ej-carga{display:grid;place-items:center;min-height:320px;color:var(--ink-3);font-size:15px;text-align:center}
.ej-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ej-tags span{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.07);color:var(--ink-2)}
.ej-tags span.t{background:rgba(150,123,255,.15);color:var(--tea-3)}
.ej-tags span.e{background:rgba(182,242,58,.14);color:var(--amb)}
.ej-rep h3{font-family:var(--display);font-size:clamp(20px,2vw,25px);font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:0 0 8px}
.ej-sit{font-size:15px;color:var(--ink-2);margin:0 0 16px;max-width:70ch}
.ej-quien{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;color:var(--ink-3);margin:0 0 16px}
.ej-quien span{display:block}
.ej-quien i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--tea-2);margin-right:7px;vertical-align:0}
.ej-quien i.cli{background:var(--cor-2)}
.ej-quien b{color:var(--ink);font-weight:600}
.ej-ctrl{display:flex;align-items:center;gap:14px;padding:12px;border-radius:14px;background:rgba(0,0,0,.22);border:1px solid var(--line)}
.ej-pl{width:52px;height:52px;border-radius:50%;border:0;flex:none;display:grid;place-items:center;background:var(--tea-2);color:#0B1115;cursor:pointer;transition:transform .2s,box-shadow .3s}
.ej-pl:hover{transform:scale(1.06)}
.ej-pl .ic{width:21px;height:21px}
.ej-rep.sonando .ej-pl{box-shadow:0 0 0 8px rgba(150,123,255,.15)}
.ej-barra-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ej-barra{position:relative;height:30px;cursor:pointer;display:flex;align-items:center;gap:2px}
.ej-barra i{flex:1;border-radius:2px;background:rgba(255,255,255,.14);transition:background-color .2s}
.ej-barra i.ya{background:var(--tea-2)}
.ej-tiempos{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.ej-trad-b{flex:none;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:none;border-radius:10px;padding:8px 11px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}
.ej-trad-b .sw{position:relative;width:30px;height:18px;border-radius:999px;background:rgba(255,255,255,.14);transition:background-color .25s}
.ej-trad-b .sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .25s var(--ease)}
.ej-trad-b[aria-pressed="true"] .sw{background:var(--tea-2)}
.ej-trad-b[aria-pressed="true"] .sw::after{transform:translateX(12px)}
.ej-trad-b[hidden]{display:none}
.ej-trans{list-style:none;margin:14px 0 0;padding:0 4px 0 0;max-height:330px;overflow:auto;display:flex;flex-direction:column;gap:2px;scroll-behavior:smooth}
.ej-trans li{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:8px 10px;border-radius:10px;cursor:pointer;color:var(--ink-3);transition:background-color .3s,color .3s}
.ej-trans li:hover{background:rgba(255,255,255,.04)}
.ej-trans .q{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding-top:3px;color:var(--tea-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ej-trans li.cli .q{color:var(--cor-2)}
.ej-trans .t{font-size:15px;line-height:1.5}
.ej-trans .tr{display:block;font-size:13px;line-height:1.45;margin-top:3px;color:var(--ink-3)}
.ej-rep.sin-trad .ej-trans .tr{display:none}
.ej-trans li.ya{color:var(--ink-2)}
.ej-trans li.ahora{background:rgba(150,123,255,.11);color:var(--ink)}
.ej-trans li.ahora .tr{color:var(--ink-2)}
.ej-ficha{margin-top:16px;padding:14px 16px;border-radius:14px;border:1px solid rgba(150,123,255,.3);background:rgba(124,92,255,.07);font-size:14px}
.ej-ficha dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.ej-ficha h4{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tea-3)}
.ej-ficha h4 .ic{width:15px;height:15px}
.ej-ficha dt{color:var(--ink-3);font-size:13px;padding-top:1px}
.ej-ficha dd{margin:0;color:var(--ink-2);line-height:1.5}
.ej-ficha .res{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:rgba(63,217,154,.14);color:var(--ok)}
.ej-ficha .res.bad{background:rgba(255,92,108,.14);color:#FF8E99}
.ej-ficha .res.amb{background:rgba(182,242,58,.14);color:var(--amb)}
.ej-ficha .res.tea{background:rgba(150,123,255,.15);color:var(--tea-3)}
@media (max-width:980px){
  .ej-cuerpo{grid-template-columns:minmax(0,1fr)}
  .ej-lista{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
  .ej-lista li{flex:0 0 min(260px,78%);scroll-snap-align:start}
  .ej-it{height:100%}
}
@media (max-width:560px){
  .ej-rep{padding:16px 14px 14px;border-radius:16px}
  .ej-ctrl{flex-wrap:wrap;gap:10px}
  .ej-trad-b{width:100%;justify-content:center}
  .ej-trans li{grid-template-columns:1fr;gap:2px}
  .ej-ficha dl{grid-template-columns:1fr;gap:2px}
  .ej-ficha dd{margin-bottom:8px}
  .ej-idi button{font-size:13px;padding:6px 11px 6px 6px}
}

/* ── demo: cola de llamadas ── */
.cl-agente{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--a-ink2);background:#EDF0F3;padding:4px 9px;border-radius:999px;white-space:nowrap}
.cl-agente::before{content:"";width:7px;height:7px;border-radius:50%;background:#9FAFBC}
.cl-agente.on{color:var(--a-ok);background:#E6F7EF}
.cl-agente.on::before{background:currentColor;animation:parpadeo 1.4s infinite}
.cl-regla{display:flex;align-items:center;gap:9px;padding:6px 9px;font-size:12.5px;color:var(--a-ink3)}
.cl-regla .ic{width:15px;height:15px}
.cl-acc{display:flex;flex-wrap:wrap;gap:8px}
.cl-hora{font-family:var(--mono);font-weight:600;color:var(--a-ink)}
.cl-franjas{margin-bottom:12px}
.franjas{position:relative;display:grid;grid-template-columns:118px minmax(0,1fr);gap:5px 10px;align-items:center;font-size:12.5px}
.franjas .pais{display:flex;align-items:center;gap:7px;white-space:nowrap;font-weight:600;color:var(--a-ink2)}
.franjas .pais i{width:8px;height:8px;border-radius:50%;background:#D6DEE4;flex:none;transition:background-color .3s}
.franjas .pais.abierta i{background:var(--a-ok);box-shadow:0 0 0 3px rgba(22,160,106,.15)}
.franjas .pista{position:relative;height:16px;border-radius:5px;background:#EFF2F4;overflow:hidden}
.franjas .seg{position:absolute;top:0;bottom:0;left:var(--a);width:var(--w);background:#C1B4F2;border-radius:4px}
.franjas .pais.abierta+.pista .seg{background:#8F76F6}
.franjas .horas{position:relative;height:14px;font-family:var(--mono);font-size:10px;color:var(--a-ink3)}
.franjas .horas span{position:absolute;transform:translateX(-50%);left:var(--a)}
.franjas .ahora{position:absolute;top:-4px;bottom:16px;width:2px;background:var(--a-cor);left:calc(128px + (100% - 128px) * var(--p,0));transition:left .3s linear;pointer-events:none;border-radius:2px}
.franjas .ahora::before{content:"";position:absolute;top:-3px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--a-cor)}
.cl-dos{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;align-items:start}
.cl-tabla-c{padding-top:4px}
.cl-tabla-c .pest{margin-bottom:6px}
.cl-tabla td.emp b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.cl-tabla td.emp small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.cl-tabla td.h{font-family:var(--mono);font-size:12px;color:var(--a-ink2);white-space:nowrap}
.cl-tabla td.int{font-family:var(--mono);font-size:12px;white-space:nowrap;color:var(--a-ink3)}
.cl-tabla tr.ya td{opacity:.45}
.cl-tabla tr.ahora td{background:#E9E5FA}
.cl-tabla tr.ahora td:first-child{box-shadow:inset 3px 0 0 #7C5CFF}
.cl-vacia td{padding:22px 10px!important;text-align:center;color:var(--a-ink3)}
.cl-linea{display:flex;flex-direction:column;gap:10px;min-width:0}
.lin{background:#fff;border:1px solid var(--a-line);border-radius:12px;padding:12px 14px;animation:msgIn .5s var(--ease)}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}}
.lin.entra{border-color:#B0E54D;box-shadow:0 0 0 3px rgba(146,213,20,.12)}
.lin.libre{display:grid;place-items:center;text-align:center;min-height:200px;color:var(--a-ink3);border-style:dashed;font-size:13.5px}
.lin.libre .ic{width:28px;height:28px;color:#9FAFBC;margin:0 auto 6px}
.lin-cab{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.lin-cab .t{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--a-ink3)}
.lin-quien{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;margin-bottom:8px}
.lin-quien .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:800;color:#fff;background:var(--l,#3B6FD8)}
.lin-quien b{display:block;font-size:13.5px;font-weight:700;line-height:1.25}
.lin-quien small{display:block;font-size:11.5px;color:var(--a-ink3);line-height:1.3}
.lin-onda{display:flex;align-items:center;gap:2px;height:20px}
.lin-onda i{width:3px;height:20%;border-radius:2px;background:#7C5CFF;opacity:.35}
.lin.habla .lin-onda i{animation:onda 1s ease-in-out infinite;opacity:1}
.lin.entra .lin-onda i{background:#92D514}
.lin-onda i:nth-child(2){animation-delay:-.3s!important}.lin-onda i:nth-child(3){animation-delay:-.6s!important}.lin-onda i:nth-child(4){animation-delay:-.15s!important}.lin-onda i:nth-child(5){animation-delay:-.45s!important}
.lin-tx{display:flex;flex-direction:column;gap:6px;min-height:84px}
.lin-tx p{margin:0;font-size:12.8px;line-height:1.45;padding-left:9px;border-left:2.5px solid #9D87F7;animation:msgIn .45s var(--ease)}
.lin-tx p.cli{border-left-color:#B9ACF0}
.lin-tx p small{display:block;font-size:11.5px;color:var(--a-ink3);margin-top:1px}
.lin-tx p.sis{border-left:0;padding-left:0;color:var(--a-ink3);font-style:italic}
.lin-res{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px;padding-top:9px;border-top:1px dashed #D6DEE4;font-size:12px;color:var(--a-ink2)}
.lin-res .ok-ficha{display:inline-flex;align-items:center;gap:5px;color:var(--a-ok);font-weight:600}
.lin-res .ok-ficha .ic{width:13px;height:13px}
.cl-reg{margin-top:12px;border-radius:11px;background:#131C24;color:#C4B8F3;font-family:var(--mono);font-size:12px;padding:10px 12px;display:flex;flex-direction:column;gap:3px;min-height:92px}
.cl-reg div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:fila .4s var(--ease)}
.cl-reg div b{color:#B6F23A;font-weight:600}
.cl-reg div:last-child::after{content:"";display:inline-block;width:7px;height:12px;background:#BFADFF;margin-left:4px;vertical-align:-1px;animation:parpadeo 1s steps(2) infinite}
@media (max-width:1100px){.cl-dos{grid-template-columns:1fr}.lin.libre{min-height:120px}}
@media (max-width:860px){.cl-regla{display:none}}
@media (max-width:640px){
  .franjas{grid-template-columns:76px minmax(0,1fr);font-size:11.5px}
  .franjas .ahora{left:calc(86px + (100% - 86px) * var(--p,0))}
  .cl-tabla .m-ocultar{display:none}
  .cl-tabla{font-size:12.5px}.cl-tabla td,.cl-tabla th{padding:7px 4px}
  .cl-tabla td.emp b,.cl-tabla td.emp small{max-width:150px}
  .cl-tabla .tag{font-size:10.5px;padding:3px 6px}.cl-tabla .tag .ic{display:none}
  #cl-app .caja{padding:10px 8px}
  .app-h .cl-acc{width:100%}.app-h .cl-acc .app-btn:not([aria-label]){flex:1;justify-content:center}
  .cl-reg{font-size:11px}
}

/* ── reglas del agente (sección clara) ── */
.cl-reglas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none}
.cl-reglas li{padding:24px;border-radius:18px;background:#fff;border:1px solid var(--l-line);box-shadow:0 16px 40px -28px rgba(21,31,39,.35)}
.cl-reglas .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#E2DCF9;color:#4419F5;margin-bottom:16px}
.cl-reglas .ico .ic{width:22px;height:22px}
.cl-reglas h3{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.015em;margin:0 0 8px}
.cl-reglas p{font-size:15px;color:var(--l-ink2);margin:0}
.cl-reglas li.amb .ico{background:#EDFDCE;color:#5E8D08}
@media (max-width:1000px){.cl-reglas{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cl-reglas{grid-template-columns:1fr}}

/* ═══ TEMA CLARO (solo con <html data-tema="claro">; ver estilo.css) ═══ */
/* héroe: mapa y tarjeta de la llamada */
html[data-tema="claro"] .red-mapa .tierra circle{fill:color-mix(in srgb,var(--acento) 48%,transparent)}
html[data-tema="claro"] .red-mapa .ciudad.entra.on circle{fill:#7DB61C}
html[data-tema="claro"] .red-tarj{background:rgba(255,255,255,.97);box-shadow:0 30px 60px -28px rgba(22,33,43,.45),var(--sombra-1)}
html[data-tema="claro"] .red-tarj.entra .rt-dir{background:rgba(182,242,58,.3)}
html[data-tema="claro"] .rt-idi{background:rgba(22,33,43,.06)}
html[data-tema="claro"] .rt-av{color:#fff}
html[data-tema="claro"] .red-tarj.entra .rt-onda i{background:#7DB61C}
html[data-tema="claro"] .rt-res{background:rgba(22,160,106,.12)}
/* ejemplos de voz */
html[data-tema="claro"] .ej-idi button{box-shadow:0 1px 2px rgba(22,33,43,.05)}
html[data-tema="claro"] .ej-idi button .cod{background:color-mix(in srgb,var(--acento) 30%,transparent)}
html[data-tema="claro"] .ej-idi button[aria-pressed="true"]{color:#fff}
html[data-tema="claro"] .ej-idi button[aria-pressed="true"] .cod{background:rgba(255,255,255,.2);color:#fff}
html[data-tema="claro"] .ej-idi button[aria-pressed="true"] .n{color:rgba(255,255,255,.85)}
html[data-tema="claro"] .ej-it{box-shadow:0 1px 2px rgba(22,33,43,.05)}
html[data-tema="claro"] .ej-it[aria-current="true"]{background:var(--acento-suave);box-shadow:var(--sombra-1)}
html[data-tema="claro"] .ej-it[aria-current="true"] .cod{color:#fff}
html[data-tema="claro"] .ej-it .cod .eq{background:var(--viva-amb)}
html[data-tema="claro"] .ej-it .cod .eq i{background:#16212B}
html[data-tema="claro"] .ej-rep{background:linear-gradient(165deg,#FFFFFF,var(--acento-suave));box-shadow:0 40px 80px -50px color-mix(in srgb,var(--acento) 100%,transparent),var(--sombra-1)}
html[data-tema="claro"] .ej-tags span{background:rgba(22,33,43,.06)}
html[data-tema="claro"] .ej-tags span.t{background:color-mix(in srgb,var(--acento) 36%,transparent)}
html[data-tema="claro"] .ej-tags span.e{background:rgba(182,242,58,.3)}
html[data-tema="claro"] .ej-ctrl{background:var(--bg)}
html[data-tema="claro"] .ej-pl{color:#fff}
html[data-tema="claro"] .ej-rep.sonando .ej-pl{box-shadow:0 0 0 8px color-mix(in srgb,var(--acento) 29%,transparent)}
html[data-tema="claro"] .ej-barra i{background:rgba(22,33,43,.13)}
html[data-tema="claro"] .ej-barra i.ya{background:var(--acento)}
html[data-tema="claro"] .ej-trad-b{background:#fff}
html[data-tema="claro"] .ej-trad-b .sw{background:rgba(22,33,43,.16)}
html[data-tema="claro"] .ej-trad-b .sw::after{box-shadow:0 1px 3px rgba(22,33,43,.3)}
html[data-tema="claro"] .ej-trad-b[aria-pressed="true"] .sw{background:var(--tea-2)}
html[data-tema="claro"] .ej-trans li:hover{background:rgba(22,33,43,.04)}
html[data-tema="claro"] .ej-trans li.ahora{background:color-mix(in srgb,var(--acento) 30%,transparent)}
html[data-tema="claro"] .ej-ficha{background:var(--acento-suave);border-color:var(--acento-borde)}
html[data-tema="claro"] .ej-ficha .res{background:rgba(22,160,106,.12)}
html[data-tema="claro"] .ej-ficha .res.bad{background:rgba(214,59,77,.1);color:#B42B3C}
html[data-tema="claro"] .ej-ficha .res.amb{background:rgba(182,242,58,.3)}
html[data-tema="claro"] .ej-ficha .res.tea{background:color-mix(in srgb,var(--acento) 39%,transparent)}
/* demo: registro claro, como el resto de la app */
html[data-tema="claro"] .cl-reg{background:var(--acento-suave);border:1px solid var(--acento-borde);color:#3B2A9E}
html[data-tema="claro"] .cl-reg div b{color:#4A770A}
html[data-tema="claro"] .cl-reg div:last-child::after{background:var(--acento)}
/* cajas de icono que eran lila: amarillas con tinta */
html[data-tema="claro"] .cl-reglas .ico{background:var(--acento-medio);color:var(--tinta)}