/* Theme: Ionic's variables set once, then the few tokens the app adds. The system decides light or dark; the
   report's cloth blue is the tint, gold marks what is bound, red is only for tensions with the Charter. */
:root {
  --ion-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  /* One family throughout: the old serif accent (titles, quotes) is the same sans. A document page that must match its
     printed form (the report in the editor) names its own font. */
  --hc-serif: var(--ion-font-family);

  /* Ciserex purple (app/ciserex/brand); its four triangles are the accents. */
  --ion-color-primary: #664099;
  --ion-color-primary-rgb: 102, 64, 153;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #5a3887;
  --ion-color-primary-tint: #7553a3;
  --cx-morado: #664099; --cx-amarillo: #fec229; --cx-azul: #36a8df; --cx-rojo: #ee3854; --cx-verde: #5bc1a6;

  --ion-color-warning: #e39a1c;
  --ion-color-warning-rgb: 227, 154, 28;
  --ion-color-warning-contrast: #ffffff;
  --ion-color-warning-contrast-rgb: 255, 255, 255;
  --ion-color-warning-shade: #c88819;
  --ion-color-warning-tint: #e6a433;

  --ion-color-success: #2e9b69;
  --ion-color-success-rgb: 46, 155, 105;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #28885c;
  --ion-color-success-tint: #43a578;

  --ion-color-danger: #d23a2c;
  --ion-color-danger-rgb: 210, 58, 44;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #b93327;
  --ion-color-danger-tint: #d74e41;

  --hc-oro: #c49a2c;
  --hc-tinta: var(--ion-text-color, #16181d);
  --hc-tinta-2: rgba(var(--ion-text-color-rgb, 22, 24, 29), .62);
  --hc-tinta-3: rgba(var(--ion-text-color-rgb, 22, 24, 29), .42);
  --hc-relleno: rgba(var(--ion-text-color-rgb, 22, 24, 29), .06);
  --hc-linea: rgba(var(--ion-text-color-rgb, 22, 24, 29), .1);
  --hc-tarjeta: var(--ion-item-background, #fff);
  --hc-radio: 16px;
  --hc-sombra: 0 1px 2px rgba(16, 20, 40, .05), 0 10px 28px -14px rgba(16, 20, 40, .22);
}

/* Grouped surfaces, like Settings: the page is grey, cards and inset lists are white. */
:root.ios, .ios body {
  --ion-background-color: #f2f2f7;
  --ion-background-color-rgb: 242, 242, 247;
  --ion-item-background: #ffffff;
  --ion-toolbar-background: #f7f7fa;
  --ion-tab-bar-background: rgba(249, 249, 251, .86);
  --ion-card-background: #ffffff;
}

:root.ion-palette-dark {
    --ion-color-primary: #a47ddc;
    --ion-color-primary-rgb: 164, 125, 220;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255, 255, 255;
    --ion-color-primary-shade: #906ec2;
    --ion-color-primary-tint: #ad8ae0;
    --hc-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px -14px rgba(0, 0, 0, .7);
}
:root.ion-palette-dark.ios, .ion-palette-dark.ios body {
    --ion-background-color: #000000;
    --ion-background-color-rgb: 0, 0, 0;
    --ion-item-background: #1c1c1e;
    --ion-card-background: #1c1c1e;
    --ion-toolbar-background: #121214;
    --ion-tab-bar-background: rgba(22, 22, 24, .86);
  }
/* An explicit choice in Ajustes wins over the system in both directions. */
:root.hc-claro { color-scheme: light; }
:root.hc-oscuro { color-scheme: dark; }

html, body { -webkit-font-smoothing: antialiased; }
ion-toolbar { --border-width: 0 !important; }
ion-header.header-collapse-condense ion-toolbar { --background: var(--ion-background-color); }
ion-tab-bar { --border: 0.55px solid var(--hc-linea); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); }
/* The owner (2026-09-27): the header bar looked laid over the screen — the page scrolled visibly under an 82 %
   translucent toolbar with no edge. The bar is now solid, with a hairline under it, so it reads as the top of the
   screen and not as a layer floating on the content. The large-title (condensed) header keeps the page's colour. */
ion-header:not(.header-collapse-condense) { box-shadow: 0 0.55px 0 var(--hc-linea); }
ion-header:not(.header-collapse-condense) ion-toolbar { --background: var(--ion-toolbar-background); }
ion-menu ion-header:not(.header-collapse-condense) { box-shadow: none; }
ion-title.title-large { font-weight: 800; letter-spacing: -.02em; }
ion-list.list-inset { margin-inline: 16px; }
ion-list-header { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
ion-card { border-radius: var(--hc-radio); box-shadow: var(--hc-sombra); margin-inline: 16px; }
ion-icon[name^="hc-"] { stroke-width: 1.7; }
.hc-serif { font-family: var(--hc-serif); }
.hc-num { font-variant-numeric: tabular-nums; }
.hc-toast { --border-radius: 99px; --background: #1f2127; --color: #fff; --button-color: #9fb0ff; font-weight: 500; }
.hc-muted { color: var(--hc-tinta-2); }

/* ─── The shell on wide screens: a sidebar (ion-menu in a split pane) and no tab bar ─── */
@media (min-width: 992px) {
  ion-tab-bar.hc-tab-bar { display: none; }
}
ion-split-pane { --side-width: 260px; --side-max-width: 260px; --border: 0.55px solid var(--hc-linea); }
ion-menu.hc-menu ion-content { --background: var(--ion-background-color); }
ion-menu.hc-menu ion-item { --border-radius: 10px; --background: transparent; --background-activated: var(--hc-relleno); margin: 1px 10px; font-weight: 500; }
ion-menu.hc-menu ion-item.seleccionado { --background: var(--ion-color-primary); --color: var(--ion-color-primary-contrast); }
ion-menu.hc-menu ion-item.seleccionado ion-icon { color: var(--ion-color-primary-contrast); }

/* ─── Shared pieces ─── */
/* The Ciserex wordmark in colour; in white on dark surfaces (the class once the app is up, the system setting before). */
.hc-logo { display: inline-block; aspect-ratio: 792 / 187.24; height: 34px; background: url(/icons/ciserex-logo.svg) center / contain no-repeat; }
:root.hc-oscuro .hc-logo { background-image: url(/icons/ciserex-logo-blanco.svg); }
@media (prefers-color-scheme: dark) { :root:not(.hc-claro) .hc-logo { background-image: url(/icons/ciserex-logo-blanco.svg); } }
.hc-sello { width: 30px; height: 30px; flex: none; display: inline-block; background: url(/icons/ciserex.svg) center / contain no-repeat; }
.hc-logo { display: block; height: 22px; width: auto; }
.hc-logo.blanco, .ion-palette-dark .hc-logo.color { display: none; }
.ion-palette-dark .hc-logo.blanco { display: block; }
.hc-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #8a9be0, #3a4e9f); color: #fff; font-size: 12.5px; font-weight: 700; display: grid; place-items: center; }
.hc-seccion { margin: 28px 0 8px; padding: 0 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hc-seccion h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.hc-seccion p { margin: 2px 0 0; color: var(--hc-tinta-2); font-size: 14px; }
.hc-seccion ion-button { --padding-end: 0; margin: 0; font-size: 15px; }
.hc-anillo { --p: 0; --c: var(--ion-color-success); width: 56px; height: 56px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--hc-relleno) 0); display: grid; place-items: center; flex: none; }
.hc-anillo span { width: 44px; height: 44px; border-radius: 50%; background: var(--hc-tarjeta); display: grid; place-items: center; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.hc-carril { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 300px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 14px; scroll-padding: 20px; scrollbar-width: none; }
.hc-carril::-webkit-scrollbar { display: none; }
.hc-carril > * { scroll-snap-align: start; }
.hc-vacio { text-align: center; padding: 48px 24px; color: var(--hc-tinta-2); }
.hc-vacio ion-icon { font-size: 56px; color: var(--ion-color-success); }
.hc-vacio h2 { color: var(--hc-tinta); font-size: 24px; margin: 12px 0 6px; letter-spacing: -.02em; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* A face over its initials (ui/foto.js): the party colour until the photo arrives, and for good if it never does. */
.hc-foto { position: relative; overflow: hidden; background: var(--hc-partido, linear-gradient(135deg, #8a9be0, #3a4e9f)); flex: none; }
.hc-foto b { font-weight: 700; }
.hc-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.hc-foto.cargada img { opacity: 1; }
.hc-foto.cargada { box-shadow: 0 0 0 2px var(--hc-partido, transparent); }
.hc-foto.cargada b { visibility: hidden; }

/* The back button wears the previous screen's title (ui/rastro.js), but the iOS toolbar centres the title with a fixed
   inset of about 90 px each side: on a phone a title like «6 Planificación» ran under the screen's own. The label ends
   before that inset and is cut with an ellipsis; «Atrás» still fits whole. */
@media (max-width: 767px) {
  ion-toolbar ion-back-button::part(text) { max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}