/*
 * Pla d'usos (ECPU). Els estils del frontend Angular original (pla-usos), portats tal
 * qual: styles.css i el CSS de cada component, amb el selector de cada pas al davant
 * perquè cada component tenia els seus propis estils de form, .container o button.
 */

:root {
    --app-boto: blueviolet;
    --app-boto-hover: violet;
    --app-fons-form: #f4f4f9;
    --app-apte: green;
    --app-amb-condicions: orange;
    --app-no-apte: red;
}

/* styles.css */
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; background: #fff; color: #000; }
[hidden] { display: none !important; }

/* <body class="mat-typography"> de l'original (tipografia d'Angular Material) */
body { font-size: 14px; line-height: 20px; }
h1 { font: 400 24px/32px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 16px; }
h2 { font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 16px; }
h3 { font: 400 16px/28px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 16px; }
p { margin: 0 0 12px; }

/* formulari.component.css */
.page-wrapper { min-height: 100vh; display: flex; flex-direction: column; }
.content-wrapper { flex: 1; }
.logo { margin: 15px; }
h2.titol-formulari { text-align: center; font-size: 24px; color: #333; margin-bottom: 20px; }

button {
    background-color: var(--app-boto, blueviolet);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}
button:hover { background-color: var(--app-boto-hover, violet); }

.generant-pdf {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex; justify-content: center; align-items: center;
    z-index: 1000;
}
.dialog-content { background-color: #ffffff; padding: 20px 30px; border-radius: 8px; text-align: center; width: 20%; }
.spinner { display: flex; flex-direction: row; justify-content: center; margin-bottom: 25px; }
/* Substitueix el mat-spinner d'Angular Material (40 px). */
.spinner .roda {
    width: 40px; height: 40px; box-sizing: border-box;
    border: 4px solid rgba(138, 43, 226, .2); border-top-color: var(--app-boto, blueviolet);
    border-radius: 50%; animation: gira 1s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
.altres { text-align: justify; width: 40%; display: flex; flex-direction: column; justify-content: center; }
.boto-altres { display: flex; flex-direction: row; justify-content: center; padding-top: 10px; }
.llista-altres { margin-top: -5px; }

/* notificacio.component.css */
.notificacio { padding: 1rem; border-radius: 5px; margin: 1rem 0; color: white; font-weight: bold; }
.notificacio p { margin: 0; }
.notificacio.error { background-color: #f44336; }
.notificacio.ok { background-color: #4caf50; }
.notificacio.info { background-color: #ff9800; }

/* footer.component.css */
.footer { background-color: #f1f1f1; padding: 15px 0; text-align: center; font-size: 14px; color: #666; border-top: 1px solid #ccc; }
.footer p { margin-bottom: 0; }

/* manteniment.component.css */
.maintenance-container { text-align: center; padding: 4rem 2rem; max-width: 600px; margin: auto; }
.maintenance-container img { max-width: 100%; height: auto; }
.maintenance-container h1 { font-size: 2rem; margin-top: 1.5rem; color: #444; }
.maintenance-container p { font-size: 1.2rem; color: #666; }

/* presentacio.component.css */
.pas-presentacio .container { margin: 0 auto; padding: 0 20px; max-width: 1200px; text-align: justify; }
.pas-presentacio h1 { text-align: center; font-size: 1.8rem; margin-bottom: 20px; }
.pas-presentacio h2 { font-size: 1.3rem; margin-bottom: 15px; }
.pas-presentacio p, .pas-presentacio li { font-size: 1rem; }
.pas-presentacio li { margin-bottom: 8px; }
.pas-presentacio .imatge { display: flex; justify-content: center; flex-wrap: wrap; margin: 20px 0; }
.pas-presentacio .imatge img { max-width: 100%; height: auto; }
.pas-presentacio .llista-zones { list-style-type: square; }
.pas-presentacio .llista-ates { list-style: none; padding-left: 0; }
.pas-presentacio button { width: 100%; max-width: 300px; }
.pas-presentacio .boto { display: flex; justify-content: center; padding: 8px 0px; }
.pas-presentacio .alerta { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; margin: 20px 0; }
.pas-presentacio .alerta img { width: 50px; height: auto; }
.pas-presentacio .div-alerta {
    border: 2px solid #F09A74; border-radius: 15px; padding: 10px;
    display: flex; flex-direction: column; justify-content: center;
    background: linear-gradient(180deg, rgba(245, 184, 164, 1) 0%, rgba(242, 171, 150, 1) 50%, rgba(241, 144, 105, 1) 100%);
    max-width: 800px; width: 100%;
}

/* Formularis dels passos (dades-usuari, adreca i activitat .component.css) */
.pas-dades form, .pas-adreca form, .pas-activitat form {
    background-color: var(--app-fons-form, #f4f4f9);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.pas-adreca form { box-sizing: border-box; }
.pas-dades form, .pas-activitat form { margin-bottom: 30px; margin-left: auto; margin-right: auto; }
.pas-dades form { max-width: 500px; }
.pas-activitat form { max-width: 80%; }
.pas-dades form div, .pas-adreca form div, .pas-activitat form div { margin-bottom: 15px; }
form label { font-weight: bold; display: block; margin-bottom: 5px; }
form input, form select {
    width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;
    font-size: 16px; box-sizing: border-box; background: #fff;
}
form button { width: 100%; }
.buttons { display: flex; flex-direction: row; justify-content: space-between; gap: 50px; }
.pas-dades .error { color: red; text-align: center; }

/* adreca.component.css */
.pas-adreca .container {
    display: flex; flex-direction: row; justify-content: center; align-items: center;
    gap: 20px; width: 100%; box-sizing: border-box; padding: 20px; flex-wrap: wrap;
}
.pas-adreca .container > * { flex: 1; min-width: 300px; max-width: 33.33%; }
.pas-adreca .container img, .pas-adreca .container iframe { width: 100%; max-width: 450px; max-height: 300px; object-fit: contain; }
.pas-adreca form { display: flex; flex-direction: column; justify-content: space-between; }
.pas-adreca .buttons { gap: 20px; }
.pas-adreca .minimapa { position: relative; height: 300px; }
.pas-adreca .minimapa iframe { height: 100%; pointer-events: none; }

/* Autocompletat (adreca i activitat) */
.pas-adreca ul, .pas-activitat ul {
    list-style: none; padding: 0; margin-top: 5px; background-color: white;
    border: 1px solid #ccc; border-radius: 4px; max-height: 200px; overflow-y: auto;
}
.pas-adreca li, .pas-activitat li { padding: 8px; cursor: pointer; }
.pas-adreca li:hover, .pas-activitat li:hover { background-color: #f4f4f4; }

.modal {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex; justify-content: center; align-items: center;
}
.modal-content { background-color: white; padding: 20px; border-radius: 5px; text-align: center; color: red; max-width: 90%; }
.modal-content button { background-color: #555555; margin-top: 15px; }

/* activitat.component.css */
.pas-activitat form select:disabled { background-color: #eee; }
.pas-activitat .condicions { margin-top: 20px; }
.pas-activitat .seleccionables { width: 100%; display: flex; flex-direction: row; justify-content: space-between; gap: 50px; }
.pas-activitat .seleccionable { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.color-apte { color: var(--app-apte, green); }
.color-amb-condicions { color: var(--app-amb-condicions, orange); }
.color-no-apte { color: var(--app-no-apte, red); }

/* Media queries dels components */
@media (max-width: 900px) {
    .pas-adreca .container { flex-direction: column; align-items: center; }
    .pas-adreca .container > * { max-width: 100%; }
    .pas-adreca .buttons { flex-direction: column; gap: 15px; }
}

@media (max-width: 768px) {
    .pas-presentacio h1 { font-size: 1.5rem; }
    .pas-presentacio h2 { font-size: 1.2rem; }
    .pas-presentacio .container { padding: 0 15px; }
    .pas-presentacio .alerta { flex-direction: column; text-align: center; }
    .pas-presentacio .alerta img { display: none; }
    .pas-presentacio .alerta div { width: 90%; }
    .pas-presentacio button { font-size: 14px; padding: 10px; width: 90%; }
    /* L'original no en tenia: amb un 20% d'amplada, els diàlegs no es llegien al mòbil. */
    .dialog-content, .altres { width: 85%; }
}

@media (max-width: 600px) {
    .pas-dades form, .pas-activitat form { padding: 15px; margin: 10px; max-width: none; }
    /* L'original deixava els tres desplegables d'activitat en fila també al mòbil. */
    .pas-activitat .seleccionables { flex-direction: column; gap: 0; }
}

/* Pàgines d'error */
.pagina-error { text-align: center; padding: 4rem 2rem; max-width: 600px; margin: auto; }
.pagina-error h1 { font-size: 2rem; color: #444; }
.pagina-error p { font-size: 1.2rem; color: #666; }
.pagina-error a { color: var(--app-boto, blueviolet); }