:root {
      --navy: #1d1d1b;   /* negro de marca: textos */
      --blue: #941b80;   /* morado de marca: acciones principales */
      --cyan: #1be9f1;
      --sky: #43a5cc;
      --purple: #941b80;
      --grad: linear-gradient(90deg, #1be9f1 0%, #43a5cc 45%, #941b80 100%);
      --bg: #f4f6f8;
      --line: #e3e6ea;
      --muted: #4d5b6c;
      --green: #14804a;
      --red: #c73535;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      font-size: 16px;
      line-height: 1.45;
      background: var(--bg);
      color: var(--navy);
    }
    header {
      background: var(--navy);
      color: white;
      padding: 18px 20px;
    }
    header h1 { margin: 0; font-size: 19px; }
    header small { opacity: .85; font-size: 14px; }
    main {
      max-width: 1050px;
      margin: 24px auto;
      padding: 0 15px;
    }
    .card {
      background: white;
      border: 1px solid var(--line);
      border-radius: 13px;
      padding: 20px;
      margin-bottom: 16px;
    }
    .login {
      max-width: 440px;
      margin: 65px auto;
    }
    h3 { margin: 0 0 15px; }
    label {
      display: block;
      font-weight: 600;
      font-size: 15px;
      margin: 16px 0 6px;
    }
    input, select, textarea {
      width: 100%;
      padding: 12px;
      min-height: 48px;
      border: 1px solid #8a97a8;
      border-radius: 8px;
      font-size: 16px;
      color: var(--navy);
      background: white;
    }
    textarea { min-height: 75px; }
    button {
      border: 0;
      border-radius: 8px;
      padding: 12px 18px;
      min-height: 48px;
      font-size: 16px;
      background: var(--blue);
      color: white;
      font-weight: 600;
      cursor: pointer;
    }
    button:disabled {
      opacity: .5;
      cursor: not-allowed;
    }
    button.secondary {
      background: #e8eef7;
      color: var(--navy);
    }
    button.danger { background: var(--red); }
    button.success { background: var(--green); }
    .full { width: 100%; margin-top: 16px; }
    .hidden { display: none !important; }
    .muted { color: var(--muted); font-size: 14px; }
    .tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }
    .tabs button {
      background: white;
      color: var(--navy);
      border: 1px solid var(--line);
    }
    .tabs button.active {
      background: var(--navy);
      color: white;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 12px;
    }
    .metric {
      background: white;
      padding: 18px;
      border-radius: 11px;
      border: 1px solid var(--line);
    }
    .metric strong {
      display: block;
      font-size: 26px;
      margin-top: 7px;
    }
    .record {
      padding: 15px 0;
      border-bottom: 1px solid var(--line);
    }
    .record:last-child { border: none; }
    .record-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
    }
    .badge {
      display: inline-block;
      padding: 5px 9px;
      font-size: 12px;
      border-radius: 20px;
      background: #fff1d1;
      color: #8c5900;
    }
    .badge.Aprobado {
      background: #ddf5e7;
      color: #116b3b;
    }
    .badge.Rechazado {
      background: #ffe3e3;
      color: #a32323;
    }
    .actions {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      flex-wrap: wrap;
    }
    .two {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    th, td {
      padding: 12px 8px;
      border-bottom: 1px solid var(--line);
      text-align: left;
    }
    th { background: #f5f7fa; }
    .scroll { overflow-x: auto; }
    .notice {
      padding: 12px;
      border-radius: 8px;
      background: #eaf2ff;
      margin-bottom: 15px;
      font-size: 15px;
    }
    .error {
      background: #ffe5e5;
      color: #9c2424;
    }
    .check {
      display: flex;
      gap: 9px;
      align-items: center;
      margin-top: 15px;
    }
    .check input { width: 24px; height: 24px; min-height: 0; flex: none; }
    #busy {
      position: fixed;
      inset: 0;
      background: #142a4255;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 50;
    }
    #busy div {
      background: white;
      padding: 22px 35px;
      border-radius: 12px;
    }
    @media(max-width:650px) {
      main { margin-top: 12px; }
      .grid, .two { grid-template-columns: 1fr; }
      .card { padding: 16px; }
      .metric strong { font-size: 22px; }
    }
  
.install-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:17px}body{overscroll-behavior-y:contain}

