/* ============================
   Browserfy – Futuristic UI
   ============================ */
:root {
  --bf-bg: #05060a;
  --bf-bg-soft: #0b0e16;
  --bf-text: #f4f4f6;
  --bf-muted: #6b7280;

  --bf-accent-1: #3b82f6;  /* azul */
  --bf-accent-2: #ec4899;  /* fucsia */
  --bf-border: #d1d5db;
  --bf-table-bg: #f9fafb;  /* tablas claras */
}

/* Fuente futurista pero legible para el contenido */
.entry-content,
.page-content {
  font-family: "Space Grotesk", "Segoe UI", system-ui, -apple-system,
               BlinkMacSystemFont, "Roboto", sans-serif;
}

/* ============================
   Negritas con pequeño glow
   ============================ */
.entry-content strong,
.page-content strong,
.entry-content b,
.page-content b {
  font-weight: 600;
  text-shadow: 0 0 6px rgba(236, 72, 153, 0.4);
}

/* ============================
   Encabezados h1–h6
   ============================ */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
  font-weight: 600;
  margin: 2.2em 0 0.7em;
  letter-spacing: 0.04em;
}

/* Gradiente SOLO en h1 */
.entry-content h1,
.page-content h1 {
  background: linear-gradient(90deg, var(--bf-accent-1), var(--bf-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* H1 con subrayado "orbital" */
.entry-content h1,
.page-content h1 {
  font-size: 2.4rem;
  position: relative;
  padding-bottom: 0.4em;
}

.entry-content h1::after,
.page-content h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 4.5rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bf-accent-1), var(--bf-accent-2));
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
}

/* H2 con barra lateral luminosa pero texto sobrio */
.entry-content h2,
.page-content h2 {
  font-size: 1.9rem;
  padding-left: 0.75em;
  border-left: 3px solid rgba(59, 130, 246, 0.7);
  color: #111827;
}

/* H3+ más discretos pero techy */
.entry-content h3,
.page-content h3 {
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bf-muted);
}

.entry-content h4,
.page-content h4 {
  font-size: 1.2rem;
}

/* ============================
   Listas
   ============================ */
.entry-content ul,
.page-content ul,
.entry-content ol,
.page-content ol {
  margin: 0 0 1.4em 1.5em;
  padding: 0;
}

.entry-content li,
.page-content li {
  margin: 0.25em 0;
  line-height: 1.7;
}

/* UL con bullets tipo “píxel” neón */
.entry-content ul li::marker,
.page-content ul li::marker {
  content: "◆ ";
  font-size: 0.75em;
  color: var(--bf-accent-2);
}

/* OL con números en azul */
.entry-content ol li::marker,
.page-content ol li::marker {
  color: var(--bf-accent-1);
  font-weight: 500;
}

/* Resaltado ligero al pasar el ratón por items */
.entry-content li:hover,
.page-content li:hover {
  opacity: 0.9;
}

/* ============================
   Enlaces
   ============================ */
.entry-content a,
.page-content a {
  position: relative;
  font-weight: 500;
  text-decoration: none;
  color: var(--bf-accent-1);
  transition: color 0.18s ease, text-shadow 0.18s ease, background-size 0.18s ease;
  background-image: linear-gradient(90deg, var(--bf-accent-1), var(--bf-accent-2));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
}

.entry-content a:visited,
.page-content a:visited {
  color: var(--bf-accent-2);
}

/* Efecto subrayado neón animado */
.entry-content a:hover,
.page-content a:hover,
.entry-content a:focus,
.page-content a:focus {
  color: #000000;
  text-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
  background-size: 100% 2px;
}

/* ============================
   Tablas – claras, limpias, sin gradientes
   ============================ */
.entry-content table,
.page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8em 0;
  font-size: 0.95rem;
  background: var(--bf-table-bg);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--bf-border);
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.08);
}

/* Celdas generales */
.entry-content th,
.page-content th,
.entry-content td,
.page-content td {
  padding: 0.8em 1em;
  text-align: left;
  border-bottom: 1px solid rgba(209, 213, 219, 0.8);
}

/* Cabecera sencilla, sin gradiente */
.entry-content thead th,
.page-content thead th {
  background: #e5edff;        /* azul muy suave, sin efecto feria */
  color: #111827;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(209, 213, 219, 1);
}

/* Primera fila del cuerpo muy discreta */
.entry-content tbody tr:first-child,
.page-content tbody tr:first-child {
  background: #f9fafb;
  font-weight: 500;
}

/* Primera columna ligeramente destacada */
.entry-content th:first-child,
.page-content th:first-child,
.entry-content td:first-child,
.page-content td:first-child {
  background: rgba(248, 250, 252, 0.95);
  border-right: 1px solid rgba(209, 213, 219, 0.9);
  font-weight: 500;
}

/* Zebra rows suaves (segunda fila en adelante) */
.entry-content tbody tr:nth-child(odd),
.page-content tbody tr:nth-child(odd) {
  background: #ffffff;
}

.entry-content tbody tr:nth-child(even),
.page-content tbody tr:nth-child(even) {
  background: #f4f6fb;
}

/* Hover discreto, sin bordes chillones */
.entry-content tbody tr:hover,
.page-content tbody tr:hover {
  background: #e8eefc;
  box-shadow: none;
}

/* ============================
   Blockquotes
   ============================ */
.entry-content blockquote,
.page-content blockquote {
  margin: 1.8em 0;
  padding: 1em 1.2em;
  border-radius: 8px;
  border-left: 3px solid var(--bf-accent-2);
  background: linear-gradient(135deg, #f9fafb, #e5e7eb);
  color: var(--bf-muted);
  position: relative;
}

.entry-content blockquote::before,
.page-content blockquote::before {
  content: "“";
  position: absolute;
  top: -0.3em;
  left: 0.25em;
  font-size: 2.4rem;
  color: rgba(148, 163, 184, 0.4);
}

/* ============================
   Código inline
   ============================ */
.entry-content p code,
.page-content p code,
.entry-content li code,
.page-content li code {
  font-family: "Fira Code", "JetBrains Mono", monospace;
  font-size: 0.9em;
  padding: 0.15em 0.5em;
  border-radius: 4px;
  background: #111827;
  border: 1px solid rgba(148, 163, 184, 0.5);
  color: #e5e7eb;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.25);
}