/* Las cinco pieles del Panel de Mando — COLOR.
 *
 * Un mismo panel, cinco productos distintos. No cambia solo la paleta: cada
 * piel reorganiza el tablero, cambia la densidad y decide QUE se ensena. La
 * parte de color vive aqui; la de disposicion, en `disposicion.css`.
 *
 *   Planta      Operación. La de casa: densa, cromo oscuro, papel cálido y
 *               todo a la vista. Para el jefe de almacén y el gerente.
 *   Cristal     iOS 17. Vidrio esmerilado sobre malla de color, tarjetas
 *               grandes y redondas, poco por pantalla. Para la VSL.
 *   Nube        Moderno. SaaS claro con índigo, radios amables, densidad
 *               media. Para comité y para quien viene de un Power BI.
 *   Consola     Técnico. Oscuro, monoespaciado, máxima densidad y más datos
 *               crudos por pantalla. Para producción y sistemas.
 *   Esencial    Minimalista. Blanco, sin marcos, cifras enormes y solo lo
 *               imprescindible. Para una pantalla de pared o una portada.
 *
 * Reglas que cumplen las cinco (y que la prueba de contraste verifica):
 *  - Ningún texto por debajo de 4,5:1 sobre la superficie en la que se lee.
 *  - Las seis series de gráfico se distinguen del fondo (>=3:1).
 *  - El semáforo nunca es solo color: el chip lleva siempre su texto.
 *  - `--pnl-caja-solida` y `--pnl-cromo-solida` declaran el color que el ojo
 *    ve DE VERDAD detrás del texto, aunque la superficie sea translúcida. Es
 *    contra esos valores contra los que se mide el contraste; sin ellos, un
 *    tema de cristal aprobaría midiendo contra una transparencia.
 */

/* ------------------------------------------------------------- 01 · Planta */
/* La piel de fábrica: papel cálido, cromo casi negro, bronce de la marca.    */

.pnl,
[data-tema='planta'] .pnl {
  --pnl-fondo: #F1F0EC;
  --pnl-fondo-capa: none;
  --pnl-caja: #FFFFFF;
  --pnl-caja-solida: #FFFFFF;
  --pnl-caja-borde: #DFDDD7;
  --pnl-caja-cabeza: #FAF9F7;
  --pnl-caja-hover: #F6F5F2;
  --pnl-caja-raya: #FCFCFA;
  --pnl-vidrio: none;

  --pnl-cromo: #14161B;
  --pnl-cromo-solida: #14161B;
  --pnl-cromo-2: #1E2129;
  --pnl-cromo-tinta: #C2C7D0;
  --pnl-cromo-tinta-2: #9BA1AC;
  --pnl-cromo-fuerte: #FFFFFF;
  --pnl-cromo-suave: rgba(255, 255, 255, 0.06);
  --pnl-cromo-linea: rgba(255, 255, 255, 0.09);
  --pnl-cromo-borde: #000000;

  --pnl-tinta: #14161B;
  --pnl-tinta-2: #4A4E57;
  /* #767B85 daba 4,25:1 sobre la caja: por debajo de AA. Este token pinta
     etiquetas, ejes y texto secundario, que es texto de leer, no adorno. */
  --pnl-tinta-3: #686D76;
  --pnl-tinta-clara: #C9CCD3;
  --pnl-dentro: #FFFFFF;
  --pnl-aviso-tinta: #0F1115;

  --pnl-linea: #DFDDD7;
  --pnl-linea-fuerte: #C4C1B9;
  --pnl-acento: #8A6A2F;
  --pnl-acento-claro: #C9A96A;

  --pnl-bien: #14663C;
  --pnl-bien-suave: #E4F0E8;
  --pnl-bien-borde: #BFDCC9;
  --pnl-ojo: #8A5A08;
  --pnl-ojo-suave: #FAEFD9;
  --pnl-ojo-borde: #E4CFA0;
  --pnl-mal: #A32017;
  --pnl-mal-suave: #FBE7E5;
  --pnl-mal-borde: #E9BEB9;
  --pnl-vivo: #3FBF7F;

  --pnl-s1: #2C5F8A;
  --pnl-s2: #8A6A2F;
  --pnl-s3: #4E7A4A;
  --pnl-s4: #A3562A;
  --pnl-s5: #6B4E82;
  --pnl-s6: #2E7B7B;

  --pnl-r: 3px;
  --pnl-sombra: 0 1px 0 rgba(20, 22, 27, 0.04), 0 1px 3px rgba(20, 22, 27, 0.06);
  --pnl-sombra-alta: 0 8px 28px rgba(20, 22, 27, 0.16);
}

