/* Ajustes para móvil y pantallas táctiles. Va el último: gana a las reglas base de cada componente. */
/*
 * Móvil / táctil: objetivos de toque más grandes (WCAG 2.2 pide 24 px como mínimo; aquí 32–36 px),
 * textos por encima de 11 px y controles de formulario a 16 px (si no, iOS amplía la página al enfocarlos).
 */
@media (max-width: 640px), (pointer: coarse) {
  .detail__tab,
  .state__tick,
  .state__clear {
    min-height: 34px;
  }

  .trace__btn {
    min-height: 34px;
  }

  .focus-toggle,
  .panel__toggle {
    min-width: 36px;
    min-height: 36px;
  }

  summary {
    padding-block: 6px;
  }

  .editor .icon-btn {
    width: 32px;
    height: 32px;
  }

  .editor select,
  .editor input:not([type='checkbox']) {
    min-height: 32px;
  }

  .vendor-select__input,
  .player__speed select,
  .custom-packet select,
  .custom-packet input {
    font-size: 16px;
  }

  /* Un suelo de legibilidad para lo que es pequeño por diseño (etiquetas, cabeceras de tabla, pasos de tiempo).
     Manda sobre las reglas compactas de cada panel, por eso lleva !important; solo se aplica a estos elementos. */
  .badge,
  .pkt__tag,
  .pkt__head span,
  .state__tick,
  .pipe__stage small,
  .tcp-line,
  th {
    font-size: 11px !important;
  }

  /* Cabecera de la configuración: el nombre del router y, debajo, sus interfaces en letra pequeña. */
  .config__router-title {
    display: grid;
    gap: 2px;
  }

  .config__router .config__router-title .muted {
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
}

/* El recuadro «Reglas / Estado / Internet / Equipo» no necesita tanto alto en un móvil. */
@media (max-width: 640px) {
  @container main (max-width: 1099px) {
    .lab:not(.lab--tcp) .panel--device .level-block--context > .panel__body {
      height: min(300px, 40vh);
    }
  }
}

/*
 * Tablas de reglas en un móvil: cada regla es una tarjeta. Arriba, su número y las acciones (↑ ↓ ✕); debajo,
 * los campos en dos columnas, cada uno con su rótulo (el de la cabecera, que se oculta). El comentario ocupa toda la línea.
 */
@media (max-width: 1032px) {
  .table-scroll {
    overflow: visible;
  }

  .table--rules,
  .table--rules tbody {
    display: block;
    width: 100%;
  }

  /* La cabecera ya no se ve (los rótulos van en cada campo), pero sigue ahí para los lectores de pantalla. */
  .table--rules thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .table--rules tr {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: end; /* las entradas alineadas aunque un rótulo ocupe dos líneas */
    gap: 6px 10px;
    margin-bottom: var(--space-2);
    padding: 8px 10px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elev);
  }

  .table--rules td {
    display: block;
    grid-column: span 3; /* dos campos por línea */
    min-width: 0;
    padding: 0;
    border: 0;
  }

  /* Rótulo de cada campo, encima de él. */
  .table--rules td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  /* Cabecera de la tarjeta: «#2» a la izquierda y ↑ ↓ ✕ a la derecha; la casilla «activa» debajo, a línea completa. */
  .table--rules td.num {
    grid-column: 1 / span 2;
    grid-row: 1;
    align-self: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
  }

  .table--rules td.row-actions {
    grid-column: 4 / span 3;
    grid-row: 1;
    justify-self: end;
    display: flex;
    gap: 4px;
  }

  .table--rules td.col-enabled {
    grid-column: 3 / span 1;
    grid-row: 1;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* En la cabecera solo la casilla (su rótulo, «On», sobra junto al número y las acciones). */
  .table--rules td.col-enabled::before {
    display: none;
  }

  .table--rules td.col-enabled input {
    width: 20px;
    height: 20px;
  }

  .table--rules td.wide {
    grid-column: 1 / -1;
  }

  .table--rules td.narrow input,
  .table--rules td.state select,
  .table--rules td.wide input {
    width: 100%;
    min-width: 0;
  }

  .table--rules input[type='text'],
  .table--rules input[type='number'],
  .table--rules select {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 6px 8px;
    font-size: 16px;
  }

  .table--rules .icon-btn {
    width: 38px;
    height: 38px;
  }

  /* Regla sin nada que mostrar («sin reglas…») */
  .table--rules td[colspan] {
    grid-column: 1 / -1;
  }

  /* La regla desactivada se atenúa entera, salvo su casilla y sus acciones. */
  .table--rules tr.is-disabled td:not(.col-enabled):not(.row-actions):not(.num) {
    opacity: 0.4;
  }
}

/*
 * Tableta (641–1032 px): las tarjetas aprovechan el ancho con cuatro campos por línea, en una rejilla de 12 columnas
 * (arriba, el número, la casilla y las acciones). Hasta 640 px se queda en dos por línea (rejilla de 6).
 */
@media (min-width: 641px) and (max-width: 1032px) {
  .table--rules tr {
    grid-template-columns: repeat(12, 1fr);
  }

  .table--rules td {
    grid-column: span 3;
  }

  .table--rules td.num {
    grid-column: 1 / span 3;
  }

  .table--rules td.col-enabled {
    grid-column: 4 / span 3;
  }

  .table--rules td.row-actions {
    grid-column: 7 / span 6;
  }

  .table--rules td.wide,
  .table--rules td[colspan] {
    grid-column: 1 / -1;
  }
}