/* css/r16-hub-calendar.css — R16 · vista Calendario del hub de Control (A3).
 *
 * Viste el marcado que emite js/ext-hub-calendar.js (A1+A2). El hub vive sobre
 * el LIENZO oscuro, no sobre --surface: por eso aquí se usan --bg/--bg2/--bg3,
 * --text/--text2, --border/--border2 y --gold-on-surface. Los tres primeros
 * voltean solos en `body.light` (styles.css:844) → NO hay ni una regla
 * `body.light` en esta hoja, y no debe haberla: si alguna necesitase una, es
 * señal de que ha entrado un color a pelo (reglas 4/10/12 de app/CLAUDE.md).
 *
 * El ÚNICO color que no es token es var(--calv-c): el hex del estado, inyectado
 * inline por el módulo desde ESTADO_COLOR (ext-control.js:78) igual que hace la
 * lista. Prohibido redeclarar esa paleta aquí.
 *
 * Variables que llegan del marcado (no se declaran, se CONSUMEN):
 *   .calv-grid  → --calv-weeks   (nº de filas de semana del mes)
 *   .calv-week  → --calv-lanes   (carriles ocupados, suelo 1, tope MAX_LANES+1)
 *   .calv-chip  → --calv-col --calv-span --calv-lane --calv-c
 *   .calv-more  → --calv-col --calv-lane
 *   .calv-undated-chip → --calv-c
 *
 * Contraste (guardián: tests/e2e/contrast-aa.spec.js, tests nuevos 8 y 9):
 *   texto de chip = var(--text) sobre color-mix(var(--calv-c) 22%, var(--bg2)).
 *   Peor par medido: `realizado` #90ee90 → 5,70:1 en oscuro / 16,02:1 en claro
 *   (`borrador` #7a7a7a → 7,93 / 13,38). El 22 % es el punto en que el estado se
 *   LEE sin hundir la tinta; bajarlo solo si un estado nuevo no llegara a 4,5.
 *   A ≤560px el chip pierde su texto y su borde: ahí el guardián (test 10) mide
 *   la BARRA contra el lienzo — no-texto, ≥3:1 (WCAG 1.4.11). Ver el bloque
 *   @media de abajo para el porqué del 55 %.
 */

/* ── Tarjeta y cabecera ───────────────────────────────────────────────── */

.calv-card{
  /* Métrica del mes. Cambiar aquí = cambiar el calendario entero. */
  --calv-daynum-h:24px;      /* franja del número de día, encima del carril 0 */
  --calv-lane-h:20px;        /* paso vertical entre carriles de chip */
  --calv-chip-h:18px;        /* alto del chip (paso − 2px de aire) */
  --calv-day-min:84px;       /* suelo de altura de celda en escritorio */
  --calv-gut:3px;            /* canalón lateral del chip dentro de su columna */
}

.calv-head{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:var(--sp-2) var(--sp-3);
  margin-bottom:var(--sp-3);
}

