/* Estilos solo de la escala de notas (tabla, tiradores, pantalla completa, botones de tamaño). Los comunes están en styles.css */

    /* Móvil: una columna. Escritorio: parámetros a la izquierda, tabla a la derecha */
    .panel-inputs {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

@media (min-width: 860px) {
        .layout {
        display: grid;
        grid-template-columns: minmax(320px, 400px) 1fr;
        gap: 2rem;
        align-items: start;
      }

        .panel-inputs {
        position: sticky;
        top: 1rem;
      }
}

    .scale-options {
      grid-column: 1 / -1;
      border-top: 1px solid var(--color-border);
      padding-top: 0.25rem;
    }

    .scale-options summary {
      display: flex;
      align-items: center;
      min-height: 44px;
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
    }

    .scale-options summary {
      list-style: none;
      justify-content: space-between;
    }

    .scale-options summary::-webkit-details-marker {
      display: none;
    }

    /* Flecha que gira al abrir */
    .scale-options summary::after {
      content: "";
      width: 0.5rem;
      height: 0.5rem;
      margin-right: 0.25rem;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg);
      transition: transform 0.2s ease;
    }

    .scale-options[open] summary::after {
      transform: rotate(-135deg);
    }

@media (prefers-reduced-motion: reduce) {
        .scale-options summary::after {
        transition: none;
      }
}

    .scale-options summary:focus-visible {
      outline: 2px solid var(--color-border-focus);
      outline-offset: 2px;
      border-radius: 4px;
    }

    .scale-options[open] summary {
      margin-bottom: 0.5rem;
    }

    /* Barra de Acciones de la Tabla */
    .table-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
    }

    .table-title {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--color-text);
    }

    /* Celular: los botones se reparten el ancho y bajan de línea; en pantallas amplias quedan en una fila */
    .btn-group {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      width: 100%;
    }

    .btn-group .btn {
      flex: 1 1 auto;
      justify-content: center;
    }

