/* =============================================================================
   Mobility POS — sistema de diseño
   -----------------------------------------------------------------------------
   Misma paleta que DuwestMobility para que las dos aplicaciones se lean como
   del mismo producto, pero con una escala tipografica y unos espaciados mas
   densos: el POS se usa en un monitor de escritorio, no en un telefono, y el
   operador necesita ver muchas lineas a la vez sin scrollear.
   ========================================================================== */

:root {
    /* Marca (heredado de DuwestMobility) */
    --dw-primary:        #1B5E20;
    --dw-primary-hover:  #2E7D32;
    --dw-primary-active: #0f3d14;
    --dw-secondary:      #4CAF50;
    --dw-accent:         #FF8F00;
    --dw-accent-hover:   #cc7300;

    /* DuwestMobility referencia --dw-danger en app.css:179 pero nunca la define,
       asi que siempre cae al fallback. Aca esta declarada. */
    --dw-danger:         #dc3545;
    --dw-warning:        #f59e0b;
    --dw-info:           #0d6efd;
    --dw-success:        #198754;

    /* Superficies */
    --dw-dark:           #1a1a2e;
    --dw-sidebar-bg:     #1a1a2e;
    --dw-sidebar-hover:  rgba(255, 255, 255, .08);
    --dw-sidebar-active: rgba(76, 175, 80, .15);
    --dw-light:          #f8f9fa;
    --dw-surface:        #ffffff;
    --dw-text:           #333333;
    --dw-text-muted:     #7a828a;
    --dw-border:         #e9ecef;
    --dw-border-strong:  #ced4da;

    /* Documentos: verde para ordenes, azul para cotizaciones.
       Es el codigo de color que ya usa DuwestMobility en el tema dwov2. */
    --dw-order-from:     #1B4D2E;
    --dw-order-to:       #2E7D32;
    --dw-quote-from:     #0d2c54;
    --dw-quote-to:       #1e4e8c;
    --dw-quote-bg:       #eef5ff;

    --dw-sidebar-width:  232px;
    --dw-topbar-height:  52px;
    --dw-transition:     .2s ease;
}

/* ---------------------------------------------------------------- base ---- */

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--dw-text);
    background: var(--dw-light);
    font-size: .9375rem;
}

::-webkit-scrollbar        { width: 10px; height: 10px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #b0bec5; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #90a4ae; }

/* -------------------------------------------------------------- layout ---- */

.pos-shell {
    display: grid;
    grid-template-columns: var(--dw-sidebar-width) 1fr;
    grid-template-rows: var(--dw-topbar-height) 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar main";
    height: 100vh;
    overflow: hidden;
}

.pos-sidebar { grid-area: sidebar; background: var(--dw-sidebar-bg); display: flex; flex-direction: column; overflow: hidden; }
.pos-topbar  { grid-area: topbar;  background: var(--dw-surface); border-bottom: 1px solid var(--dw-border); display: flex; align-items: center; gap: 1rem; padding: 0 1rem; }
.pos-main    { grid-area: main;    overflow: auto; padding: 1rem 1.25rem; }

/* Sin sidebar colapsable ni backdrop: el POS es una aplicacion de escritorio
   con un ancho garantizado. En pantallas chicas se reduce el sidebar antes que
   ocultarlo, para no perder la navegacion. */
@media (max-width: 1200px) {
    :root { --dw-sidebar-width: 64px; }
    .pos-sidebar .nav-label,
    .pos-sidebar .sidebar-brand-text { display: none; }
    .pos-sidebar .nav-link { justify-content: center; }
}

/* ------------------------------------------------------------- sidebar ---- */

.sidebar-brand {
    display: flex; align-items: center; gap: .6rem;
    height: var(--dw-topbar-height);
    padding: 0 1rem;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    flex-shrink: 0;
}
.sidebar-brand i { font-size: 1.35rem; color: var(--dw-secondary); }
.sidebar-brand-text { font-weight: 700; letter-spacing: .3px; font-size: .95rem; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .5rem 0; }

.sidebar-nav .nav-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem 1rem;
    color: rgba(255, 255, 255, .72);
    border-left: 3px solid transparent;
    transition: var(--dw-transition);
    font-size: .875rem;
    white-space: nowrap;
}
.sidebar-nav .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; flex-shrink: 0; }
.sidebar-nav .nav-link:hover { background: var(--dw-sidebar-hover); color: #fff; }
.sidebar-nav .nav-link.active {
    background: var(--dw-sidebar-active);
    border-left-color: var(--dw-secondary);
    color: #fff;
    font-weight: 600;
}

.sidebar-footer {
    padding: .5rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .4);
    font-size: .7rem;
    flex-shrink: 0;
}

