/* ── 1. Header — white institutional banner header ───────────── */


.event-title{
	color: #CA9E53 !important;
}

.page-header {
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.middle{
	background-color: #ececec;

}
.custom-header-banner {
  display: grid;
	  grid-template-columns: 0.45fr auto 1fr;  /* spacer | logos | session bar */
	  align-items: center;
	  width: 100%;
	  height: auto;                       /* ← banner height */
	  background-image: url('/static/custom/files/header.png');
	  background-size: cover;
	  background-position: left center;
	  background-repeat: no-repeat;
	}

	/* Logos — center column */
	.custom-header-left {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 1em;    
}

.custom-header-logo-left {
  height: 100px;                       
  width: auto;
}

.custom-header-logo-right {
  height: 50px;                         
  width: auto;
}

/* Session bar — right column, flush right */
.custom-header-right {
  grid-column: 3;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2.5em;                         
  padding-right: 1.5em;             
}

/* Third logo — sits left of the session bar */
.custom-header-logo-extra {
  height: 80px;                  
  width: auto;
}

/* Session bar container */
.custom-header-session-wrap {
  display: flex;
  align-items: center;
  background: transparent;
}

#session-bar {
  background: transparent;
  border: none;
  padding: 0.25em 0.5em;
  font-size: 1rem;
}

#session-bar .toolbar .group {
  gap: 0.6em !important;
}

#session-bar .i-button {
  padding: 0.5em 0.9em !important;
}

#session-bar .i-button::before,
#session-bar .i-button::after {
  display: none !important;
}

.session-bar,
.session-bar *,
.settingsWidgetSection a {
  color: #666666 !important;
}

.page-header .i-button {
  color: #666666 !important;
  border-color: #c6c6c6 !important;
  background: #ececec !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

.page-header .i-button:hover {
  background: #d8d8d8 !important;
  border-color: #aaaaaa !important;
  color: #444444 !important;
}

.page-header .i-button.highlight {
  background: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.page-header .i-button.highlight:hover {
  background: var(--accent-secondary-color) !important;
  border-color: var(--accent-secondary-color) !important;
}

#global-menu {
  border-bottom: 3px solid var(--accent-color) !important;
  box-shadow: none !important;
  padding-left: 7em;
  gap: 1em;
}

@media (max-width: 1340px) {
  #global-menu {
    padding-left: 1.5em;
  }
}

#global-menu li :is(a, button) {
  transition: background 0.15s ease, color 0.15s ease !important;
  border-radius: 0 !important;
}


/* ── 2. Main page ────────────────────────────────────────────── */

body {
  background-color: #ffffff !important;
}

main.main,
main.main > div,
.category-container,
.category-content-wrapper,
.category-content,
.category-sidebar {
  background-color: #ffffff !important;
}

.category-container {
  padding-bottom: 8em !important;
}

