/* site.css — project-specific overrides (base styles in olvidata-theme.css) */

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(43, 157, 228, .3);
}

/* Smooth page transitions */
main {
  animation: fadeIn 250ms ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   Sistema de formularios (alta / edicion / detalle)
   Copiado de la-platense (FerreteriaLaPlatense.Web/wwwroot/css/site.css) — M2, D-5.
   Ver 25-frontend-design-system.instructions.md, seccion "Formularios".
   ========================================================================= */

/* Ancho de lectura. Un formulario estirado a 2500px en un monitor ancho deja
   los labels a la izquierda y los inputs perdidos a la derecha: ilegible. */
.ov-form-page      { max-width: 1080px; }
.ov-form-page--wide { max-width: 1500px; }

/* Encabezado de pantalla: titulo + descripcion + acciones secundarias. */
.ov-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.ov-page-head__title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--ov-gray-900);
}

.ov-page-head__desc {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--ov-text-muted);
  max-width: 70ch;
}

.ov-page-head__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Barra de acciones del formulario. Sticky: el boton Guardar siempre a la vista. */
.ov-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  padding: 0.875rem 1rem;
  margin-top: 1.25rem;
  background: var(--ov-surface);
  border: 1px solid var(--ov-border);
  border-radius: 0.5rem;
  box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06);
}

/* Empuja lo que venga despues hacia la derecha (ej. un boton de baja). */
.ov-form-actions__spacer { margin-left: auto; }

/* Marca de campo obligatorio. Se pone en el <label>. */
.ov-required::after {
  content: " *";
  color: var(--ov-danger);
  font-weight: 600;
}

/* Ayuda debajo de un campo: por que existe o que formato espera. */
.ov-field-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--ov-text-muted);
}

/* Pares etiqueta/valor de las pantallas de Detalle (solo lectura). */
.ov-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 1.5rem;
}

.ov-detail-item--full { grid-column: 1 / -1; }

.ov-detail-item__label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ov-text-muted);
  margin-bottom: 0.125rem;
}

.ov-detail-item__value {
  font-size: 0.9375rem;
  color: var(--ov-gray-900);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* Valor vacio: que se note que no hay dato, en vez de una celda en blanco. */
.ov-detail-item__value--empty {
  color: var(--ov-gray-400);
  font-weight: 400;
  font-style: italic;
}

@media (max-width: 575.98px) {
  .ov-page-head { flex-direction: column; align-items: stretch; }
  .ov-form-actions { padding: 0.75rem; }
  .ov-form-actions .btn { flex: 1 1 auto; }
}

/* El resumen de validacion ModelOnly se renderiza siempre; sin errores no tiene que verse la caja roja vacia. */
.validation-summary-valid.alert { display: none; }

/* Importes: el signo nunca queda en una linea y el numero en otra (regla 25). */
.ov-monto { white-space: nowrap; }

[data-theme="dark"] .ov-page-head__title,
[data-theme="dark"] .ov-detail-item__value { color: var(--ov-gray-100, #f1f5f9); }

/* ── Tema oscuro para widgets de librerías (QA M2, auto-fix OLV-001) ─────────
   Select2 y daterangepicker dibujan su propio markup: el override de .form-select del theme no los alcanza. */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
  background-color: var(--ov-surface);
  border-color: var(--ov-border);
  color: var(--ov-text);
}
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: var(--ov-text); }
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder { color: var(--ov-text-muted); }
[data-theme="dark"] .select2-container--bootstrap-5.select2-container--focus .select2-selection,
[data-theme="dark"] .select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--ov-primary);
  box-shadow: 0 0 0 0.2rem rgba(43, 157, 228, 0.25);
}
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
  background-color: var(--ov-surface);
  border-color: var(--ov-border);
  color: var(--ov-text);
}
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
  background-color: var(--ov-bg);
  border-color: var(--ov-border);
  color: var(--ov-text);
}
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option { color: var(--ov-text); }
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
  background-color: rgba(43, 157, 228, 0.15);
  color: var(--ov-text);
}
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
  background-color: var(--ov-primary);
  color: #fff;
}
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__message { color: var(--ov-text-muted); }
/* QA M5 (extensión OLV-001): chips de Select2 múltiple (documentos para la tarea, etiquetas de reglas). El theme de bootstrap-5
   les deja texto #212529 sobre fondo transparente y la X en negro: en oscuro no se leían (contraste 1,05). */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  color: var(--ov-text);
  border-color: var(--ov-border);
  background-color: rgba(148, 163, 184, 0.12);
}
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
  filter: invert(1) grayscale(100%) brightness(200%);
}
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field { color: var(--ov-text); }
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field::placeholder { color: var(--ov-text-muted); }

[data-theme="dark"] .daterangepicker {
  background-color: var(--ov-surface);
  border-color: var(--ov-border);
  color: var(--ov-text);
}
[data-theme="dark"] .daterangepicker::before { border-bottom-color: var(--ov-border); }
[data-theme="dark"] .daterangepicker::after { border-bottom-color: var(--ov-surface); }
[data-theme="dark"] .daterangepicker.drop-up::before { border-top-color: var(--ov-border); }
[data-theme="dark"] .daterangepicker.drop-up::after { border-top-color: var(--ov-surface); }
[data-theme="dark"] .daterangepicker .calendar-table {
  background-color: var(--ov-surface);
  border-color: var(--ov-surface);
}
[data-theme="dark"] .daterangepicker .calendar-table .next span,
[data-theme="dark"] .daterangepicker .calendar-table .prev span { border-color: var(--ov-text); }
[data-theme="dark"] .daterangepicker td.off,
[data-theme="dark"] .daterangepicker td.off.in-range,
[data-theme="dark"] .daterangepicker td.off.start-date,
[data-theme="dark"] .daterangepicker td.off.end-date {
  background-color: transparent;
  color: var(--ov-text-muted);
}
[data-theme="dark"] .daterangepicker td.available:hover,
[data-theme="dark"] .daterangepicker th.available:hover {
  background-color: rgba(43, 157, 228, 0.15);
  color: var(--ov-text);
}
[data-theme="dark"] .daterangepicker td.in-range {
  background-color: rgba(43, 157, 228, 0.2);
  color: var(--ov-text);
}
[data-theme="dark"] .daterangepicker td.active,
[data-theme="dark"] .daterangepicker td.active:hover {
  background-color: var(--ov-primary);
  color: #fff;
}
[data-theme="dark"] .daterangepicker select.monthselect,
[data-theme="dark"] .daterangepicker select.yearselect {
  background-color: var(--ov-bg);
  border-color: var(--ov-border);
  color: var(--ov-text);
}
[data-theme="dark"] .daterangepicker .drp-buttons,
[data-theme="dark"] .daterangepicker.show-ranges.ltr .drp-calendar.left { border-color: var(--ov-border); }

