/* ============================================================
   DANGOFE OS · TALLER · CRM DE MANTENIMIENTOS PREVENTIVOS (prefijo mt-) · 2026-10-16 · chat de Diseño
   Karla: «un pequeño CRM para el taller… un aviso que me llegue o un resumen de los próximos mantenimientos
   preventivos… y también al cliente… que funcionara solo con algún reloj del tiempo… el CRM en un negocio lo es todo».
   Lo pinta taller-mantenimientos.js (DangofeOS.mantTaller). Sin sombras; claro y Noche por [data-theme='dark'] / .is-noche.
   Tres versiones (.mt--A|B|C):
     A · Tablero  · lista por urgencia en secciones (para hoy y atrasados, avisados sin agendar, próximos, agendados)
     B · Columnas · cuatro columnas: le toca · avisados · agendados · atrasados (en teléfono, una debajo de otra)
     C · Agenda   · por fecha de vencimiento, con el día a la izquierda
   ============================================================ */
.mt {
  --mt-az: 11, 61, 214; --mt-cel: 59, 130, 246; --mt-rojo: 220, 38, 38; --mt-amb: 217, 119, 6; --mt-ver: 22, 163, 74;
  --mt-txt: var(--text-primary, #0b1540); --mt-txt2: var(--text-secondary, #4a5680); --mt-borde: var(--glass-border, rgba(3, 38, 155, .12)); --mt-borde2: rgba(3, 38, 155, .18);
  --mt-card: var(--glass-bg-strong, rgba(255, 255, 255, .72)); --mt-card2: rgba(255, 255, 255, .55); --mt-card3: var(--glass-bg-input, rgba(255, 255, 255, .9)); --mt-linea: rgba(10, 22, 51, .09);
  --mt-r: 18px; --mt-r2: 14px; --mt-blur: 14px; --mt-foco: 0 0 0 3px rgba(59, 130, 246, .35); --mt-azul-txt: #0b3dd6; --mt-rojo-txt: #b91c1c; --mt-amb-txt: #b45309; --mt-ver-txt: #15803d;
  position: relative; display: flex; flex-direction: column; gap: 12px; color: var(--mt-txt); font-family: var(--font-family-ui, 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
}
.mt.is-noche, [data-theme='dark'] .mt { --mt-card: rgba(8, 16, 46, .72); --mt-card2: rgba(8, 16, 46, .5); --mt-card3: rgba(255, 255, 255, .07); --mt-linea: rgba(255, 255, 255, .1); --mt-borde: rgba(120, 150, 255, .14); --mt-borde2: rgba(140, 170, 255, .3); --mt-azul-txt: #8db0ff; --mt-rojo-txt: #fca5a5; --mt-amb-txt: #fcd34d; --mt-ver-txt: #86efac; }
.mt *, .mt *::before, .mt *::after { box-sizing: border-box; }
.mt button, .mt input, .mt select, .mt textarea { font: inherit; color: inherit; }
.mt button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.mt :focus-visible { outline: 0; box-shadow: var(--mt-foco); }
.mt [hidden] { display: none !important; }
.mt a { color: inherit; }
.mt__vidrio { border: 1px solid var(--mt-borde); border-radius: var(--mt-r); background: var(--mt-card); -webkit-backdrop-filter: blur(var(--mt-blur)) saturate(140%); backdrop-filter: blur(var(--mt-blur)) saturate(140%); }
.mt__cargando, .mt__error { padding: 28px 16px; text-align: center; color: var(--mt-txt2); font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mt__error svg { width: 22px; height: 22px; color: var(--mt-rojo-txt); }

/* ---------- cabecera ---------- */
.mt__cab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; flex-wrap: wrap; }
.mt__cab-ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(var(--mt-cel), .13); color: var(--mt-azul-txt); }
.mt__cab-ic svg { width: 21px; height: 21px; }
.mt__cab-t { flex: 1 1 320px; min-width: 0; }
.mt__cab-t h2 { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.mt__cab-t p { margin: 2px 0 0; font-size: .86rem; color: var(--mt-txt2); line-height: 1.4; }
.mt__cab-t p b { color: var(--mt-txt); }
.mt__cab-acc { display: flex; gap: 8px; align-items: center; margin-left: auto; }

/* ---------- botones y chips ---------- */
.mt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--mt-borde2); background: var(--mt-card3); color: var(--mt-txt); font-weight: 700; font-size: .86rem; white-space: nowrap; text-decoration: none; }
.mt-btn svg { width: 15px; height: 15px; flex: none; }
.mt-btn:hover { border-color: rgba(var(--mt-cel), .5); }
.mt-btn--ico { width: 38px; padding: 0; }
.mt-btn--xs { min-height: 32px; padding: 5px 11px; font-size: .8rem; }
.mt-btn--xs svg { width: 13px; height: 13px; }
.mt-btn--pri { background: rgb(var(--mt-az)); border-color: transparent; color: #fff; }
.mt-btn--ok { background: rgba(var(--mt-ver), .14); border-color: rgba(var(--mt-ver), .35); color: var(--mt-ver-txt); }
.mt-btn--wa { background: rgba(37, 211, 102, .16); border-color: rgba(37, 211, 102, .45); color: #15803d; }
.mt.is-noche .mt-btn--wa, [data-theme='dark'] .mt .mt-btn--wa { color: #86efac; }
.mt-btn--sut { background: transparent; border-color: transparent; color: var(--mt-txt2); }
.mt-btn[disabled] { opacity: .6; cursor: default; }
.mt-gira { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(128, 128, 128, .35); border-top-color: currentColor; animation: mt-gira .8s linear infinite; display: inline-block; }
@keyframes mt-gira { to { transform: rotate(360deg); } }
.mt-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--mt-borde2); background: var(--mt-card3); color: var(--mt-txt); font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.mt-chip.is-on { background: rgb(var(--mt-az)); border-color: transparent; color: #fff; }

/* ---------- los números ---------- */
.mt__kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.mt-kpi { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: var(--mt-r2); border: 1px solid var(--mt-borde); background: var(--mt-card2); text-align: left; min-width: 0; transition: border-color .2s ease; }
.mt-kpi:hover { border-color: rgba(var(--mt-cel), .5); }
.mt-kpi.is-on { border-color: rgb(var(--mt-az)); background: rgba(var(--mt-cel), .1); }
.mt-kpi__l { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--mt-txt2); }
.mt-kpi__l svg { width: 14px; height: 14px; }
.mt-kpi__v { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.mt-kpi__s { font-size: .74rem; color: var(--mt-txt2); line-height: 1.3; }
.mt-kpi--roj .mt-kpi__v { color: var(--mt-rojo-txt); }
.mt-kpi--amb .mt-kpi__v { color: var(--mt-amb-txt); }
.mt-kpi--ver .mt-kpi__v { color: var(--mt-ver-txt); }
.mt-kpi--gris { opacity: .8; }
@media (max-width: 1100px) { .mt__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mt__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mt-kpi { padding: 10px 12px; } .mt-kpi__v { font-size: 1.3rem; } }

/* ---------- filtros ---------- */
.mt__filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; }
.mt__buscar { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 240px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--mt-borde2); background: var(--mt-card3); color: var(--mt-txt2); }
.mt__buscar svg { width: 15px; height: 15px; flex: none; }
.mt__buscar input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: 0; color: var(--mt-txt); font-size: .88rem; }
.mt__vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 30px 16px; color: var(--mt-txt2); }
.mt__vacio svg { width: 30px; height: 30px; color: var(--mt-ver-txt); }
.mt__vacio b { color: var(--mt-txt); font-size: 1rem; }

