/* El lector de planes de MySQL. Usa la base de gps.css (controles, gráficas)
   y agrega lo suyo: los dos planes lado a lado, las tablas de pasos y el modelo. */

.aviso-ejemplo { font-family: var(--mono); font-size: 12.5px; color: var(--suave); margin: -6px 0 6px; }

/* los dos planes: lado a lado si cabe, uno debajo del otro si no */
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 0 20px; align-items: start; }
.planes .plan-caja { min-width: 0; }
.plan-caja label { margin-top: 10px; }
.plan-caja label > span { display: block; margin-bottom: 4px; }
textarea.plan-texto, textarea.sql-texto { font-size: 12px; line-height: 1.5; letter-spacing: 0; white-space: pre; overflow-x: auto; }
textarea.plan-texto { min-height: 170px; }
textarea.sql-texto { min-height: 70px; white-space: pre-wrap; }

/* lo que sale de cada plan */
.res-plan { margin-top: 14px; }
.res-plan .ayuda { font-size: 14px; color: var(--tenue); }
.res-plan .aviso { font-size: 14.5px; color: var(--ambar); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chips span { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; border-radius: 4px; padding: 3px 8px; border: 1px solid var(--borde); color: var(--suave); }
.chips .chip-e { color: var(--ambar); border-color: var(--ambar); }
.chips .chip-m { color: var(--verde-vivo); border-color: var(--verde-vivo); }
.resumen { font-size: 15.5px; line-height: 1.6; margin: 0 0 12px; }
.res-plan h4 { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--suave); font-weight: 400; margin: 16px 0 6px; text-transform: uppercase; }
ul.notas { margin: 0; padding-left: 18px; }
ul.notas li { font-size: 14.5px; line-height: 1.55; margin-bottom: 8px; }

/* la tabla de pasos */
.tabla-ancha { overflow-x: auto; }
table.plan { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 12.5px; }
table.plan th { font-weight: 400; color: var(--suave); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--borde); font-size: 11px; letter-spacing: .04em; white-space: nowrap; }
table.plan td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
table.plan tr:last-child td { border-bottom: 0; }
table.plan td.num, table.plan th:nth-child(5), table.plan th:nth-child(6) { text-align: right; white-space: nowrap; }
table.plan td.nombre { color: var(--texto); }
table.plan .expl { display: block; font-family: var(--serif); font-size: 13px; line-height: 1.45; color: var(--tenue); margin-top: 3px; }
table.plan td.acceso b { color: var(--texto); font-weight: 400; }
table.plan td.acceso.p0 b { color: var(--verde-vivo); }
table.plan td.acceso.p2 b { color: var(--ambar); }
table.plan td.acceso.p3 b { color: var(--rojo); }
table.plan td.indice { word-break: break-all; }
table.plan .bandera { color: var(--texto); }
table.plan .bandera.b-temporal, table.plan .bandera.b-filesort, table.plan .bandera.b-buffer { color: var(--ambar); }
table.plan .bandera.b-cubre, table.plan .bandera.b-icp, table.plan .bandera.b-reversa { color: var(--verde-vivo); }
/* la fila de explicaciones bajo cada paso */
table.plan tr.detalle td { white-space: normal; padding: 0 8px 10px; font-family: var(--serif); font-size: 13.5px; line-height: 1.5; color: var(--tenue); }
table.plan tr.detalle p { margin: 0 0 4px; }
table.plan tr.detalle b { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--suave); }
table.plan tr:has(+ tr.detalle) td { border-bottom: 0; }

/* el árbol de EXPLAIN ANALYZE: la sangría dice quién alimenta a quién */
table.plan td.op b { font-weight: 400; color: var(--texto); }
table.plan td.op.nivel-1 { padding-left: 22px; }
table.plan td.op.nivel-2 { padding-left: 36px; }
table.plan td.op.nivel-3 { padding-left: 50px; }
table.plan td.op.nivel-4 { padding-left: 64px; }
table.plan td.op.nivel-5, table.plan td.op.nivel-6, table.plan td.op.nivel-7, table.plan td.op.nivel-8 { padding-left: 78px; }
table.plan td.op b::before { content: "→ "; color: var(--tenue); }

/* la comparación */
#comparacion h3 { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--suave); font-weight: 400; margin: 0 0 8px; text-transform: uppercase; }
table.plan.cmp td:first-child { font-family: var(--serif); font-size: 14.5px; }
table.plan.cmp th:nth-child(n+2), table.plan.cmp td:nth-child(n+2) { text-align: right; }
#comparacion .resumen { margin: 14px 0 0; }

/* el modelo */
.texto-res { font-size: 16px; line-height: 1.6; margin: 0 0 12px; }
table.plan.modelo td.nombre { font-family: var(--serif); font-size: 14.5px; }
table.plan.modelo th:nth-child(n+2), table.plan.modelo td:nth-child(n+2) { text-align: right; }
i.sw { display: inline-block; width: 12px; height: 3px; vertical-align: middle; margin-right: 8px; }
i.sw.completo { background: var(--rojo); }
i.sw.operacion { background: var(--ambar); }
i.sw.compuesto { background: var(--verde-vivo); }
.curva { fill: none; stroke-width: 2; stroke-linejoin: round; }
.curva.completo { stroke: var(--rojo); }
.curva.operacion { stroke: var(--ambar); stroke-dasharray: 6 4; }
.curva.compuesto { stroke: var(--verde-vivo); }
.grafica .marca { stroke: var(--texto); stroke-width: 1.2; stroke-dasharray: 3 3; }
.grafica text.unidad { fill: var(--tenue); }
.leyenda .completo { color: var(--rojo); }
.leyenda .operacion { color: var(--ambar); }
.leyenda .compuesto { color: var(--verde-vivo); }

/* en el teléfono: cada fila de la tabla como una tarjeta, con su etiqueta */
@media (max-width: 620px) {
  table.plan thead { display: none; }
  table.plan tbody { display: block; }
  table.plan tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--borde); padding: 6px 0; }
  table.plan td.op, table.plan tr.detalle td, table.plan.cmp td:first-child, table.plan.modelo td:first-child { grid-column: 1 / -1; }
  table.plan tr.detalle { display: block; padding-top: 0; }
  table.plan tr:last-child { border-bottom: 0; }
  table.plan td { display: block; border-bottom: 0; padding: 3px 4px; text-align: left !important; white-space: normal !important; }
  table.plan td[data-col]::before { content: attr(data-col); display: block; font-size: 9.5px; color: var(--tenue); margin-bottom: 1px; }
  table.plan td.op[class*="nivel-"] { padding-left: 4px; }
  table.plan tr.detalle td { padding: 0 4px 6px; }
  textarea.plan-texto { min-height: 130px; }
}