/* ===== MCC Careers Styles v1.1.3 ===== */
:root{
  --mcc-card-bg: #0b0b0b;
  --mcc-card-border: rgba(255,255,255,.12);
  --mcc-title: #ffffff;
  --mcc-subtitle: #d1d5db;
  --mcc-chip-bg: rgba(255,255,255,.06);
  --mcc-chip-border: rgba(255,255,255,.18);
  --mcc-chip-text: #e5e7eb;
  --mcc-filters-bg: #0a0a0a;
  --mcc-filters-border: rgba(255,255,255,.08);
  --mcc-input-bg: #0f0f0f;
  --mcc-input-border: rgba(255,255,255,.12);
  --mcc-btn-apply-bg: #111111;
  --mcc-btn-apply-text: #ffffff;
  --mcc-btn-spont-bg: #1b1b1b;
  --mcc-btn-spont-text: #ffffff;
  --mcc-badge-bg: #ef4444;
}

/* Intro */
.mcc-intro {margin-bottom: 24px}
.mcc-intro h1 {color: var(--mcc-title); font-size: clamp(28px, 4vw, 40px); margin: 0 0 8px}
.mcc-intro p {opacity: .9; line-height: 1.6}

/* Filtros */
.mcc-filters {position: sticky; top: 0; z-index: 5; background: var(--mcc-filters-bg); padding: 12px; border-radius: 12px; margin: 12px 0; border: 1px solid var(--mcc-filters-border)}
.mcc-filters-row {display: grid; gap: 10px; grid-template-columns: 1fr 1fr 1fr 1fr auto auto; align-items: stretch}
.mcc-filters input, .mcc-filters select {padding: 12px; border-radius: 10px; border: 1px solid var(--mcc-input-border); background: var(--mcc-input-bg); color: inherit; width: 100%; box-sizing: border-box}
.mcc-status {display:flex; align-items:center; gap:12px; padding:8px; border-radius:10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08)}
.mcc-status label {display:flex; gap:6px; align-items:center; font-size:14px}

/* Share button */
.mcc-card-actions{ padding: 0 16px 16px; display:flex; justify-content:flex-end }
.mcc-btn-share{ gap:8px; background: transparent; color: var(--mcc-title); border-color: rgba(255,255,255,.18) }
.mcc-btn-share:hover{ filter: brightness(1.15) }
.mcc-icon-share{ display:inline-block; width:18px; height:18px; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a3.27 3.27 0 0 0 0-1.39l7.05-4.11A2.99 2.99 0 1 0 15 5a3 3 0 0 0 .05.52L8 9.63a3 3 0 1 0 0 4.74l7.05 4.11c-.03.17-.05.35-.05.52a3 3 0 1 0 3-3.92z"/></svg>') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a3.27 3.27 0 0 0 0-1.39l7.05-4.11A2.99 2.99 0 1 0 15 5a3 3 0 0 0 .05.52L8 9.63a3 3 0 1 0 0 4.74l7.05 4.11c-.03.17-.05.35-.05.52a3 3 0 1 0 3-3.92z"/></svg>') center / contain no-repeat }

.mcc-btn {padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); text-decoration: none; display:inline-flex; align-items:center; justify-content:center; cursor: pointer}
.mcc-btn-apply {background: var(--mcc-btn-apply-bg); color: var(--mcc-btn-apply-text)}
.mcc-btn-spontaneous {background: var(--mcc-btn-spont-bg); color: var(--mcc-btn-spont-text)}
.mcc-covered-note {margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.08)}

.mcc-btn-icon {width: 44px; height: 44px; padding: 0}
.mcc-icon-search {display:inline-block; width: 20px; height: 20px; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="black"><path stroke-width="2" d="M21 21l-4.3-4.3M16.7 10.7a6 6 0 1 1-12 0 6 6 0 0 1 12 0z"/></svg>') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="black"><path stroke-width="2" d="M21 21l-4.3-4.3M16.7 10.7a6 6 0 1 1-12 0 6 6 0 0 1 12 0z"/></svg>') center / contain no-repeat}

/* Listado */
.mcc-list {display:grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr))}
.mcc-card {position: relative; border: 1px solid var(--mcc-card-border); border-radius: 16px; overflow: hidden; background: var(--mcc-card-bg); transition: .25s transform ease, .25s border-color ease}
.mcc-card:hover {transform: translateY(-2px); border-color: rgba(255,255,255,.25)}
.mcc-card.cubierto {opacity: .55}
.mcc-card .mcc-badge-covered {position: absolute; top: 10px; right: 10px; background: var(--mcc-badge-bg); color: #fff; font-weight: 700; padding: 2px 8px; border-radius: 999px; font-size: 12px}
.mcc-card-link {display:block; padding: 16px}
.mcc-card-title {margin:0 0 4px; color: var(--mcc-title); font-size: clamp(18px, 2vw, 22px)}
.mcc-card-subtitle {margin:0 0 12px; color: var(--mcc-subtitle)}
.mcc-card-tags {display:flex; flex-wrap:wrap; gap:8px}
.mcc-chip {padding: 6px 10px; background: var(--mcc-chip-bg); border: 1px solid var(--mcc-chip-border); border-radius: 999px; font-size: 12px; color: var(--mcc-chip-text)}

/* Single */
.mcc-single-top {margin: 12px 0 16px}
.mcc-subtitle {margin: 0 0 8px; color: var(--mcc-subtitle)}
.mcc-chips {display:flex; flex-wrap:wrap; gap:8px}

/* Layout */
.mcc-list.layout-grid {display:grid}
.mcc-list.layout-list {display:flex; flex-direction: column; gap: 14px}
.mcc-list.layout-list .mcc-card-link{display:flex; gap: 16px; align-items: center; justify-content: space-between}
.mcc-list.layout-list .mcc-card-header{flex:1}
.mcc-list.layout-list .mcc-card-tags{flex-shrink:0; display:flex; gap:8px; flex-wrap: wrap; justify-content: flex-end; max-width: 40%}

/* Responsive móvil: filtros NO sticky */
@media (max-width: 768px){
  .mcc-filters {position: static; top: auto}
  .mcc-filters {padding: 12px}
  .mcc-filters-row {grid-template-columns: 1fr; gap: 8px}
  .mcc-status {order: 5}
  #mcc-filter-btn {order: 6; width: 100%}
  .mcc-btn-icon {width: 100%; height: 48px}
  .mcc-list {grid-template-columns: 1fr}
  .mcc-list.layout-list .mcc-card-link{flex-direction: column; align-items: flex-start}
  .mcc-list.layout-list .mcc-card-tags{max-width: 100%; justify-content: flex-start}
}
.mcc-empty {opacity: .8}