/* ============================================================
   Bases de Datos II · el sitio como un cliente de base de datos
   ============================================================ */
:root{
  --fondo:#0B0F16; --panel:#111722; --panel2:#0D131C; --barra:#161D2A;
  --linea:#222C3D; --linea2:#2C3849;
  --texto:#CBD5E4; --tenue:#7C8AA0; --blanco:#F2F6FB;
  --lima:#9FD356; --magenta:#E06FBE; --ambar:#E8B84B; --cian:#5FC9D8;
  --fm:"Cascadia Mono",Consolas,"JetBrains Mono","SF Mono",Menlo,"DejaVu Sans Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--fondo);color:var(--texto);font-family:var(--fm);font-size:16px;
  line-height:1.55;padding:28px 20px 60px;
  background-image:linear-gradient(var(--panel2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--panel2) 1px,transparent 1px);
  background-size:52px 52px;background-position:-1px -1px}
@media (max-width:720px){body{padding:14px 10px 40px;background-image:none;font-size:15px}}

/* ---------- la ventana ---------- */
.app{max-width:1200px;margin:0 auto;background:var(--panel);border:1px solid var(--linea);
  box-shadow:0 28px 70px rgba(0,0,0,.55)}
.barra{display:flex;align-items:center;gap:14px;padding:0 18px;height:46px;background:var(--barra);
  border-bottom:1px solid var(--linea);font-size:13px;color:var(--tenue)}
