:root {
    --primary-color: #0771B1;
    --secondary-color: #064479;
    --accent-color: #F4F4F4;
    --gray-light: #F8F9FA;
    --background-color: #FFFFFF;
    --accent-hover-color: #9dd9ff;
    --text-color: #3b3b3b;
    --font-family: 'Montserrat';
    --transition-duration: 0.3s;
}

/* General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
}

body,
textarea {
    font-size: 10pt;
    background-color: var(--background-color);
    color: var(--text-color);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-duration);
}

a:hover {
    text-decoration: underline;
    color: var(--secondary-color);
}

.clear {
    clear: both;
}

/* Header */
#header,
#header_print,
#header_g,
#header_ll,
#header_abc,
#header_rpt {
    position: relative;
    height: 135px;
    width: 100%;
    margin-bottom: 10px;
    background-color: var(--primary-color);
    background-size: cover;
    background-position: top right;
    color: #fff;
}

#header h1,
#header_g h1,
#header_ll h1,
#header_abc h1,
#header_rpt h1 {
    position: absolute;
    top: 1.2em;
    left: 1.0em;
    font-size: 2.5em;
}

#header h2,
#header_g h2,
#header_ll h2,
#header_abc h2,
#header_rpt h2 {
    position: absolute;
    top: 6em;
    left: 2.5em;
    font-size: 1.0em;
    font-weight: normal;
}

#header a,
#header_g a,
#header_ll a,
#header_abc a,
#header_rpt a {
    color: #fff;
    text-decoration: none;
}

/* Menu */
#menu {
    position: relative;
    width: 100%;
    height: 48px;
    background-color: var(--secondary-color);
    margin-bottom: 10px;
}

#menu ol,
#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu ol li,
#menu ul li {
    display: block;
    float: left;
    padding: 0.75em 1em;
    color: #fff;
    transition: background-color var(--transition-duration);
}

#menu ol li:hover,
#menu ul li a:hover {
    background-color: var(--primary-color);
}

#menu ol li a,
#menu ul li a {
    color: #fff;
    text-decoration: none;
}

#menu .activo {
    font-weight: bold;
    background: var(--primary-color) url('ico/tick_16.png') bottom center no-repeat;
}

/* Content */
#content {
    line-height: 1.7em;
    padding: 1.5em;
}

#content p {
    margin-bottom: 1.5em;
}

#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
    margin-bottom: 1.2em;
    color: var(--secondary-color);
    font-weight: normal;
}

#content h2 {
    font-size: 18px;
    text-align: center;
}

#content blockquote {
    border-left: 4px solid var(--primary-color);
    background: var(--accent-color);
    padding: 1em;
    margin-bottom: 1.5em;
}

#content table {
    width: 100%;
    border-collapse: collapse; /* ← important for grid lines */
    margin-bottom: 1.5em;
    border-radius: 8px;
    background: var(--background-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
}

#content table th,
#content table td {
    padding: 0.75em 1em;
    border: 1px solid rgba(0, 0, 0, 0.1); /* ← subtle light-gray grid lines */
    vertical-align: middle;
    text-align: center;
}

#content table tr:nth-child(even) {
    background-color: var(--accent-color);
}

#content table th {
    background-color: #f5f5f5;
    font-weight: bold;
    color: #333;
}

#content table tr:last-child td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* optional: keep last line */
}

/* Forms */
input,
select,
textarea {
    font-size: 14px;
    color: var(--text-color);
    padding: 5px;
    border: none;
    transition: border-color var(--transition-duration);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--secondary-color);
}

