/* ══════════════════════════════════════════════════════════════════
   TirguaCloud · Tema «Cielo» (v349)
   ──────────────────────────────────────────────────────────────────
   Blancos, azules y cristal. Todo lo de color, letra y espacio sale de
   aquí: ninguna pantalla escribe colores a mano, y por eso cambiar de
   tema (claro · oscuro · visión) cambia la pantalla entera de una vez.

   Escalas (mismos nombres que antes, para no tocar pantallas):
     --n*  neutros azulados (blanco → tinta marina)   --a*  azul de la marca
     --g*  verde (bien / cobrado)   --r*  rojo (error)   --y*  ámbar (aviso)
     --v*  violeta (notas, crédito) --c*  turquesa (ubicaciones) --p* rosa
   Nuevas: --vidrio, --vidrio-fuerte, --vidrio-borde, --vidrio-linea
           (cristal), --campo (borde de campos, 3:1), --fondo-img.

   Cristal optimizado: el desenfoque solo va en lo fijo (barra lateral,
   cabeceras, ventanas y menús), nunca en tarjetas que se repiten. Sin
   soporte, con «reducir transparencia» o en tema visión: sólido.

   Letras: Figtree (texto), Sora (títulos y cifras grandes),
   JetBrains Mono (códigos y cantidades), Atkinson Hyperlegible (visión).
   Todas OFL, servidas desde el servidor. Iconos: «Trazo Tirgua», propios.
   ══════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Figtree';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/figtree-400.woff2') format('woff2');}
@font-face{font-family:'Figtree';font-weight:500;font-style:normal;font-display:swap;src:url('fonts/figtree-500.woff2') format('woff2');}
@font-face{font-family:'Figtree';font-weight:600;font-style:normal;font-display:swap;src:url('fonts/figtree-600.woff2') format('woff2');}
@font-face{font-family:'Figtree';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/figtree-700.woff2') format('woff2');}
@font-face{font-family:'Figtree';font-weight:800 900;font-style:normal;font-display:swap;src:url('fonts/figtree-800.woff2') format('woff2');}
@font-face{font-family:'Sora';font-weight:400 600;font-style:normal;font-display:swap;src:url('fonts/sora-600.woff2') format('woff2');}
@font-face{font-family:'Sora';font-weight:700 900;font-style:normal;font-display:swap;src:url('fonts/sora-700.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:400 500;font-style:normal;font-display:swap;src:url('fonts/jbmono-500.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:600 900;font-style:normal;font-display:swap;src:url('fonts/jbmono-600.woff2') format('woff2');}
@font-face{font-family:'Atkinson';font-weight:400 500;font-style:normal;font-display:swap;src:url('fonts/atkinson-400.woff2') format('woff2');}
@font-face{font-family:'Atkinson';font-weight:600 900;font-style:normal;font-display:swap;src:url('fonts/atkinson-700.woff2') format('woff2');}

/* ── TEMA CLARO «Cielo» (por defecto) ─────────────────────────── */
:root,[data-tema="claro"]{
  color-scheme:light;
  --bg:#eef4fc;--n0:#ffffff;--n50:#f6f9fe;--n100:#edf2fa;--n200:#dde6f3;--n300:#c6d3e6;--n400:#8fa1ba;--n500:#5a6e8c;--n600:#44587a;--n700:#31445f;--n800:#1d2e48;--n900:#0d1b33;--a50:#eef5ff;--a100:#dbe9ff;--a200:#b8d4ff;--a300:#86b5fb;--a500:#1a63d9;--a600:#1557c4;--a700:#0f4296;--g50:#ecf8f2;--g100:#d4f0e1;--g200:#a9dfc3;--g300:#6fc69a;--g500:#1f7a4b;--g600:#1b6c42;--g700:#155836;--g800:#10452a;--r50:#fdf0ef;--r100:#fadcd9;--r200:#f3b8b2;--r300:#e58b81;--r500:#c23a2c;--r600:#a82f23;--r800:#74201a;--y50:#fff7e6;--y100:#fdebc4;--y300:#f0c460;--y500:#9a6200;--y600:#845300;--y800:#5c3a00;--v50:#f2f1fe;--v100:#e4e2fc;--v200:#ccc8f7;--v600:#4f46c8;--c50:#e8f7fb;--c100:#cdeef6;--c700:#0b6a80;--p50:#fdf0f6;--p200:#f5c3d9;--p600:#b0336c;--p800:#7a1d48;--on:#ffffff;--rail:rgba(255,255,255,0.62);--rail-tx:#44587a;--rail-hi:rgba(30,107,230,0.09);--rail-on:#0d1b33;--rail-line:rgba(13,27,51,0.08);--vidrio:rgba(255,255,255,0.66);--vidrio-fuerte:rgba(255,255,255,0.86);--vidrio-borde:rgba(255,255,255,0.75);--vidrio-linea:rgba(13,27,51,0.08);--velo:rgba(13,27,51,0.32);--campo:#7f92ad;
  --fondo-img:radial-gradient(1100px 560px at 105% -8%,rgba(26,99,217,.11),transparent 62%),
              radial-gradient(900px 520px at -8% 108%,rgba(56,170,240,.10),transparent 60%);
  --sombra:0 1px 2px rgba(13,40,90,.05),0 6px 20px rgba(13,40,90,.06);
  --sombra-alta:0 24px 60px rgba(13,40,90,.20),0 2px 6px rgba(13,40,90,.06);
  --brillo:inset 0 1px 0 rgba(255,255,255,.9);
  --ring:0 0 0 3px rgba(26,99,217,.24);
  --blur:saturate(170%) blur(16px);
  --f:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-titulo:'Sora','Figtree',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --r-s:6px;--r-m:10px;--r-l:14px;--r-xl:20px;
  --borde:1px;
}

