/* =========================================================
   Matutino - hoja de estilos "Web 1.5" (circa 2001-2004)
   ========================================================= */
:root {
  --blue: #003399;
  --blue-dark: #002266;
  --blue-light: #d9e4f7;
  --orange: #ff9900;
  --yellow: #ffffcc;
  --border: #8ea6cf;
  --text: #000;
  --muted: #555;
  --link: #0000cc;
  --visited: #551a8b;
  --bg: #6f8fc9;
  --paper: #ffffff;
  --box-bg: #f4f7fc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg) linear-gradient(180deg, #4d6fb3 0, #8aa6dd 400px, #b8c9ea 100%) fixed;
  font: 11px/1.45 Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  color: var(--text);
}

a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { color: #cc0000; }

img { max-width: 100%; border: 0; }

#page {
  width: 980px;
  max-width: 100%;
  margin: 0 auto;
  background: var(--paper);
  border-left: 1px solid #334;
  border-right: 1px solid #334;
  box-shadow: 0 0 12px rgba(0, 0, 0, .35);
}

/* ---- Barra superior ---- */
#topbar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px 8px;
  background: #e8e8e8;
  border-bottom: 1px solid #bbb;
  font-size: 10px;
  color: #333;
}
#topbar a { color: #333; }
#topbar a b { white-space: nowrap; }

