/* =====================================================================
   TOP 10 VALLARTA — hoja de estilo
   ---------------------------------------------------------------------
   MISMO LAYOUT de siempre (paneles, barra de título, rejilla de tarjetas,
   barra lateral, marquesina, contador, insignias del pie): lo único que
   cambió es la PALETA. Se cambió el fondo azul marino con textura y los
   acentos amarillo/verde neón/arcoíris por una escala de grises y blancos.
   Ningún selector se eliminó ni se movió: si algo se estiliza distinto es
   sólo color, borde o sombra, nunca posición ni tamaño.

   Reglas de la paleta:
     · fondo de página gris muy claro, paneles blancos
     · bordes de 1px en gris, sombras suaves en lugar de biseles Win95
     · un solo acento oscuro (grafito) para botones, estados activos y CTA
     · nada de neón: la marquesina, el contador y las insignias son grises
   ===================================================================== */

:root {
  /* Escala de grises */
  --ink:       #1c1e21;   /* texto principal */
  --ink-soft:  #3f4448;   /* texto secundario */
  --ink-mute:  #6b7178;   /* texto terciario */
  --line:      #dcdfe3;   /* borde estándar */
  --line-soft: #eceef1;   /* borde tenue */
  --paper:     #ffffff;   /* superficie de panel */
  --paper-2:   #f7f8f9;   /* superficie alterna */
  --bg:        #eef0f2;   /* fondo de página */

  /* Acento único (grafito) */
  --accent:    #2f3438;
  --accent-lt: #4a5157;
  --accent-dk: #1c2023;

  /* Alias heredados: los nombres viejos siguen existiendo para no romper
     ninguna regla, pero ahora apuntan a la escala de grises. */
  --navy:      var(--accent);
  --navy-dk:   var(--accent-dk);
  --silver:    #f2f3f5;
  --silver-lt: #ffffff;
  --silver-dk: #c8ccd1;
  --teal:      #5d666e;
  --link:      #2a3138;
  --visited:   #2a3138;
  --hot:       #8a4a4a;
  --yellow:    #f2f3f5;
  --lime:      #d7dade;

  --bevel-out: 1px solid var(--line);
  --font-head: "Times New Roman", Times, Georgia, serif;
  --font-body: Verdana, Geneva, Tahoma, sans-serif;
  --font-mono: "Courier New", Courier, monospace;

  --shadow:    0 1px 2px rgba(28, 30, 33, .05), 0 6px 18px rgba(28, 30, 33, .06);
  --shadow-sm: 0 1px 2px rgba(28, 30, 33, .06);

  /* Estados interactivos: el hover blanco→casi blanco no se notaba, así que
     ahora hay un relleno gris de verdad y un borde oscuro. El texto NUNCA se
     queda oscuro sobre fondo oscuro: los rellenos claros llevan --ink y los
     rellenos de grafito llevan blanco. */
  --hover-fill: #e3e7ea;   /* relleno de hover en botones claros */
  --hover-line: #9aa2aa;   /* borde de hover en botones claros */
  --hover-lift: 0 2px 4px rgba(28, 30, 33, .10), 0 8px 18px rgba(28, 30, 33, .08);
  --focus-ring: 0 0 0 3px rgba(47, 52, 56, .28);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 0 40px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  /* Antes: mosaico azul marino. Ahora: gris claro plano con un degradado
     casi imperceptible para que el blanco de los paneles despegue. */
  background-color: var(--bg);
  background-image: linear-gradient(180deg, #f4f5f7 0%, #eef0f2 60%, #e9ebee 100%);
  background-attachment: fixed;
}

/* ── Marco de la página ───────────────────────────────────────────── */

.shell {
  max-width: 1000px;
  margin: 0 auto;
  padding: 14px 12px;
}

/* Panel: antes bisel Win95, ahora tarjeta blanca con borde fino */
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin-bottom: 16px;
}

.panel--paper { background: var(--paper); }

/* Barra de título: se conserva la ventana, en gris claro con texto oscuro */
.titlebar {
  background: var(--paper-2);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  border-radius: 6px 6px 0 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .4px;
  padding: 7px 12px;
  margin: -16px -18px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.titlebar .btns { display: flex; gap: 4px; flex: none; }
.titlebar .btns i {
  width: 14px; height: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-style: normal; font-size: 9px; line-height: 12px;
  text-align: center; color: var(--ink-mute);
}

/* ── Cabecera ─────────────────────────────────────────────────────── */

.masthead { text-align: center; }

.masthead h1,
.masthead .brand {
  font-family: var(--font-head);
  font-size: clamp(28px, 6vw, 46px);
  line-height: 1.1;
  margin: 6px 0 2px;
  color: var(--ink);
  text-shadow: none;              /* antes: sombra amarilla dura */
  letter-spacing: -.5px;
}
.masthead .brand a { color: var(--ink); text-decoration: none; }
.masthead .tagline {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0 0 10px;
}

/* Divisor: mismo elemento, ahora una línea gris degradada (sin arcoíris) */
.rainbow {
  height: 1px;
  border: 0;
  margin: 14px 0;
  background: linear-gradient(90deg, transparent, var(--line), var(--silver-dk), var(--line), transparent);
  animation: none;
}

/* ── Navegación ───────────────────────────────────────────────────── */

.navbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding: 8px;
}