/* -------------------------------------------------------------- topbar ---- */

.pos-topbar h1 { font-size: 1.05rem; font-weight: 600; margin: 0; }

/* La sociedad va SIEMPRE visible en la barra superior. Es el dato que define
   que clientes, precios y stock esta viendo el operador: si trabaja sobre la
   sociedad equivocada, todo lo que cargue esta mal. */
.company-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--dw-primary);
    color: #fff;
    padding: .2rem .6rem;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .4px;
}
.company-badge.is-missing { background: var(--dw-danger); }

.connection-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--dw-success);
    flex-shrink: 0;
    transition: background var(--dw-transition);
}
.connection-dot.is-offline { background: var(--dw-danger); }

/* Aviso de conexion caida. En DuwestMobility perder la red era un modo de
   trabajo valido; aca es una condicion de bloqueo y se comunica como tal. */
.pos-offline-banner {
    background: linear-gradient(90deg, #f59e0b, #f97316);
    color: #fff;
    text-align: center;
    padding: .4rem 1rem;
    font-size: .8125rem;
    font-weight: 600;
}

/* ------------------------------------------------------------ secciones ---- */

.view-section { display: none; }
.view-section.active { display: block; }

/* --------------------------------------------------------------- cards ---- */

.pos-card {
    background: var(--dw-surface);
    border: 1px solid var(--dw-border);
    border-radius: 6px;
}
.pos-card-header {
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--dw-border);
    font-weight: 600;
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--dw-text-muted);
}
.pos-card-body { padding: .9rem; }

/* --------------------------------------------------------------- tabla ---- */

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

.pos-table th.sortable { cursor: pointer; user-select: none; }
.pos-table th.sortable:hover { color: var(--dw-primary); }
.pos-table th.sortable::after { font-family: 'bootstrap-icons'; content: '\F128'; opacity: .3; margin-left: .25rem; }
.pos-table th.sort-asc::after  { content: '\F148'; opacity: 1; }
.pos-table th.sort-desc::after { content: '\F128'; opacity: 1; }

/* Cualquier tabla ancha scrollea dentro de su contenedor. El body de la pagina
   nunca scrollea en horizontal. */
.table-scroll { overflow-x: auto; }

/* ------------------------------------------------------------- botones ---- */

.btn-primary {
    background: var(--dw-primary);
    border-color: var(--dw-primary);
}
.btn-primary:hover, .btn-primary:focus { background: var(--dw-primary-hover); border-color: var(--dw-primary-hover); }
.btn-primary:active { background: var(--dw-primary-active) !important; border-color: var(--dw-primary-active) !important; }
.btn-outline-primary { color: var(--dw-primary); border-color: var(--dw-primary); }
.btn-outline-primary:hover { background: var(--dw-primary); border-color: var(--dw-primary); }
.btn-accent { background: var(--dw-accent); border-color: var(--dw-accent); color: #fff; }
.btn-accent:hover { background: var(--dw-accent-hover); border-color: var(--dw-accent-hover); color: #fff; }

/* --------------------------------------------------------------- forms ---- */

.form-control:focus, .form-select:focus {
    border-color: var(--dw-primary-hover);
    box-shadow: 0 0 0 .2rem rgba(46, 125, 50, .12);
}
.form-label { font-size: .75rem; font-weight: 600; color: var(--dw-text-muted); margin-bottom: .2rem; text-transform: uppercase; letter-spacing: .3px; }

/* --------------------------------------------------------------- login ---- */

.login-bg {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--dw-primary) 0%, var(--dw-dark) 100%);
    display: flex; align-items: center; justify-content: center;
}
.login-card {
    background: var(--dw-surface);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
    max-width: 420px;
    width: 100%;
    padding: 2rem;
}
.login-logo { max-width: 180px; }

