/*
 * BKT Home -- project-local styles.
 *
 * Everything shared with the rest of Rauda lives in `rauda-core`'s design
 * system (tokens.css, tabler-overrides.css, components.css) and is consumed by
 * version bump, never forked. This file holds only the two things core cannot
 * supply: rules it is missing at 0.2.0, and components that exist solely in
 * this console.
 *
 * Every colour here resolves to a `--rauda-*` token. A literal hex appears only
 * where the design assigns a category its own badge pair, which core has no
 * concept of.
 */

/* ---------------------------------------------------------------------------
 * Sidebar -- backfill
 *
 * rauda-core 0.2.0 ships `.rauda-theme .navbar-vertical .nav-section-title` and
 * the brand image sizing, but not the navy background or the nav-link colours,
 * so a `.rauda-theme` sidebar renders as Tabler's default light one. Backfilled
 * here to match the design; delete this block when core ships it.
 * ------------------------------------------------------------------------ */

:root {
  --rauda-blue-background: #0e1f40;
  --rauda-sidebar-hover-bg: rgba(255, 255, 255, 0.1);
  --rauda-sidebar-active-bg: rgba(255, 255, 255, 0.15);
  --rauda-sidebar-border: rgba(255, 255, 255, 0.22);
  --rauda-sidebar-text: rgba(255, 255, 255, 0.7);
  --rauda-sidebar-text-dim: rgba(255, 255, 255, 0.45);
}

.rauda-theme .navbar-vertical {
  background-color: var(--rauda-blue-background) !important;
  border-right: none !important;
}

.rauda-theme .navbar-vertical .nav-link {
  border-radius: var(--rauda-radius-xl);
  color: var(--rauda-sidebar-text) !important;
  font-weight: 500;
  margin: 0.125rem var(--rauda-space-3);
  padding-inline: var(--rauda-space-3);
}

.rauda-theme .navbar-vertical .nav-link-title,
.rauda-theme .navbar-vertical .nav-link-icon,
.rauda-theme .navbar-vertical .nav-link-icon .ti {
  color: inherit !important;
}

.rauda-theme .navbar-vertical .nav-link:hover {
  color: #fff !important;
  background-color: var(--rauda-sidebar-hover-bg) !important;
}

/* The design marks the active entry with an inset accent rail rather than
 * Tabler's right-edge pseudo-element, which is suppressed just below. */
.rauda-theme .navbar-vertical .nav-item.active .nav-link,
.rauda-theme .navbar-vertical .nav-link.active {
  color: #fff !important;
  background-color: var(--rauda-sidebar-active-bg) !important;
  box-shadow: inset 3px 0 0 var(--rauda-accent);
}

.rauda-theme .navbar-vertical .navbar-collapse .nav-item.active::after {
  display: none !important;
}

.rauda-theme .navbar-vertical .border-top {
  border-color: var(--rauda-sidebar-border) !important;
}

.rauda-theme .navbar-vertical .text-secondary {
  color: var(--rauda-sidebar-text) !important;
}

/* ---------------------------------------------------------------------------
 * Sidebar -- BKT brand lockup and footer
 *
 * This console identifies itself with a wordmark rather than a client logo
 * file, so it does not use core's `.navbar-brand img` path.
 * ------------------------------------------------------------------------ */

.bkt-brand {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0 var(--rauda-space-3) var(--rauda-space-6);
  color: inherit;
  text-decoration: none;
}

.bkt-brand:hover {
  color: inherit;
}

.bkt-brand-mark {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--rauda-radius-xl);
  background: var(--rauda-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
}

.bkt-brand-name {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
}

.bkt-brand-sub {
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  color: var(--rauda-sidebar-text-dim);
  margin-top: 0.1875rem;
}

.bkt-sidebar-foot {
  font-size: 0.65625rem;
  color: var(--rauda-sidebar-text-dim);
}

/* The signed-in address, held to the rail's width so a long one truncates
   instead of widening the sidebar. A cap, not a datum -- it used to be an
   inline style on the element, which this file is what exists to avoid. */
.bkt-sidebar-email {
  max-width: 150px;
}

.bkt-credit-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  font-size: 0.71875rem;
}

