:root {
  --fondo: #f5f6f8; --tarjeta: #fff; --texto: #1d2733; --suave: #5c6b7a; --borde: #dfe4ea;
  --acento: #0f7c7a; --acento-claro: #e3f3f2; --rojo: #b42318; --rojo-claro: #fdecea;
  --ambar: #9a6700; --ambar-claro: #fff4d6; --verde: #1a7f37; --verde-claro: #e6f4ea; --gris: #6b7785;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       color: var(--texto); background: var(--fondo); }
button, input { font: inherit; }

.barra { display: flex; align-items: center; gap: 16px; padding: 10px 18px; background: #fff;
         border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.marca { font-weight: 700; font-size: 18px; color: var(--acento); }
.marca span { color: var(--texto); font-weight: 500; }
.estado { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1; }
.usuario { display: flex; gap: 8px; align-items: center; color: var(--suave); }

.chip { padding: 3px 10px; border-radius: 999px; font-size: 13px; background: #eef1f4; color: var(--gris); }
.chip.verde { background: var(--verde-claro); color: var(--verde); }
.chip.rojo { background: var(--rojo-claro); color: var(--rojo); }

button, a.boton { border: 1px solid var(--borde); background: #fff; color: var(--texto); border-radius: 8px;
                  padding: 7px 12px; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, a.boton:hover { border-color: var(--acento); }
button:disabled { opacity: .5; cursor: default; }
button.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
button.peligro { color: var(--rojo); }
button.chico { padding: 3px 9px; font-size: 13px; }
button.enlace { border: 0; background: none; color: var(--acento); padding: 4px 0; }

main { padding: 16px 18px 40px; }
.cargando, .vacio { color: var(--suave); }
.error { color: var(--rojo); }

.entrar { max-width: 380px; margin: 60px auto; background: #fff; padding: 28px; border-radius: 14px;
          border: 1px solid var(--borde); display: flex; flex-direction: column; gap: 12px; }
.entrar h1 { margin: 0; font-size: 22px; }
.entrar input { padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; font-size: 16px; }

.tablero { display: grid; grid-template-columns: repeat(6, minmax(250px, 1fr)); gap: 14px; overflow-x: auto;
           align-items: start; }
@media (max-width: 900px) { .tablero { grid-template-columns: 1fr; } }
.columna h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave);
              margin: 0 0 8px; display: flex; justify-content: space-between; }
.cuenta { background: #e6eaee; border-radius: 999px; padding: 0 8px; font-size: 12px; color: var(--texto); }

.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px;
           margin-bottom: 10px; }
.tarjeta summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.tarjeta summary::-webkit-details-marker { display: none; }
.tarjeta .titulo { font-weight: 600; }
.tarjeta small { color: var(--suave); }
.tarjeta[open] summary { margin-bottom: 8px; }
.tarjeta.carrito, .tarjeta.crear_oc { border-left: 4px solid var(--acento); }
.tarjeta.factura_en_odoo { border-left: 4px solid var(--ambar); }
.tarjeta.cerrada { opacity: .75; }

.lineas { list-style: none; padding: 0; margin: 0 0 10px; }
.lineas li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 0;
             border-bottom: 1px dashed var(--borde); }
.lineas li:last-child { border-bottom: 0; }
.lineas label { display: flex; gap: 6px; align-items: flex-start; }
.lineas .cant { color: var(--suave); white-space: nowrap; }
.lineas .meta { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lineas .folios { font-size: 12px; color: var(--suave); }
.lineas li.apagado .prod { color: var(--gris); }
.lineas.compacta li { padding: 3px 0; font-size: 14px; }

.etiqueta { font-size: 11px; padding: 1px 7px; border-radius: 999px; }
.etiqueta.ambar { background: var(--ambar-claro); color: var(--ambar); }
.etiqueta.gris { background: #eef1f4; color: var(--gris); }

.nota { font-size: 13px; color: var(--suave); margin: 6px 0; }
.nota.ok { color: var(--verde); }
.alerta { font-size: 13px; color: var(--rojo); background: var(--rojo-claro); padding: 6px 8px; border-radius: 8px; margin: 6px 0; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.estado-carrito { font-weight: 600; margin: 6px 0; }
.estado-carrito.en_proceso, .estado-carrito.pendiente { color: var(--acento); }
.estado-carrito.requiere_intervencion, .estado-carrito.error { color: var(--rojo); }
.estado-carrito.carrito_listo { color: var(--verde); }

.numero { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.numero code { font-size: 18px; background: var(--acento-claro); padding: 4px 10px; border-radius: 8px; }

.tiempo { list-style: none; padding: 0; margin: 10px 0 0; border-top: 1px solid var(--borde); padding-top: 8px;
          font-size: 13px; color: var(--suave); }
.tiempo li { padding: 2px 0; }
.tiempo time { color: var(--texto); font-variant-numeric: tabular-nums; }

dialog { border: 0; border-radius: 14px; padding: 20px 22px; max-width: 460px; width: calc(100% - 32px);
         box-shadow: 0 10px 40px rgba(0,0,0,.2); }
dialog::backdrop { background: rgba(20,30,40,.35); }
dialog h3 { margin: 0 0 10px; }
dialog input { width: 100%; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; font-size: 16px; }
dialog .botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

.aviso { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(120px); background: #1d2733;
         color: #fff; padding: 10px 16px; border-radius: 10px; transition: transform .25s; max-width: 90vw; z-index: 10; }
.aviso.visible { transform: translateX(-50%) translateY(0); }
.aviso.error { background: var(--rojo); }