.filter-panel { padding:16px; margin:0 0 20px; border:1px solid var(--line); border-radius:10px; background:#f8fafc; }
.filter-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px; }
.filter-grid label { margin-top:0; }
.filter-actions { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px; }
.filter-actions .actions { margin:0; }
#printReport { display:none; }
@media(max-width:650px) {
  .filter-grid { grid-template-columns:1fr; }
  .filter-actions .actions { width:100%; }
  .filter-actions button { flex:1; }
}
@media print {
  @page { size:A4 landscape; margin:12mm; }
  body.printing { background:white;color:#111; }
  body.printing > :not(#printReport) { display:none !important; }
  body.printing #printReport { display:block !important; font-size:10pt; }
  #printReport h1 { font-size:17pt;margin:0 0 8mm; }
  #printReport h2 { font-size:14pt; }
  #printReport p { line-height:1.45; }
  #printReport table { table-layout:fixed;font-size:9pt; }
  #printReport thead { display:table-header-group; }
  #printReport tr { break-inside:avoid;page-break-inside:avoid; }
  #printReport th, #printReport td { padding:7px 5px;color:#111;overflow-wrap:anywhere;vertical-align:top;border-bottom:1px solid #bbb; }
  #printReport th { background:#eee; }
  .print-note { font-size:9pt;margin-top:8mm; }
}

/* ---------- Accesibilidad y asistente de instalación ---------- */
h2 { margin: 0 0 15px; font-size: 20px; }
h3 { font-size: 18px; }
.user-name { font-size: 17px; margin: 0; }
.req { color: var(--red); }
.field-help { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.check.small { font-weight: 400; margin-top: 10px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:8px; top:-60px; background:white; color:var(--navy); padding:10px 14px; border-radius:8px; z-index:100; font-weight:600; }
.skip-link:focus { top:8px; }
:focus-visible { outline: 3px solid #2463eb; outline-offset: 2px; }
main:focus, .user-name:focus { outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #2463eb40; outline: none; }
.tabs button { min-height: 48px; }
.tabs button[aria-current="true"] { background: var(--navy); color: white; }
.install-btn { display:inline-flex; align-items:center; gap:8px; }
.notice.error { background:#ffe5e5; color:#8f1f1f; }
.notice.success { background:#ddf5e7; color:#0f5c33; }
#busy div { font-size: 18px; }

dialog#installDialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow:auto; border:0; border-radius:14px; padding:20px; color:var(--navy); }
dialog#installDialog::backdrop { background:#142a4299; }
.dialog-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:6px; }
.dialog-head h2 { margin:0; }
.platforms { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0 18px; }
.platform { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px; background:white; color:var(--navy); border:2px solid var(--line); border-radius:12px; text-align:center; line-height:1.25; }
.platform[aria-pressed="true"] { border-color:var(--blue); background:#eaf2ff; }
.install-panel h3 { margin-top:4px; }
.steps { padding-left:0; list-style:none; counter-reset:paso; margin:12px 0 0; }
.steps li { counter-increment:paso; position:relative; padding:10px 0 10px 46px; border-bottom:1px solid var(--line); }
.steps li:last-child { border-bottom:0; }
.steps li::before { content:counter(paso); position:absolute; left:0; top:8px; width:32px; height:32px; border-radius:50%; background:var(--navy); color:white; display:flex; align-items:center; justify-content:center; font-weight:700; }
.kbd { display:inline-block; padding:0 7px; border:1px solid #8a97a8; border-radius:6px; font-weight:700; }
.inline-icon { vertical-align:middle; color:var(--blue); }
button.big { font-size:18px; min-height:56px; }
@media(max-width:650px) {
  .platforms { grid-template-columns:1fr; }
  .platform { flex-direction:row; justify-content:flex-start; padding:12px 14px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; } }

/* ---------- Identidad visual Conectino ---------- */
header { background:#fff; color:var(--navy); padding:14px 20px 16px; position:relative; box-shadow:0 1px 0 var(--line); }
header::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--grad); }
.brand { display:flex; align-items:center; gap:16px; flex-wrap:wrap; max-width:1050px; margin:0 auto; }
.logo { height:40px; width:auto; display:block; }
.brand-text { border-left:2px solid var(--line); padding-left:16px; }
header h1 { font-size:19px; letter-spacing:.2px; }
header small { opacity:1; color:var(--muted); }
.login { position:relative; overflow:hidden; }
.login::before { content:""; position:absolute; top:0; left:0; right:0; height:5px; background:var(--grad); }
.metric { border-top:4px solid var(--sky); }
.notice { background:#e9f8fb; border-left:4px solid var(--sky); }
.notice.error { border-left-color:var(--red); }
.notice.success { border-left-color:var(--green); }
button.secondary { background:#eef0f3; color:var(--navy); }
.tabs button.active, .tabs button[aria-current="true"] { background:var(--navy); color:#fff; border-color:var(--navy); box-shadow:inset 0 -4px 0 var(--cyan); }
:focus-visible { outline-color:var(--purple); }
input:focus, select:focus, textarea:focus { border-color:var(--purple); box-shadow:0 0 0 3px #941b8033; }
.platform[aria-pressed="true"] { border-color:var(--purple); background:#f8edf6; }
.steps li::before { background:var(--purple); }
#busy { background:#1d1d1b66; }
dialog#installDialog::backdrop { background:#1d1d1b99; }
@media(max-width:650px) {
  .logo { height:32px; }
  .brand { gap:10px; }
  .brand-text { border-left:0; padding-left:0; flex-basis:100%; }
  header h1 { font-size:17px; }
}