:root{
  --bg:#07130b;           
  --panel:#081e14;         
  --accent:#6ef08a;       
  --muted:#b9d8c1;        
  --max-width:1100px;
  --radius:12px;
  --container-pad:1rem;
  --animation-distance:14px; 
  --header-offset:110px;
  --header-z:1000;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Spectral", Georgia, serif;
  background: linear-gradient(360deg,var(--bg), #001107 200%);
  color:var(--muted);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:2rem 1rem;
  line-height:1.5;
}

@media (prefers-reduced-motion: reduce){
  :root{--animation-distance:0px}
  .anim-sway{animation:none !important}
}

@keyframes sway {
  0%   { transform: translateX(calc(-1 * var(--animation-distance))); }
  50%  { transform: translateX( calc(var(--animation-distance) * 0.4) ); }
  100% { transform: translateX(0); }
}

.anim-sway{
  will-change: transform;
  animation: sway 2s ease-in-out forwards;
}

/* ========================
 LAYOUT
 ======================== */
.site{
  max-width: var(--max-width);
  width: 100%; /* ajustable al monitor */
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  padding:0 1rem;
  padding-top:var(--header-offset);
}

header{
  background: linear-gradient(90deg, #081e14, #001107) !important;
  border-radius:0 !important;
  padding:var(--container-pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  box-shadow:0 7px 10px rgba(2, 48, 16, 0.699), inset 0 1px 0 rgba(9, 146, 89, 0.438) !important;
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  height: 4rem;
  z-index:var(--header-z);
}

.brand{
  display:flex;
  align-items:center;
  gap:.9rem;
  min-width:0;
}
.logo{
  width:86px;
  height:56px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#062614,#0b2b19);
  border-radius:8px;
  padding:.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  font-family: 'Source Code Pro', monospace;
  color:var(--accent);
  font-weight:600;
  letter-spacing:.04em;
  border:1px solid rgba(110,240,138,0.06);
}

nav{
  display:flex;
  gap:1rem;
  align-items:center;
  flex-wrap:wrap;
}

nav a{
  text-decoration:none;
  color:var(--muted);
  padding:.4rem .6rem;
  border-radius:6px;
  font-weight:600;
  font-family: 'Source Code Pro', monospace;
  font-size:.95rem;
}
nav a:hover, nav a:focus{ color:var(--accent); outline:none }

/* MAIN GRID */
main{
  display:grid;
  grid-template-columns: 1fr 320px; /* contenido + sidebar */
  gap:1.25rem;
  align-items:start;
  width:100%;
}

/* ARTICLE PANEL */
.panel{
  
  width: 100%;
  max-width: 100%;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  padding:1.25rem;
  border-radius:calc(var(--radius));
  box-shadow:0 8px 28px rgba(0, 0, 0, 0.6);
  border:1px solid rgba(255,255,255,0.02);
  overflow-wrap: break-word;
}

h1,h2,h3{ margin:.25rem 0; color: var(--accent) !important; }
h1{ font-size:1.45rem; }
h2{ font-size:1.2rem; }
h3{ font-size:1rem; }
.meta{ font-family: 'Source Code Pro', monospace; color:var(--accent); font-size:.82rem }

/* Ensure all text is visible */
p, div, span, td, th {
  color: var(--muted) !important;
 
}
table {
  color: var(--muted) !important;
}
table td, table th {
  color: var(--muted) !important;
}
.status-message, .alert, .info-box {
  color: var(--muted) !important;
}
.status-message strong, .alert strong, .info-box strong {
  color: var(--accent) !important;
}

/* TABLE STYLING */
table{ width:100%; border-collapse:collapse; font-family: 'Source Code Pro', monospace; font-size:.95rem }
thead th{ text-align:left; padding:.6rem .6rem; border-bottom:1px dashed rgba(255,255,255,0.04); color:var(--accent) }
tbody td{ padding:.4rem .4rem; border-bottom:1px dashed rgba(255,255,255,0.02) }
.table-wrap{ overflow:auto; border-radius:8px }

/* TABLE ROW INTERACTIONS */
tbody tr{ cursor: pointer; }
tbody tr:hover{ background: rgba(45,90,61,0.3) !important; }
tbody tr td{ cursor: pointer; }

/* PAGINATION STYLES */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  font-family: 'Source Code Pro', monospace;
}
.pagination a {
  color: var(--accent);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(110,240,138,0.3);
  border-radius: 6px;
  transition: all 0.3s ease;
}
.pagination a:hover {
  background: rgba(110,240,138,0.1);
  border-color: var(--accent);
}
.pagination span {
  color: var(--muted);
  font-weight: 600;
}

/* FORM STYLES */
form {
  display: inline-block;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1rem;
}
form input[type="text"] {
  flex: 1;
  min-width: 400px;
  padding: 0.75rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--muted);
  font-family: 'Source Code Pro', monospace;
  font-size: 0.9rem;
}
form input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,0.08);
}
form select {
  padding: 0.75rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--muted);
  font-family: 'Source Code Pro', monospace;
  font-size: 0.9rem;
  cursor: pointer;
}
form select:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,0.08);
}
form button {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(180deg, var(--accent), #4ac766);
  border: none;
  border-radius: 6px;
  color: #000;
  font-family: 'Source Code Pro', monospace;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 1rem;
}
form button:hover {
  background: linear-gradient(180deg, #7ff39a, var(--accent));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(110,240,138,0.3);
}
form button:active { transform: translateY(0); }

@media (max-width: 768px) {
  form {
    flex-direction: column;
    align-items: stretch;
  }
  form input[type="text"], form select, form button {
    width: 100%;
  }
}

/* SIDEBAR */
aside .panel{ position:sticky; top:calc(var(--header-offset) + 1rem) }
aside > img{
  display:block;
  margin:0 auto 1rem;
}
aside a{
  color: #2d5a3d !important;
  text-decoration: none;
  transition: color 0.3s ease;
}
aside a:hover, aside a:focus{ color: var(--accent) !important; }
.latest-list{ margin-top:.5rem }
.latest-item{
  display:block;
  padding:.35rem .5rem;
  border-radius:6px;
  font-family: 'Source Code Pro', monospace;
  font-size:.85rem;
  color:var(--muted);
  text-decoration:none;
  transition: background .2s ease, transform .15s ease;
  cursor:pointer;
}
.latest-item:hover, .latest-item:focus{
  background: rgba(45,90,61,0.3);
  outline:none;
}
.latest-item:active{ transform: translateY(1px) }

/* FOOTER */
footer{
  text-align:center;
  color:rgba(185,216,193,0.75);
  font-size:.9rem;
  opacity:.9;
}

/* RESPONSIVE QUERIES */
@media (max-width: 1200px) {
  main {
    grid-template-columns: 1fr 280px;
  }
}
@media (max-width:980px){
  main{ grid-template-columns: 1fr; margin-top: 5rem;}
  .logo{ width:72px; height:48px }
  nav{ order:3; width:100%; justify-content:flex-start }
  header{height: auto;}
  aside{ order:2; }
  section{ order:1; }
}
@media (max-width:600px){
  body{ padding:1rem }
  header{ flex-direction:column; align-items:stretch; height: auto; gap:.5rem; }
  nav{ width:100%; justify-content:center; flex-wrap:wrap; gap:.5rem; }
  main{ grid-template-columns: 1fr; margin-top: 5rem; gap:1rem; }
  .panel{ padding:1rem; }
}
@media (max-width:420px){
  :root{ --header-offset:160px }
  .logo { width:64px; height:44px; font-size:.8rem; }
  nav a{ font-size:.85rem; padding:.3rem .5rem; }
}

a:focus, button:focus{ outline:3px solid rgba(110,240,138,0.12); outline-offset:3px }

.card{ background:rgba(0,0,0,0.12); padding:.9rem; border-radius:8px; margin-bottom:.75rem }
pre{ white-space:pre-wrap; font-family: 'Source Code Pro', monospace; font-size:.9rem; color:var(--muted); background:transparent; margin:0 }

/* YOUTUBE VIDEO EMBED */
.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  margin: 1rem 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* LOADING SCREEN */
.loading-screen{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1s ease-out;
}
.loading-screen.fade-out{
  opacity: 0;
  pointer-events: none;
}
.loading-image{
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 0 50px rgba(110,240,138,0.3);
}
.site{ opacity: 1; }