/* CSS Variables for Color Palette */
:root {
    --primary-color: #0D2C54;    /* Deep Navy Blue */
    --secondary-color: #255E9A;  /* Steel Blue */
    --accent-color: #FFB703;     /* Amber Orange */
    --light-background: #F8F9FA; /* Off-White */
    --white-color: #FFFFFF;      /* White */
    --main-text-color: #212529;  /* Near Black */
    --secondary-text-color: #6c757d; /* Medium Gray */
    --border-color: #ced4da;     /* Light Gray for borders */
    --error-color: #dc3545;      /* Red for errors */
}

/* Basic Reset/Normalizer */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--light-background);
    color: var(--main-text-color);
    font-size: 16px;
}

/* General Typography */
h1, legend, label {
    color: var(--primary-color);
}

h1 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

legend {
    font-weight: bold;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    padding: 0 0.5em;
}

/* Default Label Styling (for text inputs, selects, textareas) */
label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    font-size: 0.9rem;
}

/* Layout Styles */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header Styles */
header {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#logo,
#logo-lopdp { /* Added #logo-lopdp */
    max-height: 60px;
    margin-right: 1.5rem;
}

header h1 {
    color: var(--white-color);
    font-size: 1.5rem;
}

/* Form Container Styles */
#form-container,
#form-container-lopdp { /* Added #form-container-lopdp */
    background-color: var(--white-color);
    padding: 2rem;
    text-align: center; /* Added for portal page main content centering */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 800px;
    margin: 2rem auto;
}

/* Portal Page Specific Styles */
#form-container > h2 { /* For "Bienvenido" heading on portal */
    font-size: 1.7rem; 
    margin-bottom: 1rem; 
    color: var(--primary-color); /* Ensure it uses primary color if not inherited */
}

.portal-intro-text { /* For introductory paragraph on portal */
    font-size: 1.1rem; 
    color: var(--main-text-color); 
    margin-bottom: 2rem; 
}

/* Form Element Styles */
form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Increased gap slightly for better separation of fieldsets */
}

fieldset {
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-radius: 6px;
}

fieldset > div { /* Add some margin below each direct div within a fieldset */
    margin-bottom: 1rem;
}
fieldset > div:last-child { /* Remove margin for the last div to avoid double spacing with fieldset margin */
    margin-bottom: 0;
}


input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"], /* Kept for completeness if ever re-added */
select,
textarea {
    width: 100%;
    padding: 0.75rem;
    /* margin-bottom: 1rem; REMOVED - handled by fieldset > div margin */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
    color: var(--main-text-color);
    background-color: var(--white-color);
    line-height: 1.5; /* Ensure select also has this */
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 0.2rem rgba(37, 94, 154, 0.25);
}

select {
    appearance: none; /* Basic override of OS default styling */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M5%208l5%205%205-5z%22%20fill%3D%22%236c757d%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1em;
    padding-right: 2.5rem; /* Make space for arrow */
}


/* Styling for questions within fieldsets (radio/checkbox groups) */
fieldset > div > p {
    font-weight: bold;
    color: var(--primary-color); /* Same as labels */
    margin-bottom: 0.75rem; /* Space below the question */
    font-size: 0.9rem;
}

/* Styling for labels of checkboxes and radio buttons */
/* General styling for these labels */
input[type="checkbox"] + label,
input[type="radio"] + label,
label > input[type="checkbox"], /* For structure like <label><input> Text</label> */
label > input[type="radio"] {   /* For structure like <label><input> Text</label> */
    font-weight: normal;
    display: inline-block;
    margin-right: 1rem;
    margin-bottom: 0.25rem; /* Space below each radio/checkbox line */
    vertical-align: middle;
    color: var(--main-text-color); /* Standard text color for options */
}