@media (min-width: 860px) {
        .btn-group {
        width: auto;
      }
}

    /* Tabla */
    /* La tabla se reparte en tantas columnas como quepan (JS fija --cols) */
    .table-container {
      display: grid;
      grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
      overflow-x: auto;
      border-radius: 12px;
      border: 1px solid var(--color-border);
      background: var(--color-card);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .table-container table + table {
      border-left: 1px solid var(--color-border);
    }

    table {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      text-align: center;
      font-size: 1rem;
      font-variant-numeric: tabular-nums;
    }

    thead {
      background: var(--color-head);
    }

    th {
      position: relative;
      padding: 0.75rem 0.5rem;
      font-weight: 600;
      color: var(--color-text);
      border-bottom: 2px solid var(--color-border);
    }

    /* Asa para arrastrar el borde de la columna, como en una hoja de cálculo */

@media (pointer: coarse) {
        .col-resizer {
        width: 28px;
        right: -14px;
      }

        .col-resizer::after {
        left: 12px;
      }
}

    .col-resizer {
      position: absolute;
      top: 0;
      right: -7px;
      width: 14px;
      height: 100%;
      cursor: col-resize;
      touch-action: none;
      z-index: 1;
    }

    /* Siempre visible: una barra corta (3,0:1 de contraste) que crece al pasar el cursor */
    .col-resizer::after {
      content: "";
      position: absolute;
      top: 25%;
      bottom: 25%;
      left: 5px;
      width: 4px;
      border-radius: 2px;
      background: var(--color-text-muted);
      opacity: 0.6;
      transition: background 0.15s ease, opacity 0.15s ease, top 0.15s ease, bottom 0.15s ease;
    }

    .col-resizer:hover::after,
    .col-resizer:focus-visible::after,
    .col-resizer.dragging::after {
      background: var(--color-primary);
      opacity: 1;
      top: 10%;
      bottom: 10%;
    }

    /* Aviso al cargar: las barras laten dos veces para mostrar que se pueden mover */
    @keyframes grip-nudge {
      0%, 100% { transform: scaleY(1); }
      50% { transform: scaleY(1.6); background: var(--color-primary); opacity: 1; }
    }

    .col-resizer::after {
      animation: grip-nudge 0.9s ease-in-out 0.6s 2;
    }

@media (prefers-reduced-motion: reduce) {
        .col-resizer::after {
        animation: none;
      }
}

    .col-resizer:focus-visible {
      outline: none;
    }

    td {
      padding: 0.55rem 0.5rem;
      border-bottom: 1px solid var(--color-border);
    }

    tbody tr:last-child td {
      border-bottom: none;
    }

    tbody tr:hover {
      background-color: var(--color-row-hover);
    }

    tbody tr.row-selected {
      background-color: var(--color-highlight);
      font-weight: 700;
    }

    tbody tr.row-selected td:first-child {
      border-left: 4px solid var(--color-highlight-border);
    }

    .td-nota {
      font-weight: 700;
      font-size: 1.05rem;
    }

    /* Firma: la línea del 4,0 separa reprobatorio de aprobatorio */
    tbody tr.pass-line td {
      padding-block: 0.15rem;
      border-top: 2px solid var(--color-blue);
      border-bottom: 0;
      background: var(--color-head);
      color: var(--color-blue);
      font-size: max(0.75em, 11px);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    /* Marco redimensionable: esquina inferior derecha + pie con la pista */
    .table-frame {
      position: relative;
      max-width: 100%;
    }

    .table-frame.is-sized {
      display: flex;
      flex-direction: column;
    }

    .table-frame.is-sized .table-container {
      flex: 1 1 0;
      min-height: 0;
      overflow-y: auto;
    }

    .frame-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      padding-top: 0.5rem;
      font-size: 0.875rem;
      color: var(--color-text-muted);
    }

    .frame-footer {
      flex-wrap: wrap;
    }

    .frame-footer > span {
      flex: 1;
    }

    /* Los tiradores de tamaño y su instrucción son para mouse; en celular se usa "Pantalla completa" */
    .frame-footer > .hint-drag {
      display: none;
    }

    .frame-footer > .hint-touch {
      flex: 1 1 100%;
      order: 2;
    }

    .btn-full {
      flex: 1 1 auto;
      justify-content: center;
    }

@media (min-width: 860px) {
        .frame-footer > .hint-drag {
        display: block;
      }

        .frame-footer > .hint-touch {
        display: none;
      }

        .btn-full {
        flex: none;
      }
}

    /* Ocultar parámetros: la tabla toma todo el ancho */
    .layout.panel-collapsed .panel-inputs {
      display: none;
    }

@media (min-width: 860px) {
        .layout.panel-collapsed {
        grid-template-columns: 1fr;
      }
}

    /* Pestaña en la parte alta del borde izquierdo de la tabla, dentro del hueco entre paneles */
    /* Zona táctil de 44 px de ancho */
    .panel-toggle::before {
      content: "";
      position: absolute;
      inset: 0 -8px;
    }

    .panel-toggle {
      position: absolute;
      top: 4rem;
      left: -14px;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 28px;
      height: 104px;
      padding: 0;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-card);
      color: var(--color-text);
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
      transition: background 0.15s ease, color 0.15s ease;
    }

    .panel-toggle:hover {
      background: var(--color-primary);
      color: var(--color-on-primary);
    }

    .panel-toggle:focus-visible {
      outline: 2px solid var(--color-border-focus);
      outline-offset: 2px;
    }

    .panel-toggle .icon {
      transition: transform 0.2s ease;
    }

    /* < cuando los parámetros están visibles, > cuando están ocultos */
    .layout.panel-collapsed .panel-toggle .icon {
      transform: rotate(180deg);
    }

    /* En celular los parámetros quedan arriba: la flecha apunta arriba o abajo */

@media (max-width: 859px) {
        .panel-toggle .icon {
        transform: rotate(90deg);
      }

        .layout.panel-collapsed .panel-toggle .icon {
        transform: rotate(270deg);
      }
}

