/* ICMAB-CSIC components — CSS only, mirrors the YOOtheme theme of dev-3.icmab.es (UIkit class in each comment) */

body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.ic-row { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; padding: var(--space-m); }
:focus { outline: 0; }
:focus-visible { outline: 2px dotted var(--ink-strong); outline-offset: 2px; }
::selection { background: var(--selection); color: var(--ink-strong); }
a, .ic-link { color: var(--link); text-decoration: none; }
a:hover, .ic-link:hover { color: var(--icmab-purple-hover); text-decoration: underline; }
.ic-h { font-family: var(--font-display); color: var(--ink-strong); margin: 0 0 var(--space-m); }

/* Button — .uk-button */
.ic-btn { display: inline-block; box-sizing: border-box; padding: 0 20px; font: inherit; font-size: 16px; line-height: 35px; text-align: center; text-decoration: none; border-radius: var(--radius-none); border: 1px solid transparent; cursor: pointer; transition: .1s ease-in-out; transition-property: color, background-color, border-color; }
.ic-btn:hover { text-decoration: none; }
.ic-btn--primary { background: var(--icmab-purple); color: var(--on-dark); }
.ic-btn--primary:hover { background: transparent; color: var(--icmab-purple); border-color: var(--icmab-purple); }
.ic-btn--primary:active { background: transparent; color: var(--icmab-purple-active); border-color: var(--icmab-purple-active); }
.ic-btn--default { background: transparent; color: var(--ink-strong); border-color: var(--line); }
.ic-btn--default:hover { color: var(--ink-strong); border-color: var(--secondary); }
.ic-btn--default:active { color: #6a7784; border-color: var(--secondary-tint); }
.ic-btn--secondary { background: var(--ink-deep); color: var(--on-dark); }
.ic-btn--secondary:hover { background: transparent; color: var(--logo-black); border-color: var(--logo-black); }
.ic-btn--text { padding: 0 27px 0 0; line-height: 1.5; background: none; border: 0; color: var(--ink-strong); position: relative; }
.ic-btn--text::after { content: "→"; position: absolute; right: 0; transition: right .2s ease-out; }
.ic-btn--text:hover { color: var(--ink-strong); }
.ic-btn--text:hover::after { right: -4px; }
.ic-btn--small { padding: 0 15px; line-height: 28px; font-size: 13px; }
.ic-btn--large { padding: 0 25px; line-height: 46px; font-size: 18px; }
.ic-btn:disabled { background: transparent; color: var(--ink-muted); border-color: var(--line); cursor: default; }
.ic-on-dark .ic-btn--default { color: var(--on-dark); border-color: rgba(255,255,255,.6); }

/* Card — .uk-card */
.ic-card { box-sizing: border-box; padding: var(--space-gutter-m); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-small); transition: box-shadow .1s ease-in-out, background-color .1s; }
.ic-card__title { font-family: var(--font-display); font-size: 26px; line-height: 1.2; font-weight: 600; color: var(--ink-strong); margin: 0 0 var(--space-m); }
.ic-card > :last-child { margin-bottom: 0; }
.ic-card--hover:hover { box-shadow: var(--shadow-large); }
.ic-card--primary { background: var(--icmab-purple); color: var(--on-dark); }
.ic-card--primary .ic-card__title { color: var(--on-dark); }
.ic-card--primary.ic-card--hover:hover { background: #3e3c6a; }
.ic-card--secondary { background: var(--secondary); color: var(--on-dark); }
.ic-card--secondary .ic-card__title { color: var(--on-dark); }
.ic-card--secondary.ic-card--hover:hover { background: var(--secondary-hover); }

/* Section — .uk-section-* */
.ic-section { padding: var(--space-l) var(--space-gutter-l); }
.ic-section--default { background: var(--surface); }
.ic-section--muted { background: var(--surface-white); }
.ic-section--primary { background: var(--icmab-purple); color: var(--on-dark); }
.ic-section--secondary { background: var(--secondary); color: var(--on-dark); }
.ic-section--primary .ic-h, .ic-section--secondary .ic-h { color: var(--on-dark); }
.ic-section--large { padding-top: var(--section-large); padding-bottom: var(--section-large); }

/* Label & badge — .uk-label / .uk-badge */
.ic-label { display: inline-block; padding: 1px 9px; background: var(--icmab-purple); color: var(--on-dark); font-size: 14px; line-height: 1.5; border-radius: var(--radius-sm); white-space: nowrap; }
.ic-label--success { background: var(--success); }
.ic-label--warning { background: var(--warning); }
.ic-label--danger { background: var(--danger); }
.ic-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--icmab-purple); color: var(--on-dark); font-size: 12px; font-weight: 600; }