.calv-nav{ display:inline-flex; align-items:center; gap:var(--sp-1); }
.calv-nav button{
  min-width:30px; height:28px; padding:0 var(--sp-2);
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:transparent; color:var(--text);
  font:inherit; font-size:var(--t-sm); line-height:1;
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.calv-nav button:hover{ border-color:var(--gold-on-surface); color:var(--gold-on-surface); }
.calv-nav button:focus-visible{ outline:2px solid var(--gold-on-surface); outline-offset:2px; }
.calv-nav-prev, .calv-nav-next{ font-size:var(--t-md); }

.calv-head-month{
  font-family:var(--serif); font-size:var(--t-md); font-weight:600;
  color:var(--text); letter-spacing:-.01em; white-space:nowrap;
}

/* El checkbox de hideDead abre el bloque de la derecha (él + el segmentado).
   Mismo control que en la cabecera de la lista, en tono secundario. */
.calv-head .ctrl-list-hidedead{
  margin-left:auto; font-size:var(--t-xs); color:var(--text2);
}

/* ── Segmentado Lista ⇄ Calendario ────────────────────────────────────────
   Vive en DOS sitios: la cabecera del acordeón de la lista (.ctrl-list-acc-h)
   y la del calendario (.calv-head). Por eso no lleva márgenes propios ni
   depende de ninguno de los dos contenedores. El activo NO pinta oro sobre
   lavado de oro (ese par cae a 4,2:1 sobre papel): la tinta es --text sobre un
   escalón real de superficie (--bg3) y el oro se reserva para el filo. */
.ctrl-view-toggle{
  display:inline-flex; align-items:stretch; flex:0 0 auto;
  border:1px solid var(--border); border-radius:var(--r-pill);
  overflow:hidden;
}
.ctrl-view-toggle button{
  appearance:none; border:none; background:transparent;
  padding:4px 12px;
  font:inherit; font-size:var(--t-xs); font-weight:500; line-height:1.6;
  color:var(--text2); cursor:pointer;
  transition:color var(--dur-fast) var(--ease-soft), background-color var(--dur-fast) var(--ease-soft);
}
.ctrl-view-toggle button:hover{ color:var(--text); }
.ctrl-view-toggle button.active{
  background:var(--bg3); color:var(--text); font-weight:600;
  box-shadow:inset 0 -2px 0 var(--gold-on-surface);
}
.ctrl-view-toggle button:focus-visible{ outline:2px solid var(--gold-on-surface); outline-offset:-2px; }

/* ── Rejilla del mes ──────────────────────────────────────────────────── */

.calv-dow{
  display:grid; grid-template-columns:repeat(7,1fr);
  padding:0 0 var(--sp-1);
}
.calv-dow span{
  text-align:center;
  font-size:var(--t-2xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text2);
}

.calv-grid{
  display:flex; flex-direction:column;
  /* --calv-weeks da el suelo de altura del mes: sin él una vista sin eventos
     se encoge hasta ser irreconocible al cambiar de mes. */
  min-height:calc(var(--calv-weeks, 5) * var(--calv-day-min));
  border:1px solid var(--border); border-radius:var(--r2);
  overflow:hidden;
}

.calv-week{
  position:relative;                                   /* ancla de los chips */
  display:grid; grid-template-columns:repeat(7,1fr);
  flex:1 0 auto;
  /* Alto = lo que pidan los carriles de esta semana, nunca menos que la celda. */
  min-height:max(
    var(--calv-day-min),
    calc(var(--calv-daynum-h) + var(--calv-lanes, 1) * var(--calv-lane-h) + var(--sp-2))
  );
}

.calv-day{
  padding:var(--sp-1) 5px 0;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  min-width:0;
}
.calv-day:nth-child(7){ border-right:none; }           /* los 7 primeros hijos son los días */
.calv-week:last-child .calv-day{ border-bottom:none; }

/* Días de otro mes: se recesan por SUPERFICIE, no bajando la tinta. --text3
   sobre el lienzo da 3,9:1 y no llega a AA; --bg (más hondo que --bg2 en las
   dos pieles) comunica «fuera del mes» sin tocar la legibilidad. */
.calv-day.out{ background:var(--bg); }

/* Celda destino mientras se arrastra un chip (C3). Va DESPUÉS de `.out` a
   propósito: misma especificidad, y el drop-target tiene que ganar incluso
   sobre un día de otro mes. */
.calv-day.drop-target{ background:color-mix(in srgb, var(--gold-on-surface) 18%, var(--bg2)); }

.calv-daynum{
  display:inline-flex; align-items:center; justify-content:center;
  height:18px; min-width:18px; padding:0 var(--sp-1);
  border-radius:var(--r-pill);
  font-size:var(--t-xs); font-weight:500; line-height:1;
  color:var(--text2); font-variant-numeric:tabular-nums;
}
.calv-day.today .calv-daynum{
  background:var(--gold-on-surface); color:var(--bg2); font-weight:700;
}

/* ── Chips de evento ──────────────────────────────────────────────────── */

.calv-chip{
  --calv-gl:var(--calv-gut);                           /* canalón izquierdo */
  --calv-gr:var(--calv-gut);                           /* canalón derecho   */
  position:absolute;
  top:calc(var(--calv-daynum-h) + var(--calv-lane) * var(--calv-lane-h));
  left:calc(var(--calv-col) * 100% / 7 + var(--calv-gl));
  width:calc(var(--calv-span) * 100% / 7 - var(--calv-gl) - var(--calv-gr));
  height:var(--calv-chip-h);
  display:flex; align-items:center; gap:var(--sp-1);
  padding:0 5px;
  border:1px solid color-mix(in srgb, var(--calv-c) 45%, transparent);
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--calv-c) 22%, var(--bg2));
  color:var(--text);
  font:inherit; font-size:var(--t-xs); font-weight:500; line-height:1;
  text-align:left; overflow:hidden; cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.calv-chip:hover{ border-color:color-mix(in srgb, var(--calv-c) 85%, transparent); }
