/* ============================================================
   TRAMAS SW — Adaptació tipogràfica al Sistema de Disseny gencat
   Aplica a: AssistenciaViatge.jsp (i tots els formularis Tramas)
   Versió: 3.0 — Correcció selector agressiu primera fila
   ============================================================ */

/* 1. Carrega Open Sans des de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

/* 2. Base global: font i mida base */
body,
body *,
table, td, th,
input, select, textarea, button {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

body {
  color: #333333;
}

/* 3. RESET GLOBAL de text-transform
      Elimina qualsevol majúscula forçada heretada o inline */
*,
*::before,
*::after {
  text-transform: none !important;
}

/* 4. Títol principal del formulari
      Aplica NOMÉS a les classes específiques del títol,
      sense selectors genèrics de taula que afectin altres files */
.titolFormulari,
table.titolFormulari td,
td.titolProcediment,
h1.titolFormulari,
.procediment-titol {
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  color: #111111 !important;
  line-height: 1.3;
}

/* 5. Títols de secció — reactiva majúscules i fixa color gris */
.titolSeccio,
.titol-seccio,
fieldset > legend,
.seccio-header,
td.capcalera,
td[class*="capcalera"],
td[class*="seccio"],
td[class*="titol"],
font[color="#990000"],
font[color="#C00000"],
font[color="#cc0000"],
font[color="red"],
td[style*="color:#9"],
td[style*="color: #9"],
td[style*="color:red"],
td[style*="color: red"],
td[style*="color:#C0"],
td[style*="color: #C0"] {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #555555 !important;
  line-height: 1.4;
}

/* 6. Etiquetes de camp — totes les td que no siguin seccions */
td,
td.etiqueta,
label,
td.label,
td[class*="label"],
td[class*="etiqueta"] {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #333333 !important;
  line-height: 1.5;
}

/* 7. Camps d'entrada — 16px mínim per evitar zoom a iOS */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="search"],
textarea,
select {
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #333333 !important;
  line-height: 1.5;
}

