@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --bg1: #0b0b10;
    --bg2: #25253a;
    --text: #e5e5e5;
    --text-soft: #c7c7c7;
    --accent: #6b9dfc;
    --radius: 10px;
    --max-width: 750px;
}

body {
    /* background: linear-gradient(90deg, var(--bg1), var(--bg2)); */
    background: radial-gradient(circle at top, rgba(37, 99, 235, 0.18), transparent 55%) #0b1120;
    color: var(--text);
    font-family: "Noto Sans", sans-serif;
    line-height: 1.7;
    margin: 0;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
}

main {
    max-width: var(--max-width);
    width: 100%;
}

/* Títulos */
h1, h2, h3, h4 {
    font-weight: 600;
    line-height: 1.3;
    margin-top: 2.2rem;
    margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.4rem; }

/* Párrafos */
p {
    margin: 1rem 0;
    color: var(--text-soft);
    font-size: 1.05rem;
}

/* Enlaces */
a {
    color: var(--accent);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* Imágenes */
img {
    max-width: 100%;
    border-radius: var(--radius);
    margin: 1rem 0;
}

/* Código inline */
code {
    background: black;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.95em;
}

/* Bloques de código */
pre {
    background: black;
    padding: 1rem;
    border-radius: var(--radius);
    overflow-x: auto;
    margin: 1.5rem 0;
}
pre code {
    background: none;
    padding: 0;
    font-size: 0.95rem;
}

/* Listas */
ul, ol {
    padding-left: 1.5rem;
    margin: 1rem 0;
}
li {
    margin: 0.4rem 0;
}

/* Separadores */
hr {
    border: none;
    border-top: 1px solid #2e2e33;
    margin: 2rem 0;
}

/* Bloques tipo tarjeta para notas */
.block {
    background: var(--bg-soft);
    padding: 1rem 1.4rem;
    border-radius: var(--radius);
    margin: 1.4rem 0;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: system-ui, sans-serif;
  font-size: 0.95rem;
  backdrop-filter: blur(6px);
}

thead {
  background: #492f93;
}

thead th:first-child {
  border-top-left-radius: var(--radius);
}

thead th:last-child {
  border-top-right-radius: var(--radius);
}

th, td {
  padding: 12px 14px;
  text-align: left;
}

th {
  font-weight: 600;
  letter-spacing: 0.4px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}

tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #2f1e5e;
  transition: background 0.2s;
}

tbody tr:hover {
  background: #492f93;
}