/* «Relleno sólido» (fondo de botón o etiqueta con texto blanco encima).
   En claro y visión es el mismo color; en oscuro un tono medio. */
:root{--a600s:var(--a600);--a700s:var(--a700);--g600s:var(--g600);--g700s:var(--g700);--g800s:var(--g800);
  --r600s:var(--r600);--r800s:var(--r800);--y600s:var(--y600);--y800s:var(--y800);--n800s:var(--n800);--n900s:var(--n900);
  --c700s:var(--c700);--p800s:var(--p800);--v600s:var(--v600);--a500s:var(--a500);}
[data-tema="oscuro"]{--a500s:#2f6fe0;--a600s:#2f6fe0;--a700s:#245bc0;--g600s:#1c7f4f;--g700s:#1b7a4c;--g800s:#176842;--r600s:#c8443a;--r800s:#a8372e;
  --y600s:#9a6a08;--y800s:#7f5606;--n800s:#26395a;--n900s:#2f4467;--c700s:#127a90;--p800s:#a8346c;--v600s:#5d55d8;}

/* ── TEMA OSCURO «Noche azul» ─────────────────────────────────── */
[data-tema="oscuro"]{
  color-scheme:dark;
  --bg:#07111f;--n0:#0e1a2c;--n50:#122035;--n100:#17283f;--n200:#20344f;--n300:#2d4463;--n400:#5c7395;--n500:#8ea3c2;--n600:#aebfd8;--n700:#c9d6e9;--n800:#dfe8f5;--n900:#f0f5fc;--a50:#0f2140;--a100:#132a52;--a200:#1c3c74;--a300:#2a56a3;--a500:#4d8dff;--a600:#74a6ff;--a700:#a8c8ff;--g50:#0c2219;--g100:#0f2e21;--g200:#174430;--g300:#22654a;--g500:#2fa36b;--g600:#4cc488;--g700:#86dcb0;--g800:#b2ebcd;--r50:#2a1214;--r100:#3a171a;--r200:#5a2328;--r300:#82343a;--r500:#e5564a;--r600:#f07a6f;--r800:#f8b9b2;--y50:#281d08;--y100:#3a2a0b;--y300:#7a5a17;--y500:#e0a530;--y600:#f0bf5a;--y800:#f8dc9a;--v50:#1a1838;--v100:#24214d;--v200:#37327a;--v600:#8f87f0;--c50:#0a2630;--c100:#0d3340;--c700:#7fd7ec;--p50:#2a1220;--p200:#5a2442;--p600:#e0629b;--p800:#f6b7d4;--on:#ffffff;--rail:rgba(14,26,44,0.62);--rail-tx:#8ea3c2;--rail-hi:rgba(77,141,255,0.14);--rail-on:#ffffff;--rail-line:rgba(255,255,255,0.07);--vidrio:rgba(14,26,44,0.62);--vidrio-fuerte:rgba(14,26,44,0.88);--vidrio-borde:rgba(255,255,255,0.07);--vidrio-linea:rgba(255,255,255,0.08);--velo:rgba(2,8,18,0.62);--campo:#567095;
  --fondo-img:radial-gradient(1100px 560px at 105% -8%,rgba(77,141,255,.16),transparent 62%),
              radial-gradient(900px 520px at -8% 108%,rgba(40,160,220,.10),transparent 60%);
  --sombra:0 1px 2px rgba(0,0,0,.35),0 6px 20px rgba(0,0,0,.28);
  --sombra-alta:0 24px 60px rgba(0,0,0,.55);
  --brillo:inset 0 1px 0 rgba(255,255,255,.05);
  --ring:0 0 0 3px rgba(77,141,255,.38);
}

/* ── TEMA VISIÓN (letra grande, contraste alto, sin transparencias) */
[data-tema="vision"]{
  color-scheme:light;
  --bg:#f3f6fb;--n0:#ffffff;--n50:#f7f9fc;--n100:#eaf0f8;--n200:#cfdbec;--n300:#9fb2cc;--n400:#4a5e7d;--n500:#33476a;--n600:#243757;--n700:#1a2a45;--n800:#101d33;--n900:#030c1d;--a50:#e8f0fe;--a100:#d3e2fc;--a200:#a9c5f7;--a300:#6e9be9;--a500:#0b47b8;--a600:#083a99;--a700:#062d78;--g50:#e4f4ec;--g100:#cbe9d9;--g200:#9dd3b6;--g300:#5eae84;--g500:#11643a;--g600:#0c5330;--g700:#094326;--g800:#06351d;--r50:#fbe9e7;--r100:#f5d2ce;--r200:#e8a9a1;--r300:#d0766b;--r500:#9e2617;--r600:#861f12;--r800:#58140b;--y50:#fdf1d6;--y100:#f8e2ae;--y300:#d7a53d;--y500:#7a5000;--y600:#654200;--y800:#432c00;--v50:#eeecfb;--v100:#dcd8f6;--v200:#bdb6ee;--v600:#3a2fa0;--c50:#e2f3f7;--c100:#c6e7ef;--c700:#074e60;--p50:#f9e7ef;--p200:#e9b0c8;--p600:#8a1f50;--p800:#5c1335;--on:#ffffff;--rail:#ffffff;--rail-tx:#1a2a45;--rail-hi:#e8f0fe;--rail-on:#030c1d;--rail-line:#9fb2cc;--vidrio:#ffffff;--vidrio-fuerte:#ffffff;--vidrio-borde:#9fb2cc;--vidrio-linea:#9fb2cc;--velo:rgba(3,12,29,0.55);--campo:#4a5e7d;
  --fondo-img:none;
  --sombra:0 1px 2px rgba(3,12,29,.10),0 4px 14px rgba(3,12,29,.08);
  --sombra-alta:0 18px 50px rgba(3,12,29,.28);
  --brillo:none;
  --ring:0 0 0 4px rgba(11,71,184,.42);
  --blur:none;
  --f:'Atkinson','Figtree',system-ui,sans-serif;
  --f-titulo:'Atkinson','Figtree',system-ui,sans-serif;
  --borde:1.5px;
}
html[data-tema="vision"]{font-size:18px;}
[data-tema="vision"] *:not(.spin){animation-duration:0s!important;transition-duration:0s!important;}
[data-tema="vision"] :focus-visible{outline:3px solid var(--a500)!important;outline-offset:2px;}
[data-tema="vision"] .btn,[data-tema="vision"] button.pm-btn{min-height:2.75rem;}

/* Quien pide menos transparencia, o un navegador sin cristal: sólido */
@media (prefers-reduced-transparency:reduce){
  :root,[data-tema]{--vidrio:var(--n0);--vidrio-fuerte:var(--n0);--blur:none;--fondo-img:none;}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root,[data-tema]{--vidrio:var(--n0);--vidrio-fuerte:var(--n0);}
}

/* ── BASE ─────────────────────────────────────────────────────── */
html{font-size:16px;-webkit-text-size-adjust:100%;}
*,*::before,*::after{box-sizing:border-box;}
.tc,.tc *{font-family:var(--f);}
.tc{margin:0;background-color:var(--bg);background-image:var(--fondo-img);background-attachment:fixed;color:var(--n900);
  font-size:.9375rem;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:'tnum' 1;}
.tc h1,.tc h2,.tc h3,.tc p{margin:0;}
.tc h1,.tc h2,.tc .titulo,.tc .cifra{font-family:var(--f-titulo);letter-spacing:-.02em;}
.tc h1{font-weight:700;} .tc h2{font-weight:600;}
.tc ::selection{background:var(--a200);color:var(--n900);}
.tc .num,.tc .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.tc [style*="monospace"]{font-family:var(--mono)!important;}
:where(.tc) a:not([class]){color:var(--a600);}
.tc ::-webkit-scrollbar{width:10px;height:10px;}
.tc ::-webkit-scrollbar-thumb{background:var(--n300);border-radius:10px;border:3px solid transparent;background-clip:content-box;}
.tc ::-webkit-scrollbar-thumb:hover{background-color:var(--n400);}
.tc ::-webkit-scrollbar-track{background:transparent;}

/* Cristal: úsalo en barras, menús y paneles flotantes (no en listas largas) */
.tc .vidrio{background:var(--vidrio);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:var(--borde) solid var(--vidrio-borde);box-shadow:var(--sombra),var(--brillo);}
.tc .panel{background:var(--n0);border:var(--borde) solid var(--n200);border-radius:var(--r-l);box-shadow:var(--sombra);}

/* Iconos «Trazo Tirgua» (los pinta tc.js) */
.tc .sym,.tc .material-symbols-outlined{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;
  font-size:1.15rem;line-height:1;flex-shrink:0;vertical-align:middle;overflow:hidden;color:inherit;user-select:none;}
.tc .sym:not(.ic-ok),.tc .material-symbols-outlined:not(.ic-ok){color:transparent!important;}
.tc svg.ic{width:1em;height:1em;display:block;stroke-width:1.75;overflow:visible;}
.tc .spin{animation:tc-gira .9s linear infinite;}
@keyframes tc-gira{to{transform:rotate(360deg);}}

/* Campos y botones: con :where() para que las clases de cada pantalla manden si hay choque */
html :where(.tc) input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden])),html :where(.tc) select,html :where(.tc) textarea{
  font:inherit;font-size:.9rem;color:var(--n900);background:var(--n0);
  border:var(--borde) solid var(--n300);border-radius:var(--r-m);padding:.55rem .75rem;width:100%;outline:none;
  transition:border-color .12s,box-shadow .12s;}
