* { box-sizing: border-box; }
:root {
  --bg: #faf5f5;
  --fg: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --card: #ffffff;
  --primary: #b91c1c;
  --primary-soft: #fee2e2;
}
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  background: radial-gradient(circle at top, #fef2f2 0, #faf5f5 40%, #f9fafb 100%);
  color: var(--fg);
}
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }
h1 { font-size: 2.1rem; margin: 0 0 6px; }
.subtitle { color: var(--muted); margin: 0 0 16px; }
.controls {
  display: grid; grid-template-columns: minmax(0, 1.4fr) 200px 140px; gap: 10px; margin-bottom: 12px;
}
input, select, button {
  border: 1px solid var(--border);
  background: #fff;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px;
}
button.primary { background: var(--primary); color: #fff; border-color: transparent; }
button.primary:hover { opacity: .95; cursor: pointer; }
button:hover { cursor: pointer; }
.badge { font-size: 12px; color: var(--muted); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 12px; }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.04);
}
.list { display: grid; gap: 10px; }
.row { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.row .text { font-size: 18px; line-height: 1.4; }
.row .meta { margin-top: 6px; font-size: 12px; color: var(--muted); }
.row .buttons { display: flex; gap: 6px; }
.row .buttons button {
  background: #fff;
}
.row .buttons button:nth-child(2) {
  background: var(--primary-soft);
  border-color: #fecaca;
}
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px 0; }
footer { margin: 20px 0; color: var(--muted); font-size: 12px; }
.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  background: #111827; color: #fff; padding: 10px 14px; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.favs { margin-top: 24px; }
.favs h2 { margin: 0 0 10px; }
.table { border: 1px dashed var(--border); padding: 10px; border-radius: 12px; background: #fff; }
small.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.topbar {
  margin-bottom: 16px;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.topbar-logo img {
  height: 90px;
  display: block;
}
.topbar-banner {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.banner-728 {
  width: 728px;
  height: 90px;
  max-width: 100%;
  background: #e5e7eb;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4b5563;
  font-size: 14px;
  border: 1px dashed #d1d5db;
}
.banner-728.small {
  height: 60px;
}
.site-footer {
  margin-top: 32px;
  padding: 14px 0 6px 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.footer-inner a {
  color: inherit;
  text-decoration: none;
}
.footer-inner a:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .topbar-inner {
    flex-direction: column;
    align-items: center;
  }
  .topbar-banner {
    justify-content: center;
  }
  .controls {
    grid-template-columns: 1fr;
  }
}

.topbar-logo img { height:90px !important; width:auto; }


.topbar.compact {
  margin-bottom: 8px !important;
  padding: 0 !important;
}
.topbar.compact .topbar-inner {
  padding: 4px 0 !important;
  gap: 6px !important;
}
.topbar-logo img {
  height: 80px !important;
  width: auto;
}
.banner-728 {
  height: 80px !important;
}
@media (max-width: 900px) {
  .topbar.compact .topbar-inner {
    flex-direction: column;
    gap: 4px;
  }
  .topbar-logo img {
    height: 70px !important;
  }
  .banner-728 {
    height: 70px !important;
  }
}


/* Sticky header */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250,245,245,0.95);
  backdrop-filter: blur(8px);
}

/* Navigation menu */
.navbar {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
}
.navbar a {
  text-decoration: none;
  color: var(--fg);
  font-weight: 500;
}
.navbar a:hover {
  text-decoration: underline;
}

/* Dark mode */
body.dark {
  --bg: #020617;
  --fg: #e5e7eb;
  --muted: #9ca3af;
  --border: #1f2937;
  --card: #020617;
  --primary: #f97373;
  --primary-soft: #1f2937;
  background: radial-gradient(circle at top, #0f172a 0, #020617 40%, #020617 100%);
  color: var(--fg);
}
body.dark .card {
  box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}
body.dark .banner-728 {
  background: #020617;
  border-color: #111827;
  color: #9ca3af;
}
body.dark .toast {
  background: #111827;
}
body.dark .site-footer {
  border-top-color: #111827;
}
body.dark .navbar a {
  color: var(--fg);
}

/* Dark mode switch */
.theme-toggle {
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.theme-toggle span {
  font-size: 11px;
}

/* Adjust sticky topbar on small screens */
@media (max-width: 900px) {
  .topbar.compact .topbar-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .navbar {
    justify-content: center;
    flex-wrap: wrap;
  }
}


/* Header color changes on scroll */
body.scrolled:not(.dark) .topbar {
  background: #ffffff;
  box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}
body.dark.scrolled .topbar {
  background: #020617;
  box-shadow: 0 4px 18px rgba(0,0,0,0.6);
}

/* Highlighted summary */
#summary {
  margin-top: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 12px;
}

/* Splash / welcome card */
.splash-card {
  margin: 8px 0 14px 0;
}
.splash-card h2 {
  margin-top: 0;
  font-size: 16px;
}
.splash-card p {
  margin: 4px 0;
  font-size: 13px;
}
.splash-card .splash-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.topbar-logo img {
    height: 90px !important;
    width: auto !important;
    max-height: 90px !important;
}

/* FORCE NEW LOGO SIZE */
.topbar-logo img {
    height: 70px !important;
    width: auto !important;
    max-height: 70px !important;
}

/* MOBILE */
@media (max-width: 900px) {
    .topbar-logo img {
        height: 60px !important;
        max-height: 60px !important;
    }
}


/* HEADER SHRINK ON SCROLL */
body.scrolled .topbar-logo img {
    height: 50px !important;
    max-height: 50px !important;
}
body.scrolled .banner-728 {
    height: 50px !important;
}
body.scrolled .topbar-inner {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}


/* Smooth transitions for header elements */
.topbar-inner,
.topbar-logo img,
.banner-728 {
  transition: all 0.22s ease-out;
}

/* Hamburger button */
.hamburger {
  display: none;
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
}
.hamburger:focus {
  outline: 2px solid var(--primary);
}

/* Mobile nav behavior */
@media (max-width: 900px) {
  .navbar {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 4px;
  }
  body.nav-open .navbar {
    display: flex;
  }
  .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Hide banner on scroll for more limpio header */



/* Override dark mode palette for mejor contraste */
body.dark {
  --bg: #020617;
  --fg: #e5e7eb;
  --muted: #9ca3af;
  --border: #111827;
  --card: #020617;
  --primary: #f97373;
  --primary-soft: #111827;
  background: radial-gradient(circle at top, #020617 0, #020617 40%, #020617 100%);
  color: var(--fg);
}


@media (max-width: 900px) {
  body.scrolled .topbar-banner {
    display: none;
  }
}


.hamburger {
  font-size: 15px;
  gap: 4px;
}


.global-info {
  margin-top: 8px;
  margin-bottom: 10px;
  display: grid;
  gap: 4px;
}
.global-line {
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.global-line strong {
  font-weight: 600;
}
.subscribe-card {
  margin-top: 24px;
}
.subscribe-row {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}
.subscribe-row input[type="email"] {
  flex: 1;
}
.subscribe-row button {
  white-space: nowrap;
}
@media (max-width: 700px) {
  .subscribe-row {
    flex-direction: column;
    align-items: stretch;
  }
}


.generator-card {
  margin-top: 16px;
}
.generator-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 10px;
}
.generator-row select {
  min-width: 220px;
}
.gen-output {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.gen-text {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}
.gen-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.gen-output .buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .generator-row {
    flex-direction: column;
    align-items: stretch;
  }
  .generator-row button {
    width: 100%;
  }
}