/* OpenBOQ — hoja de estilo
   Rejilla densa de trabajo, con tipografía y espaciado modernos. */

:root{
  --rojo:#c00000;
  --rojo-osc:#8c0000;
  --gris-barra:#d8d4cc;
  --gris-borde:#a9a49b;
  --gris-fondo:#eceae5;
  --azul:#1a4b8c;
  --azul-claro:#dce6f4;
  --verde:#137333;
  --texto:#1b1b1b;
  --amarillo:#fff3bf;
  --fila-alt:#f6f5f2;
  --sel:#ffe9a8;
}
*{box-sizing:border-box}
html,body{height:100%}
/* en el celular la barra del navegador aparece y desaparece: dvh sigue esa
   altura real, así la barra de estado no queda tapada */
@supports (height:100dvh){html,body{height:100dvh}}
body{
  margin:0;font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-size:13px;color:var(--texto);
  background:var(--gris-fondo);display:flex;flex-direction:column;overflow:hidden;
  -webkit-text-size-adjust:100%;
}
button{font-family:inherit;font-size:12px;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:12px;color:var(--texto)}
input[type=text],input[type=number],select,textarea{
  border:1px solid var(--gris-borde);background:#fff;padding:2px 4px;border-radius:2px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azul);outline-offset:-1px}
/* sin flechitas de incremento: los números se escriben con el teclado
   (en el celular sigue apareciendo el teclado numérico) */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}

/* ---------- barra de menú ---------- */
.menubar{display:flex;align-items:stretch;background:var(--gris-barra);
  border-bottom:1px solid var(--gris-borde);user-select:none;position:relative;z-index:60}
