/* ============================================================
   CANVIS PLATAFORMA – CiberAcadèmia Gencat
   Target: https://ciberacademia.ciberseguretat.gencat.cat/
   ============================================================ */

/* ----------------------------------------------------------
   0. FOOTER – Logos institucionals i ocultar Instructure
   ---------------------------------------------------------- */

/* A. Forçar que el footer interior existeixi i mostrar Logos */
.ic-app-footer {
  display: block !important;
  visibility: visible !important;
  min-height: 60px !important;
}

.ic-app-footer::before,
#footer::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 750px !important;
  height: 55px !important;
  margin: 0 !important; 
  background-image: url("https://peninsula-innovation.s3.us-east-1.amazonaws.com/Ciber-logos-pc%402x.png");
  background-repeat: no-repeat;
  background-position: left center !important;
  background-size: contain;
}

/* B. Amagar logos antics a l'interior de les capses blanques del login */
.ic-Login-Body #footer::before,
body.register #footer::before,
body.unauthenticated #footer::before {
  display: none !important;
}

/* C. Ocultar brossa d'Instructure (Agressiu) */
.ic-app-footer__logo-link, 
.footer-logo, 
.ic-Login-footer__logo, 
.bc-login-footer-logo, 
#footer svg, 
#footer .instructure_logo,
#footer a[href*="facebook"], 
#footer a[href*="x.com"], 
#footer a[href*="twitter"],
.ic-Login-footer__tagline,          
.ic-Login-footer__product-links,    
.ic-Login-footer__links--product,
.ic-Login-footer__slogan,
.ic-Login__slogan {
  display: none !important;
  visibility: hidden !important;
}

/* ----------------------------------------------------------
   1. TIPOGRAFIA GLOBAL
   ---------------------------------------------------------- */
body, * {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ----------------------------------------------------------
   2. BOTONS (Estil Gencat) - SEPARACIÓ PRIMARI/SECUNDARI
   ---------------------------------------------------------- */

/* A. Botó Primari (+ Contingut, Login...) */
.btn-primary, button.btn-primary, a.btn-primary, .add_module_link,
button.Button--login,
.module-sequence-footer-button,
#modal-box .btn-primary:not(.ic-Login-confirmation__actions .btn),
.registration_page .btn-primary { 
  background-color: #c00000 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
  box-shadow: none !important;
  vertical-align: top !important; 
  box-sizing: border-box !important;
  margin: 0 4px !important;
}

.btn-primary:hover, .add_module_link:hover, button.Button--login:hover,
.module-sequence-footer-button:hover, 
#modal-box .btn-primary:not(.ic-Login-confirmation__actions .btn):hover {
  background-color: #9a0000 !important;
  color: #fff !important;
}

button.Button--login {
  min-height: 48px !important;
  font-size: 16px !important;
  width: 100% !important; 
  margin-top: 10px !important;
}

.module-sequence-footer-button--previous::before { content: "‹"; font-size: 1.4em; margin-right: 8px; }
.module-sequence-footer-button--next::after { content: "›"; font-size: 1.4em; margin-left: 8px; }
.module-sequence-footer-button--previous .icon-arrow-left,
.module-sequence-footer-button--next .icon-arrow-right,
.module-sequence-footer-button svg { display: none !important; }

/* B. Botons Secundaris SUPERIORS i VISTA ESTUDIANT */
.header-bar .btn:not(.add_module_link), 
.header-bar .al-trigger:not(.add_module_link),
.header-bar .ui-button, 
#publish_all_modules_button,
#choose_student_view_button, 
.button-student-view,
form[action*="student_view"] .btn, 
a.choose_student_view,
#modal-box .btn:not(.btn-primary):not(.ic-Login-confirmation__actions .btn),
.registration_page .btn:not(.btn-primary) {
  background-color: #fff !important;
  color: #c00000 !important;
  border: 1.5px solid #c00000 !important;
  border-radius: 12px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  text-decoration: none !important;
  vertical-align: top !important; 
  box-sizing: border-box !important;
  margin: 0 4px !important;
}

.header-bar .al-trigger:not(.add_module_link) {
  padding: 0 !important;
  width: 38px !important;
}

.header-bar .btn:not(.add_module_link):hover, 
.header-bar .al-trigger:not(.add_module_link):hover,
.header-bar .ui-button:hover,
#publish_all_modules_button:hover,
#choose_student_view_button:hover,
.button-student-view:hover,
form[action*="student_view"] .btn:hover,
a.choose_student_view:hover,
#modal-box .btn:not(.btn-primary):not(.ic-Login-confirmation__actions .btn):hover {
  background-color: #f9e5e5 !important;
  border-color: #9a0000 !important;
  color: #9a0000 !important;
}

