/*=============================================================================
  SGT - Estilos propios del proyecto.

  CONVENCION DE COLOR (heredada de END2 y SICI):
  - Colores con rol semantico (primario, exito, error, superficie) -> variables
    de Radzen: var(--rz-primary), var(--rz-danger), var(--rz-text-color)...
  - Colores de identidad de VALMETAL -> variables --sgt-* declaradas aca.
  - NUNCA hex literales en las paginas .razor.
=============================================================================*/

:root {
    /* Azul corporativo de VALMETAL (tomado de valmetal.com.ar). */
    --sgt-brand: #2f81a9;
    --sgt-brand-rgb: 47, 129, 169;
    --sgt-brand-dark: #156a91;
    --sgt-brand-light: rgba(47, 129, 169, 0.12);

    /* Semaforo del tablero. */
    --sgt-urgente: #e53935;
    --sgt-alta: #fb8c00;
    --sgt-vencida-bg: rgba(229, 57, 53, 0.10);
    --sgt-vencida-borde: #e53935;

    font-size: var(--rz-root-font-size);
}

body {
    /* Stack del sistema: se ve nativo en Windows, Android e iOS sin descargar nada. */
    font-family: var(--rz-text-font-family);
    color: var(--rz-text-color);
    font-size: var(--rz-body-font-size);
    line-height: var(--rz-body-line-height);
    background-color: var(--rz-body-background-color);
}

.rz-body {
    --rz-body-padding: 0;
}

a {
    color: var(--rz-link-color);
}

/*--- Error de circuito Blazor --------------------------------------------*/

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/*--- Sidebar: logo sobre fondo blanco ------------------------------------*/

.sgt-logo {
    width: 190px;
    background: #fff;
    padding: 8px 12px;
    border-radius: 6px;
}

/*--- Portal de clientes (DESIGN.md 28.2, regla 8) ------------------------*/

/* El logo en la cabecera, mas chico que en el sidebar. */
.sgt-portal-logo {
    width: 120px;
    padding: 4px 8px;
}

.sgt-portal-cliente {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Las tres entradas, centradas y sin desbordar a 375 px. */
.sgt-portal-menu {
    justify-content: center;
    border-top: var(--rz-panel-menu-item-border);
}

.sgt-portal-tarjeta {
    height: 100%;
}

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

/* Tarjeta de indicador clickeable: filtra la grilla de abajo. */
.sgt-kpi {
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.sgt-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--rz-shadow-3);
}

.sgt-kpi.sgt-kpi-activo {
    outline: 2px solid var(--sgt-brand);
    outline-offset: -2px;
}

/* Fila de OT vencida. El fondo va con opacidad para que funcione igual en
   claro y en oscuro sin declarar dos paletas. */
.sgt-fila-vencida td {
    background-color: var(--sgt-vencida-bg) !important;
    box-shadow: inset 3px 0 0 0 var(--sgt-vencida-borde);
}

.sgt-fila-urgente td {
    font-weight: 600;
}

/* Registro dado de baja: sigue estando, pero no compite por la atencion. */
.sgt-fila-inactiva td {
    opacity: 0.55;
}

/* Fila con un problema tecnico: una cota fuera de tolerancia, un ensayo que no
   paso. Comparte el tratamiento de la OT vencida --  es la misma urgencia --  pero
   se nombra aparte porque no habla de fechas. */
.sgt-fila-alerta td {
    background-color: var(--sgt-vencida-bg) !important;
    box-shadow: inset 3px 0 0 0 var(--sgt-vencida-borde);
}

/* Fila que espera una respuesta de afuera del taller. No es un error --  no va
   en rojo --  pero es lo que hay que mirar primero de la grilla. */
.sgt-fila-pendiente td {
    background-color: rgba(255, 183, 77, 0.12) !important;
    box-shadow: inset 3px 0 0 0 var(--sgt-alta);
}

/*--- Ficha de OT ---------------------------------------------------------*/

/* La cabecera no se va con el scroll de la solapa: en el taller lo primero que
   se mira es en que estado esta la orden, y con ocho solapas de contenido esa
   linea queda arriba de todo enseguida. */
.sgt-ficha-cabecera {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 0.5rem 0 0.75rem;
    background-color: var(--rz-base-background-color);
    border-bottom: 1px solid var(--rz-border-color);
}

/*--- Buscador universal del header ---------------------------------------*/

.sgt-buscador {
    min-width: 260px;
}

/* El buscador se queda con el espacio libre de la fila. */
.sgt-header-buscador {
    flex: 1 1 auto;
    min-width: 0;
}