/* 8. Botons genèrics */
input[type="button"],
input[type="reset"],
button,
.boto,
a.boto {
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* 9. Botons d'acció principal */
input[type="submit"],
button[type="submit"],
.boto-principal,
.boto-enviar {
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* 10. Texts d'ajuda / hints */
.hint,
.ajuda,
.nota,
.text-ajuda,
small,
.help-text {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #666666 !important;
  line-height: 1.6;
}

/* 11. Asteriscs de camp obligatori — mantén el vermell */
.obligatori,
.required,
span.asterisk,
td.asterisk {
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 14px !important;
  color: #c0392b !important;
  font-weight: 600 !important;
}

/* 12. Interlineat de taules */
table td {
  line-height: 1.5;
  vertical-align: middle;
}

/* 13. Missatges d'error */
.error,
.missatge-error,
span.error,
td.error {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #c0392b !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
}

/* 14. Etiquetes de camp — elimina color blau i subratllat heredat
       Alguns CSS existents (ds-layout.css, global.css) apliquen
       color i text-decoration als <label> com si fossin enllaços */
label,
.ds-label,
.ds-form-grid-label,
td label {
  color: #333333 !important;
  text-decoration: none !important;
  font-weight: 400 !important;
}

/* 15. Botó primari — color corporatiu vermell gencat
       El SDS de la Generalitat utilitza #C00000 per als botons primaris,
       no blau. Corregim l'error de la versió anterior. */
.ds-button--primary,
input[type="submit"],
button[type="submit"],
.boto-principal,
.boto-enviar {
  background-color: #C00000 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 8px 16px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.ds-button--primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: #9b1a29 !important;
}

/* 16. Botó secundari — estil neutre */
.ds-button--secondary,
input[type="reset"] {
  background-color: #ffffff !important;
  color: #C00000 !important;
  border: 1px solid #C00000 !important;
  border-radius: 4px !important;
  padding: 8px 16px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
}

.ds-button--secondary:hover,
input[type="reset"]:hover {
  background-color: #fdecea !important;
}

/* 17. Inputs i selects — mides i estil SDS gencat
       Alinea height, padding, border i border-radius amb l'estàndard.
       NOTA: width NO s'aplica globalment perquè els JSPs antics usen
       l'atribut SIZE per controlar l'amplada dins de taules. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="search"],
textarea,
select {
  height: 40px !important;
  padding: 8px 12px !important;
  border: 1px solid #767676 !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
}

/* width: 100% NOMÉS per als inputs del nou disseny (classe ds-input)
   Els inputs legacy amb atribut SIZE no han d'heretar ample complet */
.ds-input,
.ds-form-grid-field input,
.ds-form-grid-field select,
.ds-form-grid-field textarea {
  width: 100% !important;
}

textarea {
  height: auto !important;
  min-height: 80px !important;
}

/* 18. Focus — contorn vermell corporatiu gencat (WCAG AA) */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: 3px solid #C00000 !important;
  outline-offset: 2px !important;
  border-color: #C00000 !important;
}

/* 19. Estat d'error visual */
input.error,
select.error,
textarea.error,
input[aria-invalid="true"],
select[aria-invalid="true"] {
  border: 2px solid #C00000 !important;
  background-color: #fff8f8 !important;
}

/* ============================================================
   ESTILS PÀGINA D'INICI (index.html)
   ============================================================ */

/* 20. Títols de les cards de la pàgina d'inici */
.ds-card-title,
.ds-service-title,
h2, h3 {
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  line-height: 1.3;
}

/* 21. Descripció de les cards — elimina el vermell, posa gris neutre
       El vermell ve d'un estil global a { color: #C00000 } o p { color: ... }
       que afecta els paràgrafs descriptius de les cards */
.ds-card p,
.ds-card-desc,
.ds-service-desc,
p {
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #555555 !important;
  line-height: 1.6;
  text-decoration: none !important;
}

/* 22. Cards — padding i border-radius SDS */
.ds-card,
.ds-service-card {
  padding: 24px !important;
  border-radius: 8px !important;
  border: 1px solid #d0d0d0 !important;
  background: #ffffff !important;
}

/* 23. Botons de la pàgina d'inici — border-radius 4px (no pill)
       El CSS existent aplica border-radius alt (~20px) als botons de la home */
.ds-card a,
.ds-card button,
.ds-card input[type="button"],
.ds-service-card a,
.ds-home-btn,
a.ds-button,
a[class*="btn"],
a[class*="boto"] {
  display: inline-block !important;
  background-color: #C00000 !important;
  color: #ffffff !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  border-radius: 4px !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  margin-right: 8px !important;
  margin-bottom: 6px !important;
}

.ds-card a:hover,
.ds-card button:hover,
a.ds-button:hover {
  background-color: #9b1a29 !important;
  color: #ffffff !important;
}

/* 24. Disquet del camp de fitxer — alinea en línia amb el camp
       getFitxer() genera un <br> entre l'input i l'enllaç del disquet
       que el fa caure a la línia de sota */
td.tdd br,
.ds-form-grid-field br,
.ds-form-section-body br {
  display: none !important;
}

td.tdd a img,
td.tdd a[href*="adjuntar"] img,
td.tdd a[onclick*="adjuntar"] img,
.ds-form-grid-field a img,
.ds-form-section-body a img {
  vertical-align: middle !important;
  display: inline-block !important;
  margin-left: 6px !important;
}

td.tdd input[type="text"][readonly],
td.tdd input[readonly],
.ds-form-grid-field input[readonly] {
  display: inline-block !important;
  vertical-align: middle !important;
}

/* 25. Radio buttons i checkboxes — no han d'heretar height: 40px */
input[type="radio"],
input[type="checkbox"] {
  height: auto !important;
  width: auto !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  vertical-align: middle !important;
  margin-right: 4px !important;
}

/* 26. Disquet del fitxer — forçar inline amb més especificitat
       getFitxer() genera: input[readonly] + <br> + <a><img></a>
       dins de td.tdd. Eliminem el <br> i alineem l'img */
td.tdd > br,
td.ds-form-grid-field > br,
.ds-form-section-body td > br {
  display: none !important;
}

td.tdd > a > img[src*="dis"],
td.tdd > a > img[src*="fitxer"],
td.tdd > a > img[src*="adjunt"],
td.ds-form-grid-field > a > img,
.ds-form-section-body td > a > img {
  vertical-align: middle !important;
  display: inline-block !important;
  margin-left: 6px !important;
}

td.tdd > input[readonly],
td.ds-form-grid-field > input[readonly] {
  display: inline-block !important;
  vertical-align: middle !important;
}

/* 27. Etiquetes tdd sense <label> — elimina el blau heredat
       Quan la <td class="tdd"> conté text directe sense <label>,
       el color blau ve de a { color } aplicat als descendants */
td.tdd,
td.tdd * {
  color: #333333 !important;
  text-decoration: none !important;
}

/* Però mantenim el vermell dels asteriscs dins de tdd */
td.tdd .ds-field-required,
td.tdd span[class*="required"],
td.tdd font[color="#FF0000"] {
  color: #c0392b !important;
}

/* 28. Disquet adjuntarFitxer — alinea en línia amb el camp
       getFitxer() genera: input[readonly] seguit de <a href="javascript:adjuntarFitxer(...)">
       L'input hereta display:block i fa caure l'enllaç a la línia de sota */
input[name$="_IMG"],
a[href*="adjuntarFitxer"],
a[href*="adjuntarFitxer"] img {
  display: inline-block !important;
  vertical-align: middle !important;
}

input[type="text"][disabled],
input[type="text"][readonly] {
  display: inline-block !important;
  vertical-align: middle !important;
}

/* 29. Cercador de codis d'ens (busquedaCodiEns.jsp)
       El select sw-select-ens no ha d'ocupar l'ample complet
       ni heretar colors de text incorrectes */
.sw-select-ens-wrap {
  display: block;
  width: 100%;
}

.sw-select-ens,
select.sw-select-ens {
  width: 100% !important;
  max-width: 100% !important;
  height: 36px !important;
  font-size: 14px !important;
  color: #333333 !important;
  border: 1px solid #767676 !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  background-color: #ffffff !important;
}

/* Text del cercador — elimina blau i subratllat */
.ds-form center,
.ds-form center *:not(.ds-button--primary):not(.ds-button--secondary) {
  color: #333333 !important;
  text-decoration: none !important;
}

/* Conserva el vermell d'errors dins del cercador */
.ds-form center font[color="RED"],
.ds-form center b font[color="RED"] {
  color: #c0392b !important;
}

/* Input de cerca ràpida (...) al costat del select */
.ds-form center input[type="TEXT"],
.ds-form center input[type="text"] {
  height: 36px !important;
  width: auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* 30. Amplada mínima de les etiquetes (td.tdd) en taules legacy
       Evita que el text de les etiquetes es parteixi en múltiples línies
       per falta d'espai a la primera columna */
td.tdd:first-child,
td.tdd + td.tdd:not(:last-child) {
  white-space: nowrap;
}

/* Per a etiquetes llargues que no es poden posar en una línia,
   fixem un ample mínim per donar-los prou espai */
fieldset td.tdd:first-child {
  min-width: 180px !important;
  width: 25% !important;
  vertical-align: middle !important;
}