/* ---- Cabecera ---- */
#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #1a4db3 0%, #003399 55%, #002266 100%);
  border-bottom: 3px solid var(--orange);
}
#logo {
  text-decoration: none;
  color: #fff !important;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 6px;
}
.logo-globe { font-size: 40px; grid-row: span 2; filter: drop-shadow(1px 1px 0 #000); }
.logo-text {
  font: bold italic 34px/1 "Trebuchet MS", Verdana, sans-serif;
  letter-spacing: -1px;
  color: #fff;
  text-shadow: 2px 2px 0 #001144, 0 0 10px #66aaff;
}
.logo-text::first-letter { color: var(--orange); }
.logo-slogan { font-size: 11px; color: #ffcc66; font-style: italic; }

#searchbox {
  background: rgba(255, 255, 255, .12);
  border: 1px solid #6688cc;
  padding: 6px 8px;
  color: #fff;
  font-size: 10px;
}
#searchbox input[type=text] { font-size: 12px; padding: 2px 4px; max-width: 60vw; }
#searchbox label { margin-right: 8px; }

/* El clima de la zona del lector, al lado del buscador */
.hd-wx { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 10px 4px 6px; color: #fff !important; text-decoration: none;
  background: rgba(255, 255, 255, .12); border: 1px solid #6688cc; font: 11px Verdana, sans-serif; white-space: nowrap; }
.hd-wx:hover { background: rgba(255, 255, 255, .22); }
/* Misma altura que el logo y el buscador: los dos se estiran a la fila de la cabecera. */
#header > .hd-wx, #header > #searchbox { align-self: stretch; }
/* La temperatura arriba y la ciudad abajo. */
#header > .hd-wx .hd-wx-t { display: flex; flex-direction: column; line-height: 1.05; }
#header > .hd-wx .hd-wx-c { font-size: 10px; }
.hd-wx b { font: bold 20px "Trebuchet MS", Verdana, sans-serif; color: #ffcc66; text-shadow: 1px 1px 0 #001144; }
.hd-wx .ic { filter: drop-shadow(1px 1px 0 #001144); }

/* ---- Pestañas ---- */
#tabs {
  list-style: none;
  margin: 0;
  padding: 6px 8px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  background: linear-gradient(180deg, #e9eef8, #c8d5ee);
  border-bottom: 4px solid var(--blue);
}
#tabs li a {
  display: block;
  padding: 4px 7px;
  font-weight: bold;
  text-decoration: none;
  color: var(--blue-dark);
  background: linear-gradient(180deg, #ffffff, #dde6f5);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
#tabs li a:hover { background: linear-gradient(180deg, #fff9e6, #ffe09a); color: #000; }
#tabs li.active a {
  background: var(--tab, var(--blue));
  color: #fff;
  border-color: var(--tab, var(--blue));
}

/* ---- Notas de Tu zona: fuentes y aclaración de IA ---- */
.story-sources { margin: 12px 0; padding: 8px 10px; background: var(--box-bg); border: 1px solid var(--border); border-left: 4px solid #2e8b57; }
.story-sources h2 { margin: 0 0 2px; font-size: 13px; }
.story-sources ul { margin: 4px 0 0; padding-left: 18px; }
.story-sources li { margin-bottom: 3px; }
.ai-note { padding: 6px 8px; background: var(--yellow); border: 1px dashed #cc9; font-size: 11px; }

/* ---- Noticias de tu zona (portada) ---- */
.ln-box .box-title { display: flex; align-items: center; gap: 4px; }
.ln-change { margin-left: auto; font-weight: normal; }
.ln-list { list-style: none; margin: 0; padding: 0; }
.ln-list li { padding: 4px 0 4px 12px; border-bottom: 1px dotted #ccd; background: url("img/bullet.svg") 0 9px no-repeat; }
.ln-list li:last-child { border-bottom: 0; }
.ln-list a { font-weight: bold; }
.ln-cta p { margin: 0 0 6px; }
.ln-badge { display: inline-block; padding: 0 5px; background: #2e8b57; color: #fff; font-size: 9px; font-weight: bold; text-transform: uppercase; letter-spacing: .3px; vertical-align: 1px; }

/* "Usar esta localidad" en /clima/{localidad} */
.place-cta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; padding: 8px 10px; background: var(--yellow); border: 1px solid #e6c86e; }
.place-cta > span { flex: 1; min-width: 200px; }
.place-cta button { flex: none; }
.place-cta.is-mine { background: #e6ffe6; border-color: #4c4; }

/* ---- Crucigrama del día ----
   Con !important: es un tablero, y los temas que pintan todas las tablas o los campos de texto no lo tienen que tocar. */
.cw-wrap { overflow-x: auto; margin: 8px 0; }
.cw-grid { --cw: min(32px, calc((100vw - 48px) / var(--cw-cols))); border-collapse: collapse !important; margin: 0 auto; user-select: none; background: none !important; }
.cw-grid td { width: var(--cw) !important; height: var(--cw) !important; min-width: 0 !important; padding: 0 !important; position: relative; border: 1px solid #333 !important; text-align: center; }
.cw-grid td.cw-block { background: #222 !important; border-color: #222 !important; }
.cw-grid td.cw-cell { background: #fff !important; }
.cw-num { position: absolute; top: 1px; left: 2px; font: bold 8px/1 Verdana, sans-serif; color: #333; pointer-events: none; z-index: 1; }
.cw-grid .cw-cell input { display: block; width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
  background: transparent !important; text-align: center; text-transform: uppercase; font: bold calc(var(--cw) * .55)/1 Verdana, sans-serif !important; color: #000 !important;
  caret-color: transparent; border-radius: 0 !important; box-shadow: none !important; }
.cw-grid .cw-cell input:focus { outline: none; }
.cw-letter { font: bold calc(var(--cw) * .55) Verdana, sans-serif; color: #036; line-height: var(--cw); }
.cw-grid td.cw-cell.is-word { background: #dbe8ff !important; }
.cw-grid td.cw-cell.is-active { background: #ffd966 !important; }
.cw-grid .cw-cell.is-wrong input { color: #c00 !important; }
.cw-grid.is-done td.cw-cell { background: #d9f5d9 !important; }
.cw-current { min-height: 1.4em; margin: 4px 0; text-align: center; font-weight: bold; color: var(--blue-dark); }
.cw-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; }
.cw-status { flex-basis: 100%; text-align: center; font-weight: bold; }
.cw-clues { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.cw-clues h2 { margin: 0 0 4px; font-size: 13px; color: var(--blue); border-bottom: 1px solid var(--border); }
.cw-clues ol { margin: 0; padding-left: 26px; }
.cw-clues li { padding: 1px 3px; cursor: pointer; }
.cw-clues li.is-current { background: #ffd966; color: #000; }
@media (max-width: 600px) { .cw-clues { grid-template-columns: 1fr; } }

/* ---- Temas del día ---- */
.trending { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: var(--paper); border-bottom: 1px solid var(--border); font-size: 11px;
  overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.trending::-webkit-scrollbar { display: none; }
.tt-label { flex: none; color: #fff; background: var(--blue); padding: 1px 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; }
.trending ul { display: flex; margin: 0; padding: 0; list-style: none; }
.trending li + li::before { content: "|"; margin: 0 7px; color: var(--border); }
.trending a { font-weight: bold; text-decoration: none; }
.trending a:hover { text-decoration: underline; }

/* ---- Ticker ---- */
#ticker {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--yellow);
  border-bottom: 1px solid #cc9;
}
#ticker b { color: #cc0000; white-space: nowrap; }
#ticker marquee { flex: 1; }
#ticker a { color: #000; text-decoration: none; }
#ticker a:hover { text-decoration: underline; }

/* ---- Columnas ---- */
#columns {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 190px;
  gap: 8px;
  padding: 8px;
}
#columns.no-sidebars { grid-template-columns: minmax(0, 1fr); }
/* En el HTML el contenido va antes que las columnas: acá se ubica cada uno en su lugar. */
#columns > #left { grid-column: 1; grid-row: 1; }
#columns > #center { grid-column: 2; grid-row: 1; }
#columns > #right { grid-column: 3; grid-row: 1; }
#columns.no-sidebars > #center { grid-column: 1; }

/* ---- Cajas / bloques ---- */
.box {
  border: 1px solid var(--border);
  background: var(--box-bg);
  margin-bottom: 8px;
}
.box-title {
  background: linear-gradient(180deg, #4a78d4 0%, #1f4fae 50%, #163f91 51%, #2d5cc0 100%);
  color: #fff;
  font-weight: bold;
  padding: 3px 6px;
  border-bottom: 1px solid #0d2a66;
  text-shadow: 1px 1px 0 #0d2a66;
}
.box-title a { color: #fff; }
.box-title .tiny { color: #dde; font-weight: normal; text-shadow: none; }
.box-body { padding: 6px; }
.sidebar .box-body { padding: 5px; }

#right .box-title { background: linear-gradient(180deg, #ffb84d 0%, #ff9900 50%, #e68a00 51%, #ffaa33 100%); color: #402000; text-shadow: 1px 1px 0 #ffd699; border-bottom-color: #b36b00; }

.menu { list-style: none; margin: 0; padding: 0; }
.menu li { padding: 2px 0 2px 12px; background: url("img/bullet.svg") 0 6px no-repeat; }
.menu-sep { margin: 6px -5px 3px; padding: 1px 5px; background: #dfe7f5; font-weight: bold; color: var(--blue-dark); border-top: 1px dotted var(--border); }

.tiny { font-size: 9px; color: var(--muted); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.r { text-align: right; }
.c { text-align: center; }
.r-float { float: right; }
.hp { position: absolute; left: -9999px; }

button, .button {
  font: bold 11px Verdana, sans-serif;
  padding: 2px 8px;
  border: 2px outset #ddd;
  background: #e8e8e8;
  cursor: pointer;
  color: #000;
}
button:active { border-style: inset; }
.linkbtn { border: 0; background: none; color: var(--link); padding: 0; font-weight: normal; text-decoration: underline; }
input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], input[type=datetime-local], textarea, select {
  font: 11px Verdana, sans-serif;
  border: 2px inset #ccc;
  padding: 2px 3px;
  max-width: 100%;
}
.loginbox input { width: 100%; margin-bottom: 3px; }

/* ---- Flash ---- */
.flash { margin: 8px 8px 0; padding: 6px 10px; border: 1px solid; font-weight: bold; }
.flash-ok { background: #e6ffe6; border-color: #4c4; color: #060; }
.flash-error { background: #ffe6e6; border-color: #c44; color: #900; }

/* ---- Portada ---- */
.welcome {
  background: var(--yellow);
  border: 1px dashed #cc9;
  padding: 6px 8px;
  margin-bottom: 8px;
}
.featured {
  display: grid;
  grid-template-columns: 45% 1fr;
  gap: 10px;
  border: 1px solid var(--border);
  padding: 8px;
  margin-bottom: 8px;
  background: linear-gradient(180deg, #fff, #eef3fb);
}
.featured:not(:has(img)) { grid-template-columns: 1fr; }
.featured img { width: 100%; height: 190px; object-fit: cover; border: 1px solid #999; }
.featured .featured-title { font: bold 19px/1.2 Georgia, "Times New Roman", serif; margin: 6px 0; }
.featured .featured-title a { color: #000; text-decoration: none; }
.featured .featured-title a:hover { color: #cc0000; }
.kicker { display: inline-block; color: #fff; font-weight: bold; font-size: 10px; padding: 1px 6px; text-transform: uppercase; }
.kicker-sm { display: block; font-size: 9px; font-weight: bold; text-transform: uppercase; }
.meta { color: var(--muted); font-size: 10px; }

.secondary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.sec-item img { width: 100%; height: 90px; object-fit: cover; border: 1px solid #999; }
.sec-title { font-weight: bold; color: #000 !important; text-decoration: none; }
.sec-title:hover { text-decoration: underline; }

.quote-day { border-top: 1px dotted #999; border-bottom: 1px dotted #999; padding: 4px 0; margin-bottom: 8px; color: #333; }

.sections { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.section-box { border: 1px solid var(--border); }
.section-title { display: flex; justify-content: space-between; padding: 3px 6px; }
.section-title a { color: #fff; font-weight: bold; text-decoration: none; }
.section-title .more { font-weight: normal; font-size: 10px; }
.section-box ul { list-style: square; margin: 0; padding: 5px 6px 5px 22px; }
.section-box li { margin-bottom: 3px; }
.section-box li.first { list-style: none; margin-left: -16px; overflow: hidden; border-bottom: 1px dotted #ccc; padding-bottom: 4px; }
.section-box li.first > a { font-weight: bold; }
.thumb { float: left; width: 70px; height: 52px; object-fit: cover; margin: 0 6px 2px 0; border: 1px solid #999; }
.new { background: #cc0000; color: #fff; font-size: 8px; font-weight: bold; padding: 0 3px; animation: blink 1s steps(2, start) infinite; }
.hot { background: var(--orange); color: #fff; font-size: 8px; font-weight: bold; padding: 0 3px; }
@keyframes blink { to { visibility: hidden; } }

.headlines { list-style: none; margin: 0; padding: 0; }
.headlines li { padding: 3px 0; border-bottom: 1px dotted #ccd; }
.headlines .src { display: inline-block; min-width: 72px; background: #e0e8f5; color: var(--blue-dark); font-size: 9px; font-weight: bold; padding: 0 3px; text-align: center; }

/* ---- Artículo ---- */
.breadcrumb { font-size: 10px; margin-bottom: 6px; }
.article h1 { font: bold 22px/1.2 Georgia, "Times New Roman", serif; margin: 0 0 6px; }
.article .lead { font-size: 13px; color: #333; font-style: italic; }
.article-img { display: block; margin: 8px 0; border: 1px solid #999; max-height: 380px; object-fit: cover; width: 100%; }
.article-figure { margin: 8px 0; }
.article-figure .article-img { margin: 0; }
.photo-credit { margin-top: 3px; font-size: 10px; color: var(--muted); text-align: right; font-style: italic; }
.article-body { font-size: 12px; line-height: 1.6; }
.article-body h2 { font: bold 16px Georgia, "Times New Roman", serif; color: var(--blue); border-bottom: 1px solid var(--border); padding-bottom: 2px; margin: 18px 0 6px; }
.article-body li { margin-bottom: 3px; }
.readmore { background: var(--yellow); border: 1px solid #cc9; padding: 6px; font-weight: bold; }
.tools { border-top: 1px solid #ccc; padding-top: 4px; font-size: 10px; }
.comment { border-bottom: 1px dotted #aab; padding: 5px 0; }
.comment-head { background: #e8eef9; padding: 1px 4px; margin-bottom: 3px; }

/* El ícono va pegado al título; lo que sigue al título (botón, fecha) va a la derecha. */
.section-header > :last-child:not(.ic) { margin-left: auto; }
.section-header { font: bold 18px Georgia, serif; color: var(--blue); border-bottom: 3px solid var(--blue); margin-bottom: 8px; padding-bottom: 2px; }
.listing { overflow: hidden; border-bottom: 1px dotted #aab; padding: 6px 0; }
.listing .listing-title { margin: 0 0 3px; font-size: 13px; }
.listing .thumb { width: 110px; height: 80px; }
.listing p { margin: 2px 0; }
.pager { text-align: center; padding: 8px; }
.pager a, .pager b { margin: 0 2px; }

/* ---- Widgets ---- */
.wx { width: 100%; border-collapse: collapse; }
.wx td { padding: 2px; border-bottom: 1px dotted #ccc; }
.wx-icon { font-size: 16px; width: 22px; }
.wx-temp { font-weight: bold; text-align: right; color: #c60; }
.fx { width: 100%; border-collapse: collapse; }
.fx th { background: #fde2b8; text-align: left; font-size: 10px; }
.fx td { border-bottom: 1px dotted #ccc; padding: 1px 2px; }
.fx th.r, .fx td.r { text-align: right; }
.trend { text-align: center; font-size: 9px; }
.trend.up { color: #090; }
.trend.down { color: #c00; }
.zodiac { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; text-align: center; }
.zodiac a { font-size: 20px; text-decoration: none; display: block; border: 1px solid transparent; }
.zodiac a:hover { border-color: var(--orange); background: #fff3dd; }
.otd { margin: 3px 0; }
.quote { font-style: italic; font-family: Georgia, serif; font-size: 12px; margin: 0; }
.odometer { display: inline-flex; gap: 1px; margin: 3px 0; }
.odometer span { background: linear-gradient(180deg, #333, #000 50%, #222); color: #3f3; font: bold 14px "Courier New", monospace; padding: 1px 3px; border: 1px solid #666; }
.popular { margin: 0; padding-left: 18px; }
.popular li { margin-bottom: 3px; }
.shouts { max-height: 180px; overflow-y: auto; background: #fff; border: 1px inset #ccc; padding: 3px; margin-bottom: 4px; }
.shout { border-bottom: 1px dotted #ddd; padding: 2px 0; word-wrap: break-word; }
.shoutform input { width: 100%; margin-bottom: 2px; }
.shoutform button { width: 100%; }
.poll-q { margin: 0 0 4px; }
.poll-opt { display: block; }
.poll-row { margin-bottom: 3px; }
.bar { height: 9px; background: #eee; border: 1px solid #999; }
.bar span { display: block; height: 100%; background: linear-gradient(180deg, #7fb2ff, #1f5fd0); }
.poll-results { width: 100%; }
.poll-results .barcell { width: 50%; }

/* ---- Páginas de servicios ---- */
.feeds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.horoscope-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.horoscope-grid.single { grid-template-columns: 1fr; font-size: 13px; }
.horo { border: 1px solid #e0b870; background: #fffaf0; padding: 6px; }
.horo p { margin: 3px 0; }
.horo-head { font-weight: bold; font-size: 13px; border-bottom: 1px solid #e0b870; margin-bottom: 4px; }
.horo-sym { font-size: 22px; color: #a60; }
.wx-big { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.wx-bigicon { font-size: 40px; }
.wx-bigtemp { font: bold 30px Georgia, serif; color: #c60; }
.wx-days { border-collapse: collapse; }
.wx-days td { text-align: center; padding: 3px 8px; border-left: 1px dotted #aab; }
.wx-days .max { color: #c00; }
.wx-days .min { color: #00c; }
.wx-all .max { color: #c00; }
.wx-all .min { color: #00c; }
.wx-all { width: 100%; }
.wx-all th:first-child { text-align: left; }
.wx-all .ic { vertical-align: -3px; }
.wx-find { display: flex; gap: 4px; margin-bottom: 8px; }
.wx-find input { flex: 1; max-width: 360px; font-size: 13px; padding: 3px 6px; }
.wx-facts { list-style: none; margin: 0; padding: 0; line-height: 1.8; }
.wx-facts .max, .wx-week .max { color: #c00; }
.wx-facts .min, .wx-week .min { color: #00c; }
.wx-near { margin: 0; padding-left: 16px; line-height: 1.8; }
.wx-dir { columns: 2 240px; column-gap: 16px; }
.wx-prov { break-inside: avoid; margin-bottom: 8px; }
.wx-prov h3 { margin: 0 0 2px; font-size: 11px; color: var(--blue); border-bottom: 1px dotted var(--border); }
.wx-week td { white-space: nowrap; }
@media (max-width: 480px) { .wx-week .wx-sun, .wx-week .wx-sky { display: none; } }
.timeline { padding-left: 16px; }
.timeline li { margin-bottom: 5px; }
.dir-cat { background: #eef3fb; border-left: 4px solid var(--orange); padding: 3px 6px; margin: 12px 0 4px; font-size: 12px; }
.dir { list-style: none; padding-left: 8px; }
.dir li { margin-bottom: 6px; }
.gb-entry { border: 1px solid #c9d6ee; margin-bottom: 6px; }
.gb-head { background: #e8eef9; padding: 3px 6px; }
.gb-msg { padding: 6px; }
.form p { margin: 5px 0; }
.login-page { max-width: 320px; margin: 30px auto; }
.error-page { text-align: center; padding: 40px 0; }
.error-page h1 { font: bold 64px Georgia, serif; color: var(--blue); margin: 0; }

/* ---- Pie ---- */
#footer {
  background: linear-gradient(180deg, #e9eef8, #c8d5ee);
  border-top: 3px solid var(--blue);
  text-align: center;
  padding: 8px;
  font-size: 10px;
}
.rss-badge { background: #f60; color: #fff; font-weight: bold; padding: 0 3px; border: 1px solid #c40; font-size: 9px; }
.badges { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.badge88 {
  display: inline-block;
  width: 88px;
  height: 31px;
  border: 1px solid #000;
  background: linear-gradient(180deg, #4a6fb5, #1d3f86);
  color: #fff;
  font: bold 9px/29px Verdana, sans-serif;
  overflow: hidden;
  white-space: nowrap;
}
.badge88.b2 { background: linear-gradient(180deg, #fff, #ccc); color: #036; }
.badge88.b3 { background: linear-gradient(180deg, #333, #000); color: #0f0; }
.badge88.b4 { background: linear-gradient(180deg, #ffcc00, #ff8800); color: #300; }

/* ---- Publicidad ---- */
.ad { text-align: center; margin: 6px auto; line-height: 0; }
.ad img { display: inline-block; max-width: 100%; height: auto; border: 0; }
.ad-label { display: block; font-size: 8px; line-height: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; }
.ad-top { margin: 6px 8px 0; }
.ad-sidebar { margin: 0; }
.ad-footer { display: inline-block; margin: 0; vertical-align: top; }

/* ---- Salidas (agenda cultural) ---- */
.salidas-title { background: linear-gradient(180deg, #ff5fa2 0%, #cc0066 50%, #b3005a 51%, #d6337f 100%); border-bottom-color: #800040; text-shadow: 1px 1px 0 #800040; }
.salidas-title .tiny { color: #ffe0ef; }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.ev-grid-home { grid-template-columns: repeat(3, 1fr); }
.ev-grid-movies { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.ev-card { display: flex; flex-direction: column; border: 1px solid #c9b6d6; background: #fff; min-width: 0; }
.ev-card:hover { border-color: #cc0066; box-shadow: 2px 2px 0 #f3c6dc; }
.ev-media { position: relative; display: block; text-decoration: none; aspect-ratio: 16 / 10; background: var(--ev, #cc0066); overflow: hidden; }
.ev-movie .ev-media { aspect-ratio: 2 / 3; }
.ev-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 42px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .35), transparent 60%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 8px, transparent 8px 16px); }
.ev-badge { position: absolute; left: 0; bottom: 0; color: #fff; font-size: 9px; font-weight: bold; padding: 1px 5px; text-transform: uppercase; }
.ev-badge.static { position: static; display: inline-block; }
.ev-star { position: absolute; top: 3px; right: 3px; background: var(--orange); color: #fff; font-weight: bold; padding: 0 4px; border: 1px solid #b36b00; }
.ev-body { padding: 4px 5px 5px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ev-when { color: #cc0066; font-weight: bold; font-size: 10px; text-transform: uppercase; }
.ev-title { font-weight: bold; color: #000 !important; text-decoration: none; line-height: 1.25; }
.ev-title:hover { color: #cc0066 !important; text-decoration: underline; }
.ev-where { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-foot { margin-top: auto; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; font-size: 9px; }
.ev-free { background: #090; color: #fff; font-weight: bold; padding: 0 4px; font-size: 9px; }
.ev-price { background: #eee; border: 1px solid #ccc; padding: 0 3px; }
.ev-going { color: #555; }
.ev-compact .ev-title { font-size: 11px; }

.ev-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.chip { display: inline-block; padding: 1px 8px; border: 1px solid var(--chip, #999); border-radius: 10px; background: #fff; color: #000 !important; text-decoration: none; font-size: 10px; }
.chip:hover, .chip.active { background: var(--chip, #666); color: #fff !important; }
.chip.active small, .chip:hover small { color: #eee; }
.chip-when { --chip: #cc0066; font-weight: bold; }
.ev-cats { margin-bottom: 8px; }
.salidas-header { display: flex; justify-content: flex-start; align-items: center; gap: 6px; flex-wrap: wrap; color: #cc0066; border-color: #cc0066; }
a.suggest-btn { font-family: Verdana, sans-serif; }
.ev-tabs { display: flex; gap: 2px; border-bottom: 3px solid #cc0066; margin-bottom: 6px; }
.ev-tabs a { padding: 3px 12px; border: 1px solid #c9b6d6; border-bottom: 0; background: #f7eef3; font-weight: bold; text-decoration: none; color: #800040 !important; }
.ev-tabs a.active { background: #cc0066; color: #fff !important; border-color: #cc0066; }
.ev-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #f7eef3; border: 1px solid #e3cbd8; padding: 5px; margin-bottom: 8px; }
.ev-when-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.ev-when-tabs a { padding: 1px 6px; border: 1px solid #c9b6d6; background: #fff; text-decoration: none; color: #000 !important; }
.ev-when-tabs a.active { background: #cc0066; color: #fff !important; border-color: #cc0066; font-weight: bold; }
.ev-subtitle { color: #800040; border-bottom: 1px dotted #cc0066; margin: 10px 0 6px; font-size: 13px; }
.ev-empty { text-align: center; padding: 20px; background: #fffaf0; border: 1px dashed #e0b870; }

.ev-detail { display: grid; grid-template-columns: 42% 1fr; gap: 12px; margin-bottom: 10px; }
.ev-detail-movie { grid-template-columns: 200px 1fr; }
.ev-detail-media { background: var(--ev, #cc0066); border: 1px solid #999; min-height: 180px; }
.ev-detail-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-detail-media .ev-ph { font-size: 80px; min-height: 220px; }
.ev-detail h1 { font: bold 22px/1.2 Georgia, serif; margin: 6px 0 4px; }
.ev-facts { border-collapse: collapse; margin: 6px 0; width: 100%; }
.ev-facts th { text-align: left; white-space: nowrap; vertical-align: top; padding: 3px 8px 3px 0; color: #555; font-weight: normal; }
.ev-facts td { padding: 3px 0; border-bottom: 1px dotted #ddd; }
.ev-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.btn-voy { font-size: 14px; padding: 4px 16px; background: linear-gradient(180deg, #ff7ab4, #cc0066); color: #fff; border: 2px outset #ff99c8; }
.btn-voy:active { border-style: inset; }
a.btn-tickets { font: bold 13px Verdana, sans-serif; padding: 4px 12px; background: linear-gradient(180deg, #ffe066, #ffb800); border: 2px outset #ffd24d; color: #402000 !important; text-decoration: none; }
.ev-going-yes { font-weight: bold; color: #090; font-size: 13px; }
.ev-cal, .ev-share { margin: 4px 0; }
.ev-mini li { margin-bottom: 3px; }
.suggest-table td { padding: 3px 4px; vertical-align: middle; }

/* ---- La web del día ---- */
.wdd-header { display: flex; justify-content: flex-start; align-items: center; gap: 6px; flex-wrap: wrap; color: #996600; border-color: #e6a800; }
.wdd-today { position: relative; display: grid; grid-template-columns: 55% 1fr; align-items: start; gap: 12px; border: 2px solid #e6a800; background: linear-gradient(180deg, #fffbe8, #fff3c4); padding: 26px 10px 10px; margin-bottom: 10px; }
.wdd-ribbon { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, #ffdd55, #e6a800); border: 1px solid #996600; border-top: 0; padding: 2px 14px; font-weight: bold; color: #4d3300; white-space: nowrap; text-shadow: 1px 1px 0 #fff3c4; }
.wdd-info .wdd-title { font: bold 22px/1.2 Georgia, serif; margin: 2px 0; }
.wdd-host { color: #080; font-family: "Courier New", monospace; margin: 0 0 6px; }
.wdd-cat { background: #e6a800; color: #fff; font-weight: bold; padding: 0 4px; }
.wdd-why { background: #fff; border: 1px dashed #e6a800; padding: 6px; margin: 6px 0; }
a.btn-visit { font: bold 13px Verdana, sans-serif; padding: 4px 12px; background: linear-gradient(180deg, #7fb2ff, #1f5fd0); color: #fff !important; border: 2px outset #9cc2ff; text-decoration: none; }
.wdd-vote { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.wdd-archive { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wdd-item, .wdd-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wdd-item-title { font-weight: bold; }
.wdd-sub { color: #996600; border-color: #e6a800; }

.web-frame { display: block; border: 2px outset #ddd; background: #c0c0c0; text-decoration: none; color: #000 !important; }
.web-frame:hover { outline: 2px solid var(--orange); }
.wf-bar { display: flex; justify-content: space-between; gap: 4px; background: linear-gradient(90deg, #0a246a, #a6caf0); color: #fff; font: bold 10px Tahoma, Verdana, sans-serif; padding: 2px 3px; }
.wf-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wf-btns { letter-spacing: 3px; flex: none; }
.wf-addr { display: flex; align-items: center; gap: 4px; padding: 2px 3px; font: 10px Tahoma, sans-serif; border-bottom: 1px solid #808080; }
.wf-url { flex: 1; background: #fff; border: 1px inset #999; padding: 0 3px; font-family: Tahoma, sans-serif; overflow: hidden; white-space: nowrap; }
.wf-go { border: 1px outset #ddd; padding: 0 4px; }
.wf-view { display: block; aspect-ratio: 16 / 11; background: #fff; border: 1px inset #999; margin: 2px; overflow: hidden; }
.wf-view img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.wf-noimg { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; font-size: 30px; color: #1f5fd0; text-align: center; }
.wf-noimg br + * { font-size: 11px; }
.web-frame.small .wf-bar { font-size: 8px; padding: 1px 2px; }

/* ---- Tránsito y transporte ---- */
.tr-header { display: flex; justify-content: flex-start; align-items: baseline; flex-wrap: wrap; gap: 6px; color: #333; border-color: #333; }
.tr-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; margin-bottom: 8px; }
.tr-sum { display: block; padding: 6px 8px; border: 2px solid #999; background: #f4f4f4; color: #000 !important; text-decoration: none; }
.tr-sum.all-ok { border-color: #2e9b3a; background: #eaf7ea; }
.tr-sum.has-issues { border-color: #d98c00; background: #fff4dc; }
.tr-sum-icon { font-size: 18px; }
.tr-box .box-title { background: linear-gradient(180deg, #555 0%, #333 50%, #222 51%, #444 100%); border-bottom-color: #000; text-shadow: 1px 1px 0 #000; }
.tr-board { padding: 0; }
.tr-line { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid #ddd; border-left: 5px solid #ccc; }
.tr-line:last-child { border-bottom: 0; }
.tr-line.tr-ok { border-left-color: #2e9b3a; }
.tr-line.tr-warn { border-left-color: #e6a800; background: #fffaf0; }
.tr-line.tr-bad { border-left-color: #d7261e; background: #fff0f0; }
.tr-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 5px; font: bold 11px Verdana, sans-serif; border-radius: 4px; flex: none; text-align: center; line-height: 1; }
.tr-badge.round { width: 30px; min-width: 30px; height: 30px; border-radius: 50%; font-size: 15px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.tr-badge.small { width: 20px; min-width: 20px; height: 20px; font-size: 10px; }
.tr-info { flex: 1; min-width: 0; }
.tr-name { font-weight: bold; }
.tr-name .follow-form { display: inline; margin-right: 2px; }
.tr-name .follow-btn.icon-only { padding: 0 1px; vertical-align: -2px; }
.tr-status { font-weight: normal; margin-left: 4px; }
.tr-bad .tr-status { color: #b00; font-weight: bold; }
.tr-warn .tr-status { color: #8a5a00; font-weight: bold; }
.tr-msg { font-size: 11px; margin: 1px 0; }
.tr-media { font-size: 11px; margin: 2px 0; padding: 2px 4px; background: #fff8dc; border-left: 3px solid #e6a800; }
.tr-rep { margin-left: 4px; color: #555; }
.tr-report form { display: flex; align-items: center; gap: 1px; white-space: nowrap; }
.tr-report button.mini { padding: 0 2px; font-size: 11px; }
.two-cols-public { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tr-mini-subte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-bottom: 4px; }
.tr-mini-line { display: flex; align-items: center; gap: 1px; text-decoration: none; }
.tr-mini-dot { font-size: 9px; }
.tr-mini-row { margin: 3px 0; }

/* ---- Barra rápida para celulares (portada) ---- */
.mobile-strip { display: none; }

/* ---- Barra "Sonando" y navegación continua ---- */
#radio-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 8px; padding: 5px 10px;
  background: linear-gradient(180deg, #2a2a38, #0d0d14); border-top: 2px solid var(--orange); color: #3f3; font: 11px "Courier New", monospace; box-shadow: 0 -2px 8px rgba(0, 0, 0, .4); }
#radio-dock[hidden] { display: none; }
#radio-dock .dock-icon { font-size: 16px; }
#radio-dock .dock-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#radio-dock .dock-text b { color: #fff; }
#radio-dock button { padding: 1px 8px; }
#radio-dock .dock-more { color: #ffcc66; font-family: Verdana, sans-serif; font-size: 10px; }
body:has(#radio-dock:not([hidden])) { padding-bottom: 42px; }
html.nav-loading, html.nav-loading a { cursor: progress; }
html.nav-loading body::before { content: ""; position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60;
  background: linear-gradient(90deg, transparent, var(--orange), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: navbar 1s linear infinite; }
@keyframes navbar { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) { html.nav-loading body::before { animation: none; background: var(--orange); } }

/* ---- Qué ver ---- */
.qv-header { display: flex; justify-content: flex-start; align-items: center; gap: 6px; flex-wrap: wrap; color: #7a1f1f; border-color: #b8322f; }
a.qv-roulette { background: linear-gradient(180deg, #ffe066, #ffb800); border-color: #ffd24d; color: #402000 !important; }
.qv-tabs { border-bottom-color: #b8322f; }
.qv-tabs a.active { background: #b8322f; border-color: #b8322f; }
.qv-filters { background: #fbf0ef; border-color: #ecc9c6; }
.qv-sub { color: #7a1f1f; border-color: #b8322f; }
.qv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-bottom: 8px; }
.qv-card { display: flex; flex-direction: column; min-width: 0; }
.qv-poster { position: relative; display: block; aspect-ratio: 2 / 3; background: #222; border: 1px solid #555; overflow: hidden; text-decoration: none; }
.qv-poster:hover { outline: 2px solid var(--orange); }
.qv-poster img, .qv-detail-poster img, .qv-today-poster img, .qv-block-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qv-ribbon { position: absolute; top: 6px; left: -2px; background: var(--orange); color: #fff; font: bold 9px Verdana, sans-serif; padding: 1px 5px; box-shadow: 1px 1px 0 rgba(0, 0, 0, .4); }
.qv-extra { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, .75); color: #ffcc66; font: bold 9px Verdana, sans-serif; padding: 2px 4px; }
.qv-kind { position: absolute; top: 3px; right: 3px; font-size: 13px; filter: drop-shadow(0 0 2px #000); }
.qv-body { padding: 3px 1px; display: flex; flex-direction: column; gap: 1px; }
.qv-title { font-weight: bold; color: #000 !important; line-height: 1.2; text-decoration: none; }
.qv-title:hover { color: #b8322f !important; text-decoration: underline; }
.qv-meta { font-size: 10px; color: var(--muted); }
.qv-pf { display: flex; flex-wrap: wrap; gap: 2px; }
.pf-badge { display: inline-block; color: #fff; font: bold 10px Verdana, sans-serif; padding: 1px 6px; border-radius: 3px; margin: 1px 2px 1px 0; }
.pf-badge.small { font-size: 8px; padding: 0 4px; }
.vhs { --hue: 0; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 24px 6px 8px; color: #fff; text-align: center;
  background: linear-gradient(160deg, hsl(var(--hue) 70% 35%), hsl(calc(var(--hue) + 40) 70% 18%)); border-left: 10px solid #111; }
.vhs-brand { font: bold 7px Verdana, sans-serif; letter-spacing: 1px; color: #ffcc66; }
.vhs-title { font: bold 15px/1.1 Georgia, serif; text-shadow: 2px 2px 0 rgba(0, 0, 0, .6); word-wrap: break-word; }
.vhs-year { font: bold 12px Verdana, sans-serif; opacity: .85; }
.vhs-label { font: bold 7px Verdana, sans-serif; background: #fff; color: #111; padding: 1px; }
.qv-today { display: grid; grid-template-columns: 110px 1fr; gap: 10px; background: linear-gradient(180deg, #2a1414, #120808); color: #eee; border: 2px solid #b8322f; padding: 8px; margin-bottom: 10px; }
.qv-today a { color: #ffcc66 !important; }
.qv-today h2 { margin: 2px 0 4px; font: bold 18px Georgia, serif; }
.qv-today .tiny { color: #ccc; }
.qv-today-poster { aspect-ratio: 2 / 3; display: block; overflow: hidden; border: 1px solid #555; }
.qv-today-label { color: #ff9f9f; font-weight: bold; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.qv-detail { display: grid; grid-template-columns: 200px 1fr; gap: 12px; margin-bottom: 10px; }
.qv-detail-poster { aspect-ratio: 2 / 3; border: 1px solid #555; overflow: hidden; background: #222; }
.qv-detail h1 { font: bold 22px/1.2 Georgia, serif; margin: 6px 0 2px; }
.qv-year { font-weight: normal; color: #666; }
.qv-kind-label { background: #b8322f; color: #fff; font-weight: bold; font-size: 10px; padding: 1px 6px; }
.qv-facts { margin: 4px 0; }
.qv-where { margin: 8px 0; padding: 6px; background: #f6f6f6; border: 1px solid #ddd; }
a.qv-trailer { background: linear-gradient(180deg, #ff4d4d, #c00); color: #fff !important; border-color: #ff8080; }
.qv-new { color: #090; font-weight: bold; }
.qv-why { background: #fffbe8; border: 1px dashed #e6a800; padding: 6px; margin: 8px 0; }
.qv-surprise { background: #fff3cc; border: 2px solid var(--orange); padding: 6px 8px; margin-bottom: 8px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.qv-block { display: flex; gap: 6px; align-items: flex-start; }
.qv-block-poster { display: block; aspect-ratio: 2 / 3; width: 56px; flex: none; overflow: hidden; border: 1px solid #555; }
.qv-block-poster .vhs { padding: 4px 2px; border-left-width: 4px; }
.qv-block-poster .vhs-title { font-size: 9px; }
.qv-block-poster .vhs-brand, .qv-block-poster .vhs-label, .qv-block-poster .vhs-year { display: none; }
.qv-block-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qv-credits { margin-top: 10px; }

/* ---- Juegos (wobi.games) ---- */
.gm-box { border-color: #0d9488; background: #0c1322; }
.gm-title { background: linear-gradient(180deg, #2dd4bf 0%, #0d9488 50%, #0b7c72 51%, #14b8a6 100%); border-bottom-color: #064e48; text-shadow: 1px 1px 0 #064e48; }
.gm-title .tiny { color: #d9fffa; }
.gm-body { background: radial-gradient(ellipse at 50% 0%, rgba(45, 212, 191, .18), transparent 60%), linear-gradient(180deg, #101a36, #0a0e1a); }
.gm-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.gm-grid-page { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 10px; }
.gm-tile { display: flex; flex-direction: column; align-items: stretch; gap: 3px; text-decoration: none; color: #e2e8f0 !important; background: #111a2e; border: 1px solid #1e2b4a; border-radius: 6px; padding: 4px; transition: transform .15s, box-shadow .15s; }
.gm-tile:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #2dd4bf, 0 6px 16px -4px rgba(45, 212, 191, .6); text-decoration: none; }
.gm-img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: #0a0e1a; }
.gm-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-name { font-weight: bold; font-size: 11px; text-align: center; }
.gm-desc { font-size: 10px; color: #94a3b8; line-height: 1.35; }
.gm-play { margin-top: auto; text-align: center; background: linear-gradient(180deg, #2dd4bf, #0d9488); color: #04201d; font: bold 10px Verdana, sans-serif; border-radius: 3px; padding: 2px 0; }
.gm-foot { text-align: right; margin: 6px 0 0; }
.gm-foot a { color: #5eead4 !important; }
.gm-header { color: #0d9488; border-color: #0d9488; }
.gm-sub { color: #0b7c72; border-color: #0d9488; }
.gm-hero { display: grid; grid-template-columns: 1fr 300px; gap: 12px; align-items: center; padding: 12px; margin-bottom: 8px; color: #e2e8f0; border: 2px solid #0d9488;
  background: radial-gradient(ellipse at 30% 0%, rgba(45, 212, 191, .25), transparent 60%), linear-gradient(180deg, #101a36, #0a0e1a); }
.gm-hero-title { font: bold 22px Georgia, serif; color: #5eead4; margin: 0 0 6px; }
.gm-hero-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
a.gm-cta { font: bold 13px Verdana, sans-serif; padding: 4px 14px; background: linear-gradient(180deg, #2dd4bf, #0d9488); color: #04201d !important; border: 2px outset #5eead4; }

/* ---- Buscador ---- */
.dym { background: #fffbe8; border: 1px solid #e6c86e; padding: 6px 8px; margin: 6px 0 8px; font-size: 13px; }
.dym a { color: #1a0dab !important; }
.search-tabs { flex-wrap: wrap; margin-top: 10px; }
.search-results { display: flex; flex-direction: column; }
.sr { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px dotted #aab; }
.sr-img { flex: none; width: 64px; height: 64px; overflow: hidden; border: 1px solid #ccc; background: #f4f4f4; }
.sr-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sr-type { font-size: 9px; font-weight: bold; text-transform: uppercase; color: #666; }
.sr-title { font-size: 13px; font-weight: bold; }
.sr-snip { font-size: 11px; color: #333; }
.sr mark, .dym mark { background: #fff176; color: inherit; padding: 0 1px; }
.search-form input[type=search] { font-size: 13px; padding: 3px 5px; }
input[type=search] { font: 11px Verdana, sans-serif; border: 2px inset #ccc; padding: 2px 3px; max-width: 100%; }
#searchbox input[type=search] { font-size: 12px; padding: 2px 4px; max-width: 60vw; }
.ac-box { position: absolute; z-index: 70; background: #fff; border: 1px solid #7f9db9; box-shadow: 2px 3px 6px rgba(0, 0, 0, .3); max-width: 92vw; font: 11px Verdana, sans-serif; }
.ac-item { display: flex; justify-content: space-between; gap: 10px; padding: 4px 7px; color: #000 !important; text-decoration: none; border-bottom: 1px solid #eef; }
.ac-item.is-active, .ac-item:hover { background: #316ac5; color: #fff !important; }
.ac-item.is-active .ac-type, .ac-item:hover .ac-type { color: #dde; }
.ac-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-type { flex: none; font-size: 9px; color: #777; }
.ac-all { font-weight: bold; color: #1a0dab !important; }

/* ---- Personalización ---- */
.pz-header { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 6px; color: #b36b00; border-color: var(--orange); }
.pz-intro { background: #fffbe8; border: 1px dashed #e6c86e; padding: 8px; }
.pz-form fieldset { border: 1px solid var(--border); margin: 0 0 10px; padding: 6px 10px 8px; background: #fafcff; }
.pz-form legend { font-weight: bold; padding: 0 4px; color: var(--blue-dark); }
.pz-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pz-chip { --chip: #666; cursor: pointer; }
.pz-city { width: 100%; max-width: 360px; font-size: 13px; padding: 4px 6px; }
.pz-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pz-chip span { display: inline-block; padding: 3px 10px; border: 2px solid var(--chip); border-radius: 14px; background: #fff; color: #000; font-size: 11px; user-select: none; }
.pz-chip input:checked + span { background: var(--chip); color: #fff; font-weight: bold; }
.pz-chip .pz-tick { display: none; margin-right: 3px; }
.pz-chip input:checked + span .pz-tick { display: inline-block; }
.pz-chip input:focus-visible + span { outline: 2px solid #000; outline-offset: 2px; }
.pz-actions { display: flex; gap: 10px; align-items: center; }
button.pz-save, a.pz-save { font: bold 13px Verdana, sans-serif; padding: 4px 16px; background: linear-gradient(180deg, #ffd27a, #ff9900); border: 2px outset #ffc04d; color: #402000 !important; text-decoration: none; }
.pz-cta { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, #fff6df, #fffbe8); border: 1px solid #e6c86e; padding: 7px 10px; margin-bottom: 8px; }
.pz-cta-icon { font-size: 24px; }
.pz-cta > div { flex: 1; }
.pz-summary p { margin: 3px 0; }
.pz-topic { display: inline-flex; align-items: center; gap: 3px; border: 1px solid #b8322f; border-radius: 12px; padding: 1px 3px 1px 9px; background: #fff; }
.pv-box { border-color: #e6a800; }
.pv-title { background: linear-gradient(180deg, #ffd27a 0%, #ff9900 50%, #e68a00 51%, #ffb84d 100%); color: #402000; text-shadow: 1px 1px 0 #ffd699; border-bottom-color: #b36b00; display: flex; justify-content: space-between; align-items: center; }
.pv-title a { color: #402000 !important; }
.pv-list { list-style: none; margin: 0; padding: 0; }
.pv-list li { overflow: hidden; padding: 5px 0; border-bottom: 1px dotted #ccd; }
.pv-list .thumb { width: 64px; height: 48px; }
.pv-why { color: #b36b00; font-weight: bold; }
.follow-btn { font: bold 10px Verdana, sans-serif; padding: 1px 8px; border: 1px solid #b8322f; border-radius: 10px; background: #fff; color: #b8322f; cursor: pointer; }
.follow-btn.is-on { background: #b8322f; color: #fff; }
.follow-btn.fav-btn { border-color: #e6a800; color: #b36b00; font-size: 12px; padding: 0 6px; }
.follow-btn.fav-btn.is-on { background: #ffcc33; color: #402000; }
.follow-btn.mini { font-size: 9px; padding: 0 6px; }
.sr-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.sr-bar p { margin: 0; }
.follow-topic { margin-left: auto; }
.meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.meta-row .meta { margin-right: auto; }
.follow-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 12px 0 8px; padding: 7px 10px;
  border: 1px solid var(--border); border-left: 4px solid var(--tab); background: #f5f8fd; font-size: 11px; }
.follow-cta span { flex: 1 1 260px; }
.follow-cta .follow-btn { font-size: 11px; padding: 2px 10px; white-space: nowrap; }
#follow-toast { position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  background: #222; color: #fff; padding: 7px 14px; border-radius: 4px; font: 12px Verdana, sans-serif; z-index: 80; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
#follow-toast.ok, #follow-toast.err { opacity: 1; transform: translateX(-50%); }
#follow-toast.err { background: #a00; }

/* ---- Compartir ---- */
.share-bar { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin: 8px 0; padding: 5px 0; border-top: 1px dotted #aab; border-bottom: 1px dotted #aab; }
.share-label { font-weight: bold; margin-right: 3px; }
.sh { display: inline-block; padding: 1px 7px; font: bold 10px Verdana, sans-serif; color: #fff !important; text-decoration: none; border: 1px solid rgba(0, 0, 0, .35); border-radius: 3px; cursor: pointer; line-height: 16px; }
.sh:hover { filter: brightness(1.12); text-decoration: none; }
.sh-wa { background: #25a244; }
.sh-fb { background: #3b5998; }
.sh-x { background: #111; }
.sh-tg { background: #2a9fd8; }
.sh-mail { background: #777; }
.sh-copy { background: #e8e8e8; color: #000 !important; border: 1px solid #999; }
.sh-native { background: var(--orange); }

/* ---- Barra fija para celulares ---- */
#mobilebar { display: none; }
@media (max-width: 820px) {
  html { scroll-padding-top: 48px; }
  #mobilebar { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 60; transform: translateY(-110%); transition: transform .18s ease-out;
    background: linear-gradient(180deg, #1a4db3 0%, #003399 55%, #002266 100%); border-bottom: 3px solid var(--orange); box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
  html.mb-on #mobilebar { transform: none; }
  .mb-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; }
  .mb-logo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; text-decoration: none; color: #fff !important;
    font: bold italic 20px/1 "Trebuchet MS", Verdana, sans-serif; letter-spacing: -1px; text-shadow: 1px 1px 0 #001144, 0 0 8px #66aaff; }
  .mb-logo span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 2px; }
  .mb-logo span::first-letter { color: var(--orange); }
  .mb-btn { flex: none; width: 34px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  .mb-btn[aria-expanded=true] { border-style: inset; background: #c8d5ee; }
  .mb-radio { background: linear-gradient(180deg, #ffb84d, #ff9900); border-color: #b36b00; }
  .mb-radio.is-playing { background: linear-gradient(180deg, #ffe09a, #ffcc66); }
  .mb-panel { padding: 6px; background: linear-gradient(180deg, #e9eef8, #c8d5ee); border-top: 1px solid #001144; }
  #mobilebar .mb-panel[hidden] { display: none; }
  #mb-search { display: flex; gap: 4px; }
  #mb-search input { flex: 1; min-width: 0; font-size: 16px; padding: 3px 5px; }
  #mb-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; max-height: 70vh; overflow-y: auto; }
  #mb-menu a { display: flex; align-items: center; gap: 4px; padding: 7px 8px; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--tab, var(--blue));
    color: #000 !important; text-decoration: none; font: bold 12px Verdana, sans-serif; }
  #mb-menu a.active { background: #fff3d6; border-left-color: var(--orange); }
  #mb-menu .mb-wide { grid-column: 1 / -1; justify-content: center; background: #fffbe6; }
}

/* ---- Pantallas chicas (concesión al siglo XXI) ---- */
@media (max-width: 820px) {
  /* Una sola columna: las cajitas de ambas columnas se mezclan y se ordenan por su
     prioridad en celulares (--mo, configurable en Panel → Bloques). El contenido es 50. */
  #columns { display: flex; flex-direction: column; }
  #left, #right { display: contents; }
  #center { order: 50; min-width: 0; }
  .sidebar > .box { order: var(--mo, 100); }
  .sidebar > .mo-hide { display: none; }
  .mobile-strip { display: flex; gap: 4px; margin-bottom: 8px; }
  .ms-item { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 5px 4px; font: 11px Verdana, sans-serif;
    background: linear-gradient(180deg, #fff, #e6edf9); border: 1px solid var(--border); color: #000 !important; text-decoration: none; white-space: nowrap; overflow: hidden; }
  .ms-item span { overflow: hidden; text-overflow: ellipsis; }
  button.ms-radio { flex: 0 0 auto; font-weight: bold; background: linear-gradient(180deg, #ffb84d, #ff9900); border-color: #b36b00; }
  button.ms-radio.is-playing { background: linear-gradient(180deg, #ffe09a, #ffcc66); }
  .featured, .sections, .feeds-grid, .horoscope-grid, .ev-detail, .ev-detail-movie, .wdd-today { grid-template-columns: 1fr; }
  .ev-grid-home { grid-template-columns: 1fr 1fr; }
  .qv-detail { grid-template-columns: 120px 1fr; }
  .gm-grid { grid-template-columns: repeat(3, 1fr); }
  .gm-hero { grid-template-columns: 1fr; }
  .qv-today { grid-template-columns: 80px 1fr; }
  .two-cols-public { grid-template-columns: 1fr; }
  .tr-line { flex-wrap: wrap; }
  .tr-report { width: 100%; padding-left: 38px; }
  .secondary { grid-template-columns: 1fr 1fr; }
  #header { justify-content: center; text-align: center; }
  .hd-wx { margin-left: 0; }
}
@media print {
  #topbar, #header form, #tabs, #ticker, .sidebar, #footer, .tools, #comentarios form, #mobilebar { display: none !important; }
  body { background: #fff; }
  #columns { display: block; }
}

/* ---- Radio ---- */
.radio-block select, .radio-block .radio-vol input { width: 100%; }
/* Bloque lateral: selector, pantalla con lo que suena, controles y el top de las más escuchadas */
.rb-select { display: block; width: 100%; margin-bottom: 4px; font-weight: bold; }
div.rb-select { padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-lcd { min-height: 44px; }
.radio-lcd.rb-lcd .radio-now-song { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.rb-controls { display: flex; align-items: center; gap: 3px; }
.rb-controls button { flex: none; width: 28px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.rb-vol { flex: 1; min-width: 0; margin: 0 0 0 2px; }
.rb-sep { border: 0; border-top: 1px dotted var(--border); margin: 7px 0 5px; }
.rb-top-h { margin: 0 0 3px; font-weight: bold; color: var(--blue-dark); }
.rb-top { list-style: none; margin: 0; padding: 0; }
.rb-top li { display: flex; align-items: flex-start; gap: 5px; padding: 3px 0; border-bottom: 1px dotted #ccd; }
.rb-top li:last-child { border-bottom: 0; }
.rb-top button { flex: none; width: 22px; height: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.rb-top-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rb-top-name, .rb-top-now { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-top-now { font-size: 10px; color: var(--muted); }
.rb-more { margin: 6px 0 0; }
.radio-lcd { display: flex; gap: 5px; align-items: center; background: linear-gradient(180deg, #102010, #000); border: 2px inset #666; padding: 4px; margin-bottom: 4px; }
.radio-lcd img { background: #fff; border: 1px solid #333; object-fit: contain; flex: none; }
.radio-lcd-text { min-width: 0; font: 10px "Courier New", monospace; color: #3f3; }
.radio-lcd .radio-now-name { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-status[data-status=playing] { color: #3f3; }
.radio-status[data-status=playing]::before { content: "● "; color: #f33; animation: blink 1s steps(2, start) infinite; }
.radio-status[data-status=loading], .radio-status[data-status=blocked] { color: #ff3; }
.radio-status[data-status=error] { color: #f66; }
.radio-controls { display: flex; gap: 3px; margin-bottom: 4px; }
.radio-controls [data-radio-toggle] { flex: 1; }
[data-radio-toggle].is-playing { background: #ffe09a; border-style: inset; }
.radio-vol { display: flex; align-items: center; gap: 3px; font-size: 10px; margin: 3px 0; }
.radio-vol input { flex: 1; min-width: 0; }

.radio-featured { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 10px; }
.radio-card { display: flex; gap: 8px; border: 1px solid #e0b870; background: linear-gradient(180deg, #fffaf0, #fdebc8); padding: 8px; }
.radio-card.is-playing, .radio-list tr.is-playing td { background: #fff3cc; }
.radio-card.is-playing { border-color: var(--orange); box-shadow: 0 0 0 2px #ffcc66; }
.radio-card-logo { width: 72px; height: 72px; object-fit: contain; background: #fff; border: 1px solid #999; flex: none; }
.radio-card h3 { margin: 2px 0; font-size: 14px; }
.radio-card p { margin: 3px 0; }
.radio-badge { background: var(--orange); color: #fff; font-size: 9px; font-weight: bold; padding: 0 4px; }
.radio-list { width: 100%; border-collapse: collapse; }
.radio-list td { padding: 3px 4px; border-bottom: 1px dotted #ccd; vertical-align: middle; }
.radio-list-logo { width: 34px; }
.radio-list-logo img { object-fit: contain; background: #fff; border: 1px solid #ccc; }
.radio-nowbar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding: 5px 8px; background: #000; color: #3f3; font: 11px "Courier New", monospace; border: 2px outset #666; }
.radio-nowbar .radio-vol { margin: 0 0 0 auto; color: #ccc; }

/* Ventana emergente estilo Winamp */
body.radio-popup { background: #1c1c28; margin: 0; }
.amp { max-width: 380px; margin: 0 auto; background: linear-gradient(180deg, #3a3a4e, #23232f); border: 2px outset #777; color: #ddd; font: 11px Tahoma, Verdana, sans-serif; }
.amp-titlebar { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px; background: linear-gradient(90deg, #0a246a, #a6caf0); color: #fff; font-weight: bold; letter-spacing: 1px; }
.amp-x { padding: 0 5px; line-height: 1; }
.amp-display { display: flex; gap: 6px; align-items: center; margin: 6px; padding: 6px; background: #000; border: 2px inset #555; }
.amp-display img { background: #fff; object-fit: contain; flex: none; }
.amp-info { flex: 1; min-width: 0; font-family: "Courier New", monospace; color: #3f3; }
.amp-marquee { overflow: hidden; white-space: nowrap; font-weight: bold; font-size: 13px; }
.amp-marquee span { display: inline-block; }
.radio-playing .amp-marquee span { animation: amp-scroll 9s linear infinite; padding-left: 100%; }
@keyframes amp-scroll { to { transform: translateX(-100%); } }
.amp-meta { color: #9c9; }
.amp-viz { display: flex; gap: 2px; align-items: flex-end; height: 40px; width: 60px; flex: none; }
.amp-viz i { flex: 1; height: 8%; background: linear-gradient(0deg, #0c0, #ff0 70%, #f00); }
.radio-playing .amp-viz i { animation: amp-bar .6s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
@keyframes amp-bar { 0% { height: 10%; } 50% { height: 85%; } 100% { height: 35%; } }
.amp-controls { display: flex; gap: 6px; align-items: center; padding: 0 6px; }
.amp-controls [data-radio-toggle] { min-width: 90px; }
.amp-controls .radio-vol { flex: 1; color: #ccc; }
.amp select { display: block; width: calc(100% - 12px); margin: 6px; background: #000; color: #3f3; border: 2px inset #555; }
/* Está sonando: el tema que informa la radio */
.radio-now-song[hidden], .radio-now-history[hidden] { display: none; }
.radio-lcd .radio-now-song { color: #ff6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-lcd .radio-now-song .ic, #radio-dock .radio-now-song .ic { vertical-align: -3px; }
#radio-dock .radio-now-song { color: #ffcc66; }
.amp-now { margin: 0 6px 6px; padding: 3px 6px; background: #000; border: 2px inset #555; font: bold 12px "Courier New", monospace; color: #ff6; overflow: hidden; white-space: nowrap; }
.amp-now:has(.radio-now-song[hidden]) { display: none; }
.amp-now .radio-now-song { display: inline-block; }
.radio-playing .amp-now .radio-now-song { animation: amp-scroll 12s linear infinite; padding-left: 100%; }
.radio-now-history { margin: 0 6px 6px; padding: 3px 6px 3px 6px; list-style: none; background: #000; border: 2px inset #555; font: 10px "Courier New", monospace; color: #9c9; }
.radio-now-history::before { content: "SONÓ RECIÉN"; display: block; color: #3f3; font-weight: bold; }
.radio-now-history li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-now-history li span { color: #6a6; }
.amp-foot { padding: 4px 6px 6px; font-size: 10px; color: #99a; }
.amp-foot a { color: #ffcc66; }
@media (prefers-reduced-motion: reduce) {
  .radio-playing .amp-viz i, .radio-playing .amp-marquee span, .radio-playing .amp-now .radio-now-song, .radio-status[data-status=playing]::before { animation: none; }
}

/* Íconos del sprite dentro de botones y botones de solo ícono */
button .ic, .button .ic { margin-right: 2px; }
.follow-btn .ic { margin-right: 3px; vertical-align: -3px; }
.follow-btn.icon-only { padding: 1px 3px; line-height: 1; }
.follow-btn.icon-only .ic { margin: 0; }
.follow-btn.icon-only .fl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.follow-btn.fav-btn.icon-only, .follow-btn.fav-btn.icon-only.is-on { background: transparent; border-color: transparent; }
.follow-btn.fav-btn.icon-only:hover { border-color: #e6a800; background: #fff8dc; }

/* ---------------------------------------------------------------- Promos del día */
.pr-header { display: flex; justify-content: flex-start; align-items: center; gap: 6px; flex-wrap: wrap; color: #cc3300; border-color: #cc3300; }
.pr-intro { margin: 4px 0 8px; }
.pr-days { border-bottom-color: #cc3300; }
.pr-days a { background: #fff1e8; border-color: #e8b89a; color: #802000 !important; }
.pr-days a.active { background: #cc3300; border-color: #cc3300; color: #fff !important; }
.pr-cats { display: flex; flex-wrap: wrap; gap: 3px; margin: 6px 0; }
.pr-filter { margin: 6px 0; font-weight: bold; font-size: 11px; }
.pr-sub { color: #802000; border-color: #e8b89a; }
.pr-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.pr-card { display: flex; gap: 8px; padding: 6px 8px; border: 1px solid #e0c4b0; border-left: 4px solid #cc3300; background: #fffaf6; }
.pr-card.pr-featured { border-left-color: #f2a900; background: #fffbe6; }
.pr-card.pr-is-mine { box-shadow: inset 0 0 0 1px #4aa31c; }
.pr-card:target { outline: 2px solid #f2a900; }
.pr-icon { flex: none; padding-top: 2px; }
.pr-main { flex: 1; min-width: 0; }
.pr-benefit { font: bold 17px Georgia, serif; color: #cc3300; line-height: 1.15; }
.pr-merchant { font-size: 12px; margin: 1px 0 3px; }
.pr-pay { font-size: 11px; font-weight: bold; color: #333; }
.pr-meta { margin-top: 2px; color: #555; }
.pr-details { margin: 3px 0 0; color: #555; }
.pr-actions { margin-top: 4px; }
.pr-badges { float: right; display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.pr-badge { font-size: 9px; font-weight: bold; padding: 1px 4px; border: 1px solid; white-space: nowrap; }
.pr-badge-star { background: #fff4b3; border-color: #d4a000; color: #6b4a00; }
.pr-badge-mine { background: #e6f7da; border-color: #4aa31c; color: #2f6b14; }
.pr-badge-end { background: #ffe7e0; border-color: #d62b1f; color: #8c1c1c; }
.pr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pr-pay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1px 6px; font-size: 11px; }
.pr-days-pick label { margin-right: 6px; white-space: nowrap; }
.pr-block { list-style: none; margin: 0; padding: 0; }
.pr-block li { padding: 3px 0; border-bottom: 1px dotted #ddd; }
.pr-biyuya { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 8px; border: 1px solid #b7d7a8; background: #f2fbee; }
.pr-biyuya div { flex: 1; }
@media (max-width: 720px) { .pr-cols { grid-template-columns: 1fr; } .pr-badges { float: none; margin-bottom: 2px; justify-content: flex-start; } }

/* Página de una línea de tren: ramales con el diagrama de estaciones */
.tr-line-head { display: flex; align-items: center; gap: 10px; padding: 8px; margin-bottom: 8px; border: 1px solid var(--border); border-left: 6px solid var(--line); background: #f8fbff; }
.tr-line-head .tr-badge { font-size: 13px; padding: 4px 8px; }
.tr-notices { list-style: none; margin: 0; padding: 0; }
.tr-notices li { padding: 4px 0; border-bottom: 1px dotted #ddd; font-size: 12px; }
.tr-branches { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; align-items: start; }
.tr-branch .box-body { padding: 6px 10px; }
.tr-diagram { list-style: none; margin: 0; padding: 0 0 0 4px; }
.tr-diagram li { position: relative; padding: 3px 0 3px 22px; font-size: 12px; }
/* la vía: una línea vertical del color de la línea, con una parada por estación */
.tr-diagram li::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 4px; background: var(--line); }
.tr-diagram li:first-child::before { top: 50%; }
.tr-diagram li:last-child::before { bottom: 50%; }
.tr-diagram li::after { content: ""; position: absolute; left: 3px; top: 50%; width: 8px; height: 8px; margin-top: -5px; background: #fff; border: 1px solid #000; border-radius: 50%; }
.tr-diagram li.tr-terminal { font-weight: bold; }
.tr-diagram li.tr-terminal::after { width: 10px; height: 10px; left: 2px; margin-top: -6px; background: var(--line); }
.tr-diagram li a { color: #000 !important; text-decoration: none; }
.tr-diagram li a:hover { text-decoration: underline; }
.tr-diagram li.tr-st-parcial, .tr-diagram li.tr-st-demoras { background: #fff6e0; }
.tr-diagram li.tr-st-interrumpido { background: #ffe9e6; }
.tr-st-alert { font-size: 10px; font-weight: bold; color: #8c1c1c; margin-left: 4px; white-space: nowrap; }

/* Mapas (Leaflet) */
.map-canvas { height: 380px; border: 1px solid #000; background: #dde6f0; }
.tr-map .box-body { padding: 6px; }
.map-help { margin: 4px 0 0; }
.map-error .map-canvas::after { content: "No se pudo cargar el mapa."; display: block; padding: 20px; text-align: center; font-size: 12px; }
.map-alert { color: #8c1c1c; font-weight: bold; }
.leaflet-container { font: 11px Verdana, Tahoma, sans-serif; }
@media (max-width: 720px) { .map-canvas { height: 300px; } }

/* ¿Cuándo pasa el tren? */
.tr-sched-form { margin-bottom: 6px; font-size: 12px; font-weight: bold; }
.tr-sched-form select { max-width: 100%; }
.tr-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.tr-next-dir { border: 1px solid var(--border); background: #fff; padding: 6px 8px; }
.tr-next-head { font-size: 12px; margin-bottom: 4px; }
.tr-next-list { list-style: none; margin: 0; padding: 0; }
.tr-next-list li { padding: 2px 0; border-bottom: 1px dotted #ddd; font-size: 12px; }
.tr-next-list li b { font-family: "Courier New", monospace; font-size: 14px; }
.tr-next-list li.tr-next-first { background: #fffbe0; }
.tr-next-list li.tr-next-first b { color: #c00; font-size: 17px; }
.tr-st-map { margin-left: 2px; opacity: .55; }
.tr-st-map:hover { opacity: 1; }
.tr-time { font-family: 'Courier New', monospace; font-size: 14px; }

/* ---- Notificaciones ---- */
.push-state { padding: 6px 8px; border: 1px solid var(--border); background: #f4f7fd; }
.push-state[data-push-state=on] { background: #e8f8e8; border-color: #6c6; }
.push-state[data-push-state=denied], .push-state[data-push-state=unsupported], .push-state[data-push-state=ios], .push-state[data-push-state=insecure] { background: #fff3d6; border-color: #e0b050; }
.push-form[hidden] { display: none; }
.push-form fieldset { display: grid; gap: 6px; }
.push-opt { display: flex; gap: 6px; align-items: flex-start; padding: 5px 6px; background: #fff; border: 1px solid var(--border); cursor: pointer; }
.push-opt input { margin-top: 2px; }
.push-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.push-actions [hidden] { display: none; }
.push-msg:empty { display: none; }
.push-msg { font-weight: bold; color: #063; }
.map-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 5px 0 0; font-size: 11px; }
.map-legend span::before { content: ""; display: inline-block; width: 18px; height: 5px; margin-right: 4px; vertical-align: middle; background: var(--c); border: 1px solid #000; }
.tr-map .leaflet-control-layers { font: 11px Verdana, sans-serif; }

/* ---- Selector de tema ---- */
.theme-pick { white-space: nowrap; }
.theme-pick select { font-size: 10px; padding: 0 2px; border-width: 1px; }
#mb-menu .mb-theme { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #fff; border: 1px solid var(--border); font: bold 12px Verdana, sans-serif; }
#mb-menu .mb-theme select { flex: 1; font-size: 14px; }

/* ---- Cotizaciones ---- */
.fx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.fx-card { border: 1px solid var(--border); background: var(--box-bg); padding: 6px 8px; }
.fx-card-name { font-weight: bold; color: var(--blue-dark); }
.fx-card-sell { font: bold 20px Georgia, serif; }
.fx-card-row { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.fx-card-date { margin-top: 2px; }
.fx-change { white-space: nowrap; font-weight: bold; }
.fx-change.up { color: #0a7a2f; }
.fx-change.down { color: #c00; }
.fx-form { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.fx-ranges, .fx-picks { display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: center; }
.fx-range { padding: 1px 6px; border: 1px solid var(--border); cursor: pointer; }
.fx-range input { position: absolute; opacity: 0; }
.fx-range.active { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: bold; }
.fx-picks label { white-space: nowrap; border-bottom: 3px solid var(--c); }
.fx-chart { display: block; width: 100%; height: auto; font-family: Verdana, sans-serif; }
.fx-plot { fill: #fff; stroke: var(--border); }
.fx-grid { stroke: #ddd; stroke-width: 1; }
.fx-vgrid { stroke-dasharray: 2 3; }
.fx-label { font-size: 10px; fill: #555; }
.fx-note { font-style: italic; fill: #888; }
.fx-compare td, .fx-compare th { white-space: nowrap; }
.fx-result { font-size: 16px; margin: 6px 0 2px; }
.fx-bottom { gap: 8px; }

/* ---- Botones de cada radio: escuchar, ventana y favorita en una línea ---- */
.radio-actions { display: inline-flex; align-items: stretch; gap: 3px; flex-wrap: nowrap; white-space: nowrap; vertical-align: middle; }
.radio-actions .follow-form { display: contents; }
.radio-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 22px; margin: 0; }
.radio-actions.is-compact button:not([data-radio-toggle]) { padding-left: 4px; padding-right: 4px; }
.radio-actions .icon-only .fl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.radio-actions .ra-fav.is-on { border-style: inset; }
.radio-card { flex-wrap: wrap; align-content: space-between; }
.radio-card-body { flex: 1; min-width: 0; }
.radio-card-actions { flex-basis: 100%; display: flex; justify-content: flex-end; padding-top: 6px; border-top: 1px dotted rgba(0, 0, 0, .15); }
.radio-actions .ra-fav.icon-only { padding-left: 4px; padding-right: 4px; }

/* ---- Títulos (h1/h2/h3) con el mismo aspecto que antes: sin los márgenes y tamaños del navegador ---- */
.logo-h1 { display: contents; font: inherit; }
:where(h1).section-header { margin-top: 0; }
:where(h2).box-title { margin: 0; font-size: inherit; }
.featured .featured-title { margin: 6px 0; }
.sec-title-h { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.section-title h2 { margin: 0; font-size: inherit; line-height: inherit; }
:where(h2).ev-subtitle, :where(h2).dir-cat { font-weight: bold; }
.section-header > .sh-title { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }

/* ---- Mapa del sitio: árbol de carpetas ---- */
.sm-grid { columns: 2 260px; column-gap: 8px; }
.sm-grid .box { margin: 0 0 8px; break-inside: avoid; }
.sm-tree, .sm-tree ul { list-style: none; margin: 0; padding: 0; }
.sm-tree ul { margin-left: 8px; padding-left: 12px; border-left: 1px dotted #999; }
.sm-tree li { position: relative; padding: 2px 0; }
.sm-tree ul > li::before { content: ""; position: absolute; left: -12px; top: 11px; width: 10px; border-top: 1px dotted #999; }
.sm-tree a { text-decoration: none; }
.sm-tree a:hover { text-decoration: underline; }
.sm-tree > li > a { font-weight: bold; }

/* ---- Textos en mayúsculas: siempre con CSS (en el HTML van normales, para buscadores y lectores de pantalla) ---- */
#ticker b, .new, .ev-free, .vhs-brand, .amp-titlebar span, .amp-controls [data-radio-toggle], .radio-status[data-status=playing], .radio-status[data-status=blocked] { text-transform: uppercase; }

/* ---- Encabezado de cada sección con el botón para seguirla ---- */
.cat-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: var(--sec); border-color: var(--sec); }
.cat-header .follow-btn { font-size: 11px; padding: 3px 12px; border-color: var(--sec); color: var(--sec); white-space: nowrap; }
.cat-header .follow-btn:hover { background: color-mix(in srgb, var(--sec) 12%, #fff); }
.cat-header .follow-btn.is-on { background: var(--sec); border-color: var(--sec); color: #fff; }
.cat-description { margin: -4px 0 10px; color: var(--muted, #666); font-style: italic; }

/* ---- Horóscopo de cada signo ---- */
.horo-head { margin: 0 0 4px; font-size: 13px; }
.hs-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hs-header .sh-title .ic { vertical-align: middle; }
.hs-date { margin: 0 0 8px; color: var(--muted); }
.hs-days { display: flex; gap: 3px; margin-bottom: 8px; }
.hs-days a { padding: 3px 12px; border: 1px solid var(--border); background: var(--box-bg); text-decoration: none; font-weight: bold; }
.hs-days a.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.hs-general { font: 15px/1.5 Georgia, serif; padding: 8px 10px; background: var(--yellow); border-left: 4px solid var(--orange); margin: 0 0 8px; }
.hs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.hs-item { border: 1px solid var(--border); background: var(--box-bg); padding: 6px 8px; }
.hs-item h2 { margin: 0 0 4px; font-size: 13px; color: var(--blue-dark); }
.hs-item p { margin: 0; }
.hs-tip { border-color: var(--orange); }
.hs-luck { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 5px 8px; margin-bottom: 8px; border: 1px dashed var(--border); }
.hs-about p { margin-top: 0; }
.hs-traits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.hs-traits ul { margin: 2px 0 0; padding-left: 18px; }
.hs-card th { text-align: left; white-space: nowrap; }
.hs-signs { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.hs-others a { display: flex; flex-direction: column; align-items: center; width: 84px; padding: 4px; border: 1px solid var(--border); text-decoration: none; text-align: center; }
.hs-others a small { font-size: 9px; color: var(--muted); }
.hs-birthdays { margin: 0; padding-left: 18px; }
.hs-faq h3 { margin: 8px 0 2px; font-size: 12px; }
.hs-faq p { margin: 0 0 4px; }
@media (max-width: 820px) { .hs-grid, .hs-traits { grid-template-columns: 1fr; } }

/* ---- Buscador: respuesta rápida arriba de los resultados ---- */
.search-answer { border: 2px solid var(--orange); background: var(--yellow); padding: 8px 10px; margin: 0 0 10px; }
.search-answer h2 { margin: 0 0 4px; font-size: 15px; }
.search-answer h2 .ic { vertical-align: middle; }
.search-answer p { margin: 3px 0; }

/* Quiniela y loterías */
.qn-date { margin: 0 0 8px; color: var(--muted); }
.qn-nav { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; }
.qn-nav a { padding: 2px 8px; border: 1px solid var(--border); background: var(--box-bg); text-decoration: none; font-weight: bold; }
.qn-nav a.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.qn-heads th, .qn-heads td { text-align: center; white-space: nowrap; }
.qn-heads th:first-child { text-align: left; }
.qn-heads b { font: bold 14px "Courier New", monospace; letter-spacing: 1px; }
.qn-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.qn-boards-wide { margin-bottom: 8px; }
.qn-boards-single { grid-template-columns: minmax(0, 320px); margin-bottom: 8px; }
.qn-board { border: 1px solid var(--border); background: var(--paper); }
.qn-board-title { background: var(--blue); color: #fff; font-weight: bold; padding: 2px 6px; }
.qn-board-title a, .qn-board-title a:visited { color: #fff; text-decoration: none; }
.qn-pending p { margin: 6px; }
.qn-nums { list-style: none; margin: 0; padding: 4px 6px; columns: 2; column-gap: 10px; }
.qn-nums li { display: flex; justify-content: space-between; padding: 1px 0; border-bottom: 1px dotted var(--border); break-inside: avoid; }
.qn-nums b { font: bold 14px "Courier New", monospace; letter-spacing: 1px; }
.qn-pos { color: var(--muted); min-width: 18px; }
.qn-nums .qn-head { background: var(--yellow); }
.qn-nums .qn-head b { color: #cc0000; }
.qn-games { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qn-game { display: block; padding: 6px; border: 1px solid var(--border); background: var(--paper); text-decoration: none; }
.qn-balls { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.qn-ball { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0, #ffe680 40%, var(--orange) 100%); border: 1px solid #cc7a00; color: #000; font: bold 12px Verdana, sans-serif; }
.qn-ball-big { width: 64px; height: 64px; font-size: 28px; flex: none; }
.qn-dates { margin: 0; padding: 0; list-style: none; columns: 2; }
.qn-links { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.qn-pager { display: flex; justify-content: space-between; gap: 8px; margin: 8px 0; }
.qn-filter { margin-bottom: 8px; }
.qn-filter input[type=search] { width: 280px; max-width: 100%; }
.qn-meanings { list-style: none; margin: 0 0 8px; padding: 0; columns: 4 160px; column-gap: 12px; }
.qn-meanings li { padding: 1px 0; break-inside: avoid; }
.qn-meanings b { display: inline-block; width: 22px; font-family: "Courier New", monospace; }
.qn-number { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.qn-number .hs-general { flex: 1; margin: 0; }
.qn-heads, .qn-history, .qn-stats, .qn-prizes { width: 100%; border-collapse: collapse; }
.qn-heads th, .qn-heads td, .qn-history th, .qn-history td, .qn-stats th, .qn-stats td, .qn-prizes th, .qn-prizes td { padding: 2px 4px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.box-body:has(> .qn-heads, > .qn-history), .scroll-x:has(> .qn-prizes) { overflow-x: auto; }
.qn-prizes td { white-space: nowrap; }
.qn-block td, .qn-block th { padding: 1px 2px; }
.qn-block b { font-family: "Courier New", monospace; font-size: 12px; }
.qn-widget-table { overflow-x: auto; }
.qn-widget .qn-heads th a, .qn-widget .qn-heads th a:visited { color: inherit; }
.qn-widget .qn-heads td a { text-decoration: none; }
.qn-widget .qn-last { background: var(--yellow); }
.qn-widget-games { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.qn-widget-games .qn-ball { width: 22px; height: 22px; font-size: 10px; }
.qn-widget-foot { margin: 6px 0 0; text-align: center; }
@media (max-width: 480px) {
  .qn-widget .qn-heads th, .qn-widget .qn-heads td { padding: 2px 1px; font-size: 10px; }
  .qn-widget .qn-heads b { font-size: 12px; letter-spacing: 0; }
}
@media (max-width: 820px) { .qn-games, .qn-widget-games { grid-template-columns: 1fr; } .qn-pager { flex-wrap: wrap; } }