/* ==========================================================================
   design-system.css — sistema de diseño genérico (global)
   Cargado en base.html después de Material Dashboard. Define UNA sola vez los
   tokens y los componentes .ds-* que todas las pantallas invocan por clase, en
   lugar de reimplementar el mismo estilo con un prefijo distinto por pantalla.

   Paleta corregida final: títulos/nav = #1B2738, texto secundario = #7b809a,
   acento = #E0185C. Solo estilo/layout — no cambia lógica, JS ni comportamiento.
   ========================================================================== */

:root {
  /* Superficies y bordes */
  --ds-card: #FFFFFF;
  --ds-border: #E7EAF0;
  --ds-border-soft: #F1F3F7;
  --ds-field-bg: #FBFBFD;

  /* Acento */
  --ds-accent: #E0185C;
  --ds-accent-soft: #FCE8EF;
  --ds-accent-deep: #C2154F;

  /* Texto */
  --ds-navy: #1B2738;   /* títulos y texto principal */
  --ds-muted: #7b809a;  /* texto secundario / meta */

  /* Forma — escala de radios centralizada */
  --ds-r-sm: 8px;     /* íconos, botones pequeños, paginación */
  --ds-r-md: 10px;    /* inputs, esquinas de tabla */
  --ds-r-lg: 12px;    /* botón primario */
  --ds-r-xl: 14px;    /* contenedor de filtros */
  --ds-r-2xl: 20px;   /* panel / card */
  --ds-r-pill: 999px; /* chips, badges, tags */
  --ds-shadow: 0 1px 2px rgba(36,50,75,.03), 0 6px 16px -10px rgba(36,50,75,.08);
}

/* ── Contenedor vertical de secciones ── */
.ds-wrap { display: flex; flex-direction: column; gap: 1.25rem; padding: 0.625rem 0 3rem; }

/* ── Encabezado de página (título + acciones) ── */
.ds-page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin: 1rem 0 0.5rem;
}
.ds-page-title {
  font-size: 1.375rem; font-weight: 700; letter-spacing: -0.025em; color: var(--ds-navy);
  display: flex; align-items: center; gap: 0.5rem;
}
.ds-page-title svg { width: 1.375rem; height: 1.375rem; color: var(--ds-accent); flex: none; }
.ds-page-title .material-symbols-outlined { color: var(--ds-accent); font-size: 1.375rem; }
.ds-page-sub { font-size: 0.875rem; color: var(--ds-muted); margin-top: 0.5rem; }
.ds-page-actions { display: flex; align-items: center; gap: 0.5rem; }

/* ── Panel / card ── */
.ds-panel {
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-2xl);
  box-shadow: var(--ds-shadow);
}
.ds-panel-pad { padding: 1.5rem 1.625rem; }

/* ── Eyebrow / etiqueta de sección ── */
.ds-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5625rem;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ds-muted); margin-bottom: 1rem;
}
.ds-eyebrow .ic {
  width: 1.5rem; height: 1.5rem; border-radius: var(--ds-r-sm);
  background: var(--ds-accent-soft); color: var(--ds-accent);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.ds-eyebrow .ic svg { width: 0.8125rem; height: 0.8125rem; }

/* ── Tabla ── */
.ds-table-wrap { overflow-x: auto; }
.ds-table { width: 100%; border-collapse: collapse; font-size: 0.84375rem; }
.ds-table th {
  text-align: left; padding: 0.625rem 0.875rem;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ds-muted); border-bottom: 1px solid var(--ds-border);
  background: var(--ds-field-bg); white-space: nowrap;
}
.ds-table th:first-child { border-radius: var(--ds-r-md) 0 0 0; }
.ds-table th:last-child  { border-radius: 0 var(--ds-r-md) 0 0; }
.ds-table td {
  padding: 0.8125rem 0.875rem; border-bottom: 1px solid var(--ds-border-soft);
  color: var(--ds-navy); vertical-align: middle;
}
.ds-table tr:last-child td { border-bottom: none; }
.ds-table tr:hover td { background: #FAFBFC; }
.ds-table .muted { color: var(--ds-muted); }

/* ── simpleDatatables (controles globales de tabla) ── */
.dataTable-wrapper .dataTable-top,
.dataTable-wrapper .dataTable-bottom {
  padding: 0.625rem 0; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem;
}
.dataTable-wrapper .dataTable-search { display: flex; align-items: center; }
.dataTable-wrapper .dataTable-search input {
  height: 2.375rem; padding: 0 0.875rem;
  border: 1px solid var(--ds-border); border-radius: var(--ds-r-md);
  background: #fff; font-family: inherit; font-size: 0.8125rem; color: var(--ds-navy);
  min-width: 13.75rem;
}
.dataTable-wrapper .dataTable-search input:focus {
  outline: none; border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-accent-soft);
}
.dataTable-wrapper .dataTable-info { font-size: 0.75rem; color: var(--ds-muted); }
.dataTable-pagination li button {
  height: 2rem; min-width: 2rem; padding: 0 0.625rem;
  border-radius: var(--ds-r-sm); border: 1px solid var(--ds-border);
  background: #fff; font-family: inherit; font-size: 0.75rem; font-weight: 600;
  color: var(--ds-navy); cursor: pointer; transition: background 120ms, transform 120ms;
}
.dataTable-pagination li button:hover { background: var(--ds-field-bg); transform: translateY(-1px); }
.dataTable-pagination li.active button {
  background: var(--ds-accent); border-color: var(--ds-accent); color: #fff;
  box-shadow: 0 4px 12px -6px rgba(224,24,92,0.5);
}
.dataTable-pagination li.disabled button { opacity: 0.35; cursor: default; }

