/* ============================================================
 * theme.css — TEMA de la guía DOMINIO Y RANGO DE UNA FUNCIÓN (capa LIBRE).
 * SOLO estilos específicos del tema (prefijo dr-): leyenda de color, visuales
 * del concepto y widget explorador interactivo. NO redefine clases `guia-*`.
 * Paleta semántica:
 *   Dominio  (eje x) = navy   #283891  --fl-dom
 *   Rango    (eje y) = naranja #C75D08  --fl-ran
 *   Excluido          = rojo   #B91C1C  --fl-proh
 *   Válido            = verde  #1C7A3A  --fl-ok
 * Pisos de letra: lectura ≥17px · apoyo ≥15px · etiquetas MAYÚSCULAS ≥13px.
 * Tap targets ≥44px. Sin overflow horizontal a 360px. Light-mode fijo.
 * ============================================================ */

/* ===== Variables del tema ===== */
.dr-legend, .dr-visual, .dr-wg, .dr-table-wrap {
  --dr-dom:  #283891;  /* dominio (navy) */
  --dr-ran:  #C75D08;  /* rango (naranja) */
  --dr-proh: #B91C1C;  /* excluido / prohibido */
  --dr-ok:   #1C7A3A;  /* válido / permitido */
  --dr-ink:  #181B22;
  --dr-mut:  #4b5563;
  --dr-line: #e7e2da;
  --dr-cream: #FFF3E7;
  --dr-cream-b: #f0f9f4;
}

/* ===== Leyenda de color ===== */
.dr-legend {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  margin: 4px 0 18px; padding: 12px 14px;
  border: 2px solid var(--dr-ink); border-radius: 14px; background: #fff;
}
.dr-legend .it {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; color: var(--dr-mut);
}
.dr-legend .it b { color: var(--dr-ink); }
.dr-legend .sw {
  width: 16px; height: 16px; border-radius: 5px;
  border: 1.5px solid var(--dr-ink); flex: 0 0 auto;
}
.dr-legend .sw.dom  { background: var(--dr-dom); }
.dr-legend .sw.ran  { background: var(--dr-ran); }
.dr-legend .sw.proh { background: var(--dr-proh); }

/* ===== Visuales estáticos ===== */
.dr-visual {
  margin: 14px 0; display: flex; flex-direction: column;
  align-items: center; gap: 6px;
}
.dr-svg {
  width: 100%; max-width: 340px; height: auto; display: block;
  border: 2px solid var(--dr-line); border-radius: 14px; background: #fff;
}
.dr-svg.dr-maquina  { max-width: 360px; }
.dr-svg.dr-recta-num { max-width: 360px; max-height: 90px; }
.dr-cap {
  font-size: 15px; color: var(--dr-mut);
  text-align: center; line-height: 1.4; max-width: 380px;
}

/* ===== Tabla de valores ===== */
.dr-table-wrap { align-items: flex-start; }
.dr-table {
  border-collapse: collapse; font-size: 15px;
  border: 2px solid var(--dr-line); border-radius: 10px; overflow: hidden;
}
.dr-table th, .dr-table td {
  padding: 8px 14px; text-align: center;
  border-bottom: 1px solid var(--dr-line); font-weight: 700;
}
.dr-table thead tr { background: #f5f4f2; }
.dr-table tbody tr:last-child td { border-bottom: none; }

/* ===== Andamiaje del widget explorador ===== */
.dr-wg {
  margin: 16px 0; padding: 16px 14px;
  border: 2px solid var(--dr-ink); border-radius: 16px; background: #fff;
  box-shadow: 4px 4px 0 var(--dr-ink);
}
.dr-wg-top {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 10px; margin-bottom: 12px;
}
.dr-flag {
  font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--dr-dom); border-radius: 999px;
  padding: 4px 12px; flex: 0 0 auto;
}
.dr-wg-inst {
  font-size: 15px; color: var(--dr-mut); line-height: 1.4; flex: 1 1 220px;
}

/* ===== Selector de función ===== */
.dr-fn-sel {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.dr-fn-btn {
  font-size: 14px; font-weight: 700;
  padding: 7px 13px; min-height: 40px;
  border: 2px solid var(--dr-line); border-radius: 10px;
  background: #f9f8f6; color: var(--dr-ink); cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
  line-height: 1.3;
}
.dr-fn-btn:hover { background: var(--dr-cream); border-color: var(--dr-dom); }
.dr-fn-btn.active {
  background: var(--dr-dom); color: #fff; border-color: var(--dr-dom);
}

/* ===== Stage del canvas ===== */
.dr-expl-stage {
  display: flex; justify-content: center; margin-bottom: 10px;
}
.dr-canvas {
  width: 100%; max-width: 300px; height: auto; display: block;
  border: 2px solid var(--dr-line); border-radius: 14px;
  background: #fff; cursor: crosshair; touch-action: none;
}

/* ===== Lectura viva ===== */
.dr-expl-read {
  font-size: 15px; line-height: 1.5; color: var(--dr-mut);
  text-align: center; padding: 8px 12px; margin: 4px 0 12px;
  border: 2px solid var(--dr-line); border-radius: 12px; background: #fcfbf9;
  min-height: 46px;
}
.dr-expl-read strong { color: var(--dr-ink); }

/* ===== Botones de acción del widget ===== */
.dr-expl-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
}
.dr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 16px;
  border: 2px solid var(--dr-ink); border-radius: 12px; background: var(--dr-ink);
  color: #fff; font-size: 15px; font-weight: 800; cursor: pointer;
  transition: transform .08s ease, background .12s ease;
}
.dr-btn:active { transform: translateY(1px); }
.dr-btn.ghost { background: #fff; color: var(--dr-ink); }
.dr-btn.ghost:hover { background: var(--dr-cream); }
.dr-btn.small { font-size: 14px; padding: 6px 13px; }

/* ===== Responsive a 360px ===== */
@media (max-width: 380px) {
  .dr-wg { padding: 14px 11px; }
  .dr-fn-sel { gap: 6px; }
  .dr-fn-btn { font-size: 13px; padding: 6px 10px; }
  .dr-expl-actions .dr-btn { flex: 1 1 auto; font-size: 13px; }
  .dr-expl-read { font-size: 14px; }
  .dr-cap { font-size: 14px; }
}

/* ===== Movimiento reducido ===== */
@media (prefers-reduced-motion: reduce) {
  .dr-btn, .dr-fn-btn { transition: none; }
}

/* ===== Impresión ===== */
@media print {
  .dr-wg { display: none !important; }
  .dr-svg { border-color: #999; }
}