/* ============================================================
   ARCHIVO: app.css
   ------------------------------------------------------------
   Descripción: Estilos propios de MASH Check, aplicados SIEMPRE
                encima de Bootstrap (por eso este archivo se carga
                después de bootstrap.min.css en todas las páginas).
   Fases: 1 (base), 2 (login/registro/header), 4 (completar planilla:
          controles segmentados, firma, barra de acciones inferior),
          7 (constructor de planillas), 8 (administración),
          9 (PWA: botón de instalar), 10 (offline con datos).
   ============================================================ */

/* ============================================================
   SECCIÓN 1: VARIABLES Y PALETA INSTITUCIONAL
   ------------------------------------------------------------
   Definimos los colores como variables CSS. Así, si en el futuro
   cambia la identidad visual, se modifica un solo lugar. La paleta
   es: verde institucional #0b7a4b, blanco, grises claros y un
   rojo #dc2626 para las NO CONFORMIDADES (NC).
   ============================================================ */
:root {
    /* Verde institucional: color primario de la marca */
    --mash-verde: #0b7a4b;

    /* Verde oscurecido para estados hover/active (más legible) */
    --mash-verde-oscuro: #095e3a;

    /* Verde ultravioletable para fondos suaves */
    --mash-verde-suave: #e6f4ee;

    /* Rojo para No Conformidades (NC) */
    --mash-rojo: #dc2626;
    --mash-rojo-suave: #fdecec;

    /* Amarillo para advertencias */
    --mash-ambar: #d97706;

    /* Grises de la paleta */
    --mash-gris-100: #f8f9fa;   /* fondo de página muy claro  */
    --mash-gris-200: #e9ecef;   /* bordes suaves              */
    --mash-gris-600: #6c757d;   /* texto secundario           */
    --mash-gris-900: #212529;   /* texto principal            */

    /* Tipografía del sistema (mobile-first y rápida) */
    --mash-tipografia: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   SECCIÓN 2: ESTILOS BASE
   ------------------------------------------------------------
   Ajustes globales: tipografía, transiciones táctiles y tamaño
   mínimo de los targets táctiles (44x44px) tal como pide el
   diseño UX/UI.
   ============================================================ */
body {
    font-family: var(--mash-tipografia);
    background-color: var(--mash-gris-100);
    color: var(--mash-gris-900);
    /* Antialiasing: las fuentes se ven más prolijas en pantalla */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fondo de la página de login/registro (un degradé verde muy suave) */
.auth-body {
    background: linear-gradient(180deg, var(--mash-verde-suave) 0%, var(--mash-gris-100) 40%);
    min-height: 100vh;
}

/* ============================================================
   SECCIÓN 3: HEADER (barra superior sticky)
   ------------------------------------------------------------
   El header queda fijo arriba (position: sticky) para que siempre
   sean accesibles el logo, el indicador online/offline, el nombre
   de usuario y el logout. sticky (y no fixed) ocupa su lugar en el
   flujo del documento, evitando superponerse con el contenido.
   ============================================================ */
.app-header {
    position: sticky;
    top: 0;
    z-index: 1030;          /* por encima de casi todo (Bootstrap usa 1020-1060) */
    background-color: #ffffff;
    border-bottom: 1px solid var(--mash-gris-200);
    min-height: 56px;       /* alineado con la altura de navbar de Bootstrap */
}

/* Nombre de la marca en el header */
.app-brand {
    color: var(--mash-verde);
}

/* ============================================================
   SECCIÓN 4: BOTONES Y CONTROLES TÁCTILES
   ------------------------------------------------------------
   MASH Check se usa en tablets, por eso todos los elementos
   interactivos deben ser grandes y fáciles de tocar:
     - mín. 44x44 px de área de contacto (estándar accesible)
     - los botones de acción principal tienen min-height: 48px
     - feedback visual al tocar: :active { transform: scale(.97) }
   ============================================================ */
.btn {
    min-height: 44px;       /* área táctil mínima en todos los botones */
    border-radius: 0.5rem;
    transition: transform 0.08s ease;
}

/* Feedback "el botón se hundió" al tocarlo (sensación táctil) */
.btn:active {
    transform: scale(0.97);
}

/* Botones primarios con el verde institucional */
.btn-primary {
    background-color: var(--mash-verde);
    border-color: var(--mash-verde);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--mash-verde-oscuro);
    border-color: var(--mash-verde-oscuro);
}

/* Botón principal de tamaño extendido (para completar planillas) */
.btn-lg {
    min-height: 48px;
}

/* ============================================================
   SECCIÓN 5: CAMPOS DE FORMULARIO
   ------------------------------------------------------------
   Inputs grandes, cómodos de tocar y con foco visible (accesible).
   ============================================================ */
.form-control,
.form-select {
    min-height: 48px;
    border-radius: 0.5rem;
    border-color: var(--mash-gris-200);
}

/* Color del borde cuando el campo tiene el foco (verde institucional) */
.form-control:focus,
.form-select:focus {
    border-color: var(--mash-verde);
    box-shadow: 0 0 0 0.25rem rgba(11, 122, 75, 0.15);
}

/* ============================================================
   SECCIÓN 6: TABS DE BOOTSTRAP (login/registro)
   ------------------------------------------------------------
   Ajustamos las pestañas para que se vean con la identidad de la app.
   ============================================================ */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--mash-verde);
    color: #ffffff;
}

