/* Shared components: calendars, the account sheet, the sidebar brand. */
.hc-cal-titulo { font-weight: 650; font-size: 15px; margin: 0 0 10px; }
.hc-cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.hc-cal-dow { font-size: 11px; color: var(--hc-tinta-3); text-align: center; font-weight: 600; }
.hc-cal-dia { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font-size: 13px; color: var(--hc-tinta-3); position: relative; font-variant-numeric: tabular-nums; border: 0; background: none; padding: 0; font-family: inherit; -webkit-tap-highlight-color: transparent; }
.hc-cal-dia.con { color: var(--hc-tinta); font-weight: 600; cursor: pointer; transition: transform .12s; }
.hc-cal-dia.con:disabled { cursor: default; opacity: 1; }
.hc-cal-dia.con:active:not(:disabled) { transform: scale(.9); }
.hc-cal-dia.con::after { content: ""; position: absolute; bottom: 13%; width: 4px; height: 4px; border-radius: 50%; }
.hc-cal-dia.pendiente { background: rgba(var(--ion-color-warning-rgb), .18); }
.hc-cal-dia.pendiente::after { background: var(--ion-color-warning); }
.hc-cal-dia.hecha { background: rgba(var(--ion-color-success-rgb), .16); }
.hc-cal-dia.hecha::after { background: var(--ion-color-success); }
.hc-cal-dia.vacia { background: var(--hc-relleno); color: var(--hc-tinta-3); }
.hc-cal-dia.dato { background: rgba(var(--ion-color-primary-rgb), calc(.12 + var(--v, .5) * .8)); }
.hc-cal-dia.elegido { box-shadow: 0 0 0 2.5px var(--ion-color-primary); }
.hc-cal.compacto .hc-cal-rejilla { gap: 3px; }
.hc-cal.compacto .hc-cal-dia { border-radius: 6px; font-size: 11px; }

.hc-cal-anio { display: flex; gap: 14px; overflow-x: auto; padding: 2px 20px 6px; scrollbar-width: none; }
.hc-cal-anio::-webkit-scrollbar { display: none; }
.hc-cal-anio-mes { flex: none; display: grid; gap: 6px; }
.hc-cal-anio-nombre { border: 0; background: none; font: 600 12.5px var(--ion-font-family); color: var(--hc-tinta-2); padding: 3px 8px; border-radius: 99px; justify-self: start; cursor: pointer; }
.hc-cal-anio-nombre[aria-pressed="true"] { background: var(--ion-color-primary); color: var(--ion-color-primary-contrast); }
.hc-cal-anio-dias { display: grid; grid-template-rows: repeat(7, 13px); grid-auto-flow: column; grid-auto-columns: 13px; gap: 2.5px; padding: 3px; border-radius: 6px; }
.hc-cal-anio-mes.activo .hc-cal-anio-dias { box-shadow: 0 0 0 2px var(--ion-color-primary); }
.hc-cal-anio-dias i { border-radius: 3px; background: var(--hc-relleno); }
.hc-cal-anio-dias button { border: 0; padding: 0; border-radius: 3px; cursor: pointer; background: rgba(var(--ion-color-primary-rgb), calc(.2 + var(--v) * .8)); }
.hc-cal-anio-dias button.elegido { box-shadow: 0 0 0 2px var(--ion-color-danger); }

