/**
 * Mantenimiento de equipos (Etapa 8, #1769) — complementos al primitivo ListPage.
 *
 * Solo tokens de design-tokens.css (se adaptan solos al tema oscuro). La estructura
 * de las pantallas la da ListPage (encabezado, resumen, filtros, tabla); aquí van
 * únicamente las piezas propias del módulo: pestañas de la ficha, líneas de costo,
 * datos en cuadrícula y avisos. Sin max-width que formen islas.
 */

/* ── Texto auxiliar ── */
.mnt-nota { margin: 0 0 var(--space-3); color: var(--gray-500); font-size: .82rem; line-height: 1.45; }
.mnt-sin { color: var(--gray-400); }
.mnt-neg { color: var(--error); }
.mnt-pos { color: var(--success); }
.mnt-subtitulo { margin: var(--space-6) 0 var(--space-3); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); }
.mnt-estado-linea { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: calc(var(--space-2) * -1) 0 var(--space-4); }

/* ── Acciones de fila: no se parten en pantallas medianas ── */
.mnt-acciones { white-space: normal; }
.mnt-acciones .btn { margin: 0 var(--space-1) var(--space-1) 0; display: inline-flex; align-items: center; gap: 6px; }
.mnt-anulado td { opacity: .6; }
.mnt-foto-btn { text-decoration: none; }

/* ── Pestañas de la ficha ── */
.mnt-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--surface-border); margin-bottom: var(--space-4); overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-margin-top: calc(56px + var(--space-4)); }
.mnt-tab { flex: none; min-height: 40px; padding: var(--space-2) var(--space-4); background: none; border: 0; border-bottom: 2px solid transparent; color: var(--gray-500); font-size: .88rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mnt-tab:hover { color: var(--gray-800); }
.mnt-tab.active { color: var(--primary-600); border-bottom-color: var(--primary-500); }
.mnt-tab:focus-visible { outline: 2px solid var(--primary-500); outline-offset: -2px; }
.mnt-tab-n { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: var(--radius-md); background: var(--gray-100); color: var(--gray-600); font-size: .72rem; text-align: center; }
.mnt-panel { min-width: 0; }

/* ── Barra de herramientas dentro de un panel ── */
.mnt-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.mnt-barra .mnt-nota { margin: 0; flex: 1 1 280px; }
.mnt-barra-acc { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mnt-barra-acc .btn { display: inline-flex; align-items: center; gap: 6px; }

/* ── Costos de la ficha ── */
.mnt-costos { display: grid; gap: var(--space-3); }
.mnt-costo-fila { display: grid; grid-template-columns: minmax(130px, 220px) 1fr minmax(110px, auto); align-items: center; gap: var(--space-3); font-size: .88rem; color: var(--gray-700); }
.mnt-costo-fila strong { text-align: right; font-variant-numeric: tabular-nums; color: var(--gray-900); }
.mnt-barra-costo { height: 8px; border-radius: var(--radius-md); background: var(--gray-100); overflow: hidden; }
.mnt-barra-costo i { display: block; height: 100%; background: var(--primary-500); border-radius: var(--radius-md); }
.mnt-costo-total { display: flex; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--surface-border); font-weight: 700; color: var(--gray-900); font-variant-numeric: tabular-nums; }

/* ── Datos del equipo / detalle de evento ── */
.mnt-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3) var(--space-6); margin: 0 0 var(--space-4); }
.mnt-datos > div { min-width: 0; padding-bottom: var(--space-2); border-bottom: 1px solid var(--gray-100); }
.mnt-datos dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); margin: 0 0 2px; }
.mnt-datos dd { margin: 0; color: var(--gray-900); font-size: .9rem; overflow-wrap: anywhere; }

/* ── Modales: secciones, líneas y verificaciones ── */
.mnt-modal .modal-body { max-height: calc(100vh - 220px); overflow-y: auto; }
.mnt-sec { display: flex; align-items: center; gap: 7px; margin: var(--space-5) 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--surface-border); color: var(--gray-500); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.mnt-sec:first-child { margin-top: 0; }
.mnt-modal .form-row { margin-bottom: 0; }
.mnt-modal .form-row.mnt-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mnt-modal textarea { width: 100%; }
.mnt-check { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: .88rem; color: var(--gray-800); cursor: pointer; text-transform: none; letter-spacing: normal; font-weight: 400; }
.mnt-check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary-500); }
.mnt-linea { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr) minmax(100px, 1fr) auto; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.mnt-linea.mnt-linea-pieza { grid-template-columns: minmax(0, 3fr) minmax(100px, 1fr) auto; }
.mnt-total-evento { display: flex; justify-content: flex-end; align-items: baseline; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--surface-border); color: var(--gray-600); }
.mnt-total-evento strong { font-size: 1.15rem; color: var(--gray-900); font-variant-numeric: tabular-nums; }
.mnt-avanzado { margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--surface-border); border-radius: var(--radius-md); }
.mnt-avanzado summary { cursor: pointer; font-weight: 600; font-size: .85rem; color: var(--gray-700); min-height: 24px; }
.mnt-avanzado[open] summary { margin-bottom: var(--space-3); }