/* For the specific structure <label><input> Text</label> */
fieldset > div > label > input[type="radio"],
fieldset > div > label > input[type="checkbox"] {
    margin-right: 0.4rem;
    vertical-align: middle;
}
/* For the specific structure <input><label for> */
fieldset > div > input[type="radio"] + label,
fieldset > div > input[type="checkbox"] + label {
     /* Existing rule `label[for^=...]` might be too specific, this is more general */
}


/* Labels that are direct children of fieldset>div (usually for checkboxes/radios without a <p> question) */
fieldset > div > label {
    font-weight: normal; /* Ensure these are not bold if they wrap inputs */
}
fieldset > div > label > input[type="checkbox"],
fieldset > div > label > input[type="radio"] {
    margin-right: 0.4rem;
}


/* Ensure direct label children of fieldset>div that are *not* for text inputs are normal weight */
fieldset > div > label:has(input[type="radio"]),
fieldset > div > label:has(input[type="checkbox"]) {
    font-weight: normal;
}


textarea {
    min-height: 120px;
    resize: vertical;
}

button[type="submit"],
.btn-primary { /* Added .btn-primary here */
    background-color: var(--accent-color);
    color: var(--primary-color);
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 1rem;
    transition: background-color 0.2s ease-in-out;
    align-self: flex-start;
}

/* Specific styling for buttons within channel selectors on portal page */
.channel-selector .btn-primary {
    margin-bottom: 0.5rem;
    display: inline-block; /* Ensures it respects centering and allows margin */
}

button[type="submit"]:hover,
.btn-primary:hover { /* Added .btn-primary here */
    background-color: #e0a000;
}

button[type="submit"]:focus,
.btn-primary:focus { /* Added .btn-primary here */
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(255, 183, 3, 0.5);
}

/* Conditional display containers */
#previous_report_details_container { /* Only this one remains from original set */
    padding-left: 1rem;
    border-left: 2px solid var(--accent-color);
    margin-top: 0.5rem;
    /* margin-bottom: 1rem; */ /* Handled by fieldset > div */
}


/* Footer Styles */
footer {
    text-align: center;
    padding: 1.5rem;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    border-top: 1px solid var(--border-color);
}

/* Styles for the new .additional-info section */
.additional-info {
    background-color: #f0f4f8; /* A slightly different background, e.g., a very light grayish blue */
    padding: 1.5rem;
    margin-top: 3rem; /* Adjusted default top margin */
    margin-bottom: 2rem; /* Space below this section, before the footer */
    margin-left: auto; /* Center the section */
    margin-right: auto; /* Center the section */
    max-width: 800px; /* Consistent max-width with form containers */
    border-radius: 6px;
    border: 1px solid #dde4eb; /* A light border */
    text-align: left; /* Explicitly set text-align if needed */
}

/* Styles for the portal page's channel selection boxes */
.channel-selector {
    padding: 1rem;
    border: 1px solid var(--border-color); /* Use variable */
    border-radius: 6px;
    margin-bottom: 1.5rem;
    background-color: var(--white-color); /* Optional: give it a slight background if page bg is different */
}

.channel-selector:last-child {
    margin-bottom: 0;
}

.channel-selector p {
    font-size: 0.9em;
    color: var(--secondary-text-color); /* Use variable */
    margin-top: 0.5rem;
    line-height: 1.5;
    /* text-align is inherited from #form-container's text-align: center */
}

.additional-info h2 {
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    text-align: center; /* Center the main heading of this section */
}

.additional-info h3 {
    font-size: 1.15rem;
    color: var(--primary-color);
    margin-top: 1.5rem; /* Space above the 'Sobre las Cookies' heading */
    margin-bottom: 0.5rem;
}

.additional-info p {
    margin-bottom: 0.75rem;
    line-height: 1.6;
    font-size: 0.95rem; /* Slightly smaller text for this section if desired */
    color: var(--main-text-color);
}

.additional-info ul {
    list-style-position: inside;
    padding-left: 0; /* Reset padding if using list-style-position inside */
    margin-bottom: 1rem;
}

.additional-info ul li {
    margin-bottom: 0.5rem;
}