input[type=button],
input[type=submit] {
    font-size: 14px;
    color: #fff;
    background-color: var(--primary-color);
    border: none;
    padding: 5px;
    cursor: pointer;
    transition: background-color var(--transition-duration);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

input[type=button]:hover,
input[type=submit]:hover {
    background-color: var(--secondary-color);
}

/* Tables */
#gp table,
#borde table,
#borde_no_over table,
#borde_small table,
#borde_abc table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 1.5em;
    border-radius: 8px;
    background: var(--background-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#gp th,
#gp td,
#borde th,
#borde td,
#borde_no_over th,
#borde_no_over td,
#borde_small th,
#borde_small td,
#borde_abc th,
#borde_abc td {
    padding: 2px 4px;
    color: var(--text-color);
}

#gp thead th,
#borde thead th,
#borde_no_over thead th,
#borde_small thead th,
#borde_abc thead {
    position: sticky !important;
    top: 0 !important;
    background: white !important;
}

#borde_abc thead th{
    background: var(--primary-color);
    color: #fff;
    text-align: center;
    font-size: 10pt;
}

table {
    border-collapse: collapse;
    width: 100%;
}


#borde_abc {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: auto;
}


#borde_abc tr td a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-duration);
    font-weight: bold;
    font-size: 1.1em;
}


#borde_abc tr td a:hover {
    text-decoration: underline;
    color: var(--secondary-color);
}

#gp {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: auto;
}

#gp tbody tr:hover,
#borde tbody tr:hover,
#borde_no_over tbody tr:hover,
#borde_small tbody tr:hover,
#borde_abc tbody tr:hover {
    background-color: var(--accent-hover-color);
}

#gp tfoot th,
#borde tfoot th,
#borde_no_over tfoot th,
#borde_small tfoot th,
#borde_abc tfoot th {
    text-align: center;
    font-weight: bold;
}

#gp tfoot td,
#borde tfoot td,
#borde_no_over tfoot td,
#borde_small tfoot td,
#borde_abc tfoot td {
    text-align: right;
    font-weight: bold;
}

/* Adjust Form Styling for Better Spacing */
form {
    display: flex;
    flex-direction: column;
    gap: 1.2em;
    /* Add consistent spacing between form elements */
}

label {
    font-size: 12pt;
    /* Ensure label text is legible */
    margin-bottom: 0.3em;
    /* Add spacing between label and input */
    color: var(--text-color);
}

input,
select,
textarea {
    width: 100%;
    /* Ensure inputs span a good portion of the container */
    padding: 10px;
    /* Increase padding for a cleaner look */
    font-size: 12pt;
    border: 1px solid #ccc;
    /* Add a subtle border for clarity */
    margin-bottom: 0.8em;
    /* Add space after each input */
}

input[type="submit"],
button {
    align-self: flex-start;
    /* Align button to the left */
    padding: 10px 20px;
    font-size: 12pt;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color var(--transition-duration);
}

input[type="submit"]:hover,
button:hover {
    background-color: var(--secondary-color);
}

/* Specific Adjustments for Date Picker */
input[type="date"] {
    padding: 8px 10px;
    font-size: 12pt;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Fieldset and Legend for Grouping */
fieldset {
    border: 1px solid #ddd;
    padding: 1.5em;
    border-radius: 6px;
    margin-bottom: 1.5em;
}

legend {
    font-size: 14pt;
    font-weight: bold;
    color: var(--secondary-color);
}

/* Remove numbering from ordered lists and reset padding/margin */
ol {
    list-style: none;
    /* Removes default numbering */
    padding-left: 0;
    margin-left: 0;
}

/* Optional: Ensure no numbers if added using a `before` pseudo-element */
ol li::before {
    content: none;
    /* Removes any pseudo-element numbering */
}

/* Styles for list items */
ol li {
    margin-bottom: 15px;
    /* Adds spacing between rows */
    list-style: none;
    /* Prevents any accidental list styling */
}

/* Flex layout for each item's content */
ol li div {
    display: flex;
    /* Align items horizontally */
    align-items: baseline;
    /* Aligns label and input neatly */
    gap: 10px;
    /* Adds space between label, input, and other elements */
}

/* Error message styles */
ol li span.error {
    color: red;
    /* Error messages in red */
    font-size: 0.9em;
    /* Slightly smaller text for errors */
}

/* Input and button styling */
ol input[type="text"],
ol input[type="button"] {
    padding: 5px;
    /* Padding for better click/touch areas */
    font-size: 1em;
    /* Consistent font size */
}

/* Estilos para el generador de gráficas */
.options-container {
    padding: 20px;
    margin: 20px 0;
}

.options-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
}