/* OJO — la regla `a:visited` de más abajo tiene especificidad (0,1,1) y le GANA
   a `.btn--go` (0,1,0): en cuanto el visitante ya había abierto /blogs, el CTA
   pintaba su texto de #2a3138 sobre el grafito #2f3438 (contraste 1.11:1, o
   sea invisible) y sólo reaparecía al pasar el ratón, porque `.btn--go:hover`
   sí es (0,2,0). Por eso TODA regla de color de botón lleva su `:visited`
   gemelo: `.btn:visited` es (0,2,0) y gana siempre, sin depender del orden. */
.btn,
.btn:visited,
.navbar a,
.navbar a:visited {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  color: var(--ink-soft);
  background: var(--paper);
  padding: 7px 15px;
  /* Borde más marcado que --line: sin él el botón claro sobre panel blanco
     no se leía como botón. */
  border: 1px solid var(--silver-dk);
  border-radius: 5px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .15s ease;
}
/* Hover del botón claro: relleno gris real + borde oscuro + un pelín de
   elevación. El texto se OSCURECE (nunca al revés) porque el fondo aclara. */
.btn:hover,
.navbar a:hover {
  background: var(--hover-fill);
  color: var(--ink);
  border-color: var(--hover-line);
  box-shadow: var(--hover-lift);
  transform: translateY(-1px);
}
/* Pulsado: se hunde y se invierte a grafito con texto BLANCO. */
.btn:active,
.navbar a:active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: none;
  transform: translateY(0);
}
/* Página actual: grafito sólido, texto blanco, sin elevación. */
.navbar a.on,
.navbar a.on:visited,
.navbar a.on:hover,
.navbar a.on:active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: none;
  transform: none;
}

/* CTA: antes amarillo fluorescente, ahora grafito sólido.
   El `:visited` NO es decorativo — sin él el texto se vuelve invisible en
   cuanto el visitante ya abrió el destino del botón. */
.btn--go,
.btn--go:visited {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-size: 15px;
  padding: 11px 24px;
  letter-spacing: .3px;
}
/* El CTA OSCURECE al pasar el ratón (antes aclaraba y perdía contraste);
   el texto sigue en blanco en los tres estados. */
.btn--go:hover {
  background: var(--accent-dk);
  border-color: var(--accent-dk);
  color: #fff;
  box-shadow: var(--hover-lift);
  transform: translateY(-1px);
}
.btn--go:active {
  background: #000;
  border-color: #000;
  color: #fff;
  box-shadow: none;
  transform: translateY(0);
}

/* Foco de teclado: visible en TODO lo pulsable, sobre claro y sobre oscuro. */
.btn:focus-visible,
.navbar a:focus-visible,
.sidebar .cat-list a:focus-visible,
.sitefoot .badge:focus-visible,
.vote-btn:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* ── Tipografía de contenido ──────────────────────────────────────── */

h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.25; }
h2 { font-size: 26px; margin: 22px 0 8px; }
h3 { font-size: 20px; margin: 20px 0 6px; }
h4 { font-size: 17px; margin: 16px 0 6px; }

.panel--paper h2 { border-bottom: 1px solid var(--line); padding-bottom: 6px; }

p { margin: 0 0 12px; }

a { color: var(--link); text-decoration-color: rgba(42, 49, 56, .35); text-underline-offset: 2px; transition: text-decoration-color .12s ease; }
/* Vale sólo para enlaces de TEXTO: cualquier cosa con fondo propio (.btn,
   .btn--go, .navbar a, .badge) declara su propio `:visited` para que esta
   regla no le imponga un texto oscuro sobre fondo oscuro. */
a:visited { color: var(--visited); }
/* Antes el hover sólo pasaba de #2a3138 a #000 (imperceptible): ahora lo que
   cambia de verdad es el subrayado, que se vuelve sólido y más grueso. */
