/* ---------- Colores y letras de MecaniCAM ---------- */
:root {
  --fondo: #EDF0F3;
  --superficie: #FFFFFF;
  --campo: #F6F8FA;
  --tinta: #13202E;
  --suave: #5E6A78;
  --linea: #D2D9E0;
  --navy: #0E2742;
  --acento: #1F4E8C;
  --hilo: #C2410C;
  --ok: #1E7A4C;
  --error: #B42318;
  --letra: "Barlow", "Segoe UI", Roboto, Arial, sans-serif;
  --titulo: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--letra);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fondo);
  min-height: 100vh;
}

/* ---------- Barra superior ---------- */
.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px max(16px, env(safe-area-inset-left));
  padding-top: max(10px, env(safe-area-inset-top));
  background: linear-gradient(90deg, var(--navy) 30%, #1B3E68);
  border-bottom: 5px solid var(--hilo);
}
.logo {
  height: 44px;
  width: auto;
  background: #fff;
  border-radius: 8px;
  padding: 3px 6px;
}
.barra-der { display: flex; align-items: center; gap: 10px; min-width: 0; }
.usuario {
  color: #C9D6E6;
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barra .btn.fantasma { color: #fff; border-color: rgba(255, 255, 255, .5); }

/* ---------- Pantallas ---------- */
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
.pantalla { display: grid; gap: 16px; }
.centro { min-height: 40vh; place-items: center; }

h1 {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(1.9rem, 6vw, 2.4rem);
  line-height: 1.05;
  margin: 0;
}
h2 {
  font-family: var(--titulo);
  font-size: 1.35rem;
  margin: 0;
}
.etiqueta {
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hilo);
}
.sub { margin: 0; color: var(--suave); }

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 22px clamp(16px, 4vw, 28px);
  display: grid;
  gap: 14px;
}
.angosta { max-width: 420px; width: 100%; margin: 4vh auto 0; }

/* ---------- Formularios ---------- */
form { display: grid; gap: 8px; }
label { font-weight: 600; font-size: .92rem; margin-top: 6px; }
input, select, textarea {
  width: 100%;
  font: inherit;
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 11px 12px;
}
input:focus-visible, button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--acento) 45%, transparent);
  outline-offset: 2px;
  border-color: var(--acento);
}

.btn {
  font: inherit;
  font-weight: 600;
  border-radius: 8px;
  padding: 11px 20px;
  cursor: pointer;
  border: 1px solid var(--acento);
  background: var(--acento);
  color: #fff;
  margin-top: 10px;
}
.btn.fantasma { background: transparent; color: var(--acento); padding: 6px 12px; margin: 0; font-size: .9rem; }
.btn:disabled { opacity: .6; cursor: wait; }

.msg { margin: 4px 0 0; color: var(--error); font-weight: 600; font-size: .95rem; }

/* ---------- Listas ---------- */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista li {
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-left: 5px solid var(--acento);
  border-radius: 8px;
  background: var(--campo);
}
.lista li b { display: block; }
.lista li span { color: var(--suave); font-size: .9rem; }
.lista .vacio { border-left-color: var(--linea); color: var(--suave); }