/* ============================================================
   SECCIÓN 7: BADGES DE NO CONFORMIDAD (NC)
   ------------------------------------------------------------
   Son los indicadores rojos que muestran que una planilla o un
   registro tienen fallas. Se usan en planillas.html, completar.html,
   historial.html y dashboard.html.
   ============================================================ */
.badge-nc {
    background-color: var(--mash-rojo);
    color: #ffffff;
    font-weight: 600;
    padding: 0.35em 0.6em;
    border-radius: 0.5rem;
}

.badge-nc-suave {
    background-color: var(--mash-rojo-suave);
    color: var(--mash-rojo);
    font-weight: 600;
}

.badge-ok {
    background-color: var(--mash-verde-suave);
    color: var(--mash-verde);
    font-weight: 600;
}

/* ============================================================
   SECCIÓN 8: TARJETAS (cards)
   ------------------------------------------------------------
   Estilos comunes para las tarjetas del sistema: KPI del dashboard,
   planillas del listado, registros del historial, etc.
   ============================================================ */
.card {
    border: 1px solid var(--mash-gris-200);
    border-radius: 0.75rem;
}

.card-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--mash-gris-200);
    font-weight: 600;
}

/* ============================================================
   SECCIÓN 9: KPIs DEL DASHBOARD
   ------------------------------------------------------------
   Tarjeta grande con un número central y una etiqueta debajo.
   El número se resalta con un color según el tipo de indicador.
   ============================================================ */
.kpi-card {
    border-left: 4px solid var(--mash-verde);   /* acento lateral verde */
    padding: 1rem 1.25rem;
    background-color: #ffffff;
    border-radius: 0.5rem;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kpi-card.kpi-alerta {
    border-left-color: var(--mash-rojo);        /* variante de alerta */
}

.kpi-valor {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mash-gris-900);
}

.kpi-etiqueta {
    color: var(--mash-gris-600);
    font-size: 0.85rem;
}

/* ============================================================
   SECCIÓN 10: TABLA ESTILO PLANILLA
   ------------------------------------------------------------
   El layout de la planilla completada debe parecerse al Excel
   original para que el PDF sea familiar. Usamos una tabla simple
   con bordes y encabezados. Se aplica dentro de completar.html.
   ============================================================ */
.tabla-planilla {
    width: 100%;
    border-collapse: collapse;      /* bordes juntos, sin doble línea */
    background-color: #ffffff;
}

.tabla-planilla th,
.tabla-planilla td {
    border: 1px solid var(--mash-gris-900);
    padding: 0.5rem 0.625rem;
    vertical-align: middle;
    font-size: 0.9rem;
}

.tabla-planilla th {
    background-color: var(--mash-verde);
    color: #ffffff;
    font-weight: 600;
}

