:root{
  --bg:#000000;
  --fg:#f5f5f5;
  --cyan:#00ffff;
  --yellow:#ffff00;
  --magenta:#ff00ff;
  --green:#00ff00;
  --red:#ff4040;
  --blue:#4da6ff;
  --panel:#000000;
  --line:#d0d0d0;

  --mac-case-1:#e5e2d8;
  --mac-case-2:#cfcac1;
  --mac-case-3:#bdb7ac;
  --mac-slot:#7e786f;
  --mac-bezel:#a8a297;
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  min-height:100%;
  overflow-x:hidden;
  color:var(--fg);
  font-family:"Courier New", Courier, monospace;
}

body{
  padding:24px;
  background:
    radial-gradient(circle at top, #d9d9d9 0%, #bfbfbf 35%, #8f8f8f 100%);
}

img{
  max-width:100%;
  height:auto;
}

/* =========================
   MACINTOSH CLASSIC FRAME
========================= */

.tv-shell{
  width:min(1000px, 100%);
  margin:0 auto;
  padding:26px 26px 64px;
  position:relative;
  border-radius:22px;
  background:
    linear-gradient(180deg,
      var(--mac-case-1) 0%,
      var(--mac-case-2) 60%,
      var(--mac-case-3) 100%);
  box-shadow:
    0 25px 80px rgba(0,0,0,0.45),
    inset 0 4px 0 rgba(255,255,255,0.75),
    inset 0 -6px 12px rgba(0,0,0,0.18);
  border:1px solid #b1ab9f;
}

.tv-shell > .tv-bezel{
  position:relative;
}

.tv-shell::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:44px;
  background:linear-gradient(180deg, #cfcac1, #b6b1a7);
  border-top:2px solid #9a958a;
  border-bottom-left-radius:22px;
  border-bottom-right-radius:22px;
}

.tv-shell::before{
  content:"";
  position:absolute;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  width:180px;
  height:8px;
  background:repeating-linear-gradient(
    90deg,
    #7f7a70 0px,
    #7f7a70 6px,
    transparent 6px,
    transparent 12px
  );
  opacity:.75;
  z-index:3;
}

.tv-brand-badge{
  position:absolute;
  top:16px;
  left:18px;
  z-index:20;
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius:8px;
  background:rgba(255,255,255,0.18);
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 2px 6px rgba(0,0,0,0.08);
}

.tv-pixel-logo{
  width:14px;
  height:18px;
  position:relative;
  background:
    linear-gradient(to right,
      #62bb46 0 16.6%,
      #f2d13b 16.6% 33.2%,
      #f39c34 33.2% 49.8%,
      #e85a43 49.8% 66.4%,
      #b145a1 66.4% 83%,
      #3b7ddd 83% 100%);
  border:1px solid #6f6a61;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.25);
}

.tv-pixel-logo::before{
  content:"";
  position:absolute;
  top:-4px;
  left:3px;
  width:8px;
  height:4px;
  background:#d9d4c8;
  border-top-left-radius:3px;
  border-top-right-radius:3px;
}

.tv-pixel-logo::after{
  content:"";
  position:absolute;
  right:-6px;
  bottom:1px;
  width:3px;
  height:3px;
  background:#d9d4c8;
  border-radius:50%;
}

.tv-brand-text{
  font-size:11px;
  line-height:1.05;
  text-transform:lowercase;
  color:#575249;
  letter-spacing:.2px;
}

.tv-brand-badge::after{
  content:"";
  width:8px;
  height:8px;
  margin-left:4px;
  border-radius:50%;
  background:#d73c3c;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.25);
}

.tv-bezel{
  background:#111;
  padding:18px;
  border-radius:12px;
  box-shadow:
    inset 0 0 35px rgba(0,0,0,0.92),
    0 0 0 6px var(--mac-bezel);
}

.tv-inner-shadow{
  padding:6px;
  background:#000;
  border-radius:6px;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.95),
    inset 0 0 10px rgba(255,255,255,0.06);
}

.tv-screen-curved{
  position:relative;
  overflow:hidden;
  border-radius:18px / 12px;
  background:#000;
  transform:perspective(1200px) rotateX(0.8deg);
  box-shadow:
    inset 0 0 70px rgba(0,0,0,0.95),
    inset 0 0 10px rgba(255,255,255,0.04);
  animation:crtPowerOn 0.9s ease-out both;
  filter:contrast(1.06) saturate(1.04);
}

.tv-controls{
  display:block;
  position:relative;
  margin-top:18px;
  height:24px;
}

.tv-speaker{
  display:none;
}

.tv-knobs{
  position:absolute;
  right:6px;
  bottom:-2px;
  display:flex;
  align-items:center;
  gap:12px;
}

.tv-knob{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#7a746a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 1px 2px rgba(0,0,0,0.2);
}

.tv-knob.large{
  width:150px;
  height:12px;
  border-radius:3px;
  background:
    linear-gradient(to bottom, var(--mac-slot) 0%, #b7b0a3 100%);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.35),
    0 1px 0 rgba(255,255,255,0.35);
  position:relative;
}

.tv-knob.large::after{
  content:"";
  position:absolute;
  right:12px;
  top:2px;
  width:10px;
  height:8px;
  border-radius:2px;
  background:#5c574f;
}

.tv-knob::after{
  display:none;
}

/* =========================
   CRT
========================= */

.tv-screen-overlay{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,0.04) 50%, rgba(0,0,0,0.075) 50%),
    linear-gradient(90deg, rgba(255,0,0,0.02), rgba(0,255,255,0.015), rgba(0,0,255,0.02));
  background-size:100% 3px, 6px 100%;
  mix-blend-mode:screen;
  opacity:.58;
  animation:crtFlicker 0.16s infinite alternate;
}

