/* Estilos adicionales: login, administración y barra superior */
.topbar{
  position:fixed; top:max(1rem, env(safe-area-inset-top)); left:1rem;
  display:flex; gap:.9rem; align-items:center;
  font-size:.8rem; z-index:10;
}
.topbar .who{ color:rgba(255,255,255,0.35); }
.topbar a{ color:rgba(49,230,255,0.7); text-decoration:none; }
.topbar a:hover{ color:#31e6ff; }

body.page{
  min-height:100%; display:flex; align-items:flex-start; justify-content:center;
  padding:max(1.5rem, env(safe-area-inset-top)) 1rem 2rem;
  overflow:auto;
  background:radial-gradient(circle at 50% 30%, #0a0f1c 0%, #03050a 65%);
  color:#c8d3e0; font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
body.page *{ box-sizing:border-box; }
.panel{
  width:100%; margin-top:8vh;
  background:rgba(10,18,32,0.7);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px; padding:1.6rem;
  display:flex; flex-direction:column; gap:.9rem;
}
.panel.narrow{ max-width:380px; }
.panel.wide{ max-width:980px; margin-top:2vh; }
.panel h1{ font-size:1.4rem; font-weight:600; color:#e6f1fb; }
.panel .sub{ font-size:.82rem; color:rgba(200,211,224,0.6); margin-top:-.4rem; }
.panel a{ color:#31e6ff; }
.panel label{ display:flex; flex-direction:column; gap:.3rem; font-size:.82rem; color:rgba(200,211,224,0.75); }
.panel input, .panel select{
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
  border-radius:10px; padding:.65rem .8rem; color:#e6f1fb; font:inherit; font-size:.95rem;
}
.panel input:focus, .panel select:focus{ outline:none; border-color:rgba(49,230,255,0.5); }
.panel button{
  background:linear-gradient(135deg,#31e6ff,#8b5cff); color:#03050a;
  border:none; border-radius:10px; padding:.7rem 1rem; font-weight:600; font-size:.95rem; cursor:pointer;
}
.panel button.small{ padding:.4rem .7rem; font-size:.78rem; }
.err{ color:#ffb3b3; font-size:.85rem; }
.row{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.row input, .row select{ flex:1 1 140px; min-width:0; }
.scroll{ overflow-x:auto; }
table{ border-collapse:collapse; width:100%; min-width:720px; font-size:.85rem; }
th, td{ text-align:left; padding:.55rem .5rem; border-bottom:1px solid rgba(255,255,255,0.06); vertical-align:middle; }
th{ color:rgba(200,211,224,0.6); font-weight:500; }

.panel h2{ font-size:1.05rem; font-weight:600; color:#e6f1fb; margin-top:.6rem; }

/* ───────── v2: barra superior, panel de respuesta, documentos, biblioteca ───────── */
.topbar{ flex-wrap:wrap; max-width:calc(100vw - 7.5rem); row-gap:.2rem; }
.linkbtn{ background:none; border:none; padding:0; font:inherit; color:rgba(49,230,255,0.7); cursor:pointer; }
.linkbtn:hover{ color:#31e6ff; }

#panel{
  position:fixed; left:50%; bottom:0; transform:translate(-50%, 105%);
  width:min(760px, 100vw); max-height:68vh; display:flex; flex-direction:column;
  background:rgba(8,14,26,0.96); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.09); border-bottom:none; border-radius:18px 18px 0 0;
  box-shadow:0 -20px 60px rgba(0,0,0,0.55); z-index:20;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  padding-bottom:env(safe-area-inset-bottom);
}
#panel.open{ transform:translate(-50%, 0); }
.panel-head{ display:flex; justify-content:space-between; align-items:center; padding:.7rem 1.1rem; font-size:.8rem;
  color:rgba(200,211,224,0.55); border-bottom:1px solid rgba(255,255,255,0.06); }
.panel-head div{ display:flex; gap:1rem; }
#panelBody{ overflow:auto; padding:.9rem 1.2rem; flex:1 1 auto; -webkit-overflow-scrolling:touch; }
#panelAct{ padding:0 1.2rem; }
#panelAct:not(:empty){ padding-bottom:.6rem; }
#panelSrc{ padding:0 1.2rem .9rem; font-size:.78rem; color:rgba(200,211,224,0.6); }
#panelSrc:empty{ display:none; }
.src-h{ text-transform:uppercase; letter-spacing:.06em; font-size:.68rem; margin:.2rem 0 .35rem; opacity:.7; }
.src{ display:flex; gap:.5rem; margin:.15rem 0; }
.src b{ color:#31e6ff; font-weight:600; min-width:1.6rem; }
.src a{ color:#31e6ff; text-decoration:none; word-break:break-word; }
.btn{ display:inline-block; background:linear-gradient(135deg,#31e6ff,#8b5cff); color:#03050a !important;
  border-radius:10px; padding:.55rem .9rem; font-weight:600; font-size:.88rem; text-decoration:none; border:none; cursor:pointer; }

.md{ font-size:.93rem; line-height:1.6; color:rgba(225,236,247,0.92); }
.md p{ margin:.45rem 0; }
.md h2,.md h3,.md h4,.md h5{ color:#e6f1fb; margin:1rem 0 .4rem; line-height:1.3; }
.md h2{ font-size:1.15rem; border-bottom:1px solid rgba(255,255,255,0.08); padding-bottom:.25rem; }
.md h3{ font-size:1.02rem; } .md h4,.md h5{ font-size:.95rem; }
.md ul,.md ol{ margin:.4rem 0 .4rem 1.3rem; } .md li{ margin:.15rem 0; }
.md code{ background:rgba(255,255,255,0.07); padding:.05rem .3rem; border-radius:4px; font-size:.85em; }
.md blockquote{ margin:.5rem 0; padding:.2rem .8rem; border-left:3px solid rgba(139,92,255,.6); color:rgba(200,211,224,.8); }
.md hr{ border:none; border-top:1px solid rgba(255,255,255,0.1); margin:.9rem 0; }
.md a{ color:#31e6ff; }
.md sup.cite{ color:#31e6ff; font-size:.68em; font-weight:600; margin-left:1px; }
.tblwrap{ overflow-x:auto; margin:.6rem 0; }
.md table{ min-width:0; width:100%; font-size:.82rem; border:1px solid rgba(255,255,255,0.1); }
.md th{ background:rgba(49,230,255,0.08); color:#e6f1fb; }
.md th,.md td{ border:1px solid rgba(255,255,255,0.08); vertical-align:top; }

/* Documentos */
.docs-grid{ display:grid; grid-template-columns:minmax(280px, 360px) minmax(0,1fr); gap:1.2rem; align-items:start; }
@media (max-width:860px){ .docs-grid{ grid-template-columns:minmax(0,1fr); } }
.docs-grid > *, .preview{ min-width:0; max-width:100%; }
.preview{ overflow-x:auto; }
.form-col{ display:flex; flex-direction:column; gap:.7rem; }
.panel textarea{ background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:10px;
  padding:.65rem .8rem; color:#e6f1fb; font:inherit; font-size:.92rem; resize:vertical; min-height:72px; }
.panel textarea:focus{ outline:none; border-color:rgba(49,230,255,0.5); }
.panel input[type=file]{ padding:.45rem; font-size:.82rem; }
.hint{ font-size:.78rem; color:rgba(200,211,224,0.55); margin-top:-.2rem; }
.preview{ background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:1rem 1.2rem;
  min-height:240px; max-height:72vh; overflow:auto; }
.preview.empty{ display:flex; align-items:center; justify-content:center; color:rgba(200,211,224,0.4); font-size:.9rem; text-align:center; }
.toolbar{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem 0; }
.toolbar .btn[aria-disabled=true]{ opacity:.35; pointer-events:none; }
.ghost{ background:rgba(255,255,255,0.05) !important; color:#c8d3e0 !important; border:1px solid rgba(255,255,255,0.1) !important; }
.hist{ display:flex; flex-direction:column; gap:.35rem; margin-top:.4rem; }
.hist-item{ display:flex; justify-content:space-between; gap:.6rem; align-items:center; padding:.5rem .65rem; border-radius:10px;
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:.82rem; }
.hist-item a{ color:#e6f1fb; text-decoration:none; flex:1; min-width:0; }
.hist-item small{ display:block; color:rgba(200,211,224,0.5); }
.hist-item button{ all:unset; cursor:pointer; color:rgba(255,160,160,.8); font-size:.75rem; }
.badge{ display:inline-block; font-size:.68rem; padding:.1rem .45rem; border-radius:99px; background:rgba(49,230,255,.12); color:#31e6ff; margin-left:.3rem; }
.badge.warn{ background:rgba(255,190,90,.14); color:#ffc46b; }
.ok{ color:#9be8b0; font-size:.85rem; }
.stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:.6rem; }
.stat{ background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:.7rem .9rem; }
.stat b{ display:block; font-size:1.35rem; color:#e6f1fb; } .stat span{ font-size:.74rem; color:rgba(200,211,224,.55); }
.tabs{ display:flex; gap:.4rem; flex-wrap:wrap; }
.tabs a{ padding:.4rem .8rem; border-radius:99px; font-size:.85rem; text-decoration:none; color:#c8d3e0; border:1px solid rgba(255,255,255,.1); }
.tabs a.on{ background:rgba(49,230,255,.14); color:#31e6ff; border-color:rgba(49,230,255,.35); }
.check{ flex-direction:row !important; align-items:center; gap:.5rem !important; }
.check input{ flex:none !important; width:auto; }
.progress{ height:4px; border-radius:4px; background:rgba(255,255,255,.07); overflow:hidden; display:none; }
.progress.on{ display:block; }
.progress i{ display:block; height:100%; width:35%; background:linear-gradient(90deg,#31e6ff,#8b5cff); animation:slide 1.2s infinite ease-in-out; }
@keyframes slide{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(300%);} }

/* Marca institucional */
.brand{ display:flex; align-items:center; gap:.8rem; }
.brand h1{ flex:1; }
.brand img{ height:44px; width:auto; }
.tplbox{ border:1px dashed rgba(49,230,255,.35); border-radius:10px; padding:.6rem .8rem; display:flex; flex-direction:column; gap:.5rem; }
.tplbox legend{ font-size:.78rem; color:#31e6ff; padding:0 .3rem; }
.tplbox .row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.filebtn{ cursor:pointer; }
label.chk{ flex-direction:row; align-items:center; gap:.5rem; font-size:.85rem; }
.status{ font-size:.85rem; color:#31e6ff; min-height:1.2em; }

.login-logos{ display:flex; justify-content:center; align-items:center; gap:1rem; }
.login-logos img{ height:72px; width:auto; }
.login-logos img:first-child{ height:56px; }
.panel.narrow h1{ text-align:center; }