.calv-chip:focus-visible{ outline:2px solid var(--gold-on-surface); outline-offset:1px; }
/* Arrastrable por defecto (C3); el candado (mirror/viewer) lo desactiva. */
.calv-chip:not([data-cal-locked="1"]){ cursor:grab; }
.calv-chip[data-cal-locked="1"]{ cursor:default; }
.calv-chip-lock{ flex:0 0 auto; display:inline-flex; opacity:.4; }

/* Barra que sigue en otra semana (o fuera del mes): el lado cortado pierde el
   radio Y el canalón, para que llegue de verdad hasta el borde de la fila. */
.calv-chip.calv-clip-l{
  --calv-gl:0px;
  border-top-left-radius:0; border-bottom-left-radius:0; border-left-color:transparent;
}
.calv-chip.calv-clip-r{
  --calv-gr:0px;
  border-top-right-radius:0; border-bottom-right-radius:0; border-right-color:transparent;
}

/* Espejo BBP2 (origin='bbp2') = SOLO LECTURA. El trazo discontinuo lo dice sin
   esconder nada (regla 13: callado, jamás ausente). */
.calv-chip.calv-mirror{ border-style:dashed; }

.calv-chip-dot{
  flex:0 0 auto; width:6px; height:6px; border-radius:50%;
  background:var(--calv-c);
}
.calv-chip-t{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.calv-chip-v{
  flex:0 0 auto;
  padding:0 4px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--text) 14%, transparent);
  font-size:var(--t-2xs); font-weight:600; line-height:1.5;
  color:var(--text);
}

/* «+N más» — ocupa el carril MAX_LANES de su columna. */
.calv-more{
  position:absolute;
  top:calc(var(--calv-daynum-h) + var(--calv-lane) * var(--calv-lane-h));
  left:calc(var(--calv-col) * 100% / 7 + var(--calv-gut));
  width:calc(100% / 7 - var(--calv-gut) * 2);
  height:var(--calv-chip-h);
  display:flex; align-items:center;
  padding:0 4px;
  border:none; background:transparent;
  color:var(--text2);
  font:inherit; font-size:var(--t-2xs); font-weight:600; line-height:1;
  text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer;
  transition:color var(--dur-fast) var(--ease-soft);
}
.calv-more:hover{ color:var(--gold-on-surface); }
.calv-more:focus-visible{ outline:2px solid var(--gold-on-surface); outline-offset:1px; }

/* ── Franja «Sin fecha» ───────────────────────────────────────────────── */

.calv-undated{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:var(--sp-2);
  margin-top:var(--sp-3); padding-top:var(--sp-3);
  border-top:1px solid var(--border);
}
.calv-undated-lbl{
  font-size:var(--t-2xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text2); white-space:nowrap;
}
.calv-undated-list{ display:flex; flex-wrap:wrap; gap:var(--sp-1); min-width:0; }
.calv-undated-chip{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  max-width:220px; height:22px; padding:0 var(--sp-2);
  border:1px solid color-mix(in srgb, var(--calv-c) 45%, transparent);
  border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--calv-c) 22%, var(--bg2));
  color:var(--text);
  font:inherit; font-size:var(--t-xs); font-weight:500; line-height:1;
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-soft);
}
.calv-undated-chip:hover{ border-color:color-mix(in srgb, var(--calv-c) 85%, transparent); }
.calv-undated-chip:focus-visible{ outline:2px solid var(--gold-on-surface); outline-offset:1px; }
.calv-undated-chip .calv-chip-t{ flex:0 1 auto; }

