/* ============================================================================
   reportes - estructura de la replica original (replicador-web-integral/reportes/replica-test)
   re-pintada con la paleta de Vector GPS
   ============================================================================ */
:root{--paper:#ffffff;--ink:#26313d;--line:#bfcbd6;--muted:#f4f7f9;--soft:#f4f7f9;--dark:#607080}
*{box-sizing:border-box;border-radius:0} [hidden]{display:none!important}
html,body{margin:0;min-width:320px;font:14px Roboto,Arial,sans-serif;color:var(--ink);background:var(--paper)}
button,input,select,textarea{border:1px solid var(--line);background:var(--paper);color:inherit;font:inherit}button,input[type=button]{cursor:pointer}button:hover:not(:disabled),input[type=button]:hover:not(:disabled){background:var(--soft)}button:disabled,input:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role=row]:focus-visible{outline:2px solid #bfcbd6;outline-offset:1px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.list-region{width:100%;min-height:1202px}.main-toolbar{display:flex;align-items:center;gap:23.6px;width:100%;height:44px;padding:10px}.main-toolbar button{height:24px;padding:2px 20px;white-space:nowrap}.main-toolbar button:nth-child(1){width:124px}.main-toolbar button:nth-child(2){width:126px}.main-toolbar button:nth-child(3){width:139px}.main-toolbar button:nth-child(4){width:177px}
.quick-panel{position:relative;display:flex;align-items:center;gap:24px;width:100%;height:44px;padding:5px 10px}.quick-panel input[type=text]{width:200px;height:27px;padding:4px}.quick-csv{display:flex;align-items:center;gap:5px;white-space:nowrap}.quick-panel button{height:24px;padding:2px 20px}.quick-panel #quickClose{position:absolute;left:10px;top:47px}.quick-panel .field-error{position:absolute;left:10px;top:35px}
#gridTitle{height:42px;margin:0;padding:11px 15px;border-bottom:1px solid var(--line);background:var(--muted);font-size:18px;letter-spacing:3px}
.reports-grid{position:relative;width:calc(100% + 2px);height:calc(100vh - 104px);min-height:480px;border:1px solid var(--line)}.grid-toolbar{position:relative;display:flex;justify-content:flex-end;align-items:center;height:40px;padding:5px 30px}.grid-toolbar input{width:176px;height:26px;padding:5px 28px 5px 8px}.grid-toolbar span{position:absolute;right:34px;margin:0;font-size:20px}.grid-scroll{height:calc(100% - 47px);margin-top:7px;overflow:auto}.grid-table{width:1260px;min-width:1260px}.grid-header,.grid-row{display:grid;grid-template-columns:200px 180px 130px 150px 200px 200px 200px}.grid-header{position:sticky;z-index:3;top:0;height:31px;background:var(--paper)}.grid-th{position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.sort-header{width:100%;height:30px;border:0;padding:4px 30px 4px 8px;text-align:left}.sort-header[data-direction=asc]::after{content:" ▲"}.sort-header[data-direction=desc]::after{content:" ▼"}.column-menu-button{position:absolute;z-index:2;right:0;top:0;width:28px;height:30px;border:0;background:var(--paper);font-size:18px}.grid-row{height:52px;min-height:52px;border-bottom:1px solid var(--muted);cursor:pointer}.grid-row:nth-child(even){background:var(--soft)}.grid-row[aria-selected=true]{outline:2px solid #bfcbd6;outline-offset:-2px}.grid-cell{min-height:51px;padding:9px 8px;border-right:1px solid var(--line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.grid-cell.wrap{white-space:normal;line-height:18px}.grid-empty{padding:30px;text-align:center}
.column-menu{position:fixed;z-index:50;width:162px;border:1px solid var(--line);background:var(--paper);padding:4px}.column-menu>button{display:block;width:100%;height:28px;border:0;text-align:left}.columns-submenu{position:absolute;left:100%;top:58px;width:180px;border:1px solid var(--line);background:var(--paper);padding:4px}.columns-submenu label{display:flex;align-items:center;gap:6px;height:28px}.columns-submenu input{min-height:auto}.column-hidden{display:none!important}
.report-wizard{width:88%;min-height:480px;margin:24px auto 448px;border:1px solid var(--line);background:var(--paper)}.wizard-header{display:flex;align-items:center;justify-content:space-between;height:42px;border-bottom:1px solid var(--line);background:var(--muted)}.wizard-header h2{margin:0;padding:8px 16px;font-size:18px}.wizard-header button{width:34px;height:34px;margin-right:4px;border:0;font-size:24px}.wizard-layout{display:grid;grid-template-columns:170px 1fr;min-height:438px}.wizard-steps{display:flex;flex-direction:column;padding:0 14px}.wizard-steps button{min-height:46px;border:0;background:var(--paper);text-align:left}.wizard-steps button.active{font-weight:bold;border-left:3px solid #bfcbd6}.wizard-steps button span{float:right;visibility:hidden}.wizard-steps button.complete span{visibility:visible}.wizard-content{position:relative;min-width:0;padding:188px 18px 52px}.wizard-step{min-height:215px;border:1px solid var(--line);padding:10px}.wizard-step h3{margin:0 0 18px;padding:8px;border-bottom:3px solid var(--line);font-size:14px}.wizard-step>label:not(.choice-row label){display:block;margin:14px 0 5px;font-weight:bold}.wizard-step>input[type=text],.wizard-step>select{width:286px;height:30px;padding:5px}.filter-tabs{display:flex;border-bottom:1px solid var(--line)}.filter-tabs button{min-height:34px;border:0;border-right:1px solid var(--line);padding:6px 16px}.filter-tabs button.active{font-weight:bold;border-bottom:3px solid #bfcbd6}.filter-section{min-height:150px;padding:14px}.filter-section h3{margin-bottom:12px}.filter-section>label{display:block;margin:8px 0}.filter-section select[multiple]{display:block;width:74%;min-height:90px;margin:12px 0;padding:4px}.choice-row{display:flex;gap:25px;margin:12px 0}.email-fields{border:1px solid var(--line);padding:12px}.email-fields h4{margin:8px 0}.format-row{display:flex;gap:24px;align-items:center}.email-fields>label{display:block;margin:12px 0 5px}.email-fields>input{width:220px;height:25px;padding:4px}.email-fields textarea{width:70%;height:120px;padding:6px;resize:vertical}.email-fields fieldset{margin-top:14px;padding:12px}.email-fields select[multiple]{width:75%;min-height:80px}.external-form{display:grid;grid-template-columns:auto 1fr auto 1fr auto;gap:8px;align-items:center}.external-form input{height:27px}.external-form button{height:25px}.external-head,.external-row{display:grid;grid-template-columns:1fr 1fr 70px;margin-top:8px}.external-head{font-weight:bold}.external-row{border-top:1px solid var(--muted);padding:5px}.external-row button{height:24px}.wizard-step[data-step="4"]>label,.wizard-step[data-step="4"]>div:not(.choice-row){display:grid;grid-template-columns:160px 200px;align-items:center;margin:12px 0}.wizard-step[data-step="4"] input,.wizard-step[data-step="4"] select{height:27px;padding:4px}.field-error{color:var(--ink);font-weight:bold;border-left:3px solid #bfcbd6;padding-left:6px}.wizard-actions{position:absolute;left:18px;bottom:12px;display:flex;gap:8px}.wizard-actions button{height:30px;padding:5px 14px}
dialog{border:2px solid #bfcbd6;background:var(--paper);padding:14px}dialog::backdrop{background:rgba(0,0,0,.25)}dialog h2{margin:0 0 16px;font-size:16px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.dialog-actions button,#messageDialog button{height:30px;padding:4px 14px}
.list-region{overflow:hidden}.reports-grid{width:100%}
@media(max-width:760px){.main-toolbar{gap:8px;overflow-x:auto}.main-toolbar button{flex:0 0 auto}.wizard-layout{grid-template-columns:1fr}.wizard-steps{display:grid;grid-template-columns:1fr 1fr;padding:6px}.wizard-content{padding:20px 10px 52px}.report-wizard{width:96%}.external-form{grid-template-columns:1fr}.quick-panel{overflow-x:auto}.quick-panel>*{flex:0 0 auto}}

/* ============================================================================
   Capa Vector GPS (colores, bordes y estados) - no altera el layout original
   Referencia: GUIA_ESTILOS_UI.md
   ============================================================================ */
:root {
  --v-primary: #0f8995; --v-primary-border: #0d7d88; --v-primary-dark: #0a6670;
  --v-primary-tint: #e6f4f5; --v-primary-ring: rgba(15, 137, 149, .18);
  --v-danger: #dc3545; --v-danger-dark: #bd2130; --v-success: #28a745; --v-success-dark: #1e8a37;
  --v-text: #26313d; --v-title: #1f2a35; --v-muted: #607080; --v-label: #485664;
  --v-border: #cfd9e2; --v-input-border: #bfcbd6; --v-th-bg: #f4f7f9; --v-input-bg: #f9fbfc;
  --v-shadow-pop: 0 12px 24px rgba(26, 36, 44, .22);
}

html, body { font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif; color: var(--v-text); }
a { color: var(--v-primary); }
h1, h2, h3 { color: var(--v-title); }

button {
  border-color: var(--v-input-border);
  border-radius: 6px;
  background-color: #fff;
  color: var(--v-label);
  font-weight: 600;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
button:hover:not(:disabled) { color: var(--v-primary); border-color: var(--v-primary); background-color: var(--v-primary-tint); }
button:disabled { opacity: .5; color: #9aa6b2; background-color: #f4f7f9; border-color: #d8e0e6; cursor: not-allowed; }

button:is([id*="save" i],[id*="create" i],[id*="crear" i],[id*="guardar" i],[id*="accept" i],[id*="aceptar" i],[id*="apply" i],[id*="send" i],[id*="enviar" i],[id*="agregar" i],[id*="add" i],[id*="submit" i],[id*="filter" i]):not(:disabled) { color: #fff; background-color: var(--v-primary); border-color: var(--v-primary-border); }
button:is([id*="save" i],[id*="create" i],[id*="crear" i],[id*="guardar" i],[id*="accept" i],[id*="aceptar" i],[id*="apply" i],[id*="send" i],[id*="enviar" i],[id*="agregar" i],[id*="add" i],[id*="submit" i],[id*="filter" i]):hover:not(:disabled) { color: #fff; background-color: var(--v-primary-dark); border-color: var(--v-primary-dark); }

button:is([id*="edit" i],[id*="editar" i]):not(:disabled) { color: var(--v-primary); border-color: var(--v-primary); }

button:is([id*="delete" i],[id*="remove" i],[id*="borrar" i],[id*="eliminar" i]):not(:disabled) { color: var(--v-danger); border-color: #e3a0a8; background-color: #fff5f6; }
button:is([id*="delete" i],[id*="remove" i],[id*="borrar" i],[id*="eliminar" i]):hover:not(:disabled) { color: #fff; border-color: var(--v-danger); background-color: var(--v-danger); }

button:is([id*="excel" i],[id*="download" i],[id*="export" i],[id*="csv" i],[id*="descargar" i]):not(:disabled) { color: #fff; background-color: var(--v-success); border-color: var(--v-success); }
button:is([id*="excel" i],[id*="download" i],[id*="export" i],[id*="csv" i],[id*="descargar" i]):hover:not(:disabled) { color: #fff; background-color: var(--v-success-dark); border-color: var(--v-success-dark); }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, [role="row"]:focus-visible {
  outline: 2px solid var(--v-primary);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea {
  border-color: var(--v-input-border);
  border-radius: 6px;
  background-color: var(--v-input-bg);
  color: var(--v-text);
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { border-color: var(--v-primary); box-shadow: 0 0 0 3px var(--v-primary-ring); }
input:disabled, select:disabled, textarea:disabled { color: #8a97a4; background-color: #f1f4f6; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--v-primary); }

fieldset { border-color: var(--v-border); border-radius: 8px; }
legend { color: var(--v-primary); font-weight: 700; }

th, [role="columnheader"] { background-color: var(--v-th-bg); color: #536171; font-weight: 700; }

tr[aria-selected="true"], [role="row"][aria-selected="true"], [role="option"][aria-selected="true"], tr.selected, [role="row"].selected,
[class*="row"].selected, [class*="item"].selected, [class*="row"][aria-selected="true"], [class*="item"][aria-selected="true"] {
  background-color: var(--v-primary-tint);
  box-shadow: inset 4px 0 0 var(--v-primary);
  outline: none;
}
tbody tr:hover, [role="grid"] [role="row"]:hover { background-color: rgba(15, 137, 149, .07); }
tr[aria-selected="true"]:hover, tr.selected:hover, [role="row"][aria-selected="true"]:hover { background-color: var(--v-primary-tint); }

dialog {
  border: 1px solid var(--v-border);
  border-top: 4px solid var(--v-primary);
  border-radius: 8px;
  background: #fff;
  color: var(--v-text);
  box-shadow: var(--v-shadow-pop);
}
dialog:not([open]) { display: none !important; }
dialog::backdrop { background: rgba(26, 36, 44, .5); }

/* Botones dentro de encabezados de tabla: sin caja */
th button, [role="columnheader"] button { background-color: transparent; border-color: transparent; box-shadow: none; color: inherit; }
th button:hover:not(:disabled), [role="columnheader"] button:hover:not(:disabled) { background-color: rgba(15, 137, 149, .10); border-color: transparent; color: var(--v-primary); }
/* Estado activo / seleccionado en botones (pestañas, filtros, categorías) */
button[aria-pressed="true"]:not(:disabled), button[aria-selected="true"]:not(:disabled), button.active:not(:disabled), button.selected:not(:disabled) {
  color: var(--v-primary-dark); background-color: var(--v-primary-tint); border-color: var(--v-primary); box-shadow: none;
}

/* v2: dialogos al nivel de Alertas */
html, body { background: #eef2f5; }
/* Diálogos con encabezado */
dialog { padding: 0 0 14px !important; overflow: auto; }
dialog > :not(header):not(h1:first-child):not(h2:first-child) { margin-left: 16px; margin-right: 16px; }
dialog > header, dialog > h1:first-child, dialog > h2:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px !important;
  padding: 9px 14px !important;
  font: 700 13px/1.45 Roboto, Arial, sans-serif !important;
  color: #fff !important;
  background: #343a40 !important;
  border: 0 !important;
  border-bottom: 3px solid var(--v-primary) !important;
}
dialog > header h2, dialog > header h1 { margin: 0 !important; padding: 0 !important; font: 700 13px/1.45 Roboto, Arial, sans-serif !important; color: #fff !important; background: transparent !important; border: 0 !important; }
dialog > header button { min-height: 26px; padding: 0 9px; color: #fff; background: transparent; border-color: rgba(255, 255, 255, .4); }
dialog > header button:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, .16); border-color: #fff; }
dialog[id*="confirm" i] { border-top-color: var(--v-danger); }
dialog[id*="confirm" i] > h1:first-child, dialog[id*="confirm" i] > h2:first-child, dialog[id*="confirm" i] > header { border-bottom-color: var(--v-danger); }

/* v2: bandas de panel */
#gridTitle, #gridTitle h1, #gridTitle h2, #gridTitle span,
.wizard-header, .wizard-header h1, .wizard-header h2, .wizard-header span {
  color: #fff !important;
}
#gridTitle,
.wizard-header {
  background: #343a40 !important;
  border-bottom: 3px solid var(--v-primary) !important;
  border-top: 0 !important;
}

/* v3: tablas a ancho completo del contenedor */
table { width: 100%; }
#gridTable, .grid-table { width: 100%; min-width: 1260px; }