* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    background-color: rgb(67, 65, 65);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#table-container {
    width: 100%;
    height: 600px; /* Ajusta esta altura según sea necesario */
    overflow-y: auto; /* Habilita la barra de desplazamiento vertical */
    border: 1px solid #ccc; /* Añade un borde para definir el área del contenedor */
}

table {
    width: 100%;
    border-collapse: collapse; /* Asegura que las celdas compartan bordes comunes */
}

header {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border: 1px solid black;
    font-size: 2em;
    padding: 0.5vh;
    width: 100%;
}


thead>tr {
    background-color: rgb(231, 101, 40);
    border: 1px solid rgb(32, 170, 140);
    position: relative;
}

tbody {
    background-color: rgb(25, 104, 177);
    overflow: auto;
    height: 10%;
}

tbody tr:nth-child(odd) {
    background: rgb(44, 177, 95);
}

th,
td {
    padding: 2vh;
    color: beige;
    text-align: center;
}

[campo-dato='id'] {
    width: 5%;
}

[campo-dato='cc']{
    width: 10%; /* Ajuste de ancho para cilindrada */
}

[campo-dato='precio']{
    width: 15%; /* Ajuste de ancho para precio */
}

#container {
    width: 100%;
    height: 20%;
    overflow: auto;
}

/* Responsividad */
@media(max-width:1200px) {
    [campo-dato='id'] {
        display: none;
    }
}

@media(max-width:900px) {
    [campo-dato='ano'] {
        display: none;
    }
}

@media(max-width:700px) {
    [campo-dato='cc'] {
        display: none;
    }
}

@media(max-width:500px) {
    [campo-dato='precio'] {
        display: none;
    }
}