/* ===== Temas (se eligen en Ajustes → Diseño y se guardan por usuario). Regla de Nerio: fondo oscuro → botones CLAROS; tema claro → botones OSCUROS.
   El azul #2F5FD0 (azul rey del chat) va como borde y acento, nunca como relleno de botón sobre fondo azul. ===== */
:root,html[data-tema=rojo]{--fondo:#0c0608;--panel:#1a0d11;--panel2:#26141a;--panel3:#2b161c;--panel0:#14090c;--borde:#5a2a33;--texto:#f6ecea;--suave:#c4a9ac;
 --acento:#d4a537;--acento-tx:#f0c35a;--btn:linear-gradient(180deg,#fff0bd 0%,#f3cd6a 50%,#d9ac3e 100%);--btn-tx:#1a1200;--btn-borde:#a77d1c;--btn-luz:#ffffffaa;
 --sec:linear-gradient(180deg,#f8efd8,#e4d3a6);--sec-tx:#1a1200;
 --oro:var(--acento);--oro2:var(--acento-tx);--ok:#3ecf8e;--mal:#ff8080;--aviso:#f5b84a;--azul:#7db4ff;
 --bg-ok:#12392b;--bg-mal:#4a1820;--bg-aviso:#3a2f12;--bg-info:#2a1b3a;--borde-ok:#1f6a4e;--borde-mal:#8a3342;--chip-bg:#3a2024;--chip-tx:#ecd2c2;
 --hdr1:#2a0d13;--hdr2:#1d0b10;--hero:radial-gradient(120% 90% at 50% 0%,#5a1019 0%,#1d0b10 55%,var(--fondo) 100%);--hero-luz:#a3171f99;
 --tile:linear-gradient(150deg,#4a1219 0%,#1f0b10 55%,#3b1016 100%);--tile-borde:#b3202b;--sombra:0 0 14px #a3171f55;--acceso:linear-gradient(90deg,#4a1018,var(--panel));--acceso-borde:#b3202b;--placa:#fff5ee;--overlay:#000a}
html[data-tema=azul]{--sec:linear-gradient(180deg,#eef2fc,#d6dff2);--sec-tx:#0a1330;--fondo:#050a18;--panel:#0b1530;--panel2:#101f45;--panel3:#14275a;--panel0:#070e22;--borde:#24407f;--texto:#eef3ff;--suave:#aebbdc;
 --acento:#2F5FD0;--acento-tx:#9db9ff;--btn:linear-gradient(180deg,#fbfdff 0%,#dfe7f7 45%,#b9c6e3 100%);--btn-tx:#091229;--btn-borde:#2F5FD0;--btn-luz:#ffffffaa;
 --oro:var(--acento);--oro2:var(--acento-tx);--ok:#43d69a;--mal:#ff8080;--aviso:#ffc65c;--azul:#8fb8ff;
 --bg-ok:#0e3a2c;--bg-mal:#4a1c28;--bg-aviso:#3d3210;--bg-info:#14306b;--borde-ok:#1f6a4e;--borde-mal:#8a3342;--chip-bg:#16295c;--chip-tx:#c9d8ff;
 --hdr1:#16306f;--hdr2:#0b1a40;--hero:radial-gradient(120% 90% at 50% 0%,#1d3f94 0%,#0b1a40 52%,var(--fondo) 100%);--hero-luz:#2F5FD088;
 --tile:linear-gradient(150deg,#1b3677 0%,#0e1d45 55%,#173069 100%);--tile-borde:#2F5FD0;--sombra:0 0 14px #2F5FD044;--acceso:linear-gradient(90deg,#1a3270,var(--panel));--acceso-borde:#2F5FD0;--placa:#f2f6ff;--overlay:#000a}
html[data-tema=oro]{--sec:linear-gradient(180deg,#f8efd6,#e6d5a4);--sec-tx:#1d1400;--fondo:#0b0904;--panel:#17120a;--panel2:#231b0d;--panel3:#2e2410;--panel0:#0f0c06;--borde:#6a5016;--texto:#fbf3e0;--suave:#c9b98f;
 --acento:#d4a537;--acento-tx:#f2c75e;--btn:linear-gradient(180deg,#fff7dc 0%,#f1d687 50%,#d9ad45 100%);--btn-tx:#1d1400;--btn-borde:#d4a537;--btn-luz:#ffffffaa;
 --oro:var(--acento);--oro2:var(--acento-tx);--ok:#43d69a;--mal:#ff8080;--aviso:#ffc65c;--azul:#8fb8ff;
 --bg-ok:#0e3a2c;--bg-mal:#4a1c28;--bg-aviso:#4a3a12;--bg-info:#2b2a55;--borde-ok:#1f6a4e;--borde-mal:#8a3342;--chip-bg:#35290f;--chip-tx:#f1dba6;
 --hdr1:#3a2a0a;--hdr2:#1c1407;--hero:radial-gradient(120% 90% at 50% 0%,#5a4210 0%,#1c1407 52%,var(--fondo) 100%);--hero-luz:#d4a53788;
 --tile:linear-gradient(150deg,#3a2c0e 0%,#1d1608 55%,#33270d 100%);--tile-borde:#d4a537;--sombra:0 0 14px #d4a53744;--acceso:linear-gradient(90deg,#3d2d0c,var(--panel));--acceso-borde:#d4a537;--placa:#fff8e6;--overlay:#000a}
html[data-tema=verde]{--sec:linear-gradient(180deg,#e9f8f0,#c9e6d7);--sec-tx:#04170e;--fondo:#03100a;--panel:#0a1d14;--panel2:#102a1d;--panel3:#16382a;--panel0:#06140d;--borde:#23704b;--texto:#ecfff5;--suave:#a8cdb9;
 --acento:#1f9d6a;--acento-tx:#6fe8b3;--btn:linear-gradient(180deg,#f3fff9 0%,#cdf0de 50%,#9fd8bb 100%);--btn-tx:#04170e;--btn-borde:#1f9d6a;--btn-luz:#ffffffaa;
 --oro:var(--acento);--oro2:var(--acento-tx);--ok:#6fe8b3;--mal:#ff8c8c;--aviso:#ffc65c;--azul:#8fb8ff;
 --bg-ok:#0f4030;--bg-mal:#4a1c28;--bg-aviso:#3d3210;--bg-info:#143a55;--borde-ok:#26805a;--borde-mal:#8a3342;--chip-bg:#123a28;--chip-tx:#c5f2db;
 --hdr1:#0f4a30;--hdr2:#07200f;--hero:radial-gradient(120% 90% at 50% 0%,#146b46 0%,#07200f 52%,var(--fondo) 100%);--hero-luz:#1f9d6a88;
 --tile:linear-gradient(150deg,#125339 0%,#08241a 55%,#0f4730 100%);--tile-borde:#1f9d6a;--sombra:0 0 14px #1f9d6a44;--acceso:linear-gradient(90deg,#10503a,var(--panel));--acceso-borde:#1f9d6a;--placa:#f2fff8;--overlay:#000a}
html[data-tema=claro]{--sec:linear-gradient(180deg,#4a5f9e,#34487f);--sec-tx:#ffffff;--fondo:#f1f5fc;--panel:#ffffff;--panel2:#e8eefb;--panel3:#dbe5f8;--panel0:#f7f9fe;--borde:#b3c3e6;--texto:#0b1630;--suave:#46557a;
 --acento:#2F5FD0;--acento-tx:#17409f;--btn:linear-gradient(180deg,#3a58b0 0%,#1f3a86 55%,#12266a 100%);--btn-tx:#ffffff;--btn-borde:#0c1c52;--btn-luz:#ffffff55;
 --oro:var(--acento);--oro2:var(--acento-tx);--ok:#07663c;--mal:#a32019;--aviso:#7a4700;--azul:#17409f;
 --bg-ok:#d6f3e4;--bg-mal:#fde1df;--bg-aviso:#fff0c7;--bg-info:#dbe6ff;--borde-ok:#7cc9a3;--borde-mal:#e59a95;--chip-bg:#dbe5f8;--chip-tx:#1b2f66;
 --hdr1:#ffffff;--hdr2:#e3ebfa;--hero:linear-gradient(180deg,#dfe9fb 0%,#f1f5fc 100%);--hero-luz:#2F5FD055;
 --tile:linear-gradient(150deg,#ffffff 0%,#e3ecfc 60%,#d4e1f8 100%);--tile-borde:#2F5FD0;--sombra:0 2px 10px #2F5FD033;--acceso:linear-gradient(90deg,#e3ecfc,#ffffff);--acceso-borde:#2F5FD0;--placa:#ffffff;--overlay:#0008}
*{box-sizing:border-box}body{margin:0;background:var(--fondo);color:var(--texto);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--acento-tx)}button,input,select,textarea{font:inherit;color:inherit}
header.top{display:flex;align-items:center;gap:14px;padding:10px 18px;background:linear-gradient(90deg,var(--hdr1),var(--hdr2));border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.logo{font-weight:800;letter-spacing:.5px;font-size:20px;color:var(--acento-tx)}.logo small{display:block;font-size:10px;color:var(--suave);font-weight:500;letter-spacing:1px;text-transform:uppercase}
.logo img{width:40px;height:40px;border-radius:8px;vertical-align:middle;margin-right:8px}.logo span{display:inline-block;width:26px;height:26px;border-radius:7px;background:var(--acento);color:#fff;text-align:center;line-height:26px;margin-right:8px;font-size:17px}
select,input,textarea{background:var(--panel2);border:1px solid var(--borde);border-radius:9px;padding:8px 10px;width:100%}textarea{min-height:90px;resize:vertical}
header select{width:auto;min-width:170px}.esp{flex:1}
nav.tabs{display:flex;gap:4px;padding:8px 14px;overflow-x:auto;background:var(--panel);border-bottom:1px solid var(--borde)}
nav.tabs button{background:none;border:0;padding:9px 14px;border-radius:9px;color:var(--suave);cursor:pointer;white-space:nowrap;font-weight:600}
nav.tabs button.on{background:var(--panel2);color:var(--acento-tx)}nav.tabs button .n{background:var(--btn);color:var(--btn-tx);border-radius:99px;font-size:11px;padding:1px 7px;margin-left:6px}
main{max-width:1180px;margin:0 auto;padding:18px}h2{margin:.2em 0 .6em;font-size:20px}h3{margin:.2em 0 .5em;font-size:16px;color:var(--acento-tx)}
.tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:14px;padding:16px;margin-bottom:14px}
.fila{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}.fila>*{flex:1 1 260px}.campo{margin-bottom:11px}.campo label{display:block;color:var(--suave);font-size:13px;margin-bottom:4px}
.ayuda{color:var(--suave);font-size:12.5px;margin-top:3px}
button.b{background:var(--btn);color:var(--btn-tx);border:1px solid var(--btn-borde);box-shadow:inset 0 1px 0 var(--btn-luz);border-radius:10px;padding:9px 16px;font-weight:700;cursor:pointer}button.b:hover{filter:brightness(1.07)}
button.b.sec{background:var(--sec);box-shadow:none;color:var(--sec-tx);border:1px solid var(--btn-borde)}button.b.mal{background:var(--bg-mal);background-image:none;box-shadow:none;color:var(--mal);border:1px solid var(--borde-mal)}button.b.ok{background:var(--bg-ok);background-image:none;box-shadow:none;color:var(--ok);border:1px solid var(--borde-ok)}
button.b:disabled{opacity:.5;cursor:default}.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.etq{display:inline-block;border-radius:99px;padding:2px 10px;font-size:12px;font-weight:700;background:var(--panel2);color:var(--suave)}
.etq.por_aprobar,.etq.programado,.etq.sin_conectar,.etq.falta_autorizar{background:var(--bg-aviso);color:var(--aviso)}.etq.publicado,.etq.lista,.etq.aprobado,.etq.listo{background:var(--bg-ok);color:var(--ok)}
.etq.con_error,.etq.error,.etq.rechazado,.etq.parcial{background:var(--bg-mal);color:var(--mal)}.etq.en_cola,.etq.publicando,.etq.procesando{background:var(--bg-info);color:var(--azul)}
.red{display:inline-block;font-size:11px;font-weight:800;border-radius:6px;padding:2px 7px;margin-right:4px;background:var(--chip-bg);color:var(--chip-tx);text-transform:uppercase}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.cal .dia{min-height:92px;background:var(--panel);border:1px solid var(--borde);border-radius:9px;padding:5px;font-size:12px;overflow:hidden}
.cal .dia.hoy{border-color:var(--acento)}.cal .dia.fuera{opacity:.35}.cal .cab{color:var(--suave);text-align:center;font-weight:700;padding:4px}
.cal .item{display:block;width:100%;text-align:left;background:var(--panel2);border:0;border-left:3px solid var(--acento);border-radius:5px;padding:2px 5px;margin-top:3px;cursor:pointer;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item.por_aprobar{border-color:var(--aviso)}.item.publicado{border-color:var(--ok)}.item.con_error,.item.rechazado,.item.parcial{border-color:var(--mal)}.item.programado,.item.en_cola{border-color:var(--azul)}
.lista>.fila{padding:12px;border-bottom:1px solid var(--borde)}.lista>.fila:last-child{border:0}
video{width:100%;max-height:420px;background:#000;border-radius:10px}.v9x16{max-width:230px}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.medio{background:var(--panel2);border:1px solid var(--borde);border-radius:12px;padding:10px}.medio video{max-height:260px}
.barra{height:9px;background:var(--panel2);border-radius:9px;overflow:hidden}.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--acento),var(--acento-tx));transition:width .4s}
.login{max-width:380px;margin:12vh auto;padding:0 16px}.error{color:var(--mal);margin:8px 0}.aviso{background:var(--bg-aviso);color:var(--aviso);padding:10px 12px;border-radius:10px;margin:10px 0}
.modal{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:flex-start;justify-content:center;padding:4vh 12px;overflow:auto;z-index:20}.modal>div{background:var(--panel);border:1px solid var(--borde);border-radius:16px;padding:18px;width:min(760px,100%)}
.vacio{color:var(--suave);padding:22px;text-align:center}.mono{font-family:ui-monospace,monospace;font-size:12.5px;background:var(--panel2);padding:2px 6px;border-radius:5px}
@media(max-width:700px){.cal .dia{min-height:60px}.cal .item{font-size:10px}main{padding:10px}}
input,select,textarea{font-size:16px}
@media(max-width:700px){button.b,nav.tabs button{min-height:44px}.modal>div{padding:12px}}
@media(max-width:700px){.cal{grid-template-columns:1fr}.cal .cab,.cal .fuera,.cal .dia:not(:has(.item)):not(.hoy){display:none}.cal .dia{min-height:0}.cal .item{font-size:14px;min-height:44px;white-space:normal}}

.logo-grande{text-align:center;margin:8px 0 22px}.logo-grande img{width:160px;height:160px;object-fit:contain;border-radius:22px;display:block;margin:0 auto 10px}.logo-grande .nombre{font-weight:800;font-size:32px;letter-spacing:.5px;color:var(--acento-tx)}.logo-grande small{display:block;font-size:11px;color:var(--suave);letter-spacing:1px;text-transform:uppercase;margin-top:4px}
@media(max-width:700px){header.top{gap:8px;padding:8px 12px}header.top .logo{order:1;flex:1 1 auto;font-size:18px}header.top .logo img{width:34px;height:34px}header.top .quien,header.top .esp{display:none}header.top .salir{order:2;margin-top:0}header.top select{order:3;flex:1 1 60%;min-width:0}header.top .marcabtn{order:4;margin-top:0}
.fila.mesnav{flex-wrap:nowrap}.fila.mesnav>*{flex:0 1 auto}.fila.mesnav>h2{flex:1 1 auto!important;min-width:0;margin:0}.fila.mesnav>h2::first-letter{text-transform:uppercase}.fila.mesnav>.flechas{flex:0 0 auto!important;flex-wrap:nowrap;margin-top:0}.fila.mesnav .b{padding-left:12px;padding-right:12px}}
/* canales múltiples: avatar, tarjetas, cupo */
.av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 38px;background:var(--panel2)}.av.ini{display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:var(--acento-tx);border:1px solid var(--borde)}
.canales-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-bottom:12px}
.canal-card{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--borde);border-radius:12px;padding:12px}.canal-card .cuerpo{min-width:0;flex:1}.canal-card.off{opacity:.65;border-style:dashed}
.canal-card .btns button{padding:6px 10px;font-size:13px}.canal-card[hidden],.canal[hidden]{display:none}
.canales{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;max-height:300px;overflow:auto;margin:8px 0 12px}
.canal{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--borde);border-radius:10px;padding:7px 9px;cursor:pointer;margin:0!important}.canal .av{width:30px;height:30px;flex-basis:30px}
.canal small{display:block;color:var(--suave);font-size:11.5px;font-weight:400}.canal small.aviso-mini{color:var(--aviso)}.canal input{flex:0 0 auto}
button.b.mini{padding:4px 10px;font-size:12px}.grupo{margin-bottom:6px}
.barra.lleno i{background:linear-gradient(90deg,#ff9a5a,var(--mal))}
.campo .canal{display:flex;margin:0}
/* clientes: catálogo, bandeja, plan */
.aviso.ok{background:var(--bg-ok);color:var(--ok)}.aviso.mal{background:var(--bg-mal);color:var(--mal)}.aviso button.b{margin-left:8px}
.grid3.arts{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.art .fotos{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
img.mini{width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer}img.mini.sel{border-color:var(--acento)}
.lista>.fila.nuevo{background:var(--panel3)}.medio .fila{gap:8px}.medio .fila>*{flex:1 1 120px}

/* conexión fácil y modo asistido */
.etq.tu_turno{background:var(--bg-aviso);color:var(--aviso)}
.tarjeta textarea[readonly]{min-height:70px}
a.b{background:var(--btn);color:var(--btn-tx);border:1px solid var(--btn-borde);box-shadow:inset 0 1px 0 var(--btn-luz);border-radius:10px;padding:9px 16px;font-weight:700;cursor:pointer}a.b:hover{filter:brightness(1.07)}a.b.sec{background:var(--panel2);color:var(--texto);border:1px solid var(--borde)}
@media(max-width:700px){a.b{min-height:44px;line-height:26px}}

/* Redes: grupos por red, tarjetas compactas, “i” */
.ico{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--placa);border:1px solid var(--borde);flex:0 0 38px}
.ico::before{content:'';width:20px;height:20px;background:var(--c);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ico.g{width:46px;height:46px;flex-basis:46px;border-radius:14px}.ico.g::before{width:26px;height:26px}
.redes-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.redes-cab h2{margin:0;flex:0 0 auto}.redes-cab .chip{margin-right:auto}
.chip{display:inline-block;font-size:11.5px;font-weight:700;border-radius:99px;padding:2px 9px;background:var(--panel2);color:var(--suave);border:1px solid var(--borde)}.chip.grande{font-size:12.5px;padding:4px 11px;color:var(--texto)}
button.i{width:30px;height:30px;border-radius:50%;border:1px solid var(--borde);background:var(--panel2);color:var(--suave);font:italic 700 15px/1 Georgia,serif;cursor:pointer;flex:0 0 30px;padding:0}button.i.on{background:var(--btn);color:var(--btn-tx);border-color:var(--btn-borde)}
.info-panel{background:var(--panel2);border:1px solid var(--borde);border-radius:12px;padding:10px 12px;margin:8px 0;font-size:13px;color:var(--suave)}.info-panel p{margin:.3em 0}.info-panel[hidden],.acciones[hidden],.mas[hidden]{display:none}
.red-grupos{display:grid;gap:10px;margin-top:10px}
.red-grupo{background:var(--panel);border:1px solid var(--borde);border-radius:14px;padding:10px 10px 8px}
.red-cab{display:flex;align-items:center;gap:11px;padding:2px 2px 8px}.red-tit{min-width:0}.red-tit b{display:block;font-size:16px}.red-tit small{color:var(--suave);font-size:12.5px}
.fila-canal{border-top:1px solid var(--borde)}
button.canal-fila{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;text-align:left;padding:8px 2px;min-height:48px;cursor:pointer;color:var(--texto)}
.canal-fila .av{width:30px;height:30px;flex-basis:30px;font-size:13px}.canal-fila .nom{flex:1;min-width:0}.canal-fila .nom b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.canal-fila .nom small{display:block;color:var(--suave);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.canal-fila.off{opacity:.6}.canal-fila .flecha{color:var(--suave);font-size:20px;transition:transform .15s}.fila-canal.abierta .flecha{transform:rotate(90deg)}
.estado{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--suave);white-space:nowrap}.estado i{width:8px;height:8px;border-radius:50%;background:var(--suave)}.estado.est-ok i{background:var(--ok)}.estado.est-mal{color:var(--mal)}.estado.est-mal i{background:var(--mal)}.estado.est-aviso{color:var(--aviso)}.estado.est-aviso i{background:var(--aviso)}
.acciones{padding:2px 2px 10px}.acciones .btns button{padding:7px 12px;font-size:13px}
button.vermas{width:100%;margin-top:6px}
h3.sub{margin-top:22px}
.red-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:10px}
.red-tile{background:var(--panel);border:1px solid var(--borde);border-radius:14px;padding:11px;display:flex;flex-direction:column;gap:2px}
.tile-cab{display:flex;justify-content:space-between;align-items:flex-start}.tile-nom{font-size:15px;margin-top:6px}.tile-sub{color:var(--suave);font-size:12px;min-height:16px}
.tile-btns{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.tile-btns button.b{flex:1 1 70px;padding:8px 8px;font-size:13px}.red-tile .info-panel{margin-top:8px}
@media(max-width:700px){.red-tiles{grid-template-columns:1fr 1fr}.tile-btns button.b{min-height:44px}button.i{width:44px;height:44px;flex-basis:44px}}

button.red-cab{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;text-align:left;color:var(--texto);padding:2px;cursor:pointer;min-height:48px}.red-cab .red-tit{flex:1}.red-cab .flecha{color:var(--suave);font-size:22px;transition:transform .15s;transform:rotate(90deg)}.red-grupo.plegado .red-cab .flecha{transform:none}
.red-grupo[hidden],.filas[hidden]{display:none}.red-grupo.plegado{padding-bottom:10px}.red-grupo:not(.plegado) .red-cab{padding-bottom:8px}
.tile-btns{flex-wrap:nowrap}.tile-btns button.b{flex:1 1 0;min-width:0;padding:8px 4px}
.red-grupos>*,.red-grupo,.filas,.fila-canal{min-width:0;max-width:100%}button.canal-fila{min-width:0;overflow:hidden}.canal-fila .estado,.canal-fila .chip{flex:0 0 auto}

/* Las 4 prioritarias: grandes y arriba; el resto en “Más redes” */
.grandes{display:grid;gap:12px;margin-top:12px}
.red-grande{background:linear-gradient(180deg,var(--panel),var(--panel0));border:1px solid var(--borde);border-radius:16px;padding:14px 12px 12px}
.grande-cab{display:flex;align-items:center;gap:13px;padding-bottom:6px}.grande-cab .ico.g{width:54px;height:54px;flex-basis:54px;border-radius:16px}.grande-cab .ico.g::before{width:30px;height:30px}
.grande-cab .red-tit{flex:1;min-width:0}.grande-cab .red-tit b{font-size:19px}.grande-cab .red-tit small{display:block;color:var(--suave);font-size:13px}.grande-cab small.por-atender{color:var(--aviso)}
.grande-btns{display:flex;gap:8px;margin-top:10px}.grande-btns button.b{flex:1 1 0;min-height:48px;font-size:15px}
.red-grande .filas{margin-top:2px}
button.mas-btn{display:flex;align-items:center;gap:8px;width:100%;margin-top:16px;background:var(--panel);border:1px dashed var(--borde);border-radius:14px;color:var(--texto);padding:10px 14px;min-height:56px;text-align:left;cursor:pointer;flex-wrap:wrap}
.mas-btn>span:first-child{font-weight:800;font-size:16px}.mas-btn small{flex:1 1 100%;order:3;color:var(--suave);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mas-btn .n{margin-left:auto;background:var(--bg-aviso);color:var(--aviso);border-radius:99px;padding:2px 9px;font-size:11.5px;font-weight:700}
.mas-btn .flecha{margin-left:auto;color:var(--suave);font-size:22px;transition:transform .15s}.mas-btn .n+.flecha{margin-left:0}.mas-btn.on .flecha{transform:rotate(90deg)}.mas-btn.on{border-style:solid}
.mas-redes{margin-top:10px}.mas-redes[hidden]{display:none}
button.mas-btn{max-width:100%;overflow:hidden;box-sizing:border-box}.mas-btn small{min-width:0}
.grandes,.red-grupos{grid-template-columns:minmax(0,1fr)}.grandes>*{min-width:0}
/* video con tu canción */
.hoja{display:flex;flex-direction:column;gap:10px;max-height:92vh}.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{min-height:44px;padding:0 14px;border-radius:22px;border:1px solid var(--borde);background:transparent;color:inherit;font:inherit}.chip.on{background:var(--btn);color:var(--btn-tx);border-color:var(--btn-borde)}
.lista-canciones{overflow:auto;display:flex;flex-direction:column;gap:6px;max-height:55vh}.cancion{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:6px 10px;border:1px solid var(--borde);border-radius:12px;cursor:pointer}.cancion.on{outline:2px solid var(--acento)}.cancion-txt{display:flex;flex-direction:column;min-width:0}.cancion-txt b{overflow-wrap:anywhere}.cancion-txt small{opacity:.7}
.mini-foto{position:relative;display:inline-block}.mini-foto .quitar{position:absolute;top:-6px;right:-6px;width:28px;height:28px;border-radius:14px;border:0;background:#000c;color:#fff}.previa-short{width:100%;max-width:260px;border-radius:12px;display:block;margin:8px 0}

/* Rediseño 22/10: inicio con cuadrícula de redes (rojo y oro del escudo de Pregona) */
:root{--rojo:#a3171f;--rojo2:#c4222b}
header.hero{padding:10px 14px 4px;background:var(--hero);border-bottom:1px solid var(--borde)}
.hero-top{display:flex;gap:8px;align-items:center}.hero-top select{flex:1 1 0;min-width:0;width:auto}.hero-top button.b{flex:0 0 auto;min-height:44px;padding:8px 12px}
.hero-logo{text-align:center;padding:10px 0 12px}.hero-logo img{width:92px;height:92px;object-fit:contain;border-radius:22px;display:block;margin:0 auto 6px;box-shadow:0 6px 24px var(--hero-luz)}
.hero-logo .nombre{font-weight:800;font-size:28px;letter-spacing:.5px;color:var(--acento-tx)}.hero-logo small{display:block;font-size:11px;color:var(--suave);letter-spacing:1.5px;text-transform:uppercase}
header.hero .marcabtn{display:block;margin:0 auto 8px;min-height:44px}
.inicio-tit{font-size:22px;margin:18px 0 4px}.inicio-sub{font-size:15px;margin:0 0 12px}
.tiles-red{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
button.tile-red{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:var(--tile);border:1px solid var(--tile-borde);box-shadow:inset 0 1px 0 var(--btn-luz),var(--sombra);border-radius:18px;padding:16px 8px 12px;min-height:150px;cursor:pointer;color:var(--texto);min-width:0}
button.tile-red .ico.g{width:68px;height:68px;flex-basis:68px;border-radius:20px}button.tile-red .ico.g::before{width:40px;height:40px}
button.tile-red b{font-size:17px}.tile-est{font-size:14px;font-weight:700;line-height:1.25;color:var(--suave);overflow-wrap:anywhere}
button.tile-red.ok{border-color:var(--borde-ok)}.tile-red.ok .tile-est{color:var(--ok)}
button.tile-red.mal{border-color:var(--borde-mal)}.tile-red.mal .tile-est{color:var(--mal)}.tile-red.aviso .tile-est{color:var(--aviso)}
button.tile-red.libre .tile-est{color:var(--acento-tx)}button.tile-red.off{border-style:dashed}
button.tile-red:active,button.acceso:active{transform:scale(.98)}
.accesos{display:grid;gap:10px}
button.acceso{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--acceso);border:1px solid var(--acceso-borde);border-radius:18px;padding:14px 16px;min-height:76px;cursor:pointer;color:var(--texto)}
.acc-ico{font-size:32px;flex:0 0 40px;text-align:center}.acc-txt{flex:1;min-width:0}.acc-txt b{display:block;font-size:19px;color:var(--acento-tx)}.acc-txt small{display:block;color:var(--suave);font-size:14px}
button.acceso .n{background:var(--btn);color:var(--btn-tx);border-radius:99px;font-size:14px;font-weight:800;padding:2px 10px}button.acceso .flecha{color:var(--suave);font-size:26px}
.mas-op{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:10px 0 24px}.mas-op[hidden]{display:none}.mas-op button.b{min-height:48px}
button.b.gran{width:100%;min-height:56px;font-size:18px;margin-top:10px}
.red-pantalla-cab{display:flex;flex-direction:column;gap:12px;margin-bottom:6px}.rp-tit{display:flex;align-items:center;gap:14px}.rp-tit b{font-size:24px;display:block}.rp-tit small{font-size:15px;color:var(--suave)}.rp-tit small.est-ok{color:var(--ok)}.rp-tit small.est-mal{color:var(--mal)}.rp-tit small.est-aviso{color:var(--aviso)}
.rp-tit .ico.g{width:64px;height:64px;flex-basis:64px;border-radius:19px}.rp-tit .ico.g::before{width:38px;height:38px}
button.b.atras{align-self:flex-start;min-height:48px}
ol.pasos{margin:6px 0 12px;padding-left:24px;font-size:16px}ol.pasos li{margin:6px 0}
.paso-caja .campo label{font-size:15px}.paso-caja input,.paso-caja select{min-height:48px}
details.a-mano{margin-top:12px}details.a-mano summary{cursor:pointer;color:var(--acento-tx);font-weight:700;min-height:44px;display:flex;align-items:center}
@media(min-width:700px){.tiles-red{grid-template-columns:repeat(4,minmax(0,1fr))}.accesos{grid-template-columns:repeat(3,1fr)}}

/* Rediseño azul eléctrico: logo que refresca, carpeta de red con pestañas, avisos, gráficos, selector de diseño */
button.logo-btn{background:none;border:0;padding:0;cursor:pointer;display:block;margin:0 auto;line-height:0;border-radius:22px;-webkit-tap-highlight-color:transparent}
button.logo-btn.gira img{animation:gira .6s ease-in-out}
@keyframes gira{from{transform:rotate(0)}to{transform:rotate(360deg)}}
header.top .logo-btn{display:inline-block;margin:0 8px 0 0;vertical-align:middle;min-width:44px;min-height:44px}header.top .logo-btn img{margin:0}
.hero-logo .logo-btn img{margin:0 auto 6px}
@media(prefers-reduced-motion:reduce){button.logo-btn.gira img{animation-duration:.01s}}
.pestanas-red{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;margin:8px 0 6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.pestanas-red button{flex:0 0 auto;scroll-snap-align:start;min-height:46px;padding:8px 14px;border-radius:12px;background:var(--sec);color:var(--sec-tx);border:1px solid var(--btn-borde);font-weight:700;cursor:pointer;white-space:nowrap}
.pestanas-red button.on{background:var(--btn);color:var(--btn-tx);border-color:var(--btn-borde);box-shadow:inset 0 1px 0 var(--btn-luz),0 0 0 3px var(--acento-tx);font-weight:800}
.pestanas-red button .n{display:inline-block;margin-left:6px;background:var(--btn-tx);color:var(--btn-luz);border-radius:99px;font-size:12px;padding:0 7px}
.pestanas-red button.on .n{background:var(--btn-tx);color:#fff}
.item-red{padding:12px 4px;border-bottom:1px solid var(--borde)}.item-red:last-child{border:0}
.item-red .cuando{color:var(--suave);font-size:13px}.item-red .quien{font-weight:700}.item-red p{margin:.35em 0;overflow-wrap:anywhere}
.item-red .resp{margin:.4em 0 0;padding:8px 10px;border-left:3px solid var(--acento);background:var(--panel2);border-radius:8px;overflow-wrap:anywhere}
.item-red .vistas{display:inline-block;font-weight:700;color:var(--acento-tx)}
.vacio-red{padding:22px 12px;text-align:center;color:var(--suave);font-size:16px}
.stats-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.stat{background:var(--tile);border:1px solid var(--tile-borde);border-radius:14px;padding:12px;box-shadow:inset 0 1px 0 var(--btn-luz)}.stat b{display:block;font-size:26px}.stat span{color:var(--suave);font-size:13px}
svg.grafico{width:100%;height:auto;display:block}.grafico text{fill:var(--suave);font-size:10px}.grafico .eje{stroke:var(--borde)}
.leyenda{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--suave);margin:4px 0 10px}.leyenda i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.interruptor{display:flex;align-items:center;gap:14px;min-height:56px;cursor:pointer;font-size:17px;font-weight:700}
.interruptor input{position:absolute;opacity:0;width:1px;height:1px}
.interruptor .pista{flex:0 0 58px;height:32px;border-radius:16px;background:var(--panel3);border:2px solid var(--borde);position:relative;transition:background .15s}
.interruptor .pista::after{content:'';position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--suave);transition:transform .15s}
.interruptor input:checked+.pista{background:var(--acento);border-color:var(--acento)}.interruptor input:checked+.pista::after{transform:translateX(26px);background:#fff}
.interruptor input:focus-visible+.pista{outline:3px solid var(--acento-tx);outline-offset:2px}
.temas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
button.tema{display:flex;flex-direction:column;gap:8px;align-items:stretch;text-align:left;background:var(--panel2);border:2px solid var(--borde);border-radius:16px;padding:10px;cursor:pointer;color:var(--texto);min-height:120px}
button.tema.on{border-color:var(--acento-tx);box-shadow:0 0 0 2px var(--acento-tx)}
button.tema .muestra{height:62px;border-radius:10px;display:flex;align-items:flex-end;gap:6px;padding:8px;border:1px solid #8884}
button.tema .muestra i{display:block;height:22px;flex:1;border-radius:7px}button.tema .muestra b{display:block;height:22px;flex:0 0 38%;border-radius:7px;font-style:normal}
button.tema strong{font-size:16px}button.tema small{color:var(--suave)}
.foco{outline:3px solid var(--acento-tx);outline-offset:-3px;border-radius:10px}
.etq.ignorado{background:var(--panel3);color:var(--suave)}
.red.mensaje{background:var(--bg-info);color:var(--chip-tx)}


/* Pestañas de la carpeta de una red: las cinco siempre a la vista, sin deslizar (3 arriba y 2 abajo) */
.pestanas-red{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;overflow:visible;padding:4px 0 10px;margin:8px 0 6px}
.pestanas-red button{grid-column:span 2;min-width:0;padding:8px 4px;font-size:14px;white-space:normal;line-height:1.15;display:flex;align-items:center;justify-content:center;gap:4px;text-align:center}
.pestanas-red button:nth-child(n+4){grid-column:span 3}
@media(max-width:360px){.pestanas-red button{font-size:13px;padding:8px 2px}}
.pestanas-red button{position:relative;overflow:visible}
.pestanas-red button .n{position:absolute;top:-8px;right:-4px;margin:0;font-size:12px;line-height:18px;min-width:20px;padding:0 5px;border:2px solid var(--fondo);background:var(--btn-tx);color:#fff}
.fila-permiso{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--borde)}
.fila-permiso .ok{color:#5cd08a}.fila-permiso .mal{color:#ff8a7a}
/* Conectar con tu empresa (24/10/2026) */
.tiles-red.empresas{margin-bottom:6px}.ico.g.joya{display:flex;align-items:center;justify-content:center;font-size:34px;background:var(--tile-borde);--m:none}.ico.g.joya::before{display:none}
.codigo-enlace{width:100%;box-sizing:border-box;font-size:28px;letter-spacing:.18em;text-align:center;text-transform:uppercase;font-weight:800;padding:14px 8px;margin:6px 0 10px}
.estad-emp .datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 14px}
.estad-emp .dato{background:var(--tile);border:1px solid var(--tile-borde);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.estad-emp .dato b{font-size:26px;line-height:1.1}.estad-emp .dato span{font-size:14px;font-weight:700}.estad-emp .dato small{font-size:13px;color:var(--suave)}
.estad-emp h3.sub{font-size:16px;margin:14px 0 6px}.top-veh{margin:0;padding-left:22px}.top-veh li{margin:6px 0}.top-veh .v-tit{display:block;font-weight:700;overflow-wrap:anywhere}.top-veh .v-n{display:block;font-size:14px;color:var(--suave)}
.barras-emp{display:flex;align-items:flex-end;gap:3px;height:96px;margin:6px 0 8px}.barras-emp .col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px}
.barras-emp i{display:block;width:100%;background:var(--btn);border-radius:4px 4px 0 0}.barras-emp small{font-size:9px;color:var(--suave);white-space:nowrap}
.veh-linea{font-size:14px;font-weight:700;margin:2px 0 4px;color:var(--acento-tx)}
@media(min-width:700px){.estad-emp .datos{grid-template-columns:repeat(5,minmax(0,1fr))}}
.origen{font-size:14px;margin:2px 0 4px;overflow-wrap:anywhere}.origen a{color:var(--acento-tx);font-weight:700}
.tarjeta.lista .fila p,.item-red p,.fila>div>p{overflow-wrap:anywhere;word-break:break-word;min-width:0}.tarjeta.lista .fila>div,.item-red{min-width:0;max-width:100%}.fila .ayuda,.item-red .quien{overflow-wrap:anywhere}
/* Globito de mensajes pendientes en la tarjeta de cada red y de cada empresa (como Gmail) */
button.tile-red{position:relative}
button.tile-red .globo{position:absolute;top:6px;right:8px;min-width:24px;height:24px;line-height:24px;padding:0 7px;border-radius:99px;background:#d93025;color:#fff;font-size:13px;font-weight:800;text-align:center;box-shadow:0 0 0 2px var(--tile,#fff);pointer-events:none}

/* ===== Barra fija de abajo (Inicio · Mensajes · Publicar · Calendario · Más), con el área segura del iPhone ===== */
body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
header.top,header.hero{padding-top:max(10px,var(--sat,env(safe-area-inset-top)))}
header.top{position:sticky;top:0;z-index:20}
@media(max-width:600px){header.top{padding-bottom:6px}}
nav.barra-baja{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;background:var(--panel);border-top:1px solid var(--borde);padding:0 4px env(safe-area-inset-bottom);box-shadow:0 -4px 14px #0006}
nav.barra-baja .bb{position:relative;flex:1 1 0;min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:none;border:0;color:var(--suave);cursor:pointer;padding:6px 2px;border-radius:10px}
nav.barra-baja .bb-ico{font-size:22px;line-height:1}nav.barra-baja .bb-txt{font-size:11.5px;font-weight:700;white-space:nowrap}
nav.barra-baja .bb.on{color:var(--acento-tx);background:var(--panel2)}nav.barra-baja .bb.on .bb-txt{text-decoration:underline;text-underline-offset:3px}
nav.barra-baja .bb-n{position:absolute;top:3px;left:calc(50% + 10px);min-width:20px;height:20px;line-height:20px;padding:0 6px;border-radius:99px;background:#d93025;color:#fff;font-size:12px;font-weight:800;text-align:center;border:2px solid var(--panel);box-sizing:content-box}
.hoja-mas{position:fixed;inset:0;z-index:30;background:var(--overlay);display:flex;align-items:flex-end;justify-content:center}
.hoja-caja{width:100%;max-width:520px;background:var(--panel);border:1px solid var(--borde);border-radius:18px 18px 0 0;padding:14px 14px calc(14px + env(safe-area-inset-bottom));max-height:85vh;overflow:auto}
.hoja-op{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}.hoja-op .b,.hoja-caja>.b{width:100%;min-height:48px;font-size:16px}
@media(min-width:900px){nav.barra-baja{justify-content:center}nav.barra-baja .bb{flex:0 1 160px}}

/* flecha ← atrás: grande, arriba a la izquierda, en toda pantalla interna */
button.flecha-atras{flex:0 0 auto;width:48px;height:48px;min-width:48px;border-radius:50%;border:1px solid var(--borde);background:var(--panel2);color:var(--acento-tx);font-size:28px;line-height:1;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 0 3px;-webkit-tap-highlight-color:transparent}
button.flecha-atras:active{filter:brightness(1.2)}
header.top button.flecha-atras{order:0}