/* Filas zebra: cada fila impar con gris muy claro para facilitar la lectura */
.tabla-planilla tbody tr:nth-child(odd) {
    background-color: var(--mash-gris-100);
}

/* ============================================================
   SECCIÓN 11: INDICADOR ONLINE / OFFLINE
   ------------------------------------------------------------
   Globo chico en el header que muestra si hay conexión. Se repinta
   desde pwa.js atendiendo los eventos online/offline del navegador.
   ============================================================ */
.online-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--mash-gris-200);
    display: inline-block;
}

.online-indicator.online {
    background-color: var(--mash-verde);
}

.online-indicator.offline {
    background-color: var(--mash-rojo);
}

/* ============================================================
   SECCIÓN 12: NAVEGACIÓN MÓVIL (offcanvas)
   ------------------------------------------------------------
   En pantallas chicas el menú se esconde detrás del botón hamburguesa
   y se despliega como panel lateral con el componente Offcanvas de
   Bootstrap. Acá ajustamos el fondo de sus enlaces activos.
   ============================================================ */
.offcanvas {
    background-color: var(--mash-verde-suave);
}

/* ============================================================
   SECCIÓN 13: UTILIDADES PROPIAS
   ------------------------------------------------------------
   Pequeñas clases que repetimos en varias páginas.
   ============================================================ */

/* Contenedor que permite scrolleo horizontal en tablas anchas
   (típico en una planilla con muchas columnas en pantalla chica) */
