/* ==========================================================================
   YABRO web — identidad visual
   --------------------------------------------------------------------------
   Los colores son EXACTAMENTE los de UI/Paleta.cs de la aplicación de
   escritorio. Si allá se cambia un color, aquí hay que cambiarlo también:
   son dos archivos porque un Color de .NET no se puede leer desde CSS.

   Los tres colores de serie no se eligieron a ojo. Están verificados para
   daltonismo: el peor par vecino da ΔE 22.6 en protanopía y 32.3 en visión
   normal, muy por encima del mínimo de 8. El ámbar tiene poco contraste
   contra el fondo blanco, por eso las gráficas SIEMPRE llevan el número
   visible y su leyenda: el color nunca es lo único que distingue una serie.
   ========================================================================== */

:root {
    --primario:       #00331A;
    --primario-medio: #0A5C33;
    --primario-suave: #E8F1EC;
    --acento:         #12A05C;

    --fondo:          #F4F6F5;
    --superficie:     #FFFFFF;
    --superficie-alt: #F8FAF9;
    --borde:          #DCE3DF;
    --texto:          #1A211E;
    --texto-suave:    #5C6B65;

    --exito:        #12784A;
    --advertencia:  #B26A00;
    --error:        #B3261E;
    --error-fondo:  #FBEAE8;

    --serie-telefono:  #177245;
    --serie-sim:       #E8A317;
    --serie-accesorio: #1F5FA8;

    --lateral: 210px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--fondo);
    color: var(--texto);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 14px;
}

h1 { font-size: 19px; color: var(--primario); margin: 0; font-weight: 600; }

/* ------------------------------------------------------------ estructura */
.marco { display: flex; min-height: 100vh; }

.lateral {
    width: var(--lateral);
    flex: 0 0 var(--lateral);
    background: var(--primario);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 14px 0;
}

.marca {
    display: flex; align-items: center; gap: 9px;
    padding: 4px 16px 18px;
    font-weight: 700; letter-spacing: .5px;
}
.marca img { width: 26px; height: auto; }

