/* UPMS Flip — estilo institucional "Nieve" */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font-family); background:var(--bg-light); color:var(--text-primary); min-height:100vh; display:flex; flex-direction:column; }

/* Topbar */
.topbar { background:#fff; border-bottom:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between; padding:0 24px; height:60px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text-primary); font-size:1.05rem; }
.brand img { height:38px; }
.brand strong { color:var(--primary); }
.topbar nav { display:flex; gap:4px; }
.topbar nav a { text-decoration:none; color:var(--text-secondary); padding:8px 14px; border-radius:var(--radius); font-size:.88rem; font-weight:500; }
.topbar nav a:hover { background:var(--bg-light); color:var(--text-primary); }
.topbar nav a.logout { color:var(--danger); }

.container { flex:1; width:100%; max-width:1100px; margin:0 auto; padding:28px 24px; }
.footer { text-align:center; padding:14px; color:var(--text-light); font-size:.75rem; border-top:1px solid var(--border-color); background:#fff; }

/* Encabezado de página */
.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.page-head h1 { font-size:1.5rem; font-weight:800; letter-spacing:-.5px; }

/* Stats */
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:24px; }
.stat-card { background:#fff; border:1px solid var(--border-color); border-radius:var(--radius); padding:18px; }
.stat-num { display:block; font-size:2.4rem; font-weight:800; letter-spacing:-1.5px; }
.stat-label { color:var(--text-secondary); font-size:.8rem; }

/* Cards y formularios */
.card { background:#fff; border:1px solid var(--border-color); border-radius:var(--radius); padding:24px; }
.form-card { max-width:560px; }
label { display:block; font-size:.82rem; font-weight:600; margin:14px 0 5px; }
label:first-of-type { margin-top:0; }
input[type=text], input[type=email], input[type=password], input[type=file], textarea {
    width:100%; padding:9px 12px; border:1px solid var(--border-color); border-radius:var(--radius);
    font-family:inherit; font-size:.9rem; background:#fff;
}
input:focus, textarea:focus { outline:2px solid var(--primary); outline-offset:-1px; border-color:var(--primary); }
label.check { display:flex; align-items:center; gap:8px; font-weight:500; }
.hint { color:var(--text-light); font-size:.78rem; margin-top:12px; }

/* Botones */
.btn { display:inline-block; background:#fff; border:1px solid var(--border-color); color:var(--text-primary);
    padding:9px 16px; border-radius:var(--radius); font-size:.85rem; font-weight:600; text-decoration:none; cursor:pointer; font-family:inherit; }
.btn:hover { background:var(--bg-light); }
.btn-primary { background:var(--primary); border-color:var(--primary); color:#fff; margin-top:16px; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-danger { color:var(--danger); border-color:#f3caca; }
.btn-danger:hover { background:#fdf2f2; }
.btn-sm { padding:5px 10px; font-size:.78rem; }
.btn-block { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* Tabla */
.table-wrap { background:#fff; border:1px solid var(--border-color); border-radius:var(--radius); overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.86rem; }
th { text-align:left; padding:11px 14px; border-bottom:1px solid var(--border-color); color:var(--text-secondary); font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; }
td { padding:11px 14px; border-bottom:1px solid var(--border-color); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
.thumb { width:44px; height:60px; object-fit:cover; border:1px solid var(--border-color); border-radius:4px; }
.mini-link { color:var(--primary); font-size:.75rem; text-decoration:none; }
.btn-copy { background:none; border:none; cursor:pointer; font-size:.9rem; color:var(--text-secondary); }
.actions { white-space:nowrap; }
.actions .inline { display:inline; }
.actions > * { margin-right:4px; }

/* Badges (outlined) */
.badge { display:inline-block; padding:3px 9px; border-radius:99px; font-size:.72rem; font-weight:600; border:1px solid; }
.badge-success { color:var(--success); border-color:var(--success); }
.badge-warning { color:var(--warning); border-color:var(--warning); }
.badge-muted { color:var(--text-secondary); border-color:var(--border-color); }

/* Alertas */
.alert { padding:11px 15px; border-radius:var(--radius); font-size:.86rem; margin-bottom:18px; border:1px solid; }
.alert-success { color:var(--success); border-color:var(--success); background:#f0fdf4; }
.alert-error { color:var(--danger); border-color:var(--danger); background:#fef2f2; }

/* Vacío */
.empty-state { background:#fff; border:1px dashed var(--border-color); border-radius:var(--radius); padding:48px; text-align:center; color:var(--text-secondary); }
.empty-state .btn { margin-top:16px; }

/* Progreso de conversión */
.progress { background:var(--bg-light); border:1px solid var(--border-color); border-radius:99px; height:14px; overflow:hidden; margin:14px 0 10px; }
.progress-bar { background:var(--primary); height:100%; width:0; transition:width .3s; }

/* Login */
.login-page { display:flex; align-items:center; justify-content:center; background:var(--bg-light); }
.login-card { background:#fff; border:1px solid var(--border-color); border-radius:var(--radius); padding:36px; width:100%; max-width:380px; margin:24px; }
.login-logo { height:72px; display:block; margin:0 auto 14px; }
.login-card h1 { text-align:center; font-size:1.4rem; font-weight:800; }
.login-card h1 strong { color:var(--primary); }
.login-sub { text-align:center; color:var(--text-secondary); font-size:.8rem; margin:6px 0 20px; }

/* Biblioteca pública */
.grid-biblioteca { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; }
.fb-card { background:#fff; border:1px solid var(--border-color); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--text-primary); transition:border-color .15s; }
.fb-card:hover { border-color:var(--primary); }
.fb-card img { width:100%; aspect-ratio:3/4; object-fit:cover; border-bottom:1px solid var(--border-color); }
.fb-card-body { padding:12px 14px; }
.fb-card-body h3 { font-size:.92rem; font-weight:600; margin:7px 0 3px; }
.fb-card-body small { color:var(--text-light); font-size:.75rem; }