.main-breadcrumb {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

.category-content-wrapper {
  padding-top: 0 !important;
}

.custom-main-banner {
  text-align: center;
  line-height: 0;
  margin: 0 auto 2em auto;
}

.custom-main-banner-img {
  display: inline-block;
  width: 100%;
  max-width: 1000px;
  height: auto;
}

.custom-welcome-title {
  font-family: 'Varela Round', sans-serif;
  color: #bd9159;
  font-size: 2.5rem;
  margin-bottom: 0.5em;
}


/* ── 3. Root-category calendar icon → calendario.png ────────── */

.category-container:has(.custom-main-banner) .event-list h3 {
  color: #bd9159;
  border-bottom: 1px solid #CA9E52;
}

.category-container:has(.custom-main-banner) .event-list h3.current-month {
  border-bottom: 1px solid #CA9E52;
}

.category-container:has(.custom-main-banner) .event-list h3.current-month span {
  color: #bd9159;
  background-color: transparent;
  border-bottom: none;
}

.category-container:has(.custom-main-banner) .event-list li {
  align-items: flex-start;
}

.category-container:has(.custom-main-banner) .event-list li .list-name {
  flex-direction: column;
  align-items: flex-start;
}

.category-container:has(.custom-main-banner) .event-list li .date {
  margin-right: 0;
  margin-bottom: 0.15em;
  padding-left: 0;
  padding-right: 0;
}

.category-container:has(.custom-main-banner) .event-icons {
  margin-right: 2em;
}

.category-container:has(.custom-main-banner) a.icon-calendar::before {
  content: '' !important;
  display: inline-block;
  width: 4.2rem;
  height: 4.2rem;
  background-image: url('/static/custom/files/calendario.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

/* ── 4. Labels ───────────────────────────────────────────────── */

.ui.blue.label,
.ui.blue.labels .label {
  background-color: #bd9159 !important;
  border-color: #bd9159 !important;
  color: #ffffff !important;
}

.ui.mini.blue.label {
  border-radius: 9999px 0 0 9999px !important;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    calc(100% - 10px) 50%,
    100% 100%,
    0% 100%
  ) !important;
  padding-right: 16px !important;
}

/* ── 4. Footer — centered white footer ───────────────────────── */

.footer {
  padding: 0 0 1.5em !important;
  background: none;
  margin-top: 2.5em !important;
  box-shadow: none !important;
}


.custom-footer-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5em;
  max-width: 1200px;
  margin: 0 auto;
}


/* antonriva para ver hasta where se extiende el footer */
.custom-footer-logo-img {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
}



/* ── 5. Cards & Boxes — depth and roundness ─────────────────── */

.i-box {
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(82, 104, 85, 0.1), 0 0 0 1px rgba(202, 158, 82, 0.08) !important;
  transition: box-shadow 0.2s ease !important;
  overflow: hidden;
}

.i-box:hover {
  box-shadow: 0 6px 20px rgba(82, 104, 85, 0.15), 0 0 0 1px rgba(202, 158, 82, 0.12) !important;
}

.i-box-header {
  padding: 0.85em 1.1em !important;
}

.dashboard-box {
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(82, 104, 85, 0.1) !important;
  transition: box-shadow 0.2s ease !important;
}

.dashboard-box:hover {
  box-shadow: 0 6px 20px rgba(82, 104, 85, 0.15) !important;
}

.category-content {
  border-radius: 8px !important;
}


/* ── 4. Buttons — transitions and roundness ─────────────────── */

.i-button {
  border-radius: 6px !important;
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

.i-button.highlight:not(.label):not(.borderless):not(.text-color) {
  box-shadow: 0 2px 8px rgba(82, 104, 85, 0.3) !important;
}

.i-button.highlight:not(.label):not(.borderless):not(.text-color):hover {
  box-shadow: 0 4px 14px rgba(82, 104, 85, 0.4) !important;
  transform: translateY(-1px);
}

.i-button.accept:not(.label):not(.borderless):not(.text-color):hover {
  box-shadow: 0 4px 14px rgba(82, 104, 85, 0.4) !important;
  transform: translateY(-1px);
}

.ui.button,
.ui.primary.button {
  border-radius: 6px !important;
  transition: background 0.15s ease, box-shadow 0.15s ease !important;
}


/* ── 5. Forms — focus with institutional gold ────────────────── */

input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='url'],
select,
textarea {
  border-radius: 5px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  font-family: 'Poppins', sans-serif !important;
}

input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='number']:focus,
select:focus,
textarea:focus {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 3px rgba(202, 158, 82, 0.2) !important;
  outline: none !important;
}


/* ── 6. Tables — cleaner rows ────────────────────────────────── */

table th {
  letter-spacing: 0.04em !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
}

table tr {
  transition: background 0.12s ease;
}


/* ── 7. Contribution rows ────────────────────────────────────── */

.contribution-list .contribution-row,
.track-review-list .track-review-row {
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  border-radius: 0 6px 6px 0 !important;
  margin-bottom: 0.4em;
}


/* ── 8. Announcements ────────────────────────────────────────── */

div.announcement-bar {
  border-radius: 0;
  padding: 0.7em 2em;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
}


/* ── 9. Breadcrumb ───────────────────────────────────────────── */

nav.main-breadcrumb {
  padding: 0.5em 2em;
  font-size: 0.85rem;
}


/* ── 10. Category header alignment ──────────────────────────── */

.category-title,
#category-toolbar {
  padding-left: 14em;
}

@media (max-width: 1527px) {
  .category-title,
  #category-toolbar {
    padding-left: 0;
  }
}


/* ── 11. Responsive — header logos ──────────────────────────── */

@media (max-width: 1024px) {
  .custom-header-logo-left  { height: 80px; }   /* ← escudo size at medium screens */
  .custom-header-logo-right { height: 50px; }   /* ← ciencia size at medium screens */
  .custom-header-logo-extra { height: 64px; }   /* ← extra logo size at medium screens */
  .custom-header-left       { padding-left: 1em; gap: 0.75em; }
  .custom-header-right      { gap: 1.5em; }     /* ← shrink extra-logo/session-bar gap at medium screens */
}

