/* Estilo inspirado en el portal de Azure: barra superior azul, menú lateral, pestañas y paneles. */
:root {
  --azul: #0078d4; --azul-osc: #106ebe; --fondo: #f3f2f1; --panel: #fff; --borde: #e1dfdd; --texto: #201f1e;
  --suave: #605e5c; --rojo: #d13438; --amarillo: #f7a600; --verde: #107c10; --seleccion: #eff6fc;
}
@media (prefers-color-scheme: dark) {
  :root { --fondo: #1b1a19; --panel: #292827; --borde: #3b3a39; --texto: #f3f2f1; --suave: #a19f9d; --seleccion: #2b3a4a; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 "Segoe UI", system-ui, sans-serif; background: var(--fondo); color: var(--texto); }
.top { height: 44px; background: var(--azul); color: #fff; display: flex; align-items: center; gap: 12px; padding: 0 12px; }
.top .marca { font-weight: 600; font-size: 16px; }
.top .icono { background: none; border: 0; color: #fff; font-size: 20px; cursor: pointer; }
.top .buscador { flex: 1; max-width: 560px; border: 0; border-radius: 3px; padding: 6px 10px; background: rgba(255,255,255,.2); color: #fff; }
.top .buscador::placeholder { color: rgba(255,255,255,.8); }
.top .usuario { margin-left: auto; }
.cuerpo { display: flex; min-height: calc(100vh - 44px); }
.lateral { width: 220px; flex: none; background: var(--panel); border-right: 1px solid var(--borde); padding: 8px 0; }
.lateral small { display: block; padding: 12px 16px 4px; color: var(--suave); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.lateral a { display: block; padding: 8px 16px; color: var(--texto); text-decoration: none; border-left: 3px solid transparent; }
.lateral a:hover { background: var(--fondo); }
.lateral a.activo { background: var(--seleccion); border-left-color: var(--azul); font-weight: 600; }
.lateral a.proximo { color: var(--suave); cursor: default; }
.principal { flex: 1; min-width: 0; padding: 12px 24px 32px; }
.miga { color: var(--suave); font-size: 12px; }
h1 { font-size: 22px; font-weight: 600; margin: 4px 0 10px; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.comandos { display: flex; gap: 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.comandos button { background: none; border: 0; color: var(--azul); cursor: pointer; font: inherit; }
.comandos select { margin-left: 6px; padding: 4px; border: 1px solid var(--borde); background: var(--panel); color: var(--texto); }
.suave { color: var(--suave); font-size: 12px; }
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin: 8px 0 16px; overflow-x: auto; }
.pestanas button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; font: inherit; color: var(--suave); cursor: pointer; white-space: nowrap; }
.pestanas button.activa { color: var(--texto); border-bottom-color: var(--azul); font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--panel); border: 1px solid var(--borde); border-radius: 4px; padding: 10px 14px; }
.kpi span { display: block; color: var(--suave); font-size: 12px; }
.kpi b { font-size: 24px; font-weight: 600; }
.kpi.malo b { color: var(--rojo); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: 4px; padding: 12px 14px; min-width: 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; color: var(--suave); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
td { padding: 7px 8px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
td.num, th.num { text-align: right; }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.punto.rojo { background: var(--rojo); } .punto.amarillo { background: var(--amarillo); } .punto.verde { background: var(--verde); }
.malo { color: var(--rojo); } .alerta { color: var(--amarillo); } .bueno { color: var(--verde); }
.barra { display: inline-block; width: 90px; height: 7px; background: var(--borde); border-radius: 4px; position: relative; vertical-align: middle; margin-right: 6px; }
.barra i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--azul); border-radius: 4px; }
.barra u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--texto); }
.etapas { display: flex; gap: 8px; flex-wrap: wrap; }
.etapa { flex: 1 1 90px; background: var(--seleccion); border-radius: 4px; padding: 8px; text-align: center; }
.etapa b { display: block; font-size: 22px; font-weight: 600; }
.alertas { list-style: none; margin: 0; padding: 0; }
.alertas li { padding: 6px 0; border-bottom: 1px solid var(--borde); }
.vacio { color: var(--suave); padding: 8px 0; }
.leyenda { display: flex; gap: 14px; font-size: 12px; color: var(--suave); margin-top: 4px; flex-wrap: wrap; }
.leyenda i { display: inline-block; width: 10px; height: 3px; margin-right: 4px; vertical-align: middle; }
svg text { fill: var(--suave); font-size: 11px; }
@media (max-width: 800px) {
  .lateral { display: none; } .lateral.abierto { display: block; position: absolute; z-index: 5; height: 100%; }
  .principal { padding: 12px 12px 32px; }
}

/* Módulo Proyectos */
.comandos .primario, .acciones .primario { background: var(--azul); color: #fff; border: 0; border-radius: 2px; padding: 6px 14px; }
.comandos .primario:hover, .acciones .primario:hover { background: var(--azul-osc); }
.comandos input[type=search] { padding: 5px 8px; border: 1px solid var(--borde); background: var(--panel); color: var(--texto); }
.lateral a { cursor: pointer; }
.fila-click { cursor: pointer; }
.fila-click:hover td { background: var(--seleccion); }
.insignia { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--seleccion); color: var(--azul); font-weight: 400; vertical-align: middle; }
.insignia.activo { background: #dff6dd; color: #0b5a0b; } .insignia.en_cierre { background: #fff4ce; color: #7a5b00; } .insignia.historico { background: var(--borde); color: var(--suave); }
.miga a { color: var(--azul); text-decoration: none; }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.dato span { display: block; color: var(--suave); font-size: 12px; } .dato b { font-weight: 500; }
.kpis .dato { background: var(--panel); border: 1px solid var(--borde); border-radius: 4px; padding: 10px 14px; }
.pestanas button:disabled { opacity: .5; cursor: not-allowed; }
.panel-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; justify-content: flex-end; z-index: 20; }
.panel-lateral { width: min(440px, 100%); height: 100%; background: var(--panel); padding: 20px; overflow-y: auto; box-shadow: -4px 0 16px rgba(0,0,0,.2); }
.campo { display: block; margin-bottom: 12px; font-size: 13px; }
.campo input, .campo select { display: block; width: 100%; margin-top: 4px; padding: 7px 8px; border: 1px solid var(--borde); border-radius: 2px; background: var(--panel); color: var(--texto); font: inherit; }
.campo input:focus, .campo select:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.error { color: var(--rojo); min-height: 20px; margin-bottom: 8px; }
.acciones { display: flex; gap: 8px; } .acciones button { padding: 7px 14px; border: 1px solid var(--borde); background: var(--panel); color: var(--texto); border-radius: 2px; cursor: pointer; }
.acciones .primario { border: 0; color: #fff; background: var(--azul); }
.acciones button:disabled { opacity: .6; }

/* Kanban */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(230px, 1fr)); gap: 12px; margin-top: 12px; overflow-x: auto; padding-bottom: 8px; }
.kcol { background: var(--fondo); border: 1px solid var(--borde); border-radius: 4px; padding: 8px; min-height: 260px; }
.kcol.sobre { outline: 2px dashed var(--azul); outline-offset: -2px; background: var(--seleccion); }
.kcol h3 { font-size: 13px; font-weight: 600; margin: 2px 4px 8px; display: flex; justify-content: space-between; }
.kcont { color: var(--suave); font-weight: 400; }
.klista { min-height: 200px; }
.kvacio { color: var(--suave); font-size: 12px; text-align: center; padding: 14px 0; }
.ktarjeta { background: var(--panel); border: 1px solid var(--borde); border-left: 4px solid var(--borde); border-radius: 3px; padding: 8px 10px; margin-bottom: 8px; cursor: grab; }
.ktarjeta:hover { border-color: var(--azul); } .ktarjeta:focus-visible { outline: 2px solid var(--azul); }
.ktarjeta.arrastrando { opacity: .4; }
.ktarjeta.prio-alta { border-left-color: var(--rojo); } .ktarjeta.prio-media { border-left-color: var(--amarillo); } .ktarjeta.prio-baja { border-left-color: var(--verde); }
.knombre { font-weight: 600; margin-bottom: 4px; overflow-wrap: anywhere; }
.kmeta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--suave); margin-top: 3px; }
.etq { padding: 1px 7px; border-radius: 9px; font-size: 11px; background: var(--fondo); }
.campo textarea { display: block; width: 100%; margin-top: 4px; padding: 7px 8px; border: 1px solid var(--borde); border-radius: 2px; background: var(--panel); color: var(--texto); font: inherit; resize: vertical; }
.acciones .peligro { margin-left: auto; color: var(--rojo); border-color: var(--rojo); }

