/* ============================================================================
 * «Cerebro: te toca decidir» en Mi día (#795, 05-nov-2026) · KAREN para Nico
 * Una tarjeta a la vez con gesto: derecha aceptar (verde), izquierda rechazar
 * (rojo). `--p` (-1..1) lo pone el arrastre; solo transform y opacity se mueven.
 * Va dentro de `.hoy-principal`: misma anchura y márgenes que los demás bloques.
 * ========================================================================== */
.cbs { --cbs-si: var(--st-aprobado); --cbs-no: var(--u-critica); outline: none; min-width: 0; }
.cbs:focus-visible .cbs-card:not(.cbs-fondo) { box-shadow: var(--ring), var(--shadow); }
.cbs .hoy-sec { flex-wrap: wrap; }
.cbs-contador { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cbs-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cbs-pila { position: relative; }
.cbs-card {
  --p: 0;
  position: relative; padding: 18px 20px 14px; border-radius: var(--r-panel);
  background: var(--surface); border: 1px solid var(--line-brand); box-shadow: var(--shadow);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  overflow: hidden; overflow-wrap: anywhere;
}
.cbs-card.arrastrando { cursor: grabbing; }
.cbs-card::before, .cbs-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
}
.cbs-card::before { background: color-mix(in srgb, var(--cbs-si) 16%, transparent); opacity: clamp(0, var(--p), 1); }
.cbs-card::after { background: color-mix(in srgb, var(--cbs-no) 16%, transparent); opacity: clamp(0, calc(var(--p) * -1), 1); }
.cbs-fondo {
  position: absolute; inset: 8px 10px -6px; z-index: 0; transform: scale(.97); opacity: .55; box-shadow: none;
  cursor: default;
}
.cbs-pila > .cbs-card:not(.cbs-fondo) { z-index: 1; animation: cbs-entra 220ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes cbs-entra { from { opacity: 0; translate: 0 6px; scale: .98; } to { opacity: 1; translate: none; scale: none; } }
.cbs-sello {
  position: absolute; top: 12px; z-index: 2; padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 800; color: var(--white); pointer-events: none;
}
.cbs-sello-si { right: 14px; background: var(--cbs-si); opacity: clamp(0, var(--p), 1); }
.cbs-sello-no { left: 14px; background: var(--cbs-no); opacity: clamp(0, calc(var(--p) * -1), 1); }
.cbs-quien { position: relative; margin: 0 0 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--purple-ink); }
.cbs-que { position: relative; margin: 0 0 12px; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--text-1); }
.cbs-meta { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cbs-tag {
  padding: 3px 9px; border-radius: var(--r-pill); background: var(--overlay-2);
  font-size: 12px; font-weight: 700; color: var(--text-2);
}
.cbs-aud-ok { background: color-mix(in srgb, var(--cbs-si) 14%, transparent); color: var(--cbs-si); }
.cbs-aud-mal { background: color-mix(in srgb, var(--cbs-no) 12%, transparent); color: var(--alert-t, var(--cbs-no)); }
.cbs-fecha { margin-left: auto; font-size: 12px; color: var(--text-2); }
.cbs-reparo { position: relative; margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.cbs-pista { position: relative; margin: 10px 0 0; font-size: 12px; color: var(--text-3); }
.cbs-error {
  margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-sm, 10px);
  background: color-mix(in srgb, var(--cbs-no) 10%, var(--surface)); color: var(--alert-t, var(--cbs-no));
  font-size: 14px; font-weight: 600;
}
.cbs-acciones, .cbs-motivo-pie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cbs-acciones .in-btn, .cbs-motivo-pie .in-btn { min-height: var(--toque, 44px); }
.cbs-btn-si { background: var(--cbs-si); border-color: var(--cbs-si); color: var(--white); }
.cbs-btn-si:hover:not(:disabled) { background: color-mix(in srgb, var(--cbs-si) 85%, black); }
.cbs-btn-no { background: transparent; border-color: var(--cbs-no); color: var(--alert-t, var(--cbs-no)); }
.cbs-btn-no:hover:not(:disabled) { background: color-mix(in srgb, var(--cbs-no) 10%, transparent); }
.cbs-acciones .ghost { margin-left: auto; }
.cbs-motivo { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.cbs-motivo label { font-size: 13px; font-weight: 700; color: var(--text-1); }
.cbs-motivo textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; padding: 10px 12px;
  border-radius: var(--r-input, 10px); border: 1px solid var(--line-strong); background: var(--input-bg, var(--surface));
  font: inherit; font-size: 15px; color: var(--text-1);
}
.cbs-motivo textarea:focus-visible { outline: none; box-shadow: var(--ring); }
.cbs-motivo.rechazo textarea { border-color: color-mix(in srgb, var(--cbs-no) 55%, var(--line-strong)); }
.cbs-fin { display: flex; align-items: center; gap: 14px; padding: 6px 0; }
.cbs-fin b { display: block; font-size: 15px; color: var(--text-1); }
.cbs-fin p { margin: 2px 0 8px; font-size: 14px; color: var(--text-2); }
.cbs-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 12px 0; font-size: 14px; }
.cbs-dl dt { font-weight: 700; color: var(--text-2); }
.cbs-dl dd { margin: 0; overflow-wrap: anywhere; }
.hoy-cerebro-solo { margin-top: 8px; }
@media (max-width: 420px) {
  .cbs-card { padding: 16px 16px 12px; }
  .cbs-acciones .in-btn { flex: 1 1 auto; }
  .cbs-acciones .ghost { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cbs-pila > .cbs-card:not(.cbs-fondo) { animation: none; }
}