.option-item {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.option-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.option-link {
    display: block;
    padding: 20px;
    color: var(--text-color);
    text-decoration: none;
    height: 100%;
}

.option-subtitle {
    font-size: 0.9em;
    color: #666;
    margin-top: 8px;
    font-weight: normal;
}

.section-title {
    font-size: 1.5em;
    color: var(--secondary-color);
    margin-bottom: 1em;
    text-align: center;
}

/* Estilos específicos para cada tipo de gráfica */
.option-item:nth-child(1) {
    background-color: #4CAF50;
}

.option-item:nth-child(2) {
    background-color: #2196F3;
}

.option-item:nth-child(3) {
    background-color: #FFC107;
}

.option-item:nth-child(4) {
    background-color: #E91E63;
}

.option-item:nth-child(5) {
    background-color: #673AB7;
}

.option-item:nth-child(6) {
    background-color: #009688;
}

.option-item:nth-child(n) .option-link,
.option-item:nth-child(n) .option-subtitle {
    color: white;
}

.data-entry {
    font-weight: bold;
    font-size: 1.2rem; /* Adjust size as needed */
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .options-list {
        grid-template-columns: 1fr;
    }

    .option-item {
        margin-bottom: 15px;
    }
}



/* Responsive Design */
@media (max-width: 768px) {

    #menu ol li,
    #menu ul li {
        float: none;
        width: 100%;
        text-align: center;
    }

    #header,
    #header_print,
    #header_g,
    #header_ll,
    #header_abc,
    #header_rpt {
        height: auto;
        text-align: center;
    }

    #header h1,
    #header_g h1,
    #header_ll h1,
    #header_abc h1,
    #header_rpt h1,
    #header h2,
    #header_g h2,
    #header_ll h2,
    #header_abc h2,
    #header_rpt h2 {
        position: static;
        margin: 0.5em 0;
    }

    #content {
        padding: 1em;
    }

    input[type=button],
    input[type=submit] {
        width: 100%;
        margin-top: 10px;
    }

    form {
        gap: 1em;
        /* Adjust spacing for smaller screens */
    }

    input,
    select,
    textarea {
        font-size: 10pt;
    }

    input[type="submit"],
    button {
        font-size: 10pt;
    }
}

/* ====== default.css tablet additions ====== */
@media screen and (min-width: 769px) and (max-width: 1024px) {

    body,
    textarea {
        font-size: 11pt;
    }

    #content {
        padding: 1.25em;
    }

    input,
    select,
    textarea {
        font-size: 13px;
        padding: 8px;
    }

    #content table {
        min-width: 750px;
    }

    /* Improve form layouts */
    form {
        gap: 1em;
    }

    fieldset {
        padding: 1.25em;
    }

    /* Adjust table layouts for better tablet viewing */
    #gp table,
    #borde table,
    #borde_no_over table,
    #borde_small table,
    #borde_abc table {
        font-size: 11pt;
    }

    #gp th,
    #gp td,
    #borde th,
    #borde td,
    #borde_no_over th,
    #borde_no_over td,
    #borde_small th,
    #borde_small td,
    #borde_abc th,
    #borde_abc td {
        padding: 6px 8px;
    }
}

.popup-container {
    position: relative;
    display: inline-block;
}
.popup-content {
    display: none;
    position: absolute;
    top: 30px;
    left: 0;
    background-color: var(--background-color);
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
    width: 300px;
}
.popup-content p {
    margin: 0;
}
.popup-container .interrogation-mark {
    cursor: pointer;
    font-size: 20px;
    color: var(--primary-color);
    font-weight: bold;
    margin-left: 5px;
}