@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800;900&display=swap');
    :root{
      --bg:#07111f;
      --bg2:#0b1627;
      --panel:#0e1c2f;
      --panel2:#10243d;
      --line:rgba(140,205,255,.14);
      --line2:rgba(255,255,255,.08);
      --text:#f7fbff;
      --muted:#9fb2c8;
      --cyan:#18d7ff;
      --green:#74e21b;
      --blue:#2587ff;
      --red:#ff3b4f;
      --yellow:#ffd166;
      --orange:#ff8a3d;
      --shadow:0 22px 55px rgba(0,0,0,.35);
      --radius:18px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      color:var(--text);
      background:
        radial-gradient(circle at 16% 4%, rgba(24,215,255,.18), transparent 28%),
        radial-gradient(circle at 86% 10%, rgba(116,226,27,.11), transparent 28%),
        linear-gradient(135deg,#06101d 0%,#08162a 48%,#050910 100%);
      font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
      overflow-x:hidden;
    }
    .app{
      display:grid;
      grid-template-columns: 286px minmax(0,1fr);
      min-height:100vh;
    }
    aside{
      position:sticky;
      top:0;
      height:100vh;
      padding:22px 18px;
      background:rgba(5,12,22,.76);
      border-right:1px solid var(--line);
      backdrop-filter:blur(18px);
      overflow-y:auto;
    }
    .brand{display:flex;align-items:center;gap:12px;margin-bottom:20px}
    .brand-mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--green));color:#06111e;font-weight:900;box-shadow:0 0 38px rgba(24,215,255,.24)}
    .brand h1{font-family:'Bebas Neue',sans-serif;letter-spacing:.04em;font-size:30px;margin:0;line-height:1;color:white}.brand h1 span{color:var(--green)}
    .brand small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
    .building-card{background:linear-gradient(145deg,rgba(18,45,76,.84),rgba(7,18,32,.94));border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:18px;box-shadow:var(--shadow)}
    .building-card .name{font-size:18px;font-weight:900}.building-card .meta{color:var(--muted);font-size:12px;margin-top:6px;line-height:1.5}
    .mini-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}.mini-stat{padding:10px;border:1px solid var(--line2);border-radius:13px;background:rgba(255,255,255,.035)}.mini-stat b{display:block;font-size:16px}.mini-stat span{font-size:10px;color:var(--muted)}
    .nav-title{font-size:11px;color:#87a5c5;font-weight:900;text-transform:uppercase;letter-spacing:.13em;margin:18px 8px 9px}
    .nav{display:grid;gap:7px}.nav button{width:100%;display:flex;align-items:center;gap:10px;border:1px solid transparent;border-radius:13px;padding:11px 12px;background:transparent;color:#c9d7e7;font-weight:800;text-align:left;cursor:pointer;transition:.2s}.nav button i{width:18px;height:18px;color:#74cfff}.nav button:hover{background:rgba(255,255,255,.055);border-color:var(--line)}.nav button.active{background:linear-gradient(90deg,rgba(24,215,255,.18),rgba(116,226,27,.12));border-color:rgba(24,215,255,.28);color:white;box-shadow:inset 3px 0 0 var(--green)}
    main{padding:24px clamp(18px,3vw,42px) 42px;min-width:0}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.topbar h2{margin:0;font-size:clamp(26px,3vw,42px);letter-spacing:-.035em}.topbar p{margin:6px 0 0;color:var(--muted)}.actions{display:flex;gap:10px;flex-wrap:wrap}
    .btn{border:0;border-radius:13px;padding:11px 14px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.22s;white-space:nowrap}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,var(--green),#4ac800);color:#05110c}.btn-blue{background:linear-gradient(135deg,var(--blue),var(--cyan));color:white}.btn-dark{background:rgba(255,255,255,.08);border:1px solid var(--line);color:white;backdrop-filter:blur(10px)}.btn-red{background:rgba(255,59,79,.14);border:1px solid rgba(255,59,79,.32);color:#ff9aa5}.btn-small{padding:8px 10px;font-size:12px;border-radius:10px}
    .content{display:none}.content.active{display:block;animation:fadeUp .38s ease both}@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
    .grid{display:grid;gap:16px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .card{background:linear-gradient(145deg,rgba(15,33,56,.92),rgba(8,18,32,.92));border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);min-width:0}.card h3{margin:0 0 14px;font-size:18px}.card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.card-header h3{margin:0}.kpi{position:relative;overflow:hidden}.kpi:after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:rgba(24,215,255,.08)}.kpi .icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(24,215,255,.12);border:1px solid rgba(24,215,255,.24);margin-bottom:14px}.kpi b{font-size:30px;letter-spacing:-.04em}.kpi span{display:block;color:var(--muted);font-size:13px;margin-top:4px}.green{color:var(--green)}.cyan{color:var(--cyan)}.red{color:#ff6a78}.yellow{color:var(--yellow)}.muted{color:var(--muted)}
    table{width:100%;border-collapse:collapse;overflow:hidden}th,td{padding:12px 10px;border-bottom:1px solid var(--line2);font-size:13px;text-align:left;vertical-align:middle}th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#7fa0c2}tr:hover td{background:rgba(255,255,255,.025)}
    .badge{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:900}.ok{background:rgba(116,226,27,.13);color:#a9ff70}.warn{background:rgba(255,209,102,.13);color:#ffe29c}.bad{background:rgba(255,59,79,.13);color:#ff9aa5}.info{background:rgba(24,215,255,.13);color:#a8f1ff}.neutral{background:rgba(255,255,255,.08);color:#dbe8f6}
    .toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.field{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:12px;color:white;padding:11px 12px;outline:none;min-width:180px}.field:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(24,215,255,.11)}select.field option{color:#111}
    .split{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}.mobile-preview{max-width:330px;margin:auto;background:#050910;border:10px solid #111827;border-radius:36px;box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden}.phone-top{height:38px;background:#071426;display:flex;align-items:center;justify-content:center;color:#dbe8f6;font-size:12px}.phone-body{padding:16px;background:#f6f8fb;color:#0b1627;min-height:500px}.phone-card{background:white;border-radius:16px;padding:14px;box-shadow:0 12px 24px rgba(14,28,47,.1);margin-bottom:12px}.phone-card.dark{background:#082350;color:white}.phone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.phone-tile{background:#eef3f8;border-radius:10px;padding:9px;text-align:center;font-size:10px}.phone-tile i{color:#0b70ff;margin:auto;display:block;margin-bottom:4px}.chat{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow:auto}.bubble{max-width:84%;padding:10px 12px;border-radius:14px;font-size:13px;line-height:1.45}.bubble.bot{background:rgba(24,215,255,.11);border:1px solid rgba(24,215,255,.18);align-self:flex-start}.bubble.user{background:rgba(116,226,27,.14);border:1px solid rgba(116,226,27,.18);align-self:flex-end}.quick-replies{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.quick-replies button{font-size:12px}
    .calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.day{min-height:72px;border:1px solid var(--line2);border-radius:12px;padding:8px;background:rgba(255,255,255,.035);font-size:12px}.day.busy{border-color:rgba(255,59,79,.3);background:rgba(255,59,79,.07)}.day.free{border-color:rgba(116,226,27,.25)}.day strong{display:block;margin-bottom:6px}.chart{height:220px;display:flex;align-items:end;gap:12px;border-bottom:1px solid var(--line2);padding:14px 6px 0}.bar{flex:1;min-width:26px;border-radius:9px 9px 0 0;background:linear-gradient(180deg,var(--cyan),var(--blue));position:relative}.bar.greenbar{background:linear-gradient(180deg,var(--green),#349a11)}.bar.redbar{background:linear-gradient(180deg,#ff6a78,#b82034)}.bar span{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--muted);white-space:nowrap}.doc-list{display:grid;gap:10px}.doc{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border:1px solid var(--line2);border-radius:14px;background:rgba(255,255,255,.035)}.doc-left{display:flex;align-items:center;gap:10px}.doc-left i{color:var(--cyan)}
    .toast{position:fixed;right:20px;bottom:20px;background:#06111e;border:1px solid rgba(116,226,27,.38);color:white;border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);z-index:1000;display:none;max-width:360px}.toast.show{display:flex;align-items:flex-start;gap:10px;animation:toast .35s ease both}@keyframes toast{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
    .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(10px);z-index:999;display:none;align-items:center;justify-content:center;padding:20px}.modal-backdrop.show{display:flex}.modal{width:min(780px,100%);max-height:88vh;overflow:auto;background:linear-gradient(145deg,#10233c,#071321);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 32px 90px rgba(0,0,0,.55)}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.modal-head h3{margin:0}.close{border:0;background:rgba(255,255,255,.08);color:white;border-radius:12px;width:38px;height:38px;cursor:pointer}
    @media(max-width:1050px){.app{grid-template-columns:1fr}aside{position:relative;height:auto}.nav{grid-template-columns:repeat(2,minmax(0,1fr))}.split,.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column}.mobile-preview{max-width:100%}}


    /* FONDOS VISUALES ESTILO SOLUCIONES IA - usa img/edificio.webp como imagen principal */
    body{
      background:#050910;
    }

    .app{
      position:relative;
      isolation:isolate;
    }

    /* Capa principal: imagen visible, pero controlada para no afectar lectura */
    .app::before{
      content:"";
      position:fixed;
      inset:0;
      z-index:-4;
      pointer-events:none;
      background:
        linear-gradient(90deg, rgba(5,10,18,.92) 0%, rgba(5,10,18,.70) 34%, rgba(5,10,18,.48) 64%, rgba(5,10,18,.76) 100%),
        linear-gradient(0deg, rgba(5,10,18,.98) 0%, rgba(5,10,18,.28) 42%, rgba(5,10,18,.74) 100%),
        url("../img/edificio.webp");
      background-size:cover;
      background-position:center center;
      opacity:1;
      filter:saturate(.94) brightness(.86) contrast(1.06);
    }

    /* Capa secundaria tipo póster lateral para profundidad visual */
    .app::after{
      content:"";
      position:fixed;
      right:-5vw;
      bottom:-8vh;
      width:min(760px,58vw);
      height:min(470px,48vh);
      z-index:-3;
      pointer-events:none;
      background:
        linear-gradient(90deg, rgba(5,10,18,.96) 0%, rgba(5,10,18,.42) 34%, rgba(5,10,18,.08) 100%),
        linear-gradient(0deg, rgba(5,10,18,.92) 0%, rgba(5,10,18,.14) 64%, rgba(5,10,18,.34) 100%),
        url("../img/edificio.webp");
      background-size:cover;
      background-position:center;
      opacity:.46;
      filter:saturate(.95) brightness(.88) contrast(1.05);
      border-radius:32px;
      box-shadow:0 40px 120px rgba(0,0,0,.45);
      mask-image:linear-gradient(90deg, transparent 0%, black 18%, black 78%, transparent 100%);
      -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 18%, black 78%, transparent 100%);
    }

    aside,
    .card,
    .building-card,
    .topbar,
    .modal{
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
    }

    aside{
      background:linear-gradient(180deg, rgba(5,12,22,.88), rgba(5,12,22,.76));
      box-shadow:18px 0 60px rgba(0,0,0,.32);
    }

    main{
      position:relative;
      z-index:1;
    }

    /* Encabezado operativo con imagen de fondo más visible */
    .topbar{
      position:relative;
      overflow:hidden;
      padding:22px 24px;
      border:1px solid rgba(140,205,255,.18);
      border-radius:24px;
      background:linear-gradient(145deg, rgba(15,33,56,.76), rgba(8,18,32,.62));
      box-shadow:var(--shadow);
      min-height:156px;
      align-items:flex-end;
    }

    .topbar::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;
      background:
        linear-gradient(90deg, rgba(8,18,32,.94) 0%, rgba(8,18,32,.72) 38%, rgba(8,18,32,.22) 76%, rgba(8,18,32,.10) 100%),
        linear-gradient(0deg, rgba(8,18,32,.82) 0%, rgba(8,18,32,.28) 56%, rgba(8,18,32,.34) 100%),
        url("../img/edificio.webp");
      background-size:cover;
      background-position:center 48%;
      opacity:.86;
      filter:saturate(.94) brightness(.92) contrast(1.06);
      transform:scale(1.02);
    }

    .topbar::after{
      content:"";
      position:absolute;
      inset:auto 0 0 0;
      height:44%;
      z-index:0;
      pointer-events:none;
      background:linear-gradient(0deg, rgba(5,10,18,.92), transparent);
    }

    .topbar > *{
      position:relative;
      z-index:1;
    }

    .topbar h2{
      text-shadow:0 12px 34px rgba(0,0,0,.85);
    }

    .topbar p{
      color:#d8e7f7;
      text-shadow:0 8px 22px rgba(0,0,0,.86);
    }

    /* Tarjetas tipo vidrio: más transparencia para que el fondo respire */
    .card{
      background:linear-gradient(145deg, rgba(15,33,56,.78), rgba(8,18,32,.70));
      border-color:rgba(140,205,255,.16);
    }

    .card:hover{
      background:linear-gradient(145deg, rgba(18,42,70,.84), rgba(8,18,32,.76));
      border-color:rgba(24,215,255,.24);
    }

    .kpi{
      background:
        linear-gradient(145deg, rgba(15,33,56,.82), rgba(8,18,32,.72));
    }

    /* Tarjeta visual destacada cuando el módulo necesita más atmósfera */
    .card.visual-admin{
      position:relative;
      overflow:hidden;
      min-height:260px;
    }

    .card.visual-admin::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      background:
        linear-gradient(90deg, rgba(8,18,32,.92) 0%, rgba(8,18,32,.68) 46%, rgba(8,18,32,.24) 100%),
        linear-gradient(0deg, rgba(8,18,32,.84) 0%, rgba(8,18,32,.20) 62%, rgba(8,18,32,.32) 100%),
        url("../img/edificio.webp");
      background-size:cover;
      background-position:center;
      opacity:.78;
      filter:saturate(.96) brightness(.92) contrast(1.05);
      pointer-events:none;
      transform:scale(1.02);
    }

    .card.visual-admin > *{
      position:relative;
      z-index:1;
    }

    /* Fondo visual para tablas y módulos extensos sin sacrificar legibilidad */
    table,
    .doc,
    .day,
    .phone-card,
    .modal{
      box-shadow:0 12px 40px rgba(0,0,0,.14);
    }

    .content.active::before{
      content:"";
      display:block;
      height:0;
    }

    @media(max-width:1050px){
      .app::after{display:none}
      .topbar{min-height:180px;align-items:flex-start}
      .topbar::before{background-position:center}
    }


    /* RESPONSIVE MOBILE EXPERIENCE */
    .mobile-shellbar,
    .sidebar-overlay{
      display:none;
    }

    .table-wrap{
      width:100%;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      border-radius:14px;
    }

    .table-wrap table{
      min-width:760px;
    }

    @media(max-width:860px){
      body{
        padding-top:72px;
      }

      .mobile-shellbar{
        position:fixed;
        inset:0 0 auto 0;
        z-index:1200;
        height:72px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:12px 14px;
        background:linear-gradient(180deg, rgba(5,12,22,.96), rgba(5,12,22,.82));
        border-bottom:1px solid rgba(140,205,255,.18);
        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);
        box-shadow:0 18px 45px rgba(0,0,0,.28);
      }

      .mobile-brand{
        display:flex;
        align-items:center;
        gap:10px;
        min-width:0;
      }

      .mobile-brand strong{
        display:block;
        font-size:14px;
        line-height:1.05;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }

      .mobile-brand span{
        display:block;
        color:var(--muted);
        font-size:11px;
        margin-top:2px;
      }

      .mobile-menu-btn{
        flex:0 0 auto;
        width:46px;
        height:46px;
        border:1px solid rgba(140,205,255,.22);
        border-radius:14px;
        display:grid;
        place-items:center;
        background:rgba(255,255,255,.08);
        color:white;
        cursor:pointer;
      }

      .sidebar-overlay{
        position:fixed;
        inset:0;
        z-index:1100;
        background:rgba(0,0,0,.58);
        backdrop-filter:blur(4px);
        -webkit-backdrop-filter:blur(4px);
      }

      .sidebar-overlay.show{
        display:block;
      }

      .app{
        display:block;
        min-height:calc(100vh - 72px);
      }

      aside{
        position:fixed;
        top:0;
        left:0;
        z-index:1250;
        width:min(88vw,340px);
        max-width:340px;
        height:100dvh;
        padding:18px 16px 24px;
        transform:translateX(-105%);
        transition:transform .28s cubic-bezier(.22,1,.36,1);
        border-right:1px solid rgba(140,205,255,.22);
        border-radius:0 24px 24px 0;
      }

      aside.open{
        transform:translateX(0);
      }

      .brand{
        margin-bottom:14px;
      }

      .brand h1{
        font-size:26px;
      }

      .building-card{
        margin-bottom:14px;
        padding:14px;
      }

      .mini-stats{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:6px;
      }

      .mini-stat{
        padding:8px 6px;
      }

      .mini-stat b{
        font-size:14px;
      }

      .mini-stat span{
        font-size:9px;
      }

      .nav{
        grid-template-columns:1fr;
        gap:6px;
      }

      .nav button{
        padding:11px 12px;
        border-radius:12px;
        font-size:14px;
      }

      main{
        padding:14px 12px 28px;
      }

      .topbar{
        min-height:unset;
        display:block;
        padding:18px;
        border-radius:20px;
        margin-bottom:14px;
      }

      .topbar h2{
        font-size:clamp(24px,8vw,34px);
        line-height:1.05;
      }

      .topbar p{
        font-size:14px;
        line-height:1.45;
      }

      .actions{
        margin-top:14px;
        display:grid;
        grid-template-columns:1fr;
        gap:9px;
        width:100%;
      }

      .actions .btn,
      .card-header .btn,
      .toolbar .btn{
        width:100%;
        justify-content:center;
      }

      .grid,
      .grid-4,
      .grid-3,
      .grid-2,
      .split,
      .enhancement-grid{
        grid-template-columns:1fr !important;
        gap:12px;
      }

      .card{
        padding:14px;
        border-radius:16px;
      }

      .card-header{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
      }

      .card-header h3{
        font-size:17px;
      }

      .kpi{
        display:grid;
        grid-template-columns:auto 1fr;
        align-items:center;
        column-gap:12px;
      }

      .kpi .icon{
        margin-bottom:0;
        grid-row:span 2;
      }

      .kpi b{
        font-size:26px;
      }

      .kpi span{
        font-size:12px;
      }

      .toolbar{
        display:grid;
        grid-template-columns:1fr;
        gap:9px;
      }

      .field{
        width:100%;
        min-width:0;
      }

      .table-wrap{
        margin-top:8px;
        border:1px solid rgba(140,205,255,.12);
        background:rgba(5,12,22,.42);
      }

      th,td{
        padding:10px 9px;
        font-size:12px;
      }

      .doc{
        align-items:flex-start;
        flex-direction:column;
      }

      .doc-left{
        width:100%;
      }

      .calendar{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }

      .day{
        min-height:82px;
      }

      .chart{
        height:180px;
        gap:8px;
        overflow-x:auto;
      }

      .bar{
        min-width:44px;
      }

      .mobile-preview{
        max-width:310px;
      }

      .modal-backdrop{
        padding:10px;
        align-items:flex-end;
      }

      .modal{
        max-height:88dvh;
        border-radius:22px 22px 0 0;
        padding:18px;
      }

      .toast{
        left:12px;
        right:12px;
        bottom:12px;
        max-width:none;
      }

      .app::before{
        background-position:center top;
        filter:saturate(.9) brightness(.72) contrast(1.05);
      }

      .topbar::before{
        opacity:.72;
        background-position:center;
      }
    }

    @media(min-width:861px) and (max-width:1180px){
      .app{
        grid-template-columns:240px minmax(0,1fr);
      }

      aside{
        padding:18px 14px;
      }

      .brand h1{
        font-size:26px;
      }

      .grid-4{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }

      .grid-3{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }

      .split{
        grid-template-columns:1fr;
      }

      main{
        padding:20px 20px 34px;
      }
    }

    @media(max-width:420px){
      .mobile-brand strong{
        max-width:190px;
      }

      .calendar{
        grid-template-columns:1fr;
      }

      .btn{
        padding:10px 12px;
        font-size:13px;
      }

      .topbar{
        padding:16px;
      }
    }