/* Base styles for the page */
body { 
    font-family: Arial, sans-serif; /* Sets a clean, readable font */
    background-color: #f4f4f4; /* Light gray background for contrast */
    padding: 20px; /* Adds spacing around the page */
    margin: 0; /* Removes default browser margin */
}

/* Main container */
.container { 
    max-width: 100%; /* Ensures container adapts to screen width */
    margin: auto; /* Centers the container horizontally */
    background: white; /* White background for content area */
    padding: 20px; /* Inner spacing */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

/* Header */
h2 { 
    text-align: center; /* Centers the title text */
    background-color: #000; /* Black background */
    color: #fff; /* White text */
    padding: 10px; /* Inner spacing */
    margin-top: 0; /* Removes default top margin */
    font-size: 1.5rem; /* Larger font size for emphasis */
}

/* Search input */
#inputBusca { 
    width: 100%; /* Full width input field */
    padding: 12px; /* Inner spacing */
    margin-bottom: 20px; /* Space below input */
    border: 1px solid #ddd; /* Light gray border */
    border-radius: 4px; /* Rounded corners */
    box-sizing: border-box; /* Ensures padding doesn’t affect width */
    font-size: 16px; /* Readable font size */
}

/* Table */
table { 
    width: 100%; /* Full width table */
    border-collapse: collapse; /* Removes gaps between cells */
    font-size: 14px; /* Default table font size */
}

/* Table header */
th { 
    background-color: #ffff00; /* Yellow background for header cells */
    color: #000; /* Black text for contrast */
    text-align: left; /* Aligns text to the left */
    padding: 10px; /* Inner spacing */
    font-size: 14px; /* Header font size */
}

/* Table cells */
td { 
    padding: 10px; /* Inner spacing */
    border-bottom: 1px solid #eee; /* Light border between rows */
}

/* Hover effect */
tr:hover { 
    background-color: #f9f9f9; /* Light gray highlight when hovering over a row */
}

/* Responsiveness for tablets and medium screens */
@media (max-width: 768px) {
    .container {
        padding: 10px; /* Reduce container padding */
    }
    h2 {
        font-size: 1.2rem; /* Smaller header font */
    }
    table, th, td {
        font-size: 12px; /* Smaller table font */
    }
    #inputBusca {
        font-size: 14px; /* Slightly smaller input font */
        padding: 10px; /* Reduce input padding */
    }
}

/* Responsiveness for mobile screens */
@media (max-width: 480px) {
    table, th, td {
        display: block; /* Stack table elements vertically */
        width: 100%; /* Full width for each element */
    }
    th {
        display: none; /* Hide headers on very small screens */
    }
    td {
        border: none; /* Remove borders for cleaner mobile view */
        padding: 8px; /* Reduce padding */
        position: relative; /* Allows pseudo-element positioning */
    }
    td::before {
        content: attr(data-label); /* Displays column label before value */
        font-weight: bold; /* Bold labels for clarity */
        display: block; /* Places label above value */
        margin-bottom: 4px; /* Space between label and value */
    }
}