/* ------------------------------------------------------------ 02 · Cristal */
/* Glassmorphism. El truco no es "poner blur": es que haya algo DETRÁS que    */
/* merezca verse borroso. Por eso el fondo es una malla de tres focos de      */
/* color, y las cajas la dejan pasar a distintas profundidades.               */

[data-tema='cristal'] .pnl {
  --pnl-fondo: #EEF1F7;
  /* Tres focos, no un degradado lineal: la malla es lo que hace que dos
     tarjetas contiguas se vean distintas y el vidrio se note. */
  --pnl-fondo-capa:
    radial-gradient(1100px 700px at 12% -8%, rgba(88, 130, 214, 0.34), transparent 60%),
    radial-gradient(900px 620px at 92% 6%, rgba(147, 108, 202, 0.28), transparent 62%),
    radial-gradient(1000px 800px at 60% 108%, rgba(64, 176, 168, 0.26), transparent 60%),
    linear-gradient(168deg, #F4F6FB 0%, #E7ECF6 100%);
  --pnl-caja: rgba(255, 255, 255, 0.62);
  /* Blanco al 62 % sobre la malla: es lo que el ojo ve, y es contra esto
     contra lo que se mide el contraste del texto. */
  --pnl-caja-solida: #F2F4F9;
  --pnl-caja-borde: rgba(255, 255, 255, 0.75);
  --pnl-caja-cabeza: rgba(255, 255, 255, 0.42);
  --pnl-caja-hover: rgba(255, 255, 255, 0.78);
  --pnl-caja-raya: rgba(255, 255, 255, 0.3);
  --pnl-vidrio: blur(18px) saturate(150%);

  --pnl-cromo: rgba(23, 30, 51, 0.72);
  /* El cromo es translucido; esto es lo que el ojo ve detras de su texto. */
  --pnl-cromo-solida: #3A4159;
  --pnl-cromo-2: rgba(23, 30, 51, 0.55);
  --pnl-cromo-tinta: #D6DCEC;
  --pnl-cromo-tinta-2: #AAB4CC;
  --pnl-cromo-fuerte: #FFFFFF;
  --pnl-cromo-suave: rgba(255, 255, 255, 0.14);
  --pnl-cromo-linea: rgba(255, 255, 255, 0.22);
  --pnl-cromo-borde: rgba(255, 255, 255, 0.16);

  --pnl-tinta: #182034;
  --pnl-tinta-2: #414D6B;
  --pnl-tinta-3: #5C688A;
  --pnl-tinta-clara: #A9B2C8;
  --pnl-dentro: #FFFFFF;
  --pnl-aviso-tinta: #17203A;

  --pnl-linea: rgba(88, 105, 150, 0.18);
  --pnl-linea-fuerte: rgba(88, 105, 150, 0.34);
  --pnl-acento: #4B3FBF;
  --pnl-acento-claro: #A99BF5;

  --pnl-bien: #0E6B4A;
  --pnl-bien-suave: rgba(24, 176, 122, 0.16);
  --pnl-bien-borde: rgba(24, 176, 122, 0.4);
  --pnl-ojo: #8A5306;
  --pnl-ojo-suave: rgba(226, 156, 20, 0.18);
  --pnl-ojo-borde: rgba(226, 156, 20, 0.42);
  --pnl-mal: #A61B2B;
  --pnl-mal-suave: rgba(214, 48, 68, 0.14);
  --pnl-mal-borde: rgba(214, 48, 68, 0.38);
  --pnl-vivo: #35D6A0;

  --pnl-s1: #3B5FD0;
  --pnl-s2: #8B48C4;
  --pnl-s3: #17876A;
  --pnl-s4: #C25A1E;
  --pnl-s5: #B0348C;
  --pnl-s6: #1C7FA8;

  --pnl-r: 14px;
  --pnl-sombra: 0 1px 1px rgba(23, 32, 58, 0.04), 0 8px 24px rgba(23, 32, 58, 0.09);
  --pnl-sombra-alta: 0 18px 50px rgba(23, 32, 58, 0.22);
}

/* El vidrio necesita respirar: más aire entre cajas y menos filete duro. */
[data-tema='cristal'] .pnl-lienzo { gap: 0.9rem; padding-block: 0.9rem 2.4rem; }
[data-tema='cristal'] .pnl-caja-t,
[data-tema='cristal'] .pnl-kpi { border-radius: var(--pnl-r); }
[data-tema='cristal'] .pnl-caja-t__cabeza { border-bottom-color: rgba(255, 255, 255, 0.5); }
[data-tema='cristal'] .pnl-marca,
[data-tema='cristal'] .pnl-vistas,
[data-tema='cristal'] .pnl-barra,
[data-tema='cristal'] .pnl-pie { backdrop-filter: blur(16px) saturate(140%); }
[data-tema='cristal'] .pnl-barra { background: rgba(255, 255, 255, 0.55); }
[data-tema='cristal'] .pnl-boton,
[data-tema='cristal'] .pnl-fecha,
[data-tema='cristal'] .pnl-grupo { border-radius: 9px; background: rgba(255, 255, 255, 0.6); }
[data-tema='cristal'] .pnl-fuentes { border-radius: var(--pnl-r); backdrop-filter: blur(18px) saturate(150%); }
[data-tema='cristal'] .pnl-chip { border-radius: 999px; padding-inline: 0.55rem; }
[data-tema='cristal'] .pnl-indice__ficha { border-radius: var(--pnl-r); backdrop-filter: var(--pnl-vidrio); }
/* Sin esto, una tabla larga sobre vidrio se lee fatal: la cabecera pegajosa
   arrastra la malla del fondo por debajo. */
[data-tema='cristal'] .pnl-tabla th { backdrop-filter: blur(10px); }

/* ------------------------------------------------------------ 03 · Consola */
/* La piel TÉCNICA. Fondo casi negro, superficies elevadas por luminancia (no  */
/* por sombra, que en oscuro no se ve), ámbar de instrumentación y todo en     */
/* monoespaciada. Enseña más datos por pantalla que ninguna otra.             */

[data-tema='consola'] .pnl {
  --pnl-fondo: #0B0E13;
  --pnl-fondo-capa: radial-gradient(1200px 700px at 50% -10%, rgba(56, 78, 112, 0.22), transparent 65%);
  --pnl-caja: #141922;
  --pnl-caja-solida: #141922;
  --pnl-caja-borde: #232B38;
  --pnl-caja-cabeza: #1A202B;
  --pnl-caja-hover: #1E2531;
  --pnl-caja-raya: #171D26;
  --pnl-vidrio: none;

  --pnl-cromo: #070A0E;
  --pnl-cromo-solida: #070A0E;
  --pnl-cromo-2: #10151D;
  --pnl-cromo-tinta: #B9C2D0;
  --pnl-cromo-tinta-2: #8E98A8;
  --pnl-cromo-fuerte: #FFFFFF;
  --pnl-cromo-suave: rgba(255, 255, 255, 0.07);
  --pnl-cromo-linea: rgba(255, 255, 255, 0.12);
  --pnl-cromo-borde: #000000;

  --pnl-tinta: #EEF2F8;
  --pnl-tinta-2: #B4BECC;
  --pnl-tinta-3: #8B97A8;
  --pnl-tinta-clara: #4A5566;
  --pnl-dentro: #0B0E13;
  --pnl-aviso-tinta: #0B0E13;

  --pnl-linea: #232B38;
  --pnl-linea-fuerte: #35404F;
  --pnl-acento: #E0A03C;
  --pnl-acento-claro: #F0C173;

  --pnl-bien: #3FD48C;
  --pnl-bien-suave: rgba(63, 212, 140, 0.14);
  --pnl-bien-borde: rgba(63, 212, 140, 0.34);
  --pnl-ojo: #F0B440;
  --pnl-ojo-suave: rgba(240, 180, 64, 0.14);
  --pnl-ojo-borde: rgba(240, 180, 64, 0.34);
  --pnl-mal: #FF6B6B;
  --pnl-mal-suave: rgba(255, 107, 107, 0.14);
  --pnl-mal-borde: rgba(255, 107, 107, 0.34);
  --pnl-vivo: #3FD48C;

  --pnl-s1: #5AA9E6;
  --pnl-s2: #E0A03C;
  --pnl-s3: #4FCF97;
  --pnl-s4: #F08A5D;
  --pnl-s5: #B08BE8;
  --pnl-s6: #4ECDC4;

  --pnl-r: 5px;
  --pnl-sombra: 0 1px 0 rgba(0, 0, 0, 0.4);
  --pnl-sombra-alta: 0 12px 36px rgba(0, 0, 0, 0.6);
}

/* En oscuro, el área bajo una curva a 9 % de opacidad no se ve; y la rejilla
   a plena opacidad se come el gráfico. */
[data-tema='consola'] .g-area { opacity: 0.16; }
[data-tema='consola'] .g-banda { opacity: 0.2; }
[data-tema='consola'] .g-rejilla { stroke: #1F2733; }
[data-tema='consola'] .pnl-marca { border-bottom-color: #1B2230; }
[data-tema='consola'] .pnl-caja-t { box-shadow: none; }
[data-tema='consola'] .g-punto { stroke: var(--pnl-caja); }

/* --------------------------------------------------------------- 04 · Nube */
/* SaaS claro. Índigo, radios amables, mucha línea fina y cero cromo negro:   */
/* es la piel que reconoce quien viene de un cuadro de mando corporativo.     */

[data-tema='nube'] .pnl {
  --pnl-fondo: #F6F8FC;
  --pnl-fondo-capa: none;
  --pnl-caja: #FFFFFF;
  --pnl-caja-solida: #FFFFFF;
  --pnl-caja-borde: #E3E8F0;
  --pnl-caja-cabeza: #FBFCFE;
  --pnl-caja-hover: #F4F7FC;
  --pnl-caja-raya: #FAFBFE;
  --pnl-vidrio: none;

  /* Cromo claro: la cabecera es blanca con filete, no una barra negra. */
  --pnl-cromo: #FFFFFF;
  --pnl-cromo-solida: #FFFFFF;
  --pnl-cromo-2: #F6F8FC;
  --pnl-cromo-tinta: #4A5568;
  --pnl-cromo-tinta-2: #64708A;
  --pnl-cromo-fuerte: #1B2437;
  --pnl-cromo-suave: rgba(79, 70, 229, 0.08);
  --pnl-cromo-linea: #E3E8F0;
  --pnl-cromo-borde: #E3E8F0;

  --pnl-tinta: #1B2437;
  --pnl-tinta-2: #48546B;
  --pnl-tinta-3: #616D86;
  --pnl-tinta-clara: #AEB7C8;
  --pnl-dentro: #FFFFFF;
  --pnl-aviso-tinta: #FFFFFF;

  --pnl-linea: #E9EDF4;
  --pnl-linea-fuerte: #D3DAE6;
  --pnl-acento: #4F46E5;
  --pnl-acento-claro: #4F46E5;

  --pnl-bien: #08795C;
  --pnl-bien-suave: #DCF5EC;
  --pnl-bien-borde: #A8E3CE;
  --pnl-ojo: #96590A;
  --pnl-ojo-suave: #FDF0DA;
  --pnl-ojo-borde: #F2D3A0;
  --pnl-mal: #B4232F;
  --pnl-mal-suave: #FCE7E9;
  --pnl-mal-borde: #F2BCC1;
  --pnl-vivo: #10B981;

  --pnl-s1: #4F46E5;
  --pnl-s2: #0891B2;
  --pnl-s3: #059669;
  --pnl-s4: #D97706;
  --pnl-s5: #C026A3;
  --pnl-s6: #475569;

  --pnl-r: 10px;
  --pnl-sombra: 0 1px 2px rgba(27, 36, 55, 0.05), 0 2px 8px rgba(27, 36, 55, 0.05);
  --pnl-sombra-alta: 0 12px 32px rgba(27, 36, 55, 0.14);
}

/* La cabecera clara necesita filete inferior; y el aviso de demo, que en las
   demás pieles es dorado sobre oscuro, aquí va en índigo sólido. */
[data-tema='nube'] .pnl-marca { border-bottom: 1px solid var(--pnl-linea-fuerte); }
[data-tema='nube'] .pnl-vistas { border-bottom: 1px solid var(--pnl-linea-fuerte); }
[data-tema='nube'] .pnl-vistas__enlace[aria-current='page'] { color: var(--pnl-acento); border-bottom-color: var(--pnl-acento); }
[data-tema='nube'] .pnl-vistas__aviso { color: #FFFFFF; background: var(--pnl-acento); border-radius: 999px; }
[data-tema='nube'] .pnl-marca__logo { color: var(--pnl-acento); }
[data-tema='nube'] .pnl-estado { color: var(--pnl-tinta-2); background: var(--pnl-caja-hover); border-color: var(--pnl-linea-fuerte); }
[data-tema='nube'] .pnl-boton,
[data-tema='nube'] .pnl-fecha,
[data-tema='nube'] .pnl-grupo { border-radius: 7px; }
[data-tema='nube'] .pnl-chip { border-radius: 999px; padding-inline: 0.5rem; }
[data-tema='nube'] .pnl-caja-t,
[data-tema='nube'] .pnl-kpi { border-radius: var(--pnl-r); }
[data-tema='nube'] .pnl-pie { background: var(--pnl-cromo-2); color: var(--pnl-tinta-2); border-top: 1px solid var(--pnl-linea-fuerte); }
[data-tema='nube'] .pnl-pie a { color: var(--pnl-acento); }
[data-tema='nube'] .pnl-pie strong { color: var(--pnl-tinta); }

/* ----------------------------------------------------------- 05 · Esencial */
/* La piel MINIMALISTA. Papel blanco, ni marcos ni sombras, una sola tinta de  */
/* acento y cifras muy grandes. Esconde todo lo accesorio: es la pantalla de   */
/* pared de la oficina, no la herramienta de trabajo.                         */

[data-tema='esencial'] .pnl {
  --pnl-fondo: #FFFFFF;
  --pnl-fondo-capa: none;
  --pnl-caja: #FFFFFF;
  --pnl-caja-solida: #FFFFFF;
  /* Sin marco: la caja se separa por aire, no por filete. */
  --pnl-caja-borde: transparent;
  --pnl-caja-cabeza: transparent;
  --pnl-caja-hover: #FAFAFA;
  --pnl-caja-raya: transparent;
  --pnl-vidrio: none;

  --pnl-cromo: #FFFFFF;
  --pnl-cromo-solida: #FFFFFF;
  --pnl-cromo-2: #FFFFFF;
  --pnl-cromo-tinta: #4A4A4A;
  --pnl-cromo-tinta-2: #6B6B6B;
  --pnl-cromo-fuerte: #111111;
  --pnl-cromo-suave: #F2F2F2;
  --pnl-cromo-linea: #E6E6E6;
  --pnl-cromo-borde: #E6E6E6;

  --pnl-tinta: #111111;
  --pnl-tinta-2: #444444;
  --pnl-tinta-3: #6B6B6B;
  --pnl-tinta-clara: #C4C4C4;
  --pnl-dentro: #FFFFFF;
  --pnl-aviso-tinta: #FFFFFF;

  --pnl-linea: #ECECEC;
  --pnl-linea-fuerte: #D8D8D8;
  /* Una sola tinta de acento en toda la piel. */
  --pnl-acento: #C2410C;
  --pnl-acento-claro: #C2410C;

  --pnl-bien: #15803D;
  --pnl-bien-suave: transparent;
  --pnl-bien-borde: transparent;
  --pnl-ojo: #92610A;
  --pnl-ojo-suave: transparent;
  --pnl-ojo-borde: transparent;
  --pnl-mal: #B91C1C;
  --pnl-mal-suave: transparent;
  --pnl-mal-borde: transparent;
  --pnl-vivo: #15803D;

  /* Escala de grises con un solo color vivo: en minimalista, seis colores de
     serie serian ruido. */
  --pnl-s1: #111111;
  --pnl-s2: #C2410C;
  --pnl-s3: #555555;
  --pnl-s4: #8A8A8A;
  --pnl-s5: #3D3D3D;
  --pnl-s6: #6E6E6E;

  --pnl-r: 0px;
  --pnl-sombra: none;
  --pnl-sombra-alta: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Minimalista de verdad: la jerarquía la hace el tamaño y el aire, no las
   cajas. Fuera filetes, fuera sombras, fuera fondos de cabecera. */
[data-tema='esencial'] .pnl { font-size: 14px; }
[data-tema='esencial'] .pnl-caja-t { border: 0; box-shadow: none; }
[data-tema='esencial'] .pnl-caja-t__cabeza { border-bottom: 1px solid var(--pnl-linea); background: none; padding-inline: 0; }
[data-tema='esencial'] .pnl-caja-t__titulo { letter-spacing: 0.18em; color: var(--pnl-tinta-3); }
[data-tema='esencial'] .pnl-caja-t__cuerpo { padding-inline: 0; }
[data-tema='esencial'] .pnl-caja-t__pie { background: none; border-top: 0; padding-inline: 0; }
[data-tema='esencial'] .pnl-kpi { border: 0; box-shadow: none; padding-inline: 0; }
[data-tema='esencial'] .pnl-kpi__cifra { font-size: 2.6rem; font-weight: 300; letter-spacing: -0.04em; }
[data-tema='esencial'] .pnl-kpi--grande .pnl-kpi__cifra { font-size: 3.2rem; }
[data-tema='esencial'] .pnl-marca { border-bottom: 1px solid var(--pnl-linea); }
[data-tema='esencial'] .pnl-marca__logo { color: var(--pnl-acento); }
[data-tema='esencial'] .pnl-vistas { border-bottom: 1px solid var(--pnl-linea); }
[data-tema='esencial'] .pnl-vistas__enlace[aria-current='page'] { color: var(--pnl-tinta); border-bottom-color: var(--pnl-acento); background: none; }
[data-tema='esencial'] .pnl-vistas__aviso { color: var(--pnl-tinta-3); background: none; letter-spacing: 0.16em; }
[data-tema='esencial'] .pnl-estado { background: none; border-color: var(--pnl-linea); color: var(--pnl-tinta-2); }
[data-tema='esencial'] .pnl-chip { border: 0; background: none; padding-inline: 0; font-weight: 700; }
[data-tema='esencial'] .pnl-tabla th { background: none; border-bottom-color: var(--pnl-tinta); }
[data-tema='esencial'] .pnl-tabla tfoot td { background: none; }
[data-tema='esencial'] .pnl-pie { background: none; border-top: 1px solid var(--pnl-linea); color: var(--pnl-tinta-3); }
[data-tema='esencial'] .pnl-pie a { color: var(--pnl-acento); }
[data-tema='esencial'] .pnl-pie strong { color: var(--pnl-tinta); }
[data-tema='esencial'] .g-rejilla { stroke: #F0F0F0; }
[data-tema='esencial'] .pnl-alerta__marca { border-radius: 0; }

/* ---------------------------------------------------- selector de la piel */

.pnl-temas { display: inline-flex; align-items: center; gap: 0.3rem; }
.pnl-temas__etiqueta {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pnl-cromo-tinta-2);
}
.pnl-temas__boton {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--pnl-cromo-linea);
  border-radius: 50%;
  background: var(--pnl-muestra, #888);
  cursor: pointer;
  font: inherit;
  color: transparent;
  overflow: hidden;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.pnl-temas__boton:hover { transform: scale(1.15); }
.pnl-temas__boton[aria-pressed='true'] {
  box-shadow: 0 0 0 2px var(--pnl-cromo), 0 0 0 3.5px var(--pnl-acento-claro);
}
/* La muestra de cada piel: un vistazo basta para saber cuál es cuál. */
.pnl-temas__boton[data-tema='planta'] { --pnl-muestra: linear-gradient(135deg, #F1F0EC 50%, #14161B 50%); }
.pnl-temas__boton[data-tema='cristal'] { --pnl-muestra: linear-gradient(135deg, #7C9BE8 0%, #A99BF5 50%, #58C7BC 100%); }
.pnl-temas__boton[data-tema='consola'] { --pnl-muestra: linear-gradient(135deg, #0B0E13 50%, #E0A03C 50%); }
.pnl-temas__boton[data-tema='nube'] { --pnl-muestra: linear-gradient(135deg, #FFFFFF 50%, #4F46E5 50%); }
.pnl-temas__boton[data-tema='esencial'] { --pnl-muestra: linear-gradient(135deg, #08090B 50%, #FFB627 50%); }

@media (pointer: coarse) {
  .pnl-temas__boton { width: 26px; height: 26px; }
}

@media (max-width: 700px) {
  .pnl-temas__etiqueta { display: none; }
}