.cf-absence-types { background: #fff; }
.cf-absence-type { position: relative; height: 100%; padding: 1.7rem; border: 1px solid var(--cf-line); border-radius: 20px; background: #fff; }
.cf-absence-type > span { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 1.2rem; border-radius: 14px; background: #ffe9e7; color: #c75b55; font-size: 1.05rem; font-weight: 900; }
.cf-absence-type h3 { font-size: 1.2rem; }
.cf-absence-type p { color: var(--cf-muted); font-size: .9rem; }
.cf-absence-type small { display: block; padding-top: .75rem; border-top: 1px solid var(--cf-line); color: #899aa6; font-size: .7rem; }

.cf-absence-register { background: var(--cf-bg); }
.cf-absence-steps { margin-top: 1.5rem; }
.cf-absence-steps > div { display: flex; gap: .8rem; padding: .8rem 0; border-top: 1px solid var(--cf-line); }
.cf-absence-steps > div > span { flex: 0 0 30px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #def7f5; color: var(--cf-cyan-dark); font-size: .62rem; font-weight: 900; }
.cf-absence-steps p { margin: 0; }
.cf-absence-steps strong,
.cf-absence-steps small { display: block; }
.cf-absence-steps small { color: var(--cf-muted); font-size: .72rem; }
.cf-absence-form { padding: 1.25rem; border: 1px solid #dce7ec; border-radius: 20px; background: #fff; box-shadow: var(--cf-shadow); }
.cf-absence-form__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.cf-absence-form__head small,
.cf-absence-form__head strong { display: block; }
.cf-absence-form__head small { color: var(--cf-muted); font-size: .65rem; }
.cf-absence-form__head > span { padding: .4rem .6rem; border-radius: 8px; background: #e3f1ff; color: #3a78bd; font-size: .64rem; font-weight: 900; }
.cf-absence-student { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; padding: .85rem; border-radius: 12px; background: #f5f8fa; }
.cf-absence-student > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #e3f1ff; color: #3a78bd; font-size: .68rem; font-style: normal; font-weight: 900; }
.cf-absence-student p { flex: 1; margin: 0; }
.cf-absence-student strong,
.cf-absence-student small { display: block; }
.cf-absence-student small { color: var(--cf-muted); font-size: .64rem; }
.cf-absence-student b { color: var(--cf-cyan-dark); font-size: .65rem; }
.cf-absence-form label { display: block; margin-bottom: .35rem; color: var(--cf-muted); font-size: .65rem; font-weight: 800; }
.cf-absence-input { padding: .7rem; border: 1px solid var(--cf-line); border-radius: 9px; background: #fff; font-size: .75rem; }
.cf-absence-options { display: flex; gap: .5rem; }
.cf-absence-options span { flex: 1; padding: .65rem; border: 1px solid var(--cf-line); border-radius: 9px; color: var(--cf-muted); font-size: .68rem; text-align: center; }
.cf-absence-options span.active { border-color: var(--cf-cyan); background: #def7f5; color: var(--cf-cyan-dark); font-weight: 900; }
.cf-absence-form__actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--cf-line); }
.cf-absence-form__actions small { max-width: 250px; color: var(--cf-muted); font-size: .62rem; }
.cf-absence-form__actions button { padding: .65rem .85rem; border: 0; border-radius: 9px; background: var(--cf-navy); color: #fff; font-size: .68rem; font-weight: 900; }

.cf-absence-overview { background: #fff; }
.cf-absence-list { overflow: hidden; border: 1px solid #dce7ec; border-radius: 20px; background: #fff; box-shadow: var(--cf-shadow); }
.cf-absence-list__head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem; }
.cf-absence-list__head small,
.cf-absence-list__head strong { display: block; }
.cf-absence-list__head small { color: var(--cf-muted); font-size: .64rem; }
.cf-absence-list__head button { padding: .55rem .7rem; border: 0; border-radius: 8px; background: var(--cf-cyan); color: var(--cf-navy); font-size: .65rem; font-weight: 900; }
.cf-absence-list__filters { display: flex; gap: .45rem; padding: .8rem 1rem; background: #f5f8fa; }
.cf-absence-list__filters span { padding: .38rem .55rem; border-radius: 7px; background: #fff; color: var(--cf-muted); font-size: .61rem; }
.cf-absence-list__filters span.active { background: var(--cf-navy); color: #fff; }
.cf-absence-list__row { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-top: 1px solid #edf1f3; }
.cf-absence-list__row > i { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; background: #e3f1ff; color: #3a78bd; font-size: .68rem; font-style: normal; font-weight: 900; }
.cf-absence-list__row p { flex: 1; margin: 0; }
.cf-absence-list__row strong,
.cf-absence-list__row small { display: block; }
.cf-absence-list__row small { color: var(--cf-muted); font-size: .62rem; }
.cf-absence-list__row > span { padding: .35rem .5rem; border-radius: 7px; font-size: .6rem; font-weight: 900; }
.cf-absence-list__row > span.confirmed { background: #e8f8f2; color: #239b75; }
.cf-absence-list__row > span.period { background: #e3f1ff; color: #3a78bd; }
.cf-absence-list__row > span.review { background: #fff2d7; color: #9d6b11; }
.cf-absence-list__footer { display: flex; justify-content: space-between; padding: .8rem 1rem; background: var(--cf-navy); color: #9eb2c1; font-size: .63rem; }
.cf-absence-list__footer b { color: var(--cf-cyan); }

.cf-absence-effects { background: linear-gradient(135deg, #071b2f, #113b5d); color: #fff; }
.cf-absence-effects h2,
.cf-absence-effects h3 { color: #fff; }
.cf-absence-effects .cf-section-heading { max-width: 800px; }
.cf-absence-effects .cf-section-heading p { color: #b4c7d4; }
.cf-absence-effects .cf-kicker { color: var(--cf-cyan); }
.cf-absence-effects article { height: 100%; padding: 1.4rem; border: 1px solid rgba(255, 255, 255, .11); border-radius: 17px; background: rgba(255, 255, 255, .055); }
.cf-absence-effects article > span { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 1rem; border-radius: 11px; background: rgba(36, 211, 197, .13); color: var(--cf-cyan); font-weight: 900; }
.cf-absence-effects article h3 { font-size: 1rem; }
.cf-absence-effects article p { margin: 0; color: #9fb4c3; font-size: .82rem; }

.cf-absence-boundary { background: #f7fafb; }
.cf-absence-boundary-list { padding: 1.25rem; border: 1px solid var(--cf-line); border-radius: 18px; background: #fff; }
.cf-absence-boundary-list > div { display: flex; align-items: center; gap: .75rem; padding: .8rem; border-bottom: 1px solid var(--cf-line); }
.cf-absence-boundary-list > div:last-child { border: 0; }
.cf-absence-boundary-list span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #def7f5; color: var(--cf-cyan-dark); font-size: .7rem; font-weight: 900; }
.cf-absence-boundary-list .muted { color: var(--cf-muted); }
.cf-absence-boundary-list .muted span { background: #edf1f3; color: #899aa6; }

@media (max-width: 767.98px) {
  .cf-absence-form__actions { align-items: flex-start; flex-direction: column; }
  .cf-absence-options { flex-wrap: wrap; }
  .cf-absence-options span { flex: 1 0 40%; }
  .cf-absence-list__filters { overflow-x: auto; }
  .cf-absence-list__filters span { flex: 0 0 auto; }
  .cf-absence-list__row { align-items: flex-start; flex-wrap: wrap; }
  .cf-absence-list__row p { min-width: calc(100% - 55px); }
  .cf-absence-list__row > span { margin-left: 48px; }
}