/* ============================================================
   Tablas, tabla resumen, grilla de parámetros y checklist
   ------------------------------------------------------------
   Capa: componente
   Reúne, en este orden: tablas.css, tabla-resumen.css, param-grid.css, checklist.css
   ============================================================ */

/* ═══════════════════════════════════════════════════
   TABLAS — modernas, alternadas
═══════════════════════════════════════════════════ */
table { width: 100%; border-collapse: collapse; margin: 20px 0; border-radius: var(--radius); overflow: hidden; }
th {
  background: var(--accent-2); color: var(--on-accent-2);
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em;
  text-align: left;
}
th:first-child { border-radius: var(--radius-sm) 0 0 0; }
th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }
td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  font-size: .9rem;
  transition: background var(--t);
}
tr:last-child td { border-bottom: none; }
tr:nth-child(even) td { background: rgba(var(--accent-rgb),.04); }
tr:hover td { background: rgba(var(--accent-2-rgb),.03); }
body.dark-mode tr:nth-child(even) td { background: rgba(var(--accent-rgb),.05); }
body.dark-mode tr:hover td { background: rgba(var(--accent-rgb),.04); }

/* ═══════════════════════════════════════════════════
   TABLA RESUMEN
═══════════════════════════════════════════════════ */
.tabla-resumen {
  width: 100%; border-collapse: collapse; margin: 20px 0;
  font-size: .9rem; border-radius: var(--radius); overflow: hidden;
}
.tabla-resumen th {
  background: var(--accent-2); color: var(--on-accent-2);
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 12px 16px; text-align: left;
}
.tabla-resumen td {
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  vertical-align: top; line-height: 1.55;
  transition: background var(--t), border-color var(--t);
}
.tabla-resumen tr:last-child td { border-bottom: none; }
.tabla-resumen tr:nth-child(even) td { background: rgba(var(--accent-rgb),.04); }
.tabla-resumen tr:hover td { background: rgba(var(--accent-2-rgb),.03); }
.tabla-resumen td:first-child {
  font-family: var(--font-mono); font-size: .75rem;
  color: var(--accent-strong); font-weight: 600;
}
html.dark-mode .tabla-resumen td:first-child, body.dark-mode .tabla-resumen td:first-child { color: var(--accent); }
@media(max-width: 600px) {
  .tabla-resumen { font-size: .8rem; }
  .tabla-resumen th, .tabla-resumen td { padding: 9px 11px; }
}

/* ═══════════════════════════════════════════════════
   TABLA DE ANALISIS — la tabla de signos TRANSPUESTA
   ───────────────────────────────────────────────────
   Cada COLUMNA es un intervalo, y entre intervalo e intervalo va la
   columna del punto que los separa. La fila de encabezado funciona
   entonces como el eje x, particionado en los puntos criticos y en
   los puntos problema. Las filas son f'(x), f(x) y la conclusion.

   Es la forma en que Sebastian resuelve estos ejercicios a mano y la
   que mejor se lee: el signo, la flecha y la conclusion de un mismo
   tramo quedan en la misma columna, uno debajo del otro.

   DE DONDE SALE
   El marcado ya existia en el apunte "Estudio completo de funciones",
   pero con su CSS metido en un <style> dentro del contenido —patron
   prohibido, ver REFERENCIA-tecnica.md §9— y con seis colores
   literales: #16a34a, #dc2626, #2563eb, #9333ea, #d4880f y un
   var(--gold-dark) que ya no existe. Fuera de Premium eso desentona.
   Aca vive con tokens del contrato y funciona en los cinco layouts.
   El apunte viejo conserva su <style> y NO cambia de aspecto: se
   emite despues de las hojas y le gana por orden de cascada.

   El semaforo no es decoracion: verde = positivo, rojo = negativo,
   que es la semantica que --estado-ok / --estado-critico ya tienen.
═══════════════════════════════════════════════════ */

/* La tabla se ensancha con la cantidad de intervalos y en un telefono
   no entra nunca. El scroll lo pone el WRAPPER —hoy la utilidad
   .scroll-x de componentes/scroll-x.css— y no la tabla, para que no
   arrastre con el a toda la .section-body.

   Hasta la 1.10.0 el wrapper era una clase propia, .tabla-analisis-wrap,
   con su `overflow-x: auto` y nada mas. Se reemplazo por .scroll-x, que
   hace lo mismo y ademas avisa que hay contenido al costado. */

.tabla-analisis {
  width: 100%; min-width: 480px;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: .78rem;
  margin: 0;
  border-radius: 0;
}
.tabla-analisis th {
  background: var(--card2);
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: center;
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent-2);
  white-space: nowrap;
  border-radius: 0;
}
html.dark-mode .tabla-analisis th, body.dark-mode .tabla-analisis th { color: var(--accent); }
.tabla-analisis td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: center;
  color: var(--text);
  background: transparent;
  white-space: nowrap;
}
/* La primera columna nombra la fila: alineada a la izquierda y con
   fondo propio, para que no compita con los datos. */
