/* TFC Lab — estilo oscuro con acento amarillo, parecido a la app de AppSheet que ya usan. */
:root {
  --fondo: #121212; --panel: #1c1c1c; --panel2: #242424; --borde: #333; --borde2: #444;
  --texto: #f2f2f2; --suave: #a8a8a8; --tenue: #777;
  --acento: #ffd54f; --acento-txt: #1a1500;
  --cian: #00a9d6; --magenta: #eb5e9e; --amarillo: #deda4d;
  --ok: #4caf50; --alerta: #ffb300; --peligro: #e53935;
  --radio: 10px; --sombra: 0 6px 24px rgba(0,0,0,.45);
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fondo); color: var(--texto); font-family: var(--fuente); font-size: 16px; }
a { color: var(--acento); }
button, input, select, textarea { font: inherit; color: inherit; }
h1 { font-size: 22px; margin: 0; font-weight: 600; }
h2 { font-size: 17px; margin: 0 0 12px; font-weight: 600; }
.mono { font-family: var(--mono); }
.suave { color: var(--suave); }
.oculto { display: none !important; }

/* ---------- Estructura ---------- */
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.lateral { background: #0b0b0b; border-right: 1px solid var(--borde); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marca { font-weight: 900; letter-spacing: 4px; font-size: 18px; padding: 6px 12px 16px; display: flex; align-items: center; gap: 8px; }
.marca .puntos { display: inline-flex; gap: 4px; }
.marca .puntos i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--suave); text-decoration: none; font-size: 15px; }
.nav-item:hover { background: var(--panel); color: var(--texto); }
.nav-item.activo { background: var(--panel2); color: var(--acento); font-weight: 600; }
.nav-item .cont { margin-left: auto; background: var(--peligro); color: #fff; border-radius: 10px; font-size: 12px; padding: 1px 7px; }
.nav-sep { height: 1px; background: var(--borde); margin: 10px 4px; }
.nav-pie { margin-top: auto; padding: 10px 12px; font-size: 13px; color: var(--tenue); }
.contenido { padding: 22px 26px 90px; max-width: 1200px; width: 100%; }
.cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.cabecera .acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.aviso-prueba { background: #3a2f00; color: var(--acento); border: 1px solid #6b5700; padding: 8px 12px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; }
.barra-movil { display: none; }

/* ---------- Controles ---------- */
.btn { border: 1px solid var(--borde2); background: var(--panel2); padding: 9px 14px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--texto); font-size: 15px; white-space: nowrap; }
.btn:hover { border-color: var(--suave); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primario { background: var(--acento); color: var(--acento-txt); border-color: var(--acento); font-weight: 700; }
.btn.peligro { border-color: #7a1f1d; color: #ff8a80; }
.btn.chico { padding: 5px 10px; font-size: 13px; }
.btn.grande { padding: 13px 20px; font-size: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.campo > label { font-size: 13px; color: var(--suave); }
.campo > label .req { color: var(--acento); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=datetime-local], input[type=number], select, textarea {
  background: var(--panel); border: 1px solid var(--borde2); border-radius: 8px; padding: 11px 12px; width: 100%; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--acento); }
textarea { min-height: 70px; resize: vertical; }
input[type=date]::-webkit-calendar-picker-indicator, input[type=datetime-local]::-webkit-calendar-picker-indicator { filter: invert(1); }
.botonera { display: flex; flex-wrap: wrap; gap: 8px; }
.botonera button { flex: 1 1 auto; min-width: 90px; border: 1px solid var(--borde2); background: transparent; padding: 11px 12px; border-radius: 8px; cursor: pointer; }
.botonera button.sel { background: var(--acento); color: var(--acento-txt); border-color: var(--acento); font-weight: 700; }
.fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fila3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.error-campo { color: #ff8a80; font-size: 13px; }

/* ---------- Tarjetas y tablas ---------- */
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; margin-bottom: 16px; }
.tabla { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.tabla th { text-align: left; font-size: 13px; color: var(--suave); font-weight: 600; padding: 11px 12px; border-bottom: 1px solid var(--borde); background: #181818; }
.tabla td { padding: 11px 12px; border-bottom: 1px solid #262626; font-size: 15px; vertical-align: middle; }
.tabla tr:last-child td { border-bottom: none; }
.tabla tbody tr.click { cursor: pointer; }
.tabla tbody tr.click:hover td { background: #222; }
.vacio { text-align: center; color: var(--tenue); padding: 40px 10px; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.filtros input[type=search] { max-width: 340px; }
.chip { border: 1px solid var(--borde2); background: transparent; border-radius: 20px; padding: 6px 13px; cursor: pointer; font-size: 14px; color: var(--suave); }
.chip.sel { border-color: var(--acento); color: var(--acento); }

.semaforo { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.semaforo.verde { background: var(--ok); } .semaforo.amarillo { background: var(--alerta); } .semaforo.rojo { background: var(--peligro); }
.estado { display: inline-block; padding: 3px 9px; border-radius: 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.estado.Ingresado { background: #2a2a2a; color: #ddd; }
.estado.Procesando { background: #0d3346; color: #7fd6f3; }
.estado.Listo { background: #12391b; color: #8fe39b; }
.estado.RETIRO { background: #2d2d2d; color: #999; }
.estado.Forzar { background: #4a3300; color: var(--alerta); }
.rojo-txt { color: #ff6b6b; font-weight: 600; }
.etiqueta { display: inline-block; font-size: 12px; padding: 2px 7px; border-radius: 6px; background: #2a2a2a; color: var(--suave); margin-left: 6px; }
.etiqueta.alerta { background: #4a3300; color: var(--alerta); }
.etiqueta.peligro { background: #4a1210; color: #ff8a80; }

/* ---------- Detalle ---------- */
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 22px; }
.dato .k { font-size: 12px; color: var(--suave); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .4px; }
.dato .v { font-size: 16px; word-break: break-word; }
.dato .v.grande { font-size: 24px; font-family: var(--mono); font-weight: 700; }
.alerta-escaneo { border-radius: var(--radio); padding: 14px 16px; margin-bottom: 12px; font-weight: 700; }
.alerta-escaneo.amarilla { background: #f8c900; color: #151515; }
.alerta-escaneo.roja { background: #991b1b; color: #fff; }
.alerta-escaneo small { display: block; font-weight: 600; opacity: .9; margin-top: 3px; }
.aviso-credito { background: #3a2f00; color: var(--acento); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-weight: 600; }
.grupo-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.historial { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.historial li { padding: 8px 0; border-bottom: 1px solid #262626; display: flex; gap: 10px; }
.historial li .cuando { color: var(--tenue); white-space: nowrap; font-size: 13px; min-width: 120px; }

/* ---------- Material (rollos) ---------- */
.rollo { background: var(--panel2); border: 1px solid var(--borde); border-radius: 8px; padding: 12px; margin-bottom: 10px; display: grid; grid-template-columns: auto auto auto 1fr auto; gap: 10px; align-items: center; }
.paso { display: inline-flex; align-items: center; border: 1px solid var(--borde2); border-radius: 8px; overflow: hidden; }
.paso button { background: transparent; border: none; width: 34px; height: 38px; cursor: pointer; font-size: 18px; }
.paso span { min-width: 30px; text-align: center; font-weight: 700; }
.mini-botonera { display: inline-flex; border: 1px solid var(--borde2); border-radius: 8px; overflow: hidden; }
.mini-botonera button { background: transparent; border: none; padding: 9px 10px; cursor: pointer; font-size: 14px; border-right: 1px solid var(--borde2); }
.mini-botonera button:last-child { border-right: none; }
.mini-botonera button.sel { background: var(--acento); color: var(--acento-txt); font-weight: 700; }
.resumen-rollos { font-family: var(--mono); font-size: 14px; color: var(--suave); margin-top: 6px; }
.sugerencias { position: relative; }
.sugerencias .lista { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--panel2); border: 1px solid var(--borde2); border-radius: 8px; margin-top: 4px; max-height: 260px; overflow-y: auto; box-shadow: var(--sombra); }
.sugerencias .lista div { padding: 10px 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.sugerencias .lista div:hover, .sugerencias .lista div.sel { background: #333; }

/* ---------- Ventanas y avisos ---------- */
.velo { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.ventana { background: var(--panel); border: 1px solid var(--borde2); border-radius: 14px; padding: 22px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: var(--sombra); }
.ventana .pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #2b2b2b; border: 1px solid var(--borde2); padding: 12px 18px; border-radius: 10px; z-index: 60; box-shadow: var(--sombra); max-width: 92vw; font-size: 15px; }
.toast.ok { border-color: #2e7d32; } .toast.error { border-color: var(--peligro); color: #ffb4ab; }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login .tarjeta { width: 100%; max-width: 380px; padding: 30px; }
.login .marca { justify-content: center; font-size: 26px; padding-bottom: 6px; }
.login .barra-color { height: 4px; width: 60px; margin: 0 auto 24px; background: var(--magenta); }

/* ---------- Celular y tablet ---------- */
.tarjetas-lista { display: none; }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .lateral { display: none; }
  .contenido { padding: 16px 14px 96px; }
  .barra-movil { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #0b0b0b; border-top: 1px solid var(--borde); z-index: 40; padding-bottom: env(safe-area-inset-bottom); }
  .barra-movil a { flex: 1; text-align: center; padding: 9px 2px 8px; font-size: 11px; color: var(--suave); text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; }
  .barra-movil a .ic { font-size: 20px; line-height: 1; }
  .barra-movil a.activo { color: var(--acento); }
  .barra-movil a .cont { position: absolute; top: 4px; right: 18%; background: var(--peligro); color: #fff; border-radius: 9px; font-size: 10px; padding: 0 5px; }
  .fila2, .fila3 { grid-template-columns: 1fr; gap: 0; }
  .tabla.adaptable { display: none; }
  .tarjetas-lista { display: block; }
  .item { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 13px 14px; margin-bottom: 10px; cursor: pointer; }
  .item .l1 { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 700; font-size: 17px; }
  .item .l1 .estado { margin-left: auto; font-family: var(--fuente); }
  .item .l2 { color: var(--suave); font-size: 14px; margin-top: 6px; display: flex; justify-content: space-between; gap: 8px; }
  .rollo { grid-template-columns: 1fr 1fr; }
  .rollo .peli { grid-column: 1 / -1; }
  h1 { font-size: 20px; }
}

.ayuda { font-size: 13px; margin-top: 6px; color: var(--acento, #f5c400); font-family: ui-monospace, Menlo, monospace; word-break: break-word; }
.ayuda:empty { display: none; }

/* Panel del pedido: se abre encima de la lista (a la derecha en compu, pantalla completa en celu) */
.panel-velo { position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,0); transition: background .18s; }
.panel-velo.abierto { background: rgba(0,0,0,.55); }
.panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(820px, 100%); background: var(--fondo, #111); border-left: 1px solid var(--borde2); box-shadow: var(--sombra); overflow-y: auto; overscroll-behavior: contain; transform: translateX(30px); opacity: 0; transition: transform .18s ease-out, opacity .18s; }
.panel-velo.abierto .panel { transform: none; opacity: 1; }
.panel-cuerpo { padding: 18px 22px 40px; }
.panel-cuerpo .cabecera { padding-right: 48px; }
.panel-cerrar { position: sticky; top: 10px; float: right; margin: 10px 12px 0 0; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--borde2); background: var(--panel2); color: inherit; font-size: 18px; cursor: pointer; }
.panel-cerrar:hover { border-color: var(--acento); color: var(--acento); }
body.con-panel { overflow: hidden; }
@media (max-width: 860px) {
  .panel { width: 100%; border-left: 0; }
  .panel-cuerpo { padding: 14px 14px calc(30px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .panel, .panel-velo { transition: none; } }

.acciones-fila { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.verde-txt { color: #81c784; }

/* Íconos */
.ico { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.nav-item .ico { width: 20px; height: 20px; opacity: .85; }
.nav-item.activo .ico { opacity: 1; }
.barra-movil a .ico { width: 22px; height: 22px; }
.btn.solo-ico { padding: 5px 8px; }
.btn.solo-ico .ico { width: 18px; height: 18px; }

/* Acciones del pedido, estilo AppSheet: círculos amarillos con el nombre abajo */
.acciones-pedido { padding: 16px 14px 12px; }
.acciones-ap { display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: flex-start; }
.accion-ap { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; padding: 4px 2px; background: none; border: 0; color: var(--texto); font: inherit; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.15; text-align: center; cursor: pointer; list-style: none; }
.accion-ap::-webkit-details-marker { display: none; }
.accion-ap .circulo { --ico-fondo: var(--acento); width: 50px; height: 50px; border-radius: 50%; background: var(--acento); color: var(--acento-txt); display: grid; place-items: center; transition: transform .1s; }
.accion-ap .circulo .ico { width: 25px; height: 25px; stroke-width: 1.9; }
.accion-ap .circulo.gris { --ico-fondo: var(--panel2); background: var(--panel2); color: var(--texto); border: 1px solid var(--borde2); }
.accion-ap:hover .circulo { transform: scale(1.06); }
.accion-ap:disabled { opacity: .45; cursor: default; }
.accion-ap.destacada .circulo { box-shadow: 0 0 0 3px var(--fondo), 0 0 0 5px var(--acento); }
.accion-ap.destacada { color: var(--acento); }
.mas-menu { position: relative; }
.mas-menu .menu { position: absolute; left: 0; top: 78px; z-index: 5; min-width: 260px; background: var(--panel2); border: 1px solid var(--borde2); border-radius: 10px; box-shadow: var(--sombra); padding: 6px; display: flex; flex-direction: column; }
.mas-menu .menu button, .mas-menu .menu a { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border: 0; background: none; color: var(--texto); font: inherit; font-size: 15px; text-align: left; border-radius: 7px; cursor: pointer; text-decoration: none; }
.mas-menu .menu button:hover, .mas-menu .menu a:hover { background: var(--panel); }
.mas-menu .menu .peligro { color: #ff8a80; }
@media (max-width: 860px) {
  .accion-ap { width: calc(25% - 3px); }
  .mas-menu { width: calc(25% - 3px); position: static; }
  .mas-menu .accion-ap { width: 100%; }
  .acciones-pedido { position: relative; }
  .mas-menu .menu { left: 8px; right: 8px; top: auto; margin-top: 4px; }
}
.btn.primario, .nav-item, .btn { --ico-fondo: var(--panel2); }
.btn.primario { --ico-fondo: var(--acento); }
.nav-item { --ico-fondo: var(--fondo); }
.nav-item:hover { --ico-fondo: var(--panel); }
.nav-item.activo { --ico-fondo: var(--panel2); }
.barra-movil a { --ico-fondo: #0b0b0b; }
@media (min-width: 861px) { .mas-menu .menu { left: auto; right: 0; } }

/* Desplegable de clientes en el Ingreso */
.sugerencias .lista > div { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--borde); }
.sugerencias .lista > div:last-child { border-bottom: 0; }
.sugerencias .lista > div.marcada, .sugerencias .lista > div:hover { background: var(--panel); }
.sugerencias .lista > div.marcada { box-shadow: inset 3px 0 0 var(--acento); }
.sugerencias .lista .s1 { font-size: 15px; display: flex; align-items: center; gap: 6px; word-break: break-all; }
.sugerencias .lista .s2 { font-size: 13px; color: var(--suave); margin-top: 2px; padding-left: 16px; }
.sugerencias .lista mark { background: none; color: var(--acento); }
.sugerencias .lista { max-height: 340px; }
.sugerencias .lista > div { display: block; }
.sugerencias .lista .s1, .sugerencias .lista .s2 { padding: 0; cursor: inherit; }
.sugerencias .lista .s2 { display: block; padding-left: 16px; }

/* Cola de envíos */
.etiqueta.en-cola { background: #1d2f4a; color: #90caf9; }
#indicador-cola { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--borde2); box-shadow: var(--sombra); font-size: 14px; font-weight: 600; }
#indicador-cola .ico { color: var(--acento); }
@media (max-width: 860px) { #indicador-cola { bottom: calc(76px + env(safe-area-inset-bottom)); right: 10px; } }

a#indicador-cola { color: var(--texto); text-decoration: none; cursor: pointer; }
a#indicador-cola:hover { border-color: var(--acento); }
.etiqueta.ok-txt { background: #173b1c; color: #81c784; }
.tabla-envoltorio { overflow-x: auto; }

/* Observaciones en las listas de pedidos: hasta 2 renglones; el texto completo al pasar el mouse o en el panel */
.tabla td.obs-celda { max-width: 260px; min-width: 140px; }
.obs-celda > div, .obs-tarjeta { font-size: 13.5px; color: #cfcfcf; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.obs-tarjeta { margin-top: 6px; }

/* Tabla de pedidos configurable */
.barra-tabla { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; font-size: 14px; }
.barra-tabla label { display: flex; align-items: center; gap: 8px; }
.barra-tabla select { width: auto; min-width: 180px; }
.tabla th.ordenable { cursor: pointer; user-select: none; }
.tabla th.ordenable:hover, .tabla th.ordenada { color: var(--acento); }
.tabla th[draggable="true"] { cursor: grab; }
.tabla th.arrastrando { opacity: .4; }
.tabla th.soltar-aca { box-shadow: inset 3px 0 0 var(--acento); }
.col-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--borde); }
.col-fila label { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.col-fila input { width: 18px; height: 18px; }
.col-fila span { display: flex; gap: 4px; }
@media (max-width: 860px) { .solo-escritorio { display: none; } }

/* Avisos en pantalla */
#avisos { position: fixed; top: 14px; right: 14px; z-index: 80; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 28px)); }
.aviso-tarjeta { background: var(--panel2); border: 2px solid var(--acento); border-radius: var(--radio); box-shadow: var(--sombra); padding: 12px 14px; animation: aviso-entra .25s ease-out; }
.aviso-titulo { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.aviso-titulo svg { color: var(--acento); flex: none; }
.aviso-texto { margin-top: 6px; color: var(--suave); font-size: 14px; }
.aviso-pie { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.aviso-pie .suave { margin-right: auto; font-size: 12px; }
@keyframes aviso-entra { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Corridas BN */
.bn-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.bn-corrida { margin: 0; border-left: 4px solid var(--ok); }
.bn-corrida.incompleta { border-left-color: var(--alerta); }
.bn-cab { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.bn-tiempo { font-family: var(--mono); font-size: 30px; font-weight: 800; color: var(--acento); }
.bn-rollo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 0; border-top: 1px solid #2a2a2a; }
.bn-rollo:hover { background: rgba(255,255,255,.03); }
.bn-entrega { margin-left: auto; font-size: 13px; }
.bn-solo { margin-top: 8px; font-size: 13px; color: var(--alerta); }
.bn-formato { cursor: pointer; border: 1px solid var(--borde2); font: inherit; font-size: 12px; color: inherit; }
.bn-formato:hover { border-color: var(--acento); color: var(--acento); }
.bn-push { cursor: pointer; border: 1px solid var(--borde2); font: inherit; font-size: 12px; color: inherit; }
.bn-push.sube { background: #4a2a00; border-color: var(--alerta); color: #ffd180; }
.bn-push.baja { background: #0b3140; border-color: var(--cian); color: #9fe6ff; }
.bn-push:hover { border-color: var(--acento); }
.rec-revisar td:first-child { box-shadow: inset 4px 0 0 var(--alerta); }
.item.rec-revisar { border-left: 4px solid var(--alerta); }