html :where(.tc) input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden])):hover,html :where(.tc) select:hover,html :where(.tc) textarea:hover{border-color:var(--campo);}
html :where(.tc) input::placeholder,html :where(.tc) textarea::placeholder{color:var(--n400);}
:where(.tc) input:focus,:where(.tc) select:focus,:where(.tc) textarea:focus{border-color:var(--a500)!important;box-shadow:var(--ring);}
html :where(.tc) input:where([type=number]){font-family:var(--mono);}
html :where(.tc) input:where([type=checkbox],[type=radio]){accent-color:var(--a500);}
:where(.tc) .lbl{display:block;font-size:.74rem;font-weight:600;color:var(--n500);letter-spacing:.01em;margin-bottom:.35rem;text-transform:none;}

/* Botones */
:where(.tc) .btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.6rem 1rem;
  border-radius:var(--r-m);border:var(--borde) solid transparent;font:inherit;font-size:.875rem;font-weight:600;
  line-height:1.15;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .12s,border-color .12s,color .12s,box-shadow .12s,transform .06s;}
:where(.tc) .btn:active{transform:translateY(1px);}
:where(.tc) .btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
:where(.tc) .btn .sym{font-size:1.05rem;}
:where(.tc) .btn-primary{background:var(--a500s);color:var(--on);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(13,40,90,.18),0 4px 12px rgba(26,99,217,.22);}
:where(.tc) .btn-primary:hover{background:var(--a600s);}
:where(.tc) .btn-success{background:var(--g600s);color:var(--on);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(13,40,90,.16);}
:where(.tc) .btn-success:hover{background:var(--g700s);}
:where(.tc) .btn-ghost,:where(.tc) .btn-sec{background:var(--vidrio-fuerte);color:var(--n800);border-color:var(--n200);box-shadow:var(--brillo);}
:where(.tc) .btn-ghost:hover,:where(.tc) .btn-sec:hover{background:var(--n0);border-color:var(--campo);}
:where(.tc) .btn-danger{background:transparent;color:var(--r500);border-color:transparent;}
:where(.tc) .btn-danger:hover{background:var(--r50);}
:where(.tc) .btn-quiet{background:transparent;color:var(--n600);border-color:transparent;}
:where(.tc) .btn-quiet:hover{background:var(--rail-hi);color:var(--a600);}
:where(.tc) .btn:focus-visible,:where(.tc) button:focus-visible,:where(.tc) a:focus-visible{outline:2px solid var(--a500);outline-offset:2px;}

