/* Control de Mantenimiento — apariencia de sistema administrativo de escritorio */
:root {
  --azul: #1f4e8c;
  --azul2: #2c6cb8;
  --azul-claro: #e8eef7;
  --borde: #a9b9d0;
  --borde-suave: #cbd6e4;
  --fondo: #d9e1ec;
  --texto: #1c2733;
  --tenue: #5a6878;
  --sel: #3a78cf;
  --ok: #1e8449;
  --warn: #b9770e;
  --err: #c0392b;
  --font: "Segoe UI", Tahoma, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 13px/1.35 var(--font); color: var(--texto); background: var(--fondo); }
a { color: var(--azul2); }
.ico { flex: none; vertical-align: middle; }
kbd { font: 11px var(--font); background: #eef2f7; border: 1px solid #c3cedc; border-radius: 3px; padding: 0 4px; color: var(--tenue); margin-left: auto; }

.app { display: flex; flex-direction: column; min-height: 100vh; }

/* barra de título */
.titlebar { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: linear-gradient(#2b65ad, #1d4b88); color: #fff; padding: 5px 12px; border-bottom: 1px solid #143a6b; }
.tb-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tb-left strong { font-size: 14px; letter-spacing: .2px; white-space: nowrap; }
.tb-emp { opacity: .85; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-right { font-size: 12px; opacity: .9; white-space: nowrap; }
.logo { display: inline-flex; background: #fff; border-radius: 4px; padding: 1px; }

/* menú */
.menubar { display: flex; background: #f4f6f9; border-bottom: 1px solid var(--borde-suave); padding: 0 4px; position: relative; z-index: 20; }
.menu { position: relative; }
.menu > button { font: inherit; background: none; border: 1px solid transparent; padding: 4px 10px; cursor: pointer; color: var(--texto); }
.menu > button:hover, .menu.open > button { background: #dbe7f6; border-color: #a9c4e6; }
.menu-pop { display: none; position: absolute; left: 0; top: 100%; min-width: 250px; background: #fff; border: 1px solid #98aac2;
  box-shadow: 2px 3px 8px rgba(0,0,0,.18); padding: 3px; }
.menu.open .menu-pop { display: block; }
.menu-pop a { display: flex; align-items: center; gap: 8px; padding: 5px 10px; color: var(--texto); text-decoration: none; white-space: nowrap; }
.menu-pop a:hover { background: var(--sel); color: #fff; }
.menu-pop a:hover kbd { color: var(--texto); }
.menu-pop hr { border: 0; border-top: 1px solid #e1e6ee; margin: 3px 4px; }

/* barra de herramientas principal */
.toolbar { display: flex; align-items: stretch; gap: 2px; padding: 4px 6px; background: linear-gradient(#ffffff, #e9eef5);
  border-bottom: 1px solid var(--borde); overflow-x: auto; }
.tbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 70px; padding: 4px 6px;
  border: 1px solid transparent; border-radius: 3px; color: var(--texto); text-decoration: none; font-size: 11.5px; white-space: nowrap; }
.tbtn:hover { background: linear-gradient(#fdf3d8, #f8e2a8); border-color: #e3bf60; }
.tsep { width: 1px; background: var(--borde-suave); margin: 4px 4px; }
.tspacer { flex: 1; }

/* área de trabajo y ventana */
.workspace { flex: 1; padding: 10px; min-width: 0; }
.window { background: #fff; border: 1px solid #8fa5c3; box-shadow: 0 2px 6px rgba(20,40,80,.15); border-radius: 3px; overflow: hidden; }
.window-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 10px; font-weight: 600; color: #163d6e;
  background: linear-gradient(#f1f5fb, #d9e4f2); border-bottom: 1px solid var(--borde); }
.window-title > span { display: flex; align-items: center; gap: 6px; }
.wt-right { font-weight: 400; color: var(--tenue); font-size: 12px; }
.window-body { padding: 10px; }

/* barra de herramientas de ventana (Nuevo / Modificar / Eliminar...) */
.wtools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 8px; background: #f6f8fb; border-bottom: 1px solid var(--borde-suave); }
.wtools .grow { flex: 1; }
.btn { display: inline-flex; align-items: center; gap: 5px; font: inherit; padding: 4px 10px; min-height: 28px; cursor: pointer; text-decoration: none; color: var(--texto);
  background: linear-gradient(#ffffff, #e6ebf2); border: 1px solid #a7b5c8; border-radius: 3px; white-space: nowrap; }
.btn:hover { background: linear-gradient(#fdf3d8, #f8e2a8); border-color: #d8b250; }
.btn:disabled, .btn.disabled { opacity: .45; pointer-events: none; }
.btn-primary { background: linear-gradient(#3b7fd4, #2462ad); color: #fff; border-color: #1d4f8d; }
.btn-primary:hover { background: linear-gradient(#4a8de0, #2c6cb8); border-color: #1d4f8d; }
.btn-danger:hover { background: linear-gradient(#fde2de, #f7c2ba); border-color: #d9826f; }
.btn-sm { padding: 2px 7px; min-height: 24px; font-size: 12px; }

/* filtros */
.filtros { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: flex-end; padding: 8px; margin-bottom: 8px; background: #f8fafc; border: 1px solid var(--borde-suave); }
.filtros label { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--tenue); }
.filtros .chk { flex-direction: row; align-items: center; gap: 4px; padding-bottom: 5px; }

/* controles */
input, select, textarea { font: inherit; color: var(--texto); background: #fff; border: 1px solid var(--borde); border-radius: 2px; padding: 3px 6px; min-height: 26px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #3a78cf; box-shadow: 0 0 0 2px rgba(58,120,207,.22); background: #fffef2; }
input[readonly] { background: #f1f4f8; color: var(--tenue); }
input.num { text-align: right; }
textarea { resize: vertical; min-height: 60px; }

/* grid de datos */
.grid-wrap { overflow: auto; border: 1px solid var(--borde); max-height: calc(100vh - 290px); min-height: 120px; background: #fff; }
.grid-wrap.auto { max-height: none; min-height: 0; }
table.grid { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.grid th { position: sticky; top: 0; z-index: 1; background: linear-gradient(#f9fbfd, #e1e8f1); border: 1px solid #b9c7d9; border-top: 0; padding: 4px 6px;
  text-align: left; font-weight: 600; color: #22364f; white-space: nowrap; }
.grid td { border: 1px solid #e0e6ee; padding: 3px 6px; vertical-align: top; }
.grid tbody tr:nth-child(even) td { background: #f5f8fc; }
.grid tbody tr:hover td { background: #e5effb; }
.grid tbody tr.sel td { background: var(--sel); color: #fff; }
.grid tbody tr.sel td a { color: #fff; }
.grid tbody tr[data-open] { cursor: default; }
.grid tfoot td { position: sticky; bottom: 0; background: #e8eef6; font-weight: 700; border: 1px solid #b9c7d9; }
.grid .r, .r { text-align: right; white-space: nowrap; }
.grid .c { text-align: center; }
.grid .nw { white-space: nowrap; }
.grid .desc { min-width: 220px; max-width: 420px; }
.grid tr.inactivo td { color: #9aa5b3; font-style: italic; }
.grid tr.cancelado td { color: #9aa5b3; text-decoration: line-through; }
.neg { color: var(--err); }
.pos { color: var(--ok); }
.tenue { color: var(--tenue); }
.vacio { padding: 26px; text-align: center; color: var(--tenue); }
.grid-info { font-size: 12px; color: var(--tenue); padding: 4px 2px; }

/* estados */
.badge { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.st-Recibido { background: #eceff3; color: #4d5967; border-color: #ccd3dc; }
.st-Cotizado { background: #efe6fa; color: #6c3fb0; border-color: #d5c2f0; }
.st-Autorizado { background: #dff5f3; color: #11766d; border-color: #b0e3dc; }
.st-Asignado { background: #e1ecfb; color: #2058a8; border-color: #b6cff2; }
.st-En-proceso { background: #fff0db; color: #a35a00; border-color: #f4cf98; }
.st-Terminado { background: #e0f4e6; color: #1b7a3d; border-color: #addcbc; }
.st-Facturado { background: #dde6f7; color: #193f86; border-color: #a8bde6; }
.st-Cobrado { background: #d3efdc; color: #0f5a2a; border-color: #8fcfa4; }
.st-Cancelado { background: #fbe3e0; color: #a3271a; border-color: #f0b4ab; }
.prio-Urgente { color: #b9770e; font-weight: 600; }
.prio-Emergencia { color: var(--err); font-weight: 700; }
tr.sel .badge { border-color: rgba(255,255,255,.6); }

/* formularios */
.form-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; align-items: start; }
fieldset { border: 1px solid var(--borde-suave); border-radius: 3px; margin: 0 0 12px; padding: 8px 12px 12px; background: #fcfdfe; }
legend { font-weight: 600; color: #1f4e8c; padding: 0 6px; }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; }
.campo { display: flex; flex-direction: column; gap: 2px; }
.campo > span { font-size: 11.5px; color: var(--tenue); }
.campo.req > span::after { content: " *"; color: var(--err); }
.campo.ancho { grid-column: 1 / -1; }
.campo.chk { flex-direction: row; align-items: center; gap: 6px; padding-top: 16px; }
.campo.chk > span { font-size: 13px; color: var(--texto); }
.acciones { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; padding-top: 6px; border-top: 1px solid var(--borde-suave); margin-top: 4px; }
.form-narrow { max-width: 720px; }

/* resumen financiero */
.finanzas { border: 1px solid var(--borde); border-radius: 3px; background: #fbfcfe; position: sticky; top: 8px; }
.finanzas h3 { margin: 0; padding: 6px 10px; font-size: 13px; color: #163d6e; background: linear-gradient(#f1f5fb, #dfe8f4); border-bottom: 1px solid var(--borde-suave); }
.finanzas table { width: 100%; border-collapse: collapse; }
.finanzas td { padding: 5px 10px; border-bottom: 1px solid #eaeef4; }
.finanzas td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.finanzas tr.total td { font-weight: 700; font-size: 14px; background: #eef4fb; }
.finanzas tr.sub td { color: var(--tenue); font-size: 12px; }

/* panel */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; }
.kpi { display: block; border: 1px solid var(--borde-suave); border-left: 4px solid var(--azul2); border-radius: 3px; padding: 9px 12px; background: #fbfcfe;
  color: var(--texto); text-decoration: none; }
a.kpi:hover { background: #f0f6fe; }
.kpi .k-t { font-size: 11.5px; color: var(--tenue); text-transform: uppercase; letter-spacing: .3px; }
.kpi .k-v { font-size: 22px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .k-s { font-size: 12px; color: var(--tenue); }
.kpi.k-warn { border-left-color: #e08e0b; }
.kpi.k-err { border-left-color: var(--err); }
.kpi.k-ok { border-left-color: var(--ok); }
.kpi.k-mor { border-left-color: #7d4cc4; }
.estados-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.estados-bar a { text-decoration: none; }
.dos-col { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
h2.sec { font-size: 13px; color: #163d6e; margin: 0 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--borde-suave); }

/* ficha de orden */
.ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 0; border: 1px solid var(--borde-suave); margin-bottom: 12px; }
.ficha div { padding: 6px 10px; border-bottom: 1px solid #eef1f5; border-right: 1px solid #eef1f5; }
.ficha div.ancho { grid-column: 1 / -1; }
.ficha small { display: block; font-size: 11px; color: var(--tenue); }
.bitacora { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow: auto; border: 1px solid var(--borde-suave); }
.bitacora li { padding: 6px 10px; border-bottom: 1px solid #eef1f5; }
.bitacora li small { color: var(--tenue); display: block; font-size: 11px; }

/* evidencias */
.subir { border: 1px dashed #9fb3cf; border-radius: 4px; background: #f8fbff; padding: 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 5px 14px; border: 1px solid #a7b5c8; border-radius: 16px; background: #fff; cursor: pointer; font-weight: 600; color: #34495e; }
.chip input:checked + span { background: var(--sel); border-color: #1d4f8d; color: #fff; }
.chip input:focus-visible + span { outline: 2px solid #f39c12; }
.subir-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-grande { min-height: 44px; padding: 6px 16px; font-weight: 600; font-size: 14px; }
.subir-pie { display: flex; gap: 6px; }
.previas { display: flex; flex-wrap: wrap; gap: 6px; }
.previas:empty { display: none; }
.previa { position: relative; width: 72px; height: 72px; border: 1px solid var(--borde); border-radius: 3px; overflow: hidden; background: #fff;
  font-size: 10px; display: flex; align-items: center; justify-content: center; text-align: center; word-break: break-all; }
.previa img { width: 100%; height: 100%; object-fit: cover; }
.previa button { position: absolute; top: 1px; right: 1px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(192,57,43,.9); color: #fff; cursor: pointer; line-height: 18px; padding: 0; }
.grupo-evid { margin: 8px 0 4px; color: #163d6e; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin-bottom: 6px; }
.thumb { display: block; aspect-ratio: 1; border: 1px solid var(--borde); border-radius: 3px; overflow: hidden; background: #f1f4f8; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s; }
.thumb:hover img { transform: scale(1.05); }
.doc-ico { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 4px; color: var(--tenue); text-decoration: none; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(10,20,35,.92); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 80vh; object-fit: contain; box-shadow: 0 4px 20px rgba(0,0,0,.5); background: #fff; }
.lb-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; color: #fff; font-size: 12.5px; }
.lb-acc { display: flex; gap: 6px; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 64px; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 38px; cursor: pointer; border-radius: 4px; }
.lb-prev { left: 8px; } .lb-next { right: 8px; }
.firma-box { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 10px; border: 1px solid var(--borde-suave); border-radius: 3px; background: #fcfdfe; }
.firma-box img { max-width: 240px; max-height: 100px; border-bottom: 1px solid #333; background: #fff; }
.pad-wrap { position: relative; border: 2px solid #8fa5c3; border-radius: 4px; background: #fff; margin-bottom: 8px; }
.pad-wrap canvas { display: block; width: 100%; height: 260px; touch-action: none; cursor: crosshair; }
.pad-linea { position: absolute; left: 8%; right: 8%; bottom: 44px; border-top: 1px dashed #9aa5b3; color: #9aa5b3; font-size: 11px; padding-top: 2px; pointer-events: none; text-align: center; }

/* mensajes */
.flashes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.flash { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; border-radius: 3px; border: 1px solid; }
.flash-ok { background: #e4f5e9; border-color: #9bd3ad; color: #155d2f; }
.flash-error { background: #fde7e4; border-color: #f0aea4; color: #8e2216; }
.flash-warn { background: #fff4dc; border-color: #f0cf85; color: #7a5200; }
.flash-x { background: none; border: 0; font-size: 18px; cursor: pointer; color: inherit; opacity: .6; }

/* barra de estado */
.statusbar { display: flex; gap: 0; background: #e6ebf2; border-top: 1px solid var(--borde); font-size: 11.5px; color: #3d4a5a; }
.statusbar span { padding: 3px 12px; border-right: 1px solid #c4cfdd; white-space: nowrap; }
.statusbar .sb-help { flex: 1; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; }

/* login */
.login-bg { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: linear-gradient(135deg, #1d4b88 0%, #2c6cb8 55%, #7aa7dc 100%); }
.login { width: 100%; max-width: 380px; background: #fff; border: 1px solid #143a6b; border-radius: 4px; box-shadow: 0 12px 40px rgba(0,0,0,.35); overflow: hidden; }
.login-head { background: linear-gradient(#2b65ad, #1d4b88); color: #fff; padding: 16px 18px; display: flex; align-items: center; gap: 12px; }
.login-head h1 { margin: 0; font-size: 17px; }
.login-head p { margin: 2px 0 0; font-size: 12px; opacity: .85; }
.login-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.login-body .campo input { min-height: 32px; }
.login-body .btn { justify-content: center; min-height: 34px; }

/* impresión */
.solo-print { display: none; }
@media print {
  @page { size: landscape; margin: 10mm; }
  body { background: #fff; font-size: 10px; }
  .titlebar, .menubar, .toolbar, .statusbar, .wtools, .filtros, .flashes, .no-print { display: none !important; }
  .workspace { padding: 0; }
  .window { border: 0; box-shadow: none; }
  .window-title { background: none; border-bottom: 2px solid #000; color: #000; font-size: 14px; }
  .grid-wrap { max-height: none; overflow: visible; border: 0; }
  .grid th { position: static; background: #ddd !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .grid td, .grid th { border: 1px solid #888; padding: 2px 4px; }
  .grid tfoot td { position: static; }
  .solo-print { display: block; }
}

/* pantallas angostas (celular) */
@media (max-width: 900px) {
  .form-cols, .dos-col { grid-template-columns: 1fr; }
  .finanzas { position: static; }
  .sb-help { display: none; }
  .col-lateral { order: -1; }
}
@media (max-width: 600px) {
  .workspace { padding: 6px; }
  .window-body { padding: 8px; }
  .tb-emp, .tb-right { display: none; }
  .tbtn { min-width: 62px; }
  .grid-wrap { max-height: none; }
  .statusbar span:nth-child(2) { display: none; }
}
.nowrap { white-space: nowrap; }