@media (max-width: 768px) {
  .custom-header-logo-left  { height: 60px; }   /* ← escudo size at tablet */
  .custom-header-logo-right { height: 38px; }   /* ← ciencia size at tablet */
  .custom-header-logo-extra { height: 48px; }   /* ← extra logo size at tablet */
  .custom-header-left       { padding-left: 0.75em; gap: 0.5em; }
  .custom-header-right      { gap: 1em; }        /* ← shrink extra-logo/session-bar gap at tablet */
}

@media (max-width: 480px) {
  .custom-header-logo-left  { height: 44px; }   /* ← escudo size at mobile */
  .custom-header-logo-right { height: 36px; }   /* ← ciencia size at mobile */
  .custom-header-logo-extra { height: 36px; }   /* ← extra logo size at mobile */
  .custom-header-left       { padding-left: 0.5em; gap: 0.4em; }
  .custom-header-right      { gap: 0.6em; }      /* ← shrink extra-logo/session-bar gap at mobile */
  .custom-header-banner     { height: 100px; }  /* ← shrink banner height on mobile */
}

@media (max-width: 380px) {
  .custom-header-logo-extra { display: none; }  /* ← hide extra logo on very narrow screens to avoid crowding the session bar */
}


/* ── 12. Responsive — mobile ─────────────────────────────────── */

@media (max-width: 900px) {
  #global-menu {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #global-menu::-webkit-scrollbar {
    display: none;
  }

  #global-menu > menu {
    flex-wrap: nowrap;
    white-space: nowrap;
  }


  .footer {
    padding: 2em 1.25em 1.25em !important;
  }

  .custom-footer-logo-img {
    max-width: 2000px;
  }

  nav.main-breadcrumb {
    padding: 0.5em 1.25em;
  }
}

@media (max-width: 480px) {
  .custom-header-session-wrap {
    padding: 0.5em 0.6em;
  }

  #session-bar {
    font-size: 0.85em;
  }

  .i-box {
    border-radius: 6px !important;
  }
}


/* ── 14. Legacy conference theme (confheader/conf_leftMenu) ──── */
/* These pages use their own --conf-theme-* variables, separate
   from the --accent-color set in 1-theme.css, so they need their
   own override block. */

:root {
  --conf-theme-header-bg: #526855;
  --conf-theme-header-border-bottom: #3f4f42;
  --conf-theme-header-text: #ffffff;

  --conf-theme-subtitle-bg: #F7F9FD;
  --conf-theme-subtitle-border: #e0e4f0;
  --conf-theme-subtitle-text: #272525;

  --conf-theme-menu-bg: #F7F9FD;
  --conf-theme-menu-border: #e0e4f0;
  --conf-theme-menu-link: #526855;
  --conf-theme-menu-selected: #A15C17;
  --conf-theme-menu-selected-bg: #eef3ff;
  --conf-theme-menu-selected-border: #CA9E52;
  --conf-theme-hover-bg: #eef3ff;
  --conf-theme-hover-color: #A15C17;

  --conf-theme-support-bg: #F7F9FD;
  --conf-theme-support-border: #e0e4f0;
  --conf-theme-support-header-bg: #526855;
  --conf-theme-support-header-text: #ffffff;
  --conf-theme-support-text: #4d4d4d;

  --conf-theme-announcement-bg: #eef3ff;
  --conf-theme-announcement-border: #CA9E52;
  --conf-theme-announcement-text: #272525;
}

div.datePlace > div.timezone {
  color: #ffffff !important;
}

/* ── 15. Remaining _palette.scss blues → institutional gold ───── */

.meeting-header h1,
.error-box h1,
.confirmation-dialog > h3.highlight,
.qtip-default.qtip-popup a,
.qtip-default.add-field-qtip a,
.qtip-default.informational a,
.qtip-default.qbubble a,
.categorynav .category-list a,
.form-group .dropzone.thin .dz-remove,
#email-template-manager .email-template-wrapper .email-preview-btn,
.menu-entries > li > .menu-entry > .i-label.highlight > .actions > *:hover,
ul.sectionPopupList li a:hover,
ul.material_list a,
ul.steps li.completed .text,
.side-menu ul.menu-items > li.active a.title,
.side-menu ul.menu-items > li:not(.active) a.title:hover {
  color: #CA9E52 !important;
}

.i-box .i-box-header .i-box-title,
.review-item-content .i-box-header .i-box-title,
.regform-section .i-box-header .i-box-title,
.regform-done .i-box-header .i-box-title,
.regform-section-sortable-placeholder .i-box-header .i-box-title,
.categorynav .category-list .i-box-header .i-box-title,
.i-timeline-item .i-timeline-item-box .i-box-header .i-box-title {
  color: #526855 !important;
}

ul.menu-items li.active::before,
.categorynav .category-list .item:hover::before,
.categorynav .category-list .item.current-category::before {
  border-left-color: #CA9E52 !important;
}