a:hover { color: #000; text-decoration-color: currentColor; text-decoration-thickness: 2px; }

ul, ol { margin: 0 0 12px; padding-left: 24px; }
li { margin-bottom: 6px; }

blockquote {
  margin: 14px 0;
  padding: 10px 14px;
  background: var(--paper-2);
  border-left: 3px solid var(--silver-dk);
}

/* Marquesina: se queda el desplazamiento, se va el negro con verde neón */
.marquee {
  overflow: hidden;
  background: var(--paper);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .3px;
  padding: 6px 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 14px;
  white-space: nowrap;
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 26s linear infinite;
}
@keyframes marquee { to { transform: translateX(-100%); } }
.marquee:hover span { animation-play-state: paused; }

/* Antes parpadeaba en rojo; ahora sólo destaca en grafito */
.blink { animation: none; color: var(--accent); font-weight: bold; }

.new-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: .5px;
  background: var(--accent);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 6px;
}

/* ── Rejilla del directorio ───────────────────────────────────────── */

.layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: start;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  padding: 0 0 12px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.card:hover { box-shadow: var(--hover-lift); border-color: var(--hover-line); transform: translateY(-2px); }
.card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--line);
}
.card .card-body { padding: 12px 13px 0; flex: 1; display: flex; flex-direction: column; }
.card h3 { font-size: 17px; margin: 0 0 6px; }
.card h3 a { text-decoration: none; color: var(--ink); }
.card h3 a:hover { text-decoration: underline; }
.card p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; flex: 1; }
.card .card-foot {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  padding: 7px 13px 0;
  border-top: 1px solid var(--line-soft);
  margin-top: 8px;
}

/* Barra lateral de categorías */
.sidebar { font-size: 13px; }
.sidebar .cat-list { list-style: none; margin: 0; padding: 0; }
.sidebar .cat-list li { margin: 0 0 5px; }
.sidebar .cat-list a {
  display: block;
  padding: 7px 10px;
  text-decoration: none;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.sidebar .cat-list a:hover {
  background: var(--hover-fill);
  border-color: var(--hover-line);
  color: var(--ink);
  /* el desplazamiento lateral es la señal que se nota en una lista */
  transform: translateX(3px);
}
.sidebar .cat-list .n { float: right; font-family: var(--font-mono); color: var(--ink-mute); }

/* Listado tipo índice: ▸ enlace ......... (10) */
.dirlist { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.dirlist li { padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.dirlist li::before { content: "\25B8 "; color: var(--silver-dk); font-weight: bold; }

/* ── Contador de visitas ──────────────────────────────────────────── */

.counter {
  display: inline-flex;
  gap: 2px;
  background: var(--paper-2);
  padding: 4px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
}
.counter b {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: bold;
  color: #fff;
  background: var(--accent);
  border-radius: 3px;
  padding: 1px 5px;
  min-width: 15px;
  text-align: center;
}

/* ── Formularios ──────────────────────────────────────────────────── */

fieldset {
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--paper-2);
}
legend {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: bold;
  color: var(--ink);
  padding: 0 8px;
}

label { display: block; font-size: 13px; font-weight: bold; margin: 0 0 4px; color: var(--ink-soft); }

input[type=text], input[type=email], input[type=url], input[type=password], select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--silver-dk);
  border-radius: 5px;
  margin-bottom: 10px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
textarea { min-height: 90px; resize: vertical; }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }

/* Las 10 casillas numeradas del formulario de la comunidad */
.rank-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rank-row .num {
  flex: none;
  width: 30px; height: 30px;
  background: var(--accent); color: #fff;
  border-radius: 5px;
  font-family: var(--font-mono); font-weight: bold; font-size: 14px;
  display: grid; place-items: center;
}
.rank-row .num.gold { background: var(--ink); color: #fff; }
.rank-row input { margin-bottom: 0; }

.check-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.check-row input { width: auto; margin: 3px 0 0; }
.check-row label { font-weight: normal; margin: 0; }

/* Pasos del asistente */
.steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.steps .step {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 5px 11px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink-mute);
}
.steps .step.on { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: bold; }
.steps .step.done { background: var(--paper-2); color: var(--ink-soft); border-color: var(--silver-dk); }

.wizard-step[hidden] { display: none; }

/* Avisos: se mantienen distinguibles, pero apagados */
.alert { padding: 11px 14px; margin: 0 0 14px; border: 1px solid var(--line); border-left-width: 3px; border-radius: 5px; font-size: 14px; background: var(--paper-2); }
.alert--ok  { border-left-color: #5f7d67; }
.alert--bad { border-left-color: #9a6060; }

/* Honeypots de antispam.php: fuera de la vista pero rellenables por un bot.
   OJO: la clase la pinta la librería y es `.hp` — si se cambia allá, cambiarla
   aquí, o los dos campos señuelo aparecen a la vista en todos los formularios. */
.hp, .hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ── Muro de la comunidad ─────────────────────────────────────────── */

.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }

.list-card { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; padding: 0; box-shadow: var(--shadow-sm); }
.list-card .lc-head {
  background: var(--paper-2);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 9px 12px;
  font-family: var(--font-head); font-size: 17px; font-weight: bold;
}
.list-card .lc-meta {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute);
  padding: 6px 12px; background: var(--paper); border-bottom: 1px solid var(--line-soft);
}
.list-card ol { margin: 10px 0; padding-left: 34px; font-size: 13.5px; }
.list-card ol li { margin-bottom: 3px; }
.list-card .lc-foot {
  padding: 9px 12px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}