.tabla-analisis td:first-child {
  text-align: left;
  color: var(--text-2);
  background: var(--card2);
  font-weight: 500;
  white-space: normal;
  min-width: 92px;
}
/* Sin cebra ni hover: cada celda es un dato puntual, no una fila que
   se lee de izquierda a derecha. */
.tabla-analisis tr:nth-child(even) td,
.tabla-analisis tr:hover td { background: transparent; }
.tabla-analisis tr:nth-child(even) td:first-child,
.tabla-analisis tr:hover td:first-child { background: var(--card2); }

/* ⚠️ TODOS LOS MODIFICADORES VAN CALIFICADOS CON `td`.
   `.tabla-analisis td` ya fija un color y tiene especificidad (0,1,1);
   un `.signo-pos` suelto es (0,1,0) y PIERDE, sin importar el orden.
   Escrito asi, los signos salian del color del texto en vez de verde
   y rojo. Es el defecto que arrastraba el <style> del apunte
   "Estudio completo de funciones", donde la tabla nacio: ahi las
   celdas de signo nunca llegaron a pintarse. */

/* Signos */
.tabla-analisis td.signo-pos  { color: var(--estado-ok);      font-size: 1.1em; font-weight: 700; }
.tabla-analisis td.signo-neg  { color: var(--estado-critico); font-size: 1.1em; font-weight: 700; }
.tabla-analisis td.signo-cero { color: var(--gray);           font-weight: 700; }

/* Flechas de crecimiento */
.tabla-analisis td.flecha-sube { color: var(--estado-ok);      font-size: 1.2em; }
.tabla-analisis td.flecha-baja { color: var(--estado-critico); font-size: 1.2em; }

/* Concavidad. Mismo par verde/rojo que los signos a proposito: la
   concavidad la decide el signo de f'', asi que el color repite el
   dato en vez de inventar una tercera clave que haya que aprender. */
.tabla-analisis td.concava-arriba { color: var(--estado-ok);      font-size: 1.25em; }
.tabla-analisis td.concava-abajo  { color: var(--estado-critico); font-size: 1.25em; }

/* Punto problema: fuera del dominio */
.tabla-analisis td.pp-cell {
  color: var(--gray-light);
  background: var(--bg2);
  font-size: .85em;
}

/* Valor de la funcion y etiqueta del extremo */
.tabla-analisis td.valor-tabla { font-weight: 600; color: var(--accent-2); }
html.dark-mode .tabla-analisis td.valor-tabla, body.dark-mode .tabla-analisis td.valor-tabla { color: var(--accent); }
.tabla-analisis td.label-extremo {
  font-size: .78em; font-weight: 700;
  color: var(--accent-strong);
  white-space: nowrap;
}
html.dark-mode .tabla-analisis td.label-extremo, body.dark-mode .tabla-analisis td.label-extremo { color: var(--accent); }

@media(max-width: 600px) {
  .tabla-analisis { font-size: .72rem; }
  .tabla-analisis th,
  .tabla-analisis td { padding: 6px 8px; }
}


/* ═══════════════════════════════════════════════════
   PARAM GRID
═══════════════════════════════════════════════════ */
.param-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin: 16px 0;
}
.param-card {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
  text-align: center;
  transition: background var(--t), border-color var(--t), transform .2s, box-shadow .2s;
}
.param-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(var(--accent-rgb),.3);
}
.param-name {
  font-family: var(--font-mono); font-size: .68rem;
  color: var(--accent-strong); text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 8px;
  transition: color var(--t);
}
html.dark-mode .param-name, body.dark-mode .param-name { color: var(--accent); }
.param-formula { font-size: 1.05rem; color: var(--accent-2); transition: color var(--t); }
html.dark-mode .param-formula, body.dark-mode .param-formula { color: var(--text); }
.param-desc { font-size: .82rem; color: var(--gray); margin-top: 5px; }

