/* tema.css — capa 1 del rediseno. Ver REDISENO.md
 *
 * Se carga DESPUES de style.css (INSPINIA) e inicio.css, y re-tematiza sus clases.
 * No las sustituye: Bootstrap 3 sigue dando el grid que usan las 40 vistas.
 *
 * Para revertir el rediseno visual entero: borrar el <link> de head.ejs.
 *
 * Sistema tomado de multitask.com.mx: naranja #FF8739, Lato, neutros calidos.
 * Regla: el naranja es para UNA accion por pantalla. Si esta en todos los botones
 * deja de senalar nada.
 */

:root {
  --mt-marca: #FF8739;
  --mt-marca-oscuro: #C25A0E;
  --mt-marca-tinte: #FFF3EA;

  --mt-texto: #1F1D1B;
  --mt-texto-2: #6E6863;
  --mt-texto-3: #A5A09B;

  --mt-fondo: #F7F6F4;
  --mt-superficie: #FFFFFF;
  --mt-superficie-2: #FAF9F7;
  --mt-borde: #E6E3DF;
  --mt-borde-suave: #F0EEEB;

  --mt-ok: #2E7D5B;
  --mt-aviso: #C77800;
  --mt-peligro: #B3453A;

  --mt-radio: 9px;
  --mt-radio-card: 12px;
  --mt-sombra: 0 1px 2px rgba(31, 29, 27, 0.04);
}

/* ---------- Base ---------- */

body {
  font-family: Lato, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  color: var(--mt-texto);
  background-color: var(--mt-fondo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: inherit;
  color: var(--mt-texto);
  letter-spacing: -0.2px;
}

h1 { font-weight: 900; }
h2 { font-weight: 900; font-size: 25px; letter-spacing: -0.5px; }
h3 { font-weight: 700; font-size: 17px; }
h4 { font-weight: 700; font-size: 15px; }

a { color: var(--mt-marca-oscuro); }
a:hover, a:focus { color: var(--mt-marca); text-decoration: none; }

/* Folios, series, IMEI, dias y dinero: alineados entre renglones. */
.mt-num { font-variant-numeric: tabular-nums; }

/* ---------- Menu lateral ---------- */

.navbar-default.navbar-static-side,
.nav-header {
  background: var(--mt-superficie) !important;
  border-right: 1px solid var(--mt-borde);
}

/* El panel llegaba hasta el ultimo item y debajo quedaba un hueco con otro fondo,
   que es lo que se leia como "todo colapsado arriba". Ahora ocupa la ventana y el
   pie se ancla al fondo. */
.navbar-default.navbar-static-side { min-height: 100vh; }

.sidebar-collapse {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#side-menu { flex-grow: 1; }

.nav-header {
  padding: 20px 20px 18px !important;
  border-right: 0;
  border-bottom: 1px solid var(--mt-borde-suave);
}

.nav-header a,
.nav-header strong { color: var(--mt-texto) !important; }
.nav-header .text-muted { color: var(--mt-texto-3) !important; }

#side-menu { padding: 12px 10px; }

.navbar-default .nav > li > a {
  color: var(--mt-texto-2);
  font-weight: 400;
  font-size: 13.5px;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 2px;
  line-height: 1.35;
}

/* ---------- Pie del panel: quien esta dentro ---------- */

.mt-lateral-pie {
  margin-top: auto;            /* lo empuja al fondo del panel */
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  margin: auto 10px 12px;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--mt-superficie-2);
  border: 1px solid var(--mt-borde-suave);
}
.mt-lateral-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--mt-borde); color: var(--mt-texto-2);
  font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mt-lateral-quien { min-width: 0; line-height: 1.3; }
.mt-lateral-quien strong {
  display: block; font-size: 12.5px; color: var(--mt-texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-lateral-quien small { display: block; font-size: 11px; color: var(--mt-texto-3); }

/* Plegado en escritorio solo caben los iconos, asi que el pie sobra. En movil
   `mini-navbar` significa lo contrario -- el menu ABIERTO sobre el contenido -- y
   ahi el pie si va. De ahi el :not(.body-small), que es la clase que inspinia.js
   pone en pantallas chicas.
   Funcionaba igual por especificidad, porque inicio.css trae
   `body.body-small.mini-navbar .profile-element { display: block }` y el elemento
   lleva las dos clases. Se deja escrito para no depender de esa casualidad. */
body.mini-navbar:not(.body-small) .mt-lateral-pie { display: none; }

.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus {
  background-color: var(--mt-superficie-2);
  color: var(--mt-texto);
}

.navbar-default .nav > li.active,
.navbar-default .nav > li.active-principal {
  background: transparent;
  border-left: 0;
}

.navbar-default .nav > li.active > a,
.navbar-default .nav > li.active-principal > a {
  background: var(--mt-marca-tinte);
  color: var(--mt-marca-oscuro) !important;
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--mt-marca);
}

.navbar-default .nav .nav-second-level {
  background: transparent;
  padding-left: 10px;
}

.navbar-default .nav-second-level > li > a {
  padding: 7px 12px;
  font-size: 13px;
}

.navbar-default .nav-second-level > li.active > a {
  background: var(--mt-marca-tinte);
  color: var(--mt-marca-oscuro) !important;
}

.nav > li > a i { margin-right: 8px; width: 16px; text-align: center; }

/* ---------- Barra superior ---------- */

.navbar-static-top {
  background: var(--mt-superficie);
  border-bottom: 1px solid var(--mt-borde);
}

.row.border-bottom { border-bottom: 0 !important; }

/* El buscador traia el borde naranja de 2px y radio de 15px como style inline
   en head.ejs. Se neutraliza aqui para no tocar la vista. */
#cmp_busqueda_principal {
  border: 1px solid var(--mt-borde) !important;
  border-radius: var(--mt-radio) !important;
  background: var(--mt-superficie-2);
  height: 38px !important;
  font-size: 13.5px;
  padding-left: 14px !important;
  box-shadow: none;
}

#cmp_busqueda_principal:focus {
  background: var(--mt-superficie);
  border-color: var(--mt-marca) !important;
  outline: 0;
}

.navbar-minimalize.btn-primary {
  background: transparent;
  border-color: var(--mt-borde);
  color: var(--mt-texto-2);
}