/* ---------------------------------------------------------------------------
 * Page furniture
 *
 * The design opens every screen with an eyebrow, an oversized headline whose
 * final period carries the accent, and two blurred blobs behind the content.
 * ------------------------------------------------------------------------ */

.bkt-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rauda-accent);
  margin-bottom: var(--rauda-space-3);
}

.bkt-display {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--rauda-blue-text);
  text-wrap: balance;
  margin: 0;
}

.bkt-display .dot {
  color: var(--rauda-accent);
}

/* Purely decorative; `overflow: hidden` on the wrapper keeps them from
 * widening the page, and they are hidden from assistive tech. */
.bkt-blobs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bkt-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
}

.bkt-blob-a {
  width: 440px;
  height: 440px;
  top: -180px;
  right: -100px;
  background: var(--rauda-accent);
  opacity: 0.07;
}

.bkt-blob-b {
  width: 340px;
  height: 340px;
  top: 240px;
  right: 280px;
  background: var(--rauda-success);
  opacity: 0.05;
}

/* Everything the blobs sit behind. */
.bkt-stack {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------------
 * KPI cards
 *
 * A five-up row where the first two cards are filled -- navy, then accent --
 * and the rest stay on the card surface. Built on Tabler's `.card` so padding,
 * radius and border come from core.
 *
 * Five does not divide twelve, so the row uses bare `.col` and lets flex share
 * the width rather than naming a column count that cannot exist.
 * ------------------------------------------------------------------------ */

/* Eight figures in two rows of four.
 *
 * Five in a row was tried and reads badly twice over: the twelve-column grid
 * cannot divide five, so below 1200px the fifth card was left alone on a row
 * stretched to half the page -- and even where all five fitted, five cards in
 * the width four used to have are narrow and tall rather than the squares the
 * page was designed around.
 *
 * Four divides everything here: eight cards, four columns, and 4 -> 2 -> 1 as
 * the page narrows, so no width leaves a row part-empty. The emphasis that the
 * fifth slot used to carry now comes from position and fill -- the first row
 * is the campaign, the first two cards are the filled ones.
 */
.bkt-kpi-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1199.98px) {
  .bkt-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .bkt-kpi-row {
    grid-template-columns: 1fr;
  }
}

/* Each card body is a column: label, figure, and the caption pinned to the
 * foot. Left to their own contents the cards ended wherever their text ran
 * out, and five different bottom edges read as five unrelated cards. */
.bkt-kpi-row > .bkt-kpi {
  height: 100%;
  margin-bottom: 0;
}

/* Scoped to the row, not to the card. `.bkt-kpi` is also Billing's two
 * figures and Seguimiento's averages, and one of those puts its label *below*
 * the value -- so a column layout and a reserved label height applied to every
 * card would open a gap under three figures on two other pages to line up
 * five on this one. */
.bkt-kpi-row > .bkt-kpi .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Two lines reserved whether the label needs them or not.
 * "Contactabilidad por empresa" wraps and "Empresas" does not, so without the
 * reservation the figure in one card started twenty pixels below the figure
 * beside it -- which reads as the two being different kinds of number. */
.bkt-kpi-row > .bkt-kpi .bkt-kpi-label {
  line-height: 1.2;
  min-height: 2.4em;
}

.bkt-kpi .bkt-kpi-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rauda-grey-text);
}

.bkt-kpi .bkt-kpi-value {
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rauda-blue-text);
  font-variant-numeric: tabular-nums;
}

/* The unit rides at a third of the numeral's size, per the design. */
.bkt-kpi .bkt-kpi-unit {
  font-size: 1.25rem;
  font-weight: 600;
}

/* What the figure above is drawn over, in words.
 *
 * The row carries two different denominators -- the whole company list, and
 * the companies a range actually called -- and they differ by a lot in a short
 * range. Without the caption the two cards read as the same number measured
 * twice and disagreeing, which is how a correct figure gets reported as a bug.
 */
.bkt-kpi .bkt-kpi-note {
  /* Pinned to the foot rather than sat under the figure, so a one-line caption
   * and a three-line one still leave every figure on one baseline. */
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--rauda-grey-text);
}

