.detail-page {
  padding: 32px 40px;
  /* 800 px daban una sola columna. El mockup de IU-007 pone la ficha del
     dispositivo y el último evento uno al lado del otro, y para eso hace falta
     el mismo ancho que usan el listado y el mapa. */
  max-width: 1200px;
  margin: 0 auto;
}

.detail-header {
  margin-bottom: 28px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #002D72;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 16px;
  transition: opacity 0.2s;
}

.back-link:hover {
  opacity: 0.7;
}

.detail-title {
  font-size: 28px;
  font-weight: 700;
  color: #1A1A2E;
  margin: 0;
}

.detail-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* El historial va debajo, a todo lo ancho: es una lista larga y en media
   columna cada renglón se parte en tres líneas. */
.detail-card--ancha {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .detail-content {
    grid-template-columns: 1fr;
  }
}

.detail-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* -----------------------------------------------------------------------------
   Tarjetas de la SPA archivada — ya no las usa ninguna vista
   -----------------------------------------------------------------------------
   Desde IU-007 (#88) el detalle del dispositivo se compone con `.detail-card`,
   `.detail-fields` y `.battery-block`, más abajo en este archivo. Las reglas de
   aquí abajo —`.capture-*`, `.event-card`, `.event-field`, `.pest-label`,
   `.detail-empty-notice`— quedaron sin uso.

   No se borran porque `Vista.php` documenta que estas ocho hojas se conservan
   como las dejó la SPA retirada en INF-010, para poder comparar cada vista
   contra ella (MIGRACION.md §12, criterio 5). Retirarlas de verdad es trabajo
   de una limpieza aparte, cuando esa comparación ya no haga falta.

   Si está buscando dónde se estiliza el detalle del dispositivo: no es aquí.
-------------------------------------------------------------------------------- */

.capture-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.capture-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.capture-icon {
  width: 52px;
  height: 52px;
  background: #FFF0F0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.capture-info {
  flex: 1;
}

.capture-name {
  font-size: 17px;
  font-weight: 600;
  color: #1A1A2E;
  margin: 0 0 4px;
}

.capture-location {
  font-size: 13px;
  color: #8E8EA0;
  margin: 0;
}

.capture-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  background: #FFF3E0;
  color: #E65100;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.capture-pest {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #F0F2F5;
}

.pest-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  background: #F5F7FA;
  color: #4A4A68;
  font-size: 13px;
  font-weight: 500;
}

.event-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.event-section-title {
  font-size: 17px;
  font-weight: 600;
  color: #1A1A2E;
  margin: 0 0 20px;
}

.event-fields {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.event-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #F0F2F5;
}

.event-field:last-child {
  border-bottom: none;
}

.field-label {
  font-size: 14px;
  color: #8E8EA0;
  font-weight: 500;
}

.field-value {
  font-size: 14px;
  color: #1A1A2E;
  font-weight: 600;
}

.btn-mark-revised {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #002D72;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-mark-revised:hover {
  background: #001F4F;
}

.detail-empty-notice {
  margin-top: 24px;
  padding: 16px 20px;
  background: #FFF8E1;
  border-radius: 10px;
  border-left: 4px solid #F9A825;
}

.detail-empty-notice p {
  font-size: 13px;
  color: #5D4037;
  margin: 0;
  line-height: 1.5;
}


/* -----------------------------------------------------------------------------
   Ficha del dispositivo (IU-007)
-------------------------------------------------------------------------------- */

.device-identity {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #F0F2F5;
}

.device-name {
  font-size: 19px;
  font-weight: 700;
  color: #1A1A2E;
  margin: 0 0 4px;
}

.device-kind {
  font-size: 13px;
  color: #6B6B80;
  margin: 0 0 12px;
}

/* -----------------------------------------------------------------------------
   Pares etiqueta/valor
   -----------------------------------------------------------------------------
   Es un `<dl>` y no una fila de `<div>`: son pares de término y definición, y
   con el marcado correcto un lector de pantalla anuncia «Punto / sector: …» en
   vez de leer dos textos sueltos sin relación entre ellos.
-------------------------------------------------------------------------------- */

.detail-fields {
  margin: 0;
  padding: 0;
}

.detail-fields dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* #6B6B80 da 5,2:1 sobre blanco. El #8E8EA0 heredado del resto de la
     aplicación se queda en 3,2:1 y no llega al 4,5:1 que exige WCAG 2.1 AA
     (SRS §2.5.8); revisarlo en todas las pantallas es RNF-USA-001 (#23). */
  color: #6B6B80;
  margin: 18px 0 4px;
}

.detail-fields dt:first-child {
  margin-top: 20px;
}

.detail-fields dd {
  font-size: 14px;
  color: #1A1A2E;
  margin: 0;
  line-height: 1.5;
}

.valor-ok {
  color: #2E7D32;
  font-weight: 600;
}

.valor-alerta {
  color: #E65100;
  font-weight: 600;
}

/* -----------------------------------------------------------------------------
   Nivel de batería
-------------------------------------------------------------------------------- */

.battery-block {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #F0F2F5;
}

.battery-block .field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6B6B80;
  margin: 0 0 10px;
}

.battery-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.battery-value {
  font-size: 26px;
  font-weight: 700;
  color: #2E7D32;
  white-space: nowrap;
}

/* La carga baja se distingue por color **y** por la insignia de estado del
   dispositivo, que dice «Batería baja» con palabras (RNF-USA-002, #24). */
.battery-value--baja {
  color: #E65100;
}

.battery-track {
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: #EDF0F4;
  overflow: hidden;
}

.battery-fill {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: #2E7D32;
}

.battery-fill--baja {
  background: #E65100;
}

.battery-missing {
  font-size: 15px;
  color: #6B6B80;
  margin: 0;
}

.battery-note {
  font-size: 12px;
  color: #6B6B80;
  line-height: 1.5;
  margin: 14px 0 0;
}

/* -----------------------------------------------------------------------------
   Marca de revisión (RNF-REL-002)
-------------------------------------------------------------------------------- */

.event-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid #F0F2F5;
}

.event-head-title {
  font-size: 17px;
  font-weight: 600;
  color: #1A1A2E;
  margin: 0;
}

/* La insignia lleva la palabra, no solo el color: «Revisada» y «No revisada»
   son estados de la interfaz y RNF-USA-002 exige que se lean. */
.review-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.review-badge--pendiente {
  background: #FFF3E0;
  color: #E65100;
}

.review-badge--hecha {
  background: #E8F5E9;
  color: #2E7D32;
}

.revision-form {
  margin: 20px 0 0;
}

.btn-mark-revised--compacto {
  width: auto;
  padding: 7px 14px;
  font-size: 12px;
  border-radius: 8px;
}

.btn-mark-revised:focus-visible {
  outline: 3px solid #1A237E;
  outline-offset: 2px;
}

.review-done {
  margin: 20px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #F1FAF7;
  font-size: 13px;
  color: #0B5A48;
  line-height: 1.5;
}

.review-note {
  font-size: 12px;
  color: #6B6B80;
  line-height: 1.5;
  margin: 12px 0 0;
}

/* -----------------------------------------------------------------------------
   Historial
-------------------------------------------------------------------------------- */

.historial-lista {
  margin-top: 8px;
}

.historial-item {
  padding: 14px 0;
}

.historial-item .eco-lista-secundario {
  color: #6B6B80;
}

.historial-accion {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  align-self: center;
}

.historial-revisor {
  font-size: 11px;
  color: #6B6B80;
  white-space: nowrap;
}