.navbar-top-links > li > a { color: var(--mt-texto-2); }

/* ---------- Encabezado de pagina ---------- */

.page-heading {
  background: var(--mt-superficie) !important;
  border-bottom: 1px solid var(--mt-borde);
  padding: 20px 25px !important;
}

.page-heading h2 { margin: 0; }

.wrapper-content { padding: 22px 25px; }

.footer {
  background: transparent;
  border-top: 1px solid var(--mt-borde);
  color: var(--mt-texto-3);
  font-size: 12px;
}

/* ---------- Tarjetas ---------- */

.ibox {
  background: var(--mt-superficie);
  border: 1px solid var(--mt-borde);
  border-radius: var(--mt-radio-card);
  box-shadow: var(--mt-sombra);
  margin-bottom: 20px;
  overflow: hidden;
}

.ibox-title,
.ibox-content {
  background: transparent;
  border: 0;
  padding: 18px 20px;
}

.ibox-title {
  border-bottom: 1px solid var(--mt-borde-suave);
  background: var(--mt-superficie-2);
  min-height: 0;
  padding: 14px 20px;
}

.ibox-title h5 {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--mt-texto-3);
}

.well {
  background: var(--mt-superficie-2);
  border: 1px solid var(--mt-borde-suave);
  border-radius: var(--mt-radio);
  box-shadow: none;
}

/* ---------- Botones ---------- */

.btn {
  border-radius: var(--mt-radio);
  font-weight: 700;
  font-size: 13.5px;
  padding: 8px 15px;
  border-width: 1px;
  transition: none;
}

.btn-primary,
.btn-primary:focus {
  background-color: var(--mt-marca);
  border-color: var(--mt-marca);
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(31, 29, 27, 0.16);
}

/* INSPINIA mandaba el hover de .btn-primary a su verde #18a689 aunque el estado
   normal ya era naranja: el boton cambiaba de color de marca al pasar el mouse. */
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.btn-primary:active:focus,
.open .dropdown-toggle.btn-primary {
  background-color: var(--mt-marca-oscuro);
  border-color: var(--mt-marca-oscuro);
  color: #FFFFFF;
}

.btn-white,
.btn-default,
.btn-white:focus,
.btn-default:focus {
  background: var(--mt-superficie);
  border-color: var(--mt-borde);
  color: var(--mt-texto-2);
}

.btn-white:hover,
.btn-default:hover {
  background: var(--mt-superficie-2);
  border-color: var(--mt-borde);
  color: var(--mt-texto);
}

/* Lo destructivo: contorno, no relleno. Pesa menos que la accion primaria. */
.btn-danger,
.btn-danger:focus {
  background: var(--mt-superficie);
  border-color: #EDCFCB;
  color: var(--mt-peligro);
  box-shadow: none;
}

.btn-danger:hover,
.btn-danger:active {
  background: #FBEDEC;
  border-color: #E3B8B2;
  color: var(--mt-peligro);
}

.btn-warning,
.btn-info,
.btn-success {
  background: var(--mt-superficie);
  border-color: var(--mt-borde);
  color: var(--mt-texto-2);
  box-shadow: none;
}

.btn-warning:hover,
.btn-info:hover,
.btn-success:hover {
  background: var(--mt-superficie-2);
  color: var(--mt-texto);
}

.btn-xs { padding: 3px 8px; font-size: 11.5px; border-radius: 6px; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-link { color: var(--mt-marca-oscuro); font-weight: 700; }

/* ---------- Formularios ---------- */

.form-control,
.input-sm,
select.form-control {
  border: 1px solid var(--mt-borde);
  border-radius: 8px;
  background: var(--mt-superficie);
  color: var(--mt-texto);
  font-size: 13.5px;
  height: 38px;
  padding: 7px 12px;
  box-shadow: none;
}

textarea.form-control { height: auto; }

.form-control:focus,
.input-sm:focus {
  border-color: var(--mt-marca);
  box-shadow: 0 0 0 3px var(--mt-marca-tinte);
  outline: 0;
}

.form-control::placeholder { color: var(--mt-texto-3); }

label,
.control-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mt-texto-2);
  margin-bottom: 5px;
}

/* ---------- Tablas ---------- */

.table {
  margin-bottom: 0;
  font-size: 13px;
}

.table > thead > tr > th {
  border-bottom: 1px solid var(--mt-borde);
  background: var(--mt-superficie-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--mt-texto-3);
  padding: 10px 14px;
  vertical-align: middle;
}

.table > tbody > tr > td {
  border-top: 1px solid var(--mt-borde-suave);
  padding: 12px 14px;
  vertical-align: middle;
  color: var(--mt-texto);
}

.table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
.table-hover > tbody > tr:hover { background: var(--mt-superficie-2); }
.table > tbody > tr:first-child > td { border-top: 0; }

/* ---------- Chips de estado ----------
   Antes los 14 estados salian con label-warning: el mismo amarillo para
   "Creado", "Cerrado" y "Cancelado". El color va por fase (ver estados.js). */

.label,
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  text-shadow: none;
  line-height: 1.45;
}

.mt-chip { display: inline-block; padding: 4px 10px; border-radius: 999px;
           font-size: 11.5px; font-weight: 700; line-height: 1.45; white-space: nowrap; }