/* ═══════════════════════════════════════════════════
   CHECKLIST GRID
═══════════════════════════════════════════════════ */
.checklist-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin: 16px 0;
}
@media(max-width: 600px) { .checklist-grid { grid-template-columns: 1fr; } }
.check-card {
  background: var(--card2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; align-items: flex-start; gap: 12px;
  transition: background var(--t), border-color var(--t);
}
.check-num {
  flex-shrink: 0; width: 26px; height: 26px;
  /* ⚠️ EL UNICO CAMBIO VISIBLE EN PREMIUM DE LA FASE 5.
     Era `color: #fff` sobre el dorado: 2,1:1, muy por debajo de AA.
     Con --on-accent pasa a 6,6:1 (el navy de Premium sobre el
     dorado). No es un efecto colateral del refactor de tokens —
     es un contraste que ya estaba mal y que se vio al mirarlo
     desde Neo, donde el blanco sobre lima era todavia peor. */
  background: var(--accent); color: var(--on-accent); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
}
.check-card p { margin: 0; font-size: .9rem; }

/* ═══════════════════════════════════════════════════
   RUFFINI
   ───────────────────────────────────────────────────
   QUÉ PROBLEMA RESUELVE
   Ruffini se entiende cuando se ve el ciclo: bajás el
   primer coeficiente, lo multiplicás por la raíz, subís
   el producto, sumás. Una tabla de números sola no dice
   eso, y por eso los apuntes la venían acompañando de un
   párrafo que narra el algoritmo paso por paso. Acá el
   rótulo de cada fila lo dice, y el párrafo puede volver
   a explicar el POR QUÉ en vez del CÓMO.

   Antes vivía dos veces: con clases propias y un <style>
   embebido en tecnicas-de-factorizacion, y con style=""
   inline en indeterminacion-0-sobre-0. Dos dibujos
   distintos del mismo método.

   CÓMO SE USA
   Tres filas, siempre. La raíz va en la primera con
   rowspan="3" y queda centrada al lado de "× raíz", que
   es justo por lo que se multiplica.

       <div class="scroll-x">
       <table class="ruffini">
         <tr>
           <th class="rf-rot" scope="row">Coeficientes</th>
           <td class="rf-raiz" rowspan="3">2</td>
           <td class="rf-coef">1</td> … <td class="rf-coef">-8</td>
         </tr>
         <tr>
           <th class="rf-rot" scope="row">× raíz</th>
           <td class="rf-prod"></td> … <td class="rf-prod">8</td>
         </tr>
         <tr>
           <th class="rf-rot" scope="row">Suma</th>
           <td class="rf-res">1</td> …
           <td class="rf-res rf-resto rf-resto--cero">0</td>
         </tr>
       </table>
       </div>

   Las tres filas llevan la MISMA cantidad de celdas: la
   de productos arranca con una vacía. De eso depende que
   la última columna —el resto— quede alineada, y por eso
   el separador punteado sale de `:last-child` y no de una
   clase que haya que acordarse de poner.

   EL RESTO ES EL PUNTO
   La última celda de la fila "Suma" decide todo: si da 0
   la raíz sirve y el polinomio se factoriza; si no, ese
   número no era raíz. Por eso lleva `rf-resto` más uno de
   los dos modificadores, y el color sale de --estado-ok /
   --estado-aviso, que son los tokens de estado del
   contrato. NO se usa --accent para esto: el acento es
   color de marca, no de semáforo.
═══════════════════════════════════════════════════ */
.ruffini {
  /* `separate` y no `collapse`: con collapse el border-radius
     de la tabla no recorta las celdas de las esquinas. */
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 auto;
  font-family: var(--font-mono);
  font-size: 1rem;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: background var(--t), border-color var(--t);
}
.ruffini td, .ruffini th { text-align: center; white-space: nowrap; }

/* Rótulo de fila: dice el ciclo del algoritmo. Discreto a
   propósito — es una guía de lectura, no un dato. */
.rf-rot {
  /* `th` generico trae background --accent-2 y color --on-accent-2. Sin
     anular el fondo, --text-2 cae sobre navy y da 1,14:1 en Aurora. */
  background: transparent;
  font-size: .62rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2);
  text-align: right !important;
  padding: 8px 12px;
  border-right: 1px solid var(--border);
}

/* La raíz, separada por la línea gruesa que es la firma del método. */
.rf-raiz {
  /* El numero va en --text, no en --accent: es un dato que hay que leer, y
     el acento sobre --card2 daba 2,53:1 en Premium. Es la misma regla que
     REFERENCIA-deslizadores.md seccion 9. El acento se queda en la linea. */
  color: var(--text);
  font-weight: 700; font-size: 1.1rem;
  padding: 11px 20px;
  vertical-align: middle;
  border-right: 2px solid var(--accent);
}

.rf-coef { color: var(--text); font-weight: 600; padding: 10px 20px; }
/* --text-2 y no --gray: sobre --accent-dim, --gray daba 4,39:1 en Neo
   oscuro, por debajo de AA. */
.rf-prod { color: var(--text-2); background: var(--accent-dim); padding: 8px 20px; }
.rf-res  {
  color: var(--text); font-weight: 700; padding: 11px 20px;
  border-top: 2px solid var(--accent);
}

/* La columna del resto, punteada. Sale de :last-child porque las
   tres filas tienen la misma cantidad de celdas. */
.ruffini tr > *:last-child { border-left: 2px dashed var(--border); }

/* El resto y su veredicto. */
.rf-resto--cero    { color: var(--estado-ok); }
.rf-resto--no-cero { color: var(--estado-aviso); }