/* ---------- Paso 4: empresas, plantas, usuarios ---------- */
.logo-link { display: inline-flex; }
h3 { font-family: var(--titulo); font-size: 1.1rem; margin: 6px 0 0; }
.cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn.chico { padding: 7px 14px; font-size: .9rem; margin: 0; }
.enlace { font: inherit; font-weight: 600; color: var(--acento); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.cambio { margin: 10px 0 0; font-size: .95rem; color: var(--suave); text-align: center; }
.pista { font-weight: 400; color: var(--suave); }
.ok { margin: 4px 0 0; color: var(--ok); font-weight: 600; font-size: .95rem; }
.volver { color: var(--acento); font-weight: 600; text-decoration: none; justify-self: start; }

.sub-form { border: 1px dashed var(--acento); border-radius: 10px; padding: 14px 16px; background: color-mix(in srgb, var(--acento) 4%, #fff); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 4px 14px; }
.campo { display: grid; gap: 4px; min-width: 0; align-content: start; }
.campo.ancho { grid-column: 1 / -1; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.acciones .btn { margin-top: 6px; }

.fila-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 8px; }
@media (max-width: 560px) { .fila-form { grid-template-columns: 1fr; } }

.lista li.clic { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lista li.clic::after { content: "›"; font-size: 1.6rem; color: var(--suave); line-height: 1; }
.lista li.clic:hover { border-color: var(--acento); }
.lista li.persona { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lista li.pendiente { border-left-color: var(--hilo); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 600; padding: 2px 4px 2px 10px; border-radius: 999px; background: #E3EBF5; color: var(--acento); }
.chip.solo { padding-right: 10px; }
.chip button { font: inherit; border: 0; background: transparent; color: var(--suave); cursor: pointer; padding: 0 4px; font-size: 1rem; line-height: 1; }
.chip button:hover { color: var(--error); }
.quitar { font: inherit; font-size: .85rem; color: var(--error); background: none; border: 1px solid var(--linea); border-radius: 6px; padding: 4px 10px; cursor: pointer; }

/* ---------- Paso 5: máquinas y etiquetas QR ---------- */
.fila-form.dos { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 560px) { .fila-form.dos { grid-template-columns: minmax(0, 1fr) auto; } }
.contador { font-family: var(--letra); font-size: .95rem; font-weight: 600; color: var(--suave); }
.filtros { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; }
@media (max-width: 560px) { .filtros { grid-template-columns: 1fr; } }
.lista li .baja { color: var(--error); font-weight: 600; }
.lista li.inactiva { opacity: .6; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--acento); }

.ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 10px 16px; margin: 0; }
.ficha div { background: var(--campo); border: 1px solid var(--linea); border-radius: 8px; padding: 8px 12px; min-width: 0; }
.ficha dt { font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--suave); }
.ficha dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }

.qr-caja { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: center; }
@media (max-width: 520px) { .qr-caja { grid-template-columns: 1fr; justify-items: start; } }
.qr { width: 180px; height: 180px; background: #fff; border: 1px solid var(--linea); border-radius: 8px; padding: 6px; }
.qr svg { width: 100%; height: 100%; display: block; }
.codigo { margin: 10px 0 0; font-size: .95rem; }
.codigo b { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; font-size: 1.05rem; }

/* Etiquetas para imprimir: 64 × 34 mm, en hoja carta, con borde para recortar */
#zona-impresion { display: none; }
@media print {
  @page { size: letter; margin: 10mm; }
  body { background: #fff; }
  body > *:not(#zona-impresion) { display: none !important; }
  #zona-impresion { display: flex; flex-wrap: wrap; gap: 3mm; }
  .etq {
    width: 64mm; height: 34mm; box-sizing: border-box; border: .3mm dashed #999; border-radius: 2mm;
    display: grid; grid-template-columns: 30mm 1fr; gap: 2mm; padding: 2mm; break-inside: avoid;
    font-family: Barlow, Arial, sans-serif; color: #000; overflow: hidden;
  }
  .etq svg { width: 30mm; height: 30mm; display: block; }
  .etq-txt { display: grid; align-content: space-between; min-width: 0; }
  .etq-logo { height: 7mm; width: auto; justify-self: start; }
  .etq-emp { font-size: 6.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; line-height: 1.1; }
  .etq-maq { font-size: 8pt; font-weight: 700; line-height: 1.1; }
  .etq-det { font-size: 6.5pt; line-height: 1.15; }
  .etq-cod { font-family: "IBM Plex Mono", Menlo, monospace; font-size: 8pt; font-weight: 700; letter-spacing: .06em; }
}

/* ---------- Paso 6: solicitudes ---------- */
textarea { width: 100%; font: inherit; color: var(--tinta); background: var(--campo); border: 1px solid var(--linea); border-radius: 8px; padding: 11px 12px; resize: vertical; }
.estado { display: inline-flex; align-items: center; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.estado.pendiente  { background: #FDEBDD; color: #9A3412; }
.estado.aprobada   { background: #E3EBF5; color: var(--acento); }
.estado.en_proceso { background: #EDE7F6; color: #5B3A9B; }
.estado.cerrada    { background: #DFF1E7; color: var(--ok); }
.estado.rechazada  { background: #FBE3E1; color: var(--error); }
.estado.anulada    { background: #EEF0F2; color: var(--suave); }
.prioridad { font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #EEF0F2; color: var(--suave); }
.prioridad.alta { background: #FDEBDD; color: #9A3412; }
.prioridad.urgente { background: var(--error); color: #fff; }

.pestanas { display: flex; gap: 6px; flex-wrap: wrap; }
.pestanas button { font: inherit; font-size: .88rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea); background: var(--campo); color: var(--suave); cursor: pointer; }
.pestanas button[aria-selected="true"] { background: var(--acento); border-color: var(--acento); color: #fff; }
.pestanas .n { margin-left: 4px; opacity: .8; }

.lista li.sol { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; cursor: pointer; }
.lista li.sol:hover { border-color: var(--acento); }
.lista li.sol .der { display: grid; justify-items: end; gap: 4px; }
.lista li.sol.pendiente { border-left-color: var(--hilo); }
.lista li.sol.cerrada { border-left-color: var(--ok); }
.lista li.sol.rechazada, .lista li.sol.anulada { border-left-color: var(--linea); }
.lista li.sol .desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--tinta); font-size: .92rem; }

.rep-cabeza, .rep-fila { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 72px 36px; gap: 6px; align-items: center; }
.rep-cabeza { font-size: .8rem; font-weight: 600; color: var(--suave); }
.rep-filas { display: grid; gap: 6px; margin-bottom: 4px; }
.rep-fila button { font: inherit; font-size: 1.2rem; border: 1px solid var(--linea); background: #fff; border-radius: 8px; height: 44px; cursor: pointer; color: var(--suave); }
@media (max-width: 520px) {
  .rep-cabeza { display: none; }
  .rep-fila { grid-template-columns: minmax(0, 1fr) 72px 36px; padding-bottom: 6px; border-bottom: 1px solid var(--linea); }
  .rep-fila .rep-d { grid-column: 1 / -1; }
}

.maq-link { font-weight: 700; color: var(--acento); text-decoration: none; }
.texto-largo { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th { text-align: left; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--suave); padding: 6px 8px; border-bottom: 1px solid var(--linea); }
.tabla td { padding: 8px; border-bottom: 1px solid var(--linea); overflow-wrap: anywhere; }
.tabla .num { text-align: right; width: 64px; }
.linea-tiempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.linea-tiempo li { position: relative; padding: 0 0 16px 26px; }
.linea-tiempo li::before { content: ""; position: absolute; left: 6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--acento); }
.linea-tiempo li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 18px; bottom: 0; width: 2px; background: var(--linea); }
.linea-tiempo li.rojo::before { background: var(--error); }
.linea-tiempo li.verde::before { background: var(--ok); }
.linea-tiempo li.gris::before { background: var(--suave); }
.linea-tiempo b { display: block; }
.linea-tiempo span { color: var(--suave); font-size: .9rem; }
.linea-tiempo p { margin: 4px 0 0; white-space: pre-wrap; font-size: .95rem; }
.btn.peligro { background: #fff; color: var(--error); border-color: var(--error); }
.btn.verde { background: var(--ok); border-color: var(--ok); }

/* ---------- Editar y eliminar ---------- */
.chico-top { margin-top: 10px; }
.acciones.separadas { justify-content: space-between; }
.empuja { margin-left: auto; }
.lista li.planta { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.mini { display: flex; gap: 6px; }
.mini button { font: inherit; font-size: .85rem; font-weight: 600; background: #fff; border: 1px solid var(--linea); border-radius: 6px; padding: 4px 10px; cursor: pointer; color: var(--acento); }
.mini button.borrar { color: var(--error); }
.lista li.editando { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
@media (max-width: 560px) { .lista li.editando { grid-template-columns: 1fr; } }

/* ---------- Informe de servicio ---------- */
.rejilla.cuatro { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
fieldset.opciones { border: 0; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
fieldset.opciones legend { font-weight: 600; font-size: .92rem; margin-bottom: 8px; padding: 0; }
.opcion { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; margin: 0; padding: 8px 14px; border: 1px solid var(--linea); border-radius: 999px; background: var(--campo); cursor: pointer; }
.opcion:has(input:checked) { background: #E3EBF5; border-color: var(--acento); color: var(--acento); }
.opcion input { width: 16px; height: 16px; accent-color: var(--acento); }
.rep-cabeza.inf, .rep-fila.inf { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 64px minmax(0, 1fr) 36px; }
@media (max-width: 520px) {
  .rep-fila.inf { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) 36px; }
  .rep-fila.inf .rep-d { grid-column: 1 / -1; }
}
.total-linea { margin: 4px 0 0; text-align: right; color: var(--suave); }
.total-linea b { font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--tinta); font-size: 1.1rem; }
.firma-caja { display: grid; gap: 6px; margin: 4px 0 8px; }
.firma-cab { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: .92rem; }
canvas.firma { width: 100%; height: 170px; background: #fff; border: 1px dashed var(--suave); border-radius: 10px; touch-action: none; cursor: crosshair; }
canvas.firma.mal { border-color: var(--error); border-style: solid; }
.politica { border: 1px solid var(--linea); border-radius: 10px; background: var(--campo); }
.politica summary { cursor: pointer; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; list-style: none; }
.politica summary::-webkit-details-marker { display: none; }
.pol-etq { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hilo); width: 100%; }
.pol-tit { font-weight: 700; }
.pol-ver { color: var(--acento); font-weight: 600; font-size: .9rem; margin-left: auto; }
.politica[open] .pol-ver { visibility: hidden; }
.pol-body { padding: 0 14px 14px; font-size: .92rem; max-height: 420px; overflow-y: auto; }
.pol-body h3 { font-size: 1rem; margin: 14px 0 4px; }
.pol-body p, .pol-body li, .pol-body dd, .pol-body dt { margin: 4px 0; }
.pol-body dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; }
.pol-body dt { font-weight: 600; }
.vista-pdf { width: 100%; height: auto; border: 1px solid var(--linea); border-radius: 8px; box-shadow: 0 2px 10px rgba(14, 39, 66, .08); }
.lista li.inf { border-left-color: var(--ok); }
.pila { display: grid; gap: 16px; }
.pista-horas { font-size: .88rem; margin: 0; }
.estado.pausada { background: #FFF4D6; color: #8A5A00; }
.lista li.sol.pausada { border-left-color: #D69E2E; }
.linea-tiempo li.naranja::before { background: #D69E2E; }
.pausa-caja { border: 1px dashed #D69E2E; border-radius: 10px; padding: 12px 14px; background: #FFFBEF; display: grid; gap: 8px; }

/* ---------- Rutina de mantenimiento (mismo diseño del formulario de WordPress) ---------- */
#rut { display: grid; gap: 16px; }
.ru-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; padding-bottom: 14px; border-bottom: 2px dashed var(--hilo); }
.ru-tally { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .85rem; color: var(--suave); text-align: right; display: grid; }
.ru-tally b { color: var(--tinta); font-size: 1.4rem; }
.ru-tally small { font-family: var(--letra); font-size: .78rem; color: var(--ok); min-height: 1em; }
.ru-pasos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; list-style: none; margin: 0; padding: 0; }
.ru-pasos li { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); padding-top: 8px; border-top: 4px solid var(--linea); }
.ru-pasos li.on { color: var(--acento); border-top-color: var(--acento); }
.ru-pasos li.hecho { color: var(--tinta); border-top-color: var(--ok); }
.ru-pasos span { font-family: "IBM Plex Mono", monospace; margin-right: 4px; }
.acciones.derecha { justify-content: flex-end; }
.ru-cats { display: grid; gap: 22px; }
.ru-cat { display: grid; gap: 12px; }
.ru-cat h3 { font-size: 1.2rem; margin: 0; display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.ru-cat h3 .cn { font-family: "IBM Plex Mono", monospace; font-size: .85rem; background: var(--tinta); color: #fff; border-radius: 6px; min-width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.ru-cat h3 em { margin-left: auto; font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: .8rem; color: #fff; background: var(--ok); border-radius: 999px; padding: 2px 9px; }
.ru-tipo { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-weight: 600; font-size: .95rem; }
.ru-seg { display: inline-flex; border: 1px solid var(--acento); border-radius: 8px; overflow: hidden; }
.ru-seg button { font: inherit; font-weight: 600; padding: 8px 18px; min-height: 40px; border: 0; background: transparent; color: var(--acento); cursor: pointer; }
.ru-seg button + button { border-left: 1px solid var(--acento); }
.ru-seg button[aria-pressed="true"] { background: var(--acento); color: #fff; }
.ru-nota { color: var(--suave); background: var(--campo); border: 1px dashed var(--linea); border-radius: 8px; padding: 12px 14px; margin: 0; font-size: .92rem; }
.ru-secs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (max-width: 420px) { .ru-secs { grid-template-columns: 1fr 1fr; gap: 10px; } }
.ru-sec { font: inherit; text-align: left; display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid var(--linea); border-radius: 10px; padding: 0; overflow: hidden; cursor: pointer; color: var(--tinta); position: relative; }
.ru-sec:hover { border-color: var(--acento); }
.ru-sec.tiene { border-color: var(--ok); border-width: 2px; }
.ru-sec .th { aspect-ratio: 4 / 3; background: #fff; border-bottom: 1px solid var(--linea); display: flex; align-items: center; justify-content: center; padding: 6px; }
.ru-sec .th img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ru-sec .tx { padding: 10px 12px; display: grid; gap: 2px; }
.ru-sec b { font-family: var(--titulo); font-size: 1.15rem; line-height: 1.1; }
.ru-sec small { color: var(--suave); font-size: .8rem; line-height: 1.3; }
.ru-sec .insignia { position: absolute; top: 8px; right: 8px; background: var(--ok); color: #fff; font-family: "IBM Plex Mono", monospace; font-size: .78rem; border-radius: 999px; padding: 2px 9px; }
.ru-diag { position: relative; background: #fff; border: 1px solid var(--linea); border-radius: 8px; padding: 8px; cursor: zoom-in; }
.ru-diag img { display: block; width: 100%; max-height: 60vh; object-fit: contain; }
.ru-diag span { position: absolute; right: 10px; bottom: 10px; background: rgba(22, 32, 43, .8); color: #fff; font-size: .8rem; border-radius: 6px; padding: 4px 10px; }
.ru-leyenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: .85rem; color: var(--suave); }
.ru-leyenda .I, .ru-chip.I { --c: var(--acento); color: var(--acento); }
.ru-leyenda .C, .ru-chip.C { --c: var(--hilo); color: var(--hilo); }
.ru-leyenda .L, .ru-chip.L { --c: var(--ok); color: var(--ok); }
.ru-filtro, .ru-herr { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ru-filtro button { font: inherit; font-size: .85rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea); background: var(--campo); color: var(--suave); cursor: pointer; }
.ru-filtro button.on { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.ru-filas { display: grid; border-top: 1px solid var(--linea); }
.ru-fila { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.ru-fila.marcada { background: color-mix(in srgb, var(--ok) 7%, transparent); }
.ru-no { font-family: "IBM Plex Mono", monospace; font-size: .95rem; text-align: center; border: 1px solid var(--linea); border-radius: 6px; padding: 3px 0; background: var(--campo); }
.ru-nm { font-weight: 600; line-height: 1.25; }
.ru-chips { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.ru-chip { font: inherit; font-size: .85rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--c); background: transparent; cursor: pointer; min-height: 34px; }
.ru-chip[aria-pressed="true"] { background: var(--c); color: #fff; }
.ru-cant { display: flex; align-items: center; border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; background: var(--campo); }
.ru-cant button { font: inherit; font-size: 1.2rem; width: 36px; height: 36px; border: 0; background: transparent; color: var(--acento); cursor: pointer; }
.ru-cant input { width: 44px; height: 36px; border: 0; border-inline: 1px solid var(--linea); border-radius: 0; text-align: center; font-family: "IBM Plex Mono", monospace; font-size: 1rem; background: #fff; padding: 0; -moz-appearance: textfield; }
.ru-cant input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ru-resumen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ru-resumen div { background: var(--campo); border: 1px solid var(--linea); border-radius: 8px; padding: 10px; text-align: center; }
.ru-resumen b { display: block; font-family: "IBM Plex Mono", monospace; font-size: 1.4rem; }
.ru-resumen small { font-size: .76rem; color: var(--suave); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 480px) { .ru-resumen { grid-template-columns: repeat(2, 1fr); } }
.ru-lista h3 { font-size: 1.1rem; margin: 14px 0 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ru-lista ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.ru-lista li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--linea); align-items: baseline; }
.ru-lista li em { font-style: normal; font-size: .85rem; color: var(--suave); }
.ru-lista li .q { font-family: "IBM Plex Mono", monospace; }
.ru-zoom { position: fixed; inset: 0; z-index: 9999; background: #0A0E14; display: grid; grid-template-rows: auto 1fr; }
.ru-zoom .barra-zoom { display: flex; gap: 8px; justify-content: space-between; align-items: center; padding: 10px 12px; color: #fff; }
.ru-zoom .barra-zoom b { font-family: var(--titulo); font-size: 1.2rem; }
.ru-zoom .barra-zoom div { display: flex; gap: 8px; }
.ru-zoom .barra-zoom button { font: inherit; font-size: 1.2rem; font-weight: 700; width: 44px; height: 44px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; cursor: pointer; }
.ru-zoom .sc { overflow: auto; touch-action: pan-x pan-y pinch-zoom; }
.ru-zoom .sc img { display: block; background: #fff; margin: 0 auto; max-width: none; }
.lista li.sol.rut { border-left-color: var(--acento); }

/* Orden de trabajo: técnico asignado */
.asignado { margin: 0; font-weight: 600; }
.asignado.falta { color: var(--hilo); }
.asignar { display: grid; gap: 6px; margin-top: 12px; }
.fila-asignar { display: flex; gap: 8px; flex-wrap: wrap; }
.fila-asignar select { flex: 1 1 200px; min-width: 0; }
.lista li.sol .tec { display: block; font-size: .85rem; font-weight: 600; color: var(--acento); }
.lista li.sol .tec.falta { color: var(--hilo); }
/* Plantas: al tocarlas muestran sus máquinas */
.lista li.planta .abrir-planta { flex: 1 1 200px; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.lista li.planta .abrir-planta b { grid-column: 1; }
.lista li.planta .abrir-planta > span:not(.cuenta) { grid-column: 1; color: var(--suave); font-size: .9rem; }
.lista li.planta .abrir-planta .cuenta { grid-column: 2; grid-row: 1 / span 2; font-size: .85rem; font-weight: 600; color: var(--acento); white-space: nowrap; }
.lista li.planta .abrir-planta .cuenta::after { content: " ▾"; }
.lista li.planta.abierta .abrir-planta .cuenta::after { content: " ▴"; }
.lista li.planta.sin-planta { border-style: dashed; }
.maq-planta { flex-basis: 100%; list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--linea); }
.maq-planta li { padding: 8px 0; border-bottom: 1px solid var(--linea); }
.maq-planta li:last-child { border-bottom: 0; }
.maq-planta a { display: grid; text-decoration: none; color: inherit; }
.maq-planta a b { color: var(--acento); }
.maq-planta a span, .maq-planta .vacio { color: var(--suave); font-size: .88rem; }
.lista .maq-planta li { background: none; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; padding: 8px 2px; margin: 0; box-shadow: none; }
.lista .maq-planta li:last-child { border-bottom: 0; }

/* Usuarios creados */
.filtros.tres { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 12px; }
@media (max-width: 560px) { .filtros.tres { grid-template-columns: 1fr; } }
.usuarios-todos li { display: grid; gap: 4px; }
.usuarios-todos .us-cab { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.usuarios-todos .us-datos { color: var(--suave); font-size: .9rem; overflow-wrap: anywhere; }
.usuarios-todos .us-datos a { color: inherit; }
.chip.super { background: var(--tinta); color: #fff; }
.chip.nada { background: #FDEEE6; color: var(--hilo); }
a.chip { text-decoration: none; }

/* Mi cuenta y crear usuario */
details.tarjeta > summary { cursor: pointer; list-style: none; }
details.tarjeta > summary::-webkit-details-marker { display: none; }
details.tarjeta > summary h2 { display: inline; font-size: 1.1rem; }
details.tarjeta > summary::after { content: " ▾"; color: var(--acento); }
details.tarjeta[open] > summary::after { content: " ▴"; }
.credenciales { background: #E9F5EE; border: 1px solid var(--ok); border-radius: 8px; padding: 10px 12px; }
.credenciales .ok { white-space: pre-line; margin: 0 0 8px; }
.persona .mini-acc { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.persona .mini-acc button { font: inherit; font-size: .82rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linea); background: #fff; color: var(--acento); cursor: pointer; }
.persona .mini-acc button.peligro, .usuarios-todos .mini-acc button.peligro { color: var(--error); }
.usuarios-todos .mini-acc { display: flex; gap: 6px; flex-wrap: wrap; }
.usuarios-todos .mini-acc button { font: inherit; font-size: .82rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linea); background: #fff; cursor: pointer; }
.chip.gris { background: #E8EAEE; color: var(--suave); }

/* Rutinas por tipo de máquina */
.filtros.uno { grid-template-columns: 1fr; margin-bottom: 12px; }
.ru-opciones { display: grid; gap: 10px; }
.ru-opcion { font: inherit; text-align: left; display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--linea); border-left: 5px solid var(--acento); border-radius: 10px; background: #fff; cursor: pointer; }
.ru-opcion:hover { border-color: var(--acento); }
.ru-opcion b { font-family: var(--titulo); font-size: 1.25rem; }
.ru-opcion span { color: var(--suave); font-size: .9rem; }
.ru-sec .th .sin { font-family: "IBM Plex Mono", monospace; font-size: 1.6rem; color: var(--suave); }
.secciones-pl li.sec-pl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
.secciones-pl .th { width: 96px; height: 96px; border: 1px solid var(--linea); border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.secciones-pl .th img { max-width: 100%; max-height: 100%; object-fit: contain; }
.secciones-pl .th span { font-size: .75rem; color: var(--suave); text-align: center; }
.secciones-pl .mini-acc { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.secciones-pl .mini-acc button { font: inherit; font-size: .82rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linea); background: #fff; color: var(--acento); cursor: pointer; }
.secciones-pl .mini-acc button.peligro { color: var(--error); }
.pista-pdf { font-size: .85rem; }
.editor-sec { display: grid; gap: 10px; border: 2px solid var(--acento); }
.editor-sec .avisos { margin: 0; padding: 10px 10px 10px 28px; background: #FDEEE6; border-radius: 8px; color: var(--hilo); font-size: .9rem; }
.ed-img { display: grid; gap: 8px; justify-items: start; }
.ed-img img { max-width: 100%; max-height: 340px; border: 1px solid var(--linea); border-radius: 8px; background: #fff; }
.ed-filas { display: grid; border-top: 1px solid var(--linea); }
.ed-fila { display: grid; grid-template-columns: 56px minmax(0, 1fr) 36px; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--linea); align-items: center; }
.ed-fila.mal { background: #FDEEE6; }
.ed-fila input { min-width: 0; }
.ed-fila .ed-acc { grid-column: 1 / -1; }
.ed-quitar { font: inherit; font-size: 1.2rem; border: 1px solid var(--linea); border-radius: 8px; background: #fff; color: var(--error); cursor: pointer; height: 36px; }
.ru-chip:disabled { cursor: default; opacity: .85; }
.lista li .chev { color: var(--suave); font-size: 1.3rem; }
#mq-rutinas li.clic { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.aviso-admin { border: 1px solid var(--ok); }
.aviso-admin.recien { border-width: 2px; background: #E9F5EE; }
.aviso-tec { margin-top: 12px; display: grid; gap: 8px; justify-items: start; }
.aviso-tec p { margin: 0; font-weight: 600; color: var(--ok); }
.aviso-tec.recien { background: #E9F5EE; border: 2px solid var(--ok); border-radius: 10px; padding: 12px; }
.guardado-estado { align-self: center; font-size: .88rem; font-weight: 600; color: var(--ok); }

/* Novedades */
.nv-maquina { margin: 0 0 8px; font-weight: 600; }
.nv-maquina a { color: var(--acento); }
.nv-desc { margin: 0 0 8px; white-space: pre-line; font-size: 1.05rem; }
.nv-resultado { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--fondo-suave, #F3F5F8); }
.nv-resultado a { font-weight: 600; color: var(--acento); }
.estado.nueva { background: #FDEEE6; color: var(--hilo); }
.estado.convertida { background: #E9F5EE; color: var(--ok); }
.estado.descartada { background: #E8EAEE; color: var(--suave); }

/* Editar usuario */
.us-editor { display: grid; gap: 12px; }
.us-roles { display: grid; gap: 8px; }
.us-roles h3 { margin: 4px 0 0; font-size: 1rem; }
.us-rol-fila { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 8px; align-items: center; }
.us-rol-fila.quitado { opacity: .45; text-decoration: line-through; }
@media (max-width: 560px) { .us-rol-fila { grid-template-columns: 1fr 1fr 40px; } .us-rol-fila b { grid-column: 1 / -1; } }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 600; }
/* Elegir WhatsApp normal o Business (Android) */
.wa-fondo { position: fixed; inset: 0; background: rgba(10, 20, 35, .55); display: flex; align-items: flex-end; justify-content: center; z-index: 100; }
.wa-caja { background: #fff; width: min(480px, 100%); border-radius: 18px 18px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); display: grid; gap: 10px; }
.wa-caja h3 { margin: 0 0 4px; font-size: 1.1rem; }
.wa-op { font: inherit; display: grid; gap: 2px; text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--linea); background: #fff; cursor: pointer; }
.wa-op b { font-size: 1.05rem; }
.wa-op small { color: var(--suave); }
.wa-op.negocio { border-color: #1E7A4C; background: #E9F5EE; }
.wa-cancelar { font: inherit; font-weight: 600; padding: 12px; border: 0; background: none; color: var(--acento); cursor: pointer; }

/* Registro fotográfico del informe */
.fotos-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 8px 0 4px; }
.fotos-rejilla:empty { display: none; }
.foto-item { position: relative; border: 1px solid var(--linea, #d9dee7); border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.foto-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #eef1f5; }
.foto-item input { border: 0; border-top: 1px solid var(--linea, #d9dee7); border-radius: 0; padding: 8px 10px; font-size: 14px; width: 100%; min-width: 0; }
.foto-quitar { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(15, 23, 42, .72); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.foto-item.subiendo img { opacity: .45; }