.tv-screen-glow{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,0.08), transparent 30%),
    radial-gradient(circle at 50% 50%, transparent 50%, rgba(0,0,0,0.18) 100%);
}

.tv-static{
  position:absolute;
  inset:0;
  z-index:9;
  pointer-events:none;
  opacity:0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size:8px 8px, 11px 11px, 5px 5px;
  background-position:0 0, 3px 5px, 7px 2px;
  mix-blend-mode:screen;
  animation:tvStaticBurst 0.5s ease-out 0.05s 1 forwards;
}

@keyframes tvStaticBurst{
  0%{ opacity:.9; }
  100%{ opacity:0; }
}

@keyframes crtFlicker{
  0%{ opacity:.50; }
  100%{ opacity:.64; }
}

@keyframes crtPowerOn{
  0%{
    transform:perspective(1200px) rotateX(0.8deg) scaleY(0.03) scaleX(1.06);
    filter:brightness(3) contrast(2);
    opacity:0.2;
  }
  30%{
    transform:perspective(1200px) rotateX(0.8deg) scaleY(0.08) scaleX(1.02);
    filter:brightness(2.2) contrast(1.8);
    opacity:0.7;
  }
  70%{
    transform:perspective(1200px) rotateX(0.8deg) scaleY(1.02) scaleX(1);
    filter:brightness(1.15) contrast(1.2);
    opacity:1;
  }
  100%{
    transform:perspective(1200px) rotateX(0.8deg) scaleY(1) scaleX(1);
    filter:brightness(1) contrast(1);
    opacity:1;
  }
}

/* =========================
   BASE TELETTEXTO
========================= */

a{
  color:inherit;
  text-decoration:none;
}

input,
textarea,
button{
  font:inherit;
}

input,
textarea{
  width:100%;
  background:#000;
  color:var(--fg);
  border:2px solid var(--line);
  padding:10px 12px;
  outline:none;
}

input:focus,
textarea:focus{
  border-color:var(--cyan);
}

textarea{
  resize:vertical;
}

.ttx-page,
.ttx-main,
.ttx-side,
.news-list,
.comments-list,
.featured-news,
.ttx-head-main,
.ttx-topnav,
.news-head,
.racing-news-headline{
  min-width:0;
}

.ttx-page{
  position:relative;
  z-index:2;
  width:100%;
  margin:0;
  background:#000;
  color:var(--fg);
  min-height:auto;
  border:none;
  box-shadow:none;
  text-shadow:
    0 0 1px rgba(255,255,255,0.35),
    0 0 3px rgba(255,255,255,0.08);
}