.menu {
    display: block;
    padding: 10px 16px;
    color: #D7E4DC;
    text-decoration: none;
    border-left: 3px solid transparent;
}
.menu:hover { background: rgba(255,255,255,.07); color: #fff; }
.menu.active {
    background: rgba(255,255,255,.12);
    border-left-color: var(--acento);
    color: #fff; font-weight: 600;
}
.menu-inactivo { color: #7E9C8C; cursor: not-allowed; }
.menu-titulo {
    padding: 16px 16px 4px;
    font-size: 10.5px; letter-spacing: 1px; color: #7E9C8C;
}

.lateral-pie { margin-top: auto; padding: 14px 16px 0; border-top: 1px solid rgba(255,255,255,.12); }
.usuario { font-weight: 600; font-size: 13px; }
.puesto  { color: #9DB6AA; font-size: 11.5px; margin-bottom: 8px; }
.salir   { color: #D7E4DC; font-size: 12px; }

.principal { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.barra {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 20px;
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
}
.barra-espacio { flex: 1 1 auto; }
.barra-etiqueta { font-size: 10.5px; letter-spacing: 1px; color: var(--texto-suave); }
.barra-nota { font-size: 12px; color: var(--texto-suave); }
.barra-select { padding: 5px 8px; border: 1px solid var(--borde); border-radius: 4px; }

.contenido { padding: 16px 20px 28px; }

/* -------------------------------------------------------------- encabezado */
.encabezado {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap; margin-bottom: 12px;
}
.encabezado-controles { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.estado { color: var(--texto-suave); font-size: 12.5px; margin: 6px 0 10px; }
.estado-error { color: var(--error); font-weight: 600; }

/* ------------------------------------------------------------- componentes */
.control {
    padding: 6px 8px;
    border: 1px solid var(--borde);
    border-radius: 4px;
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    width: 100%;
}
.control:disabled { background: var(--superficie-alt); color: #9AA8A2; }

.boton {
    padding: 7px 14px;
    border-radius: 4px;
    font: inherit; font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}
.boton:disabled { opacity: .5; cursor: default; }
.boton-primario { background: var(--primario); color: #fff; }
.boton-primario:hover:enabled { background: var(--primario-medio); }
.boton-secundario { background: var(--superficie); color: var(--primario); border-color: var(--borde); }
.boton-secundario:hover:enabled { background: var(--primario-suave); }

.panel {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 6px;
    padding: 12px;
}

.aviso { padding: 9px 11px; border-radius: 4px; font-size: 13px; margin: 8px 0; }
.aviso-error { background: var(--error-fondo); border-left: 3px solid var(--error); color: #6E1712; }

/* ---------------------------------------------------------------- tarjetas */
.rejilla-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-left: 4px solid var(--acento, var(--primario));
    border-radius: 6px;
    padding: 10px 12px;
}
.tarjeta-etiqueta { font-size: 10.5px; letter-spacing: 1px; color: var(--texto-suave); }
.tarjeta-valor { font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--texto); }
.tarjeta-nota { font-size: 11.5px; color: var(--texto-suave); min-height: 1em; }

/* ---------------------------------------------------------------- gráficas */
.rejilla-graficas {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
@media (max-width: 900px) { .rejilla-graficas { grid-template-columns: 1fr; } }

.grafica { margin: 0; }
.grafica figcaption {
    font-size: 12px; font-weight: 600; color: var(--texto-suave);
    margin-bottom: 8px;
}
.grafica-svg { width: 100%; height: 190px; display: block; }
.grafica-base { stroke: var(--borde); stroke-width: 1; }
.grafica-valor { font-size: 11px; fill: var(--texto); font-weight: 600; }
.grafica-eje   { font-size: 10px; fill: var(--texto-suave); }
.grafica-vacia {
    height: 190px; display: flex; align-items: center; justify-content: center;
    color: var(--texto-suave); font-size: 13px;
}

.leyenda { display: flex; gap: 14px; list-style: none; padding: 0; margin: 6px 0 0; }
.leyenda li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-suave); }
.punto { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ------------------------------------------------------------------ tablas */
.rejilla-tablas { display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px; }
@media (max-width: 900px) { .rejilla-tablas { grid-template-columns: 1fr; } }

.titulo-tabla {
    font-size: 10.5px; letter-spacing: 1px; color: var(--texto-suave);
    margin-bottom: 5px;
}

.panel-tabla { padding: 0; overflow: hidden; }
.panel-alto .tabla-marco { max-height: 60vh; }

.tabla-marco { overflow: auto; max-height: 340px; }

.tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabla th {
    position: sticky; top: 0;
    background: var(--primario); color: #fff;
    text-align: left; font-weight: 600;
    padding: 7px 9px; white-space: nowrap;
}
.tabla td { padding: 6px 9px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla tbody tr:nth-child(even) { background: var(--superficie-alt); }
.tabla .der { text-align: right; }

.tabla-vacia { padding: 22px; text-align: center; color: var(--texto-suave); font-size: 13px; }

/* ----------------------------------------------------------------- filtros */
.filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px 12px;
    align-items: end;
    margin-bottom: 6px;
}
.filtro { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filtro-ancho { grid-column: span 2; }
.filtro label { font-size: 10.5px; letter-spacing: 1px; color: var(--texto-suave); }
.par-fechas { display: flex; gap: 6px; }
.filtro-botones { display: flex; gap: 8px; align-items: end; }

/* ------------------------------------------------------------------ acceso */
.acceso {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: var(--primario);
    padding: 20px;
}
.acceso-caja {
    background: var(--superficie);
    border-radius: 10px;
    padding: 30px 32px 24px;
    width: 100%; max-width: 350px;
    display: flex; flex-direction: column; gap: 6px;
    box-shadow: 0 10px 34px rgba(0,0,0,.28);
}
.acceso-logo { width: 130px; align-self: center; margin-bottom: 10px; }
.acceso-caja h1 { text-align: center; font-size: 24px; }
.acceso-sub { text-align: center; color: var(--texto-suave); font-size: 12.5px; margin: 0 0 12px; }
.acceso-caja label { font-size: 10.5px; letter-spacing: 1px; color: var(--texto-suave); margin-top: 6px; }
.acceso-caja input {
    padding: 9px 10px; border: 1px solid var(--borde); border-radius: 4px; font: inherit;
}
.acceso-caja .boton { margin-top: 16px; padding: 10px; }
.acceso-pie {
    text-align: center; margin: 16px 0 0;
    font-size: 11px; font-style: italic; color: var(--texto-suave);
}

/* ---------------------------------------------------------------- escaneo */
.pastilla {
    background: var(--primario-suave); color: var(--primario);
    border: 1px solid var(--borde); border-radius: 999px;
    padding: 4px 12px; font-size: 12px; font-weight: 600;
}

.rejilla-escaneo { display: grid; grid-template-columns: 1fr 1.1fr; gap: 12px; }
@media (max-width: 950px) { .rejilla-escaneo { grid-template-columns: 1fr; } }

.captura { display: flex; flex-direction: column; gap: 8px; }
.etiqueta-grande { font-size: 11px; letter-spacing: 1px; color: var(--texto-suave); }

/* La caja de captura es deliberadamente enorme: se lee de pie, a un metro
   de la pantalla, y confirma de un vistazo que la pistola sí escribió. */
.caja-escaneo {
    font-size: 30px; font-weight: 700; letter-spacing: 2px;
    text-align: center; padding: 10px;
    border: 2px solid var(--primario); border-radius: 6px;
    width: 100%; font-family: Consolas, "Courier New", monospace;
    text-transform: uppercase;
}
.caja-escaneo:focus { outline: 3px solid var(--acento); outline-offset: 1px; }
.caja-escaneo:disabled { background: var(--superficie-alt); border-color: var(--borde); }

.resultado {
    min-height: 42px; display: flex; align-items: center;
    padding: 8px 12px; border-radius: 4px; font-size: 14px;
    background: var(--superficie-alt); color: var(--texto-suave);
    border-left: 4px solid var(--borde);
}
.resultado.bueno    { background: #E4F4EA; color: #0C5433; border-left-color: var(--exito); font-weight: 600; }
.resultado.malo     { background: var(--error-fondo); color: #6E1712; border-left-color: var(--error); font-weight: 600; }
.resultado.atencion { background: #FDF3E0; color: #7A4900; border-left-color: var(--advertencia); font-weight: 600; }
.resultado.info     { background: #E5F0F6; color: #0D4A6B; border-left-color: #12608A; font-weight: 600; }

.avance-barra {
    height: 10px; background: var(--borde); border-radius: 999px; overflow: hidden;
}
.avance-barra span {
    display: block; height: 100%; background: var(--acento);
    border-radius: 999px; transition: width .2s;
}
.avance-texto { font-size: 12.5px; color: var(--texto-suave); margin-top: 5px; }

.boton-peligro {
    background: var(--superficie); color: var(--error); border-color: var(--error);
}
.boton-peligro:hover:enabled { background: var(--error-fondo); }

/* ----------------------------------------------------------------- velos */
.velo {
    position: fixed; inset: 0; background: rgba(0,20,10,.55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; z-index: 50;
}
.dialogo {
    background: var(--superficie); border-radius: 8px; padding: 22px 24px;
    max-width: 430px; width: 100%;
    display: flex; flex-direction: column; gap: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.dialogo h2 { margin: 0 0 4px; font-size: 17px; color: var(--primario); }
.dialogo p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; }
.dialogo label { font-size: 10.5px; letter-spacing: 1px; color: var(--texto-suave); margin-top: 6px; }
.dialogo .filtro-botones { margin-top: 14px; }

/* -------------------------------------------------- proyecto en la barra */
.barra-proyecto {
    padding: 5px 8px; border: 1px solid var(--borde); border-radius: 4px;
    font: inherit; width: 150px; text-transform: uppercase;
}
.barra-proyecto[readonly] {
    background: var(--primario-suave); color: var(--primario); font-weight: 600;
}
.barra-boton { padding: 5px 12px; }
.barra-estado { font-size: 11.5px; color: var(--exito); font-weight: 600; }
.barra-estado.nuevo { color: var(--advertencia); }
.barra-estado.malo  { color: var(--error); }

/* ------------------------------------------------- almacen e importacion */
.nota-encabezado {
    font-size: 12px; color: var(--texto-suave);
    border-top: 1px solid var(--borde); padding-top: 8px; margin-top: 2px;
}

.aviso-atencion {
    background: #FDF3E0; border-left: 3px solid var(--advertencia); color: #7A4900;
}
.aviso ul { margin: 6px 0 0; padding-left: 18px; }
.aviso li { margin: 2px 0; }

/* El selector de archivo se ve distinto en cada navegador; al menos que
   no rompa la altura de la fila de filtros. */
input[type=file].control { padding: 4px; }

/* ==========================================================================
   HOJA DE CODIGOS DE MATERIAL
   --------------------------------------------------------------------------
   Los codigos de barras se dibujan aqui con <span>: uno por cada raya y
   cada espacio, con el ancho en pixeles puesto desde el componente.

   NO se generan en PDF como en la aplicacion de escritorio, y no es
   capricho: PdfSharp instala su resolvedor de fuentes UNA VEZ POR PROCESO
   y no se puede reasignar. AcusePdf instala el suyo al generar el primer
   acuse; si la hoja de codigos instalara otro antes, los acuses saldrian
   con otra letra y nadie se enteraria hasta ver el papel impreso.

   OJO CON LOS NOMBRES: las clases llevan prefijo cb- porque "barra" a
   secas ya existe mas arriba en este archivo y es la barra superior de la
   aplicacion. Sin el prefijo, cada raya hereda display:flex, relleno y
   borde inferior, y el codigo sale como una pila de renglones grises.
   ========================================================================== */

.dialogo-ancho { max-width: 900px; }

.hoja-codigos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-height: 62vh;
    overflow-y: auto;
    padding: 2px;
}

.codigo-tarjeta {
    border: 1px solid var(--borde);
    border-radius: 6px;
    padding: 12px 14px;
    background: #FFFFFF;
    break-inside: avoid;
}

/* La zona tranquila son 10 modulos de cada lado, los mismos que usa
   Codigo128.ZonaTranquila en la de escritorio. Sin ella hay pistolas que
   no enganchan el codigo aunque las barras esten perfectas. */
.codigo-barras {
    display: flex;
    align-items: stretch;
    /* Centrado, igual que Codigo128.Dibujar en la de escritorio: las dos
       hojas se ven iguales aunque una sea HTML y la otra PDF. */
    justify-content: center;
    height: 46px;
    padding: 0 20px;
    background: #FFFFFF;
    margin-bottom: 6px;
}

/* flex: 0 0 auto es OBLIGATORIO. Sin eso, flexbox encoge los elementos
   para que quepan y las barras pierden su ancho relativo: el codigo se
   ve bien y no lo lee nadie. */
.cb-barra   { flex: 0 0 auto; background: #000000; }
.cb-espacio { flex: 0 0 auto; background: #FFFFFF; }

.codigo-sku {
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px; font-weight: 700; letter-spacing: 1px;
    color: var(--texto);
}
.codigo-desc { font-size: 12.5px; color: var(--texto); margin-top: 2px; }
.codigo-pie  { font-size: 11px; color: var(--texto-suave); margin-top: 2px; }


/* ==========================================================================
   IMPRESION
   --------------------------------------------------------------------------
   Ctrl+P sobre la hoja de codigos tiene que sacar SOLO la hoja: sin menu,
   sin barra superior y sin los botones del dialogo.

   Todo va colgado de :has(.velo) para que esto aplique UNICAMENTE cuando
   hay un dialogo abierto. Sin esa condicion, imprimir cualquier otra
   pantalla saldria en blanco.
   ========================================================================== */

@media print {

    .marco:has(.velo) .lateral,
    .marco:has(.velo) .barra { display: none !important; }

    .contenido:has(.velo) > *:not(.velo) { display: none !important; }

    .velo {
        position: static;
        background: none;
        padding: 0;
        display: block;
    }

    .velo .dialogo {
        box-shadow: none;
        max-width: none;
        width: 100%;
        padding: 0;
        gap: 0;
    }

    /* El titulo, la nota de ayuda y el boton de cerrar no van al papel. */
    .velo .dialogo h2,
    .velo .nota-dialogo,
    .velo .dialogo .filtro-botones { display: none !important; }

    .hoja-codigos {
        max-height: none;
        overflow: visible;
        gap: 10px;
    }

    /* Los navegadores quitan los fondos al imprimir para ahorrar tinta.
       Aqui el fondo ES el dato: sin esto las barras salen en blanco. */
    .cb-barra {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}