/* -------------------------------------------------------------- toasts ---- */

#posToastContainer {
    position: fixed; top: 1rem; right: 1rem;
    z-index: 1080;
    display: flex; flex-direction: column; gap: .5rem;
    max-width: 380px;
}
.pos-toast {
    display: flex; align-items: flex-start; gap: .6rem;
    background: var(--dw-surface);
    border-left: 4px solid var(--dw-info);
    border-radius: 5px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
    padding: .65rem .8rem;
    font-size: .875rem;
    animation: posToastIn .18s ease;
}
.pos-toast.is-success { border-left-color: var(--dw-success); }
.pos-toast.is-danger  { border-left-color: var(--dw-danger); }
.pos-toast.is-warning { border-left-color: var(--dw-warning); }
.pos-toast i { font-size: 1.05rem; flex-shrink: 0; }
.pos-toast.is-success i { color: var(--dw-success); }
.pos-toast.is-danger  i { color: var(--dw-danger); }
.pos-toast.is-warning i { color: var(--dw-warning); }
.pos-toast.is-info    i { color: var(--dw-info); }
.pos-toast-close { margin-left: auto; background: none; border: 0; opacity: .4; line-height: 1; padding: 0 .1rem; }
.pos-toast-close:hover { opacity: .9; }

@keyframes posToastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------- utilidades ---- */

.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--dw-text-muted); }
.empty-state i { font-size: 2.25rem; opacity: .35; display: block; margin-bottom: .5rem; }

.tabular { font-variant-numeric: tabular-nums; }
.text-muted-sm { font-size: .75rem; color: var(--dw-text-muted); }

/* ------------------------------------------- modal de acciones del cliente ---- */

/* La inicial del cliente en vez de una foto: en SAP no hay avatares, y un
   circulo con dos letras da un ancla visual para confirmar de un vistazo que el
   modal abierto es el del cliente que se clickeo. */
.client-avatar {
    width: 48px; height: 48px; flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dw-order-from), var(--dw-order-to));
    color: #fff; font-weight: 700; font-size: 1.05rem;
    display: flex; align-items: center; justify-content: center;
}

/* Bloque de datos del cliente: etiqueta chica arriba, valor legible abajo.
   Se repite lo suficiente como para no escribirlo inline cada vez. */
.client-field { min-width: 0; }
.client-field > .k {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .02em;
    color: var(--dw-text-muted);
}
.client-field > .v { font-size: .875rem; word-break: break-word; }

/* Tarjetas de accion — mismo lenguaje que el modal de cliente de
   DuwestMobility: cuadradas, icono grande arriba, etiqueta corta abajo, y el
   color diciendo de que familia es la accion (verde comercial, azul agenda). */
.action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .6rem;
}
.action-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .15rem;
    padding: .9rem .5rem;
    min-height: 96px;
    border: 1px solid var(--dw-border);
    border-radius: 8px;
    background: var(--dw-surface);
    color: var(--dw-text);
    text-align: center;
    cursor: pointer;
    transition: var(--dw-transition);
}
.action-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
.action-card i { font-size: 1.5rem; }