@media (prefers-reduced-motion: reduce) {
        .panel-toggle .icon {
        transition: none;
      }
}

    .panel-table:fullscreen .panel-toggle {
      display: none;
    }

    .panel-table:fullscreen {
      background: var(--color-bg);
      padding: 1rem clamp(1rem, 3vw, 3rem);
      overflow: auto;
    }

    .frame-grip {
      flex: none;
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      margin: -0.5rem -0.5rem -0.75rem 0;
      border: 0;
      border-radius: 8px;
      background: none;
      color: var(--color-text-muted);
      cursor: nwse-resize;
      touch-action: none;
    }

    .frame-grip:hover,
    .frame-grip:focus-visible,
    .frame-grip.dragging {
      color: var(--color-primary);
      background: var(--color-row-hover);
    }

    /* Esquina superior derecha: mitad dentro y mitad fuera del marco, siempre a la vista */
    .frame-grip-top {
      position: absolute;
      top: -12px;
      right: -12px;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      padding: 0;
      border: 1px solid var(--color-border);
      border-radius: 50%;
      background: var(--color-card);
      color: var(--color-text);
      cursor: nesw-resize;
      touch-action: none;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
      transition: background 0.15s ease, color 0.15s ease;
    }

    /* Zona táctil de 44 px */
    .frame-grip-top::before {
      content: "";
      position: absolute;
      inset: -8px;
    }

    .frame-grip-top:hover,
    .frame-grip-top:focus-visible,
    .frame-grip-top.dragging {
      background: var(--color-primary);
      color: var(--color-on-primary);
    }

    .frame-grip-top:focus-visible {
      outline: 2px solid var(--color-border-focus);
      outline-offset: 2px;
    }

    .frame-grip-top svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Aviso al cargar: un anillo late dos veces alrededor de las esquinas */
    @keyframes ring-nudge {
      0% { box-shadow: 0 0 0 0 var(--color-primary); }
      100% { box-shadow: 0 0 0 10px transparent; }
    }

    .frame-grip-top,
    .frame-grip {
      animation: ring-nudge 1.1s ease-out 0.8s 2;
    }

@media (prefers-reduced-motion: reduce) {
        .frame-grip-top,
        .frame-grip {
        animation: none;
      }
}

    .panel-table:fullscreen .frame-grip-top {
      display: none;
    }

    .frame-grip svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
    }

    /* Modo ajustado: todas las filas caben en el marco y la letra sigue a la altura de fila */
    .table-container.fit table {
      font-size: var(--fs);
    }

    .table-container.fit th {
      height: var(--head-h);
      padding-block: 0;
    }

    .table-container.fit td {
      height: var(--row-h);
      padding-block: 0;
    }

    .table-container.fit tbody tr.pass-line td {
      height: calc(var(--row-h) * 0.7);
    }

    .table-container.fit .td-nota {
      font-size: 1em;
    }

    .empty-state {
      padding: 2rem;
      text-align: center;
      color: var(--color-text-muted);
    }

    .info-table {
      width: 100%;
      max-width: 420px;
      table-layout: auto;
      text-align: left;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      border-collapse: separate;
      border-spacing: 0;
      overflow: hidden;
    }

    .info-table caption {
      padding-bottom: 0.4rem;
      font-size: 0.9rem;
      font-weight: 600;
      text-align: left;
    }

    .info-table th,
    .info-table td {
      padding: 0.5rem 0.75rem;
    }

    .action-status {
      min-height: 1.4em;
      margin: -0.25rem 0 0.5rem;
      font-size: 0.875rem;
      color: var(--color-text-muted);
      text-align: right;
    }

    /* Encabezado exclusivo para imprimir */
    .print-only-header {
      display: none;
    }

@media print {
        /* Mostrar encabezado formal de prueba */
        .print-only-header {
        display: block !important;
        border-bottom: 2px solid #000;
        padding-bottom: 6px;
        margin-bottom: 10px;
      }

        .print-title {
        font-size: 14pt;
        font-weight: bold;
        text-transform: uppercase;
        display: flex;
        justify-content: space-between;
      }

        .print-meta-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        font-size: 9.5pt;
        margin-top: 4px;
      }

        .print-fillable {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        font-size: 9.5pt;
        margin-top: 6px;
      }

        /* Formatear la tabla para que quepa en 1 página */
        .table-container {
        max-height: none !important;
        overflow: visible !important;
        border: none !important;
        box-shadow: none !important;
        background: none !important;
      }

        table {
        font-size: 8.5pt !important;
        width: 100% !important;
        break-inside: avoid;
      }

        thead {
        position: static !important;
        background: none !important;
      }

        th, td {
        padding: 2.5px 4px !important;
        border: 1px solid #ccc !important;
        color: #000 !important;
      }

        tbody tr.row-selected {
        background: none !important;
      }

        .col-resizer,
        .panel-toggle,
        .frame-grip-top,
        .frame-footer {
        display: none !important;
      }

        .table-frame {
        width: auto !important;
        height: auto !important;
        display: block !important;
      }

        .table-container {
        height: auto !important;
        overflow: visible !important;
      }

        tbody tr.pass-line td {
        border-top: 2px solid #000 !important;
        background: none !important;
      }

        .td-nota {
        font-weight: bold !important;
      }
}

    /* Celular: sin tiradores de arrastre (se usa "Pantalla completa") */

