/* ============================================
   APP TÉCNICO - estructura para celular
   Barra superior, navegación inferior, avisos y ajustes táctiles.
   ============================================ */

:root {
    --app-azul: #13406a;
    --app-azul-oscuro: #0d2f50;
    --app-dorado: #d4a72c;
    --app-fondo: #f0f2f5;
    --app-texto: #1a1a2e;
    --app-suave: #6b7a8c;
    --app-borde: #e3e7ee;
    --app-barra: 56px;
    --app-nav: 64px;
    --seguro-arriba: env(safe-area-inset-top, 0px);
    --seguro-abajo: env(safe-area-inset-bottom, 0px);
}

body.app-tecnico {
    background: var(--app-fondo);
    padding-top: calc(var(--app-barra) + var(--seguro-arriba));
    padding-bottom: calc(var(--app-nav) + var(--seguro-abajo) + 12px);
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
}

/* ---------- Barra superior ---------- */
.app-barra {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: calc(var(--app-barra) + var(--seguro-arriba));
    padding: var(--seguro-arriba) 16px 0;
    background: var(--app-azul);
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}

.app-barra .app-logo {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
}

.app-barra .app-titulos { flex: 1; min-width: 0; line-height: 1.2; }
.app-barra .app-titulo { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-barra .app-subtitulo { font-size: 12px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.app-barra .app-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: var(--app-dorado); color: var(--app-azul);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px;
}

/* ---------- Navegación inferior ---------- */
.app-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    height: calc(var(--app-nav) + var(--seguro-abajo));
    padding-bottom: var(--seguro-abajo);
    background: white;
    border-top: 1px solid var(--app-borde);
    display: flex;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}

.app-nav a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: var(--app-suave);
    text-decoration: none;
    font-size: 11px; font-weight: 600;
    position: relative;
}

.app-nav a i { font-size: 20px; }

.app-nav a.activo { color: var(--app-azul); }
.app-nav a.activo::before {
    content: '';
    position: absolute; top: 0; left: 30%; right: 30%;
    height: 3px; border-radius: 0 0 3px 3px;
    background: var(--app-dorado);
}

.app-nav .contador {
    position: absolute; top: 8px; left: calc(50% + 6px);
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: #e74c3c; color: white;
    font-size: 11px; line-height: 18px; text-align: center;
}

/* ---------- Avisos ---------- */
.app-aviso-conexion {
    display: none;
    position: fixed;
    top: calc(var(--app-barra) + var(--seguro-arriba));
    left: 0; right: 0;
    z-index: 999;
    background: #c0392b; color: white;
    padding: 8px 16px;
    font-size: 13px; font-weight: 600; text-align: center;
}
.app-aviso-conexion.visible { display: block; }