.action-card-green { border-color: #cfe6d4; background: #f4faf5; }
.action-card-green i { color: var(--dw-primary); }
.action-card-green:hover { border-color: var(--dw-primary); }

.action-card-blue { border-color: #cfe0f3; background: var(--dw-quote-bg); }
.action-card-blue i { color: var(--dw-quote-from); }
.action-card-blue:hover { border-color: var(--dw-quote-from); }

.action-card-amber { border-color: #f5e2bf; background: #fffaf0; }
.action-card-amber i { color: var(--dw-accent); }
.action-card-amber:hover { border-color: var(--dw-accent); }

/* Una accion que el cliente no admite (por ejemplo tomarle pedido estando
   bloqueado en SAP) se deja VISIBLE pero inerte: esconderla haria pensar que la
   funcion no existe, en vez de que este cliente no la permite. El motivo va en
   el title y en el pie de la tarjeta. */
.action-card.is-disabled {
    cursor: not-allowed; opacity: .5;
    background: var(--dw-light); border-color: var(--dw-border);
}
.action-card.is-disabled:hover { transform: none; box-shadow: none; }
.action-card-note { font-size: .68rem; color: var(--dw-text-muted); line-height: 1.15; }

/* ---------------------------------------------------------------------------
   Articulos — tarjetitas con el disponible del centro y el total
   --------------------------------------------------------------------------- */
.art-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.art-search { flex: 1 1 320px; max-width: 560px; }
.art-centro { display: flex; align-items: center; gap: .5rem; }
.art-centro .form-select { min-width: 220px; }

.art-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .75rem;
}
.art-grid > .empty-state, .art-grid > .alert { grid-column: 1 / -1; }
.art-grid[aria-busy="true"] { opacity: .6; }
.art-grid.is-listado { display: block; }
.art-fila { cursor: pointer; }

.art-card {
    display: flex; flex-direction: column; gap: .35rem;
    padding: .75rem .85rem;
    border: 1px solid var(--dw-border);
    border-left: 4px solid var(--dw-border);
    border-radius: 8px;
    background: var(--dw-surface);
    cursor: pointer;
    transition: box-shadow .12s ease, transform .12s ease;
}
.art-card:hover, .art-card:focus-visible { box-shadow: 0 4px 14px rgba(0, 0, 0, .1); transform: translateY(-1px); outline: none; }
.art-card.is-ok   { border-left-color: var(--dw-primary); }
.art-card.is-otro { border-left-color: var(--dw-accent); }
.art-card.is-sin  { border-left-color: #c62828; }
.art-card-head { display: flex; justify-content: space-between; gap: .5rem; }
.art-code { font-size: .75rem; font-weight: 600; color: var(--dw-text-muted); font-variant-numeric: tabular-nums; }
.art-uom { font-size: .7rem; color: var(--dw-text-muted); white-space: nowrap; }
.art-desc { font-size: .85rem; font-weight: 600; line-height: 1.2; min-height: 2.05rem; }
.art-nums { display: flex; gap: .5rem; margin-top: auto; }
.art-num { flex: 1 1 0; display: flex; flex-direction: column; padding: .3rem .45rem; border-radius: 6px; background: var(--dw-light); min-width: 0; }
.art-num-label { font-size: .65rem; color: var(--dw-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-num-val { font-size: 1.05rem; font-weight: 700; }
.art-card.is-ok .art-num-aca .art-num-val { color: var(--dw-primary); }
.art-card.is-otro .art-num-aca .art-num-val,
.art-card.is-sin .art-num-aca .art-num-val { color: #c62828; }

.art-kpi { padding: .6rem .75rem; border-radius: 8px; background: var(--dw-light); }
.art-kpi-aca { background: #f4faf5; border: 1px solid #cfe6d4; }
.art-kpi-val { font-size: 1.35rem; font-weight: 700; }
.art-kpi-val small { font-size: .75rem; font-weight: 500; color: var(--dw-text-muted); }
.art-centro-fila { cursor: pointer; }
.art-centro-fila.is-current td { background: #f4faf5; }

/* Pop-up del centro apilado sobre la tarjeta de stock. */
.art-modal-apilado { z-index: 1065; }
.art-backdrop-apilado { z-index: 1062; }

/* -----------------------------------------------------------------------------
   Motivo de no venta — la lista del modal de entrada.
   Cinco cotizaciones vencidas el mismo dia es lo habitual; veinte pasa. La
   lista scrollea sola para que el motivo y los botones queden siempre a la
   vista, sin tener que bajar hasta el final para contestar.
   -------------------------------------------------------------------------- */
.mnv-lista { max-height: 16rem; overflow-y: auto; }
.mnv-fila { cursor: pointer; margin: 0; }
.mnv-fila:last-child { border-bottom: 0 !important; }
.mnv-fila:hover { background: var(--dw-light); }