.additional-info a {
    color: var(--secondary-color);
    text-decoration: underline;
}

.additional-info a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

/* Styles for Opciones Denuncia page */
.content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--light-background);
    margin-bottom: 2rem;
}

.info-section {
    flex-basis: 40%;
    text-align: center;
}

.client-logo {
    width: 180px;
    height: auto;
    border-radius: 15px; /* Rounded corners for rectangle */
    border: 2px solid var(--secondary-color);
    object-fit: cover;
    margin-bottom: 1rem;
}

.document-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--primary-color);
    font-weight: bold;
}

.actions-section {
    flex-basis: 55%;
    background-color: var(--white-color); /* Neutral background */
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.actions-section h2 {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
}

.actions-section .btn-primary {
    display: block;
    width: 80%;
    margin: 1rem auto;
    padding: 1rem;
    border-radius: 50px; /* Pill shape */
    font-size: 1.2rem;
    background-color: var(--accent-color); /* Yellow button */
    color: var(--primary-color); /* Dark text on yellow */
    border: none;
    font-weight: bold;
}

.actions-section .btn-primary:hover {
    background-color: #e0a000; /* Darker yellow on hover */
}

.warning-text {
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    max-width: 700px;
    margin: 0 auto 2rem auto;
    text-align: center;
}

.tracking-section {
    text-align: center;
    margin-top: 2rem;
}

.tracking-section label {
    font-weight: bold;
    margin-bottom: 0.5rem;
    display: block;
}

.search-box {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 400px;
    margin: 0 auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden; /* To contain the button */
}

.search-box input {
    flex-grow: 1;
    border: none;
    padding: 0.75rem;
    font-size: 1rem;
}

.search-box input:focus {
    outline: none;
}

.search-button {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    font-size: 1.2rem; /* Make emoji bigger */
}

/* Responsive Styles (Media Queries) */
@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column;
    }
    .actions-section .btn-primary {
        width: 100%;
    }
    header {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
    }

#logo,
#logo-lopdp { /* Added #logo-lopdp */
        max-height: 50px;
        margin-bottom: 0.5rem;
    }

    header h1 {
        font-size: 1.25rem;
    }

#form-container,
#form-container-lopdp { /* Added #form-container-lopdp */
    /* .additional-info will get default block margins (full width) unless specified otherwise */
        padding: 1.5rem;
        margin: 1rem;
    }
    .additional-info { /* Responsive padding for additional-info */
        padding: 1.5rem; 
        /* Margin for .additional-info on mobile will be block default, or could be set here */
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    legend {
        font-size: 1.15rem;
    }

    button[type="submit"],
    .btn-primary { /* Added .btn-primary here */
        width: 100%;
        padding: 0.85rem;
    }
}

@media (max-width: 600px) {
    body {
        font-size: 15px;
    }

    h1 {
        font-size: 1.5rem;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    input[type="datetime-local"],
    select,
    textarea {
        padding: 0.65rem;
        font-size: 0.95rem;
    }
    select { /* Ensure padding right is adjusted for smaller arrow */
      padding-right: 2rem; 
    }


    button[type="submit"],
    .btn-primary { /* Added .btn-primary here */
        font-size: 1rem;
    }

#form-container,
#form-container-lopdp { /* Added #form-container-lopdp */
    /* .additional-info will get default block margins (full width) unless specified otherwise */
        padding: 1rem;
    }
    .additional-info {  /* Responsive padding for additional-info */
        padding: 1rem;
        /* Margin for .additional-info on mobile will be block default, or could be set here */
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    fieldset {
        padding: 1rem;
    }
}

/* Ensure disabled fields look distinct */
input:disabled, select:disabled, textarea:disabled {
    background-color: #e9ecef;
    opacity: 0.7;
    cursor: not-allowed;
}
/* Specific styling for label of anonymous checkbox if it's ever re-added by its ID */
/* #anonymous + label { 
    font-weight: bold;
    color: var(--secondary-color);
} */