.header-bar .btn:not(.add_module_link) i, 
.header-bar .al-trigger:not(.add_module_link) i,
.header-bar .ui-button i,
#publish_all_modules_button i,
#choose_student_view_button i,
.button-student-view i,
form[action*="student_view"] .btn i { color: #c00000 !important; }

/* C. Botons Secundaris LATERAL DRET */
#right-side .btn, 
#right-side .button-sidebar-wide {
  background-color: #fff !important;
  color: #c00000 !important;
  border: 1.5px solid #c00000 !important;
  border-radius: 12px !important;
  min-height: 44px !important;
  height: auto !important;
  width: 100% !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
  margin-bottom: 10px !important;
  box-shadow: none !important;
}

#right-side .btn:hover, 
#right-side .button-sidebar-wide:hover {
  background-color: #f9e5e5 !important;
  color: #9a0000 !important;
  border-color: #9a0000 !important;
}

#right-side .btn i, 
#right-side .button-sidebar-wide i {
  color: #c00000 !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
  font-size: 16px !important;
}

/* D. Botons de CONFIRMACIÓ (Login/Registre) */
.ic-Login-confirmation__actions {
  display: flex !important;
  gap: 15px !important;
  justify-content: flex-end !important;
}

.ic-Login-confirmation__actions .btn:first-child {
  background-color: #fff !important;
  color: #c00000 !important;
  border: 1.5px solid #c00000 !important;
  border-radius: 12px !important;
  min-height: 38px !important;
  padding: 8px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}
.ic-Login-confirmation__actions .btn:first-child:hover {
  background-color: #f9e5e5 !important;
  border-color: #9a0000 !important;
  color: #9a0000 !important;
}

.ic-Login-confirmation__actions .btn:last-child {
  background-color: #c00000 !important;
  color: #fff !important;
  border: 1.5px solid #c00000 !important;
  border-radius: 12px !important;
  min-height: 38px !important;
  padding: 8px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}
.ic-Login-confirmation__actions .btn:last-child:hover {
  background-color: #9a0000 !important;
  border-color: #9a0000 !important;
  color: #fff !important;
}

/* ----------------------------------------------------------
   3. VORES ARRODONIDES I MENÚS DESPLEGABLES
   ---------------------------------------------------------- */
.context_module {
  border-radius: 9pt !important;
  border: 1px solid #d0d0d0 !important;
  background-color: #fff !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
}

.context_module .content, ul.context_module_items {
  margin: 0 !important; padding: 0 !important;
}

.context_module .footer, .context_module .add_module_item_info, .context_module > div:last-child:empty {
  display: none !important; margin: 0 !important; padding: 0 !important;
}

.context_module .header, .context_module .module_header {
  margin: 0 !important; padding: 0 !important; background: none !important;
}

.context_module .ig-header {
  border-top-left-radius: 9pt !important;
  border-top-right-radius: 9pt !important;
  border-bottom: 1px solid #d0d0d0 !important;
  background-color: #f5f5f5 !important;
  margin: 0 !important;
}

.context_module_item, .ig-row {
  border-radius: 0 !important; margin: 0 !important; border-bottom: 1px solid #f0f0f0 !important;
}

ul.context_module_items > li.context_module_item:last-of-type .ig-row,
ul.context_module_items > li.context_module_item:last-child .ig-row {
  border-bottom-left-radius: 9pt !important;
  border-bottom-right-radius: 9pt !important;
  border-bottom: none !important; 
}

/* ----------------------------------------------------------
   4. COLOR HOVER ÍTEMS
   ---------------------------------------------------------- */