.vote-btn {
  font-family: var(--font-body); font-size: 12px; font-weight: bold;
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent);
  border-radius: 5px;
  padding: 5px 12px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* Igual que el CTA: oscurece al pasar el ratón, texto siempre blanco. */
.vote-btn:hover { background: var(--accent-dk); border-color: var(--accent-dk); color: #fff; box-shadow: var(--hover-lift); transform: translateY(-1px); }
.vote-btn:active { background: #000; border-color: #000; box-shadow: none; transform: translateY(0); }
.vote-btn[disabled] { background: var(--paper-2); color: var(--ink-mute); border-color: var(--line); cursor: default; box-shadow: none; transform: none; }
.vote-count { font-family: var(--font-mono); font-size: 13px; font-weight: bold; color: var(--ink-soft); }

.stars { color: var(--ink-mute); letter-spacing: 1px; }

/* ── Artículo ─────────────────────────────────────────────────────── */

.article { background: var(--paper); }
.article .cover { width: 100%; max-height: 380px; object-fit: cover; display: block; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 16px; }
.article h1 { font-family: var(--font-head); font-size: clamp(24px, 4.5vw, 34px); color: var(--ink); margin: 0 0 10px; line-height: 1.2; }
.article .lead { font-size: 15px; color: var(--ink-soft); background: var(--paper-2); border-left: 3px solid var(--silver-dk); border-radius: 0 5px 5px 0; padding: 12px 15px; margin-bottom: 18px; }
.article-body h2, .article-body h3 { border-bottom: 1px solid var(--line-soft); padding-bottom: 5px; }
.article-body a { font-weight: bold; }
.article-body img { max-width: 100%; height: auto; }

.breadcrumb { font-family: var(--font-mono); font-size: 12px; margin-bottom: 10px; color: var(--ink-mute); }
.breadcrumb a { text-decoration: none; }

/* ── Pie ──────────────────────────────────────────────────────────── */

.sitefoot { text-align: center; font-size: 12.5px; }
.sitefoot .badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; }
.sitefoot .badge {
  font-family: var(--font-mono); font-size: 10px; line-height: 1.3;
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--paper-2); color: var(--ink-mute);
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sitefoot .badge--alt { background: var(--paper); color: var(--ink-soft); border-color: var(--silver-dk); }
.sitefoot .badge:hover { background: var(--accent); color: #fff; border-color: var(--accent); text-decoration: none; }

.webring {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 5px;
  color: var(--ink-soft);
  padding: 9px 11px; margin: 12px 0;
}

/* ── Utilidades ───────────────────────────────────────────────────── */

.center { text-align: center; }
.mono { font-family: var(--font-mono); }
.small { font-size: 12px; }
.muted { color: var(--ink-mute); }
.mt0 { margin-top: 0; }
.nowrap { white-space: nowrap; }

/* ── Responsivo ───────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { order: 2; }
  .panel { padding: 13px; }
  .titlebar { margin: -13px -13px 12px; }
  body { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .rainbow, .marquee span, .blink { animation: none; }
  .marquee span { padding-left: 0; }
  .blink { opacity: 1; }
  /* Se conservan los cambios de color y borde del hover (son la señal que
     hace falta); lo único que se quita es el movimiento. */
  .btn, .navbar a, .btn--go, .vote-btn, .card, .sidebar .cat-list a { transition: none; }
  .btn:hover, .navbar a:hover, .btn--go:hover, .vote-btn:hover,
  .card:hover, .sidebar .cat-list a:hover { transform: none; }
}

/* En pantallas táctiles el :hover se queda "pegado" tras tocar, así que el
   relleno y el borde se aplican pero no el desplazamiento. */
@media (hover: none) {
  .btn:hover, .navbar a:hover, .btn--go:hover, .vote-btn:hover,
  .card:hover, .sidebar .cat-list a:hover { transform: none; }
}

/* Impresión: fondo blanco y sin adornos */
@media print {
  body { background: #fff; }
  .panel { border: 1px solid #000; box-shadow: none; background: #fff; }
  .navbar, .marquee, .rainbow, .sitefoot .badges { display: none; }
}