.tabla-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Lista de elementos dentro del constructor/planillas con arrastre */
.lista-arrastrable {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-arrastrable li {
    background-color: #ffffff;
    border: 1px solid var(--mash-gris-200);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    touch-action: none;   /* permite que SortableJS arrastre en táctiles */
}

/* ============================================================
   SECCIÓN 14: ESTILOS DE IMPRESIÓN / PDF
   ------------------------------------------------------------
   Al exportar a PDF, html2canvas "fotografía" el DOM y jsPDF lo
   convierte en página. Para que el resultado sea limpio:
     - ocultamos header, nav y botones (@media print)
     - mostramos solo el área de la planilla/reporte
   ============================================================ */
@media print {
    /* Ocultamos lo que NO debe aparecer en el PDF */
    .app-header,
    .btn,
    .no-print,
    .offcanvas,
    .navbar,
    nav {
        display: none !important;
    }

    /* El contenedor principal ocupa todo el ancho de la hoja */
    body,
    main.container {
        background: #ffffff !important;
        margin: 0;
        padding: 0;
        max-width: none;
        width: 100%;
    }

    /* Evitamos colores de fondo que desperdicien tinta, salvo los
       verdes de los encabezados de la planilla que identifican la marca */
    .tabla-planilla th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ============================================================
   SECCIÓN 15: CONTROLES SEGMENTADOS (SÍ/NO, BIEN/MAL)
   ------------------------------------------------------------
   Botones grandes de dos opciones, ideales para tablets: se toca
   sin precisión. El estado activo se pinta con el color según la
   selección (verde = ok, rojo = NC).
   ============================================================ */
.btn-group-segmentado {
    display: flex;
    width: 100%;
    max-width: 320px;   /* evita que se estire demasiado en pantalla grande */
}

.btn-group-segmentado .btn {
    flex: 1;
    min-height: 48px;   /* área táctil generosa para el operario */
    font-weight: 600;
}

/* Botón SÍ / BIEN activo: fondo verde, texto blanco */
.btn-group-segmentado .btn.btn-outline-success.active {
    background-color: var(--mash-verde);
    color: #ffffff;
    border-color: var(--mash-verde);
}

/* Botón NO / MAL activo: fondo rojo, texto blanco (es una NC) */
.btn-group-segmentado .btn.btn-outline-danger.active {
    background-color: var(--mash-rojo);
    color: #ffffff;
    border-color: var(--mash-rojo);
}

/* ============================================================
   SECCIÓN 16: CHECKBOX Y CELDAS DE TABLA EN COMPLETAR
   ------------------------------------------------------------
   El checkbox de "Realizado" debe ser grande (fácil de tocar) y los
   inputs dentro de la tabla deben limitar su ancho para no romper
   el layout de la planilla.
   ============================================================ */
.control-check {
    width: 1.6rem;
    height: 1.6rem;
    cursor: pointer;
}

/* Inputs/selects dentro de la tabla-planilla más compactos */
.tabla-planilla .form-control,
.tabla-planilla .form-select {
    min-height: 40px;
    max-width: 260px;
}

/* La primera columna (rótulo de fila) con ancho razonable para que
   el texto largo se lea cómodo sin abrumar la tabla */
.tabla-planilla td:first-child {
    min-width: 180px;
}

/* ============================================================
   SECCIÓN 17: FIRMA (signature.js)
   ------------------------------------------------------------
   El area de firma es un canvas con borde punteado que invita a
   dibujar. El botón "Borrar firma" queda debajo, al 100% del ancho
   del canvas.
   ============================================================ */
.firma-contenedor {
    display: flex;
    flex-direction: column;
}

.firma-canvas {
    border: 1px dashed var(--mash-gris-600);
    border-radius: 0.5rem;
    background-color: #ffffff;
    touch-action: none;   /* evita el scroll mientras se dibuja */
    width: 100%;
}

/* ============================================================
   SECCIÓN 18: BARRA DE ACCIONES INFERIOR (completar.html)
   ------------------------------------------------------------
   Barra sticky al fondo para que las acciones principales estén
   siempre visibles en la tablet mientras se completa la planilla.
   ============================================================ */
.sticky-bottom {
    z-index: 1020;   /* por debajo del header (1030) */
}

/* ============================================================
   SECCIÓN 19: TABLA DEL HISTORIAL
   ------------------------------------------------------------
   La tabla del historial usa los estilos de Bootstrap (table-hover)
   pero con filas más aireadas: padding vertical generoso para tocar
   cómodo las acciones en la tablet, y bordes suaves verticales.
   ============================================================ */
.table-planilla-historial th {
    background-color: var(--mash-gris-100);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mash-gris-600);
    border-bottom: 2px solid var(--mash-gris-200);
}

.table-planilla-historial td {
    vertical-align: middle;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* ============================================================
   SECCIÓN 20: ESTADO DE GUARDADO (autosave)
   ------------------------------------------------------------
   Texto pequeño que indica si el autosave está al día ("Guardado
   hh:mm:ss") o pendiente ("Guardando…").
   ============================================================ */
#indicador-guardado span {
    white-space: nowrap;
}

/* ============================================================
   SECCIÓN 21: GRÁFICOS (reportes.html)
   ------------------------------------------------------------
   Chart.js necesita un contenedor con altura definida para no
   colapsar el canvas (mantainAspectRatio: false). Le damos una
   altura cómoda para tablet y desktop.
   ============================================================ */
.grafico-contenedor {
    position: relative;
    height: 300px;      /* altura del lienzo del gráfico */
    width: 100%;
}

@media (min-width: 992px) {
    .grafico-contenedor {
        height: 340px;  /* un poco más alto en pantallas grandes */
    }
}

/* ============================================================
   SECCIÓN 22: CONSTRUCTOR DE PLANILLAS (constructor.html)
   ------------------------------------------------------------
   - .seccion-item: cada sección se ve como un bloque con borde y
     fondo propio para separar visualmente los editores.
   - .sublista: listas anidadas (columnas/filas) dentro de una sección.
   - .grip-arrastre: manija de arrastre visible (SortableJS).
   ============================================================ */
.seccion-item {
    background-color: var(--mash-gris-100);
    border: 1px solid var(--mash-gris-200);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.sublista li {
    margin-bottom: 0.35rem;
}

.grip-arrastre {
    cursor: grab;
    color: var(--mash-gris-600);
    font-size: 1.1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.grip-arrastre:active {
    cursor: grabbing;
}

/* Item del editor (campo/columna/fila) con fondo blanco para
   distinguirse del card en el que está insertado */
#lista-cabecera li,
#lista-pie li,
.seccion-item .sublista li {
    background-color: #ffffff;
    border: 1px solid var(--mash-gris-200);
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
    touch-action: none;   /* habilita arrastre con el dedo */
}