.mt-fase-recepcion   { background: var(--mt-borde-suave); color: #5D5852; }
.mt-fase-diagnostico { background: #EAF2FA; color: #2F6FB3; }
.mt-fase-cotizacion  { background: #FDF3E0; color: #9A6600; }
.mt-fase-taller      { background: #F3EEFA; color: #7A56A8; }
.mt-fase-salida      { background: #E9F5EF; color: #2E7D5B; }
.mt-fase-cerrado     { background: var(--mt-borde-suave); color: var(--mt-texto-2); }
.mt-fase-cancelado   { background: #FBEDEC; color: var(--mt-peligro); }

.label-warning, .label-primary, .label-info,
.label-success, .label-danger, .label-default {
  background: var(--mt-borde-suave);
  color: var(--mt-texto-2);
}
.label-danger  { background: #FBEDEC; color: var(--mt-peligro); }
.label-success { background: #E9F5EF; color: var(--mt-ok); }

.badge {
  background: var(--mt-borde);
  color: #5D5852;
  font-size: 10.5px;
  padding: 1px 7px;
}

/* ---------- Pestanas ---------- */

.tabs-container .nav-tabs {
  border-bottom: 1px solid var(--mt-borde);
  background: var(--mt-superficie-2);
  padding: 0 8px;
}

.tabs-container .nav-tabs > li > a {
  border: 0;
  border-radius: 0;
  color: var(--mt-texto-2);
  font-size: 13.5px;
  font-weight: 400;
  padding: 12px 13px;
  margin: 0;
  background: transparent;
}

.tabs-container .nav-tabs > li.active > a,
.tabs-container .nav-tabs > li.active > a:hover,
.tabs-container .nav-tabs > li.active > a:focus {
  border: 0;
  border-bottom: 2px solid var(--mt-marca);
  color: var(--mt-texto);
  font-weight: 700;
  background: transparent;
}

.tabs-container .tab-content {
  background: var(--mt-superficie);
  border: 1px solid var(--mt-borde);
  border-top: 0;
  border-radius: 0 0 var(--mt-radio-card) var(--mt-radio-card);
}

.tabs-container .nav-tabs {
  border-radius: var(--mt-radio-card) var(--mt-radio-card) 0 0;
  border: 1px solid var(--mt-borde);
  border-bottom: 1px solid var(--mt-borde);
}

.tabs-container .panel-body { padding: 20px; border: 0; }

/* ---------- Avisos ---------- */

.alert {
  border-radius: 11px;
  border-width: 1px;
  font-size: 13px;
  padding: 13px 16px;
}

.alert-info    { background: #EAF2FA; border-color: #C9DDF0; color: #24557F; }
.alert-warning { background: #FDF3E0; border-color: #F2DDB4; color: #7A5200; }
.alert-danger  { background: #FBEDEC; border-color: #EDCFCB; color: #8A342C; }
.alert-success { background: #E9F5EF; border-color: #C8E2D5; color: #1F5C43; }

/* ---------- Paginacion ---------- */

.pagination > li > a,
.pagination > li > span {
  border: 1px solid var(--mt-borde);
  color: var(--mt-texto-2);
  border-radius: 8px !important;
  margin: 0 2px;
  font-size: 12.5px;
  padding: 6px 11px;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
  background: var(--mt-texto);
  border-color: var(--mt-texto);
  color: #FFFFFF;
}

/* ============================================================
   Componentes de las vistas rehechas (capa 2)
   ============================================================ */

/* Encabezado de pantalla, con la accion primaria a la derecha. */
.mt-encabezado { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.mt-encabezado h2 { margin: 0; }
.mt-encabezado .mt-acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.mt-resumen { margin-top: 5px; font-size: 13px; color: var(--mt-texto-2); }
.mt-resumen strong { color: var(--mt-texto); font-weight: 700; }

/* Filtros plegables. <details> nativo: sin JavaScript. */
.mt-filtros {
  background: var(--mt-superficie);
  border: 1px solid var(--mt-borde);
  border-radius: var(--mt-radio-card);
  box-shadow: var(--mt-sombra);
  margin-bottom: 18px;
}

.mt-filtros > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mt-texto-2);
  display: flex;
  align-items: center;
  gap: 9px;
}

.mt-filtros > summary::-webkit-details-marker { display: none; }
.mt-filtros > summary:hover { color: var(--mt-texto); }
.mt-filtros > summary .fa-chevron-down { transition: transform 0.15s; font-size: 11px; }
.mt-filtros[open] > summary { border-bottom: 1px solid var(--mt-borde-suave); }
.mt-filtros[open] > summary .fa-chevron-down { transform: rotate(180deg); }
.mt-filtros .mt-filtros-cuerpo { padding: 18px; }
.mt-filtros-activos { margin-left: auto; font-weight: 400; color: var(--mt-texto-3); font-size: 12.5px; }

/* Tabla de listado: dos lineas por celda, jerarquia dentro de la fila. */
.mt-tabla-card {
  background: var(--mt-superficie);
  border: 1px solid var(--mt-borde);
  border-radius: var(--mt-radio-card);
  box-shadow: var(--mt-sombra);
  overflow: hidden;
}

.mt-celda-principal { font-size: 13.5px; font-weight: 700; }
.mt-celda-secundaria { font-size: 11.5px; color: var(--mt-texto-3); margin-top: 2px; }
.mt-celda-secundaria-fuerte { font-size: 12.5px; color: var(--mt-texto-2); margin-top: 2px; }

/* Fila atrasada. El original pintaba la fila entera de #dac267 o #da6767 con texto
   blanco, que no pasa AA. Un tinte bajo se ve igual de lejos y deja leer el renglon.
   Una sola severidad por fila (la vista toma la mayor de las dos senales), asi que
   las dos ya no pueden taparse entre si.
   El color viaja en una custom property y no en `color`: la regla de .table le fija
   el color al <td>, asi que currentColor aqui daria el gris del texto. */
.mt-riesgo > td { background: var(--mt-tinte); }
.mt-riesgo > td:first-child { box-shadow: inset 4px 0 0 var(--mt-umbral); }
.table-hover > tbody > tr.mt-riesgo:hover > td {
  background: color-mix(in srgb, var(--mt-umbral) 16%, #FFFFFF);
}

/* Antiguedad del ultimo movimiento: DUE >= 3 y >= 5. */
.mt-riesgo-atrasada { --mt-umbral: #C77800; --mt-tinte: #FDF4E6; }
.mt-riesgo-vencida  { --mt-umbral: #C0392B; --mt-tinte: #FBEDEA; }

/* Umbral de ConfigEstados: el color lo configura la sucursal, asi que el tinte se
   deriva del mismo hex. Sin color-mix la fila se queda sin tinte, pero con barra. */
.mt-riesgo-umbral { --mt-tinte: transparent; }
@supports (background: color-mix(in srgb, red 10%, white)) {
  .mt-riesgo-umbral { --mt-tinte: color-mix(in srgb, var(--mt-umbral) 12%, #FFFFFF); }
}

/* Dias sin movimiento: punto + numero. */
.mt-dias { display: inline-flex; align-items: center; gap: 7px; font-weight: 700;
           font-variant-numeric: tabular-nums; }
.mt-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--mt-ok); flex-shrink: 0; }
.mt-dias-alerta  { color: var(--mt-aviso); }
.mt-dias-alerta .mt-punto { background: var(--mt-aviso); }
.mt-dias-peligro { color: var(--mt-peligro); }
.mt-dias-peligro .mt-punto { background: var(--mt-peligro); }

.mt-vacio { text-align: center; padding: 44px 20px !important; color: var(--mt-texto-3); }

/* Avatar de iniciales. */
.mt-avatar {
  width: 24px; height: 24px; border-radius: 50%; background: var(--mt-borde);
  color: #5D5852; font-size: 9.5px; font-weight: 700; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.mt-avatar-lg { width: 34px; height: 34px; font-size: 12px; }
.mt-avatar-vacio { background: transparent; border: 1px dashed #D6D2CD; color: #C4BFB9; }
.mt-persona { display: flex; align-items: center; gap: 8px; }

/* ---------- Detalle de la orden ---------- */

.mt-orden-cabecera {
  background: var(--mt-superficie);
  border: 1px solid var(--mt-borde);
  border-radius: var(--mt-radio-card);
  box-shadow: var(--mt-sombra);
  padding: 18px 20px;
  margin-bottom: 18px;
}

.mt-orden-titulo { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.mt-orden-titulo h1 { margin: 0; font-size: 27px; letter-spacing: -0.6px; }
.mt-orden-meta {
  margin-top: 7px; font-size: 13.5px; color: var(--mt-texto-2);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.mt-orden-meta strong { color: var(--mt-texto); font-weight: 700; }
.mt-sep { color: #D6D2CD; }

/* Menu de acciones secundarias. <details> nativo: sin JavaScript. */
.mt-mas { position: relative; display: inline-block; }
.mt-mas > summary {
  list-style: none; cursor: pointer;
  width: 38px; height: 38px; border-radius: var(--mt-radio);
  border: 1px solid var(--mt-borde); background: var(--mt-superficie);
  color: var(--mt-texto-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.mt-mas > summary::-webkit-details-marker { display: none; }
.mt-mas > summary:hover { background: var(--mt-superficie-2); }
.mt-mas-panel {
  position: absolute; right: 0; top: 44px; z-index: 40; min-width: 232px;
  background: var(--mt-superficie); border: 1px solid var(--mt-borde);
  border-radius: 11px; box-shadow: 0 8px 24px rgba(31, 29, 27, 0.12);
  padding: 6px; text-align: left;
}
.mt-mas-panel a,
.mt-mas-panel button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 11px; border: 0; border-radius: 7px; background: transparent;
  font-size: 13px; font-weight: 400; color: var(--mt-texto); text-align: left;
}
.mt-mas-panel a:hover,
.mt-mas-panel button:hover:not([disabled]) { background: var(--mt-superficie-2); }
.mt-mas-panel button[disabled] { color: var(--mt-texto-3); cursor: not-allowed; }
.mt-mas-panel .mt-destructivo { color: var(--mt-peligro); }
.mt-mas-panel .mt-separador { height: 1px; background: var(--mt-borde-suave); margin: 5px 4px; }
.mt-mas-panel form { margin: 0; }

/* Variante del menu "..." con etiqueta: misma mecanica de <details> y el mismo
   panel, pero el disparador se ve como un boton normal en vez de un cuadro con
   tres puntos. La usa "Cancelar" en la barra de la orden. */
.mt-mas-btn > summary {
  width: auto; padding: 0 13px; gap: 7px; font-size: 13px; font-weight: 500;
}
.mt-mas-btn > summary.mt-destructivo { color: var(--mt-peligro); }

/* Captura de partes del diagnostico. Los anchos van en el <colgroup> de la vista;
   aqui solo el minimo que obliga a .table-responsive a desplazar en vez de encoger,
   que es lo que dejaba los desplegables cortados. */
.mt-tabla-partes { min-width: 1437px; table-layout: fixed; }
.mt-tabla-partes td { padding: 5px 4px; }

/* Etiqueta y menu de ayuda de redaccion en el mismo renglon, el menu a la derecha.
   En una columna de un tercio no caben de otra forma; si aun asi no da, envuelve. */
.mt-campo-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 5px;
}
/* La etiqueta cede y parte en dos renglones; el disparador no se baja. Si se dejara
   envolver, «Problema del equipo (que me dice el cliente)» empujaria su menu a un
   renglon propio y ese campo arrancaria mas abajo que los otros dos de la fila. */
.mt-campo-cab > label { margin: 0; flex: 1 1 auto; min-width: 0; }
.mt-campo-cab > .mt-ia { flex: 0 0 auto; }

/* Recepcion de KGBs: doce columnas, como en el sistema viejo. Con el minimo la caja
   se desplaza de lado en vez de encoger los campos de captura. */
.mt-tabla-recepcion { min-width: 1454px; }
.mt-tabla-recepcion > tbody > tr > td { padding: 7px 6px; vertical-align: middle; }

/* Maquina de estados. */
.mt-ruta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0;
  padding: 16px 0 2px; margin-top: 15px; border-top: 1px solid var(--mt-borde-suave);
}
.mt-paso { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.mt-paso-nombre { font-size: 12px; color: var(--mt-texto-3); }
.mt-hito {
  width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--mt-borde); background: var(--mt-superficie);
  display: inline-flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-size: 10px;
}
.mt-linea { height: 2px; background: var(--mt-borde); flex-grow: 1; min-width: 12px;
            margin: 0 9px; border-radius: 1px; }

.mt-paso-hecho .mt-hito { background: var(--mt-ok); border-color: var(--mt-ok); }
.mt-paso-hecho .mt-paso-nombre { color: var(--mt-texto-2); }
.mt-linea-hecha { background: #C8E2D5; }

.mt-paso-actual {
  padding: 5px 13px 5px 8px; border-radius: 999px;
  background: #FDF3E0; border: 1px solid #F2DDB4;
}
.mt-paso-actual .mt-hito { background: var(--mt-aviso); border-color: var(--mt-aviso); }
.mt-paso-actual .mt-paso-nombre { color: #7A5200; font-weight: 700; font-size: 12.5px; }
.mt-paso-actual .mt-paso-detalle { font-size: 10.5px; color: #9A6600; }

.mt-paso-cancelado { padding: 5px 13px 5px 8px; border-radius: 999px;
                     background: #FBEDEC; border: 1px solid #EDCFCB; }
.mt-paso-cancelado .mt-hito { background: var(--mt-peligro); border-color: var(--mt-peligro); }
.mt-paso-cancelado .mt-paso-nombre { color: var(--mt-peligro); font-weight: 700; }

/* Bloques de datos del equipo, en vez de la tabla de 2x13. */
.mt-bloque { margin-bottom: 26px; }
.mt-bloque:last-child { margin-bottom: 0; }
.mt-bloque-titulo { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.mt-bloque-titulo h3 {
  margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--mt-texto-3);
}
.mt-bloque-titulo .mt-regla { height: 1px; background: var(--mt-borde-suave); flex-grow: 1; }
.mt-bloque-titulo .mt-nota { font-size: 11.5px; color: var(--mt-texto-3); }

.mt-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; }
.mt-campos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mt-campo-etiqueta { font-size: 11.5px; color: var(--mt-texto-3); margin-bottom: 3px; }
.mt-campo-valor { font-size: 13.5px; font-weight: 700; word-break: break-word; }
.mt-campo-valor.mt-si { color: var(--mt-ok); }
.mt-campo-valor.mt-no { color: var(--mt-peligro); }

.mt-parrafo {
  padding: 14px 16px; border-radius: 10px;
  background: var(--mt-superficie-2); border: 1px solid var(--mt-borde-suave);
}
/* pre-line: son textos que alguien escribio a mano —diagnostico, lo que reporta el
   cliente, notas— y llegan con sus renglones. Sin esto el navegador los colapsa a un
   parrafo corrido y el diagnostico se lee amontonado (MYS-22); pre-line respeta los
   saltos y sigue colapsando los espacios de sobra. */
.mt-parrafo-texto { font-size: 13.5px; line-height: 1.55; text-wrap: pretty; white-space: pre-line; }

/* Rail derecho. */
.mt-tarjeta {
  background: var(--mt-superficie); border: 1px solid var(--mt-borde);
  border-radius: var(--mt-radio-card); box-shadow: var(--mt-sombra);
  padding: 17px; margin-bottom: 16px;
}
.mt-tarjeta-titulo { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; }
.mt-tarjeta-titulo h3 {
  margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--mt-texto-3);
}
.mt-tarjeta-titulo i { color: var(--mt-texto-3); }
.mt-tarjeta-titulo .mt-vinculo { margin-left: auto; font-size: 12px; font-weight: 700; }

/* Renglon etiqueta ....... valor, con guia punteada. */
.mt-renglon { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.mt-renglon:last-child { margin-bottom: 0; }
.mt-renglon .mt-etiqueta { font-size: 12.5px; color: var(--mt-texto-2); }
.mt-renglon .mt-guia { border-bottom: 1px dotted var(--mt-borde); flex-grow: 1; }
.mt-renglon .mt-valor { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mt-renglon .mt-valor.mt-si { color: var(--mt-ok); }
.mt-renglon .mt-valor.mt-no { color: var(--mt-peligro); }

.mt-saldo { display: flex; align-items: baseline; gap: 10px; margin-top: 4px;
            padding-top: 10px; border-top: 1px solid var(--mt-borde-suave); }
.mt-saldo .mt-etiqueta { font-size: 13px; font-weight: 700; color: var(--mt-texto); }
.mt-saldo .mt-monto { margin-left: auto; font-size: 19px; font-weight: 900;
                      letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.mt-saldo .mt-monto.mt-debe { color: var(--mt-peligro); }
.mt-saldo .mt-monto.mt-pagado { color: var(--mt-ok); }

/* Bitacora reciente. */
.mt-hilo { display: flex; gap: 11px; }
.mt-hilo-marca { display: flex; flex-direction: column; align-items: center;
                 flex-shrink: 0; padding-top: 3px; }
.mt-hilo-linea { width: 1.5px; flex-grow: 1; background: var(--mt-borde-suave); margin-top: 4px; }

/* La medalla del movimiento: icono y color salen de CodigoSeguimiento, no del
   codigo (ver seguimiento.js). Es lo que deja distinguir de un vistazo un pago de
   una foto subida o de un documento generado. */
.mt-hilo-medalla {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-size: 12px; line-height: 1;
  box-shadow: 0 0 0 3px var(--mt-superficie);
}
.mt-hilo-medalla-chica { width: 20px; height: 20px; font-size: 10px; }
/* El color de la tabla se usa tal cual y algunos son claros (#FFCC00, #FFFF00):
   un texto blanco encima no se leeria. El contorno separa la medalla del fondo. */
.mt-hilo-medalla > .fa { text-shadow: 0 1px 1px rgba(31, 29, 27, 0.35); }
.mt-hilo-texto { min-width: 0; padding-bottom: 15px; font-size: 12.5px; line-height: 1.45; }
.mt-hilo-cuando { font-size: 11px; color: var(--mt-texto-3); margin-top: 3px;
                  font-variant-numeric: tabular-nums; }
.mt-hilo:last-child .mt-hilo-linea { display: none; }
.mt-hilo:last-child .mt-hilo-texto { padding-bottom: 0; }

/* Galeria de adjuntos. */
.mt-adjunto { border: 1px solid var(--mt-borde); border-radius: 10px; overflow: hidden;
              background: var(--mt-superficie); }
.mt-adjunto img { width: 100%; height: 130px; object-fit: cover; background: var(--mt-superficie-2); display: block; }
.mt-adjunto-vacio { height: 130px; display: flex; align-items: center; justify-content: center;
                    background: var(--mt-superficie-2); color: var(--mt-texto-3); }
.mt-adjunto-pie { padding: 8px 10px; font-size: 11px; word-break: break-all; color: var(--mt-texto-2); }

/* ---------- Movil ---------- */

@media (max-width: 991px) {
  .mt-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .mt-campos,
  .mt-campos-2 { grid-template-columns: 1fr; }
  .mt-encabezado .mt-acciones { margin-left: 0; width: 100%; }
  .mt-orden-titulo h1 { font-size: 22px; }
  .mt-ruta { gap: 8px; }
  .mt-linea { min-width: 8px; margin: 0 4px; }
  .mt-paso-nombre { font-size: 11px; }
  .wrapper-content { padding: 16px 14px; }
  .page-heading { padding: 16px 14px !important; }
  .mt-mas-panel { right: auto; left: 0; }

  /* ---- Tablas que se apilan ----
     Marcar la <table> con .mt-apilable y cada <td> con data-etq="Etiqueta". La
     primera celda hace de encabezado de la tarjeta y no lleva etiqueta.
     No todas las tablas la llevan: la matriz de sucursales y la del panel son
     rejillas de conteos, y apiladas no dicen nada; esas siguen con scroll. */
  .mt-apilable thead { display: none; }
  .mt-apilable,
  .mt-apilable > tbody,
  .mt-apilable > tbody > tr,
  .mt-apilable > tbody > tr > td { display: block; width: 100%; }

  .mt-apilable > tbody > tr {
    padding: 13px 15px;
    border-bottom: 1px solid var(--mt-borde);
    position: relative;
  }
  .mt-apilable > tbody > tr:last-child { border-bottom: 0; }

  .mt-apilable > tbody > tr > td {
    display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline;
    padding: 3px 0; border: 0 !important; text-align: left !important;
  }
  /* Sin esto, un modelo largo ("MacBook Pro (13-inch, M2, 2022)") desborda la
     tarjeta en vez de partirse: los hijos flex no encogen por debajo de su
     contenido salvo que se les baje el min-width. */
  .mt-apilable > tbody > tr > td > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .mt-apilable > tbody > tr > td[data-etq]::before {
    content: attr(data-etq);
    flex: 0 0 92px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase; color: var(--mt-texto-3);
  }
  /* La primera celda es el titulo de la tarjeta: sin etiqueta y con aire debajo. */
  .mt-apilable > tbody > tr > td:first-child { display: block; padding-bottom: 8px; }
  .mt-apilable > tbody > tr > td:first-child::before { display: none; }

  /* Una celda vacia apilada solo deja una etiqueta suelta. */
  .mt-apilable > tbody > tr > td:empty { display: none; }

  /* El estado vacio ocupa la fila entera, sin tratarse como tarjeta. */
  .mt-apilable > tbody > tr > td.mt-vacio { display: block; padding: 26px 0; text-align: center !important; }

  /* La barra de riesgo pasa del td a la fila: apilada, "la primera celda" ya no
     es una columna sino el titulo de la tarjeta. */
  .mt-apilable > tbody > tr.mt-riesgo > td:first-child { box-shadow: none; }
  .mt-apilable > tbody > tr.mt-riesgo {
    box-shadow: inset 4px 0 0 var(--mt-umbral);
    background: var(--mt-tinte);
  }
  .mt-apilable > tbody > tr.mt-riesgo > td { background: transparent; }
}

/* ---------- Matriz de sucursales x estados ---------- */

.mt-matriz > tbody > tr > td,
.mt-matriz > thead > tr > th { padding: 9px 8px; }
.mt-matriz > thead > tr > th { font-size: 10.5px; letter-spacing: 0.3px; }

/* El conteo es el enlace: darle area de clic y color de fase lo vuelve legible de
   un vistazo. Antes eran numeros azules sueltos, todos iguales. */
.mt-conteo {
  display: inline-block; min-width: 30px; padding: 3px 8px; border-radius: 7px;
  font-size: 12.5px; font-weight: 700;
}
.mt-conteo:hover { filter: brightness(0.94); }
.mt-conteo-total { background: var(--mt-texto); color: #FFFFFF !important; }
.mt-cero { color: #D6D2CD; }

.mt-matriz > tfoot > tr.mt-totales > td {
  border-top: 2px solid var(--mt-borde);
  background: var(--mt-superficie-2);
  font-weight: 700;
  font-size: 13px;
  padding: 11px 8px;
}

/* ---------- Barras horizontales (participacion por modelo) ---------- */

.mt-barra { height: 8px; border-radius: 4px; background: var(--mt-borde-suave); overflow: hidden; }
.mt-barra > span { display: block; height: 100%; border-radius: 4px; background: var(--mt-marca); }

/* ---------- Barras verticales (ordenes por mes) ---------- */

.mt-columnas { display: flex; align-items: flex-end; gap: 10px; height: 220px;
               padding-top: 10px; border-bottom: 1px solid var(--mt-borde); }
.mt-columna { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
              align-items: center; gap: 5px; height: 100%; }
.mt-columna-valor { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mt-columna-barra { width: 100%; background: var(--mt-marca); border-radius: 4px 4px 0 0; min-height: 2px; }
.mt-columna:hover .mt-columna-barra { background: var(--mt-marca-oscuro); }
.mt-columnas-pie { display: flex; gap: 10px; padding-top: 7px; }
.mt-columnas-pie > div { flex: 1; text-align: center; font-size: 11px; color: var(--mt-texto-3); }

/* ---------- Tarjetas de indicador ---------- */

.mt-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
           margin-bottom: 20px; }
.mt-kpi { background: var(--mt-superficie); border: 1px solid var(--mt-borde);
          border-radius: var(--mt-radio-card); box-shadow: var(--mt-sombra); padding: 17px; }
.mt-kpi-etiqueta { font-size: 11.5px; font-weight: 700; letter-spacing: 0.4px;
                   text-transform: uppercase; color: var(--mt-texto-3); }
.mt-kpi-valor { font-size: 28px; font-weight: 900; letter-spacing: -0.8px; margin-top: 7px;
                font-variant-numeric: tabular-nums; line-height: 1.1; }
.mt-kpi-nota { font-size: 12px; color: var(--mt-texto-2); margin-top: 5px; }
.mt-kpi-valor.mt-debe { color: var(--mt-peligro); }
.mt-kpi-valor.mt-pagado { color: var(--mt-ok); }

@media (max-width: 991px) { .mt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mt-kpis { grid-template-columns: 1fr; } }

/* Parte ya recibida: se apaga para que destaquen las pendientes de capturar. */
.mt-recibida > td { background: var(--mt-superficie-2); }

/* Registro dado de baja: se apaga sin ocultarse. */
.mt-inactiva > td { opacity: 0.62; }
.mt-inactiva:hover > td { opacity: 1; }

/* ---------- Formularios ---------- */

.mt-form {
  background: var(--mt-superficie);
  border: 1px solid var(--mt-borde);
  border-radius: var(--mt-radio-card);
  box-shadow: var(--mt-sombra);
  padding: 22px;
  margin-bottom: 20px;
}

.mt-form h4 {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--mt-texto-3); margin: 0 0 14px;
  padding-bottom: 9px; border-bottom: 1px solid var(--mt-borde-suave);
}

.mt-form .form-group { margin-bottom: 15px; }
.mt-form .form-group small.text-muted { display: block; margin-top: 5px; font-size: 11.5px; }

/* Barra de acciones: la primaria a la derecha, donde termina la lectura. */
.mt-form-acciones {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--mt-borde-suave);
}
.mt-form-acciones .mt-nota-form {
  margin-left: auto; font-size: 12px; color: var(--mt-texto-3); text-align: right;
}
.mt-form-acciones .btn-primary { order: 2; }
.mt-form-acciones .btn-white   { order: 1; }
.mt-form-acciones .mt-nota-form { order: 0; margin-left: 0; margin-right: auto; }

.mt-form .checkbox, .mt-form .radio { margin: 4px 0 12px; }
.mt-form .checkbox label, .mt-form .radio label {
  font-size: 13.5px; font-weight: 400; color: var(--mt-texto); text-transform: none; letter-spacing: 0;
}

/* ---------- Acceso (login y recuperar) ---------- */

body.mt-acceso {
  background: var(--mt-fondo);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}

.mt-acceso-caja { width: 100%; max-width: 380px; }

.mt-acceso-logo { text-align: center; margin-bottom: 26px; }
.mt-acceso-logo img { max-width: 190px; width: 100%; height: auto; }

.mt-acceso-tarjeta {
  background: var(--mt-superficie);
  border: 1px solid var(--mt-borde);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(31, 29, 27, 0.06);
  padding: 26px;
}

.mt-acceso-tarjeta h1 {
  margin: 0 0 4px; font-size: 20px; font-weight: 900; letter-spacing: -0.4px;
}
.mt-acceso-tarjeta .mt-acceso-nota {
  font-size: 13px; color: var(--mt-texto-2); line-height: 1.5; margin: 0 0 20px;
}
.mt-acceso-tarjeta .form-group { margin-bottom: 14px; }
.mt-acceso-tarjeta .form-control { height: 42px; }
.mt-acceso-tarjeta .btn-primary { width: 100%; height: 42px; font-size: 14px; }

.mt-acceso-pie {
  text-align: center; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--mt-borde-suave); font-size: 13px;
}

/* Chip menudo para dentro de una celda del listado: el mismo color, sin robarle
   presencia al estado, que es lo primero que se lee del renglon. */
.mt-chip-chico { font-size: 10.5px; padding: 1px 7px; margin-top: 3px; }

/* El chip del tipo de orden es ademas un desplegable que guarda al cambiarlo, como en
   el sistema viejo. Se disfraza de chip para que el encabezado siga leyendose igual. */
.mt-chip-form { display: inline-flex; align-items: center; gap: 5px; }
.mt-chip-form select {
  border: 0; background: transparent; color: inherit; font: inherit;
  padding: 0 16px 0 2px; cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 6px center, right 2px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.mt-chip-form select:focus { outline: 1px solid currentColor; outline-offset: 2px; }

/* Ayuda de redaccion. El aviso de que el texto sale del sistema va dentro del menu,
   a la vista de quien lo usa y no escondido en un tooltip. */
.mt-ia { display: inline-block; }
/* Va en la barra del editor, junto a B / I / U: hereda el disparador con
   etiqueta de .mt-mas-btn (si no, se queda en el cuadro de 38x38 del menu «...»
   y el texto se le sale) y baja a la tipografia de la barra. */
.mt-ia > summary { font-size: 12.5px; font-weight: 500; white-space: nowrap; }
/* El disparador vive al inicio de la barra, no al final como el menu «...»:
   anclado a la derecha el panel se abria hacia afuera y tapaba el menu lateral. */
.mt-ia .mt-mas-panel { right: auto; left: 0; }
.mt-ia-nota { display: block; padding: 6px 10px; font-size: 11px; color: var(--mt-texto-3); }
.mt-ia-trabajando { opacity: 0.6; pointer-events: none; }

/* ---------- Editor con formato (bitacora) ----------
   El sistema viejo usa summernote en la caja de comentario. Aqui es un
   contenteditable, asi que el marco y la barra los pone esta hoja: sin ellos no se
   ve como un campo y nadie sabe que puede escribir ahi. */

.mt-editor-barra {
  display: flex; flex-wrap: wrap; gap: 4px;
  border: 1px solid var(--mt-borde); border-bottom: 0;
  border-radius: 8px 8px 0 0; padding: 6px; background: var(--mt-fondo);
}
.mt-editor-barra button {
  border: 1px solid transparent; background: transparent; border-radius: 6px;
  padding: 3px 9px; font-size: 12.5px; color: var(--mt-texto-2); cursor: pointer;
}
.mt-editor-barra button:hover { background: var(--mt-superficie); border-color: var(--mt-borde); }
.mt-editor-barra select {
  border: 1px solid var(--mt-borde); background: var(--mt-superficie); border-radius: 6px;
  padding: 2px 4px; font-size: 12.5px; color: var(--mt-texto-2); font-family: inherit;
}

.mt-editor-caja {
  border: 1px solid var(--mt-borde); border-radius: 0 0 8px 8px;
  padding: 10px 12px; min-height: 96px; background: var(--mt-superficie);
  font-size: 13.5px; line-height: 1.55; overflow-y: auto;
}
.mt-editor-caja:focus { outline: 0; border-color: var(--mt-primario); }
/* El contenteditable vacio no tiene alto ni pista de para que sirve. */
.mt-editor-caja:empty::before {
  content: attr(data-vacio); color: var(--mt-texto-3);
}
.mt-editor-caja ul, .mt-editor-caja ol { margin: 4px 0; padding-left: 22px; }

/* ---------- Bitacora: linea de tiempo central ----------
   Los movimientos alternan a izquierda y derecha de una linea central, con la
   medalla del codigo de seguimiento encima. Es la forma que tenia el PHP
   (vertical-timeline de INSPINIA con center-orientation) y la que el AASP conoce.

   Alternar depende del ancho del CONTENEDOR, no del viewport: la bitacora vive en
   una columna junto al rail derecho, asi que en una pantalla de 1440 solo dispone
   de ~700px. Medir el viewport daria tarjetas de 300px con el texto del
   diagnostico dentro. Por eso va con @container.

   El caso base es UNA columna. Si el navegador no soporta container queries, se
   queda asi: se ve bien, solo no alterna.

   El rail derecho no usa esto: mide 320px y se queda con .mt-hilo. */

.mt-lt-caja { container-type: inline-size; }

.mt-lt { position: relative; padding: 10px 0 4px; }

.mt-lt::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 17px;
  width: 2px; background: var(--mt-borde-suave);
}

.mt-lt-bloque { position: relative; margin-bottom: 22px; }
.mt-lt-bloque:last-child { margin-bottom: 0; }

.mt-lt-medalla {
  position: absolute; left: 17px; top: 6px; margin-left: -17px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-size: 14px; line-height: 1;
  /* El aro separa la medalla de la linea, y toma el color del panel. */
  box-shadow: 0 0 0 4px var(--mt-superficie);
}
/* Algunos colores de la tabla son claros (#FFCC00, #FFFF00) y el icono blanco
   encima no se leeria. */
.mt-lt-medalla > .fa { text-shadow: 0 1px 1px rgba(31, 29, 27, 0.4); }

.mt-lt-tarjeta {
  margin-left: 52px;
  background: var(--mt-superficie);
  border: 1px solid var(--mt-borde);
  border-radius: 11px;
  padding: 12px 15px;
  position: relative;
}

/* La punta hacia la linea. Van dos triangulos, uno del color del borde y otro del
   fondo encima desplazado 1px: es la unica forma de que un triangulo CSS tenga
   borde. */
.mt-lt-tarjeta::before,
.mt-lt-tarjeta::after {
  content: ''; position: absolute; top: 13px;
  border: 9px solid transparent;
}
.mt-lt-tarjeta::before { left: -18px; border-right-color: var(--mt-borde); }
.mt-lt-tarjeta::after  { left: -17px; border-right-color: var(--mt-superficie); }

.mt-lt-titulo { font-size: 13px; font-weight: 700; color: var(--mt-texto); }
.mt-lt-cab { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mt-lt-quien {
  font-size: 11px; color: var(--mt-texto-3); margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.mt-lt-cuerpo { font-size: 12.5px; line-height: 1.5; margin-top: 8px; overflow-wrap: anywhere; }
.mt-lt-cuerpo table { width: 100%; font-size: 11.5px; }

/* El umbral es 660 y no un numero redondo: en una pantalla de 1440, que es la mas
   comun aqui, esta columna mide 698px. Con 720 nunca alternaria justo donde el
   AASP trabaja. A 660 alterna con tarjetas de ~315px, y en un monitor de 1920
   quedan en ~466px. Por debajo se va a una columna, que es lo correcto: media
   tarjeta de 250px con el texto de un diagnostico dentro no se lee. */
@container (min-width: 660px) {
  .mt-lt::before { left: 50%; margin-left: -1px; }
  .mt-lt-medalla { left: 50%; }
  .mt-lt-tarjeta { width: calc(50% - 34px); margin-left: 0; }
  .mt-lt-bloque:nth-child(even) .mt-lt-tarjeta { margin-left: calc(50% + 34px); }

  /* Impar: la punta sale por la derecha. */
  .mt-lt-bloque:nth-child(odd) .mt-lt-tarjeta::before {
    left: auto; right: -18px; border-right-color: transparent; border-left-color: var(--mt-borde);
  }
  .mt-lt-bloque:nth-child(odd) .mt-lt-tarjeta::after {
    left: auto; right: -17px; border-right-color: transparent; border-left-color: var(--mt-superficie);
  }
}

/* Casillas. inicio.css trae el «awesome-bootstrap-checkbox» de la plantilla vieja:
   esconde la casilla real (opacity 0) y pinta una falsa con label::before, cuya
   palomita solo aparece con el input ANTES del label y como hermanos
   (input:checked + label::after). Todas las casillas del port van DENTRO de su label,
   asi que se marcaban pero la palomita no salia nunca: parecian no responder (MYS-41).
   Aqui vuelve la casilla nativa. */
.checkbox, .checkbox label { padding-left: 0; }
.checkbox label::before, .checkbox label::after { content: none; display: none; }
.checkbox input[type="checkbox"], .checkbox input[type="radio"] {
  opacity: 1; position: static; margin: 0 7px 0 0; vertical-align: -2px; cursor: pointer;
  width: 15px; height: 15px; accent-color: var(--mt-primario);
}

/* Mis reportes: cada reporte es una fila que se despliega. Cerrada cabe en un renglon. */
.mt-reporte { padding: 0; margin-bottom: 8px; }
.mt-reporte > summary {
  list-style: none; cursor: pointer; padding: 12px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.mt-reporte > summary::-webkit-details-marker { display: none; }
.mt-reporte > summary::before {
  content: '\25B8'; color: var(--mt-texto-3); font-size: 11px; transition: transform .15s;
}
.mt-reporte[open] > summary::before { transform: rotate(90deg); }
.mt-reporte-clave { min-width: 58px; font-weight: 700; }
.mt-reporte-titulo { flex: 1 1 240px; font-weight: 600; }
.mt-reporte-quien { font-size: 12.5px; }
.mt-reporte-cuerpo { padding: 4px 16px 16px 44px; border-top: 1px solid var(--mt-borde-suave); padding-top: 12px; }
.mt-reporte-rechazo > summary { list-style: none; }
.mt-reporte-rechazo > summary::-webkit-details-marker { display: none; }