/* Paquete maquinas — corrección del frontend 13-sep-2026 (docs/auditoria/frontend-vistas-2026-09-13.md). */

/* ── Catálogo /targets ─────────────────────────────────────────────────────── */

/* Campo de nombre en la barra de filtros (MAQ-04/05): mismo aspecto que los select. */
.maq-filtros input[type="search"] {
  background: var(--ac-fondo-hundido);
  border: 1px solid var(--ac-borde);
  border-radius: var(--ac-radio-chico, var(--ac-r-sm));
  color: var(--ac-texto);
  min-height: 42px;
  padding: 0 0.6rem;
  font: inherit;
  font-size: 1rem;
  /* .form-control del tema le da margen inferior y el campo quedaba 16 px más
     alto que los select vecinos (medido: top 466 vs 482). */
  margin: 0;
}
.maq-filtros__nombre { flex: 2 1 220px; }
/* material-dashboard.js envuelve cada input.form-control en span.bmd-form-group
   con relleno superior: medido, el campo quedaba 16 px por encima de los select
   de la misma fila (top 467 vs 483). Los select no se envuelven. */
.maq-filtros .bmd-form-group {
  display: block;
  padding-top: 0;
  margin: 0;
}

/* Aviso de máquinas en redes no habilitadas (MAQ-01, decisión 1). */
.maq-nota-redes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--ac-espacio, 1rem);
  padding: 0.75rem 1rem;
  color: var(--ac-texto-suave);
  font-size: 0.9rem;
}
.maq-nota-redes a { color: var(--ac-acento); font-weight: 600; }

/* Tarjeta entera navegable con UN solo enlace (MAQ-10): el ::after del enlace
   del nombre cubre la tarjeta. Lo que va encima del enlace no es interactivo. */
.maq-tarjeta { position: relative; }
.maq-tarjeta__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.maq-tarjeta__enlace:focus-visible { outline: none; }
.maq-tarjeta:focus-within {
  outline: 2px solid var(--ac-acento);
  outline-offset: 2px;
}
.maq-tarjeta__chips { margin-top: 0.5rem; }
.maq-tarjeta__red {
  margin: 0.45rem 0 0;
  color: var(--ac-texto-suave);
  font-size: 0.8rem;
}
.maq-tarjeta__cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0;
}
.maq-tarjeta__cifras > div { display: flex; flex-direction: column; gap: 0.1rem; }
.maq-tarjeta__cifras dt {
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--ac-texto-tenue);
  text-transform: none;
}
.maq-tarjeta__cifras dd {
  margin: 0;
  font-family: var(--ac-fuente-cifras);
  color: var(--ac-texto);
}

/* ── Tabla de máquinas de una red (TargetWidget) ───────────────────────────── */

/* En móvil el nombre y el nivel salían en serif (MAQ-08): la celda heredaba la
   familia de <abbr>/<sup> del reset de material. */
#target-list td,
#target-list td abbr,
#target-list td sup,
#target-list .target-meta {
  font-family: var(--ac-fuente, inherit);
}

/* «0 de 2» en servicios y banderas (RED-06): que el icono y la cifra no se
   partan en dos líneas dentro de una columna de 4rem. */
#target-list td.maq-cuenta {
  white-space: nowrap;
  font-family: var(--ac-fuente-cifras, inherit);
}

/* ── Ficha /target/N ───────────────────────────────────────────────────────── */

/* Foco visible en el campo de bandera (FIC-07): era el único control sin
   anillo ni sombra al enfocarse. */
#claim-hash:focus-visible,
#claim-hash:focus {
  outline: 2px solid var(--ac-acento);
  outline-offset: 2px;
  box-shadow: none;
}

/* Subtítulo de la tarjeta de máquina: 10 px en gris tenue no llegaba a leerse
   (FIC-07). Solo dentro de la ficha. */
.target-card .card-category,
.target-index .card-stats .card-category {
  font-size: 0.8rem;
  color: var(--ac-texto-suave);
}

/* Menú de acciones con marcado de Bootstrap 4 (.dropdown-item). */
.target-actions-menu .dropdown-item { white-space: nowrap; }

/* EL MENÚ DE ACCIONES SE ABRÍA HACIA LA IZQUIERDA Y QUEDABA CORTADO.
 * `.card .card-footer` es flex con `space-between`; su único hijo, el span
 * `.maq-acciones`, quedaba al inicio y medía lo mismo que el botón, así que el
 * `margin-left:auto` de `.target-actions` no surtía efecto. El menú, alineado a la
 * derecha del botón (material.css), crecía hacia la izquierda fuera de la tarjeta y
 * lo recortaba `main#contenido` (overflow-x:hidden) a la altura de la barra lateral;
 * en móvil empezaba fuera de la pantalla. Ahora el span ocupa todo el pie (el botón
 * queda a la derecha) y es el bloque contenedor del menú, que nunca es más ancho
 * que el pie. `min(14rem, 100%)` vence al min-width:14rem de academia-design.css
 * en tarjetas estrechas. */
