/*
  Hoja de estilos base. Cubre solo lo funcional para que las vistas
  entregadas hasta ahora se vean ordenadas y usables en celular; la
  identidad visual completa de PRODIYCO (paleta naranja/amarillo/azul,
  logo, tipografía de marca) queda como tarea aparte, todavía pendiente.
*/

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    background: #f4f5f7;
}

.contenedor-pagina {
    padding: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.panel-formulario {
    margin-top: 1rem;
}

.barra-acciones {
    margin-top: 1rem;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.nota-ayuda {
    color: #666;
    font-size: .85rem;
    font-style: italic;
}

.unidad-medida {
    color: #888;
    font-size: .85rem;
}

/* --- Tarjetas KPI del dashboard --- */
.fila-kpi {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tarjeta-kpi {
    flex: 1 1 160px;
    background: #fff;
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
}

.tarjeta-kpi-alerta {
    border-left: 4px solid #e64a19;
}

.kpi-valor {
    font-size: 1.8rem;
    font-weight: bold;
}

.kpi-etiqueta {
    color: #666;
    font-size: .85rem;
}

.p-menubar-usuario {
    margin-right: 1rem;
    align-self: center;
    font-size: .9rem;
}

/* Respaldo mínimo de espaciado/alineación por si en su build de PrimeFaces
   15 la ruta empaquetada de PrimeFlex fuera distinta a
   "primefaces/primeflex/primeflex.min.css" (verificar en el navegador,
   pestaña Red, que ese archivo cargue con 200 y no 404). Con PrimeFlex
   cargando bien, estas reglas son redundantes pero inofensivas. */
.p-field {
    margin-bottom: 1rem;
    display: block;
}
.p-field label {
    display: block;
    margin-bottom: .4rem;
    font-weight: 600;
}
.p-formgrid.p-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -.5rem;
}
.p-formgrid.p-grid > div {
    padding: 0 .5rem;
    box-sizing: border-box;
}

/* --- Pantalla de login --- */
.pantalla-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    position: relative;
    overflow: hidden;

    /* Degradado de marca (azul profundo a naranja) más un realce amarillo
       tenue en la esquina superior, para que no se vea plano sin perder
       seriedad. */
    background:
        radial-gradient(circle at 15% 15%, rgba(255, 193, 7, 0.25), transparent 45%),
        linear-gradient(135deg, #0B3D66 0%, #0B3D66 45%, #C1440E 100%);
}

/* Textura geométrica sutil (líneas diagonales finas) sobre el degradado,
   a muy baja opacidad -- da profundidad sin restarle formalidad. */
.pantalla-login::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.035) 0px,
        rgba(255, 255, 255, 0.035) 2px,
        transparent 2px,
        transparent 26px
        );
    pointer-events: none;
}

.tarjeta-login {
    width: 100%;
    max-width: 380px;
    position: relative;
    z-index: 1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}

/* Franja superior de color, a modo de acento de marca en la tarjeta. */
.tarjeta-login::before {
    content: "";
    display: block;
    height: 5px;
    background: linear-gradient(90deg, #0B3D66 0%, #FFC107 50%, #C1440E 100%);
}

.logo-login {
    display: block;
    margin: 0 auto;
    max-width: 160px;
}

.boton-ingresar {
    width: 100%;
    margin-top: .5rem;
}

/* --- Firma en canvas --- */
.lienzo-firma {
    border: 1px dashed #999;
    background: #fff;
    touch-action: none;
    max-width: 100%;
}

/* --- Ajustes mobile-first: en pantallas angostas, columnas a ancho completo --- */
@media (max-width: 640px) {
    .p-formgrid > div {
        margin-bottom: .5rem;
    }
    .contenedor-pagina {
        padding: .5rem;
    }
}

.mensaje-encuesta {
    text-align: center;
    font-size: 1rem;
    padding: 1rem 0;
}

/* Celulares pequeños: en la tabla de órdenes solo se ven Fecha, Cliente y
   Ubicación; las demás columnas llevan styleClass="col-oculta-movil". */
@media (max-width: 576px) {
    .ui-datatable th.col-oculta-movil,
    .ui-datatable td.col-oculta-movil {
        display: none;
    }
}