/* ============================================================================
 * iShop · css/07-control.css — mesa de control (RF-19)
 * ----------------------------------------------------------------------------
 * El mismo lenguaje de vidrio en registro operativo: paneles translúcidos sobre
 * la malla, ahora más apagada para que los datos manden.
 *
 * El kill switch se confirma en una HOJA que sube desde abajo con asa de
 * arrastre: una acción irreversible no puede resolverse con un clic suelto.
 * ========================================================================== */

@layer secciones {

  /* La malla se apaga en la consola: aquí lo que tiene que destacar son las
     cifras, no el fondo. */
  body[data-pagina='control']::before { opacity: 0.45; }

  /* ======================================================================
   * Barra del drop
   * ==================================================================== */
  .drop {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5);
    border-radius: var(--radius-3);
    align-items: center;
    margin-block-end: var(--space-4);
  }

  @media (min-width: 68rem) {
    .drop { grid-template-columns: auto 1fr auto; }
  }

  .drop__reloj {
    font-family: var(--font-display);
    font-size: var(--step-4);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .drop__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--space-4);
    align-items: start;
  }

  /* ======================================================================
   * Conteos por estado
   * ==================================================================== */
  .estados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: var(--space-3);
    margin-block-end: var(--space-4);
  }

  .estado-col {
    padding: var(--space-4);
    border-radius: var(--radius-2);
    background: var(--surface-1);
    border: 1px solid var(--line);
  }

  .estado-col__n {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: color-mix(in oklab, var(--tono, var(--ink)) 32%, var(--ink));
  }

  .estado-col__et {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--step--1);
    color: var(--ink-3);
    margin-block-start: var(--space-2);
  }

  .estado-col__barra {
    block-size: 3px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    margin-block-start: var(--space-3);
    overflow: hidden;
  }

  .estado-col__barra span {
    display: block;
    block-size: 100%;
    border-radius: inherit;
    background: var(--tono, var(--ink));
    box-shadow: 0 0 8px color-mix(in oklab, var(--tono, var(--ink)) 60%, transparent);
    inline-size: calc(var(--avance, 0) * 100%);
    transition: inline-size var(--dur-3) var(--ease-out);
  }

  /* ======================================================================
   * Paneles
   * ==================================================================== */
  .paneles { display: grid; gap: var(--space-4); padding-block-end: var(--space-7); }

  @media (min-width: 76rem) {
    .paneles { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
    .panel--ancho { grid-column: 1 / -1; }
  }

  .panel {
    padding: var(--space-5);
    border-radius: var(--radius-3);
    display: grid;
    gap: var(--space-4);
    align-content: start;
  }

  .panel__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--line);
  }

  .panel__titulo {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .panel__ref { font-size: var(--step--1); color: var(--ink-3); font-family: var(--font-mono); }

  .panel__scroll {
    max-block-size: 22rem;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
  }

  /* ======================================================================
   * Runs
   * ==================================================================== */
  .runs td { font-size: var(--step--1); }
  .runs__id { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); white-space: nowrap; }
  .runs__cliente { font-weight: 700; white-space: nowrap; }
  .runs__doc { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3); }

  .runs__producto {
    color: var(--ink-2);
    max-inline-size: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .runs tbody tr[data-terminal='si'] { color: var(--ink-3); }

  .revelar-pii {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ink-3);
    padding: 0.25em 0.6em;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    transition: color var(--dur-1) var(--ease-standard),
                background var(--dur-1) var(--ease-standard);
  }

  .revelar-pii:hover { color: var(--ink); background: var(--surface-2); }

  /* ======================================================================
   * Latencias
   * ==================================================================== */
  .latencias { display: grid; gap: var(--space-3); }

  .lat {
    display: grid;
    grid-template-columns: minmax(7rem, auto) 1fr auto;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--step--1);
  }

  .lat__pista {
    position: relative;
    block-size: 1.5rem;
    background: var(--surface-2);
    border-radius: var(--radius-pill);
    overflow: hidden;
  }

  .lat__p50, .lat__p95 { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; }

  .lat__p95 {
    inline-size: calc(var(--p95) * 100%);
    background: repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--tono, var(--accent)) 28%, transparent) 0 4px,
      transparent 4px 8px);
  }

  .lat__p50 {
    inline-size: calc(var(--p50) * 100%);
    background: color-mix(in oklab, var(--tono, var(--accent)) 45%, transparent);
  }

  .lat__tope { position: absolute; inset-block: -3px; inline-size: 2px; background: var(--danger); }
  .lat__cifra { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }

  /* ======================================================================
   * Colectores y errores
   * ==================================================================== */
  .colectores, .errores { display: grid; gap: 0; }

  .colector {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--line);
    font-size: var(--step--1);
  }

  .colector:last-child { border-block-end: 0; }
  .colector__nombre { font-weight: 600; }

  .colector__fuente {
    font-size: 0.7rem;
    padding: 0.2em 0.6em;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--ink-2);
  }

  .colector[data-degradado='si'] .colector__fuente {
    background: color-mix(in oklab, var(--warn) 26%, transparent);
    color: color-mix(in oklab, var(--warn) 40%, var(--ink));
  }

  .colector__lat { font-variant-numeric: tabular-nums; color: var(--ink-3); min-inline-size: 4.5rem; text-align: end; }

  .error-fila {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: var(--space-1) var(--space-4);
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--line);
  }

  .error-fila:last-child { border-block-end: 0; }

  .error-fila__codigo {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: color-mix(in oklab, var(--tono, var(--ink)) 35%, var(--ink));
  }

  .error-fila__n {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .error-fila__titulo { grid-column: 1; font-size: var(--step--1); color: var(--ink-3); }

  /* ======================================================================
   * Embudo
   * ==================================================================== */
  .embudo { display: grid; gap: var(--space-2); }

  .embudo__paso {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr auto;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--step--1);
  }

  .embudo__barra {
    block-size: 1.5rem;
    background: var(--surface-2);
    border-radius: var(--radius-pill);
    overflow: hidden;
  }

  .embudo__barra span {
    display: block;
    block-size: 100%;
    border-radius: inherit;
    background: color-mix(in oklab, var(--accent) 40%, transparent);
    inline-size: calc(var(--avance) * 100%);
    transition: inline-size var(--dur-3) var(--ease-out);
  }

  .embudo__perdida { font-variant-numeric: tabular-nums; color: var(--danger); min-inline-size: 3.5rem; text-align: end; }

  /* ======================================================================
   * Kill switch — hoja con topes de arrastre
   * ==================================================================== */
  .kill {
    --bt-fondo: color-mix(in oklab, var(--danger) 22%, transparent);
    --bt-tinta: color-mix(in oklab, var(--danger) 35%, var(--ink));
    --bt-borde: color-mix(in oklab, var(--danger) 42%, transparent);
  }

  .kill:hover { --bt-fondo: color-mix(in oklab, var(--danger) 32%, transparent); }
  .kill[data-activo='si'] { --bt-fondo: var(--danger); --bt-tinta: #fff; --bt-borde: var(--danger); }

  /* La hoja sube desde abajo, con asa de arrastre. */
  .hoja::backdrop { background: var(--overlay); backdrop-filter: blur(6px); }

  .hoja {
    margin: auto auto 0;
    inline-size: min(100%, 30rem);
    max-block-size: 88svb;
    padding: var(--space-3) var(--space-6) var(--space-7);
    background: rgb(24 20 40 / 0.92);
    border: 1px solid var(--line);
    border-start-start-radius: var(--radius-3);
    border-start-end-radius: var(--radius-3);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    box-shadow: var(--shadow-3);
    backdrop-filter: blur(var(--ui-blur)) saturate(var(--ui-satura));
    -webkit-backdrop-filter: blur(var(--ui-blur)) saturate(var(--ui-satura));
    display: grid;
    gap: var(--space-4);
    color: var(--ink);
  }

  /* Asa: la señal de que esto se arrastra, aunque también se cierre con Esc. */
  .hoja__asa {
    inline-size: 2.5rem;
    block-size: 4px;
    border-radius: var(--radius-pill);
    background: var(--line-strong);
    justify-self: center;
    margin-block-end: var(--space-2);
  }

  .hoja__lista {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    font-size: var(--step--1);
    color: var(--ink-2);
  }

  .hoja__lista li {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: var(--space-2);
    line-height: 1.45;
  }

  .hoja__lista li::before {
    content: attr(data-marca);
    color: var(--ink-3);
    font-weight: 700;
  }

  /* ======================================================================
   * Auditoría
   * ==================================================================== */
  .auditoria {
    display: grid;
    gap: 0;
    max-block-size: 17rem;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    font-family: var(--font-mono);
    font-size: 0.72rem;
  }

  .auditoria__linea {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: var(--space-3);
    padding-block: var(--space-2);
    border-block-end: 1px solid var(--line);
    color: var(--ink-2);
    align-items: baseline;
  }

  .auditoria__ts { color: var(--ink-3); white-space: nowrap; }

  .auditoria__tipo {
    color: color-mix(in oklab, var(--tono, var(--ink)) 35%, var(--ink));
    white-space: nowrap;
  }
}