/* Para que sea igual que el codemirror */

:root {
  --cm-bg: #2b1216;           /* fondo base oscuro corinto */
  --cm-panel-bg: #1e0d10;     /* panel oscuro */
  --cm-text: #f5edee;         /* texto claro */
  --cm-muted: #d4b8bd;        /* texto tenue */
  --cm-border: #3a1a1f;       /* bordes en corinto oscuro */
  --cm-accent: #a53a3a;       /* acento corinto */
  --cm-accent-weak: #3a1e22;  /* acento débil para cabeceras en dark */
  --cm-row-alt: #241014;      /* filas alternas */
}

@media (prefers-color-scheme: light) {
  :root {
    --cm-bg: #faf3f4;            /* fondo claro rosado */
    --cm-panel-bg: #ffffff;      /* panel claro */
    --cm-text: #2b1216;          /* texto oscuro corinto */
    --cm-muted: #7a5157;         /* texto tenue */
    --cm-border: #e8d6d9;        /* borde claro */
    --cm-accent: #8e1b1b;        /* acento corinto intenso */
    --cm-accent-weak: #f8e6e8;   /* acento débil */
    --cm-row-alt: #fdf6f7;       /* filas alternas */
  }
}

.results-panel {
  background: var(--cm-panel-bg);
  color: var(--cm-text);
  border: 1px solid var(--cm-border);
  border-radius: 8px;
  overflow: hidden;
}

.results-header {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(165, 58, 58, 0.06) 100%
  );
  border-bottom: 1px solid var(--cm-border);
  color: var(--cm-text);
}

.result-section.cm-card {
  background: transparent;
  border-top: 1px solid var(--cm-border);
  padding: 16px 16px 8px 16px;
}

.result-section.cm-card:first-child {
  border-top: none;
}

.result-section.cm-card h3 {
  margin: 0 0 10px 0;
  color: var(--cm-accent);
  font-weight: 600;
  letter-spacing: .2px;
}

/* Tablas */
.cm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid var(--cm-border);
  border-radius: 6px;
  overflow: hidden;
  background: transparent;
}

.cm-table thead th {
  text-align: left;
  background: var(--cm-accent-weak);
  color: var(--cm-text);
  border-bottom: 1px solid var(--cm-border);
  padding: 10px 12px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.cm-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--cm-border);
  color: var(--cm-text);
  vertical-align: top;
}

.cm-table tbody tr:last-child td {
  border-bottom: none;
}

.cm-table.cm-striped tbody tr:nth-child(2n) {
  background: var(--cm-row-alt);
}

.cm-table.cm-hover tbody tr:hover {
  background: rgba(165, 58, 58, 0.08); /* hover corinto */
}

.cm-table .num {
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: .3px;
}

.cm-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cm-accent-weak);
  color: var(--cm-text);
  font-size: 12px;
  border: 1px solid var(--cm-border);
}

/* Esto es para lo del graphviz*/
#bracket-svg {
  background: var(--cm-panel-bg);
  border: 1px solid var(--cm-border);
  border-radius: 6px;
  padding: 8px;
  max-height: 60vh;
  overflow: auto;
}