/* Menú lateral colapsable y tablero ---------------------------------------- */

:root {
    --lat-ancho:  274px;
    --lat-fondo:  #1f2d3d;
    --lat-tinta:  #c8d4e2;
    --lat-activo: #0d6efd;
}

body.con-lateral            { margin: 0; background: #f4f7fb; }
body.con-lateral .contenido { margin-left: var(--lat-ancho); padding: 22px 26px 60px; }
body.con-lateral .barra     { display: none; }   /* la barra superior la sustituye el lateral */

/* --- Estructura --- */
.lateral {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--lat-ancho);
    background: var(--lat-fondo);
    color: var(--lat-tinta);
    display: flex; flex-direction: column;
    z-index: 1200;
    overflow-y: auto;
}
.lateral::-webkit-scrollbar       { width: 7px; }
.lateral::-webkit-scrollbar-thumb { background: #3b4b5f; border-radius: 4px; }

.lateral-marca {
    display: flex; align-items: center; gap: 11px;
    padding: 15px 14px 13px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.lateral-marca i        { font-size: 20px; color: #6ea8fe; flex: 0 0 auto; }
.lateral-marca > div    { min-width: 0; }
.lateral-marca strong   { display: block; color: #fff; font-size: 15px; letter-spacing: .3px; }
.lateral-marca small    { color: #8b9cb0; font-size: 10.5px; }

/* Aviso discreto: informa sin competir con la navegación. */
.lateral .solo-lectura {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 9px 14px 0;
    color: #d9a441; font-size: 10px;
    text-transform: uppercase; letter-spacing: 1.1px; font-weight: 700;
    background: none; border: 0; padding: 0;
}
.lateral .solo-lectura i { font-size: 9px; }

.lateral-nav { flex: 1; padding: 8px 10px 16px; }

/* Enlace suelto de primer nivel (Tablero, Revisión, Usuarios…). */
.lateral-nav > a {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    padding: 8px 10px; margin-bottom: 1px;
    color: var(--lat-tinta); text-decoration: none;
    border-radius: 7px; font-size: 13px; line-height: 1.3;
    white-space: nowrap; overflow: hidden;
}
.lateral-nav > a:hover  { background: rgba(255,255,255,.07); color: #fff; }
.lateral-nav > a.activo { background: rgba(13,110,253,.9); color: #fff; font-weight: 600; }
.lateral-nav > a.alerta { color: #ff9a9a; }
.lateral-nav > a.alerta:hover { background: rgba(220,53,69,.2); color: #fff; }
.lateral-nav > a > i    { width: 16px; text-align: center; font-size: 13px; flex: 0 0 16px;
                          color: #7a8ca3; }
.lateral-nav > a:hover > i,
.lateral-nav > a.activo > i { color: inherit; }

/* Los conteos son referencia, no protagonistas: número plano alineado a la derecha. */
.cuenta {
    margin-left: auto; flex: 0 0 auto;
    font-size: 11px; font-variant-numeric: tabular-nums;
    color: #6d8199; letter-spacing: .2px;
}
.lateral-nav > a:hover .cuenta  { color: #b9c9da; }
.lateral-nav > a.activo .cuenta { color: rgba(255,255,255,.85); font-weight: 600; }

.lateral-sep {
    margin: 15px 10px 5px; font-size: 9.5px; text-transform: uppercase;
    letter-spacing: 1.3px; color: #5d7089; font-weight: 700;
}
.lateral-nav > .lateral-sep:first-child { margin-top: 4px; }

/* --- Grupos colapsables --- */
/* --- Capas -----------------------------------------------------------------
   El menú lateral es fijo, así que hay que recolocar lo que va encima. El modal
   del documento debe tapar al lateral (si no, se abre por detrás y parece que
   no pasa nada al hacer clic) y el icono de ServiBot debe quedar por debajo del
   modal, para no flotar sobre un documento abierto. */
.velo             { z-index: 2000 !important; }
.servibot-lanzador{ z-index: 1500; }
.servibot-panel   { z-index: 2600; }

/* Bootstrap también trae una clase .modal (display:none, position:fixed,
   height:100%): dejaba NUESTRA caja invisible dentro del velo abierto — la
   pantalla se oscurecía y no aparecía nada. Aquí se recupera todo lo que
   Bootstrap pisa. */
.velo .modal {
    display: block !important;
    position: relative !important;
    top: auto !important; left: auto !important;
    width: 100% !important; height: auto !important;
    max-width: 1080px !important;
    overflow: visible !important;
    z-index: auto !important;
}

/* Vía de la relación deducida de los comentarios del documento. */
.etiqueta.comentario { background: #ede7f8; color: #5a3ea6; }

/* --- Diagrama de referencias en el modal (esquema de Dirección) ----------- */

.drefs {
    display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap;
    margin: 12px 0 22px;
}
.drefs-col   { display: flex; flex-direction: column; gap: 8px; width: 230px; flex: 0 0 230px; }
.drefs-baja  { text-align: center; font-size: 20px; color: #1f2d3d; line-height: 1; }
.drefs-cruce { font-size: 26px; color: #1f2d3d; align-self: center; flex: 0 0 auto; }

.dref {
    border: 2px solid #1f2d3d; border-radius: 4px;
    padding: 10px 12px; font-size: 12.5px; line-height: 1.45;
    cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.dref:hover  { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(31,45,61,.18); }
.dref .cab {
    font-weight: 700; font-size: 10.5px; letter-spacing: .5px;
    margin-bottom: 5px; color: #1f2d3d;
}
.dref.actual  { background: #dce9f7; cursor: default; }
.dref.actual:hover { transform: none; box-shadow: none; }
.dref.contpaq { background: #fbe0da; }
.dref.texto   { background: #fdf3d1; }
.dref.vacia   { background: #f2f4f7; border-style: dashed; cursor: default; }
.dref.vacia:hover { transform: none; box-shadow: none; }

/* Documento referenciado que NO existe en CONTPAQi: vive fuera del sistema
   (factura externa, folio no localizado). Morado y punteado, inconfundible. */
.dref.noexiste {
    background: #f5f0fb;
    border: 2px dashed #7c3aed;
    cursor: default;
}
.dref.noexiste:hover { transform: none; box-shadow: none; }
.dref.noexiste .cab  { color: #5b21b6; }
.dref.noexiste .apunte { color: #6d28d9; font-weight: 600; }

.drefs-grupo {
    flex: 1 1 300px; min-width: 260px;
    border: 2px solid #1f2d3d; padding: 14px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 12px;
}

/* Renglón etiqueta→valor dentro de cada tarjeta del diagrama. */
.dref-linea {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: 11px; padding: 1px 0; border-bottom: 1px dotted rgba(31,45,61,.14);
}
.dref-linea span   { color: #5c6b7f; flex: 0 0 auto; }
.dref-linea strong { text-align: right; word-break: break-word; }
.dref .apunte      { display: block; margin-top: 4px; font-size: 10.5px; }
.dref.externa      { cursor: default; }
.dref.externa:hover{ transform: none; box-shadow: none; }

@media print { .dref:hover { transform: none; box-shadow: none; } }

/* --- La lista entra completa en su cuadro ----------------------------------
   estilos.css pone nowrap en TODAS las celdas y con tantas columnas la tabla
   se salía del cuadro. Aquí las celdas se compactan y el texto largo se parte;
   solo folio, cifras y etiquetas se quedan en una línea. */
.caja-tabla table > * > tr > th,
.caja-tabla table > * > tr > td {
    white-space: normal;
    padding: 7px 8px;
    font-size: 12.3px;
    vertical-align: top;
}
.caja-tabla th               { font-size: 10px; white-space: nowrap; }
.caja-tabla td strong        { white-space: nowrap; }   /* el folio, en una línea */
.caja-tabla td.num           { white-space: nowrap; }
.caja-tabla .etiqueta        { white-space: nowrap; font-size: 10.5px; padding: 2px 7px; }
.caja-tabla .marca-deshora   { white-space: normal; }
.titulo-doc                  { max-width: 200px; font-size: 12px; }

/* --- Título del documento y captura a deshora ----------------------------- */

.titulo-doc {
    max-width: 260px; white-space: normal; line-height: 1.3;
    font-size: 12.5px; color: #41526a;
}

/* Aviso, no bloqueo: solo señala lo capturado fuera del horario de trabajo. */
td.deshora { background: #fff8e6; }
.marca-deshora {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 3px; font-size: 10.5px; font-weight: 600;
    color: #a9600b; background: #ffeccc; border: 1px solid #ffd9a0;
    border-radius: 5px; padding: 1px 6px; white-space: nowrap;
}
.marca-deshora i { font-size: 9.5px; }

/* --- Tarjetas de sucursal, arriba de cada módulo -------------------------- */

.suc-tarjetas {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin: 0 0 16px;
}
.suc-tarjeta {
    flex: 1 1 150px; max-width: 230px; min-width: 138px;
    display: flex; flex-direction: column; gap: 1px;
    background: #fff; border: 1px solid #e3e9f0; border-radius: 10px;
    padding: 10px 13px; text-decoration: none; color: inherit;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.suc-tarjeta:hover {
    transform: translateY(-2px); border-color: #b9cbe0;
    box-shadow: 0 6px 16px rgba(31, 45, 61, .1);
}
.suc-tarjeta.activa {
    background: #0d6efd; border-color: #0d6efd; color: #fff;
    box-shadow: 0 6px 16px rgba(13, 110, 253, .28);
}
.suc-nombre {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: #6b7a8d; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suc-nombre i           { font-size: 10.5px; color: #9fb0c4; }
.suc-tarjeta.activa .suc-nombre,
.suc-tarjeta.activa .suc-nombre i { color: rgba(255,255,255,.9); }

.suc-cifra {
    font-size: 21px; font-weight: 700; line-height: 1.15;
    color: #1f2d3d; font-variant-numeric: tabular-nums;
}
.suc-tarjeta.activa .suc-cifra { color: #fff; }

.suc-pie { font-size: 10.5px; color: #8b9cb0; font-variant-numeric: tabular-nums; }
.suc-tarjeta.activa .suc-pie   { color: rgba(255,255,255,.78); }

.suc-tarjeta.sin-suc           { border-style: dashed; }
.suc-tarjeta.sin-suc .suc-cifra { color: #b8860b; }
.suc-tarjeta.sin-suc.activa .suc-cifra { color: #fff; }

@media (max-width: 620px) {
    .suc-tarjeta { flex: 1 1 calc(50% - 5px); max-width: none; min-width: 0; }
}

/* El punto de color sigue usándose en las pestañas de cada módulo. */
.punto {
    width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px;
    background: #6c757d;
}
.punto.entrada { background: #198754; } .punto.salida    { background: #dc3545; }
.punto.traspaso{ background: #0dcaf0; } .punto.ajuste    { background: #ffc107; }
.punto.orden   { background: #fd7e14; } .punto.cotiza    { background: #6f42c1; }
.punto.factura { background: #0d6efd; } .punto.entrega   { background: #20c997; }
.punto.produccion { background: #d63384; }

/* --- Pie --- */
.lateral-pie {
    padding: 12px 16px 16px; border-top: 1px solid rgba(255,255,255,.09);
    font-size: 11.5px;
}
.lateral-pie .quien  { color: #fff; margin-bottom: 3px; }
.lateral-pie .apunte { color: #7d8fa5; font-size: 10.5px; }
.lateral-pie .salir  {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
    color: #ff9d9d; text-decoration: none;
}
.lateral-pie .salir:hover { color: #fff; }

/* --- Botón para móvil --- */
.menu-abrir {
    display: none; position: fixed; top: 12px; left: 12px; z-index: 1300;
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--lat-fondo); color: #fff; border: 0; font-size: 16px; cursor: pointer;
}
.lateral-velo {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1100;
}

@media (max-width: 900px) {
    .menu-abrir                 { display: block; }
    .lateral                    { transform: translateX(-100%); transition: transform .22s ease; }
    body.lateral-visible .lateral      { transform: none; }
    body.lateral-visible .lateral-velo { display: block; }
    body.con-lateral .contenido { margin-left: 0; padding: 64px 14px 50px; }
}

/* --- Tablero --------------------------------------------------------------- */

.titulo-pantalla   { margin-bottom: 14px; }
.titulo-pantalla h1 { margin: 0 0 2px; font-size: 23px; color: #1f2d3d;
                      display: flex; align-items: center; gap: 10px; }
.titulo-pantalla h1 i { color: #0d6efd; font-size: 19px; }

/* El punto de color también se usa en las pestañas del módulo. */
.pestana .punto { display: inline-block; vertical-align: middle; margin-right: 6px; }

.tarjetas {
    display: grid; gap: 14px; margin: 18px 0 20px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.tarjeta {
    display: flex; align-items: center; gap: 13px;
    background: #fff; border: 1px solid #e3e9f0; border-radius: 12px;
    padding: 15px 17px; text-decoration: none; color: inherit;
    transition: transform .15s ease, box-shadow .15s ease;
}
.tarjeta:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(31,45,61,.11); }
.tarjeta .icono {
    width: 46px; height: 46px; border-radius: 11px; flex: 0 0 46px;
    display: grid; place-items: center; font-size: 19px; color: #fff;
}
.icono.azul { background: #0d6efd; } .icono.rojo     { background: #dc3545; }
.icono.verde{ background: #198754; } .icono.amarillo { background: #ffc107; }
.tarjeta .cifra  { display: block; font-size: 24px; font-weight: 700; color: #1f2d3d;
                   font-variant-numeric: tabular-nums; line-height: 1.1; }
.tarjeta .rotulo { display: block; font-size: 12px; color: #6b7a8d; }

.rejilla-2 {
    display: grid; gap: 16px; margin-bottom: 16px;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.panel-caja {
    background: #fff; border: 1px solid #e3e9f0; border-radius: 12px;
    padding: 15px 17px; margin-bottom: 16px;
}
.panel-caja h3 {
    margin: 0 0 11px; font-size: 14px; color: #1f2d3d;
    display: flex; align-items: center; gap: 8px;
}
.panel-caja h3 i { color: #0d6efd; font-size: 13px; }
.grafica { width: 100%; height: 265px; }

.fichas-estado {
    display: grid; gap: 11px;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.ficha-estado {
    display: block; background: #fff5f5; border: 1px solid #f5c2c7;
    border-radius: 10px; padding: 11px 13px; text-decoration: none; color: inherit;
}
.ficha-estado:hover  { background: #ffe9ea; }
.ficha-estado .cifra { font-size: 21px; font-weight: 700; color: #b02a37;
                       font-variant-numeric: tabular-nums; }
.ficha-estado .rotulo{ display: block; font-size: 12.5px; font-weight: 600; color: #1f2d3d; }
.ficha-estado .apunte{ display: block; font-size: 11px; color: #6b7a8d; margin-top: 3px;
                       white-space: normal; }

@media print {
    .lateral, .menu-abrir, .lateral-velo { display: none !important; }
    body.con-lateral .contenido          { margin-left: 0; }
}

/* Número de factura: referencia externa, se factura fuera de CONTPAQi. */
.etiqueta.factura { background: #e2f2ea; color: #0f5132; font-weight: 600; }