/* ============================================================
 * theme.css — TEMA de la guía de MATRICES (capa LIBRE).
 * SOLO estilos del tema (prefijo mat-): visuals SVG de matrices,
 * widget de producto fila×columna, widget de suma/resta interactivo.
 * Andamiaje en assets/guia-components.css; variables --guia-*.
 * Color semántico: fila A = naranja · columna B = navy · resultado = verde.
 * Pisos de letra: lectura ≥17px · apoyo ≥15px · etiquetas MAYÚSCULAS ≥13px.
 * Tap targets ≥44px. Sin overflow horizontal a 360px. Light-mode fijo.
 * ============================================================ */

/* ===== Paleta del tema ===== */
.mat-legend, .mat-visual, .mat-widget, .mat-solver, .mat-dim {
  --mat-fila: var(--guia-deep, #C75D08);         /* fila de A = naranja */
  --mat-col: var(--guia-navy, #283891);          /* columna de B = azul navy */
  --mat-sol: var(--guia-green-deep, #1C7A3A);    /* resultado / correcto = verde */
  --mat-bad: #A01243;                            /* error / incompatible */
  --mat-hl-fila: rgba(199, 93, 8, 0.15);        /* fondo highlight fila */
  --mat-hl-col: rgba(40, 56, 145, 0.15);        /* fondo highlight columna */
}

/* ===== Leyenda de color ===== */
.mat-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  background: #fff; border: 1.5px solid var(--guia-line); border-radius: 12px;
  padding: 10px 14px; font-size: 15px; font-weight: 600;
}
.mat-legend .it { display: flex; align-items: center; gap: 8px; }
.mat-legend .it b { font-weight: 800; }
.mat-legend .sw { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--guia-ink); flex: 0 0 auto; }
.mat-legend .sw.fila { background: var(--mat-fila); }
.mat-legend .sw.col { background: var(--mat-col); }
.mat-legend .sw.sol { background: var(--mat-sol); }

/* ===== Visual estático (SVG + caption) ===== */
.mat-visual {
  display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 2px 0;
}
.mat-visual .vcap {
  font-size: 15px; font-weight: 700; color: var(--guia-muted); text-align: center; max-width: 44ch;
}
.mat-svg {
  width: 100%; max-width: 340px; height: auto; display: block; margin: 0 auto; overflow: visible;
}
/* Dentro de ejercicio: más compacto */
.guia-pitem .mat-visual { align-items: flex-start; margin: 8px 0 4px; }
.guia-pitem .mat-svg { max-width: 280px; margin: 0; }
.guia-serie-grid .mat-svg { max-width: 220px; }

/* ===== Caja común de los widgets por toque ===== */
.mat-widget {
  display: grid; gap: 12px; padding: 16px;
  border: 2px solid var(--guia-ink); border-radius: 14px; background: var(--guia-cream);
  margin: 2px 0;
}
.mat-lab-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mat-flag {
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #fff; background: var(--guia-orange); border: 2px solid var(--guia-ink);
  border-radius: 999px; padding: 3px 11px; flex: 0 0 auto;
}
.mat-inst { font-size: 15px; line-height: 1.45; font-weight: 700; color: var(--guia-deep); }

/* Botones del tema */
.mat-btn {
  font: inherit; font-weight: 700; font-size: 15px; min-height: 44px; padding: 9px 16px;
  border: 2px solid var(--guia-ink); border-radius: 10px; background: #fff; color: var(--guia-ink);
  cursor: pointer; box-shadow: 2px 2px 0 var(--guia-ink); transition: transform .1s, box-shadow .1s;
}
.mat-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--guia-ink); }
.mat-btn:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--guia-ink); }
.mat-btn.on { background: var(--mat-col); border-color: var(--mat-col); color: #fff; box-shadow: none; }
.mat-ctrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ===== Widget de producto fila×columna ===== */
.mat-prod-layout {
  display: flex; align-items: flex-start; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.mat-prod-eq { font-size: 24px; font-weight: 700; align-self: center; color: var(--guia-muted); line-height: 1; }
.mat-prod-sign { font-size: 24px; font-weight: 700; color: var(--guia-ink); align-self: center; }

/* Celdas de la matriz interactiva */
.mat-table-wrap { overflow-x: auto; max-width: 100%; }
.mat-tbl {
  border-collapse: collapse; font-size: 19px; font-weight: 700; color: var(--guia-ink);
  /* Corchete SVG via ::before/::after de .mat-tbl-bracket */
}
.mat-tbl-wrap { position: relative; display: inline-flex; align-items: center; gap: 0; }
.mat-tbl-bracket {
  width: 8px; height: 100%; display: flex; flex-direction: column;
  border: 3px solid var(--guia-ink); flex: 0 0 auto;
}
.mat-tbl-bracket.left { border-right: none; border-radius: 4px 0 0 4px; }
.mat-tbl-bracket.right { border-left: none; border-radius: 0 4px 4px 0; }
.mat-cell {
  padding: 8px 12px; border: 1.5px solid transparent; border-radius: 6px;
  cursor: pointer; transition: background .15s, border-color .15s; min-width: 36px; text-align: center;
  white-space: nowrap;
}
.mat-cell:hover { background: #f0f0f0; }
/* Highlight fila de A (naranja) */
.mat-cell.hl-fila { background: var(--mat-hl-fila); border-color: var(--mat-fila); color: var(--mat-fila); }
/* Highlight columna de B (navy) */
.mat-cell.hl-col  { background: var(--mat-hl-col);  border-color: var(--mat-col);  color: var(--mat-col);  }
/* Celda del resultado seleccionada (verde) */
.mat-cell.hl-res  { background: rgba(28, 122, 58, .18); border-color: var(--mat-sol); color: var(--mat-sol); font-weight: 800; }
/* Celda del resultado no seleccionada */
.mat-cell.res { cursor: pointer; background: #f9f9f9; }
.mat-cell.res:hover { background: #e8f5e9; }

/* Panel de cálculo (muestra la suma de productos) */
.mat-calc-box {
  background: #fff; border: 1.5px solid var(--guia-line); border-radius: 12px;
  padding: 12px 14px; min-height: 56px; font-size: 17px; line-height: 1.6;
  font-weight: 600; color: var(--guia-ink);
}
.mat-calc-box .c-fila { color: var(--mat-fila); font-weight: 800; }
.mat-calc-box .c-col  { color: var(--mat-col);  font-weight: 800; }
.mat-calc-box .c-sol  { color: var(--mat-sol);  font-weight: 800; }
.mat-calc-placeholder { color: var(--guia-muted); font-style: italic; font-size: 15px; }

/* Botón de "¿Qué pasa si cambio el orden?" */
.mat-order-row {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px;
}
.mat-order-result {
  font-size: 15px; font-weight: 700; color: var(--guia-ink);
  background: #fff; border: 1.5px solid var(--guia-line); border-radius: 10px;
  padding: 8px 12px; display: none;
}
.mat-order-result.shown { display: block; }
.mat-order-result .c-ab { color: var(--mat-sol); }
.mat-order-result .c-ba { color: var(--mat-bad); }

/* ===== Impresión ===== */
@media print {
  .mat-widget { display: none !important; }
}

/* Contención móvil (fix orquestador 2026-06-13, capa-2): evitar que el min-content
   de las matrices anchas ensanche el track de .guia-mod a >360px. */
.mat-svg { overflow: hidden; }
.mat-visual, .mat-widget, .mat-solver { min-width: 0; max-width: 100%; overflow-x: auto; }
.guia-mod, .guia-stag, .guia-sec { min-width: 0; }
.guia-mod *, .guia-sec * { max-width: 100%; }