.sem{display:flex;gap:7px}
.sem i{width:11px;height:11px;border-radius:50%;background:#2E3A4D;display:block}
.sem i:nth-child(1){background:#D2544B}
.sem i:nth-child(2){background:#D9A441}.sem i:nth-child(3){background:#5FA95F}
.barra .ruta{color:var(--texto)}
.barra .conn{margin-left:auto;display:flex;align-items:center;gap:8px}
.barra .conn b{color:var(--lima);font-weight:400}
.led{width:8px;height:8px;border-radius:50%;background:var(--lima);box-shadow:0 0 8px var(--lima)}
.cuerpo{padding:38px 36px 30px}
@media (max-width:720px){.cuerpo{padding:22px 16px 20px}}

/* ---------- encabezado ---------- */
.marca{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--magenta)}
h1{margin-top:12px;font-size:clamp(30px,5.2vw,50px);font-weight:700;color:var(--blanco);
  letter-spacing:-.015em;line-height:1.08}
h1 .cursor{display:inline-block;width:.55em;height:.95em;background:var(--lima);
  vertical-align:-.12em;margin-left:.16em;animation:late 1.1s steps(1) infinite}
@keyframes late{50%{opacity:0}}
.lead{margin-top:16px;max-width:62em;color:var(--tenue);font-size:clamp(14px,1.7vw,17px)}
.lead b{color:var(--texto);font-weight:400}

/* ---------- bloque de consulta ---------- */
.consulta{margin-top:34px;background:var(--panel2);border:1px solid var(--linea);
  border-left:3px solid var(--lima);padding:16px 20px;font-size:clamp(13px,1.6vw,16px);
  white-space:pre-wrap;word-break:break-word}
.consulta .p{color:var(--magenta)}
.kw{color:var(--lima)}
.st{color:var(--ambar)}
.fn{color:var(--cian)}
.cm{color:var(--tenue);font-style:italic}

/* ---------- el resultado ---------- */
.res{margin-top:22px;border:1px solid var(--linea)}
.fila{display:grid;grid-template-columns:52px 1fr 190px 150px 44px;align-items:center;
  gap:18px;padding:18px 20px;border-bottom:1px solid var(--linea);
  text-decoration:none;color:inherit;transition:background-color .18s ease}
.fila:last-child{border-bottom:0}
.enc-cab{background:var(--panel2);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tenue);padding-top:11px;padding-bottom:11px}
a.fila:hover,a.fila:focus-visible{background:#151D2A;outline:none}
a.fila:hover .ir{color:var(--lima);transform:translateX(4px)}
.id{color:var(--magenta);font-size:15px}
.tema h2{font-size:clamp(18px,2.2vw,23px);font-weight:700;color:var(--blanco);line-height:1.25}
.tema p{margin-top:6px;font-size:14px;color:var(--tenue);line-height:1.45}
.tema .cols{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.tema .cols span{font-size:12.5px;color:var(--texto);background:#182131;border:1px solid var(--linea2);
  padding:3px 8px}
.fecha{font-size:14px;color:var(--texto)}
.fecha em{display:block;font-style:normal;font-size:12.5px;color:var(--tenue);margin-top:3px}
.chip{display:inline-block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border:1px solid}
.chip.ok{color:var(--lima);border-color:#3F5B29;background:#16200F}
.chip.esp{color:var(--tenue);border-color:var(--linea2);background:#141B26}
.chip.mag{color:var(--magenta);border-color:#5A2A4C;background:#21121C}
.ir{font-size:20px;color:var(--tenue);text-align:right;transition:transform .25s ease,color .2s ease}
.fila.espera{opacity:.72}
.estado{margin-top:14px;font-size:13.5px;color:var(--tenue)}
.estado b{color:var(--texto);font-weight:400}

/* filas en móvil: la rejilla se apila y cada dato lleva su etiqueta */
@media (max-width:760px){
  .enc-cab{display:none}
  .fila{grid-template-columns:1fr;gap:10px;padding:18px 15px}
  .id:before{content:"id: ";color:var(--tenue)}
  .fecha:before{content:"fecha: ";color:var(--tenue)}
  .ir{display:none}
}

/* ---------- notas al pie, como comentarios SQL ---------- */
.notas{margin-top:34px;border-top:1px solid var(--linea);padding-top:22px;
  font-size:14px;color:var(--tenue);line-height:1.75}
.notas b{color:var(--texto);font-weight:400}
.notas .g{color:var(--lima)}
kbd{color:var(--blanco);background:#1A2331;border:1px solid var(--linea2);
  border-bottom-width:2px;padding:1px 7px;font-family:inherit;font-size:13px}
footer{max-width:1200px;margin:16px auto 0;display:flex;flex-wrap:wrap;gap:8px 26px;
  font-size:13px;color:var(--tenue)}
footer b{color:var(--texto);font-weight:400}
footer a{color:var(--magenta);text-decoration:none}
footer a:hover{text-decoration:underline}
.volver{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--lima);
  text-decoration:none;margin-bottom:22px}
.volver:hover{text-decoration:underline}

/* ---------- listado de archivos ---------- */
.arch{display:grid;grid-template-columns:60px 1fr 120px 190px 44px;align-items:center;gap:18px;
  padding:16px 20px;border-bottom:1px solid var(--linea);text-decoration:none;color:inherit;
  transition:background-color .18s ease}
.arch:last-child{border-bottom:0}
.arch:hover,.arch:focus-visible{background:#151D2A;outline:none}
.arch:hover .ir{color:var(--lima);transform:translateY(3px)}
.tipo{font-size:12px;letter-spacing:.08em;color:var(--lima);border:1px solid #3F5B29;
  background:#16200F;text-align:center;padding:6px 0}
.arch.doc .tipo{color:var(--cian);border-color:#2A4A52;background:#0F1D21}
.arch.otro .tipo{color:var(--ambar);border-color:#54452A;background:#1F1A10}
.nom{font-size:16.5px;color:var(--blanco);word-break:break-all}
.txt{margin-top:5px;font-size:13.5px;color:var(--tenue);line-height:1.45}
.peso,.mod{font-size:13.5px;color:var(--texto)}
.grupo{margin-top:26px}
.grupo h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--magenta);
  margin-bottom:10px}
@media (max-width:760px){
  .arch{grid-template-columns:60px 1fr;gap:12px 14px;padding:15px}
  .arch .peso,.arch .mod{grid-column:2;font-size:12.5px;color:var(--tenue)}
  .arch .ir{display:none}
}