/* @overa/ui-kit 0.53.0 · estilos de js/drilldown.js (FB-330, SUITE-CONSOLAS §5.1). Con las variables del kit (--bg2, --bd, --tx,
   --dim, --a) y, si la app no las trae, estos valores. El rojo y el ámbar son SOLO para alertas (`.ov-dd-crit`, `.ov-dd-warn`);
   los tipos de trabajo llevan la misma paleta en toda la suite. Todo se distingue también sin color (relleno, borde, punteado y
   la cifra escrita) y cada enlace tiene foco visible y un objetivo de al menos 24 px (WCAG 2.2 AA). */

.ov-dd { --dd-bd: var(--bd, #d8dee8); --dd-surface: var(--bg2, #ffffff); --dd-surface-2: var(--bg3, #f1f5f9); --dd-ink: var(--tx, #0f172a); --dd-muted: var(--dim, #475569); --dd-accent: var(--a, #1d4ed8);
  --dd-crit: #b91c1c; --dd-warn: #b45309; color: var(--dd-ink); }

/* los colores por tipo: texto blanco sobre `--c` (≥ 4,5:1) y, con borde, `--c` sobre el fondo; en oscuro, el borde más claro */
.ov-dd-t-fix { --c: #2563eb; --c-dark: #60a5fa; }
.ov-dd-t-change { --c: #0f766e; --c-dark: #2dd4bf; }
.ov-dd-t-task { --c: #64748b; --c-dark: #94a3b8; }
.ov-dd-t-study { --c: #7c3aed; --c-dark: #a78bfa; }
.ov-dd-t-spec { --c: #0e7490; --c-dark: #22d3ee; }
.ov-dd-t-answer { --c: #15803d; --c-dark: #4ade80; }
.ov-dd-t-none { --c: #475569; --c-dark: #cbd5e1; }

.ov-dd a { color: var(--dd-accent); }
.ov-dd a:focus-visible, .ov-dd [tabindex]:focus-visible { outline: 3px solid var(--dd-accent); outline-offset: 2px; border-radius: 4px; }
.ov-dd-muted { color: var(--dd-muted); font-size: 0.9rem; }
.ov-dd-block { display: block; }
.ov-dd-title { margin: 12px 0 6px; font-size: 1rem; }

/* migas */
.ov-dd-crumbs { margin: 4px 0 10px; }
.ov-dd-crumb-list { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.ov-dd-crumb + .ov-dd-crumb::before { content: '›'; margin: 0 8px; color: var(--dd-muted); }
.ov-dd-crumb a { display: inline-block; min-height: 24px; line-height: 24px; }
.ov-dd-here { font-weight: 600; }

/* lo que pide atención y las cifras: tarjetas que son enlaces */
.ov-dd-cards { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 12px; }
.ov-dd-card { display: flex; flex-direction: column; gap: 2px; min-width: 120px; padding: 10px 14px; border: 1px solid var(--dd-bd); border-radius: 8px;
  background: var(--dd-surface); color: var(--dd-ink); text-decoration: none; }
a.ov-dd-card:hover { border-color: var(--dd-accent); }
.ov-dd-card-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.ov-dd-card-text { font-size: 0.9rem; color: var(--dd-muted); }
.ov-dd-card.ov-dd-crit { border-left: 6px solid var(--dd-crit); }
.ov-dd-card.ov-dd-warn { border-left: 6px solid var(--dd-warn); }
.ov-dd-card.ov-dd-crit .ov-dd-card-value { color: var(--dd-crit); }
.ov-dd-card.ov-dd-warn .ov-dd-card-value { color: var(--dd-warn); }

/* zoom, leyenda y chip */
.ov-dd-zoom, .ov-dd-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.ov-dd-zoom-link, .ov-dd-key, .ov-dd-clear { display: inline-block; min-height: 24px; line-height: 24px; padding: 0 8px; border-radius: 6px; text-decoration: none; }
.ov-dd-zoom-link { border: 1px solid var(--dd-bd); }
.ov-dd-zoom-link[aria-current='true'] { background: var(--dd-accent); border-color: var(--dd-accent); color: #fff; font-weight: 600; }
.ov-dd .ov-dd-zoom-link[aria-current='true'] { color: #fff; }
.ov-dd-key { border: 1px solid var(--dd-bd); border-left: 12px solid var(--c); color: var(--dd-ink); }
.ov-dd .ov-dd-key { color: var(--dd-ink); }
.ov-dd-key[aria-current='true'] { background: var(--dd-surface-2); font-weight: 700; text-decoration: underline; }
.ov-dd-chip { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0; padding: 2px 4px 2px 10px; border: 1px solid var(--dd-bd); border-radius: 999px; background: var(--dd-surface-2); }
.ov-dd-chip-x { display: inline-block; min-width: 24px; min-height: 24px; line-height: 24px; text-align: center; border-radius: 50%; text-decoration: none; font-weight: 700; }

/* barra de tiempo */
.ov-dd-scroll { overflow-x: auto; max-width: 100%; margin: 8px 0; }
.ov-dd-time { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.ov-dd-time th, .ov-dd-time td { border-bottom: 1px solid var(--dd-bd); padding: 6px 8px; text-align: left; vertical-align: top; }
.ov-dd-time thead th { white-space: nowrap; color: var(--dd-muted); font-weight: 600; }
.ov-dd-time .ov-dd-rowname { min-width: 180px; font-weight: 500; }
.ov-dd-time .ov-dd-today { background: var(--dd-surface-2); box-shadow: inset 3px 0 0 var(--dd-ink); }
.ov-dd-time .ov-dd-future { color: var(--dd-muted); }
.ov-dd-all { margin-left: 6px; font-size: 0.8rem; }
.ov-dd-bar { display: flex; flex-wrap: wrap; gap: 2px; margin: 2px 0; }
.ov-dd-cell { display: block; text-decoration: none; }
.ov-dd-seg { min-width: 24px; min-height: 24px; line-height: 20px; padding: 1px 6px; border-radius: 4px; font-size: 0.85rem; text-align: center; box-sizing: border-box; }
/* hecho: relleno */
.ov-dd-done .ov-dd-seg { background: var(--c); color: #fff; border: 2px solid var(--c); }
/* planificado: borde, sin relleno */
.ov-dd-planned .ov-dd-seg { background: transparent; color: var(--dd-ink); border: 2px solid var(--c); }
/* periódico que viene: punteado */
.ov-dd-recurring { display: inline-block; min-height: 24px; line-height: 20px; border: 2px dotted var(--dd-muted); border-radius: 4px; padding: 1px 6px; font-size: 0.85rem; box-sizing: border-box; }
.ov-dd-horizon { display: inline-block; margin: 0 4px 2px 0; padding: 1px 8px; border-radius: 10px; background: var(--dd-surface-2); font-size: 0.85rem; }

@media (prefers-color-scheme: dark) {
  .ov-dd { --dd-crit: #f87171; --dd-warn: #fbbf24; }
  .ov-dd-planned .ov-dd-seg, .ov-dd-key { border-color: var(--c-dark); }
  .ov-dd-key { border-left-color: var(--c-dark); }
  .ov-dd-time .ov-dd-today { box-shadow: inset 3px 0 0 var(--dd-ink); }
}
@media (prefers-reduced-motion: reduce) { .ov-dd * { transition: none !important; } }