/* ---------- secciones y tarjetas ---------- */
.mt__cuerpo { display: flex; flex-direction: column; gap: 14px; }
.mt-sec { display: flex; flex-direction: column; gap: 8px; }
.mt-sec__t { margin: 4px 2px 0; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mt-txt2); display: flex; align-items: center; gap: 8px; }
.mt-sec__t span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--mt-card3); border: 1px solid var(--mt-borde2); font-size: 11.5px; }
.mt-sec__l { display: flex; flex-direction: column; gap: 8px; }
.mt-item { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--mt-r); border: 1px solid var(--mt-borde); background: var(--mt-card); -webkit-backdrop-filter: blur(var(--mt-blur)) saturate(140%); backdrop-filter: blur(var(--mt-blur)) saturate(140%); border-left-width: 4px; }
.mt-item--le_toca { border-left-color: rgb(var(--mt-rojo)); }
.mt-item--atrasado { border-left-color: rgb(var(--mt-rojo)); }
.mt-item--avisado { border-left-color: rgb(var(--mt-amb)); }
.mt-item--por_vencer { border-left-color: rgb(var(--mt-cel)); }
.mt-item--agendado { border-left-color: rgb(var(--mt-ver)); }
.mt-item--hecho, .mt-item--no_quiere { border-left-color: var(--mt-borde2); opacity: .85; }
.mt-item__cab { display: flex; align-items: center; gap: 10px; }
.mt-ava { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; }
.mt-item__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mt-item__t b { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-item__t span { font-size: .8rem; color: var(--mt-txt2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-est { flex: none; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: var(--mt-card3); border: 1px solid var(--mt-borde2); color: var(--mt-txt2); }
.mt-est--le_toca, .mt-est--atrasado { background: rgba(var(--mt-rojo), .12); border-color: rgba(var(--mt-rojo), .35); color: var(--mt-rojo-txt); }
.mt-est--avisado { background: rgba(var(--mt-amb), .12); border-color: rgba(var(--mt-amb), .35); color: var(--mt-amb-txt); }
.mt-est--por_vencer { background: rgba(var(--mt-cel), .12); border-color: rgba(var(--mt-cel), .35); color: var(--mt-azul-txt); }
.mt-est--agendado, .mt-est--hecho { background: rgba(var(--mt-ver), .12); border-color: rgba(var(--mt-ver), .35); color: var(--mt-ver-txt); }
.mt-item__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--mt-txt2); }
.mt-item__meta > span { display: inline-flex; align-items: center; gap: 5px; }
.mt-item__meta svg { width: 13px; height: 13px; }
.mt-vence.is-mal { color: var(--mt-rojo-txt); font-weight: 700; }
.mt-sincorreo { color: var(--mt-amb-txt); font-weight: 700; }
.mt-ag { color: var(--mt-ver-txt); font-weight: 700; }
.mt-item__nota { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--mt-card3); font-size: .84rem; line-height: 1.35; }
.mt-item__nota svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--mt-txt2); }
.mt-item__notaform { display: flex; flex-direction: column; gap: 6px; }
.mt-item__notaform textarea { width: 100%; resize: vertical; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--mt-borde2); background: var(--mt-card3); font-size: .88rem; }
.mt-item__notaform > div { display: flex; gap: 6px; }
.mt-item__acc { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-item__err { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(var(--mt-amb), .12); border: 1px solid rgba(var(--mt-amb), .35); font-size: .82rem; font-weight: 600; }
.mt-item__err svg { width: 15px; height: 15px; color: var(--mt-amb-txt); flex: none; }
.mt-item--mini { padding: 10px 12px; gap: 6px; }
.mt-item--mini .mt-ava { width: 30px; height: 30px; font-size: 11px; }
.mt-item--mini .mt-item__t b { font-size: .9rem; }
.mt-item--mini .mt-est { display: none; }

/* ---------- B · Columnas ---------- */
.mt-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
.mt-col { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--mt-r); border: 1px solid var(--mt-borde); border-top-width: 4px; background: var(--mt-card2); min-width: 0; }
.mt-col--roj { border-top-color: rgb(var(--mt-rojo)); }
.mt-col--amb { border-top-color: rgb(var(--mt-amb)); }
.mt-col--ver { border-top-color: rgb(var(--mt-ver)); }
.mt-col__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px; }
.mt-col__cab h3 { margin: 0; font-size: .86rem; font-weight: 800; }
.mt-col__n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--mt-card3); border: 1px solid var(--mt-borde2); font-size: 12px; font-weight: 800; }
.mt-col__vacio { padding: 18px 10px; text-align: center; font-size: .82rem; color: var(--mt-txt2); border: 1px dashed var(--mt-borde2); border-radius: var(--mt-r2); }
.mt-col .mt-item { border-left-width: 1px; }
@media (max-width: 1000px) { .mt-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mt-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- C · Agenda ---------- */
.mt-agenda { display: flex; flex-direction: column; gap: 8px; }
.mt-agenda__t { margin: 8px 2px 0; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mt-txt2); }
.mt-dia { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: start; }
.mt-dia__f { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 4px; border-radius: var(--mt-r2); border: 1px solid var(--mt-borde); background: var(--mt-card2); color: var(--mt-txt2); line-height: 1.05; }
.mt-dia__f b { font-size: 1.35rem; color: var(--mt-txt); }
.mt-dia__f span { font-size: .72rem; text-transform: uppercase; font-weight: 800; letter-spacing: .06em; }
.mt-dia__f small { font-size: .66rem; margin-top: 2px; }
.mt-dia__f.is-hoy { border-color: rgb(var(--mt-az)); background: rgba(var(--mt-cel), .12); }
.mt-dia__f.is-hoy b { color: var(--mt-azul-txt); }
.mt-dia__f.is-mal { border-color: rgba(var(--mt-rojo), .5); }
.mt-dia__f.is-mal b { color: var(--mt-rojo-txt); }

