/* PALETA TOTALPLAY (Guía gráfica básica, actualización 2022), aplicada a Botia el 2026-09-17.
 *
 * Una sola hoja para las nueve páginas. Los colores de MARCA van como --tp-*; los de CÁSCARA
 * (fondo, superficies, líneas, texto, hover) se derivan de los grises de la guía y cambian con el
 * tema (data-theme="light" / oscuro por defecto). Cada página asigna sus variables propias
 * (--bg, --pan, --ink, --acc, …) desde éstas: ver el :root de cada una.
 *
 * LO QUE NO ES DE MARCA Y NO SE TOCA: los colores de los hilos de fibra (norma), los de estado
 * (verde encendido/ok, ámbar aviso, rojo alarma/error) y el «apagado». La guía reserva el rojo
 * #DB4437 al imagotipo: el rojo de Botia es de estado, no de marca.
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root{
  /* marca: principales */
  --tp-verde:#B7D027;            /* Verde Internet */
  --tp-azul:#4FABD6;             /* rotulado «Morado TV y Apps» en la guía; el HEX es azul */
  --tp-violeta:#7D54AA;          /* rotulado «Teléfono» */
  /* marca: secundarios */
  --tp-rosa:#D94389;
  --tp-amarillo-osc:#F4B000;
  --tp-amarillo:#F2E548;
  --tp-rojo:#DB4437;             /* exclusivo del imagotipo: no se usa en la interfaz */
  /* grises de la guía */
  --tp-gris80:#5A5A5A;
  --tp-gris-osc:#1E1E28;
  --tp-gris-azul:#3B4559;
  --tp-gris5:#F2F2F2;
  --tp-gris40:#AAAAAA;

  /* CÁSCARA, tema oscuro: fondo Gris oscuro; superficies y hover son tintes del mismo gris
     (derivados, no colores de la guía); texto Gris 5; atenuado Gris 40; líneas Gris azulado. */
  --tp-fondo:var(--tp-gris-osc);
  --tp-panel:#26262F;
  --tp-panel2:#2B2B36;
  --tp-hover:#31313E;
  --tp-linea:var(--tp-gris-azul);
  --tp-linea2:#4A5468;
  --tp-texto:var(--tp-gris5);
  --tp-texto2:#D6DAE2;
  --tp-atenuado:var(--tp-gris40);
  --tp-sobre-acento:var(--tp-gris-osc);   /* texto encima del azul o del verde */
  --tp-velo:rgba(30,30,40,.82);
  --tp-pop:rgba(38,38,47,.975);
}
html[data-theme="light"], :root[data-theme="light"]{
  --tp-fondo:var(--tp-gris5);
  --tp-panel:#FFFFFF;
  --tp-panel2:#F7F7F9;
  --tp-hover:#E8EAEF;
  --tp-linea:#D6DAE2;
  --tp-linea2:#C3C8D2;
  --tp-texto:var(--tp-gris-azul);
  --tp-texto2:#4A5468;
  --tp-atenuado:var(--tp-gris80);
  --tp-sobre-acento:#FFFFFF;
  --tp-velo:rgba(59,69,89,.42);
  --tp-pop:rgba(255,255,255,.985);
}

/* Tipografía: Montserrat (la guía: display, encabezados y textos cortos). Slate Std, la de
   párrafos, es comercial: mientras no haya licencia, Montserrat también para el cuerpo. */
body, button, input, select, textarea{
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif;
}

/* EL LOGO (marca.js lo pone sólo si consta que la sesión es de Totalplay). Arriba a la derecha de
   la cabecera, chico. La cabecera reserva el lugar para que nada quede debajo; en las que cortan
   en varias filas queda en la esquina de la primera. La versión sale del tema, sin código. El
   margen alrededor es el área de protección de la guía, a escala. */
header.tp-con-logo{position:relative;padding-right:132px !important}
.tp-logo{position:absolute;top:50%;right:18px;transform:translateY(-50%);width:96px;line-height:0;pointer-events:none}
.tp-logo img{display:block;width:100%;height:auto}
.tp-logo .tp-logo-claro{display:none}
html[data-theme="light"] .tp-logo .tp-logo-claro{display:block}
html[data-theme="light"] .tp-logo .tp-logo-oscuro{display:none}
@media (max-width:560px){
  header.tp-con-logo{padding-right:100px !important}
  .tp-logo{width:72px;right:12px}
}