/* ── Badges de estado ── */
.ds-badge {
  display: inline-flex; align-items: center; gap: 0.3125rem;
  padding: 0.1875rem 0.625rem; border-radius: var(--ds-r-pill); font-size: 0.71875rem; font-weight: 600;
}
.ds-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ds-badge-ok    { background: #EDF6EE; color: #2E7D32; }
.ds-badge-proc  { background: #FFF8E1; color: #F57F17; }
.ds-badge-err   { background: #FEECEC; color: #C62828; }
.ds-badge-queue { background: #F0F2F6; color: #5A6781; }

/* ── Chips ── */
.ds-chip {
  display: inline-flex; align-items: center; gap: 0.3125rem;
  padding: 0.125rem 0.5625rem; border-radius: var(--ds-r-pill); font-size: 0.75rem; font-weight: 600;
  background: var(--ds-accent-soft); color: var(--ds-accent-deep);
  font-variant-numeric: tabular-nums;
}
.ds-chip-muted { background: #F0F2F6; color: #5A6781; }

/* ── Enlace de nombre con ícono de estado ── */
.ds-name-link { display: inline-flex; align-items: center; gap: 0.5625rem; color: var(--ds-navy); font-weight: 600; text-decoration: none; }
.ds-name-link:hover { color: var(--ds-accent); }
.ds-name-link .st { font-size: 1.125rem; flex-shrink: 0; line-height: 1; }
.ds-name-link .st.ok    { color: #2E9E4A; }
.ds-name-link .st.proc  { color: #E08A1E; }
.ds-name-link .st.err   { color: #C62828; }
.ds-name-link .st.queue { color: #A8B0BF; }

/* ── Tag (versión / variante) ── */
.ds-tag {
  display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: var(--ds-r-pill);
  font-size: 0.65625rem; font-weight: 700; letter-spacing: 0.03em;
  background: var(--ds-accent-soft); color: var(--ds-accent-deep);
}
.ds-tag .material-symbols-outlined { font-size: 0.8125rem; }

/* ── Enlace "Salir" ── */
.ds-salir {
  display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-accent); text-decoration: none;
}
.ds-salir:hover { color: var(--ds-accent-deep); }
.ds-salir svg { width: 0.875rem; height: 0.875rem; }

/* ── Botones ── */
.ds-btn {
  height: 2.125rem; padding: 0 1rem; border-radius: var(--ds-r-md); font-family: inherit;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer; border: 1px solid var(--ds-accent); background: var(--ds-accent); color: #fff;
  display: inline-flex; align-items: center; gap: 0.375rem; text-decoration: none;
  box-shadow: 0 6px 16px -10px rgba(224,24,92,0.45); transition: background 120ms ease, transform 120ms ease;
}
.ds-btn:hover { background: var(--ds-accent-deep); color: #fff; transform: translateY(-1px); text-decoration: none; }
.ds-btn svg { width: 0.8125rem; height: 0.8125rem; }

.ds-btn-sm {
  height: 2.125rem; padding: 0 0.875rem; border-radius: var(--ds-r-sm); font-family: inherit;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; cursor: pointer;
  border: 1px solid var(--ds-border); background: #fff; color: var(--ds-navy);
  display: inline-flex; align-items: center; gap: 0.375rem; text-decoration: none;
  transition: background 120ms ease, transform 120ms ease;
}
.ds-btn-sm:hover { transform: translateY(-1px); text-decoration: none; color: var(--ds-navy); background: var(--ds-field-bg); }
.ds-btn-sm svg { width: 0.8125rem; height: 0.8125rem; }
/* Estado seleccionado (p. ej. presets de instrucciones): magenta relleno */
.ds-btn-sm.is-active { background: var(--ds-accent); border-color: var(--ds-accent); color: #fff; }
.ds-btn-sm.is-active:hover { background: var(--ds-accent-deep); border-color: var(--ds-accent-deep); color: #fff; }

/* ── Botones de acción (barra inferior de formularios; estilo alto tipo Grafos) ── */
.ds-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.75rem; }
.ds-action-btn {
  height: 3.125rem; padding: 0 1.25rem; border-radius: 0.75rem; font-family: inherit;
  font-size: 0.78125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer; border: 1px solid var(--ds-border); background: #fff; color: var(--ds-navy);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4375rem;
  text-decoration: none; transition: background 120ms ease, transform 100ms ease, box-shadow 120ms ease;
}
.ds-action-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(36,50,75,0.10); text-decoration: none; }
.ds-action-btn-primary { background: var(--ds-accent); border-color: var(--ds-accent); color: #fff; }
.ds-action-btn-primary:hover { background: var(--ds-accent-deep); color: #fff; }
.ds-action-btn-secondary { background: #6E7888; border-color: #6E7888; color: #fff; }
.ds-action-btn-secondary:hover { background: #5A6373; color: #fff; }
.ds-action-btn-outline { border-color: var(--ds-accent); color: var(--ds-accent); }
.ds-action-btn-outline:hover { background: var(--ds-accent-soft); }
.ds-action-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ── Estado vacío ── */
.ds-empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--ds-muted); }
.ds-empty-state svg { width: 2.5rem; height: 2.5rem; margin-bottom: 0.75rem; opacity: 0.35; }
.ds-empty-state p { font-size: 0.875rem; }

/* ── Filtro de fechas ── */
.ds-date-filter {
  display: flex; align-items: flex-end; gap: 0.625rem; flex-wrap: wrap;
  padding: 1rem 1.25rem; background: var(--ds-field-bg);
  border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); margin-bottom: 1.125rem;
}
.ds-date-field { display: flex; flex-direction: column; gap: 0.3125rem; }
.ds-date-field label {
  font-size: 0.65625rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ds-muted);
}
.ds-date-field input[type="date"] {
  height: 2.375rem; padding: 0 0.75rem; border: 1px solid var(--ds-border); border-radius: var(--ds-r-md);
  background: #fff; font-family: inherit; font-size: 0.8125rem; color: var(--ds-navy); cursor: pointer;
  max-width: 16rem;
}
.ds-date-field input[type="date"]:focus {
  outline: none; border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-accent-soft);
}

/* ==========================================================================
   CAPA DE FORMULARIO — panel de sección y encabezados para pantallas de forms
   (crear TIA, TIA+, etc.). Reusable en todo el módulo; en rem para que escale.
   ========================================================================== */

/* ── Panel de sección de formulario ── */
.ds-form-panel {
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-2xl);
  box-shadow: var(--ds-shadow);
  padding: 1.375rem 1.5rem;
}

/* ── Encabezado de sección (ícono + título + acciones) ── */
.ds-form-head {
  display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; margin-bottom: 0.375rem;
}
.ds-form-icon {
  width: 1.625rem; height: 1.625rem; border-radius: var(--ds-r-sm);
  background: var(--ds-accent-soft); color: var(--ds-accent);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ds-form-icon .material-symbols-outlined { font-size: 1rem; }
.ds-form-icon svg { width: 0.9375rem; height: 0.9375rem; }
.ds-form-title { font-size: 1rem; font-weight: 700; color: var(--ds-navy); margin: 0; }
.ds-form-desc { font-size: 0.90625rem; color: var(--ds-muted); margin: 0.375rem 0 1.125rem; line-height: 1.55; }
.ds-form-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }

/* ── Badge "opcional" ── */
.ds-badge-opcional {
  font-size: 0.65625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ds-accent-deep); background: var(--ds-accent-soft);
  border-radius: var(--ds-r-pill); padding: 0.1875rem 0.625rem;
}

/* ==========================================================================
   SKIN DE CAMPOS — da a inputs/selects/textarea el look DS (caja hairline, foco
   magenta) dentro de paneles de formulario, neutralizando el subrayado/outline
   animado de Material Dashboard. Scoped a .ds-form-panel para no afectar otros
   contextos; NO toca inputs sin .form-control (widgets rx-/cms-, dropzone).
   Los <label class="form-label"> externos se conservan.
   ========================================================================== */
.ds-form-panel .form-control,
.ds-form-panel .form-select,
.ds-form-panel .input-group-outline .form-control {
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  background-color: var(--ds-field-bg) !important;
  background-image: none !important;
  padding: 0.5rem 0.75rem !important;
  min-height: 2.5rem;
  font-size: 0.875rem !important;
  color: var(--ds-navy) !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
}
.ds-form-panel textarea.form-control { min-height: 4.5rem; }

/* Flecha de los selects (se re-agrega tras quitar el background-image de MD) */
.ds-form-panel select.form-control,
.ds-form-panel .form-select {
  appearance: none; -webkit-appearance: none;
  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='%237b809a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 14px 12px !important;
  padding-right: 2rem !important;
}

/* Foco magenta */
.ds-form-panel .form-control:focus,
.ds-form-panel .form-select:focus,
.ds-form-panel .input-group-outline .form-control:focus {
  border-color: var(--ds-accent) !important;
  box-shadow: 0 0 0 3px var(--ds-accent-soft) !important;
  background-color: #fff !important;
}

/* ==========================================================================
   Unifica los encabezados de sección de TODOS los historiales al título navy
   del DS. Cada historial define su propia .xx-label (eyebrow gris 11px
   mayúsculas); aquí se homogeneiza a navy 16px como .ds-form-title. El chip de
   ícono (.xx-label .ic) se conserva. !important para ganar al CSS por-pantalla.
   ========================================================================== */
.bc-label, .gr-label, .ih-label, .rp-label, .sm-label,
.sc-label, .cx-label, .fbc-label, .pc-label, .rx-label,
.gx-section-label, .gx-kw-label {
  color: var(--ds-navy) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ==========================================================================
   Unifica el botón primario grande de TODOS los historiales al tamaño del
   .ds-btn del DS (antes 40–42px en px, sin escalar). !important para ganar al
   CSS por-pantalla y a overrides inline de tamaño. NO afecta .xx-btn-sm.
   ========================================================================== */
.bc-btn, .gr-btn, .ih-btn, .rp-btn, .sm-btn,
.sc-btn, .cx-btn, .fbc-btn, .pc-btn, .rx-btn {
  height: 2.125rem !important;
  padding: 0 1rem !important;
  font-size: 0.75rem !important;
  border-radius: var(--ds-r-md) !important;
  box-shadow: 0 6px 16px -10px rgba(224,24,92,0.45) !important;
}
.bc-btn svg, .gr-btn svg, .ih-btn svg, .rp-btn svg, .sm-btn svg,
.sc-btn svg, .cx-btn svg, .fbc-btn svg, .pc-btn svg, .rx-btn svg {
  width: 0.8125rem !important; height: 0.8125rem !important;
}

/* ==========================================================================
   Unifica el enlace "Salir" de los historiales (con clase propia .xx-salir,
   antes gris) a magenta + tamaño del DS (.ds-salir). En rem para que escale.
   ========================================================================== */
.gr-salir, .ih-salir, .rp-salir, .sm-salir,
.sc-salir, .cx-salir, .fbc-salir, .pc-salir {
  color: var(--ds-accent) !important;
  font-size: 0.75rem !important;
}
.gr-salir:hover, .ih-salir:hover, .rp-salir:hover, .sm-salir:hover,
.sc-salir:hover, .cx-salir:hover, .fbc-salir:hover, .pc-salir:hover {
  color: var(--ds-accent-deep) !important;
}
.gr-salir svg, .ih-salir svg, .rp-salir svg, .sm-salir svg,
.sc-salir svg, .cx-salir svg, .fbc-salir svg, .pc-salir svg {
  width: 0.875rem !important; height: 0.875rem !important;
}

/* ==========================================================================
   Botón hamburguesa del header (btn-icon-only + outline-secondary; combo usado
   EXCLUSIVAMENTE por toggle_menu) y el rx-icon-btn de expresiones regulares:
   mismo tamaño (2.125rem) que los botones de acción, para que en TODOS los
   historiales las acciones queden alineadas con el ícono de menú.
   ========================================================================== */
.btn.btn-icon-only.btn-rounded.btn-outline-secondary {
  width: 2.125rem !important; height: 2.125rem !important; min-width: 2.125rem !important;
  padding: 0 !important; margin: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn.btn-icon-only.btn-rounded.btn-outline-secondary .material-symbols-outlined { font-size: 1.125rem !important; }
.rx-icon-btn { width: 2.125rem !important; height: 2.125rem !important; }