.menubar .m{padding:5px 11px;font-size:12px;letter-spacing:.4px}
.menubar .m:hover,.menubar .m.abierto{background:var(--azul);color:#fff;cursor:default}
.menubar .marca{margin-left:auto;display:flex;align-items:center;gap:8px;padding:0 12px;
  font-weight:700;color:var(--rojo);letter-spacing:1px}
.menubar .marca small{font-weight:400;color:#555;letter-spacing:0}
.menu-pop{position:absolute;top:100%;background:#fff;border:1px solid var(--gris-borde);
  box-shadow:2px 3px 8px rgba(0,0,0,.25);min-width:250px;padding:3px 0;z-index:100}
.menu-pop div{padding:5px 16px;font-size:12px;display:flex;justify-content:space-between;gap:20px}
.menu-pop div:hover{background:var(--azul);color:#fff}
.menu-pop div.sep{padding:0;margin:3px 0;border-top:1px solid #ddd;pointer-events:none}
.menu-pop kbd{color:#888;font-size:11px}
.menu-pop div:hover kbd{color:#dbe6f5}

/* ---------- campos de las barras ----------
   La barra de botones de acceso rápido se quitó: todo está en los menús de
   arriba y en la barra propia de cada pestaña. */
.campo{display:flex;align-items:center;gap:4px}
.campo label{font-size:11px;color:#444}

.cabecera{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:5px 8px;
  background:#e7e4dd;border-bottom:1px solid var(--gris-borde)}
.cabecera .titulo-proy{font-weight:700;color:var(--rojo);min-width:190px}
/* empuja a la derecha lo que venga después (precisión, moneda, tipo de cambio) */
.cabecera .empuja{margin-left:auto}
.pill{background:var(--azul);color:#fff;padding:2px 8px;border-radius:9px;font-size:11px}

/* ---------- pestañas de vista ---------- */
.tabs{display:flex;background:var(--rojo);padding:0 6px;gap:2px}
.tabs button{background:var(--rojo-osc);color:#fff;border:0;padding:7px 16px;font-size:12px;
  letter-spacing:.5px;border-radius:4px 4px 0 0}
.tabs button.on{background:#fff;color:var(--rojo);font-weight:700}
.tabs .cuenta{margin-left:auto;color:#ffd9d9;font-size:11px;display:flex;align-items:center;padding-right:8px}

/* ---------- área principal ---------- */
main{flex:1;overflow:auto;background:#fff}
.vista{display:none;height:100%}
.vista.on{display:flex;flex-direction:column}
.panel{padding:10px 12px}
.split{display:flex;height:100%;min-height:0}
.split>.izq{width:400px;min-width:260px;border-right:1px solid var(--gris-borde);
  display:flex;flex-direction:column;min-height:0}
.split>.der{flex:1;display:flex;flex-direction:column;min-height:0;overflow:auto}
.scroll{overflow:auto;flex:1;min-height:0}

/* ---------- tablas ---------- */
table.rej{border-collapse:collapse;width:100%;font-size:12px}
table.rej th{background:var(--rojo);color:#fff;font-weight:600;padding:5px 6px;
  position:sticky;top:0;z-index:5;text-align:center;white-space:nowrap;border:1px solid var(--rojo-osc)}
/* unidad al lado del título de la columna, más chica y sin negrita */
table.rej th .und{font-weight:400;opacity:.85}
table.rej td{border:1px solid #d5d2cb;padding:3px 6px;vertical-align:middle}
table.rej tbody tr:nth-child(even){background:var(--fila-alt)}
table.rej tbody tr:hover{background:var(--azul-claro)}
table.rej tbody tr.sel{background:var(--sel)!important}
table.rej td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.rej td.ctr{text-align:center}
table.rej tfoot td{background:#efece5;font-weight:700;border:1px solid var(--gris-borde)}
table.rej td input{width:100%;border:1px solid transparent;background:transparent;
  text-align:right;padding:1px 3px;font-variant-numeric:tabular-nums}
table.rej td input:hover{border-color:var(--gris-borde);background:#fff}
table.rej td input.txt{text-align:left}
table.rej .grupo td{background:#3d3d3d;color:#fff;font-weight:700;letter-spacing:.5px}
.mini{font-size:11px;color:#666}
.badge{display:inline-block;font-size:10px;padding:1px 6px;border-radius:8px;background:#e3e8f0;color:#33507a}
.badge.M{background:#e6f0ff;color:#1a4b8c}
.badge.O{background:#e9f7ec;color:#137333}
.badge.E{background:#fdecea;color:#a1281c}
.b-del{color:#a1281c;background:none;border:0;font-weight:700;padding:0 4px}
.vacio{padding:40px;text-align:center;color:#888}

/* ---------- módulos ---------- */
.modulos{display:flex;align-items:center;gap:3px;background:var(--gris-barra);
  border-top:1px solid var(--gris-borde);padding:3px 6px}
.modulos .mtab{background:#fff;border:1px solid var(--gris-borde);border-bottom:0;
  padding:4px 12px;font-size:12px;border-radius:4px 4px 0 0;cursor:pointer}
.modulos .mtab.on{background:var(--amarillo);font-weight:700;color:var(--rojo)}

/* ---------- barra de estado ---------- */
.estado{display:flex;align-items:center;gap:14px;padding:4px 10px;background:var(--gris-barra);
  border-top:1px solid var(--gris-borde);font-size:11.5px;flex-wrap:wrap}
.estado b{font-variant-numeric:tabular-nums}
.estado .total{margin-left:auto;font-size:14px;color:var(--rojo);font-weight:700}
/* confirmar o descartar los cambios en prueba sin salir de la pestaña */
.acc-ensayo{display:flex;align-items:center;gap:6px}
.acc-ensayo .btn{padding:3px 9px;font-size:11px}

/* punto de color del estado de la conexión: solo informa, no bloquea nada */
#stAcceso{font-size:15px;line-height:1;letter-spacing:0}
.btn:disabled,button:disabled{opacity:.4;cursor:not-allowed}

/* ---------- formulario B-2 ---------- */
.b2{max-width:1080px;margin:0 auto;padding:14px}
.b2 .encab{border:2px solid var(--rojo);padding:8px 10px;margin-bottom:10px;background:#fffdfa}
.b2 .encab h2{margin:0 0 6px;font-size:15px;color:var(--rojo);text-transform:uppercase}
.b2 .encab .rej-datos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 14px;font-size:12px}
.b2 .encab .rej-datos label{display:block;color:#666;font-size:11px}
.b2 h3{margin:14px 0 4px;font-size:13px;background:#3d3d3d;color:#fff;padding:4px 8px}
.res{margin-top:14px;border:1px solid var(--gris-borde)}
.res .fila{display:flex;justify-content:space-between;padding:4px 10px;border-bottom:1px solid #e5e2db}
.res .fila:last-child{border-bottom:0}
.res .fila.sub{background:#efece5;font-weight:700}
.res .fila.tot{background:var(--rojo);color:#fff;font-weight:700;font-size:15px}
.res .fila input{width:70px;text-align:right}
.res .val{font-variant-numeric:tabular-nums}

/* ---------- utilidades ---------- */
.bar{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#f3f1ec;
  border-bottom:1px solid var(--gris-borde);flex-wrap:wrap}
.bar input[type=search]{flex:1;min-width:160px;padding:4px 8px;border:1px solid var(--gris-borde);border-radius:3px}
.btn{background:var(--azul);color:#fff;border:0;padding:5px 12px;border-radius:3px}
.btn:hover{background:#123a6d}
.btn.sec{background:#fff;color:var(--azul);border:1px solid var(--azul)}
.btn.sec:hover{background:var(--azul-claro)}
.btn.rojo{background:var(--rojo)}
.btn.rojo:hover{background:var(--rojo-osc)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.lista{list-style:none;margin:0;padding:0}
.lista li{padding:5px 9px;border-bottom:1px solid #eceae5;cursor:pointer;font-size:12px}
.lista li:hover{background:var(--azul-claro)}
.lista li.sel{background:var(--sel)}
.lista li .cod{color:#888;font-size:11px;margin-right:6px}
.lista li .pu{float:right;font-variant-numeric:tabular-nums;color:var(--rojo);font-weight:600}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;
  align-items:center;justify-content:center;z-index:200}
.overlay.on{display:flex}
.modal{background:#fff;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.4);
  min-width:380px;max-width:92vw;max-height:88vh;display:flex;flex-direction:column}
.modal h3{margin:0;background:var(--rojo);color:#fff;padding:8px 12px;font-size:13px;border-radius:4px 4px 0 0}
.modal .cuerpo{padding:12px;overflow:auto}
.modal .pie{padding:9px 12px;border-top:1px solid var(--gris-borde);display:flex;gap:8px;justify-content:flex-end}
.form-g{display:grid;grid-template-columns:150px 1fr;gap:7px 10px;align-items:center}
.form-g label{font-size:12px;color:#444}
.form-g input,.form-g select,.form-g textarea{width:100%}

/* ---------- gantt / curva S ---------- */
.gantt{width:100%;border-collapse:collapse;font-size:11px}
.gantt th{background:var(--rojo);color:#fff;padding:3px;border:1px solid var(--rojo-osc);font-weight:600}
.gantt td{border:1px solid #ddd;padding:2px 4px;height:20px}
.gantt td.celda,table.rej td.celda{padding:0 2px}
/* cronograma: columnas angostas sin partir palabras y el Gantt con su propio ancho */
table.rej.crono td.ctr,table.rej.crono td.num{white-space:nowrap}
table.rej.crono td.celda{min-width:460px}
/* N°, EDT y ACTIVIDAD quedan fijas al desplazarse a lo ancho, como en MS Project */
table.rej.crono tbody tr{background:#fff}
table.rej.crono tbody tr:nth-child(even){background:var(--fila-alt)}
table.rej.crono tbody tr:hover{background:var(--azul-claro)}
table.rej.crono th:nth-child(-n+3),table.rej.crono td:nth-child(-n+3){position:sticky}
table.rej.crono td:nth-child(-n+3){background:inherit;z-index:2}
table.rej.crono th:nth-child(-n+3){z-index:7}
table.rej.crono th:nth-child(1),table.rej.crono td:nth-child(1){left:0}
table.rej.crono th:nth-child(2),table.rej.crono td:nth-child(2){left:32px}
table.rej.crono th:nth-child(3),table.rej.crono td:nth-child(3){left:76px}
table.rej.crono th:nth-child(3),table.rej.crono td:nth-child(3){border-right:2px solid #b9b5ac}
table.rej.crono .grupo td:nth-child(-n+3){background:#3d3d3d}
/* segunda fila del encabezado: una casilla por semana calendario */
table.rej.crono thead tr.sem th{top:25px;font-size:10px;font-weight:400;padding:2px 0}
/* pie del cronograma (nota + curva S) con su propio scroll, para que la barra
   horizontal de la tabla no quede fuera de la pantalla */
.pie-crono{max-height:45%;overflow:auto;padding:6px 12px;border-top:2px solid var(--gris-borde);
  background:#faf9f7;flex-shrink:0}
.pie-crono summary{cursor:pointer;padding:2px 0}
/* subpestañas dentro de una vista (cronograma: programación / recursos) */
.subtabs{display:flex;gap:2px;background:#e7e4dd;border-bottom:1px solid var(--gris-borde);padding:3px 8px 0}
.subtabs button{background:#d8d4cc;color:#444;border:1px solid var(--gris-borde);border-bottom:0;
  padding:4px 14px;font-size:11px;letter-spacing:.5px;border-radius:4px 4px 0 0}
.subtabs button.on{background:#fff;color:var(--rojo);font-weight:700}
.sub{display:none;flex:1;min-height:0}
.sub.on{display:flex;flex-direction:column;min-height:0}
.gantt .barra,table.rej .barra{background:var(--azul);height:13px;border-radius:2px}
#curvaS{width:100%;height:260px;background:#fff;border:1px solid var(--gris-borde)}

@media print{
  .menubar,.cabecera,.tabs,.subtabs,.modulos,.estado,.bar{display:none!important}
  body{overflow:visible}
}

/* =======================================================================
   PANTALLAS CHICAS — tablet y celular (Chrome, Samsung Internet, Safari)

   Las rejillas de trabajo son anchas por naturaleza: en vez de apretarlas
   hasta que no se lean, se les deja un ancho mínimo y se desplazan a lo
   ancho dentro de su contenedor. Las barras que no entran (menú, pestañas)
   también se desplazan, para que ninguna opción quede fuera de la pantalla.
   ======================================================================= */
@media (max-width:1000px){
  /* barras que no entran a lo ancho: se desplazan en vez de recortarse */
  .menubar,.tabs,.subtabs,.modulos{overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .menubar>*,.tabs button,.subtabs button,.modulos .mtab{flex:0 0 auto}
  .tabs .cuenta{display:none}
  .menu-pop{max-width:94vw}

  /* la Base de Datos pasa de dos columnas a dos filas */
  .split{flex-direction:column}
  .split>.izq{width:100%;min-width:0;height:44%;min-height:180px;
    border-right:0;border-bottom:2px solid var(--gris-borde)}
  .split>.der{flex:1;min-height:0}

  /* rejillas: ancho mínimo y desplazamiento horizontal */
  .scroll{overflow:auto;-webkit-overflow-scrolling:touch}
  #tblPresupuesto{min-width:1000px}
  #tblInsumos{min-width:900px}
  .b2{padding:8px}
  .b2 table.rej{min-width:660px}
  .b2 .encab .rej-datos{grid-template-columns:repeat(2,1fr)}
  #cuerpoComputos table.rej{min-width:900px}
  #cuerpoIncidencias table.rej{min-width:560px}
  /* el B-2 y las tablas de las pestañas necesitan su propia barra horizontal */
  #cuerpoB2,#cuerpoComputos,#cuerpoIncidencias,#cuerpoRecursos{overflow-x:auto}

  /* los anchos mínimos escritos en el HTML no entran en una pantalla angosta */
  #selItemAnalisis,#selItemComputo{min-width:0!important;width:100%;flex:1 1 100%}
  #selBase,#selModulo,#selBaseFiltro{min-width:0!important;max-width:100%}
  .bar input[type=search]{min-width:120px}
  /* tablas dentro de los diálogos: se desplazan en vez de apretarse */
  .modal table.rej{min-width:520px}
  .modal .cuerpo>div[style*="overflow"]{overflow:auto}
}

@media (max-width:640px){
  body{font-size:14px}
  button,.btn{font-size:13px}
  /* objetivos de toque más grandes */
  .menubar .m{padding:9px 12px}
  .tabs button{padding:9px 14px}
  /* en pantalla angosta las columnas fijas del cronograma se superponen */
  table.rej.crono th:nth-child(-n+3),table.rej.crono td:nth-child(-n+3){position:static}
  .btn{padding:7px 12px}
  table.rej td{padding:6px}
  table.rej td input{padding:4px}
  .b-del{padding:4px 8px;font-size:15px}

  /* la cabecera: el nombre del proyecto arriba y el resto en una sola línea que
     se desplaza; apilada se comía un cuarto de la pantalla del celular */
  .cabecera{gap:4px 8px;padding:4px 8px}
  .cabecera .titulo-proy{min-width:0;width:100%;font-size:12px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cabecera .campo{flex-wrap:wrap;min-width:0}
  .cabecera select{max-width:50vw}
  .cabecera .empuja{display:none}
  /* el recuento de la Base de Datos ya se lee en su selector */
  .cabecera .pill{display:none}
  /* moneda, tipo de cambio y decimales pasan a CONFIGURACIÓN en pantalla angosta */
  .solo-ancho{display:none!important}
  /* agregar, renombrar y eliminar módulo están en el menú EDICIÓN */
  .cabecera .campo .btn{display:none}

  /* diálogos: sin ancho mínimo fijo, que en 360 px se salía de pantalla */
  .modal{min-width:0;width:96vw;max-width:96vw;max-height:92vh}
  .modal .cuerpo{padding:10px}
  .modal .pie{flex-wrap:wrap}
  .form-g{grid-template-columns:1fr;gap:3px}
  .form-g label{margin-top:5px}
  /* las columnas del selector de reportes se vuelven una sola */
  #modalCuerpo div[style*="columns:2"]{columns:1!important}

  /* barra de estado: el total baja a su propia línea */
  .estado{gap:8px;padding:5px 8px}
  .estado .total{margin-left:0;width:100%;text-align:right}
  .acc-ensayo{width:100%;justify-content:flex-end}

  /* el pie del cronograma no se come la pantalla */
  .pie-crono{max-height:35%}
  .split>.izq{height:40%}
}