/* =========================================================================
   PoolPlus - base de marca
   Fuente unica de colores, tipografia y logo para todo el sitio.

   En cada pagina, una linea dentro del <head>:
       <link rel="stylesheet" href="/brand.css"/>

   Para poner el logo:
       sobre fondo oscuro:
       <a href="/" class="pp-logo pp-logo--dark"><i class="pp-mark"></i><span class="pp-word">Pool<b>Plus</b></span></a>
       sobre fondo claro:
       <a href="/" class="pp-logo"><i class="pp-mark"></i><span class="pp-word">Pool<b>Plus</b></span></a>

   El tamano se controla con font-size sobre .pp-logo.
   El nombre se escribe siempre PoolPlus: sin espacio, con las dos P mayusculas.
   ========================================================================= */

:root{
  /* ---- color ---- */
  --pp-navy:#0B1120;        /* fondo oscuro de la marca */
  --pp-ink:#0F172A;         /* texto principal */
  --pp-sky:#29B6F6;         /* turquesa: acento y "Plus" sobre oscuro */
  --pp-sky-deep:#1E88C8;    /* turquesa para fondo blanco */
  --pp-deep:#1F2A7A;        /* azul marino de la escuadra */
  --pp-deep-lift:#3A5ED2;   /* el mismo marino, subido, para fondo oscuro */
  --pp-muted:#6B7280;
  --pp-line:#E5EAF2;
  --pp-paper:#F5F9FC;

  /* ---- tipografia ---- */
  --pp-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* ---- el logo, dibujado ---- */
  --pp-mark:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%234FC8F8%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%232E7FC4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231F2A7A%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%232A3A96%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23151C5C%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M45%209V46h47%22%20fill%3D%22none%22%20stroke%3D%22url(%23a)%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%2058h47v37%22%20fill%3D%22none%22%20stroke%3D%22url(%23b)%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --pp-mark-dark:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%237EDCFB%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%2343B4EC%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232E8FDC%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%235C93F2%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%233A5ED2%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M45%209V46h47%22%20fill%3D%22none%22%20stroke%3D%22url(%23a)%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%2058h47v37%22%20fill%3D%22none%22%20stroke%3D%22url(%23b)%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --pp-mark-mono:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M45%209V46h47%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%2058h47v37%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.58%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

/* -------------------------------------------------------------------------
   Logo horizontal: las dos escuadras + PoolPlus.
   Es el que va en barras, correos y pantallas de trabajo.
   ------------------------------------------------------------------------- */
.pp-logo{
  display:inline-flex;
  align-items:center;
  gap:.40em;
  line-height:1;
  text-decoration:none;
  font-family:var(--pp-font);
  font-size:22px;
}
.pp-logo .pp-mark{
  width:1.45em;
  height:1.45em;
  flex:none;
  background:var(--pp-mark) center/contain no-repeat;
}
.pp-logo .pp-word{
  font-weight:800;
  letter-spacing:-.035em;
  color:var(--pp-navy);
  white-space:nowrap;
}
.pp-logo .pp-word b{font-weight:800;color:var(--pp-sky-deep);}

/* Sobre fondo oscuro el azul marino se pierde contra el fondo:
   sube a un azul medio y el texto pasa a blanco. Son los mismos dos tonos. */
.pp-logo--dark .pp-mark{background-image:var(--pp-mark-dark);}
.pp-logo--dark .pp-word{color:#fff;}
.pp-logo--dark .pp-word b{color:var(--pp-sky);}

/* Una sola tinta, para fondos de color fuerte. */
.pp-logo--mono .pp-mark{background-image:var(--pp-mark-mono);}
.pp-logo--mono .pp-word,
.pp-logo--mono .pp-word b{color:#fff;}

/* Solo el simbolo, sin letras: iconos y espacios chicos. */
.pp-mark-only{
  display:inline-block;width:1em;height:1em;
  background:var(--pp-mark) center/contain no-repeat;
}
.pp-mark-only--dark{background-image:var(--pp-mark-dark);}
.pp-mark-only--mono{background-image:var(--pp-mark-mono);}

/* Ficha con el simbolo sobre el azul de la marca: avatares e iconos. */
.pp-tile{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--pp-navy);border-radius:22%;
  width:2.4em;height:2.4em;
}
.pp-tile::before{
  content:"";width:62%;height:62%;
  background:var(--pp-mark-dark) center/contain no-repeat;
}