/* Autenticación y administración */
.pantalla-auth { position: fixed; inset: 0; z-index: 50; background: var(--fondo); display: flex; align-items: center; justify-content: center; padding: 16px; }
.caja-auth { width: min(400px, 100%); background: var(--panel); border: 1px solid var(--borde); border-radius: 4px; padding: 28px; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.caja-auth h1 { font-size: 20px; margin: 4px 0 16px; }
.marca-grande { color: var(--azul); font-weight: 600; font-size: 22px; }
.caja-auth .ancho { width: 100%; padding: 9px; background: var(--azul); color: #fff; border: 0; border-radius: 2px; cursor: pointer; font: inherit; }
.caja-auth .ancho:disabled { opacity: .6; }
.caja-auth .acciones .primario { background: var(--azul); color: #fff; border: 0; }
.usuario { margin-left: auto; position: relative; }
.usuario-boton { background: none; border: 0; color: #fff; cursor: pointer; font: inherit; }
.usuario-boton small { opacity: .8; margin-left: 4px; }
.usuario-desplegable { position: absolute; right: 0; top: 34px; min-width: 220px; background: var(--panel); color: var(--texto); border: 1px solid var(--borde); border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.2); z-index: 10; }
.usuario-desplegable .correo { padding: 10px 14px; color: var(--suave); font-size: 12px; border-bottom: 1px solid var(--borde); }
.usuario-desplegable button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 14px; color: var(--texto); cursor: pointer; font: inherit; }
.usuario-desplegable button:hover { background: var(--seleccion); }
.casilla { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 13px; }
.casilla input { width: auto; margin: 0; display: inline-block; }
fieldset.campo { border: 1px solid var(--borde); border-radius: 2px; padding: 8px 12px; }
fieldset.campo legend { padding: 0 6px; font-weight: 600; }
.panel-fondo.centrado { align-items: center; justify-content: center; padding: 16px; }
.dialogo { background: var(--panel); border-radius: 4px; padding: 24px; width: min(420px, 100%); }
.clave-temporal { font: 600 20px/1.2 Consolas, monospace; background: var(--fondo); border: 1px dashed var(--azul); padding: 14px; text-align: center; margin: 12px 0; user-select: all; letter-spacing: .05em; }

/* Control de obra */
.tabla-obra td, .tabla-obra th { font-size: 13px; }
.tabla-obra tr.titulo td { background: var(--fondo); font-weight: 600; }
.mini { background: none; border: 1px solid var(--borde); color: var(--azul); border-radius: 2px; padding: 2px 8px; margin-left: 4px; cursor: pointer; font: inherit; font-size: 12px; }
.mini:hover { background: var(--seleccion); }
.acciones-fila { text-align: right; }
.aviso { background: #fff4ce; color: #5c4400; border-radius: 4px; padding: 8px 12px; margin: 0 0 12px; font-size: 13px; }
@media (prefers-color-scheme: dark) { .aviso { background: #433519; color: #ffe9a8; } }

/* Valorizaciones */
.panel-ancho { width: min(1000px, 100%); }
.enlace { text-decoration: none; display: inline-block; }
.peligro-mini { color: var(--rojo); border-color: var(--rojo); }
.resumen-val { width: min(460px, 100%); margin: 14px 0 0 auto; }
.resumen-val td { border: 0; border-bottom: 1px solid var(--borde); padding: 5px 8px; }
.resumen-val .fuerte td { font-weight: 600; }
.resumen-val .total td { font-weight: 700; font-size: 15px; background: var(--seleccion); }

/* Abastecimiento */
.insignia.rojo { background: #fde7e9; color: #a4262c; }
.tabla-items { width: 100%; }
.tabla-items td { padding: 4px; border-bottom: 0; white-space: normal; }
.tabla-items select, .tabla-items input { width: 100%; padding: 5px 6px; border: 1px solid var(--borde); border-radius: 2px; background: var(--panel); color: var(--texto); font: inherit; }
.tabla-items input[type=number] { text-align: right; }
@media (prefers-color-scheme: dark) { .insignia.rojo { background: #442726; color: #ffb3b8; } }

/* Reportes diarios (celular primero) */
.comandos .grande, .acciones .grande, .botones-foto .grande { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.botones-foto .grande { flex: 1; background: var(--panel); color: var(--azul); border: 1px solid var(--azul); border-radius: 2px; cursor: pointer; }
.botones-foto { display: flex; gap: 8px; margin: 6px 0; }
.filtros-rep { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0; } .filtros-rep select { padding: 6px; border: 1px solid var(--borde); background: var(--panel); color: var(--texto); }
.lista-rep { display: grid; gap: 8px; margin-top: 8px; }
.tarjeta-rep { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--borde); border-radius: 4px; padding: 12px 14px; cursor: pointer; }
.tarjeta-rep:hover, .tarjeta-rep:focus-visible { border-color: var(--azul); outline: none; }
.rep-fecha { min-width: 86px; font-weight: 600; text-transform: capitalize; } .rep-datos { flex: 1; min-width: 0; }
.acciones-rep { margin: 12px 0; flex-wrap: wrap; }
.datos-rep { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 10px 0; }
.datos-rep .dato { background: var(--fondo); border-radius: 4px; padding: 8px 10px; }
.campo-rep { margin: 10px 0; } .campo-rep span { display: block; color: var(--suave); font-size: 12px; }
.segmentos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.segmentos button { flex: 1; min-height: 44px; border: 1px solid var(--borde); background: var(--panel); color: var(--texto); border-radius: 2px; cursor: pointer; font: inherit; }
.segmentos button.activo { background: var(--azul); color: #fff; border-color: var(--azul); }
.linea-avance { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.linea-avance select, .linea-avance input { padding: 10px; border: 1px solid var(--borde); border-radius: 2px; background: var(--panel); color: var(--texto); font: inherit; width: 100%; }
.fotos-rep { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 8px; }
.fotos-rep img, .foto-item img { width: 100%; height: 110px; object-fit: cover; border-radius: 4px; border: 1px solid var(--borde); display: block; background: var(--fondo); }
.fotos-rep a { color: inherit; text-decoration: none; } .fotos-rep small { display: block; color: var(--suave); font-size: 11px; margin-top: 2px; }
.foto-item .mini { width: 100%; margin: 4px 0 0; }
.campo textarea { min-height: 80px; }
@media (max-width: 700px) {
  .principal { padding: 8px 12px 28px; }
  .panel-lateral, .panel-ancho { width: 100%; padding: 14px; }
  .campo input, .campo select, .campo textarea, .linea-avance input, .linea-avance select { font-size: 16px; }     /* 16 px evita el zoom automático de iOS al enfocar */
  .rep-fecha { min-width: 70px; }
}
@media (max-width: 700px) {
  .top { padding: 0 8px; gap: 8px; }
  .top .buscador { display: none; }                                  /* en el celular se libera la barra: el buscador aún no es funcional */
  .top .usuario { min-width: 0; }
  .usuario-boton { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .usuario-boton small { display: none; }
  html, body { overflow-x: hidden; }
}

/* Subcontratos */
.chips-cumpl { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chips-cumpl .insignia { white-space: normal; }
td .chips-cumpl { margin: 0; }