.ttx-page *{
  text-shadow:
    0 0 1px rgba(255,255,255,0.25),
    0 0 2px rgba(255,255,255,0.06);
}

.ttx-header{
  border-bottom:3px solid var(--line);
}

.ttx-topline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 12px;
  border-bottom:3px solid var(--line);
  text-transform:uppercase;
  font-size:13px;
}

.ttx-pagecode{
  display:flex;
  gap:10px;
  align-items:center;
}

.ttx-sep{
  color:var(--yellow);
}

.ttx-topnav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:8px 12px;
  border-bottom:3px solid var(--line);
  background:#000;
  text-transform:uppercase;
}

.topnav-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 4px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.topnav-link:hover{
  background:#fff;
  color:#000;
}

.top-link{
  color:var(--yellow);
  font-weight:700;
}

.top-link:hover{
  color:#000;
  background:var(--yellow);
  padding:2px 4px;
}

.ttx-head-main{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 240px;
  gap:12px;
  padding:12px;
  align-items:start;
}

.ttx-brand-wrap{
  min-width:0;
  flex:1 1 auto;
}

.ttx-brand{
  display:block;
  max-width:100%;
  font-size:clamp(22px, 2.2vw, 34px);
  line-height:1;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  overflow-wrap:anywhere;
}

.brand-with-crest{
  display:flex;
  align-items:center;
  gap:12px;
}

.mini-racing-crest{
  width:28px;
  height:auto;
  flex:0 0 auto;
  image-rendering:pixelated;
  filter:drop-shadow(0 0 6px rgba(0,255,0,0.45));
}

.ttx-subline{
  margin-top:8px;
  font-size:12px;
  text-transform:uppercase;
  opacity:0.95;
  line-height:1.3;
}

.ttx-subline .sep{
  margin:0 8px;
  color:var(--yellow);
}

.ttx-status{
  min-width:0;
  text-align:left;
  font-size:13px;
  text-transform:uppercase;
  line-height:1.35;
}

.status-row{
  display:flex;
  justify-content:flex-start;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.status-row .label{
  min-width:68px;
  text-align:left;
  font-weight:700;
}

.racing-row{
  font-size:14px;
  font-weight:700;
  margin-top:8px;
}

.racing-label-with-crest{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}

.racing-status-crest{
  width:20px;
  height:auto;
  image-rendering:pixelated;
  filter:drop-shadow(0 0 5px rgba(0,255,0,0.35));
  flex:0 0 auto;
}

.racing-score{
  color:var(--green);
  text-shadow:0 0 6px var(--green);
}

/* =========================
   TICKER
========================= */

.ticker{
  display:flex;
  align-items:center;
  gap:0;
  border-bottom:3px solid var(--line);
  min-height:42px;
}

.ticker-label{
  flex:0 0 auto;
  padding:9px 12px;
  font-weight:700;
  text-transform:uppercase;
  border-right:3px solid var(--line);
}

.ticker-window{
  position:relative;
  overflow:hidden;
  width:100%;
  min-width:0;
  white-space:nowrap;
  min-height:39px;
}

.ticker-track{
  display:inline-block;
  padding-left:100%;
  line-height:39px;
  text-transform:uppercase;
  animation:ticker-scroll 120s linear infinite;
}

@keyframes ticker-scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-100%); }
}

/* =========================
   LAYOUT
========================= */

.ttx-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.7fr) minmax(220px, 0.7fr);
  min-height:auto;
}

.ttx-main{
  padding:12px;
  border-right:3px solid var(--line);
}

.ttx-side{
  padding:12px;
}

.section-title{
  display:inline-block;
  padding:4px 9px;
  margin:0 0 12px;
  font-weight:700;
  text-transform:uppercase;
}

.featured-news{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-bottom:18px;
}

.featured-card{
  background:var(--panel);
  border:2px solid var(--cyan);
  padding:12px 14px;
}

.featured-card.secondary{
  border-color:var(--yellow);
}

