/*  La etiqueta de 100 x 50 mm (DESIGN.md 20.4).

    ACA NO HAY MAS COLOR QUE BLANCO Y NEGRO, Y ES A PROPOSITO (criterio 130).
    La Honeywell PC42e-T es termica: imprime negro sobre blanco y nada mas. No
    van ni las variables --sgt-* ni las --rz-*, no porque se olvidaran sino
    porque no hay donde aplicarlas. La urgencia se lee como la palabra
    "Urgente", no como rojo.

    Y las DOS declaraciones que si estan -- background: #fff y color: #000 --
    son justamente lo que impide que el tema oscuro se filtre en lo que se
    imprime: sin ellas la etiqueta hereda el fondo de la aplicacion y la vista
    previa sale blanca sobre negro. No se borran.

    Es la unica superficie del sistema donde la convencion de colores de
    DESIGN.md 7 no se cumple, y esta escrito para que nadie la "arregle".

    TODO ESTA EN MILIMETROS. La etiqueta tiene una medida fisica y no una en
    pixeles: el navegador convierte mm a la resolucion que tenga la impresora, y
    asi lo mismo sale a 100 x 50 en la termica de 203 dpi y en una A4 de 600.

    El QUE lo pone en una hoja es otro archivo (etiqueta-hoja.css). Aca esta
    solo COMO se ve el bloque, para que pueda embeberse en un informe sin
    arrastrar las reglas de pagina.  */

.sgt-etiqueta {
    box-sizing: border-box;
    width: 100mm;
    height: 50mm;

    /*  Que NADIE la encoja. Si el bloque cae adentro de un contenedor flex o
        grid -- y va a caer, porque toda esta interfaz esta hecha de
        RadzenStack -- pasa a ser un item y por omision se encoge por debajo de
        su ancho. Medido: adentro del layout del ingreso daba 88,7 mm en vez de
        100, sin un solo error y con el papel ya gastado.

        Es el modo de falla contra el que esta escrito el bloque entero: algo
        que se ve bien y sale mal. Las tres lineas son la defensa de fondo; que
        la hoja ademas use un layout sin contenedor es la otra mitad.  */
    flex-shrink: 0;
    flex-grow: 0;
    min-width: 100mm;

    display: flex;
    align-items: stretch;
    gap: 2mm;
    padding: 3mm;

    background: #fff;
    color: #000;

    /*  Sin serifas y con buen contraste de trazo: a 203 dpi una serifa se come
        un punto y deja de ser una serifa.  */
    font-family: "Roboto Flex", "Segoe UI", Arial, sans-serif;
    line-height: 1.15;

    /*  Nada puede desbordar la etiqueta: lo que no entra se corta, no empuja el
        QR fuera del papel.  */
    overflow: hidden;
}

/*--- La columna de texto --------------------------------------------------*/

.sgt-etiqueta-datos {
    flex: 1 1 auto;
    min-width: 0;   /* sin esto el ellipsis de los hijos no funciona en flex */

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/*  Cada renglon se corta con puntos suspensivos en vez de partirse en dos.
    Una razon social larga que baja a un segundo renglon desarma el alto de la
    etiqueta y empuja el pie afuera del papel; cortada, se sigue leyendo lo
    suficiente para saber de quien es.  */
.sgt-etiqueta-cliente,
.sgt-etiqueta-equipo,
.sgt-etiqueta-identidad,
.sgt-etiqueta-pie {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sgt-etiqueta-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2mm;
}

/*  El numero de OT es lo mas grande de la etiqueta porque es lo que se tipea a
    mano cuando el QR ya no se lee (regla 4). Si esto se achica, la etiqueta
    deja de sobrevivir a su propio QR.  */
.sgt-etiqueta-ot {
    font-size: 6mm;
    font-weight: 700;
    letter-spacing: -0.1mm;
    white-space: nowrap;
}

.sgt-etiqueta-vmt {
    font-size: 3.4mm;
    font-weight: 600;
    white-space: nowrap;
}

.sgt-etiqueta-cliente {
    font-size: 4mm;
    font-weight: 700;
}

.sgt-etiqueta-equipo {
    font-size: 3.4mm;
}

.sgt-etiqueta-identidad {
    font-size: 3.2mm;
}

.sgt-etiqueta-pie {
    font-size: 3mm;
}

/*--- El QR ----------------------------------------------------------------*/

.sgt-etiqueta-qr {
    flex: 0 0 auto;
    width: 32mm;
    height: 32mm;
    align-self: center;

    display: flex;
    align-items: center;
    justify-content: center;
}

/*  RadzenQRCode emite un SVG. Se lo estira al cuadro completo desde aca y no
    con un Style en el componente, para que la medida viva junto al resto de las
    medidas y no repartida en dos archivos.

    32 mm con un codigo de correccion alta y una cadena de unos cincuenta
    caracteres da modulos de casi un milimetro: mas del doble de lo que necesita
    la camara de un celular, que es el margen que se come la grasa.  */
.sgt-etiqueta-qr svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sgt-etiqueta-sin-qr {
    font-size: 3mm;
    text-align: center;
}