/* ── Popover de evento (B1) ───────────────────────────────────────────────
   Vive en document.body, fuera de .ctrl-card: por eso repite el lienzo
   (--bg2/--border2) en vez de heredarlo. Capa justo por DEBAJO del toast —
   un aviso tiene que poder pisarlo. El único color no-token sigue siendo
   var(--calv-c), inyectado inline por el módulo desde ESTADO_COLOR. */

.calv-popover{
  position:fixed; top:0; left:0;
  z-index:calc(var(--z-toast) - 1);
  width:min(320px, calc(100vw - 16px));
  padding:var(--sp-3);
  border:1px solid var(--border2); border-radius:var(--r2);
  background:var(--bg2); color:var(--text);
  font-size:var(--t-sm); line-height:1.45;
  box-shadow:var(--shadow-lg);
}
.calv-popover:focus{ outline:none; }
.calv-popover:focus-visible{ outline:2px solid var(--gold-on-surface); outline-offset:2px; }

.calv-pop-head{ display:flex; align-items:flex-start; gap:var(--sp-2); }
.calv-pop-dot{
  flex:0 0 auto; width:9px; height:9px; margin-top:5px;
  border-radius:50%; background:var(--calv-c);
}
.calv-pop-title{ flex:1 1 auto; min-width:0; }
.calv-pop-cliente{
  font-family:var(--serif); font-size:var(--t-md); font-weight:600;
  color:var(--text); letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
.calv-pop-estado{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1);
  margin-top:2px;
  font-size:var(--t-xs); color:var(--text2);
}
/* Espejo BBP2: se DICE, no se esconde (regla 13). */
.calv-pop-mirror{
  padding:1px 6px; border-radius:var(--r-pill);
  border:1px dashed var(--border2);
  font-size:var(--t-2xs); font-weight:600; letter-spacing:.04em;
  color:var(--text2);
}
.calv-pop-x{
  flex:0 0 auto;
  width:24px; height:24px; margin:-2px -2px 0 0;
  border:none; border-radius:var(--r-sm); background:transparent;
  color:var(--text2); font:inherit; font-size:var(--t-md); line-height:1;
  cursor:pointer;
  transition:color var(--dur-fast) var(--ease-soft);
}
.calv-pop-x:hover{ color:var(--text); }
.calv-pop-x:focus-visible{ outline:2px solid var(--gold-on-surface); outline-offset:1px; }

.calv-pop-body{
  display:grid; grid-template-columns:auto 1fr;
  gap:2px var(--sp-3);
  margin:var(--sp-3) 0 0;
}
.calv-pop-body dt{
  font-size:var(--t-2xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text2); white-space:nowrap;
  align-self:center;
}
.calv-pop-body dd{ margin:0; min-width:0; overflow-wrap:anywhere; }

.calv-pop-vers{
  margin-top:var(--sp-3); padding-top:var(--sp-2);
  border-top:1px solid var(--border);
}
.calv-pop-vers-h{
  font-size:var(--t-2xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text2);
}
.calv-pop-vers ul{ list-style:none; margin:var(--sp-1) 0 0; padding:0; }
.calv-pop-vers li{
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--t-xs); line-height:1.7;
}
.calv-pop-vdot{
  flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:var(--calv-c);
}
.calv-pop-vlbl{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.calv-pop-vdate{ flex:0 0 auto; color:var(--text2); font-variant-numeric:tabular-nums; }

.calv-pop-actions{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2);
  margin-top:var(--sp-3); padding-top:var(--sp-3);
  border-top:1px solid var(--border);
}
.calv-pop-sel{
  flex:1 1 120px; min-width:0; height:28px; padding:0 var(--sp-2);
  border:1px solid var(--border2); border-radius:var(--r-sm);
  background:var(--bg3); color:var(--text);
  font:inherit; font-size:var(--t-xs); line-height:1;
  cursor:pointer;
}
.calv-pop-actions button{
  height:28px; padding:0 var(--sp-3);
  border:1px solid var(--border2); border-radius:var(--r-sm);
  background:transparent; color:var(--text2);
  font:inherit; font-size:var(--t-xs); font-weight:500; line-height:1;
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft),
             transform var(--dur-fast) var(--ease-out);
}
.calv-pop-actions button:hover{ border-color:var(--gold-on-surface); color:var(--gold-on-surface); }
.calv-pop-actions button:focus-visible{ outline:2px solid var(--gold-on-surface); outline-offset:1px; }
/* 0,2,0 gana a `.calv-pop-actions button` (0,1,1) sin !important; el :hover de
   arriba (0,2,1) sigue ganando a esto, así que el oro del hover se conserva. */
