/* vr.css — PPT Studio (estilo visual de videorams.online: tokens de campus/genera) */
:root {
  --navy: #0B3D66;
  --navy-h: #0A3357;
  --navy-deep: #0A2A47;
  --teal: #0E8C7F;
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --border: #DCE3EC;
  --border-strong: #B9C6D6;
  --txt: #17293B;
  --txt-2: #5B6B7C;
  --txt-3: #93A1B0;
  --ok: #1E7D46;
  --warn: #9A6700;
  --err: #B3261E;
  --info: #0B5CAD;
  --info-bg: #E8F1FB;
  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --shadow-1: 0 1px 3px rgba(11,61,102,.12);
  --shadow-2: 0 6px 18px rgba(11,61,102,.18);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-ui); background: var(--bg); color: var(--txt); }
a { color: var(--info); text-decoration: none; }
h1, h2, h3 { color: var(--navy); }
.inline { display: inline; }

/* ===== Contenedor y banner de marca (igual que campus) ===== */
.container { max-width: 1180px; margin: 0 auto; }
.vr-banner {
  background: linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 55%, var(--teal) 130%);
  border-radius: 0 0 14px 14px; padding: 20px 28px; margin: 0 auto 20px;
  max-width: 1180px; color: #fff; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap; box-shadow: var(--shadow-2);
}
.vr-banner .b-brand { display: flex; align-items: center; gap: 14px; }
.vr-banner .b-icon { font-size: 34px; }
.vr-banner h1 { color: #fff; margin: 0; font-size: 23px; letter-spacing: .2px; }
.vr-banner p { color: #C7DCF2; margin: 2px 0 0; font-size: 13px; }
.vr-banner .b-user { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vr-banner .b-tag { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  padding: 5px 12px; border-radius: 20px; font-size: 12px; color: #E8F0FA; white-space: nowrap; }
.vr-banner .vr-btn { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.vr-banner .vr-btn:hover { background: rgba(255,255,255,.22); }
.vr-banner .vr-btn.primary { background: #fff; color: var(--navy); border-color: #fff; }
.vr-banner .vr-btn.primary:hover { background: #E8F0FA; }

/* ===== Hero (igual que campus) ===== */
.vr-hero {
  background: linear-gradient(135deg, #0B3D66 0%, #0A2A47 60%, #0E4A63 100%);
  border-radius: 14px; padding: 26px 32px; margin: 0 0 22px;
  box-shadow: var(--shadow-2); position: relative; overflow: hidden;
}
.vr-hero::after { content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px;
  border-radius:50%; background: radial-gradient(circle, rgba(79,163,217,.18) 0%, transparent 70%); }
.vr-hero h1 { color:#fff; font-size: 26px; margin: 0 0 6px; }
.vr-hero p { color:#B9CFE2; font-size: 14.5px; margin: 0 0 14px; max-width: 640px; }
.vr-chip { display:inline-block; padding:4px 12px; margin-right:8px; margin-top:2px;
  border-radius:999px; font-size:11.5px; font-weight:600; letter-spacing:.3px;
  background:rgba(255,255,255,.10); color:#DCEAF5; border:1px solid rgba(255,255,255,.22); }

/* ===== Shop banner ===== */
.shop-banner { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background: var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:14px 18px; margin:0 0 20px; box-shadow: var(--shadow-1); }
.shop-banner-text { flex:1; font-size:13.5px; color:var(--txt); }

/* ===== Grid y cards (igual que campus) ===== */
.landing-grid { display:grid; gap:16px; margin:0 0 22px; }
.vr-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:20px; margin-bottom:20px; }
.vr-card { background:var(--surface); border:1px solid var(--border); border-radius:12px;
  overflow:hidden; box-shadow:var(--shadow-1); padding:16px;
  transition: transform .15s ease, box-shadow .15s ease; }
.vr-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.vr-card .card-img { width:100%; border-radius:8px; margin-bottom:10px; border:1px solid var(--border); }
.vr-card h3 { margin:4px 0 6px; font-size:16px; }
.vr-card .desc { color:var(--txt-2); font-size:13px; margin:0 0 8px; }
.vr-card .meta { color:var(--txt-3); font-size:12px; margin:0 0 10px; }
.vr-card-buttons { display:flex; gap:8px; flex-wrap:wrap; }
.vr-empty { text-align:center; padding:56px 20px; background:var(--surface);
  border:1.5px dashed var(--border-strong); border-radius:12px; margin:30px 0; }
.vr-empty .ico { font-size:40px; opacity:.5; }
.vr-empty h3 { margin:10px 0 4px; }
.vr-empty p { color:var(--txt-2); font-size:13.5px; }
.vr-tabbar { display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.vr-tabbar-item { padding:9px 16px; border:0; background:none; font-size:14px; font-weight:600;
  color:var(--txt-2); cursor:pointer; border-bottom:3px solid transparent; font-family:var(--font-ui); }
.vr-tabbar-item.is-active { color:var(--navy); border-bottom-color:var(--teal); }
.vr-tab-panel { display:none; }
.vr-tab-panel.is-active { display:block; }

/* ===== Botones (igual que campus) ===== */
.vr-btn { display:inline-flex; align-items:center; padding:8px 14px; border-radius:8px;
  font-weight:600; font-size:13px; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--navy); text-decoration:none; cursor:pointer;
  transition: background .15s, border-color .15s, box-shadow .15s; font-family:var(--font-ui); }
.vr-btn:hover { background:#F0F4F8; border-color:var(--navy); }
.vr-btn.primary { background:var(--navy); color:#fff; border-color:var(--navy); }
.vr-btn.primary:hover { background:var(--navy-h); box-shadow:var(--shadow-2); }
.vr-btn.ok { background:var(--teal); color:#fff; border-color:var(--teal); }
.vr-btn.ok:hover { background:#0B7A6E; }
.vr-btn.danger { background:#FDE8E8; color:var(--err); border-color:#F3C2C0; }
.btn-block { width:100%; }

/* ===== Footer (igual que campus) ===== */
.vr-footer { max-width:1180px; margin:48px auto 0; padding:18px 4px 26px;
  border-top:1px solid var(--border); display:flex; justify-content:space-between;
  font-size:12px; color:var(--txt-3); flex-wrap:wrap; gap:6px; }
.vr-footer a { color:var(--txt-2); text-decoration:none; }
.vr-footer a:hover { color:var(--navy); }

/* ===== Alertas / formularios ===== */
.vr-alert { padding:10px 14px; border-radius:8px; font-size:13px; margin:10px 0; }
.vr-alert.warn { background:#FFF7E6; color:var(--warn); border:1px solid #F3DFA8; }
.vr-alert.err { background:#FDE8E8; color:var(--err); border:1px solid #F3C2C0; }
.vr-alert.ok { background:#E7F4EC; color:var(--ok); border:1px solid #BEE5CC; }
table.vr-tab { width:100%; border-collapse:collapse; font-size:13px; }
table.vr-tab th, table.vr-tab td { border:1px solid var(--border); padding:7px 9px; text-align:left; }
table.vr-tab th { background:#F0F4F8; color:var(--navy); }
.check-row { display:flex; align-items:center; gap:8px; margin:8px 0; font-size:13.5px; }
.check-row input { width:16px; height:16px; }
.hint { font-size:12px; color:var(--txt-3); }

/* ===== Espacio de trabajo: 2 columnas + 2 visores ===== */
.layout { display:flex; gap:16px; align-items:flex-start; }
.menu-col { width:250px; min-width:250px; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; padding:16px 14px; box-shadow:var(--shadow-1); }
.menu-col h3 { font-size:12px; text-transform:uppercase; color:var(--txt-3); margin:14px 0 8px; }
.menu-col h3:first-child { margin-top:0; }
.menu-col label { display:block; font-size:13px; margin:8px 0 4px; color:var(--txt-2); }
.menu-col input[type=text], .menu-col select, .menu-col textarea {
  width:100%; padding:8px; border:1px solid var(--border-strong); border-radius:6px;
  font-size:13px; font-family:var(--font-ui); }
.menu-col .vr-btn { width:100%; margin-top:14px; }
.main-col { flex:1; min-width:0; }
.viewers { display:flex; flex-direction:column; gap:16px; }
.viewer { background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-1); overflow:hidden; }
.viewer .v-head { display:flex; align-items:center; gap:10px; padding:8px 14px;
  border-bottom:1px solid var(--border); font-weight:600; font-size:13px; color:var(--navy); }
.viewer .v-head .lbl { color:var(--txt-3); font-weight:400; }
.viewer .stage { display:flex; justify-content:center; align-items:center;
  background:#E9EEF4; min-height:300px; padding:12px; }
.viewer .stage img { max-width:100%; max-height:46vh; border-radius:6px; box-shadow:var(--shadow-2); }
.nav-bar { display:flex; justify-content:center; gap:10px; padding:10px; }
.nav-bar button { padding:6px 16px; border:1px solid var(--border-strong); background:var(--surface);
  border-radius:6px; cursor:pointer; font-size:13px; color:var(--navy); }
.nav-bar button:hover { background:#F0F4F8; }
.nav-bar .cnt { font-size:12px; color:var(--txt-2); align-self:center; }

/* ===== Login (igual que campus) ===== */
.vr-login { max-width:400px; margin:6vh auto; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:28px; box-shadow:var(--shadow-2); }
.vr-login input { width:100%; padding:10px; border:1px solid var(--border-strong); border-radius:8px;
  margin:6px 0 14px; font-size:14px; font-family:var(--font-ui); }
.vr-login label { font-size:13px; color:var(--txt-2); }
.vr-login .sub { color:var(--txt-2); font-size:13px; }

/* ===== Ejemplos invitado ===== */
.guest-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 800px) { .guest-grid { grid-template-columns:1fr; } }
code { background:#F0F4F8; padding:1px 6px; border-radius:4px; }

/* ===== Selector de archivo (sin desbordes) ===== */
.file-row { display:flex; align-items:center; gap:8px; margin:8px 0; max-width:100%; }
.vr-file { display:inline-block; padding:7px 12px; border-radius:8px; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--navy); font-size:12.5px; font-weight:600; cursor:pointer;
  white-space:nowrap; font-family:var(--font-ui); }
.vr-file:hover { background:#F0F4F8; border-color:var(--navy); }
.file-row input[type=file] { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.file-name { font-size:11.5px; color:var(--txt-2); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:130px; flex:0 1 auto; }
#f_estado { font-size:11.5px; color:var(--ok); margin:2px 0 0; }
#f_estado.err { color:var(--err); }