/* MICORREO · diseños visuales. Cada diseño define fichas (variables) para modo claro y oscuro; las reglas de abajo las aplican a todos los componentes.
   Las fichas se enganchan a [data-diseno][data-modo], así que también valen para las miniaturas de Ajustes (que llevan esos atributos). */

/* ====== reglas generales: con las fichas por defecto el aspecto «Clásico» no cambia ====== */
[data-modo="oscuro"]{color-scheme:dark}
[data-modo="claro"]{color-scheme:light}
body{background:var(--fondo,var(--bg));background-attachment:fixed;font-family:var(--fuente,"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif)}
.cab h1,.mensaje .asunto,.logo{font-family:var(--fuente-h,inherit)}
.caja,.baldosa,.kpi{background:var(--panel,var(--card));border:var(--borde-panel,1px solid var(--bd));-webkit-backdrop-filter:var(--filtro,none);backdrop-filter:var(--filtro,none)}
.lado{background:var(--panel-lado,var(--card));-webkit-backdrop-filter:var(--filtro,none);backdrop-filter:var(--filtro,none)}
.btn{box-shadow:var(--sombra-btn,none)}
.btn:active{box-shadow:var(--sombra-in,none)}
input,select,textarea{box-shadow:var(--sombra-in,none)}
input:focus,select:focus,textarea:focus{box-shadow:var(--sombra-in,none),0 0 0 3px var(--acs)}
html[data-densidad="compacta"] .caja{padding:10px 12px;margin-bottom:10px}
html[data-densidad="compacta"] .fila{padding:6px 8px}
html[data-densidad="compacta"] .centro{padding-top:16px}
html[data-letra="grande"] body{font-size:17px}
html[data-letra="grande"] .fila .s,html[data-letra="grande"] .mut{font-size:14.5px}

/* ====== CLÁSICO (las mismas fichas de estilo.css, repetidas para que las miniaturas de Ajustes lo pinten) ====== */
[data-diseno="clasico"][data-modo="claro"]{--bg:#f5f6fa;--card:#ffffff;--card2:#f9fafc;--bd:#e5e8f0;--bd2:#d6dae6;--tx:#161d2e;--mut:#667089;--mut2:#8d96ab;--ac:#3b6cf6;--acs:#e9efff;--ac-tx:#fff;--ok:#0f8a4b;--oks:#e2f6ea;--wa:#b45f06;--was:#fff1d9;--ba:#c2371f;--bas:#fde9e5;--vi:#6a40d1;--vis:#eee8fc;--gr:#667089;--grs:#eceef5;--sombra:0 1px 2px rgba(20,28,50,.05),0 6px 20px rgba(20,28,50,.05);--radio:14px}
[data-diseno="clasico"][data-modo="oscuro"]{--bg:#0d1118;--card:#161b25;--card2:#1b212d;--bd:#262d3c;--bd2:#344056;--tx:#e8ecf5;--mut:#9aa4ba;--mut2:#76809a;--ac:#7ea4ff;--acs:#1a2744;--ac-tx:#0d1118;--ok:#4fd48a;--oks:#123322;--wa:#f5b94a;--was:#3a2d12;--ba:#ff8a78;--bas:#3b1d19;--vi:#b79dff;--vis:#271f42;--gr:#9aa4ba;--grs:#222938;--sombra:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.25);--radio:14px}

/* ====== CRISTAL · paneles de cristal sobre auroras ====== */
[data-diseno="cristal"][data-modo="claro"]{
  --bg:#eef1fb;
  --fondo:radial-gradient(900px 520px at 6% -6%,rgba(120,150,255,.5),transparent 62%),radial-gradient(800px 500px at 100% 0%,rgba(236,160,255,.42),transparent 62%),radial-gradient(900px 600px at 50% 112%,rgba(110,231,200,.42),transparent 62%),#eef1fb;
  --card:rgba(255,255,255,.7);--card2:rgba(255,255,255,.5);--panel:rgba(255,255,255,.62);--panel-lado:rgba(255,255,255,.5);
  --bd:rgba(255,255,255,.8);--bd2:rgba(110,125,175,.3);--tx:#1b2140;--mut:#566086;--mut2:#7b85a8;
  --ac:#4f6cf5;--acs:rgba(79,108,245,.15);--ac-tx:#fff;
  --ok:#0f8a4b;--oks:rgba(15,138,75,.14);--wa:#a65a05;--was:rgba(234,150,20,.2);--ba:#c2371f;--bas:rgba(226,60,40,.14);--vi:#6a40d1;--vis:rgba(124,58,237,.14);--gr:#566086;--grs:rgba(110,120,165,.15);
  --filtro:blur(18px) saturate(1.5);--borde-panel:1px solid rgba(255,255,255,.8);
  --sombra:0 10px 34px rgba(60,80,160,.17),inset 0 1px 0 rgba(255,255,255,.95);--radio:20px;--radio-g:26px}
[data-diseno="cristal"][data-modo="oscuro"]{
  --bg:#0a0e1c;
  --fondo:radial-gradient(900px 520px at 4% -10%,rgba(80,100,255,.4),transparent 62%),radial-gradient(800px 500px at 100% 0%,rgba(190,80,255,.3),transparent 62%),radial-gradient(900px 600px at 50% 115%,rgba(20,200,170,.26),transparent 62%),#0a0e1c;
  --card:rgba(26,32,56,.6);--card2:rgba(255,255,255,.05);--panel:rgba(22,28,50,.55);--panel-lado:rgba(18,23,42,.6);
  --bd:rgba(255,255,255,.11);--bd2:rgba(255,255,255,.2);--tx:#eaf0ff;--mut:#a5afd2;--mut2:#7d88ad;
  --ac:#8fa8ff;--acs:rgba(143,168,255,.2);--ac-tx:#0a0e1c;
  --ok:#5fe0a0;--oks:rgba(95,224,160,.16);--wa:#f6c15c;--was:rgba(246,193,92,.16);--ba:#ff8f80;--bas:rgba(255,143,128,.16);--vi:#c4a8ff;--vis:rgba(196,168,255,.16);--gr:#a5afd2;--grs:rgba(255,255,255,.09);
  --filtro:blur(18px) saturate(1.4);--borde-panel:1px solid rgba(255,255,255,.11);
  --sombra:0 14px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.09);--radio:20px;--radio-g:26px}
html[data-diseno="cristal"] .logo i,html[data-diseno="cristal"] .btn.p{box-shadow:0 6px 18px color-mix(in srgb,var(--ac) 40%,transparent)}
html[data-diseno="cristal"] .nav a.on{background:color-mix(in srgb,var(--ac) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 40%,transparent)}
html[data-diseno="cristal"] .baldosa:hover,html[data-diseno="cristal"] .kpi:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(60,80,160,.25)}

/* ====== RELIEVE · 3D mullido (luces y sombras) ====== */
[data-diseno="relieve"][data-modo="claro"]{
  --bg:#e3e7ef;--card:#e3e7ef;--card2:#dce1ea;--panel:#e3e7ef;--panel-lado:#e3e7ef;
  --bd:rgba(150,160,185,.28);--bd2:rgba(150,160,185,.5);--tx:#2b3143;--mut:#68718a;--mut2:#8992a8;
  --ac:#5566f2;--acs:#d8ddfa;--ac-tx:#fff;
  --ok:#0f8a4b;--oks:#d2eadb;--wa:#a65a05;--was:#f3e2c2;--ba:#c2371f;--bas:#f2d6d0;--vi:#6a40d1;--vis:#e0d8f4;--gr:#68718a;--grs:#d4d9e4;
  --borde-panel:0;
  --sombra:9px 9px 20px rgba(163,173,198,.68),-9px -9px 20px rgba(255,255,255,.95);
  --sombra-btn:4px 4px 9px rgba(163,173,198,.6),-4px -4px 9px rgba(255,255,255,.92);
  --sombra-in:inset 3px 3px 7px rgba(163,173,198,.6),inset -3px -3px 7px rgba(255,255,255,.92);
  --radio:22px;--radio-g:28px}
[data-diseno="relieve"][data-modo="oscuro"]{
  --bg:#1f232c;--card:#1f232c;--card2:#1b1f27;--panel:#1f232c;--panel-lado:#1f232c;
  --bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.14);--tx:#e6eaf3;--mut:#98a1b6;--mut2:#7a8399;
  --ac:#8b9bff;--acs:#2a3053;--ac-tx:#10131c;
  --ok:#56d896;--oks:#1b3328;--wa:#f2bb55;--was:#3a2f17;--ba:#ff8d7d;--bas:#3b2320;--vi:#bfa6ff;--vis:#2d2546;--gr:#98a1b6;--grs:#2a2f3b;
  --borde-panel:0;
  --sombra:9px 9px 20px rgba(8,10,14,.72),-9px -9px 20px rgba(50,56,70,.55);
  --sombra-btn:4px 4px 9px rgba(8,10,14,.65),-4px -4px 9px rgba(50,56,70,.5);
  --sombra-in:inset 3px 3px 7px rgba(8,10,14,.65),inset -3px -3px 7px rgba(50,56,70,.5);
  --radio:22px;--radio-g:28px}
html[data-diseno="relieve"] .btn{border:0}
html[data-diseno="relieve"] .btn.p{background:linear-gradient(145deg,color-mix(in srgb,var(--ac) 82%,#fff),var(--ac));box-shadow:var(--sombra-btn)}
html[data-diseno="relieve"] input,html[data-diseno="relieve"] select,html[data-diseno="relieve"] textarea{border:0}
html[data-diseno="relieve"] .nav a.on{background:var(--card);box-shadow:var(--sombra-in);color:var(--ac)}
html[data-diseno="relieve"] .nav a:hover{background:transparent;box-shadow:var(--sombra-btn)}
html[data-diseno="relieve"] .chip{box-shadow:var(--sombra-btn)}
html[data-diseno="relieve"] .filtros .chip.on{box-shadow:var(--sombra-in);border-color:transparent}
html[data-diseno="relieve"] .baldosa:hover,html[data-diseno="relieve"] .kpi:hover{transform:translateY(-4px)}
html[data-diseno="relieve"] .logo i{box-shadow:var(--sombra-btn)}
html[data-diseno="relieve"] .fila.clic:hover{background:transparent;box-shadow:var(--sombra-btn)}
html[data-diseno="relieve"] .tema{box-shadow:var(--sombra-in);background:transparent}
html[data-diseno="relieve"] .tema button.on{box-shadow:var(--sombra-btn);background:var(--card)}
html[data-diseno="relieve"] .cuerpo{box-shadow:var(--sombra-in);border:0}
html[data-diseno="relieve"] .fila.pin{box-shadow:inset 3px 0 0 var(--wa),var(--sombra-btn)}

/* ====== EDITORIAL · papel y tipografía ====== */
[data-diseno="editorial"]{--fuente:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;--fuente-h:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
[data-diseno="editorial"][data-modo="claro"]{
  --bg:#f3eee3;--card:#fffdf7;--card2:#f8f3e8;
  --bd:#ddd2bd;--bd2:#c9bca3;--tx:#26211b;--mut:#6a6152;--mut2:#8d8473;
  --ac:#9b2c1f;--acs:#f4e1dc;--ac-tx:#fff;
  --ok:#2e6b3f;--oks:#e1ecdc;--wa:#85570a;--was:#f6ecd0;--ba:#a3281c;--bas:#f6dcd6;--vi:#5b3f8a;--vis:#e8e1f2;--gr:#6a6152;--grs:#ece4d3;
  --sombra:none;--radio:3px}
[data-diseno="editorial"][data-modo="oscuro"]{
  --bg:#171410;--card:#1f1b16;--card2:#25201a;
  --bd:#3a3328;--bd2:#4b4234;--tx:#efe6d4;--mut:#b3a78f;--mut2:#8f846e;
  --ac:#e0a458;--acs:#3a2d17;--ac-tx:#1a1308;
  --ok:#86c99a;--oks:#1d2e22;--wa:#e5b865;--was:#36290f;--ba:#ef8c7c;--bas:#3a1d18;--vi:#c3a9ea;--vis:#2a2140;--gr:#b3a78f;--grs:#2a251d;
  --sombra:none;--radio:3px}
html[data-diseno="editorial"] .app{max-width:1240px;margin:0 auto}
html[data-diseno="editorial"] .lado{background:transparent;border-right:1px solid var(--bd2)}
html[data-diseno="editorial"] .centro{margin:0 auto;max-width:900px}
html[data-diseno="editorial"] .caja{border:1px solid var(--bd);border-top:3px double var(--tx)}
html[data-diseno="editorial"] .caja>h2{font-family:var(--fuente-h);font-variant:small-caps;text-transform:none;letter-spacing:.09em;font-size:14px;color:var(--tx);border-bottom:1px solid var(--bd);padding-bottom:6px;margin-bottom:10px}
html[data-diseno="editorial"] .cab h1{font-size:34px;font-weight:700;letter-spacing:-.01em;border-bottom:2px solid var(--tx);padding-bottom:6px}
html[data-diseno="editorial"] .cab .sub{font-style:italic}
html[data-diseno="editorial"] .btn,html[data-diseno="editorial"] input,html[data-diseno="editorial"] select,html[data-diseno="editorial"] textarea{border-radius:2px}
html[data-diseno="editorial"] .btn.p{background:var(--ac)}
html[data-diseno="editorial"] .chip{border-radius:2px;font-variant:small-caps;letter-spacing:.03em}
html[data-diseno="editorial"] .logo i{border-radius:2px;background:var(--tx);color:var(--card)}
html[data-diseno="editorial"] .nav a{border-radius:2px}
html[data-diseno="editorial"] .nav a.on{background:transparent;color:var(--ac);box-shadow:inset 3px 0 0 var(--ac)}
html[data-diseno="editorial"] .fila .t{font-weight:700}
html[data-diseno="editorial"] .baldosa:before{height:2px}
html[data-diseno="editorial"] .av{border-radius:2px}

/* ====== MEDIANOCHE · neón ====== */
[data-diseno="neon"][data-modo="oscuro"]{
  --bg:#070a14;
  --fondo:radial-gradient(900px 500px at 88% -10%,rgba(139,92,246,.38),transparent 60%),radial-gradient(700px 450px at 0% 14%,rgba(34,211,238,.24),transparent 60%),radial-gradient(800px 500px at 50% 120%,rgba(236,72,153,.16),transparent 60%),#070a14;
  --card:#0e1326;--card2:#131a38;--panel:rgba(14,19,38,.8);--panel-lado:rgba(10,14,30,.85);
  --bd:rgba(130,150,255,.18);--bd2:rgba(130,150,255,.34);--tx:#e8ecff;--mut:#9aa6d6;--mut2:#6f7bab;
  --ac:#67e8f9;--acs:rgba(103,232,249,.14);--ac-tx:#04121a;
  --ok:#6ee7a8;--oks:rgba(110,231,168,.14);--wa:#fbbf5a;--was:rgba(251,191,90,.14);--ba:#ff7a90;--bas:rgba(255,122,144,.14);--vi:#c4a5ff;--vis:rgba(196,165,255,.16);--gr:#9aa6d6;--grs:rgba(130,150,255,.12);
  --filtro:blur(10px);--borde-panel:1px solid rgba(130,150,255,.24);
  --sombra:0 12px 40px rgba(0,0,0,.55),0 0 28px rgba(139,92,246,.14);--radio:16px;--radio-g:22px}
[data-diseno="neon"][data-modo="claro"]{
  --bg:#eef2ff;
  --fondo:radial-gradient(800px 480px at 92% -10%,rgba(139,92,246,.24),transparent 60%),radial-gradient(700px 450px at 0% 10%,rgba(34,211,238,.24),transparent 60%),#f1f4ff;
  --card:#ffffff;--card2:#f4f6ff;--panel:rgba(255,255,255,.88);--panel-lado:rgba(255,255,255,.9);
  --bd:rgba(99,102,241,.22);--bd2:rgba(99,102,241,.38);--tx:#151a3a;--mut:#565f8f;--mut2:#7a83b0;
  --ac:#4f46e5;--acs:rgba(79,70,229,.12);--ac-tx:#fff;
  --ok:#0f8a4b;--oks:rgba(15,138,75,.12);--wa:#a65a05;--was:rgba(234,150,20,.16);--ba:#c2371f;--bas:rgba(226,60,40,.12);--vi:#6a40d1;--vis:rgba(124,58,237,.12);--gr:#565f8f;--grs:rgba(99,102,241,.1);
  --filtro:blur(8px);--borde-panel:1px solid rgba(99,102,241,.24);
  --sombra:0 10px 30px rgba(79,70,229,.15),0 0 0 1px rgba(99,102,241,.06);--radio:16px;--radio-g:22px}
html[data-diseno="neon"] .cab h1{background:linear-gradient(90deg,var(--tx),var(--ac));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html[data-diseno="neon"] .nav a.on{box-shadow:0 0 0 1px var(--ac),0 0 18px color-mix(in srgb,var(--ac) 35%,transparent)}
html[data-diseno="neon"] .btn.p{box-shadow:0 0 18px color-mix(in srgb,var(--ac) 45%,transparent)}
html[data-diseno="neon"] .logo i{box-shadow:0 0 18px color-mix(in srgb,var(--ac) 50%,transparent)}
html[data-diseno="neon"] .baldosa:before{height:3px;box-shadow:0 0 14px var(--cl,var(--ac))}
html[data-diseno="neon"] .baldosa:hover,html[data-diseno="neon"] .kpi:hover{transform:translateY(-3px);border-color:var(--ac);box-shadow:0 0 26px color-mix(in srgb,var(--ac) 30%,transparent)}
html[data-diseno="neon"] .barras div{box-shadow:0 0 14px color-mix(in srgb,var(--ac) 45%,transparent)}
html[data-diseno="neon"] .fila.pin{box-shadow:inset 3px 0 0 var(--wa),0 0 18px color-mix(in srgb,var(--wa) 20%,transparent)}

/* ====== COMPACTO PRO · denso ====== */
[data-diseno="pro"]{--fuente:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
[data-diseno="pro"][data-modo="claro"]{
  --bg:#eceff3;--card:#ffffff;--card2:#f6f7f9;--bd:#d8dde5;--bd2:#c4cbd6;--tx:#1a1f2b;--mut:#5f697a;--mut2:#838c9c;
  --ac:#2563eb;--acs:#e6eeff;--ac-tx:#fff;--sombra:none;--radio:6px}
[data-diseno="pro"][data-modo="oscuro"]{
  --bg:#0e1014;--card:#161a21;--card2:#1b2029;--bd:#272d38;--bd2:#353d4b;--tx:#dfe5f0;--mut:#8f9aae;--mut2:#6c7689;
  --ac:#5b9bff;--acs:#16294a;--ac-tx:#08111f;--sombra:none;--radio:6px}
html[data-diseno="pro"] body{font-size:13.5px;font-variant-numeric:tabular-nums}
html[data-diseno="pro"] .app{grid-template-columns:196px 1fr}
html[data-diseno="pro"] .lado{padding:10px 8px}
html[data-diseno="pro"] .centro{max-width:none;padding:14px 18px 40px}
html[data-diseno="pro"] .caja{padding:10px 12px;margin-bottom:10px}
html[data-diseno="pro"] .cab h1{font-size:19px}
html[data-diseno="pro"] .cab{margin-bottom:10px}
html[data-diseno="pro"] .fila{padding:5px 6px;gap:9px}
html[data-diseno="pro"] .av{width:26px;height:26px;font-size:11px}
html[data-diseno="pro"] .btn{padding:3px 10px;border-radius:5px}
html[data-diseno="pro"] .btn.s{padding:1px 8px}
html[data-diseno="pro"] .chip{padding:1px 8px;font-size:11.5px;border-radius:5px}
html[data-diseno="pro"] .nav a{padding:5px 9px;border-radius:5px;margin:1px 0}
html[data-diseno="pro"] .baldosa{padding:9px 11px}
html[data-diseno="pro"] .baldosa .n{font-size:24px}
html[data-diseno="pro"] .baldosas{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
html[data-diseno="pro"] .rej{gap:10px}
html[data-diseno="pro"] .fila .s{font-size:12px}
html[data-diseno="pro"] .logo i{border-radius:6px;width:26px;height:26px}

/* ====== CENTRADO FLOTANTE: Cristal, Relieve y Medianoche (en ordenador) ====== */
@media (min-width:781px){
  html[data-diseno="cristal"] .app,html[data-diseno="relieve"] .app,html[data-diseno="neon"] .app{max-width:1380px;margin:0 auto;padding:20px;gap:22px;grid-template-columns:248px minmax(0,1fr)}
  html[data-diseno="cristal"] .lado,html[data-diseno="relieve"] .lado,html[data-diseno="neon"] .lado{top:20px;height:calc(100vh - 40px);border:var(--borde-panel);border-radius:var(--radio-g);box-shadow:var(--sombra)}
  html[data-diseno="cristal"] .centro,html[data-diseno="relieve"] .centro,html[data-diseno="neon"] .centro{padding:10px 6px 60px;max-width:none}
}

/* ====== MÓVIL: barra de pestañas abajo, toques grandes y efectos suaves ====== */
.mov{display:none}
@media (max-width:780px){
  .app{display:block}
  .lado{display:none}
  .centro{padding:14px 14px calc(88px + env(safe-area-inset-bottom));max-width:none}
  .mov{display:flex;position:fixed;top:auto;left:0;right:0;bottom:0;z-index:40;gap:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));overflow:visible;
    background:var(--panel-lado,var(--card));border-top:var(--borde-panel,1px solid var(--bd));-webkit-backdrop-filter:var(--filtro,blur(12px));backdrop-filter:var(--filtro,blur(12px));box-shadow:0 -6px 24px rgba(0,0,0,.08)}
  .mov a{flex:1;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:5px 2px;border-radius:14px;background:none;color:var(--mut);font-size:11px;font-weight:600;text-align:center;position:relative;display:flex;white-space:nowrap}
  .mov a svg{width:22px;height:22px}
  .mov a.on{background:var(--acs);color:var(--ac)}
  .mov a em{position:absolute;top:2px;left:calc(50% + 6px);font-style:normal;font-size:10px;font-weight:700;background:var(--ba);color:#fff;border-radius:99px;padding:0 5px;min-width:16px;text-align:center}
  /* toques cómodos */
  .btn{min-height:40px}.btn.s{min-height:34px;padding:4px 12px}
  .pin-btn{min-width:38px;min-height:38px}
  .filtros .chip{padding:7px 14px;font-size:13.5px}
  input,select,textarea{font-size:16px;min-height:42px}
  .cab{margin-bottom:12px}.cab h1{font-size:22px}
  .caja{padding:14px;border-radius:calc(var(--radio,14px) - 2px)}
  .fila{padding:10px 6px}
  .baldosas{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .baldosa{padding:11px 12px}.baldosa .n{font-size:26px}
  .totales{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rej.r2,.rej.r4{grid-template-columns:1fr}
  .sub-rep{margin-left:14px}
  /* efectos más suaves en pantallas pequeñas: menos coste y más legibilidad */
  :root{--filtro:blur(10px) saturate(1.3)}
  [data-diseno="relieve"][data-modo="claro"]{--sombra:5px 5px 12px rgba(163,173,198,.6),-5px -5px 12px rgba(255,255,255,.92);--sombra-btn:3px 3px 6px rgba(163,173,198,.55),-3px -3px 6px rgba(255,255,255,.9)}
  [data-diseno="relieve"][data-modo="oscuro"]{--sombra:5px 5px 12px rgba(8,10,14,.7),-5px -5px 12px rgba(50,56,70,.5);--sombra-btn:3px 3px 6px rgba(8,10,14,.6),-3px -3px 6px rgba(50,56,70,.45)}
  html[data-diseno="editorial"] .cab h1{font-size:26px}
  html[data-diseno="pro"] .centro{padding:10px 10px calc(84px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(86px + env(safe-area-inset-bottom))}
}
/* cabecera del correo */
.mensaje .quien>div{min-width:0}
.mensaje .para summary{cursor:pointer;list-style:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mensaje .para summary::-webkit-details-marker{display:none}
.mensaje .para[open] summary{white-space:normal}
.mensaje .para[open]>div{margin-top:2px}
@media (max-width:780px){
  .mensaje{padding:12px!important}
  .mensaje .asunto{font-size:17px;line-height:1.25;margin:0 0 10px}
  .mensaje .quien{gap:10px;margin-bottom:10px;align-items:flex-start}
  .mensaje .quien .av{width:34px;height:34px;font-size:13px}
  .mensaje .quien>div>div:first-child{font-size:14px;overflow-wrap:anywhere}
  .mensaje .meta{font-size:12px}
  .det{gap:10px}
}
/* escritorio: el contenedor de acciones no cambia el diseño y el «⋯» no se ve */
.fila-msg>.acc-fila{display:contents}
.fila-msg>.mas-fila{display:none}
@media (max-width:780px){.fila-msg>.acc-fila{display:none}.fila-msg.abierta>.acc-fila{display:flex}}
/* hoja «Más» del móvil */
.hoja-fondo{position:fixed;inset:0;z-index:60;background:rgba(10,14,28,.45);display:flex;align-items:flex-end;animation:vel .18s ease}
.hoja{width:100%;max-height:82vh;overflow:auto;background:var(--card);border-radius:22px 22px 0 0;padding:14px 14px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,0,0,.35);animation:sube .22s ease}
.hoja .agarre{width:42px;height:5px;border-radius:99px;background:var(--bd2);margin:0 auto 12px}
.hoja a{display:flex;align-items:center;gap:14px;padding:13px 10px;border-radius:12px;color:var(--tx);text-decoration:none;font-weight:600}
.hoja a:active,.hoja a.on{background:var(--acs);color:var(--ac)}
.hoja a em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;background:var(--ba);color:#fff;border-radius:99px;padding:0 7px}
.hoja .sep{padding:12px 10px 4px}
.hoja .fila-ap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px}
@keyframes sube{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes vel{from{opacity:0}to{opacity:1}}
@media (min-width:781px){.hoja-fondo{display:none}}

/* ====== Ajustes · galería de diseños ====== */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:8px 0 4px}
.dis-card{border:2px solid var(--bd);border-radius:16px;padding:10px;cursor:pointer;background:var(--card2);transition:transform .15s,border-color .15s,box-shadow .15s;position:relative}
.dis-card:hover{transform:translateY(-3px)}
.dis-card.on{border-color:var(--ac);box-shadow:0 0 0 3px var(--acs)}
.dis-card .nom{font-weight:700;margin:10px 2px 2px;display:flex;align-items:center;gap:8px}
.dis-card .nom i{font-style:normal;font-size:11px;font-weight:700;background:var(--ac);color:var(--ac-tx);border-radius:99px;padding:1px 8px}
.dis-card .des{color:var(--mut);font-size:12.5px;margin:0 2px 2px}
.dis-par{display:grid;grid-template-columns:1fr 1fr;gap:6px}
/* miniatura: una pantalla en pequeño, pintada con las fichas del diseño (por eso lleva data-diseno y data-modo) */
.dis-prev{height:112px;border-radius:12px;padding:8px;display:grid;grid-template-columns:22% 1fr;gap:6px;overflow:hidden;background:var(--fondo,var(--bg));color:var(--tx);font-family:var(--fuente,system-ui)}
.dis-prev .pv-l{background:var(--panel-lado,var(--card));border:var(--borde-panel,1px solid var(--bd));border-radius:calc(var(--radio,14px)/2.2);box-shadow:var(--sombra);-webkit-backdrop-filter:var(--filtro,none);backdrop-filter:var(--filtro,none);padding:6px 4px;display:flex;flex-direction:column;gap:4px}
.dis-prev .pv-l i{display:block;height:5px;border-radius:3px;background:var(--grs)}
.dis-prev .pv-l i:first-child{background:var(--ac);width:60%}
.dis-prev .pv-l i.act{background:var(--acs);box-shadow:inset 0 0 0 1px var(--ac)}
.dis-prev .pv-c{display:flex;flex-direction:column;gap:5px;min-width:0}
.dis-prev .pv-t{height:7px;width:46%;border-radius:3px;background:var(--tx);opacity:.85}
.dis-prev .pv-p{background:var(--panel,var(--card));border:var(--borde-panel,1px solid var(--bd));border-radius:calc(var(--radio,14px)/2.2);box-shadow:var(--sombra);-webkit-backdrop-filter:var(--filtro,none);backdrop-filter:var(--filtro,none);padding:6px;display:flex;flex-direction:column;gap:4px;flex:1}
.dis-prev .pv-p i{display:block;height:4px;border-radius:2px;background:var(--mut2);opacity:.5}
.dis-prev .pv-p i:nth-child(2){width:70%}
.dis-prev .pv-p b{display:inline-block;height:9px;width:34px;border-radius:99px;background:var(--ac);align-self:flex-start;margin-top:auto}
.opciones-aspecto{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start;margin-top:12px}
.opciones-aspecto .grupo{min-width:200px}
.opciones-aspecto .grupo>div:first-child{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:700;margin-bottom:6px}
.acentos{display:flex;flex-wrap:wrap;gap:8px}
.acento{width:30px;height:30px;border-radius:50%;cursor:pointer;border:3px solid transparent;box-sizing:border-box;box-shadow:0 0 0 1px var(--bd2)}
.acento.on{border-color:var(--card);box-shadow:0 0 0 2px var(--tx)}
.acento.auto{background:conic-gradient(#3b6cf6,#7c3aed,#db2777,#ea580c,#16a34a,#0891b2,#3b6cf6)}
.seg{display:inline-flex;background:var(--grs);border-radius:10px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;border-radius:8px;padding:6px 14px;cursor:pointer;color:var(--mut);font-weight:600}
.seg button.on{background:var(--card);color:var(--ac);box-shadow:var(--sombra)}

/* móvil: en las filas con frase, las acciones (pin, disco, hecho) bajan a su propia línea para que el texto tenga todo el ancho */
@media (max-width:780px){
  .fila.frase{flex-wrap:wrap;justify-content:flex-end;row-gap:4px}
  .fila.frase>.g{flex:1 1 0;min-width:calc(100% - 66px)}
  .fila.frase .t{white-space:normal;overflow:visible}
  .fila.frase>.r{display:block;order:9;margin-right:auto;align-self:center;font-size:12px}
  /* filas de correo compactas: título a 2 líneas, etiqueta como punto de color, acciones tras «⋯» */
  .fila-msg{display:grid;grid-template-columns:4px 30px minmax(0,1fr) auto 30px;grid-template-rows:auto auto;column-gap:8px;row-gap:0;align-items:center;padding:8px 4px}
  .fila-msg>.pri{grid-column:1;grid-row:1/3}
  .fila-msg>.av{grid-column:2;grid-row:1/3;width:30px;height:30px;font-size:12px}
  .fila-msg>.g{grid-column:3;grid-row:1/3}
  .fila-msg>.g .t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25;font-size:14.5px}
  .fila-msg>.g .s{font-size:12px}
  .fila-msg>.g .tema-tag{display:none}
  .fila-msg>.chip{grid-column:4;grid-row:1;justify-self:end;font-size:0;padding:0;width:14px;height:14px;gap:0;border-radius:50%;background:none!important}
  .fila-msg>.chip:before{width:12px;height:12px}
  .fila-msg>.r{grid-column:4;grid-row:2;justify-self:end;font-size:11.5px}
  .fila-msg>.mas-fila{grid-column:5;grid-row:1/3;display:grid;place-items:center;width:30px;height:34px;border:0;background:none;color:var(--mut2);border-radius:8px;padding:0}
  .fila-msg>.mas-fila svg{width:18px;height:18px}
  .fila-msg>.mas-fila.on{color:var(--wa)}
  .fila-msg>.acc-fila{display:none;grid-column:3/-1;grid-row:3;justify-content:flex-end;gap:6px;padding-top:4px;flex-wrap:wrap}
  .fila-msg.abierta>.acc-fila{display:flex}
  .fila-msg.abierta>.mas-fila{background:var(--acs);color:var(--ac)}
  .fila.mini{flex-wrap:nowrap}
  .fila.mini>.g{min-width:0}
  .emp,.emp.dos,.emp.rcd{grid-template-columns:minmax(0,1fr) auto}
  .emp.rcd>span:nth-child(2){display:none}
}

/* ====== Oferta de la huella (dentro de la app) ====== */
.oferta-huella{position:fixed;left:14px;right:14px;bottom:calc(78px + env(safe-area-inset-bottom));max-width:440px;margin:0 auto;z-index:55;background:var(--card);border:1px solid var(--bd2);border-radius:18px;padding:14px 16px;box-shadow:0 14px 44px rgba(0,0,0,.35);animation:sube .25s ease}
.oferta-huella .of-t{display:flex;align-items:center;gap:8px;font-weight:700}

/* ====== Oferta de la huella (dentro de la app) ====== */
.oferta-huella{position:fixed;left:14px;right:14px;bottom:calc(78px + env(safe-area-inset-bottom));max-width:440px;margin:0 auto;z-index:55;background:var(--card);border:1px solid var(--bd2);border-radius:18px;padding:14px 16px;box-shadow:0 14px 44px rgba(0,0,0,.35);animation:sube .25s ease}
.oferta-huella .of-t{display:flex;align-items:center;gap:8px;font-weight:700}

/* ====== Bandeja: filtros de Tipo (selección múltiple) y mosaico de temas ====== */
.t-accion{--tc:#e0457b}.t-plazo{--tc:#e08a14}.t-recibo{--tc:#1ea672}.t-reclama{--tc:#8b4be0}.t-importante{--tc:#d6382f}.t-info{--tc:#3b6cf6}.t-ruido{--tc:#8a90a3}.t-dudoso{--tc:#b04bd6}
.quitar-sel{cursor:pointer;margin-left:8px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ac)}
.panorama{display:grid;grid-template-columns:minmax(260px,1fr) minmax(300px,1.3fr);gap:22px;margin:8px 0 14px;padding:14px;background:var(--card);border:var(--borde-panel,1px solid var(--bd));border-radius:var(--radio,14px);box-shadow:var(--sombra)}
.panorama .rot{margin-bottom:6px}
.tipos-barras .barra{display:grid;grid-template-columns:104px 1fr 42px;gap:8px;align-items:center;padding:4px 6px;border-radius:8px;cursor:pointer}
.tipos-barras .barra:hover{background:var(--card2,var(--bg))}
.tipos-barras .barra b{font-size:13.5px}
.tipos-barras .tr{height:14px;background:var(--grs,var(--bd));border-radius:99px;overflow:hidden}
.tipos-barras .tr s{display:block;height:100%;background:var(--tc);border-radius:99px;opacity:.55}
.tipos-barras .barra.on{background:color-mix(in srgb,var(--tc) 16%,transparent)}
.tipos-barras .barra.on .tr s{opacity:1}.tipos-barras .barra.on b{color:var(--tc)}
.tipos-barras .barra .n{text-align:right;color:var(--mut);font-size:13px}.tipos-barras .barra.cero{opacity:.5}
.tema-mosaico .mapa{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:44px;gap:6px}
.tema-mosaico .bald{grid-column:span 1;border-radius:10px;padding:5px 8px;color:#fff;background:var(--c);opacity:.65;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;font-weight:600;font-size:13px;line-height:1.15}
.tema-mosaico .bald small{opacity:.85;font-weight:500}.tema-mosaico .bald span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tema-mosaico .bald.g2{grid-column:span 2}.tema-mosaico .bald.g3{grid-column:span 3;grid-row:span 2}
.tema-mosaico .bald:hover{opacity:.85}.tema-mosaico .bald.on{opacity:1;outline:3px solid var(--tx);outline-offset:-3px}.tema-mosaico .bald.cero{opacity:.3}
.tema-mosaico .filtros.sub{margin-top:8px}
.tipos-ico{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;margin-bottom:4px;-webkit-overflow-scrolling:touch}
.tipos-ico .ico{flex:none;width:70px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;border-radius:14px;border:1.5px solid transparent;background:color-mix(in srgb,var(--tc) 14%,transparent);color:var(--tc);cursor:pointer;font-size:11.5px;font-weight:600}
.tipos-ico .ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tipos-ico .ico b{font-size:15px;color:var(--tx)}
.tipos-ico .ico.on{background:var(--tc);border-color:var(--tc);color:#fff}.tipos-ico .ico.on b{color:#fff}
@media(max-width:780px){.solo-ancha{display:none!important}}
@media(min-width:781px){.solo-movil{display:none!important}}

.sep-fecha{display:flex;align-items:center;gap:8px;margin:14px 4px 4px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.sep-fecha:first-child{margin-top:4px}
.sep-fecha:after{content:"";flex:1;height:1px;background:var(--bd)}
.sep-fecha span{order:2;font-weight:600;background:var(--grs,var(--bd));border-radius:99px;padding:0 8px;letter-spacing:0}