/* ---------- Cambios guardados sin señal, por enviar ---------- */
.app-aviso-pendientes {
    display: none;
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(var(--app-nav) + var(--seguro-abajo) + 12px);
    z-index: 997;
    background: #fff7e6; color: #8a5a00;
    border: 1px solid #f3d38a;
    border-radius: 12px;
    padding: 10px 12px;
    align-items: center; gap: 10px;
    font-size: 13px; font-weight: 600;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.app-aviso-pendientes.visible { display: flex; }
.app-aviso-pendientes .texto { flex: 1; }
.app-aviso-pendientes button {
    border: none; border-radius: 8px;
    background: var(--app-azul); color: white;
    padding: 7px 12px; font-size: 12px; font-weight: 700;
}
.app-aviso-pendientes button:disabled { opacity: 0.5; }

/* ---------- Avisos (reemplazan alert) ---------- */
.app-avisos {
    position: fixed;
    top: calc(var(--app-barra) + var(--seguro-arriba) + 10px);
    left: 12px; right: 12px;
    z-index: 100000;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    pointer-events: none;
}
.app-aviso {
    pointer-events: auto;
    max-width: 480px; width: 100%;
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--app-azul); color: white;
    font-size: 14px; font-weight: 600; line-height: 1.35;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    opacity: 0; transform: translateY(-8px);
    transition: opacity 0.25s, transform 0.25s;
}
.app-aviso.visible { opacity: 1; transform: none; }
.app-aviso i { font-size: 17px; margin-top: 1px; }
.app-aviso-exito { background: #1e7d4f; }
.app-aviso-error { background: #b42318; }
.app-aviso-alerta { background: #a86b00; }

/* ---------- Confirmación (reemplaza confirm) ---------- */
.app-dialogo-fondo {
    position: fixed; inset: 0;
    z-index: 100001;
    background: rgba(10, 25, 45, 0.5);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 16px 16px calc(16px + var(--seguro-abajo));
    opacity: 0; transition: opacity 0.2s;
}
.app-dialogo-fondo.visible { opacity: 1; }
.app-dialogo {
    width: 100%; max-width: 420px;
    background: white;
    border-radius: 16px;
    padding: 20px 18px 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    transform: translateY(20px); transition: transform 0.2s;
}
.app-dialogo-fondo.visible .app-dialogo { transform: none; }
.app-dialogo p { color: var(--app-texto); font-size: 15px; line-height: 1.45; margin: 0 0 18px; }
.app-dialogo-botones { display: flex; gap: 10px; }
.app-dialogo-botones button {
    flex: 1;
    border: none; border-radius: 10px;
    padding: 12px; font-size: 15px; font-weight: 700;
}
.app-dialogo-botones .cancelar { background: #eef1f5; color: var(--app-texto); }
.app-dialogo-botones .aceptar { background: var(--app-azul); color: white; }
.app-dialogo-botones .aceptar.peligro { background: #b42318; }
@media (min-width: 600px) {
    .app-dialogo-fondo { align-items: center; }
}

/* Marca de "por enviar" en tarjetas y fotos */
.pendiente-envio {
    display: inline-flex; align-items: center; gap: 4px;
    background: #fff7e6; color: #8a5a00;
    border-radius: 10px; padding: 1px 8px;
    font-size: 11px; font-weight: 700;
}

.app-aviso-instalar {
    display: none;
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(var(--app-nav) + var(--seguro-abajo) + 12px);
    z-index: 998;
    background: var(--app-azul); color: white;
    border-radius: 14px;
    padding: 12px 14px;
    align-items: center; gap: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.app-aviso-instalar.visible { display: flex; }
.app-aviso-instalar img { width: 40px; height: 40px; border-radius: 10px; }
.app-aviso-instalar .texto { flex: 1; font-size: 13px; line-height: 1.3; }
.app-aviso-instalar .texto strong { display: block; font-size: 14px; }
.app-aviso-instalar button {
    border: none; border-radius: 9px; font-weight: 700; font-size: 13px; padding: 9px 14px;
}
.app-aviso-instalar .instalar { background: var(--app-dorado); color: var(--app-azul); }
.app-aviso-instalar .cerrar { background: transparent; color: rgba(255,255,255,0.7); padding: 9px 6px; }

/* ---------- Componentes del inicio ---------- */
.app-contenido { max-width: 560px; margin: 0 auto; padding: 16px; }

.app-saludo { margin: 4px 2px 16px; }
.app-saludo h1 { font-size: 22px; color: var(--app-texto); }
.app-saludo p { color: var(--app-suave); font-size: 14px; margin-top: 2px; }

.app-resumen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.app-resumen a {
    background: white; border-radius: 14px; padding: 14px 10px;
    text-decoration: none; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-top: 4px solid var(--color, var(--app-azul));
}
.app-resumen .numero { font-size: 26px; font-weight: 800; color: var(--app-texto); line-height: 1.1; }
.app-resumen .etiqueta { font-size: 12px; color: var(--app-suave); margin-top: 4px; font-weight: 600; }

.app-seccion-titulo {
    display: flex; justify-content: space-between; align-items: center;
    margin: 6px 2px 10px;
}
.app-seccion-titulo h2 { font-size: 16px; color: var(--app-texto); }
.app-seccion-titulo a { font-size: 13px; font-weight: 600; color: var(--app-azul); text-decoration: none; }

.app-ot {
    background: white; border-radius: 14px; padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-left: 5px solid var(--color, var(--app-azul));
}
.app-ot .fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.app-ot .numero { font-weight: 700; font-size: 14px; color: var(--app-texto); }
.app-ot .cliente { font-size: 16px; font-weight: 700; color: var(--app-texto); margin: 6px 0 2px; }
.app-ot .detalle { font-size: 13px; color: var(--app-suave); display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.app-ot .detalle i { width: 14px; text-align: center; }
.app-ot .prioridad-alta { color: #c0392b; font-weight: 700; }

.app-estado {
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 12px;
    text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap;
}
.app-estado.asignada { background: #e3eefc; color: #1d4f91; }
.app-estado.en_proceso { background: #fff3cd; color: #856404; }
.app-estado.terminada { background: #d4edda; color: #155724; }

.app-boton {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 48px; margin-top: 12px;
    border: none; border-radius: 12px;
    font-size: 15px; font-weight: 700; text-decoration: none;
    color: white; background: var(--app-azul);
}
.app-boton.iniciar { background: #27ae60; }
.app-boton.completar { background: #e67e22; }
.app-boton:active { filter: brightness(0.92); }

.app-vacio {
    text-align: center; padding: 36px 16px; color: var(--app-suave);
    background: white; border-radius: 14px;
}
.app-vacio i { font-size: 40px; color: #2ecc71; display: block; margin-bottom: 10px; }
.app-vacio strong { color: var(--app-texto); display: block; font-size: 16px; margin-bottom: 4px; }

/* ============================================
   AJUSTES TÁCTILES PARA ordenes_tecnico.php
   ============================================ */
body.app-tecnico .container { max-width: 560px; padding: 12px 14px; }

/* Filtros fijos bajo la barra superior al hacer scroll */
body.app-tecnico .filter-tabs {
    position: sticky;
    top: calc(var(--app-barra) + var(--seguro-arriba));
    z-index: 50;
    background: var(--app-fondo);
    margin: -12px -14px 12px;
    padding: 10px 14px;
    scrollbar-width: none;
}
body.app-tecnico .filter-tabs::-webkit-scrollbar { display: none; }
body.app-tecnico .filter-tabs button { min-height: 38px; font-size: 13px; flex: 0 0 auto; }
body.app-tecnico .filter-tabs button.active { background: var(--app-azul); }

body.app-tecnico .orden-card { border-radius: 14px; border-left-width: 5px; }
body.app-tecnico .orden-card .cliente { font-size: 16px; }
body.app-tecnico .orden-card .acciones { width: 100%; }
body.app-tecnico .orden-card .acciones button {
    flex: 1; min-height: 44px; justify-content: center; font-size: 14px; border-radius: 10px;
}

@media (max-width: 768px) {
    /* Las fichas de la OT ocupan toda la pantalla, como una app */
    body.app-tecnico .modal { background: white; }
    body.app-tecnico .modal-content {
        margin: 0; width: 100%; max-width: none;
        min-height: 100%; max-height: none; height: 100%;
        border-radius: 0; box-shadow: none;
        display: flex; flex-direction: column;
        animation: none;
    }
    body.app-tecnico .modal-header {
        border-radius: 0;
        padding: calc(12px + var(--seguro-arriba)) 16px 12px;
        background: var(--app-azul);
        color: white;
    }
    body.app-tecnico .modal-header h2,
    body.app-tecnico .modal-header h2 i { color: white; font-size: 17px; }
    body.app-tecnico .modal-header .close {
        color: white; font-size: 30px; line-height: 1; padding: 4px 8px; margin: -4px -8px;
    }
    body.app-tecnico .modal-body { flex: 1; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
    body.app-tecnico .modal-footer {
        border-radius: 0;
        padding: 10px 14px calc(10px + var(--seguro-abajo));
        box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
        flex-wrap: nowrap;
    }
    body.app-tecnico .modal-footer .btn {
        flex: 1; min-height: 50px; font-size: 15px; width: auto !important;
    }
}

/* Campos cómodos para el dedo; 16px evita que el teléfono haga zoom al escribir */
body.app-tecnico .form-group input,
body.app-tecnico .form-group select,
body.app-tecnico .form-group textarea,
body.app-tecnico .section-box .form-row input,
body.app-tecnico .section-box .form-row-3 input,
body.app-tecnico .section-box .form-row select,
body.app-tecnico .section-box .form-row-3 select,
body.app-tecnico .checklist-item .item-text,
body.app-tecnico .checklist-item .item-observacion,
body.app-tecnico #nombrePlantilla {
    font-size: 16px;
    min-height: 44px;
}
body.app-tecnico .form-group textarea { min-height: 88px; }

body.app-tecnico .section-box { border-radius: 12px; padding: 14px; }
body.app-tecnico .section-box h4 { font-size: 15px; }
body.app-tecnico .section-box .form-row .form-group label,
body.app-tecnico .section-box .form-row-3 .form-group label { font-size: 12px; }

body.app-tecnico .checklist-item { padding: 8px 0; align-items: center; }
body.app-tecnico .checklist-item input[type="checkbox"] { width: 26px; height: 26px; margin-top: 0; }
body.app-tecnico .checklist-item .btn-remove-item { font-size: 18px; padding: 10px; }
body.app-tecnico .btn-add-item { min-height: 48px; font-size: 15px; }
body.app-tecnico .btn-copy-checklist,
body.app-tecnico .btn-save-template,
body.app-tecnico .btn-edit-data { min-height: 36px; font-size: 13px; padding: 6px 12px; }

body.app-tecnico .upload-buttons button { min-height: 80px; font-size: 14px; }
body.app-tecnico .galeria-item .remove-btn { width: 32px; height: 32px; font-size: 14px; }
body.app-tecnico .template-list-item { padding: 14px 10px; }

/* Ocultar la barra de escritorio antigua si alguna página la mantiene */
body.app-tecnico > nav.navbar { display: none; }