/* ===== ESTILOS GENERALES ===== */

body {
    font-family: 'Montserrat', sans-serif; /* usa la fuente importada de Google */
    max-width: 800px;       /* la página no se estira más de 800px de ancho */
    margin: 0 auto;         /* centra la página horizontalmente */
    padding: 40px;          /* espacio interno en los 4 lados */
    background-color: #0d0d0d; /* fondo negro */
    color: white;              /* texto blanco por defecto */
}

/* ===== ENLACE VOLVER AL INICIO ===== */

a {
    color: #c9a84c;         /* color dorado */
    text-decoration: none;  /* quita el subrayado del enlace */
}

a:hover {
    color: white;           /* al pasar el mouse se vuelve blanco */
}

/* ===== TÍTULOS H2 ===== */

h2 {
    color: #c9a84c;         /* títulos en dorado */
    font-size: 2rem;        /* tamaño grande */
    margin-bottom: 16px;    /* espacio debajo del título */
}

h2 span {
    color: white;           /* la palabra dentro del <span> se ve en blanco */
}

/* ===== SECCIONES (articles) ===== */

article {
    margin-bottom: 50px;    /* espacio entre cada sección */
}

/* ===== LISTA DE VALORES ===== */

ul {
    list-style: none;       /* quita las viñetas por defecto */
    padding: 0;             /* quita el espacio izquierdo por defecto */
}

ul li {
    padding: 10px 0;              /* espacio arriba y abajo de cada item */
    border-bottom: 1px solid #333; /* línea separadora entre cada valor */
    color: #ccc;                   /* texto gris claro */
}

ul li::before {
    content: "✦ ";          /* agrega un símbolo dorado antes de cada item */
    color: #c9a84c;
}

/* ===== ESTADÍSTICAS (los 3 cuadros) ===== */

.estadisticas {
    display: flex;          /* pone los 3 cuadros en fila horizontal */
    gap: 20px;              /* espacio entre cada cuadro */
}

.stat {
    flex: 1;                /* cada cuadro ocupa el mismo ancho */
    background-color: #1a1a1a; /* fondo gris oscuro */
    border: 1px solid #c9a84c; /* borde dorado */
    border-radius: 8px;        /* esquinas redondeadas */
    padding: 24px;             /* espacio interno */
    text-align: center;        /* texto centrado */
}

.stat h3 {
    color: #c9a84c;         /* número en dorado */
    font-size: 2rem;        /* número grande */
    margin: 0 0 8px 0;      /* espacio solo debajo */
}

.stat p {
    color: #aaa;            /* descripción en gris */
    margin: 0;              /* sin margen extra */
}

/* ===== TABLA ===== */

table {
    width: 100%;               /* la tabla ocupa todo el ancho disponible */
    border-collapse: collapse; /* une los bordes para que no se dupliquen */
}

th, td {
    border: 1px solid #c9a84c; /* borde dorado en cada celda */
    padding: 12px;             /* espacio interno para que el texto respire */
    text-align: center;        /* texto centrado */
}

thead tr {
    background-color: #1a1a1a; /* fondo oscuro en los encabezados */
    color: #c9a84c;            /* texto dorado en encabezados */
}

tbody tr {
    background-color: #111;    /* fondo casi negro en las filas de datos */
    color: #ccc;               /* texto gris claro */
}

tbody tr:hover {
    background-color: #1e1e1e; /* fila se ilumina al pasar el mouse */
}

tfoot tr {
    background-color: #1a1a1a; /* fondo oscuro en el pie */
    color: #c9a84c;            /* texto dorado en totales */
    font-weight: bold;         /* texto en negrita */
}