:root {
      --azul: #004C9A; --azul-2: #003877; --azul-prof: #00305F; --verde: #2A7F20; --verde-marca: #42AC35; --verde-bg: #E8F5E6;
      --rojo: #B42318; --rojo-bg: #FDECEA; --ambar: #8A5200; --ambar-bg: #FFF3D9;
      --fondo: #F3F6FB; --panel: #FFFFFF; --borde: #DBE3EE; --texto: #152536;
      --tenue: #566577; --suave: #5B6B80;
      --sombra: 0 4px 20px -4px rgba(21,37,54,.07);
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; }
    body { font-family: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
           font-size: 14px; line-height: 1.45; color: var(--texto); background: var(--fondo); -webkit-font-smoothing: antialiased; }
    [hidden] { display: none !important; }
    button, input, select { font: inherit; color: inherit; }
    button { cursor: pointer; }
    button:disabled { cursor: not-allowed; opacity: .5; }
    :focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
    h1, h2, h3, p { margin: 0; }
    html { scroll-behavior: smooth; }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
    .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
    .ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    /* ---- Login ---- */
    .login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
             background: linear-gradient(160deg, var(--azul-prof) 0%, var(--azul) 100%); }
    .login-caja { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 24px; }
    .login-logo { height: 46px; align-self: flex-start; }
    .login form { background: var(--panel); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 14px;
                  box-shadow: 0 20px 50px -20px rgba(0,0,0,.45); }
    .login h1 { font-size: 20px; }
    .campo { display: flex; flex-direction: column; gap: 4px; }
    .campo label { font-size: 12px; font-weight: 600; color: var(--tenue); }
    .campo input { border: 1px solid #B9C5D6; border-radius: 10px; padding: 10px 12px; background: #fff; }
    .msg-error { background: var(--rojo-bg); color: var(--rojo); border-radius: 10px; padding: 8px 11px; font-size: 13px; }

    /* ---- Estructura ---- */
    .app { display: flex; min-height: 100vh; }
    .lado { width: 256px; flex: none; background: linear-gradient(180deg, var(--azul-prof) 0%, var(--azul) 100%); color: #fff;
            padding: 22px 16px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; height: 100vh; align-self: flex-start; }
    .marca { padding: 4px 8px 20px; border-bottom: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; gap: 6px; }
    .marca img { height: 40px; width: auto; align-self: flex-start; margin-bottom: 12px; }
    .marca h1 { font-size: 17px; line-height: 1.25; font-weight: 700; }
    .marca p { font-size: 12px; color: rgba(255,255,255,.75); }
    .lado nav { display: flex; flex-direction: column; gap: 2px; }
    .lado nav a { color: rgba(255,255,255,.88); text-decoration: none; padding: 10px 12px; border-radius: 10px; display: flex; align-items: center;
                  gap: 12px; font-weight: 500; transition: background .15s, color .15s; }
    .lado nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
    .lado .pie { margin-top: auto; font-size: 12px; color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 8px; padding: 0 8px; }
    .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--verde-marca); }
    .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .barra { background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde); min-height: 64px; padding: 10px 24px;
             display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; position: sticky; top: 0; z-index: 5; }
    .barra .acc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .quien { font-size: 12px; color: var(--tenue); font-weight: 600; }
    main { padding: 22px 24px 60px; display: flex; flex-direction: column; gap: 18px; max-width: 1600px; width: 100%; margin: 0 auto; }
    .panel { background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; padding: 18px 20px; box-shadow: var(--sombra); scroll-margin-top: 80px; }
    .panel > h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
    .cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
    .cab h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
    .nota { font-size: 12px; color: var(--suave); }
    section[id], .resultados { scroll-margin-top: 80px; }

    /* ---- Pasos (stepper) ---- */
    .pasos { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
    .paso { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--suave); }
    .paso .num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #E5E9F0; color: #4A5568;
                 font-size: 13px; font-weight: 700; transition: background .2s, box-shadow .2s, color .2s; }
    .paso + .paso::before { content: ""; width: 34px; height: 2px; border-radius: 2px; background: #CBD3DE; margin: 0 10px; }
    .paso.hecho .num { background: var(--verde-marca); color: #fff; }
    .paso.hecho + .paso::before { background: var(--verde-marca); }
    .paso.activo { color: var(--texto); }
    .paso.activo .num { background: var(--azul); color: #fff; box-shadow: 0 0 0 4px rgba(0,76,154,.18); }

    /* ---- Botones ---- */
    .btn { border: 1px solid var(--borde); background: #fff; border-radius: 10px; padding: 8px 14px; font-weight: 600; display: inline-flex;
           align-items: center; justify-content: center; gap: 8px; transition: border-color .15s, background .15s, box-shadow .15s; }
    .btn:hover:not(:disabled) { border-color: #9FB0C6; }
    .btn.pri { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: 0 1px 2px rgba(0,48,95,.25); }
    .btn.pri:hover:not(:disabled) { background: var(--azul-2); border-color: var(--azul-2); box-shadow: 0 4px 12px -4px rgba(0,48,95,.45); }
    .btn.ok { border-color: rgba(42,127,32,.45); color: var(--verde); }
    .btn.ok:hover:not(:disabled) { background: var(--verde-bg); border-color: var(--verde); }
    .btn.chico { padding: 5px 10px; font-size: 12px; font-weight: 500; }
    .btn.grande { padding: 11px 20px; font-size: 14px; border-radius: 12px; }
    .btn.peligro:hover:not(:disabled) { border-color: var(--rojo); color: var(--rojo); }
    .btn-ico { border: 0; background: transparent; color: #AEBBCC; border-radius: 8px; padding: 5px; display: inline-grid; place-items: center; }
    .btn-ico:hover { background: rgba(255,255,255,.1); color: #fff; }
    .acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

    /* ---- Zona de arrastre (grande sin archivos; barra compacta con archivos) ---- */
    .drop { border: 2px dashed #B6C2D2; border-radius: 14px; padding: 34px 16px; text-align: center; display: flex; flex-direction: column;
            align-items: center; gap: 10px; transition: border-color .2s, background .2s; }
    .drop.sobre { border-color: var(--azul); background: #EEF4FB; }
    .drop strong { font-size: 15px; }
    .drop-txt { display: flex; flex-direction: column; gap: 4px; }
    .drop .nube { width: 40px; height: 40px; color: var(--azul); opacity: .65; }
    .pz.compacta { padding: 10px 14px; }
    .pz.compacta .drop { flex-direction: row; border-width: 1px; padding: 8px 12px; gap: 12px; text-align: left; justify-content: flex-start; }
    .pz.compacta .drop .nube { width: 22px; height: 22px; }
    .pz.compacta .drop .larga { display: none; }
    .pz.compacta .drop strong { font-size: 13px; font-weight: 600; }
    .pz.compacta .btn { padding: 6px 12px; font-size: 13px; }
    .pz.compacta .btn.pri { background: #fff; color: var(--azul); border-color: rgba(0,76,154,.35); box-shadow: none; }

    /* ---- Indicadores ---- */
    .resultados { display: flex; flex-direction: column; gap: 18px; }
    .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .kpi { background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; padding: 16px; display: flex; gap: 14px; align-items: flex-start;
           box-shadow: var(--sombra); transition: box-shadow .2s, transform .2s; }
    .kpi:hover { box-shadow: 0 10px 28px -10px rgba(21,37,54,.18); transform: translateY(-1px); }
    .kpi-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
    .kpi-ico .ico { width: 20px; height: 20px; }
    .kpi-ico.azul { background: rgba(0,76,154,.1); color: var(--azul); }
    .kpi-ico.verde { background: rgba(66,172,53,.14); color: var(--verde); }
    .kpi-ico.ambar { background: rgba(217,134,11,.14); color: #B26A00; }
    .kpi-ico.gris { background: #EEF1F5; color: var(--suave); }
    .kpi .t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
    .kpi .v { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 2px; }

    /* ---- Tablas ---- */
    .tabla { overflow-x: auto; }
    .tabla.alta { max-height: 62vh; overflow: auto; border: 1px solid var(--borde); border-radius: 12px; }
    table { border-collapse: collapse; width: 100%; font-size: 13px; }
    th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); font-weight: 700;
         padding: 8px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
    td { padding: 8px 10px; border-bottom: 1px solid #E8EDF4; white-space: nowrap; vertical-align: middle; }
    tbody tr:hover td { background: #F7F9FC; }
    .t-res thead th { position: sticky; top: 0; z-index: 2; background: var(--fondo); }
    .t-res th:first-child, .t-res td:first-child { position: sticky; left: 0; background: #fff; border-right: 1px solid #E8EDF4; font-weight: 600; }
    .t-res thead th:first-child { z-index: 3; background: var(--fondo); }
    .t-res tbody tr:hover td:first-child { background: #F7F9FC; }
    td select, td input { border: 1px solid #B9C5D6; border-radius: 8px; padding: 6px 9px; background: #fff; font-size: 12px; max-width: 230px; }
    select { appearance: none; -webkit-appearance: none; padding-right: 28px;
             background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 9l-7 7-7-7'/></svg>") no-repeat right 8px center / 14px; }
    td input:disabled, td select:disabled { background-color: #F1F4F8; opacity: .65; }
    td input::placeholder { color: var(--suave); }
    select.r-concentrado { background-color: #EAF1FB; color: #1D4ED8; border-color: #BFD3F2; border-radius: 999px; padding-left: 12px; font-weight: 600; }
    select.r-facturacion { background-color: var(--verde-bg); color: #166534; border-color: #B6DDB0; border-radius: 999px; padding-left: 12px; font-weight: 600; }
    select.r-torre { background-color: var(--ambar-bg); color: var(--ambar); border-color: #EBCB8B; border-radius: 999px; padding-left: 12px; font-weight: 600; }
    select.r-naves { background-color: #EEF1F5; color: #334155; border-color: #C9D2DE; border-radius: 999px; padding-left: 12px; font-weight: 600; }
    select.r-ignorar { background-color: #fff; color: #64748B; border-color: var(--borde); border-radius: 999px; padding-left: 12px; text-decoration: line-through; }
    tr.f-bloqueo td { background: var(--rojo-bg); }
    tr.f-aviso td { background: var(--ambar-bg); }
    .chip { display: inline-block; border-radius: 6px; padding: 1px 7px; font-size: 11px; font-weight: 600; }
    .chip.rojo { background: var(--rojo-bg); color: var(--rojo); border: 1px solid #F3B8B1; }
    .chip.verde { background: var(--verde-bg); color: #166534; border: 1px solid #B6DDB0; }
    .chip.ambar { background: var(--ambar-bg); color: var(--ambar); border: 1px solid #EBCB8B; }
    .chip.gris { background: #EEF1F5; color: var(--tenue); border: 1px solid var(--borde); }
    .vacio { text-align: center; color: var(--suave); padding: 26px 8px; }
    .t-fuentes .archivo { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
    .t-fuentes .archivo .nom { overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
    .t-fuentes .archivo .ico { color: var(--azul); }
    .t-fuentes .sub { display: flex; align-items: center; gap: 6px; padding-left: 26px; font-size: 12px; color: var(--suave); }
    .t-fuentes .sub .ico { width: 14px; height: 14px; }
    .t-fuentes tr.cont td { border-top: 1px dashed #D5DDE8; }
    .t-fuentes .fin { text-align: right; }
    .t-fuentes td:nth-child(2) select { width: 180px; }
    .t-fuentes td:nth-child(3) select { width: 160px; }
    .t-fuentes td:nth-child(4) input { width: 130px; }
    .btn-ico.t { color: var(--suave); }
    .t-fuentes .btn-ico:hover { background: #EEF1F5; color: var(--texto); }
    .t-fuentes .btn-ico.peligro:hover { background: var(--rojo-bg); color: var(--rojo); }
    .nave-sel { display: flex; align-items: center; gap: 8px; }
    .nave-sel select { border: 1px solid #B9C5D6; border-radius: 10px; padding: 7px 28px 7px 12px; font-size: 13px; }

    /* ---- Avisos fijos ---- */
    .franja { border-radius: 12px; padding: 10px 14px; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
    .franja.ambar { background: var(--ambar-bg); color: var(--ambar); }
    .franja.azul { background: #E6EEF8; color: var(--azul); }

    /* ---- Registro del proceso (terminal) ---- */
    .consola { background: #0F172A; border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); scroll-margin-top: 80px; }
    .consola-barra { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08);
                     color: #CBD5E1; font-family: Consolas, Menlo, monospace; font-size: 12px; }
    .consola-barra strong { font-weight: 600; letter-spacing: .02em; }
    .consola-barra .cuenta { background: rgba(255,255,255,.08); border-radius: 6px; padding: 1px 7px; margin-right: auto; color: #94A3B8; }
    .puntos { display: inline-flex; gap: 6px; }
    .puntos i { width: 10px; height: 10px; border-radius: 50%; background: rgba(248,113,113,.6); }
    .puntos i:nth-child(2) { background: rgba(251,191,36,.6); }
    .puntos i:nth-child(3) { background: rgba(52,211,153,.6); }
    #btn-bitacora .ico { transition: transform .2s; }
    #btn-bitacora[aria-expanded="false"] .ico { transform: rotate(-90deg); }
    .bitacora { max-height: 230px; overflow: auto; padding: 14px 16px; font-family: Consolas, Menlo, monospace; font-size: 12px; line-height: 1.6; color: #94A3B8; }
    .consola.cerrada .bitacora { display: none; }
    .bitacora .l-ok { color: #34D399; }
    .bitacora .l-warn { color: #FCD34D; }
    .bitacora .l-err { color: #F87171; }
    .bitacora .l-info { color: #7DD3FC; }
    .bitacora .l-tit { color: #F1F5F9; font-weight: 700; }

    /* ---- Ventanas ---- */
    .velo { position: fixed; inset: 0; background: rgba(15,24,38,.55); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center;
            padding: 5vh 16px; z-index: 20; overflow-y: auto; }
    .ventana { background: var(--panel); border-radius: 18px; width: 100%; max-width: 660px; padding: 24px; display: flex; flex-direction: column; gap: 14px;
               box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); }
    .ventana h2 { font-size: 19px; }
    .ventana .tope { border-left: 5px solid var(--rojo); padding-left: 12px; }
    .ventana .tope.ambar { border-left-color: #D9860B; }
    .lista { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; }
    .item { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
    .item.bloqueo { border-left: 4px solid var(--rojo); }
    .item.aviso { border-left: 4px solid #D9860B; }
    .item h3 { font-size: 14px; }
    .item .donde { font-size: 12px; color: var(--tenue); overflow-wrap: anywhere; }
    .item .donde b { color: var(--texto); }
    .ventana .pie { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
    .toast { position: fixed; right: 18px; top: 78px; z-index: 30; background: #fff; color: var(--texto); border: 1px solid var(--borde);
             border-left: 4px solid var(--verde-marca); border-radius: 12px; padding: 11px 16px; max-width: 420px; font-size: 13px;
             box-shadow: 0 14px 34px -12px rgba(21,37,54,.35); }
    .toast.error { border-left-color: #C62828; }
    .girando::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 7px; border: 2px solid currentColor;
                       border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: giro .7s linear infinite; }
    @keyframes giro { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { .girando::before { animation: none; } .kpi, .kpi:hover { transition: none; transform: none; } }

    /* ---- Pantallas medianas y chicas ---- */
    @media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 860px) {
      .app { flex-direction: column; }
      .lado { width: auto; flex-direction: row; align-items: center; padding: 10px 14px; gap: 12px; position: static; height: auto; align-self: stretch; }
      .marca { padding: 0; border: 0; }
      .marca img { height: 30px; margin: 0; }
      .marca h1, .marca p, .lado nav, .lado .pie { display: none; }
      main { padding: 16px 14px 48px; }
      .barra { padding: 10px 14px; }
      .paso:not(.activo) { display: none; }
      .paso + .paso::before { display: none; }
      .paso .txt { display: inline; }
      .btn .t { display: none; }
      .t-fuentes .archivo .nom { max-width: 190px; }
    }
    @media (max-width: 520px) { .kpi .v { font-size: 24px; } .kpi { padding: 12px; gap: 10px; } .kpi-ico { width: 34px; height: 34px; } .acciones .btn.grande { flex: 1; } }