/* =============================================================================
   CARGA DEL DÍA EN EL TELÉFONO — etapa 3c del teléfono
   docs/movil/lamina-05-azucar-carga-del-dia.html: ganó la B (06/10/2026), «la
   ficha por artículo». La vista es `despachos-curso-mobile.js` (no hay pantalla
   de la PC que montar: el escritorio sigue con su board).

   Scope `.dcm-ui`, puesto en los TRES lugares donde vive la pantalla: la lista
   (`#dcm-root`, adentro de `#mobile-data-container`), la ficha (`#dcm-ficha`) y
   la hoja (`#dcm-hoja`), que se montan en <body>. Sin Tailwind.

   CAPAS: la ficha (180) y la hoja (190) quedan DEBAJO de los diálogos del
   sistema (`core/dialogos.css`, 240) y del escáner QR (2000): una confirmación
   o la cámara se abren encima de lo que se está cargando.

   El movimiento es el del armazón (core/mobile-ui.css): la ficha entra
   deslizando, la hoja sube y se cierra arrastrando (`core/mobile-gestos.js`),
   los renglones caen escalonados, las barras crecen, el lote nuevo entra y el
   que se borra se va de costado.
   ========================================================================== */
.dcm-ui { font-size: 14px; line-height: 1.45; color: var(--ink); }
.dcm-ui .material-symbols-outlined { font-size: 19px; line-height: 1; }

/* ── La lista: la píldora y el renglón apilado ─────────────────────────────── */
#dcm-root { padding: 8px 12px 40px; }
#dcm-root .dcm-seg {
    position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, 1fr);
    padding: 3px; border-radius: 11px; background: #e3e7ef;
}
#dcm-root .dcm-seg > button {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
    min-height: 38px; border: 0; border-radius: 8px; background: none;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); transition: color .24s;
}
#dcm-root .dcm-seg > button.on { color: var(--navy); }
/* Sin el indicador que viaja (lo pone mobile-gestos.js), el elegido se ve igual. */
#dcm-root .dcm-seg:not(.mv-con-ind) > button.on { background: #fff; box-shadow: var(--e1); }
#dcm-root .dcm-seg > button:focus-visible { outline: 2px solid var(--navy-300); outline-offset: -2px; }
#dcm-root .dcm-cnt {
    min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--navy-500); color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
}
#dcm-root .dcm-resu { margin: 10px 4px 6px; font-size: 12.5px; color: var(--muted); }
#dcm-root .dcm-resu b { color: var(--ink); }