.sgt-header-buscador .sgt-buscador {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

.sgt-header-buscador > .rz-button {
    flex: 0 0 auto;
}

.sgt-header-der {
    flex: 0 0 auto;
}

/*--- Celular: el buscador baja a su propia fila --------------------------
  A 375 px no entran en una linea el toggle, el buscador, los dos botones y
  los controles de la derecha. En vez de dejar el input en 40 px, el bloque
  de busqueda pasa a una segunda fila a ancho completo, que es como se usa
  desde el celular en el taller: se escanea o se busca, nada mas.
--------------------------------------------------------------------------*/

@media (max-width: 767px) {
    .sgt-solo-desktop {
        display: none !important;
    }

    /*  El flex-wrap NO se pone aca: RadzenStack lo escribe en el atributo
        style y el estilo en linea le gana a la clase. Va como parametro
        Wrap="FlexWrap.Wrap" en MainLayout. Escrito asi durante el bloque 8,
        esta regla no se aplicaba y el buscador se salia de la pantalla sin
        dejar barra de scroll -- por eso no se veia.  */
    .sgt-header-cont {
        row-gap: 0.5rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .sgt-header-buscador {
        order: 3;
        flex: 1 0 100%;
    }

    .sgt-buscador {
        min-width: 0;
    }
}

/* La cabecera crece al envolver: que el alto lo dicte el contenido. */
@media (max-width: 767px) {
    .rz-header {
        height: auto;
    }
}

/*--- Popup de dropdown que se adapta al contenido -------------------------
  Requerido en toda pagina con RadzenDropDown, misma convencion que SICI.
--------------------------------------------------------------------------*/

.rz-dropdown-panel {
    min-width: max-content !important;
}

/*=============================================================================
  Las dos pantallas que se ven sin sesion (DESIGN.md 15)

  Centradas y sin menu. El menu se dibuja segun el rol, y aca o no hay rol
  todavia, o lo hay pero la persona no puede ir a ningun lado hasta cambiar la
  clave.
=============================================================================*/

.sgt-sin-sesion {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--rz-base-background-color);
}

.sgt-ingreso {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 24rem entra completo en 375 px con el padding del contenedor. */
.sgt-ingreso-tarjeta {
    width: 100%;
    max-width: 24rem;
}

/*=============================================================================
  Documentos embebidos (DESIGN.md 3)

  El manual tecnico no es una pantalla: es un documento autocontenido que se
  lee adentro de la aplicacion. Ocupa lo que queda de alto para que scrollee el
  documento y no la pagina -- si scrollearan los dos, el cabezal de la pantalla
  se iria de vista y no habria forma de volver sin perder el punto de lectura.
=============================================================================*/

.sgt-documento {
    display: block;
    width: 100%;
    height: calc(100vh - 13rem);
    min-height: 22rem;
    border: 1px solid var(--rz-border-color);
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-background-color);
}

/* En el celular el cabezal ocupa dos filas y el boton de abrir aparte no esta. */
@media (max-width: 767px) {
    .sgt-documento {
        height: calc(100vh - 15rem);
    }
}

/*=============================================================================
  El marco de la vista previa de la etiqueta (DESIGN.md 20.4)

  Vive ACA y no en etiqueta.css a proposito: etiqueta.css no tiene una sola
  declaracion de color -la termica es blanco y negro, criterio 130- y un marco
  necesita un borde que se vea contra el fondo de la pantalla. Es una cosa de la
  pantalla que muestra la etiqueta, no de la etiqueta.

  La etiqueta se muestra a TAMANO REAL y no a escala: es la unica forma de que
  alguien note, antes de gastar una, que una razon social larga se corta.
  Por eso el marco scrollea en horizontal en vez de achicar lo que contiene --
  a 375 px no entran 100 mm, y encogerlos convertiria la vista previa en una
  mentira comoda.
=============================================================================*/

.sgt-etiqueta-marco {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--rz-border-color);
    border-radius: var(--rz-border-radius);
    background: #fff;
}

/*=============================================================================
  La vista de la camara del escaner (DESIGN.md 20.2, regla 7)

  Retrato y no apaisado: el telefono se sostiene parado y la etiqueta se mira
  de arriba. object-fit: cover recorta en vez de deformar -- un QR estirado no
  lo lee ni el mejor lector.

  El fondo negro no es decoracion ni marca: es lo que se ve el instante entre
  que el elemento existe y que la camara entrega el primer cuadro. Cualquier
  otro color parpadea.
=============================================================================*/

.sgt-escaner-video {
    width: 100%;
    max-width: 26rem;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #000;
    border-radius: var(--rz-border-radius);
}

/*  /configuracion-reportes (T142): el marco de la vista previa del logo.
    El fondo es CLARO en los dos temas a proposito: el logo se imprime sobre
    papel blanco, y verlo sobre el gris oscuro del tema nocturno mentiria
    sobre como va a salir un PNG con fondo transparente.  */
.sgt-logo-marco {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6rem;
    padding: 0.75rem;
    border: 1px dashed var(--rz-border-color, var(--rz-base-300));
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-100);
}

.sgt-logo-marco img {
    max-width: 100%;
    max-height: 5rem;
    object-fit: contain;
}