:root {
    --azul: #1f3a5f;
    --azul-2: #2c5282;
    --naranja: #e8772e;
    --fondo: #f3f5f8;
    --borde: #e3e7ee;
}

body { background: var(--fondo); font-size: .925rem; color: #25303d; }

/* Títulos de los campos en azul (formularios, filtros, login, modales) */
.form-label, .table.tabla-items > thead > tr > th { color: var(--azul-2); font-weight: 600; }
.form-label .text-danger { font-weight: 600; }

.app-nav { background: linear-gradient(90deg, var(--azul), var(--azul-2)); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.brand-mark { background: var(--naranja); width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.avatar { background: var(--naranja); color: #fff; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.notif-count { position: absolute; top: 2px; right: -2px; font-size: .65rem; }
.notif-menu { width: 360px; max-width: 92vw; }
.notif-lista { max-height: 420px; overflow-y: auto; }
.notif-item { display: block; padding: .6rem 1rem; border-bottom: 1px solid var(--borde); color: inherit; text-decoration: none; }
.notif-item:hover { background: #f6f8fb; }
.notif-item.no-leida { background: #fff8f1; border-left: 3px solid var(--naranja); }
.notif-item .t { font-weight: 600; font-size: .85rem; }
.notif-item .m { font-size: .8rem; color: #5b6573; }
.notif-item .f { font-size: .72rem; color: #98a1ad; }

.card { border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: #fff; border-bottom: 1px solid var(--borde); font-weight: 600; border-radius: 12px 12px 0 0 !important; }
.page-title { font-size: 1.35rem; font-weight: 700; color: var(--azul); margin: 0; }
.btn-naranja { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.btn-naranja:hover { background: #d0661f; border-color: #d0661f; color: #fff; }

/* KPIs */
.kpi { border-radius: 12px; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--borde); text-decoration: none; color: inherit; display: block; transition: transform .1s, box-shadow .1s; }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16,24,40,.08); color: inherit; }
.kpi .n { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.kpi .l { color: #6b7684; font-size: .82rem; }
.kpi i { font-size: 1.6rem; opacity: .85; }

/* Módulos inicio */
.modulo { border-radius: 14px; padding: 1.5rem; background: #fff; border: 1px solid var(--borde); display: block; text-decoration: none; color: inherit; height: 100%; }
.modulo:hover { box-shadow: 0 8px 24px rgba(16,24,40,.1); color: inherit; }
.modulo .ico { width: 54px; height: 54px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; }
.modulo.off { opacity: .6; pointer-events: none; }

/* Estados */
.badge.estado { font-weight: 600; padding: .38em .65em; }
.estado-secondary { background: #8a94a3; }
.estado-warning { background: #f0ad1d; color: #3b2a00; }
.estado-orange { background: #f07b2e; }
.estado-primary { background: #2f6fd6; }
.estado-danger { background: #d64545; }
.estado-info { background: #17a2b8; }
.estado-teal { background: #1d9a8a; }
.estado-success { background: #2e9e4f; }
.estado-dark { background: #4a4f57; }
.badge.prio { font-weight: 600; }
.prio-baja { background: #e7edf4; color: #4b5b70; }
.prio-media { background: #dbe9ff; color: #1d4f9c; }
.prio-alta { background: #ffe3cc; color: #a24a07; }
.prio-urgente { background: #d64545; color: #fff; }

/* Tablas */
.table-ss th { font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; color: #6b7684; background: #f8f9fb; white-space: nowrap; }
.table-ss td { vertical-align: middle; }
.table-ss tbody tr { cursor: pointer; }
.vencida { color: #d64545; font-weight: 600; }

/* Ítems editables: columnas de ancho fijo; Descripción ocupa el resto del espacio */
.tabla-items input, .tabla-items select { font-size: .85rem; }
.tabla-items td { vertical-align: top; }
@media (min-width: 768px) {
    .tabla-items { table-layout: fixed; min-width: 1060px; }   /* en pantallas más angostas aparece el scroll de la tabla */
    .tabla-items .c-num    { width: 36px; }
    .tabla-items .c-tipo   { width: 125px; }
    .tabla-items .c-rubro  { width: 235px; }
    .tabla-items .c-unidad { width: 95px; }
    .tabla-items .c-cant   { width: 135px; }
    .tabla-items .c-precio { width: 165px; }
    .tabla-items .c-quitar { width: 44px; }
    .tabla-items td [data-f="cantidad"], .tabla-items td [data-f="precio_estimado"] { text-align: right; }
}

/* Formulario de solicitud con pestañas */
.card-pestanas .card-header-tabs .nav-link { font-weight: 600; color: #5b6573; }
.card-pestanas .card-header-tabs .nav-link.active { color: var(--azul); border-bottom-color: #fff; }
.seccion-titulo { font-weight: 600; color: var(--azul); margin-bottom: .75rem; }
.seccion-barra { padding: .6rem 1rem; background: #f8f9fb; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.btn-outline-ia { color: #6f42c1; border-color: #b9a4e6; }
.btn-outline-ia:hover, .btn-outline-ia[aria-expanded="true"] { background: #6f42c1; border-color: #6f42c1; color: #fff; }
.dropzone-grande { padding: 2.5rem 1rem; }
.barra-acciones {
    position: sticky; bottom: 0; z-index: 1020; margin-top: 1rem;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .75rem 1rem; background: rgba(255,255,255,.96); border: 1px solid var(--borde); border-radius: 12px;
    box-shadow: 0 -4px 16px rgba(16,24,40,.08); backdrop-filter: blur(4px);
}
@media (min-width: 768px) { .nav-fill-md-0 .nav-item { flex: 0 0 auto; } }

/* Buscador de obra (Tom Select) */
.ts-wrapper.form-select .ts-control, .ts-wrapper .ts-control { min-height: 38px; }
.ts-dropdown .option { padding: .45rem .75rem; border-bottom: 1px solid #f0f2f5; }
.ts-dropdown .active { background: #eef4ff; color: inherit; }
.ts-dropdown-content { max-height: 320px; }

.sugerencias { position: fixed; z-index: 1060; max-height: 260px; overflow-y: auto; min-width: 280px; }

/* Dropzone */
.dropzone { border: 2px dashed #b8c2d0; border-radius: 12px; padding: 1.4rem; text-align: center; background: #fafbfd; cursor: pointer; transition: all .15s; }
.dropzone.over { border-color: var(--naranja); background: #fff6ee; }
.adj-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border: 1px solid var(--borde); border-radius: 8px; background: #fff; margin-bottom: .4rem; }
.adj-item .nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline:before { content: ''; position: absolute; left: 13px; top: 4px; bottom: 4px; width: 2px; background: var(--borde); }
.timeline li { position: relative; padding-left: 38px; padding-bottom: 1rem; }
.timeline .dot { position: absolute; left: 4px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--azul-2); display: flex; align-items: center; justify-content: center; font-size: .65rem; color: var(--azul-2); }
.timeline .com { background: #f6f8fb; border-radius: 8px; padding: .5rem .7rem; margin-top: .25rem; white-space: pre-wrap; }

/* IA */
.ia-box { border: 1px solid #d9d2ff; background: linear-gradient(180deg, #faf8ff, #fff); border-radius: 12px; }
.ia-tag { background: #6f42c1; color: #fff; border-radius: 6px; padding: .1rem .45rem; font-size: .72rem; font-weight: 600; }

/* Login */
.login-bg { min-height: 100vh; background: linear-gradient(135deg, var(--azul) 0%, var(--azul-2) 60%, #3d6aa8 100%); }
.login-card { max-width: 400px; border-radius: 16px; }
.login-logo { width: 220px; max-width: 75%; height: auto; }
.nav-logo { height: 30px; width: auto; }
.app-nav .navbar-brand .border-start { border-color: rgba(255,255,255,.35) !important; font-size: .95rem; }

.stepper { display: flex; gap: .3rem; flex-wrap: wrap; }
.stepper .s { flex: 1; min-width: 90px; text-align: center; font-size: .75rem; padding: .45rem .3rem; border-radius: 6px; background: #eef1f5; color: #8a94a3; font-weight: 600; }
.stepper .s.ok { background: #d9f2e1; color: #1f7a3c; }
.stepper .s.act { background: var(--azul-2); color: #fff; }
.stepper .s.bad { background: #fbdcdc; color: #b02a2a; }

@media (max-width: 576px) {
    .page-title { font-size: 1.15rem; }
}

/* =================================================================
   Celular: las tablas .tabla-movil se muestran como tarjetas.
   app.js copia el título de cada columna en data-label de cada celda.
     .mv-titulo   celda que encabeza la tarjeta (sin etiqueta, destacada)
     .mv-acciones botones, a todo el ancho al pie de la tarjeta
     .mv-check    casilla de selección, arriba a la derecha
     .mv-ocultar  no se muestra en el celular
   .tabla-movil-form: etiqueta arriba del campo (para formularios)
   ================================================================= */
@media (max-width: 767.98px) {
    .table-responsive:has(> .tabla-movil) { overflow: visible; }
    .tabla-movil thead, .tabla-movil tfoot tr td:empty { display: none; }
    .tabla-movil, .tabla-movil tbody, .tabla-movil tr, .tabla-movil td { display: block; width: auto; }
    .tabla-movil tbody tr {
        display: flex; flex-direction: column;     /* permite poner el título arriba y las acciones abajo */
        position: relative; margin: .6rem .5rem; padding: .6rem .8rem;
        background: #fff; border: 1px solid var(--borde); border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16,24,40,.04);
    }
    .tabla-movil tbody tr.table-light { background: #f8f9fb; }
    .tabla-movil td {
        position: relative; border: 0 !important; padding: .22rem 0 .22rem 40% !important;
        text-align: left !important; white-space: normal !important; min-height: 1.6rem; font-size: .9rem;
    }
    .tabla-movil td[data-label]::before {
        content: attr(data-label); position: absolute; left: 0; top: .28rem; width: 37%;
        font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: #6b7684;
        line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;   /* etiqueta en una línea */
    }
    .tabla-movil td:empty, .tabla-movil td.mv-ocultar { display: none; }
    .tabla-movil td.mv-titulo { order: -1; padding: 0 2rem .35rem 0 !important; font-size: 1rem; font-weight: 600; }
    .tabla-movil td.mv-acciones { order: 99; }
    .tabla-movil td.mv-titulo::before { display: none; }
    .tabla-movil td.mv-acciones { padding: .5rem 0 0 !important; margin-top: .35rem; border-top: 1px solid var(--borde) !important; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
    .tabla-movil td.mv-acciones::before { display: none; }
    .tabla-movil td.mv-acciones .btn { padding: .4rem .7rem; }
    .tabla-movil td.mv-check { position: absolute; top: .55rem; right: .7rem; padding: 0 !important; min-height: 0; z-index: 1; }
    .tabla-movil td.mv-check::before { display: none; }
    .tabla-movil td.mv-check .form-check-input { width: 1.4rem; height: 1.4rem; }
    .tabla-movil tfoot { display: block; }
    .tabla-movil tfoot tr { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem .8rem; }
    .tabla-movil tfoot td { padding: 0 !important; }
    .tabla-movil tfoot td::before { display: none; }

    /* Formularios en tarjeta: etiqueta arriba */
    .tabla-movil-form td { padding: .3rem 0 !important; }
    .tabla-movil-form td[data-label]::before { position: static; display: block; width: auto; margin-bottom: .15rem; color: var(--azul-2); }
    .tabla-movil-form td.renglon { position: absolute; top: .5rem; right: 2.6rem; padding: 0 !important; min-height: 0; font-weight: 600; }
    .tabla-movil-form td.renglon::before { content: 'Ítem'; display: inline; position: static; margin-right: .25rem; }
    .tabla-movil-form td:last-child { position: absolute; top: .2rem; right: .2rem; padding: 0 !important; min-height: 0; }
    .tabla-movil-form td:last-child::before { display: none; }
    .tabla-movil-form .form-control, .tabla-movil-form .form-select { font-size: 1rem; }  /* evita el zoom automático en iPhone */

    /* Otros ajustes de pantalla chica */
    main.container-fluid { padding-left: .6rem !important; padding-right: .6rem !important; }
    .card-header { flex-wrap: wrap; gap: .4rem; }
    .stepper .s { min-width: 30%; }
    .kpi .n { font-size: 1.5rem; }
    .notif-menu { width: 100vw; }
    .form-control, .form-select { font-size: 16px; }   /* iPhone no hace zoom al tocar un campo */
}

@media print {
    .app-nav, .d-print-none, .toast-container { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; break-inside: avoid; }
    .col-xl-8 { width: 100% !important; }
}