.hc-marca { display: flex; align-items: center; gap: 12px; padding: 0 8px 0 20px; min-width: 0; cursor: pointer; }
.hc-marca > div { min-width: 0; }
.hc-marca strong { display: block; font-size: 16px; letter-spacing: -.02em; }
.hc-marca small { display: block; font-size: 12px; color: var(--hc-tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ion-menu.hc-menu ion-header ion-toolbar { --padding-top: 14px; --padding-bottom: 12px; }
ion-menu.hc-menu ion-content ion-list { padding-top: 6px; }
.hc-avatar.grande { width: 52px; height: 52px; font-size: 18px; }
/* The seal as a header button, for an app that has no side pane to carry it (Ajustes, Datos). */
.hc-boton-sello { --padding-start: 6px; --padding-end: 6px; }
.hc-boton-sello .hc-sello { width: 26px; height: 26px; }
.hc-app-icono { width: 34px; height: 34px; border-radius: 9px; color: #fff; font-weight: 700; display: grid; place-items: center; box-shadow: inset 0 -8px 14px -8px rgba(0, 0, 0, .25); }
/* The foot of the master pane: this app's settings, then who is signed in. */
ion-menu.hc-menu ion-footer ion-toolbar { --background: transparent; padding: 6px 0; }
.hc-pie-menu { display: grid; gap: 2px; }
ion-menu.hc-menu .hc-cuenta, ion-menu.hc-menu .hc-ajustes-app { margin: 0 8px; }

#hc-arranque { position: fixed; inset: 0; display: grid; place-items: center; background: var(--ion-background-color, #f2f2f7); z-index: 9999; transition: opacity .35s; }
#hc-arranque .hc-logo { height: clamp(40px, 7vh, 64px); animation: hc-arranque-latido 1.6s ease-in-out infinite alternate; }
@keyframes hc-arranque-latido { from { opacity: .72; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #hc-arranque .hc-logo { animation: none; } }
#hc-arranque.fuera { opacity: 0; pointer-events: none; }

/* The sidebar fills the window's height beside the content. */
ion-menu.hc-menu { --background: var(--ion-background-color); }
ion-menu.hc-menu::part(container) { height: 100%; }
ion-menu.hc-menu ion-list { background: transparent; }
ion-menu.hc-menu ion-header ion-toolbar, ion-menu.hc-menu ion-footer ion-toolbar { --background: var(--ion-background-color); }

/* The load indicator: a hairline at the very top while a screen's module downloads (only if it takes a moment). */
.hc-progreso { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 2.5px; z-index: 10000; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .2s .1s; }
.hc-progreso i { position: absolute; inset: 0 auto 0 0; width: 40%; background: var(--ion-color-primary); border-radius: 2px; animation: hc-progreso 1.1s cubic-bezier(.4, 0, .2, 1) infinite; }
.hc-cargando .hc-progreso { opacity: 1; }
@keyframes hc-progreso { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* The bar's last place when there are more tabs than fit: "Más", which opens the rest in a popover. It is a plain
   button (an ion-tab-button must name a tab that exists), dressed as one. */
.hc-tab-mas { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1; min-width: 0; position: relative;
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--ion-tab-bar-color, var(--hc-tinta-2)); font: 500 10px var(--ion-font-family); letter-spacing: .01em; -webkit-tap-highlight-color: transparent; }
.hc-tab-mas ion-icon { font-size: 24px; }
.hc-tab-mas.seleccionado { color: var(--ion-tab-bar-color-selected, var(--ion-color-primary)); }
.hc-tab-mas ion-badge { position: absolute; top: 0; left: 50%; margin-left: 4px; font-size: 10px; }
.hc-mas-pop { --width: 232px; --max-height: 60vh; }
.hc-mas-pop ion-list { padding: 4px 0; }
.hc-mas-pop ion-item { --min-height: 46px; }

/* ─── Panels (componentes/paneles.js) ─── */
.hc-paneles { --hc-p-inicio: 280px; --hc-p-fin: 300px; --hc-p-riel: 34px; display: flex; height: 100%; min-height: 0; position: relative; }
.hc-p-principal { flex: 1 1 auto; min-width: 0; min-height: 0; position: relative; display: flex; flex-direction: column; }
.hc-p-lado { flex: none; width: var(--hc-p-inicio); min-height: 0; display: flex; flex-direction: column; background: var(--hc-tarjeta); overflow: hidden; }
.hc-p-fin { width: var(--hc-p-fin); order: 3; border-left: 0.55px solid var(--hc-linea); }
.hc-p-inicio { order: 0; border-right: 0.55px solid var(--hc-linea); }
.hc-p-principal { order: 2; container-type: inline-size; container-name: principal; }
.hc-p-cabeza { display: flex; align-items: center; gap: 8px; padding: 12px 10px 8px 16px; flex: none; }
.hc-p-cabeza strong { flex: 1; font-size: 13px; font-weight: 650; color: var(--hc-tinta-2); letter-spacing: .01em; }
.hc-p-cerrar { border: 0; background: none; width: 28px; height: 28px; border-radius: 7px; color: var(--hc-tinta-2); display: grid; place-items: center; cursor: pointer; }
.hc-p-cerrar:hover { background: var(--hc-relleno); color: var(--hc-tinta); }
.hc-p-cuerpo { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }

/* The divider: a 1px line with a 10px grab area; it lights up when hovered, dragged or focused. */
.hc-p-separador { flex: none; width: 10px; margin: 0 -5px; position: relative; z-index: 5; cursor: col-resize; touch-action: none; outline: none; }
.hc-p-separador[data-lado="inicio"] { order: 1; }
.hc-p-separador[data-lado="fin"] { order: 2; }
.hc-p-separador::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; border-radius: 2px; background: transparent; transition: background .15s; }
.hc-p-separador:hover::after, .hc-p-separador:focus-visible::after, .arrastrando .hc-p-separador::after { background: var(--ion-color-primary); }
.arrastrando { cursor: col-resize; user-select: none; }
.arrastrando iframe { pointer-events: none; }

/* Collapsed: the panel folds to nothing and a slim rail with its icon and name reopens it. */
.hc-p-riel { display: none; flex: none; width: var(--hc-p-riel); border: 0; padding: 12px 0; background: var(--hc-tarjeta); color: var(--hc-tinta-2); cursor: pointer; flex-direction: column; align-items: center; gap: 10px; font: 600 12px var(--ion-font-family); }
.hc-p-riel span { writing-mode: vertical-rl; letter-spacing: .02em; }
.hc-p-riel:hover { color: var(--ion-color-primary); background: var(--hc-relleno); }
.hc-p-riel-inicio { order: 0; border-right: 0.55px solid var(--hc-linea); }
.hc-p-riel-fin { order: 3; border-left: 0.55px solid var(--hc-linea); }
.cerrado-inicio .hc-p-inicio, .cerrado-fin .hc-p-fin { width: 0 !important; border: 0; }
.cerrado-inicio .hc-p-riel-inicio, .cerrado-fin .hc-p-riel-fin { display: flex; }
.cerrado-inicio .hc-p-separador[data-lado="inicio"], .cerrado-fin .hc-p-separador[data-lado="fin"] { display: none; }
.animando .hc-p-lado { transition: width .3s cubic-bezier(.32, .72, 0, 1); }
.hc-p-velo { display: none; }

/* Phone: side panels are drawers over the content. */
@media (max-width: 767px) {
  .hc-p-separador, .hc-p-riel, .hc-p-riel-inicio, .hc-p-riel-fin { display: none !important; }
  .hc-p-lado { position: absolute; top: 0; bottom: 0; z-index: 20; width: min(86vw, 340px) !important; box-shadow: 0 0 40px rgba(0,0,0,.25); transition: transform .34s cubic-bezier(.32, .72, 0, 1); border: 0; }
  .hc-p-inicio { left: 0; transform: translateX(-104%); }
  .hc-p-fin { right: 0; transform: translateX(104%); }
  .movil-inicio .hc-p-inicio, .movil-fin .hc-p-fin { transform: none; }
  .hc-p-velo { display: block; position: absolute; inset: 0; z-index: 15; background: rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .movil-inicio .hc-p-velo, .movil-fin .hc-p-velo { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { .hc-p-lado, .animando .hc-p-lado { transition: none !important; } }

/* ─── The sidebar: resizable, folds to a rail ─── */
.hc-barra-separador { display: none; }
@media (min-width: 992px) {
  ion-menu.hc-menu { position: relative; }
  .hc-barra-separador { display: block; position: absolute; top: 0; bottom: 0; right: 0; width: 8px; z-index: 30; cursor: col-resize; touch-action: none; outline: none; }
  .hc-barra-separador::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: transparent; transition: background .15s; }
  .hc-barra-separador:hover::after, .hc-barra-separador:focus-visible::after, hc-pestanas.arrastrando .hc-barra-separador::after { background: var(--ion-color-primary); }
  hc-pestanas.arrastrando { cursor: col-resize; user-select: none; }
  hc-pestanas.arrastrando iframe { pointer-events: none; }
  ion-split-pane.hc-barra-animando ion-menu.hc-menu, ion-split-pane.hc-barra-animando > [main], ion-split-pane.hc-barra-animando ion-tabs { transition: width .3s cubic-bezier(.32, .72, 0, 1), flex-basis .3s cubic-bezier(.32, .72, 0, 1), min-width .3s, max-width .3s; }
  /* The rail: one centred column — the seal, the unfold button under it, then the tabs, each a 48 px square with its
     icon in the middle (ion-item keeps an inner box after the start slot, so the icon is centred by padding, not flex). */
  ion-menu.hc-menu.compacta .hc-marca > div, ion-menu.hc-menu.compacta ion-label, ion-menu.hc-menu.compacta ion-badge { display: none; }
  ion-menu.hc-menu.compacta ion-header ion-toolbar { --padding-start: 0; --padding-end: 0; --padding-top: 0; --padding-bottom: 0; --min-height: 0; }
  ion-menu.hc-menu.compacta ion-header ion-toolbar::part(container) { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0 10px; }
  ion-menu.hc-menu.compacta .hc-marca { padding: 0; margin: 0; justify-content: center; width: 100%; }
  ion-menu.hc-menu.compacta .hc-marca .hc-sello { width: 36px; height: 36px; border-radius: 10px; }
  ion-menu.hc-menu.compacta .hc-barra-boton { margin: 0; }
  ion-menu.hc-menu.compacta .hc-barra-boton ion-button { --padding-start: 0; --padding-end: 0; width: 40px; height: 36px; margin: 0; }
  ion-menu.hc-menu.compacta ion-content ion-list { padding-top: 4px; }
  ion-menu.hc-menu.compacta ion-item { --padding-start: 12px; --inner-padding-end: 0; --padding-end: 0; --min-height: 48px; width: 48px; margin: 4px auto; }
  ion-menu.hc-menu.compacta ion-item ion-icon[slot="start"] { margin: 0; font-size: 24px; }
  ion-menu.hc-menu.compacta .hc-cuenta, ion-menu.hc-menu.compacta .hc-ajustes-app { --padding-start: 8px; --inner-padding-end: 0; --padding-end: 0; width: 48px; margin: 0 auto; }
  ion-menu.hc-menu.compacta .hc-cuenta .hc-avatar, ion-menu.hc-menu.compacta .hc-ajustes-app .hc-cuadro { margin: 0; }
  ion-menu.hc-menu.compacta .hc-pie-menu { gap: 6px; }
}

/* A screen with panels: the page's ion-content doesn't scroll; the main area and each panel scroll on their own. */
ion-content.hc-con-paneles { --overflow: hidden; }
ion-content.hc-con-paneles::part(scroll) { overflow: hidden; }
.hc-p-principal > ion-content, .hc-p-principal > .hc-p-desplazable { flex: 1 1 auto; height: 100%; }
.hc-p-principal > .hc-p-desplazable { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.hc-p-cuerpo ion-list:not(.list-inset) { background: transparent; }
.hc-p-lado ion-item { --background: transparent; }
@media (max-width: 767px) { .hc-p-lado { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } .hc-paneles .hc-p-lado { padding-top: 0; } }

/* A legend of coloured dots — shared: every screen that draws one may be the first screen opened (styles load per tab). */
.hc-leyenda { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--hc-tinta-2); }
.hc-leyenda span { display: inline-flex; gap: 6px; align-items: center; }
.hc-leyenda i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* Full-screen views (the reader, the editor) hide the tab bar and the mini player — only while they are the screen in
   front. A class on <body> can't express that: a screen left behind in another tab's stack never hears it was left,
   so its class stayed and the tab bar vanished everywhere. The selector asks the DOM instead. */
ion-tabs:has(> ion-tab:not(.tab-hidden) :is(hc-lector, hc-editor):not(.ion-page-hidden)) :is(ion-tab-bar, hc-mini) { display: none !important; }
body:has(ion-tab:not(.tab-hidden) hc-lector:not(.ion-page-hidden)) .hc-rp { display: none !important; }

/* The offline banner (pwa.js) shows on every screen, so its styles load with the shell. */
.hc-sin-conexion { position: fixed; z-index: 100000; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 6px); transform: translate(-50%, -140%); padding: 6px 14px; border-radius: 99px; background: #1f2127; color: #fff; font: 600 13px var(--ion-font-family); box-shadow: 0 8px 24px -8px rgba(0,0,0,.45); transition: transform .35s cubic-bezier(.2,.9,.3,1); white-space: nowrap; pointer-events: none; }
.hc-sin-conexion:not(.visible) { opacity: 0; box-shadow: none; }
.hc-sin-conexion.visible { transform: translate(-50%, 0); }

/* Sign-in (MOC-24, src/portada.js). Since 0.200 it is the home screen before the apps: the same wallpaper of colours, the
   organisation's mark at the left and Ciserex's at the right, and the question on one card of the home's glass. The ink
   and glass are the home's (inicio.css hc-inicio), light or dark as the system is; the door sets Ionic's palette itself,
   because the person's own choice in Ajustes is not known until they have signed in. */
#hc-acceso { position: fixed; inset: 0; z-index: 10000; overflow-y: auto; display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px max(18px, env(safe-area-inset-bottom));
  --home-tinta: #1c1c1e; --home-tinta-2: rgba(60, 60, 67, .62); --home-vidrio: rgba(255, 255, 255, .58); --home-vidrio-borde: rgba(255, 255, 255, .7);
  --home-base: #f2f1f6; --home-sombra: 0 24px 60px -28px rgba(30, 40, 80, .45);
  background: var(--home-base); font-family: var(--ion-font-family, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif); color: var(--home-tinta); }
:root.hc-oscuro #hc-acceso {
  --home-tinta: #f5f5f7; --home-tinta-2: rgba(235, 235, 245, .6); --home-vidrio: rgba(44, 44, 50, .55); --home-vidrio-borde: rgba(255, 255, 255, .12);
  --home-base: #0c0f1c; --home-sombra: 0 24px 60px -24px rgba(0, 0, 0, .7); }
#hc-acceso > * { position: relative; z-index: 1; }
#hc-acceso > .hc-acceso { margin-block: auto; }
#hc-acceso > .hc-home-fondo { position: fixed; z-index: 0; }
.hc-acceso-marcas { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 1180px; margin: 0 auto; }
.hc-acceso-marcas .ciserex { margin-inline-start: auto; }
.hc-acceso-marcas img { display: block; width: auto; height: clamp(26px, 5vh, 44px); max-width: 42vw; object-fit: contain; }
.hc-acceso-marcas .oscuro, :root.hc-oscuro .hc-acceso-marcas .claro { display: none; }
:root.hc-oscuro .hc-acceso-marcas .oscuro { display: block; }
.hc-acceso-marcas [hidden] { display: none !important; }
#hc-acceso, #hc-acceso * { box-sizing: border-box; }
.hc-acceso { width: min(440px, 100%); margin: auto; padding: 34px 26px 26px; text-align: center; border-radius: 28px;
  background: var(--home-vidrio); box-shadow: inset 0 0 0 .5px var(--home-vidrio-borde), var(--home-sombra);
  backdrop-filter: blur(30px) saturate(1.7); -webkit-backdrop-filter: blur(30px) saturate(1.7); }
.hc-acceso h1 { margin: 0 0 8px; font-size: 26px; font-weight: 750; letter-spacing: -.022em; line-height: 1.15; text-wrap: balance; color: var(--home-tinta); }
.hc-acceso h1 span { display: block; }
:root[data-acceso="entrar"] .hc-acceso h1 { margin-bottom: 28px; }
.hc-acceso h1 small { display: block; margin-top: 6px; font-size: 17px; font-weight: 500; letter-spacing: 0; color: var(--home-tinta-2); }
.hc-acceso p { margin: 0 4px 24px; font-size: 16px; line-height: 1.42; color: var(--home-tinta-2); }
.hc-acceso p strong { color: var(--home-tinta); font-weight: 600; }
.hc-acceso ion-button[expand="block"] { margin: 0 0 6px; --border-radius: 14px; min-height: 50px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.hc-acceso .hc-acceso-google { --background: #fff; --background-activated: #f2f2f7; --background-hover: #f7f7f9; --color: #1c1c1e;
  --box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 8px 20px -12px rgba(0, 0, 0, .35); }
.hc-acceso-g { width: 20px; height: 20px; margin-inline-end: 10px; }
.hc-acceso-otro { margin-top: 10px; font-size: 15px; font-weight: 500; --color: var(--home-tinta); opacity: .8; }
.hc-acceso-form { text-align: left; }
.hc-acceso-form ion-list { margin: 0 0 14px; border-radius: 14px; background: transparent; }
.hc-acceso-form ion-list[inset] { margin-inline: 0; }
.hc-acceso-error { display: block; margin: -4px 4px 12px; font-size: 14px; text-align: center; }
.hc-acceso ion-note.tenue { display: block; margin: -12px 4px 22px; font-size: 14px; color: var(--home-tinta-2); }

/* ─── The shelf's plank (componentes/repisa.js) ─── */
/* Wood under a rail of things that stand on it, and the rail's own scrollbar: a brass slider in the plank. */
.hc-es-repisa { position: relative; z-index: 1; height: 26px; margin: 0 8px; border-radius: 2px 2px 6px 6px; touch-action: none;
  background:
    linear-gradient(180deg, rgba(255, 236, 205, .38) 0 2px, transparent 2px 7px, rgba(0, 0, 0, .12) 7px 8px, transparent 8px 100%),
    repeating-linear-gradient(92deg, rgba(60, 30, 10, .0) 0 22px, rgba(60, 30, 10, .16) 22px 23px, rgba(255, 220, 170, .06) 23px 41px, rgba(60, 30, 10, .1) 41px 42px),
    repeating-linear-gradient(88deg, rgba(255, 210, 150, .07) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #b27a47 0%, #9a6337 45%, #7e4d28 100%);
  box-shadow: 0 1px 0 rgba(255, 230, 190, .3) inset, 0 -1px 0 rgba(0, 0, 0, .25) inset, 0 20px 26px -14px rgba(30, 16, 6, .55), 0 3px 0 #5f3a1d; }
.ion-palette-dark .hc-es-repisa { filter: brightness(.82) saturate(.95); box-shadow: 0 1px 0 rgba(255, 230, 190, .22) inset, 0 20px 30px -14px #000, 0 3px 0 #4a2d16; }
.hc-es-riel { position: absolute; left: 18px; right: 18px; top: 11px; height: 9px; border-radius: 99px; opacity: 0; transition: opacity .2s;
  background: linear-gradient(180deg, rgba(40, 20, 6, .45), rgba(40, 20, 6, .22)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 225, 180, .25); }
.hc-es-repisa.desliza { cursor: pointer; }
.hc-es-repisa.desliza .hc-es-riel { opacity: 1; }
.hc-es-guia { position: absolute; top: -2px; left: 0; height: 13px; width: var(--guia-ancho, 60px); transform: translateX(var(--guia-x, 0)); border-radius: 99px; cursor: grab;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  background: linear-gradient(180deg, #f3dc9b, #d3a94f 55%, #a87c2c); box-shadow: 0 1px 2px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .6); transition: filter .15s; }
.hc-es-guia i { width: 1.5px; height: 6px; border-radius: 1px; background: rgba(90, 60, 10, .55); box-shadow: 1px 0 0 rgba(255, 245, 210, .5); }
.hc-es-repisa.desliza:hover .hc-es-guia { filter: brightness(1.07); }
.hc-es-repisa.arrastrando .hc-es-guia { cursor: grabbing; filter: brightness(1.12); }

/* The sidebar's button on a narrow or portrait screen, where the split pane folds the sidebar away. */
.hc-boton-menu { --padding-start: 4px; }
@media (max-width: 991px) { ion-menu.hc-menu .hc-barra-boton { display: none; } }

/* ─── Version (componentes/novedades.js): a dot on the avatar at the foot of the master pane for an unseen version,
   and a quiet line at the foot of Cuenta ─── */
html[data-novedad] .hc-cuenta .hc-avatar { position: relative; }
html[data-novedad] .hc-cuenta .hc-avatar::after {
  content: ""; position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ion-color-primary); box-shadow: 0 0 0 2px var(--ion-toolbar-background, var(--ion-background-color, #fff)); }
.hc-version-pie { display: flex; align-items: center; gap: 6px; margin: 18px auto 0; padding: 6px 12px; border: 0; background: none;
  font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--hc-tinta-3, #8e8e93); cursor: pointer; }
.hc-version-pie i { display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ion-color-primary); }
html[data-novedad] .hc-version-pie i { display: inline-block; }
.hc-version-cabeza { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 20px 16px 8px; }
.hc-version-cabeza strong { font-size: 44px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--hc-tinta, inherit); }
.hc-version-cabeza span { font-size: 13px; color: var(--hc-tinta-2, #6e6e73); }
.hc-version-cambio { margin: 0; font-size: 15px; line-height: 1.4; color: var(--hc-tinta, inherit) !important; }
.hc-version-cambio b { display: inline-block; margin-right: 8px; padding: 1px 6px; border-radius: 5px; font-size: 11px; font-weight: 600; vertical-align: 1px;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }

/* ─── Info cards (componentes/tablero.js): Congreso's sections, Hoy's dashboard ─── */
.hc-tablero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 16px 6px; }
@media (min-width: 768px) { .hc-tablero { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
.hc-tarjeta-info { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 14px 14px 13px; border: 0; border-radius: 16px; background: var(--hc-tarjeta); box-shadow: var(--hc-sombra); text-align: left; font: inherit; color: var(--hc-tinta); }
button.hc-tarjeta-info { cursor: pointer; transition: transform .2s cubic-bezier(.2, .9, .3, 1); -webkit-tap-highlight-color: transparent; }
button.hc-tarjeta-info:active { transform: scale(.97); }
.hc-tarjeta-info:focus-visible { outline: 3px solid rgba(var(--ion-color-primary-rgb), .45); outline-offset: 2px; }
.hc-tarjeta-info .visual { display: flex; align-items: flex-end; height: 50px; margin-bottom: 8px; }
.hc-tarjeta-info strong { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.hc-tarjeta-info .nombre { font-size: 15px; font-weight: 600; line-height: 1.25; }
.hc-tarjeta-info small { max-width: 100%; font-size: 12.5px; line-height: 1.3; color: var(--hc-tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-tarjeta-info[data-tono="accion"] { box-shadow: var(--hc-sombra), inset 0 0 0 1.5px rgba(var(--ion-color-primary-rgb), .45); }
.hc-dona { --c: var(--ion-color-primary); width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), color-mix(in srgb, var(--c) 16%, transparent) 0);
  -webkit-mask: radial-gradient(circle, transparent 13px, #000 14px); mask: radial-gradient(circle, transparent 13px, #000 14px); }
/* A calendar leaf: the month in red on its binding, the day below. */
.hc-hoja { display: flex; flex-direction: column; align-items: center; width: 44px; height: 48px; overflow: hidden; border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 4px 10px -4px rgba(0, 0, 0, .25); }
.hc-hoja small { width: 100%; padding: 2px 0 1px; background: #e5484d; color: #fff !important; font-size: 10px !important; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.hc-hoja b { font-size: 22px; font-weight: 600; line-height: 1.35; color: #1c1c1e; font-variant-numeric: tabular-nums; }

/* ─── Where they disagree (componentes/tensiones.js): cards with a dial, by month ─── */
.hc-cg-tension { display: flex; flex-direction: column; gap: 8px; min-height: 176px; padding: 16px; border: 0; border-radius: var(--hc-radio); background: var(--hc-tarjeta); box-shadow: var(--hc-sombra), inset 3px 0 0 var(--t, var(--ion-color-danger)); text-align: left; font: inherit; color: var(--hc-tinta); cursor: pointer; }
.hc-cg-tension:active { transform: scale(.98); }
.hc-cg-tension .etiqueta { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ion-color-danger); }
.hc-cg-tension strong { font-size: 16.5px; font-weight: 600; line-height: 1.28; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hc-cg-tension .razon { font-size: 13.5px; line-height: 1.38; color: var(--hc-tinta-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hc-cg-dial { display: block; overflow: visible; }
.hc-cg-dial .aguja { stroke: var(--hc-tinta); stroke-width: 2.2; stroke-linecap: round; }
.hc-cg-dial .eje { fill: var(--hc-tinta); }
.hc-cg-escala { display: flex; align-items: center; gap: 16px; }
.hc-cg-escala.compacta { gap: 8px; }
.hc-cg-escala.compacta strong { font-size: 13px; font-weight: 600; }
.hc-cg-escala > div > strong { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.hc-cg-escala-cabeza { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--hc-tinta-2); }
.hc-cg-escala-pie { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 11.5px; color: var(--hc-tinta-3); }
.hc-cg-escala-pie span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--c); opacity: .35; }
.hc-cg-escala-pie span[data-activa] { color: var(--hc-tinta); font-weight: 600; }
.hc-cg-escala-pie span[data-activa]::before { opacity: 1; }
.hc-cg-carta-veredicto .hc-cg-escala { margin-top: 14px; }
.hc-cg-mes { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 20px 2px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--hc-tinta-2); }
.hc-cg-mes .hc-num { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--hc-tinta-3); }
.hc-cg-tension { min-height: 0; }
.hc-cg-tension .hc-cg-escala { margin-bottom: 2px; }

/* An app with a single place (Biblioteca, Armonizador) has no tab bar to choose from. */
ion-tab-bar.hc-tab-sola { display: none; }

/* Cicerón, the assistant card (componentes/asistente.js). Quiet when idle; a light runs round its border while it works. */
@property --hc-asis-angulo { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
hc-asistente { display: block; }
.hc-asis { position: relative; border-radius: 22px; padding: 6px; background: var(--hc-tarjeta, #fff); color: var(--ion-text-color, #1c1c1e);
  box-shadow: inset 0 0 0 .5px var(--hc-linea, rgba(60, 60, 67, .18)), 0 8px 24px -18px rgba(0, 0, 0, .35); }
.hc-asis::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: conic-gradient(from var(--hc-asis-angulo), transparent 0 55%, #36a8df 68%, #664099 78%, #ee3854 86%, #fec229 94%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.hc-asis[data-trabajando]::before { opacity: 1; animation: hc-asis-giro 2.2s linear infinite; }
@keyframes hc-asis-giro { to { --hc-asis-angulo: 360deg; } }
@media (prefers-reduced-motion: reduce) { .hc-asis[data-trabajando]::before { animation: none; background: linear-gradient(90deg, #36a8df, #664099, #ee3854, #fec229); opacity: .7; } }
.hc-asis-campo { display: flex; align-items: flex-end; gap: 8px; padding: 4px 4px 4px 12px; }
/* Cicerón's face in a circle beside the field (0.108; a sparkle before): the same drawing as the guide's button. */
.hc-asis-cara { flex: none; width: 30px; height: 30px; margin-bottom: 5px; border-radius: 50%; overflow: hidden; background: #664099; }
.hc-asis-cara img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.hc-asis-campo textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: none; color: inherit; font: 400 16.5px/1.35 var(--ion-font-family); padding: 9px 0; max-height: 180px; }
.hc-asis-campo textarea::placeholder { color: var(--hc-tinta-3, rgba(60, 60, 67, .45)); }
.hc-asis-enviar { flex: none; width: 34px; height: 34px; margin-bottom: 3px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--ion-color-primary, #007aff); color: #fff; font-size: 18px; transition: opacity .2s, transform .15s; }
.hc-asis-enviar:disabled { opacity: .25; cursor: default; }
.hc-asis-enviar:active:not(:disabled) { transform: scale(.92); }
.hc-asis-hilo { display: grid; gap: 14px; padding: 12px 12px 6px; max-height: min(60vh, 560px); overflow-y: auto; }
.hc-asis-turno { display: grid; gap: 8px; }
.hc-asis-pregunta { justify-self: end; max-width: 85%; margin: 0; padding: 8px 13px; border-radius: 18px 18px 4px 18px; background: var(--hc-relleno, rgba(120, 120, 128, .12)); font-size: 15px; }
.hc-asis-vivo { margin: 0; font-size: 14px; color: var(--hc-tinta-2, rgba(60, 60, 67, .6)); animation: hc-asis-latido 1.3s ease-in-out infinite alternate; }
@keyframes hc-asis-latido { from { opacity: .45; } to { opacity: 1; } }
.hc-asis-pasos { font-size: 12.5px; color: var(--hc-tinta-2, rgba(60, 60, 67, .6)); }
.hc-asis-pasos summary { cursor: pointer; }
.hc-asis-pasos ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 3px; }
.hc-asis-texto { font-size: 15.5px; line-height: 1.45; }
.hc-asis-texto > :first-child { margin-top: 0; } .hc-asis-texto > :last-child { margin-bottom: 0; }
.hc-asis-texto.error { color: var(--hc-tinta-2, rgba(60, 60, 67, .7)); }
.hc-asis-fuentes { margin: 0; padding: 8px 0 0; list-style: none; border-top: .5px solid var(--hc-linea, rgba(60, 60, 67, .18)); display: grid; gap: 4px; font-size: 12.5px; color: var(--hc-tinta-2, rgba(60, 60, 67, .6)); }
.hc-asis-fuentes li::before { content: "↳ "; }
.hc-asis-fuentes q { display: block; margin: 2px 0 0 14px; font-style: italic; }
.hc-asis-bloque { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hc-asis-bloque p { flex-basis: 100%; margin: 0; font-size: 14px; }
.hc-asis-fondo { justify-self: start; }
/* On the home screen's wallpaper the card is glass. */
hc-inicio .hc-asis { background: var(--home-vidrio); color: var(--home-tinta); backdrop-filter: blur(26px) saturate(1.7); -webkit-backdrop-filter: blur(26px) saturate(1.7);
  box-shadow: inset 0 0 0 .5px var(--home-vidrio-borde), var(--home-sombra); }
/* Cicerón's thread, kept small (0.15). */
.hc-asis-hilo { max-height: min(46vh, 460px); }
.hc-asis-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: -4px 0 -4px; }
.hc-asis-cabeza button, .hc-asis-mas, .hc-asis-plegar { border: 0; background: none; padding: 2px 0; cursor: pointer; font: 500 13px var(--ion-font-family); color: var(--ion-color-primary, #007aff); }
.hc-asis-cabeza .hc-asis-nueva { color: var(--hc-tinta-2, rgba(60, 60, 67, .6)); }
.hc-asis-cabeza button:disabled { opacity: .4; cursor: default; }
.hc-asis-plegado { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-radius: 12px; padding: 8px 12px; cursor: pointer; text-align: left;
  background: var(--hc-relleno, rgba(120, 120, 128, .1)); color: inherit; font: 400 14px var(--ion-font-family); }
.hc-asis-plegado span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-asis-plegado ion-icon { flex: none; opacity: .5; }
.hc-asis-plegar { justify-self: start; }
.hc-asis-texto.recortado { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.hc-asis-mas { justify-self: start; }
/* Cicerón as a chat (the home screen, 0.103): the person's bubbles on the right, Cicerón's on the left, the newest in
   view, the field under them. Nothing folds: a chat is read top to bottom. */
.hc-asis.chat > .hc-asis-cabeza { margin: 0; padding: 8px 12px 0; font: 600 13px var(--ion-font-family); color: var(--hc-tinta-2, rgba(60, 60, 67, .6)); }
hc-inicio .hc-asis.chat > .hc-asis-cabeza { color: var(--home-tinta-2); }
.hc-asis.chat .hc-asis-hilo { gap: 10px; padding: 10px 8px 8px; overscroll-behavior: contain; scroll-behavior: smooth; }
.hc-asis.chat .hc-asis-turno { gap: 6px; animation: hc-asis-entra .22s ease-out; }
@keyframes hc-asis-entra { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .hc-asis.chat .hc-asis-turno { animation: none; } .hc-asis.chat .hc-asis-hilo { scroll-behavior: auto; } }
.hc-asis.chat .hc-asis-pregunta { max-width: 82%; border-radius: 18px 18px 5px 18px; background: #664099; color: #fff; font-size: 15px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.hc-asis-respuesta { justify-self: start; max-width: 88%; min-width: 0; display: grid; gap: 8px; padding: 9px 13px; border-radius: 18px 18px 18px 5px;
  background: var(--hc-relleno, rgba(120, 120, 128, .12)); overflow-wrap: anywhere; }
hc-inicio .hc-asis-respuesta { background: color-mix(in srgb, var(--home-tinta) 8%, transparent); }
.hc-asis-respuesta:empty { display: none; }
.hc-asis-respuesta .hc-asis-texto { font-size: 15px; }
.hc-asis-respuesta .hc-asis-vivo { font-size: 14px; }

/* The coloured icon square of iOS Settings: Ajustes' sections, Biblioteca's sections (master list and side menu). */
.hc-cuadro { width: 29px; height: 29px; border-radius: 7px; display: grid; place-items: center; color: #fff; margin-inline-end: 14px; flex: none; }
.hc-cuadro ion-icon { font-size: 18px; color: #fff; }
ion-menu.hc-menu ion-item .hc-cuadro { width: 26px; height: 26px; border-radius: 6px; margin-inline-end: 12px; }
ion-menu.hc-menu ion-item .hc-cuadro ion-icon { font-size: 16px; }
ion-menu.hc-menu ion-item.seleccionado .hc-cuadro { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .65); }
@media (min-width: 992px) { ion-menu.hc-menu.compacta ion-item .hc-cuadro { margin: 0; width: 28px; height: 28px; } }

/* The Conflictómetro's master tree (MOC-52): a stage, and its screens indented under it. */
ion-menu.hc-menu ion-item.hc-menu-etapa { margin-top: 6px; }
ion-menu.hc-menu ion-item.hc-menu-etapa.abierta:not(.seleccionado) { font-weight: 650; }
ion-menu.hc-menu ion-item.hc-menu-sub { --min-height: 34px; font-size: 14px; font-weight: 450; margin-inline-start: 48px; }
ion-menu.hc-menu.compacta ion-item.hc-menu-sub { display: none; }

/* Cicerón's acts (MOC-76): what he did, and what waits for the person. */
.hc-asis-hechas { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; color: #1f7a4d; }
.hc-asis-hechas li { display: flex; gap: 6px; align-items: center; }
.hc-asis-accion { display: grid; gap: 4px; margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: var(--hc-tarjeta, #fff); box-shadow: 0 0 0 1.5px color-mix(in srgb, #7a4fb5 40%, transparent); }
.hc-asis-accion small { color: var(--hc-tinta-2, #555); }
.hc-asis-accion.hecha { box-shadow: 0 0 0 1.5px #30a46c; }
.hc-asis-accion.rechazada, .hc-asis-accion.fallida { opacity: .7; }
.hc-asis-accion-tipo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #7a4fb5; }
.hc-asis-fuentes a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* The password an app asks for (src/clave.js): the refusal reads as one. */
.hc-alerta-clave .alert-message { color: var(--ion-color-danger); font-weight: 600; }

/* Markdown as Markdown (componentes/markdown.js) — Cicerón's answers, minutes, summaries, reasons. */
.hc-md { display: block; line-height: 1.5; overflow-wrap: anywhere; }
.hc-md[linea] { display: inline; }
.hc-md > :first-child { margin-top: 0; }
.hc-md > :last-child { margin-bottom: 0; }
.hc-md p, .hc-md-crudo { margin: 0 0 .55em; }
.hc-md ul, .hc-md ol { margin: .25em 0 .6em; padding-left: 1.35em; }
.hc-md li { margin: .15em 0; }
.hc-md h1, .hc-md h2, .hc-md h3, .hc-md h4 { line-height: 1.25; margin: .9em 0 .35em; font-weight: 650; }
.hc-md h1 { font-size: 1.25em; } .hc-md h2 { font-size: 1.1em; } .hc-md h3, .hc-md h4 { font-size: 1em; }
.hc-md a { color: var(--ion-color-primary); }
.hc-md code { font-size: .9em; background: var(--ion-color-step-100, rgba(127,127,127,.12)); padding: 0 .3em; border-radius: 4px; }
.hc-md pre { overflow-x: auto; background: var(--ion-color-step-100, rgba(127,127,127,.12)); padding: .6em .8em; border-radius: 8px; }
.hc-md pre code { background: none; padding: 0; }
.hc-md blockquote { margin: .5em 0; padding: .1em 0 .1em .85em; border-left: 3px solid var(--ion-color-step-300, rgba(127,127,127,.4)); color: var(--ion-color-step-700, inherit); }
.hc-md table { border-collapse: collapse; margin: .5em 0; font-size: .92em; display: block; overflow-x: auto; }
.hc-md th, .hc-md td { border: 1px solid var(--ion-color-step-200, rgba(127,127,127,.3)); padding: .3em .55em; text-align: left; vertical-align: top; }
.hc-md hr { border: 0; border-top: 1px solid var(--ion-color-step-200, rgba(127,127,127,.3)); margin: .8em 0; }

/* Cicerón's face with the sign of what he is doing (componentes/ciceron-expresiones.js). */
.hc-cara-viva { position: relative; display: inline-block; flex: none; width: 40px; height: 40px; vertical-align: middle; }
.hc-cara-viva > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: color-mix(in srgb, #c9a96e 25%, var(--hc-tarjeta, #fff)); }
.hc-cara-viva.mini { width: 24px; height: 24px; }
.hc-cara-viva.grande { width: min(120px, 40%); height: auto; aspect-ratio: 1; }
.hc-cara-signo { position: absolute; right: -2px; bottom: -2px; width: 44%; height: 44%; min-width: 14px; min-height: 14px; border-radius: 50%; background: #fec229; color: #2b2416;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--hc-tarjeta, #fff); }
.hc-cara-signo svg { width: 68%; height: 68%; }
.hc-cara-viva[data-expresion="piensa"] .hc-cara-signo svg circle { animation: hc-signo-puntos 1.2s infinite; }
.hc-cara-viva[data-expresion="piensa"] .hc-cara-signo svg circle:nth-child(2) { animation-delay: .2s; }
.hc-cara-viva[data-expresion="piensa"] .hc-cara-signo svg circle:nth-child(3) { animation-delay: .4s; }
.hc-cara-viva[data-expresion="busca"] .hc-cara-signo { animation: hc-signo-busca 1.4s ease-in-out infinite; }
.hc-cara-viva[data-expresion="idea"] .hc-cara-signo { animation: hc-signo-idea 1.1s ease-in-out infinite; }
@keyframes hc-signo-puntos { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
@keyframes hc-signo-busca { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-2px, -1px) rotate(-12deg); } }
@keyframes hc-signo-idea { 0%, 100% { box-shadow: 0 0 0 2px var(--hc-tarjeta, #fff), 0 0 0 0 rgba(254,194,41,.6); } 50% { box-shadow: 0 0 0 2px var(--hc-tarjeta, #fff), 0 0 10px 4px rgba(254,194,41,.55); } }
@media (prefers-reduced-motion: reduce) { .hc-cara-viva .hc-cara-signo, .hc-cara-viva .hc-cara-signo svg circle { animation: none !important; } }

/* ─── The wallpaper of colours (home screen and sign-in) ─── */
/* The wallpaper (0.88): a morning mist — pale sky at the top left, lavender at the right, warm sand low down, a breath
   of mint in the middle — high-key in light mode and a deep night blue in dark mode, so ink keeps its contrast. The
   bokeh is real elements (home.js BOKEH): soft discs, each drifting on its own slow path and breathing its opacity
   a little; nothing moves fast enough to catch the eye. A veil at the top keeps the clock legible.
   0.103: the hues are drawn anew on every page load (home.js TONOS sets --h1…--h6 and --s); only lightness is fixed
   here, high in light mode and low in dark mode, so any combination keeps the ink readable. The fallbacks are the
   morning mist it had before. */
.hc-home-fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  --n1: hsl(var(--h1, 210) var(--s, 65%) 89%); --n2: hsl(var(--h2, 262) var(--s, 55%) 91%); --n3: hsl(var(--h3, 25) var(--s, 70%) 90%); --n4: hsl(var(--h4, 155) var(--s, 45%) 89%);
  --k1: rgba(255, 255, 255, .7); --k2: hsl(var(--h5, 220) var(--s, 80%) 88% / .55); --k3: hsl(var(--h6, 25) var(--s, 90%) 90% / .6); --k4: hsl(var(--h2, 262) var(--s, 80%) 90% / .5);
  background:
    radial-gradient(85% 65% at 0% 0%, var(--n1) 0%, transparent 65%),
    radial-gradient(75% 60% at 100% 18%, var(--n2) 0%, transparent 66%),
    radial-gradient(90% 55% at 70% 100%, var(--n3) 0%, transparent 68%),
    radial-gradient(55% 40% at 40% 55%, var(--n4) 0%, transparent 72%),
    var(--home-base); }
.hc-home-fondo i { position: absolute; left: var(--x); top: var(--y); width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%; filter: blur(calc(var(--d) / 14));
  background: radial-gradient(circle at 50% 50%, var(--c) 0 58%, color-mix(in srgb, var(--c) 60%, transparent) 70%, transparent 72%);
  animation: hc-bokeh var(--t) ease-in-out var(--r) infinite alternate; will-change: transform, opacity; }
@keyframes hc-bokeh { from { transform: translate3d(0, 0, 0); opacity: .85; } to { transform: translate3d(var(--dx), var(--dy), 0); opacity: 1; } }
.hc-home-fondo::after { content: ""; position: absolute; inset: 0 0 auto; height: 38vh;
  background: linear-gradient(180deg, color-mix(in srgb, var(--home-base) 55%, transparent), transparent); }
@media (prefers-reduced-motion: reduce) { .hc-home-fondo i { animation: none; } }
:root.hc-oscuro .hc-home-fondo, .ion-palette-dark .hc-home-fondo {
  --n1: hsl(var(--h1, 222) calc(var(--s, 55%) * .75) 19%); --n2: hsl(var(--h2, 258) calc(var(--s, 55%) * .75) 21%); --n3: hsl(var(--h3, 335) calc(var(--s, 55%) * .6) 18%); --n4: hsl(var(--h4, 185) calc(var(--s, 55%) * .75) 14%);
  --k1: hsl(var(--h1, 226) 100% 80% / .16); --k2: hsl(var(--h5, 226) 70% 70% / .14); --k3: hsl(var(--h6, 15) 100% 80% / .12); --k4: hsl(var(--h2, 260) 100% 80% / .14); }