/* Colores de dockia: todo el acento sale de aquí.
   - Marca: logo, portada, planes y páginas públicas.
   - App: todo lo interactivo dentro de la app (chat, lista de apps, configuración, administración, avisos). */
:root {
  /* Paletas disponibles. -ink: textos y bordes sobre fondo claro; -bright: sobre fondo oscuro. */
  --yellow: #F2B705; --yellow-2: #F59E0B; --yellow-text: #14181F; --yellow-ink: #8A6100; --yellow-bright: #F2B705;
  --blue: #0070f3;   --blue-2: #3d8bff;   --blue-text: #ffffff;   --blue-ink: #0070f3;   --blue-bright: #008dff;

  /* MARCA. Para volver al amarillo, cambia «blue» por «yellow» en estas cinco líneas (y en logo/og, ver scripts/brand). */
  --brand: var(--blue);
  --brand-2: var(--blue-2);
  --brand-text: var(--blue-text);
  --brand-ink-light: var(--blue-ink);
  --brand-bright: var(--blue-bright);

  /* APP: azul. */
  --app: var(--blue);
  --app-2: var(--blue-2);
  --app-text: var(--blue-text);
  --app-ink-light: var(--blue-ink);
  --app-bright: var(--blue-bright);

  --brand-ink: var(--brand-ink-light);
  --app-ink: var(--app-ink-light);
  /* Por defecto, el acento es el de la app; las páginas públicas lo cambian a la marca (login.css, home.css). */
  --accent: var(--app);
  --accent2: var(--app-2);
  --accent-text: var(--app-text);
  --accent-ink: var(--app-ink);

  /* Color de Opus en la caja del chat (el «+», su anillo, el borde y el brillo): el violeta de la familia del azul de la app */
  --opus: #6f4cf6;
}
/* El logo con el nombre (icono, public/favicon.svg, y «dictala.app»): igual en la portada (site.css, .perch y .brand) y en la app
   (build.css, .side-logo y la cabecera de «Nuevo proyecto»), en el escritorio y en el móvil. 32 px: el tamaño de los iconos de los
   proyectos en la lista */
:root { --logo: 32px; --logo-gap: 10px; --logo-text: 19px; }
/* El logo sin recuadro (logoMark en src/views/icons.js): en la caja del logo, con su margen (las piezas, a 24 px); en el tema claro, en
   azul (su degradado); en el oscuro, en blanco */
.logo-mk { display: block; flex: none; box-sizing: border-box; width: var(--logo); height: var(--logo); padding: 4px; overflow: visible; }
:root:not([data-theme="light"]) .logo-mk g { fill: #fff; }
/* Tema oscuro (el de por defecto): textos y bordes con la variante luminosa. */
:root:not([data-theme="light"]) { --brand-ink: var(--brand-bright); --app-ink: var(--app-bright); }

/* Tilde de la marca en su color (brandMark() en src/views/components/public.js): la «ı» sin punto lleva la tilde dibujada encima */
.b-acc { position: relative; }
.b-acc::after { content: ""; position: absolute; left: 50%; top: -0.03em; width: 0.14em; height: 0.28em; border-radius: 0.07em; background: var(--brand-bright); transform: translateX(-35%) skewX(-28deg); }
:root[data-theme="light"] .b-acc::after { background: var(--brand); }
.b-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* Terminación del logotipo (lo que va tras el punto de BRAND_NAME, «.app»): mismo tamaño, más fina y más suave */
.b-tld { font-weight: 500; color: color-mix(in srgb, currentColor 55%, transparent); } /* color, no opacity: la barra lateral anima la opacidad de sus span */

/* App instalada en el móvil: solo en vertical. Android lo cumple por el manifiesto («orientation»); el iPhone lo ignora, así que en
   horizontal se tapa la pantalla con un móvil que gira (solo pantallas bajas y táctiles: ni tabletas ni ordenador). */
@media (display-mode: standalone) and (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    background: Canvas url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%239aa3b5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='22' y='10' width='20' height='36' rx='4'/%3E%3Cline x1='30' y1='40' x2='34' y2='40'/%3E%3Cpath d='M12 30a20 20 0 0 1 6-14'/%3E%3Cpolyline points='12 22 12 30 20 30'/%3E%3Cpath d='M52 34a20 20 0 0 1-6 14'/%3E%3Cpolyline points='52 42 52 34 44 34'/%3E%3C/svg%3E") center / 88px no-repeat;
  }
}