/* Estilos del analizador. Usan los tokens de color de la página (--card, --line, --text, --muted). */
.dx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dx-muted { color: var(--muted); }
.dx-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.dx-form { display: flex; gap: 8px; padding: 10px; box-shadow: 0 20px 40px rgb(0 0 0 / .06); }
.dx-form input { flex: 1; min-width: 0; font: 17px var(--font-mono, ui-monospace, monospace); padding: 14px 16px; border-radius: 10px;
  border: 1px solid var(--line); background: transparent; color: var(--text); }
.dx-form input:focus { outline: none; border-color: #5fb3c4; box-shadow: 0 0 0 3px rgb(95 179 196 / .25); }
.dx-form button { font: 600 15px inherit; padding: 0 22px; border: 0; border-radius: 10px; background: #14243b; color: #fff; cursor: pointer; }
.dx-form button:hover { background: #1c3150; }
.dx-form button:disabled { opacity: .6; cursor: progress; }
.dx-ayuda { color: var(--muted); font-size: 13px; margin: 10px 4px 0; }
#dx-resultado { display: grid; gap: 12px; margin-top: 16px; transition: opacity .2s; }
.dx-cargando { opacity: .5; }
.dx-resumen { display: flex; gap: 20px; align-items: center; padding: 20px; }
.dx-resumen h2 { margin: 2px 0 4px; font-size: 22px; word-break: break-all; }
.dx-resumen p { margin: 0; font-size: 14px; }
.dx-nota { flex-shrink: 0; width: 84px; height: 84px; border-radius: 18px; display: grid; place-items: center; font: 800 44px var(--font-sans, sans-serif); }
.dx-nota-A { background: rgb(63 155 116 / .15); color: #3f9b74; }
.dx-nota-B { background: rgb(95 179 196 / .18); color: #2f7f94; }
.dx-nota-C { background: rgb(196 168 107 / .2); color: #a8893f; }
.dx-nota-D, .dx-nota-F { background: rgb(192 80 77 / .15); color: #c0504d; }
.dx-grupo { padding: 6px 0; }
.dx-grupo h3 { margin: 0; padding: 12px 20px 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dx-grupo ul { list-style: none; margin: 0; padding: 0; }
.dx-grupo li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 20px; border-top: 1px solid var(--line); }
.dx-grupo li b { font-size: 15px; }
.dx-grupo li p { margin: 2px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5; word-break: break-word; }
.dx-icono { width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.dx-ok .dx-icono { background: rgb(63 155 116 / .15); color: #3f9b74; }
.dx-aviso .dx-icono { background: rgb(196 168 107 / .2); color: #a8893f; }
.dx-error .dx-icono { background: rgb(192 80 77 / .15); color: #c0504d; }
.dx-info .dx-icono { background: rgb(124 147 201 / .18); color: #7c93c9; }
.dx-puntos { font: 12px var(--font-mono, ui-monospace, monospace); color: var(--muted); padding-top: 3px; }
.dx-error-msg { padding: 16px 20px; margin: 0; color: #c0504d; font-size: 14px; }
@media (max-width: 560px) { .dx-form { flex-direction: column; } .dx-form button { padding: 12px; } .dx-nota { width: 64px; height: 64px; font-size: 34px; } }