.dcm-ui .dcm-lista {
    background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card);
    box-shadow: var(--e1); overflow: hidden;
}
.dcm-ui .dcm-r {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%;
    padding: 11px 14px; border: 0; border-bottom: 1px solid var(--hair); background: none;
    font: inherit; color: var(--ink); text-align: left;
    transition: background .12s ease, transform .12s ease;
    animation: mvCae .3s cubic-bezier(.2, .8, .2, 1) both;
}
.dcm-ui .dcm-r:last-child { border-bottom: 0; }
#dcm-root .dcm-lista .dcm-r:active { background: var(--navy-050); transform: scale(.985); }
.dcm-ui .dcm-r:focus-visible { outline: 2px solid var(--navy-300); outline-offset: -2px; }
.dcm-ui .dcm-r:nth-child(2) { animation-delay: 35ms; }
.dcm-ui .dcm-r:nth-child(3) { animation-delay: 70ms; }
.dcm-ui .dcm-r:nth-child(4) { animation-delay: 105ms; }
.dcm-ui .dcm-r:nth-child(5) { animation-delay: 140ms; }
.dcm-ui .dcm-r:nth-child(n+6) { animation-delay: 175ms; }
.dcm-ui .dcm-r-cli { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcm-ui .dcm-r-kg { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dcm-ui .dcm-r-kg small { font-weight: 500; color: var(--muted); font-size: 11.5px; }
.dcm-ui .dcm-r-l2 { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcm-ui .dcm-r-l3 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.dcm-ui .dcm-chip {
    display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px;
    border: 1px solid var(--hair-strong); background: #fff; color: var(--muted);
    font-size: 11.5px; font-weight: 600; line-height: 1.6; white-space: nowrap;
}
.dcm-ui .dcm-chip .material-symbols-outlined { font-size: 14px; }
.dcm-ui .dcm-chip.ok   { color: var(--ok);   background: var(--ok-050);   border-color: var(--ok-hair); }
.dcm-ui .dcm-chip.warn { color: var(--warn); background: var(--warn-050); border-color: var(--warn-hair); }
.dcm-ui .dcm-chip.crit { color: var(--crit); background: var(--crit-050); border-color: var(--crit-hair); }
.dcm-ui .dcm-chip.nav  { color: var(--navy-500); background: var(--navy-050); border-color: #d3dff0; }

.dcm-ui .dcm-vacio { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13.5px; }
.dcm-ui .dcm-vacio > .material-symbols-outlined { display: block; margin: 0 auto 6px; font-size: 34px; color: var(--ok); }
.dcm-ui .dcm-vacio.crit > .material-symbols-outlined { color: var(--crit); }

/* ── La ficha: una pantalla encima de la lista ──────────────────────────────── */
.dcm-ui.dcm-ficha {
    position: fixed; inset: 0; z-index: 180; display: flex; flex-direction: column;
    background: var(--canvas); overscroll-behavior: none;
}
@keyframes dcmEntra { from { transform: translateX(100%); } to { transform: none; } }
.dcm-ui.dcm-ficha.dcm-entra { animation: dcmEntra .26s cubic-bezier(.2, .8, .2, 1) both; }
.dcm-ui.dcm-ficha.dcm-sale { transition: transform .22s ease-in; transform: translateX(100%); }
.dcm-ui .dcm-top {
    display: flex; align-items: center; gap: 10px; flex: none;
    padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top));
    background: var(--navy); color: #fff;
}
.dcm-ui .dcm-fc { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 10px 12px 18px; }
.dcm-ui .dcm-fc > * + * { margin-top: 10px; }
.dcm-ui .dcm-pie {
    flex: none; padding: 8px 12px; padding-bottom: max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--hair); background: var(--surface);
}

.dcm-ui .dcm-caja {
    background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card);
    box-shadow: var(--e1); padding: 12px 14px;
}
.dcm-ui .dcm-caja.plana { box-shadow: none; padding: 10px 12px; }
.dcm-ui .dcm-rot, .dcm-ui .dcm-grp {
    display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase; color: var(--faint);
}
.dcm-ui .dcm-grp { margin: 14px 4px 6px; }
.dcm-ui .dcm-grp small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.dcm-ui .dcm-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 13.5px; }
.dcm-ui .dcm-dl span { display: block; font-size: 11px; color: var(--faint); }
.dcm-ui .dcm-dl b { font-weight: 600; overflow-wrap: anywhere; }
.dcm-ui .dcm-it {
    display: flex; justify-content: space-between; gap: 10px; padding: 6px 0;
    border-bottom: 1px dashed var(--hair); font-size: 13.5px;
}
.dcm-ui .dcm-it:last-child { border-bottom: 0; }
.dcm-ui .dcm-it small { display: block; color: var(--muted); font-size: 12px; }
.dcm-ui .dcm-it b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dcm-ui .dcm-txt { font-size: 13.5px; white-space: pre-wrap; }