/* ── Buscador de equipos (EquipoSearchModule) ── */
.equipo-search-wrapper { position: relative; width: 100%; }
.equipo-search-input { width: 100%; }
.equipo-search-nombre { font-weight: 600; overflow-wrap: anywhere; }
.equipo-search-sub { font-size: .8rem; color: var(--gray-500); overflow-wrap: anywhere; }
.equipo-search-nota { color: var(--gray-500); font-size: .85rem; cursor: default; }
.equipo-search-nota:hover { background: transparent; color: var(--gray-500); }

/* ── Avisos ── */
.mnt-aviso { display: flex; flex-direction: column; gap: 2px; margin: 0 0 var(--space-4); padding: var(--space-3); border: 1px solid var(--surface-border); border-left: 3px solid var(--warning); border-radius: var(--radius-md); background: var(--gray-50); font-size: .86rem; color: var(--gray-800); }
.mnt-aviso--rojo { border-left-color: var(--error); }
.mnt-grupos { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.mnt-grupo { padding: var(--space-2); border-radius: var(--radius-md); }
.mnt-grupo:hover { background: var(--gray-50); }
.mnt-grupo small { color: var(--gray-500); }
.mnt-lista-avisos { list-style: none; margin: 0; padding: 0; }
.mnt-lista-avisos li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) 0; border-bottom: 1px solid var(--gray-100); font-size: .85rem; color: var(--gray-800); }
.mnt-lista-avisos small { color: var(--gray-500); }

/* ── Responsive ── */
@media (max-width: 768px) {
    .mnt-costo-fila { grid-template-columns: 1fr auto; }
    .mnt-costo-fila .mnt-barra-costo { grid-column: 1 / -1; grid-row: 2; }
    .mnt-modal .form-row.mnt-tres { grid-template-columns: 1fr; }
    .mnt-linea, .mnt-linea.mnt-linea-pieza { grid-template-columns: 1fr 1fr auto; }
    .mnt-linea .mnt-l-desc { grid-column: 1 / -1; grid-row: 2; }
    .mnt-linea.mnt-linea-pieza select { grid-column: 1 / -1; }
    .mnt-acciones .btn { min-height: 40px; }
    .mnt-tab { min-height: 44px; }
}
@media (max-width: 640px) {
    .mnt-modal .modal-body { max-height: none; }
    .mnt-datos { grid-template-columns: 1fr; }
}

/* Columnas con ancho mínimo para que el nombre no se parta letra a letra */
#mntEqBody td[data-col-label="Equipo"], #mntVBody td:first-child, #mntPBody td:first-child { min-width: 200px; }
#mntEqBody td.mnt-acciones, #mntPBody td.mnt-acciones { min-width: 190px; }


/* Objetivos táctiles de 40 px en móvil, solo dentro del módulo */
@media (max-width: 767px) {
    .mnt-root .lp-actions .btn, .mnt-root .lp-toolbar select, .mnt-root .lp-toolbar input, .mnt-root .mnt-barra-acc .btn, .mnt-root .btn-sm { min-height: 40px; }
    .mnt-root .mnt-acciones .btn-sm { min-width: 40px; }
    .mnt-modal .btn, .mnt-modal input, .mnt-modal select { min-height: 40px; }
    .mnt-modal input, .mnt-modal select, .mnt-modal textarea { font-size: 16px !important; }
}

@media (max-width: 767px) {
    .mnt-root small, .mnt-root .lp-card small, .mnt-root .lp-eyebrow { font-size: 12px !important; }
}


/* Etiquetas de estado legibles en tema oscuro (el primitivo usa colores claros fijos) */
[data-theme="dark"] .mnt-root .lp-tag--red { background: rgba(248,113,113,.14); color: var(--error); border-color: rgba(248,113,113,.35); }
[data-theme="dark"] .mnt-root .lp-tag--amber { background: rgba(251,191,36,.14); color: var(--warning); border-color: rgba(251,191,36,.35); }
[data-theme="dark"] .mnt-root .lp-tag--orange { background: rgba(251,146,60,.14); color: #fdba74; border-color: rgba(251,146,60,.35); }
[data-theme="dark"] .mnt-root .lp-tag--green { background: rgba(74,222,128,.14); color: var(--success); border-color: rgba(74,222,128,.35); }


/* Con varias acciones el encabezado debe poder envolverlas en anchos medios */
.mnt-root .lp-actions { flex: 0 1 auto; min-width: 0; }
.mnt-root .lp-header > div:first-child { flex: 1 1 260px; }

@media (max-width: 1100px) { .mnt-root .lp-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


.mnt-modal .mnt-check, .mnt-modal label.mnt-check { text-transform: none; letter-spacing: normal; font-size: .88rem; font-weight: 400; color: var(--gray-800); }