@media (max-width: 859px) {
        .frame-grip,
        .frame-grip-top {
        display: none;
      }
}

    /* Ver toda la tabla: al llegar, el marco queda pegado al borde superior */
    .table-frame {
      scroll-margin-top: 8px;
    }

    /* Tablas angostas (celular): letra y márgenes mínimos para que todo quepa */
    .table-container.compact th,
    .table-container.compact td {
      padding-inline: 2px;
    }

    .table-container.compact th {
      font-size: 0.85em;
    }

    .table-container.compact .col-resizer {
      display: none;
    }

    /* En pantalla completa en celular, la tabla toma toda la pantalla (los botones de arriba se ocultan) */

@media (max-width: 859px) {
        .panel-table:fullscreen .table-actions {
        display: none;
      }
}

    /* Ajustada a la pantalla: filas bajas, sin alto de línea extra */
    .table-container.fit td,
    .table-container.fit th {
      line-height: 1.1;
    }

    /* Celular: los parámetros van arriba de la tabla, así que la pestaña lateral sobra (taparía la primera columna) */

@media (max-width: 859px) {
        .panel-toggle {
        display: none;
      }

        .layout.panel-collapsed .panel-inputs {
        display: flex;
      }
}

    /* Botones flotantes de tamaño de los números (solo en pantalla completa) */
    .zoom-dock {
      position: fixed;
      right: max(12px, env(safe-area-inset-right));
      bottom: max(12px, env(safe-area-inset-bottom));
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.25rem;
      border-radius: 14px;
      border: 1px solid var(--color-border);
      background: var(--color-card);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }

    .zoom-controls {
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    .zoom-dock.minimized .zoom-controls {
      display: none;
    }

    .zoom-btn,
    .zoom-level {
      min-width: 48px;
      height: 48px;
      border-radius: 10px;
      border: 1px solid var(--color-border);
      background: var(--color-head);
      color: var(--color-text);
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      display: inline-grid;
      place-items: center;
    }

    .zoom-level {
      min-width: 64px;
      font-size: 1rem;
      font-variant-numeric: tabular-nums;
    }

    .zoom-btn:hover:not(:disabled),
    .zoom-level:hover {
      background: var(--color-row-hover);
      border-color: var(--color-primary);
    }

    .zoom-btn:disabled {
      opacity: 0.4;
      cursor: default;
    }

    .zoom-btn:focus-visible,
    .zoom-level:focus-visible {
      outline: 2px solid var(--color-border-focus);
      outline-offset: 2px;
    }

    .zoom-toggle {
      font-size: 1rem;
    }

    .zoom-toggle .icon {
      transform: rotate(180deg);
    }

    .zoom-toggle[aria-expanded="true"] .t-closed,
    .zoom-toggle[aria-expanded="false"] .t-open {
      display: none;
    }

@media print {
        .zoom-dock {
        display: none !important;
      }
}

    /* Minimizado: translúcido al 40 % (opacidad 0,6) para no tapar del todo los números de abajo; con el mouse encima o con el teclado vuelve a verse completo */
    .zoom-dock {
      transition: opacity 0.2s ease;
    }

    .zoom-dock.minimized {
      opacity: 0.6;
    }

    /* Solo con mouse al pasar encima, o con teclado; tocar con el dedo no lo deja opaco */

@media (hover: hover) {
        .zoom-dock.minimized:hover {
        opacity: 1;
      }
}

    .zoom-dock.minimized:has(:focus-visible) {
      opacity: 1;
    }

@media (prefers-reduced-motion: reduce) {
        .zoom-dock {
        transition: none;
      }
}