/* =============================================================================
   editor.css — editor de documento (orden y cotizacion)
   -----------------------------------------------------------------------------
   Ocupa la pantalla completa, no un modal. En DuwestMobility el editor es un
   modal-xl con tres pestanas porque esta pensado para un telefono; en un
   mostrador eso desperdicia el monitor y obliga a cambiar de pestana para ver
   el credito mientras se cargan lineas.

   La grilla es lo que manda: el operador tiene que ver muchas lineas a la vez
   y llegar a cualquier campo con el teclado, sin tocar el mouse.
   ========================================================================== */

.doc-editor {
    /* Ancla de los dialogos que van por encima del editor (ajuste de precio).
       Sin esto el overlay se posiciona contra el viewport y se desalinea al
       scrollear la grilla. */
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--dw-topbar-height) - 2rem);
    background: var(--dw-surface);
    border: 1px solid var(--dw-border);
    border-radius: 6px;
    overflow: hidden;
}

/* Barra de identidad. Verde para ordenes, azul para cotizaciones: es el mismo
   codigo de color que ya usa DuwestMobility, para que quien conozca una app
   reconozca la otra. */
.doc-editor-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .9rem;
    color: #fff;
    background: linear-gradient(90deg, var(--dw-order-from), var(--dw-order-to));
    flex-shrink: 0;
}
.doc-editor.is-quote .doc-editor-bar {
    background: linear-gradient(90deg, var(--dw-quote-from), var(--dw-quote-to));
}
.doc-editor.is-quote .doc-editor-header {
    background: var(--dw-quote-bg);
}

.doc-editor-title { font-weight: 700; letter-spacing: .3px; }

/* Cabecera compacta: dos filas de campos, etiquetas chicas encima. */
.doc-editor-header {
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--dw-border);
    background: #fafbfc;
    flex-shrink: 0;
}
.doc-editor-header .form-label { margin-bottom: .1rem; font-size: .68rem; }
.doc-editor-header .form-control,
.doc-editor-header .form-select {
    font-size: .8125rem;
    padding: .2rem .5rem;
    height: auto;
}
.doc-editor-header .required::after { content: " *"; color: var(--dw-danger); }

/* Cuerpo: grilla a la izquierda, panel fijo a la derecha. */
.doc-editor-body { display: flex; flex: 1; min-height: 0; }
.doc-grid-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.doc-grid-scroll { flex: 1; overflow: auto; }

.doc-side {
    width: 268px;
    flex-shrink: 0;
    border-left: 1px solid var(--dw-border);
    background: #fafbfc;
    overflow-y: auto;
    padding: .75rem;
}
@media (max-width: 1400px) { .doc-side { width: 230px; } }

/* ------------------------------------------------------------- grilla ---- */

