/* styles.css */
body {
  margin:0;
  padding:0;
  background:#1a1a1a;
  color:#f0f0f0;
  font-family:'Inter',sans-serif;
  display:flex;
  flex-direction:column;
  height:100vh;}
html,body {
  height:100%;
  overflow:hidden;}
.starry-bg {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(to bottom,#00071b,#110020);
  z-index:-1;
  pointer-events:none;}
.starry-bg::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:2px;
  height:2px;
  background:transparent;
  box-shadow:50px 80px #fff,120px 200px #fff,300px 150px #fff,500px 400px #fff,800px 250px #fff,900px 600px #fff,1100px 300px #fff,1300px 500px #fff,1500px 200px #fff,1700px 700px #fff;
  animation:starsMove 120s linear infinite;}
.starry-bg::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:3px;
  height:3px;
  background:transparent;
  box-shadow:200px 100px #fff,400px 300px #fff,700px 200px #fff,1000px 500px #fff,1400px 350px #fff,1600px 150px #fff;
  animation:starsMove 180s linear infinite;}
@keyframes starsMove {
  from { transform:translateY(0); }
  to { transform:translateY(-800px); }}
#topBar {
  width:100%;
  height:55px;
  background:var(--grad-grafito-iridiscente);
  display:flex;
  align-items:center;
  padding:0 15px;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,0.12);
  box-sizing:border-box;
  position:relative;
  z-index:10;}
.theme-selector select {
  background:var(--grad-accent);
  border:var(--border-grafito);
  color:var(--text-color);
  padding:6px 10px;
  border-radius:6px;
  font-size:13px;
  cursor:pointer;
  backdrop-filter:blur(6px);}
.theme-selector select:hover {
  background:var(--grad-panel);}
.top-logo {
  width:100%;
  display:flex;
  justify-content:center;
  margin:10px 0 5px 0;}
.logo-elorida {
  width:160px;
  height:auto;
  opacity:0.95;
  user-select:none;
  pointer-events:none;}
#main {
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  overflow:hidden;}
#panelSala,
#panelIdioma {
  min-height:0;
  flex-shrink:1;
  overflow:hidden;}
#centerWrapper {
  display:flex;
  flex:1;
  width:100%;
  min-height:0;
  overflow:hidden;}
#panelTexto {
  width:100%;
  display:flex;
  flex-direction:column;
  padding:10px;
  gap:10px;
  flex-shrink:0;
  box-sizing:border-box;}
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-thumb {
  background:#cc2b2b;
  border-radius:4px;}
.elorida-footer {
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:var(--grad-grafito-iridiscente);
  color:#e6e6e6;
  border-top:1px solid rgba(255,255,255,0.15);
  backdrop-filter:blur(12px);
  padding:12px 0;
  z-index:20;
  font-family:'Inter',sans-serif;}
.footer-inner {
  max-width:1100px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  padding:0 20px;}
.footer-section h4 {
  margin:0 0 6px 0;
  font-size:0.85rem;
  font-weight:600;
  color:#ffffff;}
.footer-section a {
  display:block;
  font-size:0.8rem;
  color:#ffd27f;
  text-decoration:none;
  margin-bottom:4px;}
.footer-section a:hover { text-decoration:underline; }
.fontcolor-group {
  display:flex;
  gap:8px;
  align-items:center;}
.fontcolor-btn {
  width:18px;
  height:18px;
  border-radius:50%;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.25);
  transition:transform .15s ease,box-shadow .15s ease;}
.fontcolor-btn:hover {
  transform:scale(1.15);
  box-shadow:0 0 6px rgba(255,255,255,0.4);}
.fontcolor-btn.active {
  transform:scale(1.2);
  box-shadow:0 0 8px rgba(255,255,255,0.8);}