/* Scoped under `.rauda-theme` to match the specificity of core's
 * `.rauda-theme .card`, which sets the white surface and the border; a bare
 * class would lose to it and the card would render blank-on-blank. */
.rauda-theme .bkt-kpi-filled-navy,
.rauda-theme .bkt-kpi-filled-accent {
  border-color: transparent;
}

.rauda-theme .bkt-kpi-filled-navy {
  background: var(--rauda-blue-background);
}

.rauda-theme .bkt-kpi-filled-accent {
  background: var(--rauda-accent);
}

/* The design tints the third figure of the weekly report rather than filling
 * it: a pale blue ground with its own label ink, so it reads as related to the
 * two filled cards beside it without competing with them. */
/* A figure the design marks as a stand-in draws its border dashed, the same
 * signal `.bkt-empty-well` uses for a section with nothing behind it yet. */
.rauda-theme .bkt-kpi-dashed {
  border-style: dashed;
  border-color: var(--rauda-grey-text);
}

.rauda-theme .bkt-kpi-filled-tint {
  background: #e7f0fe;
  border-color: transparent;
}

.rauda-theme .bkt-kpi-filled-tint .bkt-kpi-label {
  color: #1b4fcc;
}

/* Navy is dark enough that a translucent white still reads: 0.72 over
 * `--rauda-blue-background` is about 9:1, well clear of the 4,5:1 small text
 * needs. */
.rauda-theme .bkt-kpi-filled-navy .bkt-kpi-label,
.rauda-theme .bkt-kpi-filled-navy .bkt-kpi-note {
  color: rgba(255, 255, 255, 0.72);
}

/* The accent has no such room. `--rauda-accent` is a mid-blue, so the same
 * 0.72 white lands at 3,3:1 and reads as grey text someone forgot to style --
 * which is what it was reported as. Opaque white is 4,9:1, which is the most
 * this background can give and just clears the threshold. The subordinate
 * feel that the translucency carried comes from the type size instead. */
.rauda-theme .bkt-kpi-filled-accent .bkt-kpi-label,
.rauda-theme .bkt-kpi-filled-accent .bkt-kpi-note {
  color: #fff;
}

.rauda-theme .bkt-kpi-filled-navy .bkt-kpi-value,
.rauda-theme .bkt-kpi-filled-accent .bkt-kpi-value {
  color: #fff;
}

/* The second line of the callout, which answers a different question from the
 * first. A `<br>` set them a line apart and they still read as one sentence
 * that happened to wrap; the space is what says they are two findings. Block
 * rather than a margin on the inline span, so the padding applies whether or
 * not the line above it wraps. */
.bkt-insight-highlight {
  display: block;
  padding-top: 0.3em;
}

/* ---------------------------------------------------------------------------
 * Segmented toggle (Hoy / Acumulado)
 *
 * Distinct from core's `.time-tabs`: this one sits in the page header on the
 * app background rather than inside a card, so it carries its own track.
 * ------------------------------------------------------------------------ */

.bkt-segmented {
  display: inline-flex;
  gap: 0.125rem;
  padding: 0.1875rem;
  border-radius: 99px;
  background: var(--rauda-grey-light);
}

.bkt-segmented > .btn {
  border: none;
  border-radius: 99px;
  padding: 0.5rem 1rem;
  font-size: 0.78125rem;
  font-weight: 700;
  color: var(--rauda-grey-text);
  background: transparent;
  box-shadow: none;
}

.bkt-segmented > .btn:hover {
  color: var(--rauda-blue-text);
}

.bkt-segmented > .btn.active {
  background: var(--rauda-white);
  color: var(--rauda-blue-text);
  box-shadow: var(--rauda-shadow-sm);
}

/* ---------------------------------------------------------------------------
 * Filter chips
 *
 * Distinct from `.bkt-segmented`, which picks one of a set of mutually
 * exclusive views and reads as a switch. These filter a list, sit on the page
 * background, and the design fills the active one with the accent rather than
 * lifting it onto white.
 * ------------------------------------------------------------------------ */

.bkt-filter-chip {
  border: 1px solid var(--rauda-grey);
  background: var(--rauda-white);
  border-radius: 99px;
  padding: 0.4375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rauda-grey-text);
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.bkt-filter-chip:hover {
  color: var(--rauda-blue-text);
  border-color: var(--rauda-grey-text);
}