/* Las franjas: lo que el que carga tiene que leer antes de empezar. */
.dcm-ui .dcm-franja {
    display: flex; gap: 8px; padding: 9px 11px; border: 1px solid; border-radius: 11px;
    font-size: 12.5px; line-height: 1.4; animation: mvCae .3s cubic-bezier(.2, .8, .2, 1) both;
}
.dcm-ui .dcm-franja > .material-symbols-outlined { flex: none; font-size: 18px; }
.dcm-ui .dcm-franja b { display: block; }
.dcm-ui .dcm-franja.crit { background: var(--crit-050); border-color: var(--crit-hair); color: #8e1c1c; }
.dcm-ui .dcm-franja.warn { background: var(--warn-050); border-color: var(--warn-hair); color: #7a4200; }
.dcm-ui .dcm-franja.ok   { background: var(--ok-050);   border-color: var(--ok-hair);   color: var(--ok); }
.dcm-ui .dcm-franja.nav  { background: var(--navy-050); border-color: #d3dff0;          color: var(--navy); }
.dcm-ui .dcm-franja.crit > .material-symbols-outlined { color: var(--crit); }
.dcm-ui .dcm-franja.warn > .material-symbols-outlined { color: var(--warn); }

/* Cuánto va de cuánto. */
.dcm-ui .dcm-res {
    background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card);
    box-shadow: var(--e1); padding: 12px 14px;
}
.dcm-ui .dcm-res .k { font-size: 12px; color: var(--muted); }
.dcm-ui .dcm-res .k + .dcm-barra + .k, .dcm-ui .dcm-barra + .k { margin-top: 6px; }
.dcm-ui .dcm-res .big { font-size: 22px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.dcm-ui .dcm-res .big small { font-size: 14px; font-weight: 500; color: var(--muted); }
.dcm-ui .dcm-barra { display: block; height: 8px; margin-top: 8px; border-radius: 9px; background: #e6eaf2; overflow: hidden; }
.dcm-ui .dcm-barra.chica { height: 5px; margin-top: 6px; }
@keyframes dcmCrece { from { transform: scaleX(0); } to { transform: none; } }
.dcm-ui .dcm-barra > i {
    display: block; height: 100%; border-radius: 9px; background: var(--navy-500);
    transform-origin: left; animation: dcmCrece .45s cubic-bezier(.2, .8, .2, 1) both;
}
.dcm-ui .dcm-barra.ok > i { background: var(--ok); }

/* Los renglones de la ficha: camión, depósito, artículos. */
.dcm-ui .dcm-lin {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px;
    padding: 10px 14px; border: 0; border-bottom: 1px solid var(--hair); background: none;
    font: inherit; color: var(--ink); text-align: left;
    transition: background .12s ease, transform .12s ease;
}
.dcm-ui .dcm-lin:last-child { border-bottom: 0; }
.dcm-ui .dcm-lin:active { background: var(--navy-050); transform: scale(.985); }
.dcm-ui .dcm-lin:focus-visible { outline: 2px solid var(--navy-300); outline-offset: -2px; }
.dcm-ui .dcm-lin > .material-symbols-outlined { color: var(--navy-500); flex: none; }
.dcm-ui .dcm-lin > .material-symbols-outlined:last-child { color: var(--hair-strong); }
.dcm-ui .dcm-lin .t { flex: 1; min-width: 0; font-size: 13.5px; }
.dcm-ui .dcm-lin .t b { display: block; font-weight: 600; }
.dcm-ui .dcm-lin .t small { display: block; color: var(--muted); font-size: 12px; }
.dcm-ui .dcm-lin.falta { background: var(--warn-050); }
.dcm-ui .dcm-lin.falta > .material-symbols-outlined:first-child, .dcm-ui .dcm-lin.falta .t b { color: var(--warn); }
.dcm-ui .dcm-lin.dcm-art { display: block; }
.dcm-ui .dcm-art .l1 { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.dcm-ui .dcm-art .l1 span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dcm-ui .dcm-art .l3 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
@keyframes dcmDestello { 30% { background: var(--ok-050); } }
.dcm-ui .dcm-art.dcm-destello { animation: dcmDestello .7s ease; }

/* Los botones. Navy es la acción; uno por pantalla. */
.dcm-ui .dcm-b {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1;
    min-height: 44px; padding: 8px 14px; border: 1px solid var(--hair-strong); border-radius: 11px;
    background: #fff; font: inherit; font-weight: 600; color: var(--ink);
    transition: transform .12s ease, background .12s ease;
}
.dcm-ui .dcm-b:active { transform: scale(.96); }
.dcm-ui .dcm-b:focus-visible { outline: 2px solid var(--navy-300); outline-offset: 2px; }
.dcm-ui .dcm-b.prim { background: var(--navy); border-color: var(--navy); color: #fff; }
.dcm-ui .dcm-b.prim:active { background: var(--navy-700); }
.dcm-ui .dcm-b.crit { width: 100%; color: var(--crit); border-color: var(--crit-hair); }
.dcm-ui .dcm-b.grande { width: 100%; min-height: 54px; font-size: 15px; }
.dcm-ui .dcm-b:disabled { opacity: .45; }
.dcm-ui .dcm-b.dcm-gira .material-symbols-outlined { animation: mvGira .7s linear infinite; }
.dcm-ui .dcm-fila { display: flex; gap: 8px; margin-top: 8px; }

.dcm-ui .dcm-guarda {
    display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 18px; margin-bottom: 6px;
    font-size: 11.5px; color: var(--muted);
}
.dcm-ui .dcm-pie > .dcm-b + .dcm-guarda { margin: 6px 0 0; }
.dcm-ui .dcm-guarda .material-symbols-outlined { font-size: 14px; }
.dcm-ui .dcm-guarda.ok { color: var(--ok); }
.dcm-ui .dcm-guarda.crit { color: var(--crit); }
.dcm-ui .dcm-guarda.gira .material-symbols-outlined { animation: mvGira .7s linear infinite; }

/* ── La hoja que sube ───────────────────────────────────────────────────────── */
.dcm-ui.dcm-velo {
    position: fixed; inset: 0; z-index: 190; display: flex; flex-direction: column; justify-content: flex-end;
    background: rgba(10, 20, 40, .38); opacity: 0; transition: opacity .28s ease;
}
.dcm-ui.dcm-velo.on { opacity: 1; }
.dcm-ui .dcm-hoja-panel {
    display: flex; flex-direction: column; max-height: 90vh; background: var(--surface);
    border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(16, 32, 64, .18);
    transform: translateY(105%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); will-change: transform;
}
.dcm-ui.dcm-velo.on .dcm-hoja-panel { transform: none; }
.dcm-ui .dcm-hoja-panel.mv-arrastra { transition: none; }
.dcm-ui .dcm-hoja-panel.mv-baja { transition: transform .22s ease-in; transform: translateY(105%) !important; }
.dcm-ui .dcm-hoja-panel.mv-vuelve { transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.dcm-ui .dcm-asa { flex: none; display: flex; justify-content: center; padding: 8px 0 4px; }
.dcm-ui .dcm-asa i { width: 40px; height: 5px; border-radius: 9px; background: var(--hair-strong); }
.dcm-ui .dcm-h-cab { flex: none; padding: 2px 18px 10px; border-bottom: 1px solid var(--hair); }
.dcm-ui .dcm-h-cab .k { font-size: 12px; color: var(--muted); }
.dcm-ui .dcm-h-cab h4 { margin: 2px 0 4px; font-size: 17px; font-weight: 600; }
.dcm-ui .dcm-h-cab .dcm-campo { margin-top: 6px; }
.dcm-ui .dcm-h-cue { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 12px 18px; }
.dcm-ui .dcm-h-cue > .dcm-franja + *, .dcm-ui .dcm-h-cue > .dcm-check + .dcm-franja { margin-top: 10px; }
.dcm-ui .dcm-h-pie {
    flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    padding-bottom: max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--hair);
}
.dcm-ui .dcm-suma { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); }
.dcm-ui .dcm-suma b { color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.dcm-ui .dcm-suma .warn { color: var(--warn); font-weight: 600; }
.dcm-ui .dcm-suma .ok { color: var(--ok); font-weight: 600; }
.dcm-ui .dcm-nada { padding: 6px 0; font-size: 12.5px; color: var(--muted); }
.dcm-ui .dcm-adv { margin-top: 6px; font-size: 12px; color: var(--crit); }

/* Un lote declarado: código, kilos, quitar. */
.dcm-ui .dcm-lt { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--hair); }
.dcm-ui .dcm-lt:last-of-type { border-bottom: 0; }
.dcm-ui .dcm-lt .c { flex: 1; min-width: 0; }
.dcm-ui .dcm-lt .c b { display: block; font-family: Consolas, ui-monospace, monospace; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.dcm-ui .dcm-lt .c small { font-size: 11.5px; color: var(--muted); }
.dcm-ui .dcm-lt .crit, .dcm-ui .dcm-hrow small.crit { color: var(--crit); font-weight: 600; }
.dcm-ui .dcm-lt .warn { color: var(--warn); font-weight: 600; }
.dcm-ui .dcm-lt .kg { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dcm-ui .dcm-lt input, .dcm-ui .dcm-pos-kg input {
    width: 92px; min-height: 40px; padding: 6px 8px; border: 1px solid var(--hair-strong); border-radius: 9px;
    font: inherit; font-size: 15px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums;
}
.dcm-ui .dcm-x {
    flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 9px; background: none; color: var(--faint);
}
.dcm-ui .dcm-x:active { background: var(--crit-050); color: var(--crit); }
@keyframes dcmLoteEntra { from { opacity: 0; transform: translateY(8px); background: var(--ok-050); } to { opacity: 1; transform: none; } }
.dcm-ui .dcm-lt.dcm-nuevo { animation: dcmLoteEntra .35s cubic-bezier(.2, .8, .2, 1) both; }
.dcm-ui .dcm-lt.dcm-sale-lote { transition: opacity .2s, transform .2s; opacity: 0; transform: translateX(30px); }

/* Los renglones de una hoja que se eligen (lote, cartel, depósito). */
.dcm-ui .dcm-hrow {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 10px 2px;
    border: 0; border-bottom: 1px solid var(--hair); background: none; font: inherit; color: var(--ink); text-align: left;
    transition: background .12s ease;
}
.dcm-ui .dcm-hrow:active { background: var(--navy-050); }
.dcm-ui .dcm-hrow .c { flex: 1; min-width: 0; }
.dcm-ui .dcm-hrow .c b { display: block; font-family: Consolas, ui-monospace, monospace; font-size: 13px; font-weight: 600; }
.dcm-ui .dcm-hrow .c b.nom { font-family: inherit; font-size: 14px; }
.dcm-ui .dcm-hrow .c small { display: block; font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.dcm-ui .dcm-hrow .kgv { font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dcm-ui .dcm-tic {
    flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--hair-strong); border-radius: 6px; color: transparent;
    transition: background .15s, border-color .15s, color .15s;
}
.dcm-ui .dcm-tic .material-symbols-outlined { font-size: 16px; }
.dcm-ui .dcm-hrow.on .dcm-tic, .dcm-ui .dcm-pos.on .dcm-tic { background: var(--navy); border-color: var(--navy); color: #fff; }
.dcm-ui .dcm-num {
    flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; background: var(--navy-050); color: var(--navy); font-weight: 700;
}
.dcm-ui .dcm-pos { border-bottom: 1px solid var(--hair); }
.dcm-ui .dcm-pos .dcm-hrow { border-bottom: 0; }
.dcm-ui .dcm-pos-kg { display: flex; align-items: center; gap: 8px; padding: 0 2px 10px 34px; font-size: 12px; color: var(--muted); }
.dcm-ui .dcm-pos-tot { flex: 1; font-size: 12.5px; color: var(--muted); }

/* El cierre: lo que está, lo que avisa, lo que falta. */
.dcm-ui .dcm-check { list-style: none; margin: 0; padding: 0; }
.dcm-ui .dcm-check li { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 13.5px; }
.dcm-ui .dcm-check li:last-child { border-bottom: 0; }
.dcm-ui .dcm-check li > .material-symbols-outlined { flex: none; font-size: 19px; }
.dcm-ui .dcm-check li small { display: block; font-size: 12px; color: var(--muted); }
.dcm-ui .dcm-check li.si > .material-symbols-outlined { color: var(--ok); }
.dcm-ui .dcm-check li.av > .material-symbols-outlined { color: var(--warn); }
.dcm-ui .dcm-check li.no > .material-symbols-outlined { color: var(--crit); }
.dcm-ui .dcm-step { display: flex; align-items: center; gap: 8px; }
.dcm-ui .dcm-step + .dcm-step { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair); }
.dcm-ui .dcm-step .lbl { flex: 1; font-size: 13.5px; font-weight: 600; }
.dcm-ui .dcm-step .lbl small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.dcm-ui .dcm-step button {
    flex: none; width: 42px; height: 42px; border: 1px solid var(--hair-strong); border-radius: 50%;
    background: #fff; font: inherit; font-size: 20px; font-weight: 600; color: var(--navy);
    transition: transform .12s ease, background .12s ease;
}
.dcm-ui .dcm-step button:active { transform: scale(.88); background: var(--navy-050); }
.dcm-ui .dcm-step input {
    width: 58px; min-height: 42px; border: 1px solid var(--hair-strong); border-radius: 10px;
    font: inherit; font-size: 19px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
}
@keyframes dcmPop { 50% { transform: scale(1.18); } }
.dcm-ui .dcm-step input.dcm-pop { animation: dcmPop .22s ease; }
.dcm-ui .dcm-campo {
    display: block; width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--hair-strong);
    border-radius: 10px; background: #fff; font: inherit; font-size: 14px; color: var(--ink); resize: none;
}
.dcm-ui input:focus, .dcm-ui select:focus, .dcm-ui textarea:focus { outline: 2px solid var(--navy-300); outline-offset: 0; border-color: var(--navy-300); }

/* ── El aviso: una franja ARRIBA (abajo está el pulgar), con vibración si es malo. */
.dcm-ui.dcm-toast {
    position: fixed; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 2100;
    display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 12px;
    background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600;
    box-shadow: 0 10px 30px rgba(16, 32, 64, .25);
    animation: mvCae .24s cubic-bezier(.2, .8, .2, 1) both; transition: opacity .25s, transform .25s;
}
.dcm-ui.dcm-toast.ok > .material-symbols-outlined { color: #7fd6ae; }
.dcm-ui.dcm-toast.crit { background: var(--crit); }
.dcm-ui.dcm-toast.fuera { opacity: 0; transform: translateY(-10px); }

@media (prefers-reduced-motion: reduce) {
    .dcm-ui .dcm-r, .dcm-ui .dcm-franja, .dcm-ui .dcm-barra > i, .dcm-ui .dcm-lt.dcm-nuevo,
    .dcm-ui .dcm-art.dcm-destello, .dcm-ui.dcm-toast, .dcm-ui.dcm-ficha.dcm-entra { animation: none; }
    .dcm-ui.dcm-velo, .dcm-ui .dcm-hoja-panel, .dcm-ui .dcm-b, .dcm-ui .dcm-lin, .dcm-ui .dcm-r { transition: none; }
}