/* Etiquetas («chips») */
:where(.tc) .chip{display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .55rem;border-radius:999px;font-size:.72rem;font-weight:600;
  background:var(--a50);color:var(--a700);border:1px solid var(--a100);}
:where(.tc) .chip.ok{background:var(--g50);color:var(--g700);border-color:var(--g100);}
:where(.tc) .chip.aviso{background:var(--y50);color:var(--y800);border-color:var(--y100);}
:where(.tc) .chip.error{background:var(--r50);color:var(--r600);border-color:var(--r100);}

/* Ventanas (cristal casi opaco sobre velo) */
:where(.tc) .overlay{display:none;position:fixed;inset:0;background:var(--velo);z-index:60;place-items:center;padding:1rem;}
:where(.tc) .overlay.open{display:grid;animation:tc-velo .14s ease-out;}
:where(.tc) .modal{background:var(--vidrio-fuerte);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);color:var(--n900);
  border-radius:var(--r-xl);box-shadow:var(--sombra-alta),var(--brillo);width:100%;max-height:92vh;overflow-y:auto;border:var(--borde) solid var(--vidrio-borde);
  animation:tc-sube .16s ease-out;}
:where(.tc) .modal h2{font-size:1.08rem;font-weight:600;letter-spacing:-.02em;}
@keyframes tc-velo{from{opacity:0}}
@keyframes tc-sube{from{opacity:0;transform:translateY(6px) scale(.99)}}
@media (prefers-reduced-motion:reduce){:where(.tc) .overlay.open,:where(.tc) .modal{animation:none;}}