/* Form input — .uk-input */
.ic-input { box-sizing: border-box; width: 100%; height: var(--control-height); padding: 0 10px; font: inherit; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .2s ease-in-out; }
.ic-input:focus { outline: 0; border-color: var(--secondary); }
.ic-input::placeholder { color: var(--ink-muted); }

/* Alert — .uk-alert */
.ic-alert { position: relative; padding: 15px 29px 15px 15px; background: var(--surface-muted); color: var(--ink-strong); }
.ic-alert--primary { background: var(--highlight); color: var(--logo-black); }

/* Navbar — .uk-navbar */
.ic-navbar { display: flex; align-items: stretch; gap: 40px; padding: 0 var(--space-gutter-l); background: var(--surface); min-height: var(--navbar-height); }
.ic-navbar__item { position: relative; display: flex; align-items: center; color: var(--ink-strong); font-size: 18px; font-weight: 600; text-decoration: none; }
.ic-navbar__item::before { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 0; background: var(--icmab-purple); transition: height .1s ease-in-out; }
.ic-navbar__item:hover, .ic-navbar__item[aria-current] { color: rgba(56,54,96,.75); text-decoration: none; }
.ic-navbar__item:hover::before, .ic-navbar__item[aria-current]::before { height: 2px; }
.ic-dropdown { width: 250px; box-sizing: border-box; padding: 30px; color: var(--on-dark); background: linear-gradient(180deg, var(--dropdown-top) 0, var(--dropdown-bottom) 100%); box-shadow: var(--shadow-dropdown); border-top: 1px solid rgba(255,255,255,.08); }
.ic-dropdown a { display: block; color: rgba(255,255,255,.9); padding: 5px 0; }
.ic-dropdown a:hover { color: #fff; }

/* Subnav pill — .uk-subnav-pill */
.ic-pills { display: flex; flex-wrap: wrap; gap: 15px; list-style: none; margin: 0; padding: 0; }
.ic-pill { display: inline-block; padding: 5px 15px; color: var(--ink-strong); border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; }
.ic-pill:hover { color: #1a1d21; border-color: rgba(49,55,61,.7); text-decoration: none; }
.ic-pill[aria-current] { color: var(--icmab-purple); border-color: var(--icmab-purple); }

/* Pagination — .uk-pagination */
.ic-pagination { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.ic-pagination a, .ic-pagination span { color: var(--ink-muted); padding: 0 2px; border-bottom: 1px solid transparent; text-decoration: none; }
.ic-pagination a:hover { color: var(--ink); }
.ic-pagination [aria-current] { color: var(--ink-strong); border-bottom-color: var(--ink-strong); }

/* Dot nav — .uk-dotnav */
.ic-dotnav { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
.ic-dotnav button { width: 10px; height: 10px; padding: 0; border-radius: 50%; background: transparent; border: 1px solid var(--icmab-purple-muted); cursor: pointer; }
.ic-dotnav button:hover { border-color: var(--secondary); }
.ic-dotnav button[aria-current] { background: var(--secondary); border-color: transparent; }

/* Table — .uk-table */
.ic-table { width: 100%; border-collapse: collapse; }
.ic-table th { padding: 16px 12px; text-align: left; vertical-align: bottom; font-size: 12px; font-weight: 600; color: var(--ink-strong); text-transform: uppercase; letter-spacing: 1px; }
.ic-table td { padding: 16px 12px; vertical-align: top; border-top: 1px solid var(--line); }

/* Guide title — style guide / slides heading */
.ic-guide-title { display: flex; align-items: center; gap: 48px; font-family: var(--font-guide); font-weight: 700; text-transform: uppercase; color: var(--icmab-purple); line-height: 1.1; margin: 0; }
.ic-guide-title::after { content: ""; flex: 1; height: 3px; background: var(--guide-rule); }