.calv-pop-actions .calv-pop-open{ margin-left:auto; color:var(--text); font-weight:600; }

/* Popover del día («+N más»): lista de todos los eventos que lo cubren. */
.calv-pop-day-list{
  display:flex; flex-direction:column; gap:2px;
  margin-top:var(--sp-3);
  max-height:min(50vh, 320px); overflow-y:auto;
}
.calv-pop-day-item{
  display:flex; align-items:center; gap:var(--sp-2);
  width:100%; padding:var(--sp-1) var(--sp-2);
  border:1px solid transparent; border-radius:var(--r-sm);
  background:transparent; color:var(--text);
  font:inherit; font-size:var(--t-xs); line-height:1.4; text-align:left;
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-soft), background-color var(--dur-fast) var(--ease-soft),
             transform var(--dur-fast) var(--ease-out);
}
.calv-pop-day-item:hover{
  border-color:color-mix(in srgb, var(--calv-c) 55%, transparent);
  background:color-mix(in srgb, var(--calv-c) 14%, var(--bg2));
}
.calv-pop-day-item:focus-visible{ outline:2px solid var(--gold-on-surface); outline-offset:1px; }
.calv-pop-day-item .calv-pop-dot{ margin-top:0; }
.calv-pop-day-t{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.calv-pop-day-e{ flex:0 0 auto; color:var(--text2); font-size:var(--t-2xs); }

/* ── Toast del calendario (lo emiten las fases B/C: mover fecha, avisos) ──
   z-index del token, jamás un número inventado. */
.calv-toast{
  position:fixed; left:50%; bottom:var(--sp-5); transform:translateX(-50%);
  z-index:var(--z-toast);
  display:flex; align-items:center; gap:var(--sp-3);
  max-width:min(92vw, 520px);
  padding:10px var(--sp-4);
  border:1px solid var(--border2); border-radius:var(--r2);
  background:var(--bg3); color:var(--text);
  font-size:var(--t-sm); line-height:1.4;
  box-shadow:var(--shadow-lg);
  /* Enter/exit as an interruptible transition (not a keyframe): a replacing
     toast retargets mid-flight without flicker. translateX(-50%) is the
     horizontal centering and must survive both states. */
  opacity:0; transform:translateX(-50%) translateY(8px);
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.calv-toast.calv-toast-in{ opacity:1; transform:translateX(-50%); }
.calv-toast-act{
  flex:0 0 auto;
  height:26px; padding:0 var(--sp-3);
  border:1px solid var(--border2); border-radius:var(--r-sm);
  background:transparent; color:var(--gold-on-surface);
  font:inherit; font-size:var(--t-xs); font-weight:600; line-height:1;
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-out);
}
.calv-toast-act:hover{ border-color:var(--gold-on-surface); }
.calv-toast-act:focus-visible{ outline:2px solid var(--gold-on-surface); outline-offset:1px; }
/* Press feedback (house gesture) for the popover buttons, day-list items and toast action */
.calv-pop-actions button:active,.calv-pop-day-item:active,.calv-toast-act:active{transform:translateY(1px)}

/* ── Drag de fecha (C3) ───────────────────────────────────────────────────
   El ghost es un CLON del chip: hereda color/borde/tipografía por CSS, solo
   se le fija posición/tamaño en línea (ver ext-hub-calendar.js::startGhost).
   Capa justo bajo el popover/toast — un aviso tiene que poder pisarlo. */
.calv-drag-ghost{
  z-index:calc(var(--z-toast) - 1);
  cursor:grabbing;
  box-shadow:var(--shadow-lg);
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width:700px){
  .calv-card{
    --calv-daynum-h:21px;
    --calv-lane-h:17px;
    --calv-chip-h:15px;
    --calv-day-min:58px;
    --calv-gut:2px;
  }
  .calv-head-month{ font-size:var(--t-base); }
  /* Hoja inferior: a este ancho un popover anclado al chip cae medio fuera de
     pantalla. El módulo NO escribe left/top en línea por debajo de 700px (ver
     placePopover), así que estas reglas mandan sin necesidad de !important. */
  .calv-popover{
    top:auto; left:50%; bottom:0;
    transform:translateX(-50%);
    width:min(440px, 100vw);
    max-height:80vh; overflow-y:auto;
    border-radius:var(--r2) var(--r2) 0 0;
    padding:var(--sp-4) var(--sp-3) var(--sp-5);
  }
  .calv-day{ padding:2px 3px 0; }
  .calv-daynum{ height:16px; min-width:16px; padding:0 2px; font-size:var(--t-2xs); }
  .calv-chip{ font-size:var(--t-2xs); padding:0 3px; }
}

/* ≤560px (~53px por columna): un nombre de cliente ahí no se lee — decisión de
   producto nº3 del plan. El chip se reduce a su BARRA de color (conserva el
   span multi-día, que un punto perdería) y el recuento «+N más» se queda como
   la única vía al detalle. El nombre sigue en el `title` y en el popover. */
@media (max-width:560px){
  .calv-card{
    --calv-daynum-h:20px;
    --calv-lane-h:11px;
    --calv-chip-h:8px;
    --calv-day-min:44px;                                 /* diana táctil mínima */
  }
  .calv-day{ min-height:44px; }
  /* La barra es la ÚNICA señal del evento a este ancho, así que tiene que
     sostenerse SOLA contra el lienzo (--bg2 de .ctrl-card) en las dos pieles.
     `var(--calv-c)` a pelo no lo hace: #90ee90 sobre papel da 1,42:1 — la barra
     desaparecía. Anclarlo a --text (que voltea con el tema) hunde el estado
     sobre papel y lo aclara sobre el panel; al 55 % el PEOR de los 8 estados da
     3,82:1 (#90ee90 en claro) y el color sigue leyéndose como el de la lista.
     Bajarlo (más color) vuelve a acercar el verde al blanco: 60 % ya son 3,36. */
  .calv-chip{
    padding:0; gap:0;
    border:none; border-radius:2px;
    background:color-mix(in srgb, var(--calv-c) 55%, var(--text));
  }
  /* Espejo BBP2 = solo lectura. Aquí NO hay borde que puntear, y `opacity` ya no
     vale: rebaja la barra contra el lienzo justo cuando es lo único que queda
     (sobre papel la dejaba casi en blanco). El trazo discontinuo se traslada al
     RELLENO — ticks verticales que cruzan los 8px de alto y no tocan el
     contraste de la barra, que lo sigue dando su background-color. */
  .calv-chip.calv-mirror{
    /* La base `.calv-chip.calv-mirror{border-style:dashed}` (0,2,0) le gana en
       especificidad al `.calv-chip{border:none}` de este bloque (0,1,0) sin
       este reset explícito: el espejo recuperaba un trazo punteado justo
       donde la barra es la única señal que queda. */
    border-style:none;
    background-image:repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--calv-c) 40%, var(--bg2)) 0 2px,
      transparent 2px 5px);
  }
  /* Solo los chips de la REJILLA se quedan sin nombre — la franja «Sin fecha»
     comparte la clase .calv-chip-t y tiene todo el ancho: colapsarla ahí
     dejaría pastillas mudas (visto en la pasada a 375px). */
  .calv-chip .calv-chip-dot,
  .calv-chip .calv-chip-t,
  .calv-chip .calv-chip-v,
  .calv-chip .calv-chip-lock{ display:none; }
  .calv-more{ font-size:9px; padding:0 2px; }
  .calv-undated-chip{ max-width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .calv-nav button,
  .ctrl-view-toggle button,
  .calv-chip,
  .calv-more,
  .calv-undated-chip,
  .calv-toast-act{ transition:none; }
}