.ig-row:hover, .context_module_item:hover { background-color: #f9e5e5 !important; }

/* ----------------------------------------------------------
   5. BOTONS RODONS (ESTATS) I RESET DRAG
   ---------------------------------------------------------- */
.module_header_items .collapse_module_link,
.module_header_items .publish-icon,
.context_module_item .item-publish-icon {
  border-radius: 50% !important; border: 2px solid #c00000 !important; color: #c00000 !important;
  background: #fff !important; width: 28px !important; height: 28px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}

.ig-handle, .move_item_link { border: none !important; background: transparent !important; box-shadow: none !important; }

.ig-header-admin .al-trigger, .ig-header-admin .add_module_item_link,
.ig-header-admin .ui-button, .ig-header-admin .btn {
  background: transparent !important; border: none !important; border-radius: 0 !important;
  height: auto !important; min-height: auto !important; padding: 4px !important;
}

/* ----------------------------------------------------------
   6. RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .ic-app-footer::before, #footer::before {
    max-width: 90% !important; 
    height: 40px !important; 
    background-position: left center !important; 
  }
}

/* ----------------------------------------------------------
   7. PÀGINA D'INVITACIÓ I REGISTRE
   ---------------------------------------------------------- */
body.ic-Login-Body, 
body.register, 
body.unauthenticated {
  background-image: url("https://instructure-uploads-fra.s3.eu-central-1.amazonaws.com/account_293190000000000001/attachments/749/Fons-inici2%25402x.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-color: transparent !important;
}

body.ic-Login-Body #application, body.ic-Login-Body #wrapper, body.ic-Login-Body #main,
body.register #application, body.register #wrapper, body.register #main,
body.unauthenticated #application, body.unauthenticated #wrapper, body.unauthenticated #main {
  background: transparent !important;
}

.ic-Login-header__logo,
.ic-Login-confirmation__logo, 
#modal-box .header img,
#modal-box .header svg,
#modal-box .header h2,
.registration-logo {
  display: none !important;
  visibility: hidden !important;
}

.ic-Login-header,
#modal-box .header,
.ic-Login-confirmation__header {
  background-image: url("https://instructure-uploads-fra.s3.eu-central-1.amazonaws.com/account_293190000000000001/attachments/748/CiberAcade%25CC%2580mia-Horitzontal%25402x.png") !important;
  background-size: 260px auto !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-color: #fff !important; 
  border-bottom: 1px solid #d0d0d0 !important;
  min-height: 90px !important;
  padding: 0 !important;
  border-top-left-radius: 9pt !important;
  border-top-right-radius: 9pt !important;
}

/* --- 7.A: CAPSA DE LOGIN (LOGOS A FORA) --- */
.ic-Login__container {
  background-color: #fff !important; 
  border-radius: 9pt !important;
  position: relative !important;
  overflow: visible !important; 
  margin-bottom: 120px !important; 
  box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
  padding-bottom: 0 !important; 
}

/* --- 7.A.1: OCULTAR REGISTRE ESPECÍFIC (CANVAS) --- */
.ic-Login__container .ic-Login__signup-link,
.ic-Login__container .ic-Login-header__links,
.ic-Login-footer__links {
  display: none !important;
  visibility: hidden !important;
}

.ic-Login__container::after {
  content: "";
  display: block;
  position: absolute;
  top: 100%; 
  left: 50%;
  transform: translateX(-50%);
  width: 90vw;
  max-width: 800px; 
  height: 90px;     
  margin-top: 25px; 
  background-image: url("https://peninsula-innovation.s3.us-east-1.amazonaws.com/Ciber-logos-pc%402x.png"); 
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  pointer-events: none;
}

/* --- 7.B: CAPSA DE REGISTRE/INVITACIÓ (LOGOS A DINS) --- */
#modal-box, .ic-Login-confirmation {
  background-color: #fff !important; 
  border-radius: 9pt !important;
  position: relative !important;
  overflow: hidden !important; 
  padding-bottom: 90px !important; 
  margin-bottom: 40px !important; 
  box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

#modal-box::after, .ic-Login-confirmation::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0; 
  left: 0;
  width: 100%;
  height: 90px;   
  background-image: url("https://peninsula-innovation.s3.us-east-1.amazonaws.com/Ciber-logos-pc%402x.png"); 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-origin: content-box !important; 
  padding: 15px 30px !important; 
  box-sizing: border-box !important;
  border-top: 1px solid #f0f0f0 !important; 
  pointer-events: none;
}

/* ----------------------------------------------------------
   8. PERSONALITZACIÓ TEXT NOMÉS PÀGINA D'INSCRIPCIÓ CURS
   ---------------------------------------------------------- */

#modal-box #enroll_form p {
  position: relative !important;
  color: transparent !important; 
  font-size: 0 !important;       
  margin: 10px 0 25px 0 !important;
}

#modal-box #enroll_form p::after {
  content: "Benvingut/da a la Ciberacadèmia! 🚀 \A Per completar el teu registre, revisa el teu correu electrònic i segueix els passos per finalitzar la creació del teu compte. T'esperem a dins!";
  visibility: visible !important;
  display: block !important;
  color: #333 !important;        
  font-size: 16px !important;    
  line-height: 1.6 !important;
  white-space: pre-wrap !important; 
  text-align: left !important;
}

.ic-Self-enrollment-footer-modal-layout {
  margin-top: 20px !important;
  border-top: 1px solid #f0f0f0 !important;
  padding-top: 20px !important;
}