.card-footer > .maq-acciones {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ac-e-2);
  flex: 1 1 auto;
  min-width: 0;
}
.card-footer > .maq-acciones > .target-actions { position: static; }
.card-footer > .maq-acciones .target-actions-menu { min-width: min(14rem, 100%); max-width: 100%; }
.card-footer > .maq-acciones .target-actions-menu .dropdown-item { white-space: normal; }
.target-actions-menu .dropdown-item:focus-visible {
  outline: 2px solid var(--ac-acento);
  outline-offset: -2px;
}

/* Símbolo de enfrentamiento: antes 7vw con estilo en línea. */
.maq-vs {
  line-height: 1.5;
  font-size: clamp(2.5rem, 6vw, 5rem);
  text-align: center;
}
.maq-progreso { margin-top: 0.75rem; }
.maq-progreso__texto {
  margin: 0.35rem 0 0.75rem;
  font-family: var(--ac-fuente-cifras);
  font-size: 0.85rem;
  color: var(--ac-texto-suave);
}

/* «Tu siguiente paso» (FIC-12). */
.maq-siguiente {
  text-align: left;
  background: var(--ac-fondo-elevado);
  border: 1px solid var(--ac-borde);
  border-radius: var(--ac-r);
  padding: 1rem;
}
.maq-siguiente__titulo {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ac-texto);
}
.maq-siguiente__pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.maq-paso {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.6rem;
  align-items: start;
}
.maq-paso > i { margin-top: 0.2rem; }
.maq-paso strong { display: block; color: var(--ac-texto); font-size: 0.9rem; }
.maq-paso p { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--ac-texto-suave); overflow-wrap: anywhere; }
.maq-paso.is-hecho > i { color: var(--ac-exito); }
.maq-paso.is-actual > i { color: var(--ac-acento); }
.maq-paso.is-pendiente { opacity: 0.75; }
.maq-paso.is-pendiente > i { color: var(--ac-texto-tenue); }
.maq-siguiente__ip { font-family: var(--ac-fuente-codigo); }
.maq-siguiente__avance { font-family: var(--ac-fuente-cifras); }

.maq-estado-programado p { margin: 0 0 0.5rem; }

/* Tarjeta del alumno en la ficha (DIS-MPR-01): el título es texto
   («alumnaux · puesto 1.º»), no una cifra, y a 30 px mono no cabía en media
   columna por debajo de 1200 px (medido a 820: 137 px de texto en 118). */
@media (max-width: 1199.98px) {
  .target-index .card.card-stats > .card-header > .card-title {
    font-size: var(--ac-t-lg);
    overflow-wrap: anywhere;
  }
  /* DIS-MPR-R02: a 820 px el antetítulo salía «FUNDAMENTOS, I…» y «NIVEL 1 /
     NOVA…». Se lee entero con salto de línea, sin elipsis. */
  .maq-versus .card .card-header .card-category {
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
  }
}

/* DIS-MPR-R02: las dos tarjetas hermanas de la ficha (máquina y alumno) usaban
   dos jerarquías heredadas: 17 px la de la máquina y 30 px la del alumno en xl
   (20/20 por debajo de 1200). Una sola escala del sistema en todos los anchos. */
.maq-versus .card .card-header[class*="card-header-"] .card-title,
.maq-versus .card.card-stats > .card-header > .card-title {
  font-size: var(--ac-t-lg);
  overflow-wrap: anywhere;
}

/* «Forma parte de la red» y guías de la máquina (DIS-MPR-08): era text-info,
   el cian de material, único texto cian de la pantalla. */
.maq-nota-red { color: var(--ac-texto-suave); font-size: 0.9rem; }
.maq-nota-red a { color: var(--ac-acento); font-weight: 600; }

/* Filtros del catálogo sin anillo de foco al tabular (DIS-MPR-05): el tema
   quita outline y box-shadow a .form-control; solo quedaba un cambio de color
   del borde que no llega a 3:1. Mismo patrón que .segmento:focus-visible. */
.maq-filtros .form-control:focus-visible,
.maq-filtros input[type="search"]:focus-visible,
.maq-filtros select:focus-visible {
  outline: 2px solid var(--ac-acento) !important;
  outline-offset: 2px;
}

/* Áreas táctiles en teléfono (DIS-MPR-06). */
@media (max-width: 760px) {
  /* Botones de «Tu siguiente paso» (btn-sm: 34 px de alto). */
  .maq-siguiente .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Cabeceras que ordenan la tabla de máquinas de una red: 15–20 x 18 px. */
  #target-list th a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/* Reportes: sin estilos en línea (color lightgray fijo). */
.writeup-contenido { font-family: var(--ac-fuente-codigo); }
.writeup-texto {
  color: var(--ac-texto-suave);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .maq-filtros__nombre { flex-basis: 100%; }
  .maq-siguiente { padding: 0.85rem; }
}