.corner-message.highlight {
  border-color: #CA9E52 !important;
  background-color: #f5ead7 !important;
}

ul.steps li.completed .circle::before,
ul.steps li.completed .horizontal-line,
ul.steps li.current .horizontal-line {
  background-color: #CA9E52 !important;
}

ul.steps li.completed .circle::before,
ul.steps li.current .circle::before,
.i-spinner::after {
  border-color: #CA9E52 transparent transparent !important;
}

.i-badge {
  background-color: #CA9E52 !important;
}

.i-badge:not(.i-badge-disabled):hover {
  background-color: #A15C17 !important;
}

.permissions-widget .permissions-widget-list .permissions-box ul li.permission-event-registration,
.permissions-widget .permissions-widget-list .permissions-box ul li.permission-session-coordinate {
  background-color: #CA9E52 !important;
  border-color: #A15C17 !important;
}

.permissions-dialog .permissions .circle-checkbox:checked + label::before,
.permissions-dialog .permissions .circle-checkbox:checked ~ ul label::before,
.permissions-dialog .permissions .circle-checkbox:checked ~ ul .circle-checkbox:hover + label::before {
  background-color: #f5ead7 !important;
  border-color: #A15C17 !important;
}

.i-selection input[type='checkbox']:checked + label:not(.label):not(.borderless):not(.text-color),
.i-selection input[type='radio']:checked + label:not(.label):not(.borderless):not(.text-color) {
  background: #CA9E52 !important;
  border-color: #A15C17 !important;
  color: #ffffff !important;
}

.i-selection input[type='checkbox']:checked + label:not(.label):not(.borderless):not(.text-color):hover,
.i-selection input[type='checkbox']:checked + label:not(.label):not(.borderless):not(.text-color):active,
.i-selection input[type='radio']:checked + label:not(.label):not(.borderless):not(.text-color):hover,
.i-selection input[type='radio']:checked + label:not(.label):not(.borderless):not(.text-color):active {
  background: #A15C17 !important;
  border-color: #A15C17 !important;
  color: #ffffff !important;
}

.i-label.highlight.striped,
.i-selection input[type='checkbox']:checked + label.striped,
.i-selection input[type='radio']:checked + label.striped {
  background: repeating-linear-gradient(-40deg, #CA9E52, #CA9E52 10px, #e0bd84 10px, #e0bd84 20px) !important;
}

/* _actionboxes.scss .action-box.highlight (blue informational box) */
.action-box.highlight {
  border-color: #CA9E52 !important;
  background: #f5ead7 !important;
}

.action-box.highlight .section:not(.highlight):not(.warning):not(.danger):not(.disabled):not(.accept):not(.plain) > .icon,
.action-box.highlight .section:not(.highlight):not(.warning):not(.danger):not(.disabled):not(.accept):not(.plain) .text .label,
.action-box.highlight .section:not(.highlight):not(.warning):not(.danger):not(.disabled):not(.accept):not(.plain) > .sui-icon-wrapper {
  color: #CA9E52 !important;
}

.semantic-text.highlight,
.semantic-text.action-button,
.categorynav .category-list .item .button-wrapper .semantic-text.action-button {
  color: #CA9E52 !important;
}

.semantic-background.highlight,
.semantic-background.action-button,
.categorynav .category-list .item .button-wrapper .semantic-background.action-button {
  border-color: #CA9E52 !important;
  background: #CA9E52 !important;
}

span.badge {
  background: #CA9E52 !important;
}

/* ── 16. Hide session-bar / event-menu items (temporary) ──────── */

#tz-selector-link {
  display: none !important;
}

#protection-details-link {
  display: none !important;
}

#language-list li:not(:has(button[lang^='es'])) {
  display: none !important;
}

button.js-dropdown[title='Cambiar tema'] {
  display: none !important;
}

#outer li.menuConfTitle:has(a[href$='/timetable/']) {
  display: none !important;
}

/* ── 13. Login page ──────────────────────────────────────────── */

.login-page .header-logo {
}

.login-page .i-button{
	color: #ffffff !important;
	background-color: #CA9E52 !important;
}

.login-page .middle {
  vertical-align: top;
  padding-top: 6vh;
}



.login-page .middle .centered-column-wrapper .footer {
  position: relative !important;
  bottom: auto !important;
  width: min(85vw, 2000px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-top: 2em;
}

@media (max-width: 600px) {
  .login-page .middle {
    padding-top: 3vh;
  }

  .login-page .middle .centered-column-wrapper .footer {
    width: 96vw !important;
  }
}