.bkt-filter-chip.active {
  background: var(--rauda-accent);
  border-color: transparent;
  color: #fff;
}

/* ---------------------------------------------------------------------------
 * Progress chips
 *
 * How the day's evaluated share was settled, beside the progress ring. Larger
 * and softer than `.bkt-badge`, which is sized for a table cell: these three
 * are the second thing read on the page, not an annotation inside a row.
 * ------------------------------------------------------------------------ */

.bkt-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: 99px;
  padding: 0.5625rem 1rem;
  font-size: 0.78125rem;
  font-weight: 600;
  background: var(--rauda-white);
  color: var(--rauda-grey-text);
}

/* The two settled shares, then what is still untouched -- which the design
 * fills with the accent, because it is the only one that asks for work. */
.bkt-chip--bulk { background: #e7f0fe; color: #1b4fcc; }
.bkt-chip--manual { background: #eaf0f8; color: #5a6b88; }

.bkt-chip--pending {
  background: var(--rauda-accent);
  color: #fff;
}

/* ---------------------------------------------------------------------------
 * CSV dropzone
 *
 * The console's one upload control. Dashed rather than solid so it reads as a
 * target to drop something onto instead of a card that happens to hold a
 * button, and it keeps the same footprint in every state so the card does not
 * jump as the operator moves from choosing a file to watching it go.
 * ------------------------------------------------------------------------ */

.bkt-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 15rem;
  padding: var(--rauda-space-5);
  border: 2px dashed var(--rauda-grey);
  border-radius: var(--rauda-radius-lg);
  background: var(--rauda-white);
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

/* While a file is over the box. Set from `dashboard.js`, because the drag is
   over the form's children as often as over the form itself and `:hover`-style
   CSS cannot see that. */
.bkt-dropzone.is-over {
  border-color: var(--rauda-accent);
  background: var(--rauda-grey-light);
}

.bkt-dropzone-body {
  width: 100%;
}

.bkt-dropzone-icon {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--rauda-grey-text);
  margin-bottom: var(--rauda-space-3);
  display: inline-block;
}

/* ---------------------------------------------------------------------------
 * Result badges
 *
 * Every call result and evaluation verdict carries a fixed background/text
 * pair, so the same category reads identically on every screen. These are the
 * one place literal hexes are correct: they are per-category values the token
 * set has no name for. Applied as `.bkt-badge bkt-badge--<slug>`.
 * ------------------------------------------------------------------------ */

/* The base carries a neutral fill so an outcome the pipeline has just invented,
 * with no modifier of its own yet, still renders as a legible pill. */
.bkt-badge {
  display: inline-block;
  font-size: 0.65625rem;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 99px;
  padding: 0.1875rem 0.625rem;
  white-space: nowrap;
  background: #ededed;
  color: #5f5f5f;
}

.bkt-badge--ok,
.bkt-badge--passed { background: #e3f6e7; color: #1c7a34; }

.bkt-badge--pendiente,
.bkt-badge--sin-respuesta { background: #eaf0f8; color: #5a6b88; }

.bkt-badge--mejorable,
.bkt-badge--en-curso { background: #fdebdc; color: #b25607; }

/* The four phases of `rauda_review`. "Recibido" and "Corregido" share the
 * pairs the evaluation verdicts already use, so a phase reads at a glance as
 * waiting or settled. */
.bkt-badge--recibido { background: #eaf0f8; color: #5a6b88; }
.bkt-badge--corregido { background: #e3f6e7; color: #1c7a34; }
.bkt-badge--no-se-corrige { background: #ededed; color: #5f5f5f; }

.bkt-badge--buzon-de-voz { background: #fcf1dd; color: #8a5a0e; }
.bkt-badge--llamada-colgada { background: #e7f3fe; color: #1b7eb8; }
.bkt-badge--mensaje-recibido { background: #e8ecfe; color: #2438d6; }
.bkt-badge--contacto-incorrecto { background: #e5f5ee; color: #1b7a4e; }
.bkt-badge--reprogramado { background: #eeeaf8; color: #5b4e9c; }
.bkt-badge--escalado { background: #e5e9f2; color: #0e1f40; }
.bkt-badge--numero-equivocado { background: #f5e9e3; color: #8a4a2f; }
.bkt-badge--no-renueva { background: #ededed; color: #5f5f5f; }

.bkt-badge--rechazo-grabacion,
.bkt-badge--failed { background: #f7e6e9; color: #a23244; }

/* Counts that need acting on, as on the Apoderados header. */
.bkt-badge--accion-pendiente { background: #fdebdc; color: #b25607; }

/* The badge family is sized for a table cell; a header count needs more air. */
.bkt-badge--lg {
  font-size: 0.78125rem;
  padding: 0.4375rem 0.875rem;
}

/* ---------------------------------------------------------------------------
 * Charts
 *
 * Hand-rolled rather than ApexCharts: these are static proportions, not
 * interactive series, and a CSS bar cannot fail to load.
 * ------------------------------------------------------------------------ */

/* Horizontal proportion bar, as used in every breakdown list. */
.bkt-bar-track {
  height: 8px;
  border-radius: var(--rauda-radius-md);
  background: var(--rauda-grey-light);
  overflow: hidden;
}

.bkt-bar-fill {
  height: 100%;
  border-radius: var(--rauda-radius-md);
  background: var(--rauda-accent);
}

/* Vertical column chart. Columns are sized by an inline `height` percentage,
 * which is data, not style. */
/* One day's column -- cosmetics only.

   Nothing here places or sizes the bar. Its height comes inline from
   `DashboardData.chart_height`, its width and its seat at the foot of the
   track come from Bootstrap utilities, and its fill is blended in the read
   model from `PALETTE`. That is deliberate: this file is collected and
   fingerprinted, so a browser can hold an older copy of it, and a chart whose
   geometry lived here rendered as an empty white card when one did.

   What is left is what the design says a column looks like, and the ground a
   day with no calls keeps. */
.bkt-column {
  border-radius: var(--rauda-radius-lg) var(--rauda-radius-lg) 0 0;
  background: var(--rauda-grey-light);
  min-height: 2px;
}

/* Donut. The slice geometry arrives as an inline `conic-gradient`, because it
 * is computed from the data; the hole is what makes it a donut. */
.bkt-donut {
  position: relative;
  width: 150px;
  height: 150px;
  flex: none;
  border-radius: 50%;
}

.bkt-donut::after {
  content: "";
  position: absolute;
  inset: 23px;
  border-radius: 50%;
  background: var(--rauda-white);
}

/* The satisfaction donut is drawn larger than the result one. */
.bkt-donut--lg {
  width: 170px;
  height: 170px;
}

.bkt-donut--lg::after {
  inset: 26px;
}

.bkt-donut-centre {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* A breakdown that ranks rather than categorises draws every bar in navy,
 * because the ordering is the message and per-slice colour would fight it. */
.bkt-bar-fill--navy {
  background: var(--rauda-blue-text);
}

/* The legend beside a donut: wide enough that a label and its two figures stay
 * on one line, but free to grow with the card. */
.bkt-legend {
  min-width: 220px;
}

.bkt-legend--wide {
  min-width: 260px;
}

/* The right-hand count in a legend row, so the digits line up down the column. */
.bkt-legend-value {
  width: 44px;
}

/* Prose inside a callout, held to a readable measure. */
.bkt-measure {
  max-width: 66ch;
}

/* Legend swatch shared by the donut and the stacked bars. */
.bkt-swatch {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: var(--rauda-radius-sm);
  display: inline-block;
}

/* ---------------------------------------------------------------------------
 * Revisión stage counters
 * ------------------------------------------------------------------------ */

.bkt-pipe {
  border-radius: var(--rauda-radius-xl);
  border: 1px solid var(--rauda-grey-light);
  background: var(--rauda-white);
  padding: var(--rauda-space-4) var(--rauda-space-5);
}

.bkt-pipe-value {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--rauda-blue-text);
  font-variant-numeric: tabular-nums;
}

.bkt-pipe-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rauda-grey-text);
}

.bkt-pipe--navy {
  background: var(--rauda-blue-background);
  border-color: transparent;
}

.bkt-pipe--accent {
  background: var(--rauda-accent);
  border-color: transparent;
}

.bkt-pipe--navy .bkt-pipe-value,
.bkt-pipe--accent .bkt-pipe-value {
  color: #fff;
}

.bkt-pipe--navy .bkt-pipe-label,
.bkt-pipe--accent .bkt-pipe-label {
  color: rgba(255, 255, 255, 0.72);
}

/* ---------------------------------------------------------------------------
 * Utilities
 * ------------------------------------------------------------------------ */

/* Lining figures wherever a number sits in a column and must not jitter. */
.bkt-tabular {
  font-variant-numeric: tabular-nums;
}

/* The design's disclaimer line at the foot of every screen. */
.bkt-disclaimer {
  font-size: 0.75rem;
  color: var(--rauda-grey-text);
}

/* An empty state the design draws as a dashed well rather than a card. */
.bkt-empty-well {
  background: var(--rauda-grey-light);
  border: 1px dashed var(--rauda-grey);
  border-radius: var(--rauda-radius-xl);
  padding: var(--rauda-space-8);
  text-align: center;
  color: var(--rauda-grey-text);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
 * Entry animations
 *
 * Ported from the design, which staggers cards in on load and grows every bar
 * from zero. `dashboard.js` replays these on a panel the first time it is
 * revealed, since a CSS animation only runs when an element is first painted.
 * The reduced-motion block above neutralises all of it.
 * ------------------------------------------------------------------------ */

@keyframes bkt-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes bkt-pop-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes bkt-bar-grow {
  from { transform: scaleX(0); }
  to   { transform: none; }
}

@keyframes bkt-bar-grow-v {
  from { transform: scaleY(0); }
  to   { transform: none; }
}

.reveal {
  animation: bkt-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pop {
  animation: bkt-pop-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bargrow {
  transform-origin: left center;
  animation: bkt-bar-grow 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bargrowv {
  transform-origin: center bottom;
  animation: bkt-bar-grow-v 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* The design staggers a card row rather than firing it as one block. */
.reveal-1 { animation-delay: 60ms; }
.reveal-2 { animation-delay: 120ms; }
.reveal-3 { animation-delay: 180ms; }
.reveal-4 { animation-delay: 240ms; }
.reveal-5 { animation-delay: 300ms; }
.reveal-6 { animation-delay: 360ms; }
.reveal-7 { animation-delay: 420ms; }
.reveal-8 { animation-delay: 480ms; }

/* ---------------------------------------------------------------------------
   Sign-in
   ---------------------------------------------------------------------------
   The only screen an unauthenticated browser ever receives, so it carries its
   own layout rather than the console shell: no sidebar markup reaches anybody
   who has not been let in. It borrows the shell's own furniture instead of
   inventing its own -- the sidebar's navy, brand lockup and credit mark on the
   left, the light ground and blurred blobs every other screen opens with on
   the right -- so this is legible as the same product rather than a bolted-on
   screen. */

.bkt-login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 42fr 58fr;
}

/* Grid items default to `min-width: auto`, which would let an unbreakable
   string -- a long domain in the chip row -- widen the whole page rather than
   wrap inside its panel. */
.bkt-login-brand,
.bkt-login-panel {
    min-width: 0;
}

/* Left: the sidebar's navy, so the console is recognisable before anybody is
   inside it. Three rows -- lockup, wordmark, credit -- pinned apart. */
.bkt-login-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--rauda-space-8);
    padding: var(--rauda-space-6) var(--rauda-space-8) var(--rauda-space-5);
    background: linear-gradient(158deg, #16294F 0%, var(--rauda-blue-background) 62%, #070D1C 100%);
    color: #fff;
}

/* The accent, pooled at the foot of the panel. Same idea as the blobs on the
   light side, sized for a dark ground. */
.bkt-login-glow {
    position: absolute;
    inset: auto -30% -45% -30%;
    height: 70%;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 100%, var(--rauda-accent), transparent 68%);
    opacity: 0.3;
}

/* The sidebar lockup keeps its own colours here -- it is on the same navy --
   but not its sidebar spacing. */
.bkt-login-brand-top {
    position: relative;
    z-index: 1;
    padding: 0;
}

.bkt-lockup {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rauda-space-1);
    text-align: center;
}

.bkt-lockup-a,
.bkt-lockup-b {
    font-size: clamp(1.875rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

/* Rauda runs the console, Bankinter owns the operation: the client name is
   held back rather than dimmed out of the picture. */
.bkt-lockup-b {
    color: rgba(255, 255, 255, 0.42);
}

.bkt-lockup-x {
    color: var(--rauda-accent-variant);
    font-size: 0.8125rem;
    font-weight: 600;
}

.bkt-login-brand-foot {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rauda-space-2) var(--rauda-space-4);
    font-size: 0.71875rem;
    color: var(--rauda-sidebar-text-dim);
}

/* Right: the light ground and blobs the rest of the console opens with. */
.bkt-login-panel {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--rauda-space-8) var(--rauda-space-6);
    background: var(--rauda-background);
}

/* The shell sizes its blobs for screens crowded with cards, where nobody sees
   where one stops. This panel is mostly empty ground, so at that size they
   read as two rings; scaled up and blurred further they go back to being the
   ambient wash they are everywhere else. */
.bkt-login-panel .bkt-blob {
    filter: blur(140px);
}

.bkt-login-panel .bkt-blob-a {
    width: 40rem;
    height: 40rem;
    top: -14rem;
    right: -12rem;
    opacity: 0.1;
}

/* Barely there. The ground is a warm cream, and the shell's green blob over it
   at any real strength turns the whole lower panel olive. */
.bkt-login-panel .bkt-blob-b {
    width: 34rem;
    height: 34rem;
    top: auto;
    bottom: -18rem;
    right: auto;
    left: -14rem;
    opacity: 0.035;
}

/* Left-aligned, unlike the centred card this replaced: there is a headline and
   a paragraph to read before the button, and centred text makes both harder. */
.bkt-login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 24.5rem;
}

.bkt-login-title {
    font-size: var(--rauda-text-2xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--rauda-blue-text);
    margin: 0;
}

.bkt-login-lede {
    font-size: var(--rauda-text-base);
    line-height: var(--rauda-leading-normal);
    margin: var(--rauda-space-3) 0 var(--rauda-space-6);
}

/* One provider today, but styled as the option it is rather than a plain
   link, so adding a second (Entra ID, say) later is a sibling, not a rework. */
.bkt-auth-option {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    text-decoration: none;
    text-align: left;
    color: inherit;
    background: var(--rauda-white);
    border: 1px solid var(--rauda-grey);
    border-radius: var(--rauda-radius-xl);
    padding: 1.125rem 1.25rem;
    box-shadow: var(--rauda-shadow-sm);
    transition: border-color var(--rauda-transition-fast),
        box-shadow var(--rauda-transition-fast),
        transform var(--rauda-transition-fast);
}

.bkt-auth-option:hover {
    color: inherit;
    text-decoration: none;
    border-color: var(--rauda-accent);
    box-shadow: var(--rauda-shadow-lg);
    transform: translateY(-1px);
}

.bkt-auth-option:focus-visible {
    outline: 2px solid var(--rauda-accent);
    outline-offset: 2px;
}

.bkt-auth-option-icon {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rauda-radius-lg);
    background: var(--rauda-grey-light);
}

.bkt-auth-option-title {
    display: block;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--rauda-blue-text);
}

.bkt-auth-option-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--rauda-grey-text);
    margin-top: 0.125rem;
}

.bkt-login-error {
    background: #FDECEE;
    border-left: 3px solid var(--rauda-red, #A23244);
    color: #5F1420;
    padding: 0.75rem 1rem;
    border-radius: var(--rauda-radius-md);
    font-size: 0.875rem;
    text-align: left;
}

.bkt-login-card code {
    background: var(--rauda-grey-light);
    padding: 0.05rem 0.35rem;
    border-radius: var(--rauda-radius-sm);
    font-size: 0.8em;
}

/* Narrow: the brand panel becomes a band above the card rather than a column
   beside it, and gives up the height it was using for the lockup. */
@media (max-width: 62rem) {
    .bkt-login {
        grid-template-columns: 1fr;
        /* The band takes the height it needs; the card panel takes the rest,
           rather than each being handed half a viewport it cannot fill. */
        grid-template-rows: auto 1fr;
    }

    .bkt-login-brand {
        justify-content: flex-start;
        gap: var(--rauda-space-6);
        padding: var(--rauda-space-5) var(--rauda-space-6);
    }

    .bkt-lockup {
        align-items: flex-start;
        text-align: left;
    }

    .bkt-lockup-a,
    .bkt-lockup-b {
        font-size: 1.75rem;
    }

    .bkt-login-panel {
        padding: var(--rauda-space-8) var(--rauda-space-5);
    }
}

/* ---------------------------------------------------------------------------
 * Transcript
 *
 * What was said, set as a document rather than as a dump. It used to be a
 * `pre`, which gave it Tabler's code treatment -- monospace, and an inherited
 * near-white ink on its dark code ground that had to be overridden back to
 * something readable. Speech is body copy, so it now takes the console's own
 * sans and type scale.
 *
 * `core.django.services.turns` has already split the stored string into turns
 * and named the side each one belongs to, so these rules only have to make a
 * conversation of them: the assistant's turns lean left on the accent, the
 * apoderado's lean right on the navy, and a turn nobody could attribute stays
 * full width and neutral rather than being drawn as one of the two.
 *
 * The lean is a max-width plus a margin rather than flexbox alignment, so a
 * long turn still uses the measure the eye can return from and a narrow
 * viewport collapses both sides to full width without a second rule.
 *
 * Whitespace inside a turn is left to collapse, as it was under `pre-line`. The
 * fields the pipeline interpolates arrive padded out of Airtable -- a real line
 * reads "pregunto por AINARA        ENERIZ       AURIA" -- and that padding is
 * an artefact of the column it was stored in, not something anybody said.
 * ------------------------------------------------------------------------ */

.bkt-transcript {
    display: flex;
    flex-direction: column;
    gap: var(--rauda-space-4);
    border: 1px solid var(--rauda-grey);
    border-radius: var(--rauda-radius-xl);
    background: var(--rauda-grey-light);
    color: var(--rauda-blue-text);
    padding: var(--rauda-space-5);
}

/* One turn. Held to a measure rather than to the card's width: the console is
   not a fixed canvas, and on a wide screen an unbounded line loses the reader
   on the way back to the left edge. */
.bkt-turn {
    max-width: 68ch;
}

/* Who spoke, as stored. Set above the words rather than inside them so a long
   turn does not have to reserve a column for a name read once. */
.bkt-turn-speaker {
    margin-bottom: var(--rauda-space-1);
    font-size: var(--rauda-text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--rauda-grey-text);
}

.bkt-turn-bubble {
    border-radius: var(--rauda-radius-lg);
    padding: var(--rauda-space-3) var(--rauda-space-4);
    background: #fff;
    font-size: var(--rauda-text-base);
    line-height: 1.7;
    overflow-wrap: anywhere;
}

/* The rail is what carries the attribution, so it is the one thing that
   differs between the sides -- the ground stays white on both, because two
   coloured grounds in one panel compete with the badges above it. */
.bkt-turn--agent .bkt-turn-bubble {
    border-left: 3px solid var(--rauda-accent);
}

.bkt-turn--contact {
    margin-left: auto;
}

.bkt-turn--contact .bkt-turn-speaker {
    text-align: right;
}

.bkt-turn--contact .bkt-turn-bubble {
    border-right: 3px solid var(--rauda-blue-text);
}

/* Unattributed: full width, no rail, no lean. The service returns this when it
   could not tell who spoke, and the design has to be able to say that. */
.bkt-turn--unknown {
    max-width: none;
}

.bkt-turn--unknown .bkt-turn-bubble {
    background: transparent;
    border: 1px dashed var(--rauda-grey);
}

/* Below the phone-landscape breakpoint the lean stops helping: two columns of
   four words each are harder to read than one of eight. */
@media (max-width: 575.98px) {
    .bkt-turn,
    .bkt-turn--contact {
        max-width: none;
        margin-left: 0;
    }

    .bkt-turn--contact .bkt-turn-speaker {
        text-align: left;
    }
}

/* Inline call audio. Narrow so a row of them does not dominate the table. */
.bkt-audio {
    height: 2rem;
    max-width: 13rem;
}