/* ── Tema oscuro para alertas y badges de fondo claro (QA M3b, auto-fix OLV-002) ─────────
   El theme oscurece los fondos --ov-*-subtle (rgba .15) pero .ov-alert conserva texto oscuro, y
   [data-theme=dark] .text-dark (!important) deja blanco el texto de los badges celeste/amarillo. */
[data-theme="dark"] .ov-alert.info    { color: #67e8f9; }
[data-theme="dark"] .ov-alert.success { color: #86efac; }
[data-theme="dark"] .ov-alert.warning { color: #fcd34d; }
[data-theme="dark"] .ov-alert.danger  { color: #fca5a5; }
[data-theme="dark"] .ov-alert a { color: inherit; text-decoration: underline; }
[data-theme="dark"] .badge.bg-info.text-dark,
[data-theme="dark"] .badge.bg-warning.text-dark { color: #0f172a !important; }

/* ── M3b: conversación de una tarea (P-M3b-01) ─────────────────────────────── */
.ov-chat { display: flex; flex-direction: column; gap: 1rem; }
.ov-chat-msg { display: flex; gap: .75rem; align-items: flex-start; }
.ov-chat-msg--persona { flex-direction: row-reverse; }
.ov-chat-avatar {
  flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 600;
  background: rgba(var(--ov-primary-rgb), .15); color: var(--ov-primary);
}
.ov-chat-msg--agente .ov-chat-avatar { background: var(--ov-surface); border: 1px solid var(--ov-border); color: var(--ov-text-muted); }
.ov-chat-burbuja {
  min-width: 0; max-width: min(48rem, 100%); padding: .75rem 1rem; border-radius: .75rem;
  background: var(--ov-surface); border: 1px solid var(--ov-border);
}
.ov-chat-msg--persona .ov-chat-burbuja { background: rgba(var(--ov-primary-rgb), .08); border-color: rgba(var(--ov-primary-rgb), .25); }
.ov-chat-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; font-size: .8rem; color: var(--ov-text-muted); margin-bottom: .35rem; }
.ov-chat-meta strong { color: var(--ov-text); }
.ov-chat-meta__acciones { margin-left: auto; }
.ov-chat-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Respuesta del agente en Markdown dibujado: el HTML ya trae los saltos, sin pre-wrap. */
.ov-chat-texto.ov-md { white-space: normal; line-height: 1.55; }
.ov-md > :first-child { margin-top: 0; }
.ov-md > :last-child { margin-bottom: 0; }
.ov-md h1, .ov-md h2, .ov-md h3, .ov-md h4, .ov-md h5, .ov-md h6 { font-weight: 600; line-height: 1.3; margin: 1.1rem 0 .5rem; color: var(--ov-text); }
.ov-md h1 { font-size: 1.35rem; } .ov-md h2 { font-size: 1.2rem; } .ov-md h3 { font-size: 1.08rem; }
.ov-md h4, .ov-md h5, .ov-md h6 { font-size: 1rem; }
.ov-md p, .ov-md ul, .ov-md ol, .ov-md blockquote, .ov-md pre, .ov-md table { margin: 0 0 .75rem; }
.ov-md ul, .ov-md ol { padding-left: 1.4rem; }
.ov-md li { margin-bottom: .2rem; }
.ov-md li > ul, .ov-md li > ol { margin: .2rem 0 0; }
.ov-md blockquote { border-left: 3px solid rgba(var(--ov-primary-rgb), .5); padding: .25rem 0 .25rem .75rem; color: var(--ov-text-muted); }
.ov-md code { font-family: var(--ov-font-mono); font-size: .85em; background: rgba(var(--ov-primary-rgb), .08); padding: .1em .35em; border-radius: 4px; }
.ov-md pre { background: var(--ov-bg); border: 1px solid var(--ov-border); border-radius: 6px; padding: .75rem; overflow-x: auto; }
.ov-md pre code { background: none; padding: 0; font-size: .82rem; }
.ov-md table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .9rem; }
.ov-md th, .ov-md td { border: 1px solid var(--ov-border); padding: .35rem .6rem; text-align: left; vertical-align: top; }
.ov-md th { background: var(--ov-bg); font-weight: 600; }
.ov-md hr { border: 0; border-top: 1px solid var(--ov-border); margin: 1rem 0; opacity: 1; }
.ov-md a { color: var(--ov-primary); text-decoration: underline; }
.ov-md input[type=checkbox] { margin-right: .35rem; }
.ov-chat-nota { font-size: .875rem; color: var(--ov-text-muted); padding-left: 3rem; }
.ov-chat-pasos { margin-top: .5rem; font-size: .85rem; }
.ov-chat-pasos summary { cursor: pointer; color: var(--ov-text-muted); }
.ov-chat-paso { padding: .5rem 0; border-top: 1px dashed var(--ov-border); }
@media (max-width: 767.98px) {
  .ov-cuadro-seguimiento { position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -4px 12px rgba(0, 0, 0, .08); }
  .ov-chat-nota { padding-left: 0; }
}

/* ── M4: agentes de la organización y sugerencias (P-M4-01..08) ─────────────
   Badges neutros con tokens del theme (se invierten solos en tema oscuro), en vez de bg-light + text-dark. */
.badge.ov-badge-neutro {
  background-color: var(--ov-surface);
  color: var(--ov-text, #0f172a);
  border: 1px solid var(--ov-border);
  font-weight: 500;
}
/* QA M4 (OLV-003): la atenuación va en lo decorativo; el motivo "No disponible" queda con opacidad plena y rojo AA. */
.ov-card-atenuada strong, .ov-card-atenuada .badge, .ov-card-atenuada p.text-muted { opacity: .72; }
.ov-motivo-no-disponible { color: #b91c1c; }
.ov-agente-acciones .dropdown-toggle::after { display: none; }
.ov-texto-sugerencia { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 14rem; overflow-y: auto; }

/* Tema oscuro (lección OLV-002): texto de alerta claro, badges bg-light legibles (etiquetas de reglas) y cruz de modales visible. */
[data-theme="dark"] .ov-motivo-no-disponible { color: #fca5a5; }
[data-theme="dark"] .badge.bg-light.text-dark {
  background-color: var(--ov-surface) !important;
  color: var(--ov-text) !important;
  border-color: var(--ov-border) !important;
}
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
/* QA M4 (OLV-003): acciones rojas de menús (Archivar, Cerrar sesión) legibles en tema oscuro. */
[data-theme="dark"] .dropdown-item.text-danger { color: #fca5a5 !important; }

/* ── M4b: tarjetas de propuesta del configurador (P-M4b-04, D-M4b-4) ───────────
   Solo tokens del theme (se invierten en tema oscuro). Texto siempre con opacidad plena (lección OLV-003): el estado
   se marca con el borde izquierdo y el badge, nunca atenuando el texto. */
.ov-propuestas { display: flex; flex-direction: column; gap: .75rem; padding-left: 3rem; }
.ov-propuestas__barra { display: flex; justify-content: flex-end; }
.ov-propuesta { border-left: 3px solid var(--ov-primary); max-width: min(48rem, 100%); }
.ov-propuesta--aplicada { border-left-color: var(--ov-success); }
.ov-propuesta--descartada { border-left-color: var(--ov-text-muted); }
.ov-propuesta--fallida { border-left-color: var(--ov-danger); }
.ov-propuesta__tipo { font-weight: 600; color: var(--ov-text); overflow-wrap: anywhere; }
/* Íconos: el azul de marca da 2,98:1 sobre blanco; en claro va el hover de marca (3,75:1), en oscuro la marca (4,91:1). */
.ov-propuesta__tipo i { color: #1f8ad0; }
.ov-propuesta__donde { font-size: .875rem; color: var(--ov-text-muted); }
.ov-propuesta__donde strong { color: var(--ov-text); font-weight: 600; }
.ov-propuesta__texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.ov-propuesta__version { border: 1px solid var(--ov-border); border-radius: .5rem; padding: .5rem .75rem; }
.ov-propuesta__version--despues { border-color: rgba(var(--ov-primary-rgb), .45); }
.ov-propuesta__rotulo { display: block; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ov-text-muted); margin-bottom: .25rem; }
.ov-propuesta__porque { font-size: .875rem; color: var(--ov-text); background: var(--ov-primary-subtle); border-radius: .5rem; padding: .4rem .6rem; }
.ov-propuesta__porque i { color: #1f8ad0; }
[data-theme="dark"] .ov-propuesta__tipo i,
[data-theme="dark"] .ov-propuesta__porque i { color: var(--ov-primary); }
.ov-propuesta details summary { cursor: pointer; color: var(--ov-text-muted); }
@media (max-width: 767.98px) {
  .ov-propuestas { padding-left: 0; }
}

/* ── M5: documentos por cliente de cartera (P-M5-01..08, D-M5-4) ──────────────
   Solo tokens del theme. El estado de lectura va siempre con ícono + texto; colores de texto con contraste AA en ambos temas
   (claro: verde 5,0 · ámbar 7,1 · gris 7,6 · rojo 6,5 sobre blanco; oscuro: variantes claras sobre #1e293b). */
.ov-dropzone {
  border: 2px dashed var(--ov-border); border-radius: var(--ov-radius-lg); padding: 1.5rem 1rem; text-align: center;
  background: var(--ov-surface); color: var(--ov-text); transition: border-color var(--ov-transition), background-color var(--ov-transition);
}
.ov-dropzone--activa { border-color: var(--ov-primary); background: rgba(var(--ov-primary-rgb), .06); }
.ov-dropzone__icono { font-size: 1.75rem; color: #1f8ad0; }
.ov-dropzone__hint { color: var(--ov-text-muted); font-size: .875rem; margin-bottom: 0; }
.ov-cola-subida { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.ov-cola-subida__fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; padding: .5rem .75rem; border: 1px solid var(--ov-border); border-radius: var(--ov-radius); background: var(--ov-surface); }
.ov-cola-subida__nombre { font-weight: 500; overflow-wrap: anywhere; color: var(--ov-text); }
.ov-cola-subida__fila .progress { height: .4rem; }
.ov-cola-subida__resultado { color: var(--ov-text-muted); }
.ov-cola-subida__resultado--success, .ov-lectura--legible { color: #15803d; }
.ov-cola-subida__resultado--warning, .ov-lectura--parcial { color: #92400e; }
.ov-cola-subida__resultado--error, .ov-lectura--error { color: #b91c1c; }
.ov-lectura--no-legible { color: var(--ov-gray-600); }
.ov-lectura { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; }
.ov-tipo-doc { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.ov-tipo-doc i { width: 1.1rem; text-align: center; color: #1f8ad0; }
.ov-parte-texto {
  white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--ov-font-mono); font-size: .8125rem; max-height: 60vh; overflow-y: auto;
  background: var(--ov-bg); color: var(--ov-text); border: 1px solid var(--ov-border); border-radius: var(--ov-radius); padding: .75rem 1rem; margin: 0;
}
.ov-chips-adjuntos { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.ov-chip-adjunto {
  display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .2rem .6rem; border-radius: var(--ov-radius-full);
  border: 1px solid var(--ov-border); background: var(--ov-surface); color: var(--ov-text); font-size: .8125rem; text-decoration: none; overflow-wrap: anywhere;
}
a.ov-chip-adjunto:hover, a.ov-chip-adjunto:focus { border-color: var(--ov-primary); color: var(--ov-text); text-decoration: underline; }
.ov-chip-adjunto--baja { color: var(--ov-text-muted); border-style: dashed; }
.ov-chip-adjunto__quitar { border: 0; background: transparent; color: var(--ov-text-muted); padding: 0 0 0 .15rem; line-height: 1; }
.ov-chip-adjunto__quitar:hover { color: var(--ov-text); }
.ov-espacio { min-width: 16rem; }
.ov-espacio .progress { height: .5rem; }
.ov-espacio__texto { font-size: .8125rem; color: var(--ov-text-muted); }
.ov-doc-opciones { max-height: 50vh; overflow-y: auto; border: 1px solid var(--ov-border); border-radius: var(--ov-radius); }
.ov-doc-opcion { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: 1px solid var(--ov-border); cursor: pointer; margin: 0; color: var(--ov-text); }
.ov-doc-opcion:last-child { border-bottom: 0; }
.ov-doc-opcion__nombre { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ov-doc-opcion i.fas:not(.ov-lectura i) { color: #1f8ad0; }
.ov-doc-card-lista { list-style: none; padding: 0; margin: 0; }
.ov-doc-card-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .5rem 0; border-bottom: 1px solid var(--ov-border); }
.ov-doc-card-lista li:last-child { border-bottom: 0; }
.ov-doc-card-lista__nombre { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.ov-paso-resumen { color: var(--ov-text); }
/* Enlaces y botones-enlace nuevos (lección OLV-004): la marca da 2,98:1 sobre blanco; en claro #1a78b8 (4,74:1), en oscuro la marca. */
.ov-enlace-accion, .btn-link.ov-enlace-accion { color: #1a78b8; }
.ov-enlace-accion:hover, .btn-link.ov-enlace-accion:hover { color: #155f93; }
[data-theme="dark"] .ov-enlace-accion, [data-theme="dark"] .btn-link.ov-enlace-accion { color: var(--ov-primary); }
[data-theme="dark"] .ov-enlace-accion:hover, [data-theme="dark"] .btn-link.ov-enlace-accion:hover { color: #7cc4f0; }
.ov-paso-resumen details summary { color: var(--ov-text-muted); }
[data-theme="dark"] .ov-dropzone__icono,
[data-theme="dark"] .ov-tipo-doc i,
[data-theme="dark"] .ov-doc-opcion i.fas:not(.ov-lectura i) { color: var(--ov-primary); }
[data-theme="dark"] .ov-cola-subida__resultado--success, [data-theme="dark"] .ov-lectura--legible { color: #86efac; }
[data-theme="dark"] .ov-cola-subida__resultado--warning, [data-theme="dark"] .ov-lectura--parcial { color: #fcd34d; }
[data-theme="dark"] .ov-cola-subida__resultado--error, [data-theme="dark"] .ov-lectura--error { color: #fca5a5; }
[data-theme="dark"] .ov-lectura--no-legible { color: var(--ov-text-muted); }
[data-theme="dark"] .progress { background-color: var(--ov-bg); }
@media (max-width: 575.98px) {
  .ov-espacio { min-width: 0; width: 100%; }
}

/* ── M6: consumo, límites de gasto y aprobaciones (D-M6-3/8, DI-M5-17) ─────────
   Colores de texto con contraste AA en ambos temas (claro: verde #15803d 5,0 · ámbar #92400e 7,1 · rojo #b91c1c 6,5 sobre blanco;
   oscuro: #86efac · #fcd34d · #fca5a5 sobre #1e293b). Estado siempre con ícono + texto; la barra solo acompaña. */
.ov-barra-gasto .progress { height: .6rem; }
.ov-barra-gasto__monto { font-size: 1.25rem; font-weight: 600; color: var(--ov-text); }
.ov-barra-gasto__detalle { font-size: .875rem; color: var(--ov-text-muted); }
.ov-barra-gasto--normal .progress-bar { background-color: #15803d; }
.ov-barra-gasto--aviso .progress-bar { background-color: #b45309; }
.ov-barra-gasto--alcanzado .progress-bar { background-color: #b91c1c; }
.ov-nivel-gasto--normal { color: #15803d; }
.ov-nivel-gasto--aviso { color: #92400e; }
.ov-nivel-gasto--alcanzado { color: #b91c1c; }
[data-theme="dark"] .ov-barra-gasto--normal .progress-bar { background-color: #22c55e; }
[data-theme="dark"] .ov-barra-gasto--aviso .progress-bar { background-color: #f59e0b; }
[data-theme="dark"] .ov-barra-gasto--alcanzado .progress-bar { background-color: #ef4444; }
[data-theme="dark"] .ov-nivel-gasto--normal { color: #86efac; }
[data-theme="dark"] .ov-nivel-gasto--aviso { color: #fcd34d; }
[data-theme="dark"] .ov-nivel-gasto--alcanzado { color: #fca5a5; }
.ov-nivel-gasto { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; white-space: nowrap; }
.ov-tabla-consumo td, .ov-tabla-consumo th { vertical-align: middle; }
.ov-tabla-consumo__nombre { overflow-wrap: anywhere; }
.ov-contador-menu {
  margin-left: auto; min-width: 1.35rem; padding: .05rem .4rem; border-radius: var(--ov-radius-full); background: #b91c1c; color: #fff;
  font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.25rem;
}
.ov-aprobaciones { display: flex; flex-direction: column; gap: .75rem; padding-left: 3rem; }
.ov-aprobacion { border-left: 3px solid #b45309; max-width: min(48rem, 100%); }
.ov-aprobacion--aprobada { border-left-color: var(--ov-success); }
.ov-aprobacion--rechazada { border-left-color: var(--ov-danger); }
.ov-aprobacion--vencida, .ov-aprobacion--cancelada { border-left-color: var(--ov-text-muted); }
.ov-aprobacion__titulo { font-weight: 600; color: var(--ov-text); }
.ov-aprobacion__titulo i { color: #92400e; }
.ov-aprobacion__descripcion { font-weight: 600; color: var(--ov-text); overflow-wrap: anywhere; }
.ov-aprobacion__meta { font-size: .8125rem; color: var(--ov-text-muted); }
.ov-aprobacion details summary { cursor: pointer; color: var(--ov-text-muted); }
.ov-aprobacion__datos { display: grid; grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr); gap: .15rem .75rem; margin: .5rem 0 0; font-size: .875rem; }
.ov-aprobacion__datos dt { font-weight: 600; color: var(--ov-text); }
.ov-aprobacion__datos dd { margin: 0; color: var(--ov-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.ov-aprobacion-estado { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; }
.ov-aprobacion-estado--aprobada { color: #15803d; }
.ov-aprobacion-estado--rechazada { color: #b91c1c; }
.ov-aprobacion-estado--pendiente { color: #92400e; }
.ov-aprobacion-estado--vencida, .ov-aprobacion-estado--cancelada { color: var(--ov-gray-600); }
[data-theme="dark"] .ov-aprobacion__titulo i, [data-theme="dark"] .ov-aprobacion-estado--pendiente { color: #fcd34d; }
[data-theme="dark"] .ov-aprobacion-estado--aprobada { color: #86efac; }
[data-theme="dark"] .ov-aprobacion-estado--rechazada { color: #fca5a5; }
[data-theme="dark"] .ov-aprobacion-estado--vencida, [data-theme="dark"] .ov-aprobacion-estado--cancelada { color: var(--ov-text-muted); }
/* M7a (D-M7-2, D-M7-23): tarjetas de parte y badge "Esperando a otros agentes" con los tokens verificados de DI-M5-17. */
.ov-partes { display: flex; flex-direction: column; gap: .75rem; padding-left: 3rem; }
.ov-parte { border-left: 3px solid #1a78b8; max-width: min(48rem, 100%); }
.ov-parte--completada { border-left-color: var(--ov-success); }
.ov-parte--fallida { border-left-color: var(--ov-danger); }
.ov-parte--cancelada { border-left-color: var(--ov-text-muted); }
.ov-parte--esperandoaprobacion { border-left-color: #b45309; }
.ov-parte__titulo { font-weight: 600; color: var(--ov-text); }
.ov-parte__pedido, .ov-parte__respuesta { color: var(--ov-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.ov-parte__pedido { margin-bottom: .5rem; }
.ov-parte details summary { cursor: pointer; color: var(--ov-text-muted); }
.ov-parte-estado { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; }
.ov-parte-estado--cola, .ov-parte-estado--cancelada { color: var(--ov-gray-600); }
.ov-parte-estado--curso { color: #1a78b8; }
.ov-parte-estado--espera { color: #92400e; }
.ov-parte-estado--ok { color: #15803d; }
.ov-parte-estado--error { color: #b91c1c; }
.ov-badge-espera-agentes { background-color: #e0f2fe; color: #075985; }
[data-theme="dark"] .ov-parte-estado--cola, [data-theme="dark"] .ov-parte-estado--cancelada { color: var(--ov-text-muted); }
[data-theme="dark"] .ov-parte-estado--curso { color: #7dd3fc; }
[data-theme="dark"] .ov-parte-estado--espera { color: #fcd34d; }
[data-theme="dark"] .ov-parte-estado--ok { color: #86efac; }
[data-theme="dark"] .ov-parte-estado--error { color: #fca5a5; }
[data-theme="dark"] .ov-badge-espera-agentes { background-color: #0c4a6e; color: #e0f2fe; }
@media (max-width: 767.98px) {
  .ov-partes { padding-left: 0; }
}

.ov-vence-proximo { color: #b91c1c; font-weight: 600; }
[data-theme="dark"] .ov-vence-proximo { color: #fca5a5; }
@media (max-width: 767.98px) {
  .ov-aprobaciones { padding-left: 0; }
  .ov-aprobacion__datos { grid-template-columns: minmax(0, 1fr); }
}

/* M7b (D-M7-14, D-M7-23): estados de una asignación y badge "Vencida", con los tokens verificados de DI-M5-17.
   Siempre ícono + TEXTO: el color nunca es la única señal. */
.ov-asignacion-estado { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; white-space: nowrap; }
.ov-asignacion-estado--pendiente, .ov-asignacion-estado--cancelada { color: var(--ov-gray-600); }
.ov-asignacion-estado--curso { color: #1a78b8; }
.ov-asignacion-estado--hecha { color: #15803d; }
.ov-asignacion-vencida { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: #b91c1c; white-space: nowrap; }
[data-theme="dark"] .ov-asignacion-estado--pendiente, [data-theme="dark"] .ov-asignacion-estado--cancelada { color: var(--ov-text-muted); }
[data-theme="dark"] .ov-asignacion-estado--curso { color: #7dd3fc; }
[data-theme="dark"] .ov-asignacion-estado--hecha { color: #86efac; }
[data-theme="dark"] .ov-asignacion-vencida { color: #fca5a5; }

/* M12 (D-M12-4): estado de una programación y resultado de cada vuelta. Mismos tokens verificados de DI-M5-17 y la misma
   regla de siempre: ícono + TEXTO, el color nunca es la única señal. */
.ov-prog-estado { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; white-space: nowrap; }
.ov-prog-estado.activa { color: #15803d; }
.ov-prog-estado.pausada { color: #92400e; }
.ov-prog-estado.terminada { color: var(--ov-gray-600); }
.ov-prog-vuelta { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; white-space: nowrap; }
.ov-prog-vuelta.ok { color: #15803d; }
.ov-prog-vuelta.espera { color: #1a78b8; }
.ov-prog-vuelta.falla { color: #b91c1c; }
[data-theme="dark"] .ov-prog-estado.activa { color: #86efac; }
[data-theme="dark"] .ov-prog-estado.pausada { color: #fcd34d; }
[data-theme="dark"] .ov-prog-estado.terminada { color: var(--ov-text-muted); }
[data-theme="dark"] .ov-prog-vuelta.ok { color: #86efac; }
[data-theme="dark"] .ov-prog-vuelta.espera { color: #7dd3fc; }
[data-theme="dark"] .ov-prog-vuelta.falla { color: #fca5a5; }

/* Lista de datos del detalle de una asignación (dos columnas en desktop, apilada en mobile). */
.ov-datos { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: .35rem .75rem; margin: 0; }
.ov-datos dt { font-weight: 600; color: var(--ov-text-muted); }
.ov-datos dd { margin: 0; overflow-wrap: anywhere; }
.ov-texto-largo { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .ov-datos { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .ov-datos dd { margin-bottom: .5rem; }
}

/* ── M8 Pruebas de prompts (D-M8-6, D-M8-23) ─────────────────────────────────────────────────
   Colores con los tokens verificados en DI-M5-17 (claro / oscuro). TODO estado lleva texto junto
   al ícono: nada se distingue solo por color. */
.ov-chip-prueba { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; white-space: nowrap; font-size: .85em; }
.ov-prueba--paso      { color: #15803d; }
.ov-prueba--fallo     { color: #b91c1c; }
.ov-prueba--aviso     { color: #92400e; }
.ov-prueba--pendiente { color: var(--ov-gray-600); }
.ov-prueba--nuevo     { color: #1a78b8; }
[data-theme="dark"] .ov-prueba--paso      { color: #86efac; }
[data-theme="dark"] .ov-prueba--fallo     { color: #fca5a5; }
[data-theme="dark"] .ov-prueba--aviso     { color: #fcd34d; }
[data-theme="dark"] .ov-prueba--pendiente { color: var(--ov-text-muted); }
[data-theme="dark"] .ov-prueba--nuevo     { color: var(--ov-brand, #7dd3fc); }

.ov-banner-prueba { border: 1px solid currentColor; border-radius: .5rem; padding: .75rem 1rem; }
.ov-banner-prueba .progress { background-color: rgba(127, 127, 127, .25); }

/* D-M8-6: bloque de texto que viene de un caso o de una respuesta. Puede traer intentos de engaño
   a propósito: se muestra SIEMPRE escapado por Razor, sin HTML interpretado y sin enlaces activos.
   Scroll horizontal propio para que no desborde la página en mobile (D-M8-24). */
.ov-texto-prueba { border: 1px dashed var(--ov-gray-400, #adb5bd); border-radius: .5rem; margin-bottom: .5rem; }
.ov-texto-prueba__rotulo { font-size: .78rem; color: #92400e; padding: .35rem .6rem; border-bottom: 1px dashed var(--ov-gray-400, #adb5bd); }
.ov-texto-prueba__cuerpo { margin: 0; padding: .6rem; white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto; max-height: 24rem; font-size: .85rem; }
[data-theme="dark"] .ov-texto-prueba__rotulo { color: #fcd34d; }

.ov-detalle-caso { border-left: 3px solid var(--ov-gray-300, #dee2e6); padding-left: .75rem; }

/* D-M8-24 mobile 390: la tabla de casos colapsa a tarjetas. */
@media (max-width: 575.98px) {
  .ov-tabla-casos thead { display: none; }
  .ov-tabla-casos tbody tr.ov-fila-caso { display: block; border-bottom: 1px solid var(--ov-gray-300, #dee2e6); padding: .5rem 0; }
  .ov-tabla-casos tbody tr.ov-fila-caso > td { display: block; border: 0; padding: .15rem .5rem; }
  .ov-tabla-casos tbody tr.ov-fila-detalle > td { display: block; border: 0; }
}

/* QA M8 (reincidencia de OLV-001) — el acordeón de la pantalla de casos es el ÚNICO uso de .accordion del portal.
   Bootstrap 5.1 le fija background-color: #fff a mano (no usa variables), así que en tema oscuro todo lo de adentro
   quedaba sobre blanco: el cuerpo del pedido 1,10, el rótulo de texto de prueba 1,44, los chips Seguridad 1,44 /
   Crítico 1,90 y los text-muted 2,56. Mismo criterio que los overrides de Select2 y daterangepicker. */
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .accordion-button,
[data-theme="dark"] .accordion-collapse {
  background-color: var(--ov-surface);
  color: var(--ov-text);
}
[data-theme="dark"] .accordion-item { border-color: var(--ov-border); }
[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: rgba(43, 157, 228, .15);
  color: var(--ov-text);
  box-shadow: none;
}
[data-theme="dark"] .accordion-button:focus { border-color: var(--ov-border); box-shadow: none; }
[data-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.8); }
[data-theme="dark"] .accordion .btn-link,
[data-theme="dark"] .card-header .btn-link { color: var(--ov-brand, #7dd3fc); }

/* QA M8 — D-M8-24: a 390 px el resumen de verificaciones del encabezado del caso no cortaba y empujaba la página
   a 445 px de ancho. El encabezado pasa a envolver. */
.accordion-button { flex-wrap: wrap; row-gap: .25rem; }
.accordion-button > span { min-width: 0; overflow-wrap: anywhere; }

/* ════════════════════════════════════════════════════════════════════════════
   M16 — Tablero de actividad (P-M16-01)
   ════════════════════════════════════════════════════════════════════════════ */

/* Los tres colores del gráfico. Verificados con el validador de paletas contra las dos superficies (#ffffff y
   #1e293b): banda de luminosidad, piso de croma, separación para daltonismo y contraste. El ámbar del cliente baja
   un paso en oscuro porque el claro se sale de la banda sobre #1e293b. La identidad NUNCA es solo color: cada tipo
   tiene además su forma (círculo / cuadrado / rombo) y su entrada en la leyenda. */
:root {
  --ov-grafo-persona: #8b5cf6;
  --ov-grafo-agente:  #2b9de4;
  --ov-grafo-cliente: #f59e0b;
}
[data-theme="dark"] {
  --ov-grafo-cliente: #d97706;
}

/* ── Listas de los bloques ────────────────────────────────────────────────── */
.ov-tablero-lista { list-style: none; margin: 0; padding: 0; }
.ov-tablero-item + .ov-tablero-item { border-top: 1px solid var(--ov-border); }
.ov-tablero-item__link {
  display: block;
  padding: .6rem .25rem;
  color: var(--ov-text);
  text-decoration: none;
  border-radius: var(--ov-radius-sm);
}
.ov-tablero-item__link:hover,
.ov-tablero-item__link:focus-visible { background: rgba(var(--ov-primary-rgb), .06); color: var(--ov-text); }
.ov-tablero-item--fila { display: flex; align-items: center; gap: .6rem; }
.ov-tablero-item--fila .ov-tablero-item__titulo { flex: 1 1 auto; }
.ov-tablero-item__titulo { display: block; font-weight: 600; overflow-wrap: anywhere; }
.ov-tablero-item--chico .ov-tablero-item__titulo { font-weight: 500; font-size: var(--ov-text-sm); }
.ov-tablero-item__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem;
  margin-top: .25rem; font-size: var(--ov-text-sm); color: var(--ov-text-muted);
}
.ov-tablero-vencida { color: #b91c1c; font-weight: 600; }
[data-theme="dark"] .ov-tablero-vencida { color: #fca5a5; }

.ov-tablero-pastilla {
  flex: 0 0 auto; min-width: 1.9rem; text-align: center;
  padding: .15rem .45rem; border-radius: var(--ov-radius-full);
  font-size: var(--ov-text-sm); font-weight: 700;
}
.ov-tablero-pastilla.primary { background: var(--ov-primary-subtle); color: #1a78b8; }
.ov-tablero-pastilla.warning { background: var(--ov-warning-subtle); color: #92400e; }
.ov-tablero-pastilla.danger  { background: var(--ov-danger-subtle);  color: #b91c1c; }
[data-theme="dark"] .ov-tablero-pastilla.primary { color: #7dd3fc; }
[data-theme="dark"] .ov-tablero-pastilla.warning { color: #fcd34d; }
[data-theme="dark"] .ov-tablero-pastilla.danger  { color: #fca5a5; }

.ov-tablero-avance {
  display: block; height: .25rem; margin-top: .4rem;
  background: var(--ov-gray-200); border-radius: var(--ov-radius-full); overflow: hidden;
}
[data-theme="dark"] .ov-tablero-avance { background: var(--ov-border); }
.ov-tablero-avance__barra { display: block; height: 100%; background: var(--ov-primary); }

.ov-tablero-sub {
  margin: .9rem 0 .35rem; font-size: var(--ov-text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ov-text-muted);
}
.ov-tablero-tabla { font-size: var(--ov-text-sm); }
.ov-tablero-tabla td, .ov-tablero-tabla th { padding: .35rem .5rem; }

/* D-M16-1: el bloque vacío también comunica. Nunca un recuadro en blanco. */
.ov-tablero-vacio { text-align: center; padding: 1.25rem .5rem; color: var(--ov-text-muted); }
.ov-tablero-vacio > i { font-size: 1.6rem; display: block; margin-bottom: .5rem; opacity: .5; }

/* ── El gráfico ───────────────────────────────────────────────────────────── */
.ov-tablero-grafo { position: sticky; top: calc(var(--ov-navbar-height) + 1rem); }
@media (max-width: 1199.98px) { .ov-tablero-grafo { position: static; } }

/* El SVG lo dimensiona el script en píxeles reales (sin viewBox): así el texto del dibujo mide lo que dice que mide,
   en el monitor y en el teléfono, y no hay una escala que haya que compensar a ojo. */
.ov-grafo { width: 100%; overflow: hidden; }
.ov-grafo svg { display: block; max-width: 100%; touch-action: manipulation; }

/* El rótulo de cada nivel. Siempre visible: cuatro columnas sin nombre son cuatro montones. */
.ov-grafo-rotulo-svg {
  font-size: 9.5px; fill: var(--ov-text-muted); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.ov-grafo-mas { font-size: 9.5px; fill: var(--ov-text-muted); font-style: italic; }

.ov-grafo-arista { stroke: var(--ov-gray-300); stroke-width: 1.5; fill: none; }
[data-theme="dark"] .ov-grafo-arista { stroke: var(--ov-border); }
.ov-grafo-arista--viva { stroke: var(--ov-primary); stroke-width: 2; }
.ov-grafo-arista--elegida { stroke: var(--ov-primary); stroke-width: 2.5; }
/* La de M7a es la única que no cambia de columna: punteada, para que se lea como un desvío y no como el camino. */
.ov-grafo-arista--ayuda { stroke-dasharray: 4 3; }
.ov-grafo-flecha { fill: var(--ov-gray-300); }
[data-theme="dark"] .ov-grafo-flecha { fill: var(--ov-border); }
.ov-grafo-flecha--viva { fill: var(--ov-primary); }

.ov-grafo-nodo { cursor: pointer; }
.ov-grafo-nodo:focus { outline: none; }
.ov-grafo-figura { stroke: var(--ov-surface); stroke-width: 2; }
.ov-grafo-nodo--persona .ov-grafo-figura { fill: var(--ov-grafo-persona); }
.ov-grafo-nodo--agente  .ov-grafo-figura { fill: var(--ov-grafo-agente); }
.ov-grafo-nodo--cliente .ov-grafo-figura { fill: var(--ov-grafo-cliente); }
/* La tarea es el eslabón, no una categoría: va en tinta neutra, con su hexágono y su columna como identidad. Así los
   colores con hue del dibujo siguen siendo tres, los mismos ya verificados contra las dos superficies. */
.ov-grafo-nodo--tarea .ov-grafo-figura {
  fill: var(--ov-surface); stroke: var(--ov-text-muted); stroke-width: 1.6;
}
/* Sin actividad viva, el día se dibuja apagado (D-M16-3); lo vivo queda a pleno. */
.ov-grafo-nodo:not(.ov-grafo-nodo--vivo) .ov-grafo-figura { opacity: .55; }
.ov-grafo-nodo--elegido .ov-grafo-figura,
.ov-grafo-nodo:focus-visible .ov-grafo-figura { stroke: var(--ov-text); stroke-width: 2.5; opacity: 1; }

/* Halo del color de la tarjeta: en un dibujo con cuatro columnas siempre hay una línea que pasa por donde está un
   nombre, y sin esto la línea se le mete entre las letras. Con `paint-order` el contorno va DEBAJO del relleno, así que
   el texto se lee igual y lo que cambia es lo que pasa por atrás. */
.ov-grafo-etiqueta {
  font-size: 10px; fill: var(--ov-text); font-weight: 600;
  paint-order: stroke fill; stroke: var(--ov-surface); stroke-width: 3px; stroke-linejoin: round;
}
.ov-grafo-vivo {
  font-size: 8.5px; fill: var(--ov-text-muted); letter-spacing: .02em;
  paint-order: stroke fill; stroke: var(--ov-surface); stroke-width: 3px; stroke-linejoin: round;
}

.ov-grafo-pulso {
  fill: none; stroke: var(--ov-primary); stroke-width: 2; opacity: .45;
  /* En SVG el transform toma el origen del lienzo: sin estas dos lineas el anillo no late, se va de paseo. */
  transform-box: fill-box; transform-origin: center;
  animation: ovGrafoLatido 2.2s ease-out infinite;
}
@keyframes ovGrafoLatido {
  0%   { transform: scale(.88); opacity: .55; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
/* R-M16-06: si la persona pidió que nada se mueva, el anillo se queda quieto (y sigue estando, con su etiqueta). */
@media (prefers-reduced-motion: reduce) {
  .ov-grafo-pulso { animation: none; opacity: .5; }
}

.ov-grafo-leyenda {
  list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .9rem;
  margin: .5rem 0 0; padding: 0; font-size: var(--ov-text-xs); color: var(--ov-text-muted);
}
.ov-grafo-leyenda li { display: inline-flex; align-items: center; gap: .35rem; }
.ov-grafo-punto { width: .7rem; height: .7rem; display: inline-block; }
.ov-grafo-punto--persona { background: var(--ov-grafo-persona); border-radius: 50%; }
.ov-grafo-punto--agente  { background: var(--ov-grafo-agente); border-radius: 2px; }
.ov-grafo-punto--tarea   { background: var(--ov-surface); border: 1.5px solid var(--ov-text-muted); border-radius: 3px; }
.ov-grafo-punto--cliente { background: var(--ov-grafo-cliente); transform: rotate(45deg); }
.ov-grafo-punto--vivo    { background: transparent; border: 2px solid var(--ov-primary); border-radius: 50%; }
.ov-grafo-punto--ayuda   { background: transparent; border-top: 2px dashed var(--ov-text-muted); height: 0; align-self: center; }

/* El mismo mapa en palabras, nivel por nivel: es el respaldo sin JavaScript y la versión que sí lee un lector de
   pantalla (de un SVG de nodos no se entiende nada). */
.ov-grafo-lista { margin: .5rem 0 0; font-size: var(--ov-text-sm); }
.ov-grafo-lista__nivel + .ov-grafo-lista__nivel { margin-top: .5rem; }
.ov-grafo-lista ul { list-style: none; margin: 0; padding: 0; }
.ov-grafo-lista li { padding: .3rem 0; border-top: 1px solid var(--ov-border); overflow-wrap: anywhere; }
.ov-grafo-lista li:first-child { border-top: 0; }
.ov-grafo-rotulo {
  display: block; font-size: var(--ov-text-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ov-text-muted);
}

.ov-grafo-detalle {
  margin-top: .6rem; padding: .6rem .75rem;
  background: var(--ov-primary-subtle); border-radius: var(--ov-radius); font-size: var(--ov-text-sm);
}
.ov-grafo-detalle__titulo { font-weight: 600; color: var(--ov-text); overflow-wrap: anywhere; }
.ov-grafo-detalle__meta { color: var(--ov-text-muted); }
.ov-grafo-detalle__lista { list-style: none; margin: .4rem 0; padding: 0; }
.ov-grafo-detalle__lista li { padding: .1rem 0; overflow-wrap: anywhere; }

/* M16 — En un teléfono el dibujo da vuelta los niveles (columnas → filas apiladas) y el script mide el SVG en píxeles
   reales, así que ya no hace falta compensar ninguna escala: solo un punto más de tamaño, porque en un teléfono la
   pantalla está más lejos de lo que uno cree. */
@media (max-width: 575.98px) {
  .ov-grafo-etiqueta { font-size: 11px; }
  .ov-grafo-vivo { font-size: 9.5px; }
  .ov-grafo-rotulo-svg, .ov-grafo-mas { font-size: 10px; }
}