.doc-grid { width: 100%; font-size: .8125rem; margin: 0; }
.doc-grid thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f7f9fa;
    color: var(--dw-text-muted);
    text-transform: uppercase;
    font-size: .65rem;
    letter-spacing: .5px;
    font-weight: 700;
    padding: .35rem .4rem;
    border-bottom: 1px solid var(--dw-border);
    white-space: nowrap;
}
.doc-grid td {
    padding: .2rem .4rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f3f5;
}
.doc-grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.doc-grid tbody tr:hover { background: #f5f9f5; }

/* Fila de alta: es el bucle de trabajo del mostrador, asi que queda fijada
   arriba y visible mientras se scrollea la lista de lineas. */
.doc-grid-entry {
    position: sticky;
    top: 26px;
    z-index: 2;
    background: #fffbe6 !important;
    box-shadow: 0 1px 0 var(--dw-border);
}
.doc-grid-entry td { padding: .25rem .4rem; }

/* Donde iria la fila de alta cuando todavia no se puede cargar. Ocupa su lugar
   —para que la grilla no salte cuando aparezca— y dice que falta. Apagar los
   campos no alcanzaba: una fila gris invita a intentar igual y no explica nada. */
.doc-grid-aviso {
    position: sticky;
    top: 26px;
    z-index: 2;
    background: #fffbe6 !important;
    box-shadow: 0 1px 0 var(--dw-border);
}
.doc-grid-aviso td {
    padding: .5rem .6rem;
    color: var(--dw-text-muted);
    font-size: .82rem;
}

.doc-grid input,
.doc-grid select {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    padding: .15rem .3rem;
    font-size: .8125rem;
    border-radius: 3px;
}
.doc-grid input:hover,
.doc-grid select:hover { border-color: var(--dw-border-strong); }
.doc-grid input:focus,
.doc-grid select:focus {
    outline: none;
    border-color: var(--dw-primary-hover);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(46, 125, 50, .12);
}
.doc-grid-entry input { background: #fff; border-color: #e8dfae; }
.doc-grid input.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Una linea que necesita autorizacion se marca en la propia grilla: el
   operador tiene que verlo mientras carga, no al intentar enviar. */
.doc-grid tr.needs-auth { background: #FFF6E7; }
.doc-grid tr.needs-auth:hover { background: #ffeecd; }
.doc-line-flag { font-size: .95rem; line-height: 1; cursor: help; }

.doc-grid-empty { padding: 2rem 1rem; text-align: center; color: var(--dw-text-muted); }

/* --------------------------------------------------------- typeahead ---- */

.doc-typeahead {
    position: absolute;
    z-index: 1060;
    background: #fff;
    border: 1px solid var(--dw-border-strong);
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
    max-height: 320px;
    overflow-y: auto;
    min-width: 460px;
}
.doc-typeahead-item {
    padding: .35rem .6rem;
    cursor: pointer;
    font-size: .8125rem;
    display: flex;
    gap: .6rem;
    align-items: baseline;
}
.doc-typeahead-item:hover,
.doc-typeahead-item.active { background: #e8f5e9; }
.doc-typeahead-item .code { font-weight: 600; min-width: 74px; }
.doc-typeahead-item .desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-typeahead-item .stock { margin-left: auto; color: var(--dw-text-muted); white-space: nowrap; }
.doc-typeahead-empty { padding: .6rem; color: var(--dw-text-muted); font-size: .8125rem; }

/* ------------------------------------------------------ panel lateral ---- */

.doc-side-block { margin-bottom: .9rem; }
.doc-side-title {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight: 700;
    color: var(--dw-text-muted);
    margin-bottom: .35rem;
}
.doc-stat { display: flex; justify-content: space-between; font-size: .8125rem; padding: .12rem 0; }
.doc-stat .val { font-variant-numeric: tabular-nums; font-weight: 600; }
.doc-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: .4rem;
    border-top: 1px solid var(--dw-border);
}
.doc-total .val {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--dw-order-from);
    font-variant-numeric: tabular-nums;
}
.doc-editor.is-quote .doc-total .val { color: var(--dw-quote-from); }

/* Banda de margen: la posicion importa mas que el numero. Un margen bajo se ve
   antes de leerlo. */
.doc-margin-band {
    height: 7px;
    border-radius: 4px;
    overflow: hidden;
    background: #e9ecef;
    margin-top: .3rem;
}
.doc-margin-fill { height: 100%; transition: width .2s ease, background .2s ease; }

.doc-credit-hint { font-size: .72rem; padding: .35rem .5rem; border-radius: 4px; margin-top: .4rem; }
.doc-credit-hint.level-success { background: #e8f5e9; color: #1b5e20; }
.doc-credit-hint.level-warning { background: #FFF6E7; color: #7a5b12; }
.doc-credit-hint.level-danger { background: #fdecea; color: #9b2c22; }

/* ------------------------------------------------------ barra inferior ---- */

.doc-editor-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border-top: 1px solid var(--dw-border);
    background: #fafbfc;
    flex-shrink: 0;
}

/* ------------------------------------------------------------ cajones ---- */
/* Comentarios y pagos entran desde la derecha en vez de ser pestanas: no le
   roban espacio a la grilla pero siguen estando a un clic. */

.doc-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 420px;
    max-width: 92vw;
    background: var(--dw-surface);
    border-left: 1px solid var(--dw-border);
    box-shadow: -8px 0 28px rgba(0, 0, 0, .14);
    z-index: 1070;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .2s ease;
}
.doc-drawer.open { transform: none; }
.doc-drawer-header {
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--dw-border);
    display: flex;
    align-items: center;
    font-weight: 600;
}
.doc-drawer-body { flex: 1; overflow-y: auto; padding: .9rem; }
.doc-drawer-footer { padding: .6rem .9rem; border-top: 1px solid var(--dw-border); }

.doc-comment {
    border-left: 3px solid var(--dw-border-strong);
    padding: .35rem .6rem;
    margin-bottom: .6rem;
    font-size: .8125rem;
}
.doc-comment.is-mine { border-left-color: var(--dw-primary); background: #f1f8f2; }
.doc-comment .meta { font-size: .68rem; color: var(--dw-text-muted); }

/* ------------------------------------------------- combo con busqueda ---- */
/* El CEBE son cientos de opciones y el operador lo busca por como se llama,
   no por su codigo. Un <select> obliga a recorrerlo entero; esto deja tipear.
   El <select> sigue existiendo, oculto: es el que guarda el valor, asi que
   todo lo que ya leia [data-h="profitCenterCode"] sigue funcionando igual. */

.doc-combo { position: relative; display: flex; }
.doc-combo input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.doc-combo-toggle {
    border: 1px solid var(--dw-border-strong);
    border-left: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: var(--dw-light);
    color: var(--dw-text-muted);
    padding: 0 .5rem;
    cursor: pointer;
}
.doc-combo-toggle:hover { background: #e9ecef; }
.doc-combo input:disabled + .doc-combo-toggle { opacity: .5; cursor: not-allowed; }

/* Posicion fija: el desplegable se mide contra la ventana, asi no lo recorta
   el contenedor del encabezado ni se desalinea al scrollear el editor. */
.doc-combo-menu { position: fixed; min-width: 320px; }

/* ------------------------------------------------ pasos pendientes ------- */
/* Que falta para que la orden avance. Va primero en el panel lateral porque es
   lo que se pregunta cuando no avanza. */

.doc-paso {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: .1rem .4rem;
    align-items: start;
    padding: .3rem 0;
    border-bottom: 1px solid var(--dw-border);
    font-size: .78rem;
}
.doc-paso:last-of-type { border-bottom: 0; }
.doc-paso-nombre { font-weight: 600; }
/* El detalle arranca en la segunda columna: alineado bajo el nombre y no bajo
   el icono, para que se lea como una aclaracion y no como otro paso. */
.doc-paso-detalle { grid-column: 2; color: var(--dw-text-muted); line-height: 1.25; }

/* ------------------------------------------------- cantidad con pasos ---- */
/* El producto a granel se despacha en su presentacion entera, asi que los
   botones mueven de a una bolsa y no de a uno. */

.doc-qty { display: flex; align-items: stretch; gap: 0; }
.doc-qty input {
    width: 100%; min-width: 48px; text-align: right;
    border-radius: 0; border-left: 0; border-right: 0;
}
.doc-qty-btn {
    border: 1px solid var(--dw-border-strong);
    background: var(--dw-light);
    color: var(--dw-text);
    width: 22px; flex-shrink: 0;
    line-height: 1; font-size: .95rem;
    cursor: pointer;
}
.doc-qty-btn:first-child { border-radius: 3px 0 0 3px; }
.doc-qty-btn:last-child  { border-radius: 0 3px 3px 0; }
.doc-qty-btn:hover { background: #e9ecef; }

/* ----------------------------------------------------- banda de margen --- */
/* El porcentaje exacto invita a discutirlo linea por linea; lo unico que hace
   falta saber de un vistazo es si esta en zona sana. El numero va en el title. */

.doc-margen {
    display: inline-block; width: 46px; height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--dw-danger), var(--dw-warning), var(--dw-success));
    position: relative;
}
.doc-margen::after {
    content: ''; position: absolute; top: -2px; width: 3px; height: 12px;
    background: var(--dw-text); border-radius: 1px;
}
.doc-margen.is-bajo::after  { left: 6px; }
.doc-margen.is-medio::after { left: 21px; }
.doc-margen.is-alto::after  { left: 37px; }

/* ---------------------------------------------------------- acciones ----- */

.doc-acciones { white-space: nowrap; }
.doc-acciones .btn-link { font-size: .95rem; text-decoration: none; }

/* ------------------------------------------ buscador: stock y precio ----- */

.doc-typeahead-item .stock-badge {
    border: 1px solid var(--dw-border-strong);
    border-radius: 10px; padding: 0 .4rem;
    font-size: .72rem; color: var(--dw-text-muted); white-space: nowrap;
}
.doc-typeahead-item .stock-badge.sin-stock { border-color: var(--dw-danger); color: var(--dw-danger); }
.doc-typeahead-item .precio { color: var(--dw-primary); font-weight: 600; white-space: nowrap; }
.doc-typeahead-item .ya-en-orden {
    color: var(--dw-accent); font-size: .7rem; white-space: nowrap;
}

/* ------------------------------------------ destino y stock por linea ---- */
/* Parte del pedido puede ir a la planta y parte al deposito, asi que el destino
   es por linea y no solo del documento. */

.doc-dest { font-size: .78rem; padding: .1rem .3rem; min-width: 110px; }
.doc-stock { font-size: .8rem; text-decoration: none; white-space: nowrap; }

/* ------------------------------------------------ dialogo sobre el editor - */
/* El menu de ajuste de precio y sus dos dialogos. Van DENTRO del editor y por
   encima de su contenido, no en el body: el editor ocupa la pantalla y un
   dialogo suelto en el body quedaria por debajo. */

.pos-overlay {
    position: absolute; inset: 0; z-index: 1080;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .35);
}
.pos-overlay-card {
    background: var(--dw-surface);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    padding: 1rem;
    max-height: 90%; overflow-y: auto;
}

/* Cliente esporadico: datos de quien compra con una cuenta generica de SAP. */
.doc-esporadico {
    margin-top: .5rem;
    padding: .5rem .75rem .75rem;
    border: 1px dashed var(--dw-accent, #FF8F00);
    border-radius: 6px;
    background: #fff8ec;
}
.doc-esporadico-titulo { font-size: .8rem; font-weight: 600; margin-bottom: .25rem; }