@charset "utf-8";
/* CSS Document */
 :root{
      --bg:#0f172a;         /* slate-900 */
      --card:#111827;       /* gray-900 */
      --muted:#1f2937;      /* gray-800 */
      --text:#e5e7eb;       /* gray-200 */
      --accent:#22c55e;     /* green-500 */
      --accent-2:#60a5fa;   /* blue-400 */
      --warn:#f59e0b;       /* amber-500 */
      --danger:#ef4444;     /* red-500 */
      --lila:#c084fc;       /* violet-400 (lila) */
      --lila-soft:#ede9fe;  /* violet-100 */
      --ok:#10b981;         /* emerald-500 */
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius:18px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;background:linear-gradient(180deg,#0b1024, #0f172a 30%, #0b1024);color:var(--text);font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";}
    header{
      position:sticky;top:0;z-index:50;background:rgba(15,23,42,.7);backdrop-filter: blur(10px);
      border-bottom:1px solid #243045
    }
    .container{max-width:1200px;margin:0 auto;padding:18px}
    .brand{display:flex;gap:14px;align-items:center}
    .brand .logo{width:38px;height:38px;border-radius:12px}
    .brand h1{font-size:18px;margin:0;font-weight:700;letter-spacing:.4px}

    nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
    .tab{padding:10px 14px;border:1px solid #2b3753;border-radius:12px;background:#0b1224;cursor:pointer;transition:.2s}
    .tab.active{background:linear-gradient(180deg,#152143,#0e1730);border-color:#3a4a75}

    .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}

    .card{background:linear-gradient(180deg,#0c142a,#0a1121);border:1px solid #203154;border-radius:var(--radius);box-shadow:var(--shadow)}
    .card h2{margin:0 0 8px 0;font-size:18px}
    .card .head{padding:16px;border-bottom:1px solid #1b2947;display:flex;align-items:center;justify-content:space-between}
    .card .body{padding:16px}

    .btn{border:1px solid #2c3b5e;background:#0d1731;color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer;transition:.2s}
    .btn:hover{transform:translateY(-2px)}
    .btn.primary{background:linear-gradient(180deg,#0e7a40,#0a5b31);border-color:#148a49}
    .btn.warn{background:linear-gradient(180deg,#7a4f0e,#5b3c0a);border-color:#a06a12}
    .btn.danger{background:linear-gradient(180deg,#7a0e1f,#5b0a16);border-color:#b21b2b}
    .btn.ghost{background:transparent;border-color:#2b3753}

    input, select, textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #2b3753;background:#0b1224;color:var(--text)}
    label{font-size:12px;opacity:.85}
    .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
    .row-2{display:grid;grid-template-columns:1fr 1fr ;gap:12px}

    /* Casas: cards */
    .house-list{display:grid;grid-template-columns:repeat(auto-fill, minmax(260px,1fr));gap:16px}
    .house{border:1px solid #213258;border-radius:16px;overflow:hidden;background:#0c142a;transition:.2s}
    .house:hover{transform:translateY(-4px)}
    .house .thumb{aspect-ratio:16/10;background:#111c36;display:flex;align-items:center;justify-content:center}
    .house .thumb img{width:100%;height:100%;object-fit:cover}
    .house .meta{padding:12px}
    .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid #2b3753;background:#0b1224;font-size:12px}
    .badge.lila{background:var(--lila-soft);border-color:#a78bfa;color:#4c1d95}
    .badge.ok{background:#ecfdf5;border-color:#10b981;color:#064e3b}

    /* Tables */
    table{width:100%;border-collapse:separate;border-spacing:0 8px}
    th,td{text-align:left;padding:12px 14px}
    thead th{font-size:12px;opacity:.8}
    tbody tr{background:#0b1224;border:1px solid #203154}
    tbody tr td:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px}
    tbody tr td:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px}
    tr.debt{background:linear-gradient(180deg,#f5f3ff,#f3e8ff);color:#3b0764}
    tr.debt td{border-color:#ddd6fe}

    /* Modal */
    .modal{position:fixed;inset:0;background:rgba(3,6,17,.6);backdrop-filter: blur(6px);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}
    .modal.open{display:flex}
    .modal .panel{background:linear-gradient(180deg,#0c142a,#0a1121);border:1px solid #203154;border-radius:22px;max-width:950px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow)}

    /* Gallery */
    .gallery{display:grid;grid-template-columns:repeat(auto-fill, minmax(110px,1fr));gap:8px}
    .gallery img{width:100%;height:90px;object-fit:cover;border-radius:10px;border:1px solid #203154}

    /* Footer small */
    footer{opacity:.65;padding:30px 0;text-align:center}

    .right{display:flex;gap:8px;align-items:center}
    .muted{opacity:.8}
    .chip{display:inline-flex;gap:6px;align-items:center;padding:6px 10px;border-radius:999px;background:#0b1224;border:1px solid #2b3753;font-size:12px}

    .empty{opacity:.75;border:1px dashed #304065;padding:18px;border-radius:14px;text-align:center}

    @media (max-width:720px){
      .row, .row-3{grid-template-columns:1fr}
    }
body { font-family: Arial, sans-serif; margin:0; padding:0; }
    header { background:#070a17; color:#fff; padding:1rem; text-align:center; }
    nav { display:flex;  flex-wrap: wrap; flex-direction: row; justify-content: space-around; }
    nav button { flex:1; padding:1rem; background:#444; color:#fff; border:none; cursor:pointer; }
    nav button.active { background:#222; font-weight:bold; }
    main { padding:1rem; }