/* Aviso flotante */
.tc .tc-toast{display:flex;align-items:center;gap:.6rem;background:var(--n900);color:var(--n0);padding:.75rem 1rem;
  border-radius:var(--r-l);box-shadow:var(--sombra-alta);font-size:.875rem;font-weight:500;max-width:28rem;}
.tc .tc-toast .sym{font-size:1.1rem;}
.tc .tc-toast.t-k .sym{color:var(--g300);} .tc .tc-toast.t-w .sym{color:var(--y300);} .tc .tc-toast.t-e .sym{color:var(--r300);}
[data-tema="oscuro"] .tc .tc-toast{background:var(--n800);color:var(--bg);}
[data-tema="oscuro"] .tc .tc-toast.t-k .sym{color:var(--g500);}
[data-tema="oscuro"] .tc .tc-toast.t-w .sym{color:#a06a00;}
[data-tema="oscuro"] .tc .tc-toast.t-e .sym{color:var(--r500);}

/* ── BARRA LATERAL de cristal (punto de venta) ────────────────── */
.tc .rail{width:76px;flex-shrink:0;background:var(--rail);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  color:var(--rail-tx);display:flex;flex-direction:column;height:100vh;position:relative;z-index:40;border-right:var(--borde) solid var(--rail-line);}
.tc .rail-logo{display:flex;align-items:center;justify-content:center;height:60px;border-bottom:1px solid var(--rail-line);}
.tc .rail-logo span{width:38px;height:38px;border-radius:var(--r-m);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:3px;
  box-shadow:0 0 0 1px var(--rail-line),0 2px 6px rgba(13,40,90,.08);}
.tc .rail-logo img{width:100%;height:100%;object-fit:contain;}
.tc .rail-nav{flex:1;display:flex;flex-direction:column;gap:2px;padding:.6rem .45rem;overflow-y:auto;}
.tc .rail-it{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:.6rem .2rem .55rem;border-radius:var(--r-m);color:var(--rail-tx);text-decoration:none;border:0;background:none;
  cursor:pointer;width:100%;font:inherit;}
.tc .rail-it .sym{font-size:1.3rem;}
.tc .rail-it span:last-child{font-size:.66rem;font-weight:600;letter-spacing:.01em;line-height:1;}
.tc .rail-it:hover{background:var(--rail-hi);color:var(--rail-on);}
.tc .rail-it.active{color:var(--a600);background:var(--rail-hi);}
.tc .rail-it.active::before{content:'';position:absolute;left:-.45rem;top:.55rem;bottom:.55rem;width:3px;border-radius:0 3px 3px 0;background:var(--a500);}
.tc .rail-pie{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:.5rem .45rem .7rem;border-top:1px solid var(--rail-line);}
.tc .rail-yo{width:34px;height:34px;margin:.25rem auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;color:var(--a700);background:var(--a100);letter-spacing:.03em;}
.tc .rail form{margin:0;}

/* Selector de tema */
.tc .tema-menu{position:fixed;z-index:120;background:var(--vidrio-fuerte);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  color:var(--n900);border:var(--borde) solid var(--vidrio-borde);border-radius:var(--r-l);box-shadow:var(--sombra-alta),var(--brillo);padding:.35rem;width:16rem;}
.tc .tema-menu .tm-tit{font-size:.72rem;font-weight:600;color:var(--n500);padding:.45rem .6rem .35rem;letter-spacing:.02em;}
.tc .tema-op{display:flex;align-items:center;gap:.65rem;width:100%;border:0;background:none;padding:.55rem .6rem;border-radius:var(--r-m);
  cursor:pointer;font:inherit;color:var(--n900);text-align:left;}
.tc .tema-op:hover{background:var(--n100);}
.tc .tema-op .sym{font-size:1.1rem;color:var(--n600);}
.tc .tema-op b{display:block;font-size:.875rem;font-weight:600;}
.tc .tema-op small{display:block;font-size:.74rem;color:var(--n500);margin-top:1px;}
.tc .tema-op.on{background:var(--a50);}
.tc .tema-op.on .sym{color:var(--a500);}
.tc .tema-muestra{width:22px;height:22px;border-radius:6px;border:1px solid var(--n300);flex-shrink:0;display:flex;overflow:hidden;}
.tc .tema-muestra i{flex:1;}