/* =======================================================================
   Archivos URBE — estilos mobile-first
   ======================================================================= */
:root{
    --bg:#0f172a;
    --bg-2:#111c33;
    --surface:#1a2540;
    --surface-2:#212f52;
    --line:#2a3a5f;
    --text:#eef2fb;
    --muted:#93a3c4;
    --accent:#3b82f6;
    --accent-soft:#1e3a6b;
    --radius:16px;
    --safe-top:env(safe-area-inset-top,0px);
    --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    min-height:100dvh;
    padding-bottom:calc(24px + var(--safe-bottom));
}
a{color:inherit;text-decoration:none;}

/* ---------- Barra superior ---------- */
.topbar{
    position:sticky;top:0;z-index:20;
    background:rgba(15,23,42,.85);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--line);
    padding-top:var(--safe-top);
}
.topbar-inner{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 16px 8px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;}
.brand img{border-radius:8px;}
.logout{
    font-size:14px;font-weight:600;color:var(--muted);
    padding:7px 14px;border:1px solid var(--line);border-radius:999px;
}
.logout:active{background:var(--surface);}

.search-wrap{padding:0 16px 12px;}
#search{
    width:100%;padding:12px 16px;font-size:16px;
    color:var(--text);background:var(--surface);
    border:1px solid var(--line);border-radius:12px;outline:none;
}
#search::placeholder{color:var(--muted);}
#search:focus{border-color:var(--accent);}

/* ---------- Migas de pan ---------- */
.crumbs{
    display:flex;align-items:center;gap:6px;flex-wrap:wrap;
    padding:12px 16px 4px;font-size:13px;color:var(--muted);
}
.crumb{padding:4px 8px;border-radius:8px;background:var(--surface);white-space:nowrap;}
.crumb:active{background:var(--surface-2);}
.crumb-sep{opacity:.5;}

/* ---------- Lista ---------- */
.list{padding:8px 12px 0;display:flex;flex-direction:column;gap:8px;}
.row{
    display:flex;align-items:center;gap:14px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:14px 14px;
    transition:transform .06s ease,background .15s ease;
}
.row:active{transform:scale(.985);background:var(--surface-2);}
.row-up{color:var(--muted);}

.ic{
    flex:0 0 46px;height:46px;width:46px;
    display:flex;align-items:center;justify-content:center;
    font-size:24px;border-radius:12px;background:var(--bg-2);
}
.ic-folder{background:var(--accent-soft);}
.ic-pdf{background:#3a1d24;}
.ic-doc{background:#1c2c45;}
.ic-xls{background:#183328;}
.ic-ppt{background:#3a2a17;}
.ic-img{background:#2a2340;}
.ic-cad{background:#243040;}

.row-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;}
.row-name{
    font-size:16px;font-weight:600;line-height:1.25;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.row-meta{font-size:12.5px;color:var(--muted);}
.chev{color:var(--muted);font-size:20px;flex:0 0 auto;padding-left:4px;}

/* ---------- Vacío / sin resultados ---------- */
.empty{text-align:center;padding:60px 24px;color:var(--muted);}
.empty-ic{font-size:52px;margin-bottom:12px;}
.empty p{margin:0 0 6px;font-size:16px;color:var(--text);}
.empty small{font-size:13px;line-height:1.5;display:block;max-width:280px;margin:0 auto;}
.no-results{text-align:center;color:var(--muted);padding:40px 16px;font-size:15px;}

/* ---------- Pie ---------- */
.foot{
    text-align:center;color:var(--muted);font-size:12.5px;
    padding:20px 16px 0;
}

/* ---------- Login ---------- */
.login-body{
    display:flex;align-items:center;justify-content:center;
    min-height:100dvh;padding:24px;
    background:radial-gradient(120% 90% at 50% 0%,#16233f 0%,var(--bg) 60%);
}
.login-card{
    width:100%;max-width:380px;text-align:center;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:24px;
    padding:36px 26px 30px;
    box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.login-logo img{border-radius:18px;box-shadow:0 8px 24px rgba(59,130,246,.35);}
.login-card h1{margin:18px 0 6px;font-size:22px;}
.login-sub{margin:0 0 22px;color:var(--muted);font-size:14px;line-height:1.5;}
.pw-field{position:relative;margin-bottom:12px;}
.pw-field input{
    width:100%;padding:14px 46px 14px 16px;font-size:16px;
    color:var(--text);background:var(--bg-2);
    border:1px solid var(--line);border-radius:12px;outline:none;
}
.pw-field input:focus{border-color:var(--accent);}
.pw-toggle{
    position:absolute;right:8px;top:50%;transform:translateY(-50%);
    background:none;border:none;font-size:18px;cursor:pointer;
    padding:8px;opacity:.7;
}
.btn-primary{
    width:100%;padding:14px;font-size:16px;font-weight:700;
    color:#fff;background:var(--accent);border:none;border-radius:12px;
    cursor:pointer;
}
.btn-primary:active{background:#2f6fd6;}
.alert{
    background:#3a1d24;border:1px solid #6b2b39;color:#ffd7de;
    padding:11px 14px;border-radius:10px;font-size:14px;margin-bottom:16px;
}

/* ---------- Pantallas anchas (iPad / desktop) ---------- */
@media(min-width:720px){
    .topbar-inner,.search-wrap,.crumbs,.list,.foot{
        max-width:720px;margin-left:auto;margin-right:auto;
    }
    .list{padding-top:14px;}
}