.featured-meta{
  margin-bottom:8px;
  font-size:13px;
  text-transform:uppercase;
}

.featured-title{
  margin:0 0 10px;
  font-size:clamp(18px, 2vw, 26px);
  line-height:1.12;
  text-transform:uppercase;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.featured-card.secondary .featured-title{
  color:var(--yellow);
}

.featured-body{
  margin:0;
  font-size:14px;
  line-height:1.45;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.rotating-headline-box{
  margin:0 0 18px;
  border:2px solid var(--red);
  background:var(--panel);
}

.rotating-label{
  display:inline-block;
  padding:4px 9px;
  font-weight:700;
  text-transform:uppercase;
}

.rotating-headline{
  padding:14px;
  min-height:auto;
  font-size:16px;
  line-height:1.25;
  text-transform:uppercase;
  color:var(--red);
  font-weight:700;
  letter-spacing:0.5px;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.news-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.news-item{
  background:var(--panel);
  border-left:6px solid var(--yellow);
  padding:10px 12px;
}

.news-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
  margin-bottom:8px;
}

.news-title{
  margin:0;
  font-size:18px;
  line-height:1.18;
  text-transform:uppercase;
  color:var(--yellow);
  overflow-wrap:anywhere;
  word-break:break-word;
}

.news-time{
  font-size:13px;
  color:var(--cyan);
  text-transform:uppercase;
}

.news-body{
  margin:0;
  font-size:14px;
  line-height:1.42;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.comments-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.comment-item{
  background:var(--panel);
  border:2px solid var(--magenta);
  padding:10px;
}

.comment-author{
  margin-bottom:6px;
  font-weight:700;
  color:var(--cyan);
  text-transform:uppercase;
  font-size:14px;
}

.comment-body{
  margin:0;
  font-size:14px;
  line-height:1.42;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* =========================
   PUBLICAR
========================= */

.publish-layout{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:0;
  min-height:calc(100vh - 150px);
}

.publish-main{
  padding:16px;
  border-right:3px solid var(--line);
}

.publish-side{
  padding:16px;
}

.publish-card{
  background:var(--panel);
  border:2px solid var(--cyan);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.publish-side .publish-card{
  border-color:var(--magenta);
}

.form-label{
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--yellow);
}

.char-counter{
  font-size:13px;
  color:var(--cyan);
  text-transform:uppercase;
}

.ttx-button{
  background:var(--yellow);
  color:#000;
  border:2px solid var(--yellow);
  padding:10px 14px;
  font-weight:700;
  text-transform:uppercase;
  cursor:pointer;
}

.ttx-button.secondary{
  background:var(--magenta);
  border-color:var(--magenta);
}

.ttx-button:hover{
  filter:brightness(1.05);
}

.form-msg{
  min-height:20px;
  font-size:14px;
  color:var(--green);
  text-transform:uppercase;
}

.empty-box{
  background:var(--panel);
  border:2px solid var(--line);
  padding:14px;
  font-size:15px;
  text-transform:uppercase;
}

/* =========================
   FOOTER
========================= */

.ttx-footer{
  border-top:3px solid var(--line);
  padding:8px 10px;
  font-size:12px;
  text-transform:uppercase;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.tele-footer{
  justify-content:flex-start;
  background:#000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
}

.footer-item,
.footer-link{
  display:inline-flex;
  gap:6px;
  align-items:center;
}

.tele-footer .footer-link{
  padding:2px 4px;
  font-weight:700;
}

.footer-link:hover{
  color:#000;
  background:var(--cyan);
  padding:2px 4px;
}

.tele-footer .footer-link:hover{
  background:#fff;
  color:#000;
}

.footer-cursor{
  margin-left:auto;
  font-weight:700;
  color:var(--yellow);
  text-shadow:0 0 6px var(--yellow);
  animation:teleCursor 0.8s steps(1) infinite;
}

@keyframes teleCursor{
  0%, 49%{ opacity:1; }
  50%, 100%{ opacity:0; }
}

.moderate-button{
  margin-top:6px;
  background:none;
  color:var(--red);
  border:none;
  font-family:"Courier New", monospace;
  font-size:11px;
  text-transform:uppercase;
  cursor:pointer;
  opacity:0.6;
  padding:0;
}

.moderate-button:hover{
  opacity:1;
}

.tele-separator{
  display:block;
  width:100%;
  overflow:hidden;
  white-space:nowrap;
  color:var(--cyan);
  font-weight:700;
  line-height:1;
  margin:10px 0 14px;
  text-shadow:0 0 4px currentColor;
}

/* =========================
   COLORES
========================= */

.c-cyan{ color:var(--cyan); }
.c-yellow{ color:var(--yellow); }
.c-magenta{ color:var(--magenta); }
.c-green{ color:var(--green); }
.c-red{ color:var(--red); }
.c-blue{ color:var(--blue); }
.c-white{ color:var(--fg); }

.c-black-on-yellow{
  color:#000;
  background:var(--yellow);
}
.c-black-on-cyan{
  color:#000;
  background:var(--cyan);
}
.c-black-on-magenta{
  color:#000;
  background:var(--magenta);
}
.c-black-on-green{
  color:#000;
  background:var(--green);
}
.c-black-on-red{
  color:#000;
  background:var(--red);
}

.ttx-page .c-cyan,
.ttx-page .c-yellow,
.ttx-page .c-green,
.ttx-page .c-magenta,
.ttx-page .c-red,
.ttx-page .c-blue,
.news-title,
.featured-title,
.rotating-headline,
.comment-author,
.ticker-track{
  text-shadow:
    0 0 2px currentColor,
    0 0 6px currentColor;
}

/* =========================
   RACING PAGE
========================= */

.racing-logo-block{
  display:flex;
  justify-content:center;
  margin:14px 0 18px;
}

.racing-logo-main{
  width:84px;
  height:auto;
  image-rendering:pixelated;
  filter:drop-shadow(0 0 8px rgba(0,255,0,0.45));
  transition:transform .15s ease;
}

.racing-news-item{
  border-left:6px solid var(--green);
}

.racing-news-headline{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:8px;
  align-items:start;
}

.racing-news-icon{
  width:22px;
  height:auto;
  flex:0 0 auto;
  image-rendering:pixelated;
  filter:drop-shadow(0 0 5px rgba(0,255,0,0.35));
  transition:transform .15s ease;
}

.racing-news-text{
  min-width:0;
  width:100%;
}

.racing-news-item .news-title{
  color:var(--green);
}

.racing-logo-main:hover,
.racing-news-icon:hover{
  transform:scale(1.05);
}

/* =========================
   LOADER
========================= */

.teletext-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:loaderHide 1.1s ease forwards;
  animation-delay:.6s;
}

.teletext-loader-inner{
  width:min(520px, 90vw);
  text-align:center;
  color:var(--cyan);
  text-transform:uppercase;
}

.loader-title{
  font-size:28px;
  font-weight:700;
  margin-bottom:16px;
  text-shadow:0 0 8px var(--cyan);
}

.loader-bar{
  width:100%;
  height:18px;
  border:2px solid var(--cyan);
  padding:2px;
  margin-bottom:14px;
}

.loader-bar span{
  display:block;
  height:100%;
  width:0%;
  background:var(--cyan);
  animation:loaderBar .7s linear forwards;
}

.loader-sub{
  color:var(--yellow);
  font-size:18px;
  text-shadow:0 0 6px var(--yellow);
}

@keyframes loaderBar{
  from{ width:0%; }
  to{ width:100%; }
}

@keyframes loaderHide{
  to{
    opacity:0;
    visibility:hidden;
  }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px){
  body{
    padding:12px;
  }

  .tv-shell{
    width:100%;
    border-radius:20px;
    padding:18px 18px 58px;
  }

  .tv-bezel{
    padding:14px;
    border-radius:10px;
  }

  .tv-inner-shadow{
    padding:6px;
    border-radius:6px;
  }

  .tv-screen-curved{
    border-radius:14px / 10px;
    transform:none;
  }

  .tv-brand-badge{
    top:12px;
    left:12px;
  }

  .tv-controls{
    margin-top:14px;
  }

  .tv-knob.large{
    width:110px;
  }

  .ttx-grid,
  .publish-layout{
    grid-template-columns:1fr;
  }

  .ttx-main,
  .publish-main{
    border-right:none;
    border-bottom:3px solid var(--line);
  }

  .ttx-head-main{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .ttx-status{
    width:100%;
    text-align:left;
  }

  .status-row{
    justify-content:flex-start;
  }

  .status-row .label{
    min-width:72px;
    text-align:left;
  }

  .ttx-topnav{
    gap:8px;
    padding:8px 12px;
  }

  .topnav-link{
    font-size:13px;
    padding:2px 4px;
  }

  .mini-racing-crest{
    width:36px;
  }

  .racing-status-crest{
    width:22px;
  }

  .racing-news-headline{
    grid-template-columns:30px minmax(0,1fr);
    gap:10px;
  }

  .racing-news-icon{
    width:30px;
  }

  .racing-logo-main{
    width:min(110px, 30vw);
  }
}

@media (max-width: 900px) and (orientation: landscape){
  body{
    padding:6px;
  }

  .tv-shell{
    padding:10px 10px 42px;
  }

  .tv-bezel{
    padding:10px;
  }

  .tv-inner-shadow{
    padding:4px;
  }

  .ttx-topline{
    padding:6px 10px;
    font-size:12px;
  }

  .ttx-topnav{
    padding:6px 10px;
    gap:6px;
  }

  .topnav-link{
    font-size:11px;
    padding:1px 4px;
  }

  .ttx-head-main{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 210px;
    gap:10px;
    padding:10px;
    align-items:start;
  }

  .ttx-brand{
    font-size:clamp(20px, 3vw, 28px);
  }

  .ttx-subline{
    font-size:11px;
    line-height:1.25;
  }

  .ttx-status{
    font-size:12px;
    line-height:1.3;
    text-align:left;
  }

  .status-row{
    gap:6px;
  }

  .status-row .label{
    min-width:64px;
  }

  .mini-racing-crest{
    width:24px;
  }

  .racing-status-crest{
    width:18px;
  }

  .racing-row{
    font-size:13px;
  }

  .ttx-main,
  .ttx-side{
    padding:10px;
  }

  .featured-title{
    font-size:18px;
  }

  .featured-body,
  .news-body,
  .comment-body{
    font-size:13px;
  }

  .rotating-headline{
    font-size:15px;
  }

  .ticker-label{
    padding:6px 10px;
    font-size:11px;
  }

  .ticker-window{
    min-height:30px;
  }

  .ticker-track{
    line-height:30px;
    font-size:12px;
  }

  .racing-logo-main{
    width:72px;
  }

  .racing-news-icon{
    width:20px;
  }

  .racing-news-headline{
    grid-template-columns:20px minmax(0,1fr);
    gap:8px;
  }

  .ttx-footer{
    padding:8px 10px;
    gap:6px;
    font-size:11px;
  }
@media (max-width: 640px){
  body{
    padding:0;
  }

  .tv-shell{
    border-radius:0;
    padding:12px 12px 54px;
  }

  .tv-brand-badge{
    position:static;
    margin:0 0 10px 0;
    width:fit-content;
  }

  .ttx-topline,
  .ttx-head-main,
  .ttx-main,
  .ttx-side,
  .publish-main,
  .publish-side{
    padding:12px;
  }

  .news-head{
    flex-direction:column;
    gap:4px;
  }

  .ttx-footer{
    gap:10px;
    font-size:13px;
  }

  .footer-cursor{
    margin-left:0;
  }

  .ttx-topnav{
    flex-direction:column;
    align-items:flex-start;
  }

  .brand-with-crest{
    gap:10px;
  }

  .mini-racing-crest{
    width:32px;
  }

  .racing-status-crest{
    width:22px;
  }
}

/* =========================
   BANNER LOGO PORTADA
========================= */

.ttx-brand-logo{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
}

.ttx-brand-logo img{
  width:min(560px, 100%);
  height:auto;
  image-rendering:pixelated;
  display:block;
  filter:drop-shadow(0 0 8px rgba(0,255,255,0.28));
}

/* =========================
   ALINEACIÓN RACING
========================= */

.racing-lineup-box{
  margin:0 0 18px;
}

.racing-lineup-field{
  position:relative;
  margin:10px 0 18px;
  padding:18px 12px;
  border:2px solid var(--green);
  background:
    linear-gradient(to bottom, rgba(0,255,0,0.10), rgba(0,255,0,0.04)),
    repeating-linear-gradient(
      to bottom,
      rgba(0,255,0,0.06) 0px,
      rgba(0,255,0,0.06) 26px,
      rgba(0,0,0,0.00) 26px,
      rgba(0,0,0,0.00) 52px
    ),
    #001a00;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.racing-lineup-field::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:50%;
  height:2px;
  background:rgba(255,255,255,0.22);
  transform:translateY(-50%);
}

.racing-lineup-field::after{
  content:"";
  position:absolute;
  width:84px;
  height:84px;
  border:2px solid rgba(255,255,255,0.18);
  border-radius:50%;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}

.racing-lineup-field .line{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.player-card{
  min-width:120px;
  text-align:center;
  padding:6px 8px;
  border:1px solid var(--green);
  background:rgba(0,0,0,0.82);
  color:var(--green);
  font-weight:700;
  text-transform:uppercase;
  font-size:13px;
  text-shadow:0 0 6px rgba(0,255,0,0.45);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 8px rgba(0,255,0,0.10);
}

.line-keeper{
  margin-top:2px;
}

.line-def{
  margin-top:4px;
}

.line-mid2{
  margin-top:6px;
}

.line-mid3{
  margin-top:6px;
}

.line-striker{
  margin-top:4px;
  margin-bottom:2px;
}

.line-keeper .player-card,
.line-striker .player-card{
  min-width:150px;
}

/* =========================
   AJUSTES RESPONSIVE EXTRA
========================= */

@media (max-width: 900px){
  .ttx-brand-logo img{
    width:min(420px, 100%);
  }

  .racing-lineup-field{
    padding:14px 8px;
    gap:10px;
  }

  .racing-lineup-field::after{
    width:64px;
    height:64px;
  }

  .player-card{
    min-width:100px;
    font-size:12px;
    padding:5px 6px;
  }

  .line-keeper .player-card,
  .line-striker .player-card{
    min-width:120px;
  }
}

@media (max-width: 640px){
  .ttx-brand-logo img{
    width:100%;
  }
}
  .libertad-banner{
  display:flex;
  justify-content:center;
  margin:0 0 14px;
}

.libertad-banner img{
  width:100%;
  max-width:260px;
  height:auto;
  image-rendering:pixelated;
  display:block;
  filter:drop-shadow(0 0 8px rgba(255,255,255,0.12));
}

@media (max-width: 900px){
  .libertad-banner img{
    max-width:220px;
  }
}

@media (max-width: 640px){
  .libertad-banner img{
    max-width:200px;
  }
}
.topnav-link.active{
  background:var(--yellow);
  color:#000;
}

.history-hero{
  display:flex;
  justify-content:center;
  margin:0 0 18px;
}

.history-hero-img{
  width:100%;
  max-width:760px;
  height:auto;
  image-rendering:pixelated;
  display:block;
  filter:drop-shadow(0 0 10px rgba(0,255,255,0.20));
}

.history-block{
  margin:0 0 22px;
  padding:12px;
  border:2px solid var(--line);
  background:var(--panel);
}

.history-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:center;
}

.history-image-card{
  display:flex;
  justify-content:center;
  align-items:center;
}

.history-image-card.wide{
  margin-bottom:12px;
}

.history-card-img{
  width:100%;
  max-width:340px;
  height:auto;
  image-rendering:pixelated;
  display:block;
  filter:drop-shadow(0 0 8px rgba(255,255,255,0.10));
}

.history-kicker{
  margin-bottom:8px;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
}

.history-title{
  margin:0 0 10px;
  font-size:22px;
  line-height:1.15;
  text-transform:uppercase;
}

.history-body{
  margin:0;
  font-size:15px;
  line-height:1.5;
}

@media (max-width: 900px){
  .history-split{
    grid-template-columns:1fr;
  }

  .history-title{
    font-size:18px;
  }

  .history-body{
    font-size:14px;
  }

  .history-card-img{
    max-width:280px;
  }
}
  /* =========================
   NOTICIAS DE MEDIOS (RSS)
========================= */

.media-news-item{
  border-left:6px solid var(--cyan);
}

.media-news-item .news-title{
  color:var(--cyan);
}

.media-news-item .news-title a{
  color:inherit;
  text-decoration:none;
}

.media-news-item .news-title a:hover{
  text-decoration:underline;
}

/* pequeño icono visual opcional */

.media-news-item .news-time::before{
  content:"PRENSA · ";
  color:var(--yellow);
  font-weight:700;
}
/* =========================
   NOTICIAS DE MEDIOS (RSS)
========================= */

.media-news-item{
  border-left:6px solid var(--cyan);
}

.media-news-item .news-title{
  color:var(--cyan);
}

.media-news-item .news-title a{
  color:inherit;
  text-decoration:none;
}

.media-news-item .news-title a:hover{
  text-decoration:underline;
}

.media-news-item .news-time::before{
  content:"PRENSA · ";
  color:var(--yellow);
  font-weight:700;
}
.transport-card{
  border-left:6px solid var(--cyan);
}

#transport-page-info{
  margin:0 0 10px;
}

#transport-summary strong{
  font-weight:700;
}

  /* =========================
   MAPA TELETEXTO SANTANDER
========================= */

.telemap-frame{
  border:3px solid var(--cyan);
  background:#000;
  padding:8px;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.06),
    0 0 14px rgba(0,255,255,0.10);
}

.telemap{
  height:520px;
  width:100%;
  background:#020202;
  image-rendering:pixelated;
  filter:
    contrast(1.35)
    saturate(0.85)
    brightness(0.9);
}

/* mapa base estilo CRT */

.telemap .leaflet-tile{
  image-rendering:pixelated !important;
  filter:
    grayscale(1)
    contrast(1.8)
    brightness(0.58);
}

.telemap .leaflet-container{
  background:#000;
  font-family:"Courier New", Courier, monospace;
}

.telemap .leaflet-control-container{
  display:none;
}

/* popups teletexto */

.telemap .leaflet-popup-content-wrapper{
  background:#000;
  color:var(--fg);
  border:2px solid var(--cyan);
  border-radius:0;
  box-shadow:none;
}

.telemap .leaflet-popup-tip{
  background:#000;
  box-shadow:none;
}

/* cajas teletexto */

.map-status-box,
.map-help-box{
  margin:0 0 12px;
  padding:10px 12px;
  border:2px solid var(--line);
  background:#000;
  font-size:14px;
  text-transform:uppercase;
}

.map-help-box{
  margin:12px 0 0;
  border-color:var(--yellow);
  color:var(--yellow);
}

/* leyenda */

.telemap-legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  margin:12px 0 0;
  padding:10px 12px;
  border:2px solid var(--magenta);
  background:#000;
  text-transform:uppercase;
  font-size:13px;
}

.legend-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.legend-pixel{
  width:12px;
  height:12px;
  display:inline-block;
  box-shadow:0 0 6px currentColor;
}

/* colores datasets */

.legend-pixel.pmr{
  background:var(--yellow);
  color:var(--yellow);
}

.legend-pixel.vado{
  background:var(--red);
  color:var(--red);
}

.legend-pixel.moto{
  background:var(--green);
  color:var(--green);
}

.legend-pixel.carga{
  background:var(--magenta);
  color:var(--magenta);
}

.legend-pixel.other{
  background:var(--cyan);
  color:var(--cyan);
}

/* responsive */

@media (max-width: 900px){
  .telemap{
    height:420px;
  }
}

@media (max-width: 640px){

  .telemap{
    height:340px;
  }

  .telemap-legend{
    font-size:12px;
    gap:8px 12px;
  }

  .legend-pixel{
    width:10px;
    height:10px;
  }
}