/* ---------- la hoja de ajustes ---------- */
html.mt-bloqueo { overflow: hidden; }
.mt-velo { position: fixed; inset: 0; z-index: 1200; background: rgba(5, 10, 30, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; padding: 0; opacity: 0; transition: opacity .2s ease; }
.mt-velo.is-on { opacity: 1; }
.mt-hoja { width: 100%; max-width: 620px; max-height: calc(100dvh - 20px); display: flex; flex-direction: column; border-radius: 22px 22px 0 0; border: 1px solid var(--mt-borde); background: var(--mt-card); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); transform: translateY(16px); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.mt-velo.is-on .mt-hoja { transform: none; }
.mt.is-noche .mt-hoja, [data-theme='dark'] .mt-hoja { background: rgba(12, 22, 60, .96); }
.mt-hoja__asa { width: 40px; height: 4px; border-radius: 999px; background: var(--mt-linea); margin: 8px auto 0; }
.mt-hoja__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 18px 6px; }
.mt-hoja__cab h3 { margin: 2px 0 0; font-size: 1.15rem; font-weight: 800; }
.mt-ojal { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mt-azul-txt); }
.mt-ojal svg { width: 13px; height: 13px; }
.mt-hoja__cuerpo { flex: 1 1 auto; overflow: auto; padding: 4px 18px 10px; display: flex; flex-direction: column; gap: 12px; }
.mt-hoja__pie { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 18px max(14px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--mt-linea); }
@media (min-width: 700px) { .mt-velo { align-items: center; padding: 16px; } .mt-hoja { border-radius: 22px; max-height: calc(100dvh - 32px); } .mt-hoja__asa { display: none; } .mt-hoja__cab { padding-top: 16px; } }
.mt-sw { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--mt-r2); border: 1px solid var(--mt-borde); background: var(--mt-card2); cursor: pointer; }
.mt-sw > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mt-sw b { font-size: .95rem; }
.mt-sw small { font-size: .78rem; color: var(--mt-txt2); line-height: 1.35; }
.mt-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mt-sw i { flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--mt-linea); border: 1px solid var(--mt-borde2); position: relative; transition: background .2s ease; }
.mt-sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s ease; border: 1px solid rgba(0, 0, 0, .06); }
.mt-sw input:checked + i { background: rgb(var(--mt-ver)); border-color: transparent; }
.mt-sw input:checked + i::after { transform: translateX(18px); }
.mt-sw input:focus-visible + i { box-shadow: var(--mt-foco); }
.mt-sw--chica { padding: 10px 12px; }
.mt-aj-sec { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--mt-r2); border: 1px solid var(--mt-borde); background: var(--mt-card2); }
.mt-aj-sec h4 { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mt-txt2); }
.mt-aj-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .mt-aj-fila { grid-template-columns: 1fr; } }
.mt-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mt-campo > span { font-size: .8rem; font-weight: 600; color: var(--mt-txt2); }
.mt-campo input, .mt-campo textarea { width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--mt-borde2); background: var(--mt-card3); font-size: .9rem; }
.mt-campo textarea { min-height: 120px; resize: vertical; line-height: 1.4; }
.mt-campo input:focus, .mt-campo textarea:focus { outline: 0; border-color: rgb(var(--mt-az)); }
.mt-campo__u { display: flex; align-items: center; gap: 8px; }
.mt-campo__u input { width: 90px; }
.mt-campo__u em { font-style: normal; font-size: .86rem; color: var(--mt-txt2); }
.mt-vars { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .78rem; color: var(--mt-txt2); }
.mt-var { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 12px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--mt-borde2); background: var(--mt-card3); color: var(--mt-azul-txt); }
.mt-previa { border-radius: var(--mt-r2); border: 1px solid var(--mt-borde2); background: var(--mt-card3); overflow: hidden; }
.mt-previa__cab { padding: 8px 12px; font-size: .8rem; color: var(--mt-txt2); border-bottom: 1px solid var(--mt-linea); }
.mt-previa__cab b { color: var(--mt-txt); }
.mt-previa__cuerpo { margin: 0; padding: 12px; font: inherit; font-size: .88rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.mt-nota { margin: 0; font-size: .8rem; color: var(--mt-txt2); line-height: 1.4; }
.mt-aviso { padding: 10px 12px; border-radius: 12px; background: rgba(var(--mt-amb), .12); border: 1px solid rgba(var(--mt-amb), .35); font-size: .86rem; }

/* ---------- el toast ---------- */
.mt__toast { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); z-index: 1300; max-width: min(460px, calc(100% - 32px)); padding: 10px 16px; border-radius: 14px; background: #15803d; color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.35; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.mt__toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.mt__toast.is-mal { background: #b91c1c; }

@media (max-width: 760px) {
  .mt__cab { padding: 12px 14px; }
  .mt__cab-acc { margin-left: 0; width: 100%; }
  .mt__cab-acc .mt-btn:first-child { flex: 1 1 auto; }
  .mt-item__acc .mt-btn { flex: 1 1 auto; }
  .mt-item__t b, .mt-item__t span { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .mt *, .mt *::before, .mt *::after { transition: none !important; animation: none !important; } }