/* ========== RESET & BASE ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --primary:       #2e547d;
  --primary-dark:  #1b3b5e;
  --primary-light: #38628e;
  --primary-glow:  rgba(46,84,125,0.12);
  --bg:            #f6f8fa;
  --surface:       #ffffff;
  --surface-2:     #eef4f6;
  --border:        #dbe8ec;
  --border-light:  #ebf2f5;
  --text:          #111827;
  --text-2:        #4b5563;
  --text-3:        #9ca3af;
  --success:       #165aa3;
  --warning:       #d97706;
  --danger:        #dc2626;
  --info:          #2563eb;
  --radius:        12px;
  --radius-sm:     8px;
  --radius-lg:     18px;
  --shadow:        0 1px 4px rgba(0,0,0,0.07);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.09);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.11);
}
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid rgba(37,99,235,0.55); outline-offset: 3px; }

/* ========== TOPBAR ========== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
  padding: 0 24px;
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
}
.topbar__logo { display: flex; align-items: center; gap: 10px; }
.topbar__logo img { height: 32px; }
.topbar__badge {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--primary); background: var(--primary-glow);
  border-radius: 99px; padding: 3px 10px;
  border: 1px solid rgba(46,84,125,0.25);
}
.topbar__back {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.85rem; color: var(--text-2);
  transition: color 0.2s;
}
.topbar__back:hover { color: var(--primary); }
.topbar__back svg { width: 14px; height: 14px; }

/* ========== HERO / SEARCH ========== */
.hero {
  background: linear-gradient(135deg, #1b3b5e 0%, #2e547d 50%, #38628e 100%);
  padding: 72px 24px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero__content { position: relative; max-width: 980px; margin: 0 auto; }
.hero__title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700; color: #fff;
  line-height: 1.2; margin-bottom: 12px;
}
.hero__subtitle { font-size: 1.05rem; color: rgba(255,255,255,0.8); margin-bottom: 32px; line-height: 1.6; }

.portal-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; text-align: left; }
.portal-entry-card { min-width: 0; padding: 24px; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius-lg); background: rgba(255,255,255,0.12); backdrop-filter: blur(10px); box-shadow: 0 12px 28px rgba(0,0,0,0.12); }
.portal-entry-card__heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.portal-entry-card__icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: var(--primary-dark); background: #fff; }
.portal-entry-card__icon svg { width: 20px; height: 20px; }
.portal-entry-card__title { color: #fff; font-size: 1.06rem; font-weight: 700; line-height: 1.3; }
.portal-entry-card__text { margin-top: 3px; color: rgba(255,255,255,0.78); font-size: .86rem; line-height: 1.5; }

/* Search box */
.search-box {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 8px 8px 8px 20px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: none; margin: 0;
}
.search-box__icon { color: var(--text-3); flex-shrink: 0; width: 20px; height: 20px; }
.search-box__input {
  flex: 1; border: none; outline: none;
  font-size: 0.95rem; font-family: inherit;
  color: var(--text); background: transparent;
  min-width: 0;
}
.search-box__input::placeholder { color: var(--text-3); }
.search-box__btn {
  flex-shrink: 0;
  background: var(--primary);
  color: #fff; font-weight: 600;
  font-size: 0.9rem; padding: 10px 22px;
  border-radius: var(--radius);
  transition: background 0.2s, transform 0.1s;
  display: flex; align-items: center; gap: 7px;
}
.search-box__btn:hover { background: var(--primary-dark); }
.search-box__btn:active { transform: scale(0.97); }
.search-box__btn svg { width: 16px; height: 16px; }
.ticket-form__footer #ticket-cancel {
  border: 1px solid var(--border);
}
.ticket-form__footer #ticket-cancel:hover { border-color: var(--primary); }

.maintenance-entry {
  width: 100%; margin: 0; padding: 12px 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid rgba(255,255,255,0.48); border-radius: var(--radius);
  background: rgba(255,255,255,0.12); color: #fff; font-size: 0.92rem; font-weight: 650;
  backdrop-filter: blur(8px); transition: background 0.2s ease, transform 0.2s ease;
}
.maintenance-entry:hover { background: rgba(255,255,255,0.2); transform: translateY(-1px); }
.maintenance-entry svg { width: 18px; height: 18px; flex: 0 0 auto; }
.payment-brand-logo { display: inline-block; box-sizing: border-box; width: 24px; height: 24px; padding: 3px; vertical-align: middle; border-radius: 50%; background: #fff; object-fit: contain; }

@media (max-width: 680px) {
  .hero { padding: 54px 16px 60px; }
  .portal-entry-grid { grid-template-columns: 1fr; }
  .portal-entry-card { padding: 20px; }
}

.maintenance-modal[hidden] { display: none !important; }
.maintenance-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 18px; }
.maintenance-modal__backdrop { position: absolute; inset: 0; border: 0; background: rgba(8,13,18,.72); backdrop-filter: blur(8px); }
.maintenance-modal__panel { position: relative; z-index: 1; width: min(680px,100%); max-height: 90vh; overflow: auto; padding: 28px; border: 1px solid rgba(46,84,125,.18); border-radius: 24px; background: #fff; box-shadow: 0 28px 80px rgba(0,0,0,.28); }
.maintenance-modal__close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--text-2); }
.maintenance-modal__close svg { width: 18px; height: 18px; }
.maintenance-modal__eyebrow { color: var(--primary); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.maintenance-modal__title { margin: 7px 44px 8px 0; font-size: clamp(1.4rem,4vw,1.9rem); line-height: 1.15; }
.maintenance-modal__lead { color: var(--text-2); font-size: .92rem; line-height: 1.55; }
.maintenance-search { margin-top: 20px; display: flex; gap: 9px; }
.maintenance-search__input { min-width: 0; flex: 1; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); font: inherit; }
.maintenance-search__button { flex: 0 0 auto; padding: 12px 18px; border-radius: 10px; background: var(--primary); color: #fff; font-weight: 700; }
.maintenance-search__button:disabled { opacity: .65; cursor: wait; }
.maintenance-result { margin-top: 20px; }
.maintenance-customer { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; margin-bottom: 14px; padding: 16px; border-radius: 14px; background: var(--surface-2); }
.maintenance-customer__name { font-weight: 750; }
.maintenance-customer__rut, .maintenance-customer__plan { color: var(--text-2); font-size: .82rem; }
.maintenance-customer__total { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--primary); font-size: 1.15rem; font-weight: 800; text-align: right; }
.maintenance-bill { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 16px; padding: 16px 0; border-bottom: 1px solid var(--border-light); }
.maintenance-bill:last-child { border-bottom: 0; }
.maintenance-bill__title { font-size: .94rem; font-weight: 700; }
.maintenance-bill__meta { margin-top: 5px; color: var(--text-2); font-size: .79rem; line-height: 1.45; }
.maintenance-bill__amount { font-weight: 800; text-align: right; }
.maintenance-bill__pay { grid-column: 1 / -1; width: 100%; min-height: 44px; padding: 10px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; background: #009ee3; color: #fff; font-weight: 750; }
.maintenance-bill__pay:hover { background: #008ed0; }
.maintenance-bill__pay:disabled { opacity: .65; cursor: wait; }
.maintenance-empty { padding: 24px 16px; border: 1px dashed var(--border); border-radius: 14px; color: var(--text-2); text-align: center; line-height: 1.55; }

/* ========== MAIN CONTAINER ========== */
.container { max-width: 900px; margin: 0 auto; padding: 0 16px; }
.main { padding: 48px 0; }

/* ========== PROJECT MODAL ========== */
.project-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(17,24,39,0.58);
  backdrop-filter: blur(10px);
  overflow: auto;
}
.project-modal[hidden] { display: none !important; }
.project-modal__panel {
  position: relative;
  width: min(1120px, 100%);
  max-width: min(1120px, 100%);
  margin: 0;
  padding: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,251,0.98));
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
  max-height: min(90vh, 920px);
  overflow: auto;
}
.project-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(17,24,39,0.06);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
  z-index: 2;
}
.project-modal__close:hover {
  background: rgba(46,84,125,0.12);
  color: var(--primary);
  transform: scale(1.04);
}
.project-modal__close svg { width: 18px; height: 18px; }

/* ========== SPINNER ========== */
.spinner-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 80px 0; color: var(--text-3);
}
.spinner-wrap svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== ERROR / EMPTY ========== */
.empty-state {
  text-align: center; padding: 80px 24px;
}
.empty-state__icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--border-light);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; color: var(--text-3);
}
.empty-state__title { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; }
.empty-state__text { font-size: 0.95rem; color: var(--text-2); line-height: 1.6; }

/* ========== PROJECT HEADER ========== */
.proj-header {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  margin-bottom: 24px;
  display: flex; align-items: flex-start; gap: 20px;
}
.proj-header__icon {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--primary-glow);
  border: 1px solid rgba(46,84,125,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
}
.proj-header__icon svg { width: 28px; height: 28px; }
.proj-header__info { flex: 1; min-width: 0; }
.proj-header__name {
  font-size: 1.5rem; font-weight: 700; margin-bottom: 4px;
  line-height: 1.3;
}
.proj-header__client { font-size: 0.9rem; color: var(--text-2); margin-bottom: 12px; }
.proj-header__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 0.78rem; font-weight: 500;
  color: var(--primary-dark); background: var(--primary-glow);
  border: 1px solid rgba(46,84,125,0.18);
  border-radius: 99px; padding: 3px 10px;
}
.proj-header__right { flex-shrink: 0; text-align: right; }
.status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
  border-radius: 99px; padding: 5px 14px;
  border: 1px solid;
}
.status-badge svg { width: 13px; height: 13px; }
.status-badge--proposal     { color: var(--info);    background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.25); }
.status-badge--active       { color: var(--primary); background: var(--primary-glow);  border-color: rgba(46,84,125,0.3); }
.status-badge--review       { color: var(--warning); background: rgba(217,119,6,0.08); border-color: rgba(217,119,6,0.3); }
.status-badge--completed    { color: var(--success); background: rgba(22,90,163,0.08); border-color: rgba(22,90,163,0.3); }
.status-badge--paused       { color: var(--text-2);  background: rgba(75,85,99,0.08);  border-color: rgba(75,85,99,0.3); }

/* ========== PROGRESS CARD ========== */
.progress-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  margin-bottom: 24px;
}
.progress-card__header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.progress-card__label { font-size: 0.9rem; font-weight: 600; color: var(--text-2); }
.progress-card__pct { font-size: 1.4rem; font-weight: 700; color: var(--primary); }
.progress-bar {
  height: 10px; border-radius: 99px;
  background: var(--border-light); overflow: hidden;
  margin-bottom: 6px;
}
.progress-bar__fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), #668fbb);
  transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
  width: 0%;
}
.progress-bar__fill--completed { background: linear-gradient(90deg, var(--success), #4a92de); }
.progress-bar__fill--review    { background: linear-gradient(90deg, var(--warning), #fbbf24); }

/* ========== EXECUTIVE SUMMARY ========== */
.brief-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.brief-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  min-width: 0;
}
.brief-card__label {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 8px;
}
.brief-card__value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 6px;
}
.brief-card__meta {
  font-size: 0.84rem;
  color: var(--text-2);
  line-height: 1.5;
}
.brief-highlight {
  background: linear-gradient(135deg, rgba(46,84,125,0.08), rgba(37,99,235,0.06));
  border: 1px solid rgba(46,84,125,0.14);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.brief-highlight__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--primary-glow);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brief-highlight__icon svg { width: 20px; height: 20px; }
.brief-highlight__title {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 4px;
}
.brief-highlight__text {
  font-size: 0.95rem;
  color: var(--text-2);
  line-height: 1.6;
}

/* ========== STEPPER ========== */
.stepper-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  margin-bottom: 24px;
}
.stepper-card__title {
  font-size: 0.9rem; font-weight: 600; color: var(--text-2);
  margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.06em;
}
.stepper {
  display: flex; align-items: flex-start;
  gap: 0; position: relative;
}
.stepper-step {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 1;
}
.stepper-step::before {
  content: '';
  position: absolute; top: 18px; left: 50%; right: -50%;
  height: 2px; background: var(--border);
  z-index: 0;
}
.stepper-step:last-child::before { display: none; }
.stepper-step__circle {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border);
  background: var(--surface); z-index: 1; position: relative;
  transition: all 0.3s;
  font-size: 0.85rem; font-weight: 700; color: var(--text-3);
}
.stepper-step__circle svg { width: 16px; height: 16px; }
.stepper-step--completed .stepper-step__circle {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.stepper-step--completed::before { background: var(--primary); }
.stepper-step--active .stepper-step__circle {
  background: var(--surface); border-color: var(--primary); color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-glow);
}
.stepper-step--paused .stepper-step__circle {
  background: rgba(217,119,6,0.08); border-color: var(--warning); color: var(--warning);
  box-shadow: 0 0 0 4px rgba(217,119,6,0.1);
}
.stepper-step__label {
  margin-top: 10px; text-align: center; font-size: 0.78rem;
  font-weight: 500; color: var(--text-3); line-height: 1.4;
}
.stepper-step--completed .stepper-step__label { color: var(--primary); font-weight: 600; }
.stepper-step--active .stepper-step__label    { color: var(--text); font-weight: 600; }
.stepper-step--paused .stepper-step__label    { color: var(--warning); font-weight: 600; }

/* ========== DETAILS GRID ========== */
.details-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin-bottom: 24px;
}
.detail-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  display: flex; align-items: flex-start; gap: 14px;
}
.detail-card__icon {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-sm);
  background: var(--primary-glow); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.detail-card__icon svg { width: 18px; height: 18px; }
.detail-card__label { font-size: 0.78rem; color: var(--text-3); font-weight: 500; margin-bottom: 3px; }
.detail-card__value { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.detail-card__value--muted { color: var(--text-2); font-weight: 400; }

/* ========== DESCRIPTION CARD ========== */
.desc-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  margin-bottom: 24px;
}
.desc-card__title {
  font-size: 0.9rem; font-weight: 600; color: var(--text-2);
  margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.06em;
}
.desc-card__text { font-size: 0.95rem; color: var(--text-2); line-height: 1.7; }
.desc-card__notes {
  margin-top: 16px; padding: 14px 16px;
  background: var(--primary-glow);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9rem; color: var(--text-2);
  line-height: 1.6;
}

/* ========== TIMELINE ========== */
.timeline-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  margin-bottom: 24px;
}
.timeline-card__title {
  font-size: 0.9rem; font-weight: 600; color: var(--text-2);
  margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.06em;
}
.timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
.timeline::before {
  content: ''; position: absolute; left: 18px; top: 8px; bottom: 8px;
  width: 2px; background: var(--border-light);
}
.timeline-item { display: flex; gap: 20px; position: relative; padding-bottom: 28px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item__dot {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  border: 2px solid;
}
.timeline-item__dot svg { width: 16px; height: 16px; }
.timeline-item__dot--milestone { background: rgba(46,84,125,0.08);  border-color: var(--primary); color: var(--primary); }
.timeline-item__dot--update    { background: rgba(37,99,235,0.08);  border-color: var(--info);    color: var(--info); }
.timeline-item__dot--delivery  { background: rgba(22,90,163,0.08);  border-color: var(--success); color: var(--success); }
.timeline-item__dot--issue     { background: rgba(220,38,38,0.08);  border-color: var(--danger);  color: var(--danger); }
.timeline-item__dot--note      { background: rgba(217,119,6,0.08);  border-color: var(--warning); color: var(--warning); }
.timeline-item__body { flex: 1; min-width: 0; padding-top: 4px; }
.timeline-item__title { font-size: 0.95rem; font-weight: 600; margin-bottom: 4px; }
.timeline-item__desc { font-size: 0.88rem; color: var(--text-2); line-height: 1.6; }
.timeline-item__date { font-size: 0.78rem; color: var(--text-3); margin-top: 6px; }
.timeline-empty { color: var(--text-3); font-size: 0.9rem; text-align: center; padding: 24px 0; }

/* ========== TICKETS ========== */
.ticket-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  box-shadow: 0 14px 34px rgba(46, 84, 125, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 115;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ticket-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(46, 84, 125, 0.34); }
.ticket-fab svg { width: 22px; height: 22px; }
.ticket-fab[hidden] { display: none !important; }

.ticket-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.ticket-modal[hidden] { display: none !important; }
.ticket-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.56);
  backdrop-filter: blur(6px);
}
.ticket-modal__panel {
  position: relative;
  width: min(920px, 100%);
  max-height: min(82vh, 840px);
  overflow: auto;
  background: var(--surface);
  border-radius: 20px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  padding: 22px;
}
.ticket-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.ticket-modal__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.ticket-modal__subtitle {
  font-size: 0.92rem;
  color: var(--text-2);
  line-height: 1.5;
}
.ticket-modal__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ticket-modal__close svg { width: 16px; height: 16px; }
.ticket-form { display: flex; flex-direction: column; gap: 14px; }
.ticket-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ticket-form__group { display: flex; flex-direction: column; gap: 6px; }
.ticket-form__label { font-size: 0.84rem; font-weight: 600; color: var(--text-2); }
.ticket-form__input,
.ticket-form__select,
.ticket-form__textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  font: inherit;
  color: var(--text);
  background: #fff;
  outline: none;
}
.ticket-form__textarea { min-height: 110px; resize: vertical; }
.ticket-form__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}
.ticket-history-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.ticket-summary-card {
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 12px;
}
.ticket-summary-card__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin-bottom: 4px; }
.ticket-summary-card__value { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.ticket-list { display: flex; flex-direction: column; gap: 10px; }
.ticket-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  background: #fff;
}
.ticket-item__body { min-width: 0; flex: 1; }
.ticket-item__title { font-size: 0.96rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.ticket-item__desc { font-size: 0.88rem; line-height: 1.55; color: var(--text-2); margin-bottom: 5px; }
.ticket-item__meta { font-size: 0.78rem; color: var(--text-3); display: flex; gap: 8px; flex-wrap: wrap; }
.ticket-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 5px 10px;
  border: 1px solid transparent;
}
.ticket-status--pending { background: rgba(217,119,6,0.12); color: var(--warning); border-color: rgba(217,119,6,0.2); }
.ticket-status--in_progress { background: rgba(37,99,235,0.12); color: var(--info); border-color: rgba(37,99,235,0.2); }
.ticket-status--review { background: rgba(46,84,125,0.12); color: var(--primary); border-color: rgba(46,84,125,0.2); }
.ticket-status--done { background: rgba(22,90,163,0.12); color: var(--success); border-color: rgba(22,90,163,0.2); }

.portal-toast-container {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 140;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.portal-toast {
  min-width: min(420px, calc(100vw - 32px));
  background: rgba(17, 24, 39, 0.94);
  color: #fff;
  border-radius: 999px;
  padding: 12px 16px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}
.portal-toast__icon { width: 18px; height: 18px; flex-shrink: 0; }
.portal-toast__text { font-size: 0.9rem; line-height: 1.4; }
.portal-toast--success { background: rgba(22,90,163,0.96); }
.portal-toast--warning { background: rgba(217,119,6,0.96); }
.portal-toast--error { background: rgba(220,38,38,0.96); }

@media (max-width: 640px) {
  .maintenance-entry { width: 100%; }
  .maintenance-modal { padding: 10px; }
  .maintenance-modal__panel { max-height: 94vh; padding: 22px 16px; border-radius: 20px; }
  .maintenance-search { flex-direction: column; }
  .maintenance-search__button { width: 100%; }
  .maintenance-customer { grid-template-columns: 1fr; }
  .maintenance-customer__total { grid-row: auto; grid-column: auto; text-align: left; }
  .project-modal { padding: 10px; }
  .project-modal__panel {
    width: 100%;
    max-height: 94vh;
    padding: 18px 14px;
    border-radius: 22px;
  }
  .project-modal__close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
  }
  .ticket-modal__panel { padding: 18px; }
  .ticket-form__row { grid-template-columns: 1fr; }
  .ticket-history-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticket-item { flex-direction: column; }
  .ticket-status { align-self: flex-start; }
  .ticket-fab {
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
  }
  .portal-toast { min-width: calc(100vw - 24px); }
}

/* ========== QUOTES, INVOICES, DELIVERABLES ========== */
.item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border-light);
}
.item:last-child { border-bottom: none; }
.item__content { flex: 1; min-width: 0; }
.item__title { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.item__subtitle { font-size: 0.78rem; color: var(--text-3); }
.item__value { font-size: 0.95rem; font-weight: 700; color: var(--text); text-align: right; }
.item__status { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-top: 4px; }
.item__status--vigente { background: rgba(37,99,235,0.1); color: var(--info); }
.item__status--aceptada { background: rgba(22,90,163,0.1); color: var(--success); }
.item__status--rechazada { background: rgba(220,38,38,0.1); color: var(--danger); }
.item__status--pending { background: rgba(217,119,6,0.1); color: var(--warning); }
.item__status--paid { background: rgba(22,90,163,0.1); color: var(--success); }
.item__status--overdue { background: rgba(220,38,38,0.1); color: var(--danger); }
.item__payment { margin-top: 8px; }
.item__pay-btn {
  border: 0; border-radius: 8px; padding: 8px 13px; cursor: pointer;
  background: #009ee3; color: #fff; font: inherit; font-size: .78rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.item__pay-btn:hover { background: #008ed0; }
.item__pay-btn:disabled { opacity: .6; cursor: wait; }

.payment-result-modal[hidden] { display: none !important; }
.payment-result-modal { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 20px; }
.payment-result-modal__backdrop { position: absolute; inset: 0; border: 0; cursor: pointer; background: rgba(8,13,18,.72); backdrop-filter: blur(8px); }
.payment-result-modal__panel { position: relative; z-index: 1; width: min(440px,100%); padding: 34px 30px 28px; border: 1px solid rgba(96,213,255,.2); border-radius: 24px; background: linear-gradient(160deg,#fff,#f6fdff); text-align: center; box-shadow: 0 28px 80px rgba(0,0,0,.3); animation: paymentResultIn .28s ease-out; }
.payment-result-modal__close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; background: rgba(15,23,42,.06); color: #334155; }
.payment-result-modal__close svg { width: 18px; height: 18px; }
.payment-result-modal__halo { width: 184px; height: 184px; margin: -6px auto 12px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle,rgba(72,160,255,.28),rgba(72,160,255,0) 68%); }
.payment-result-modal__image { width: 170px; height: 170px; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(17,47,80,.18)); }
.payment-result-modal__badge { display: inline-flex; margin-bottom: 10px; padding: 6px 11px; border-radius: 999px; background: rgba(22,90,163,.1); color: #154980; font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.payment-result-modal__title { margin: 0; color: #101820; font-size: clamp(1.45rem,4vw,1.85rem); line-height: 1.15; }
.payment-result-modal__message { margin: 12px auto 22px; max-width: 350px; color: #3d5976; font-size: .95rem; line-height: 1.6; }
.payment-result-modal__action { border: 0; border-radius: 10px; padding: 11px 22px; cursor: pointer; background: var(--primary); color: #fff; font: inherit; font-weight: 700; }
.payment-result-modal.is-error .payment-result-modal__panel { background: linear-gradient(160deg,#fff,#fff7f7); border-color: rgba(220,38,38,.22); }
.payment-result-modal.is-error .payment-result-modal__halo { background: radial-gradient(circle,rgba(248,113,113,.22),rgba(248,113,113,0) 68%); }
.payment-result-modal.is-error .payment-result-modal__image { border-radius: 22px; }
.payment-result-modal.is-error .payment-result-modal__badge { background: rgba(220,38,38,.1); color: #b91c1c; }
.payment-result-modal.is-pending .payment-result-modal__badge { background: rgba(217,119,6,.1); color: #b45309; }
@keyframes paymentResultIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* Summary cards for quotes/invoices */
.quote-summary, .invoice-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-bottom: 20px;
}
.summary-box {
  background: var(--primary-glow); border: 1px solid rgba(46,84,125,0.2);
  border-radius: var(--radius-sm); padding: 14px; text-align: center;
}
.summary-box__label { font-size: 0.78rem; color: var(--text-2); font-weight: 500; margin-bottom: 6px; }
.summary-box__value { font-size: 1.05rem; font-weight: 700; color: var(--primary); }

/* ========== FOOTER ========== */
.footer {
  border-top: 1px solid var(--border-light);
  padding: 28px 24px;
  text-align: center;
  color: var(--text-3); font-size: 0.82rem;
}
.footer a { color: var(--primary); font-weight: 500; }

/* ========== ALERT ========== */
.alert {
  display: flex; align-items: center; gap: 10px;
  background: rgba(220,38,38,0.07);
  border: 1px solid rgba(220,38,38,0.25);
  color: var(--danger); border-radius: var(--radius-sm);
  padding: 12px 16px; font-size: 0.88rem; margin-bottom: 20px;
}
.alert svg { width: 16px; height: 16px; flex-shrink: 0; }
.alert--info { background: rgba(37,99,235,0.07); border-color: rgba(37,99,235,0.25); color: var(--info); }

/* ========== INITIAL STATE ========== */
.intro-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; margin-top: 48px;
}
.intro-card {
  background: var(--surface); border-radius: var(--radius);
  padding: 22px; border: 1px solid var(--border-light);
  box-shadow: var(--shadow); text-align: center;
}
.intro-card__icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--primary-glow); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.intro-card__icon::before {
  display: none;
  color: var(--primary);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}
.intro-card__icon:not(:has(svg))::before { display: block; }
.intro-card__icon--tracking::before { content: "↗"; }
.intro-card__icon--milestones::before { content: "✓"; }
.intro-card__icon--secure::before { content: "●"; }
.intro-card__icon svg { width: 22px; height: 22px; }
.intro-card__title { font-size: 0.9rem; font-weight: 600; margin-bottom: 6px; }
.intro-card__text { font-size: 0.82rem; color: var(--text-2); line-height: 1.5; }

/* ========== UTILITIES ========== */
.hidden { display: none !important; }
.fade-in { animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ========== RESPONSIVE ========== */

/* --- Tablet (≤768px) --- */
@media (max-width: 768px) {
  /* Topbar */
  .topbar { padding: 0 16px; }
  .topbar__badge { display: none; }

  /* Hero */
  .hero { padding: 48px 16px 56px; }
  .hero__subtitle { font-size: 0.92rem; margin-bottom: 28px; }

  /* Search */
  .search-box { padding: 6px 6px 6px 16px; }
  .search-box__btn { padding: 10px 16px; font-size: 0.85rem; }

  /* Cards: reduce horizontal padding */
  .progress-card,
  .brief-card,
  .brief-highlight,
  .stepper-card,
  .desc-card,
  .timeline-card { padding: 20px 20px; }

  /* Proj header */
  .proj-header { padding: 20px 20px; gap: 14px; }
  .proj-header__name { font-size: 1.25rem; }

  /* Details grid already 1-col at 600px; widen threshold */
  .details-grid { gap: 12px; }

  /* Intro cards */
  .intro-cards { margin-top: 32px; gap: 12px; }
}

/* --- Mobile landscape / medium (≤600px) --- */
@media (max-width: 600px) {
  .details-grid { grid-template-columns: 1fr; }
}

/* --- Mobile (≤480px) --- */
@media (max-width: 480px) {
  /* Base */
  .container { padding: 0 12px; }
  .main { padding: 28px 0 40px; }

  /* Topbar */
  .topbar { height: 54px; padding: 0 14px; }
  .topbar__logo img { height: 26px; }
  .topbar__back { font-size: 0.8rem; }

  /* Hero */
  .hero { padding: 40px 14px 48px; }
  .hero__title { font-size: 1.5rem; }
  .hero__subtitle { font-size: 0.88rem; margin-bottom: 24px; }

  /* Search box: stack vertically */
  .search-box {
    flex-wrap: wrap;
    padding: 12px 14px;
    gap: 10px;
    border-radius: var(--radius);
  }
  .search-box__icon { display: none; }
  .search-box__input {
    width: 100%;
    flex: none;
    font-size: 1rem;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
  }
  .search-box__btn {
    width: 100%;
    justify-content: center;
    padding: 12px 0;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
  }

  /* Project header: stack badge below name */
  .proj-header {
    flex-wrap: wrap;
    padding: 16px 16px;
    gap: 12px;
  }
  .proj-header__icon { width: 48px; height: 48px; }
  .proj-header__icon svg { width: 22px; height: 22px; }
  .proj-header__info { flex: 1 1 calc(100% - 60px); min-width: 0; }
  .proj-header__right {
    width: 100%;
    text-align: left;
    padding-top: 4px;
    border-top: 1px solid var(--border-light);
  }
  .proj-header__name { font-size: 1.15rem; }
  .proj-header__client { margin-bottom: 8px; }

  /* Progress card */
  .progress-card { padding: 16px 16px; }
  .progress-card__pct { font-size: 1.2rem; }

  .brief-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
  .brief-card { padding: 14px 14px; }
  .brief-card__value { font-size: 0.94rem; }
  .brief-highlight { padding: 14px 14px; margin-bottom: 16px; }

  /* Stepper card */
  .stepper-card { padding: 18px 16px; }
  .stepper-card__title { margin-bottom: 16px; font-size: 0.78rem; }
  .stepper-step__circle { width: 30px; height: 30px; font-size: 0.75rem; }
  .stepper-step__circle svg { width: 13px; height: 13px; }
  .stepper-step__label { font-size: 0.72rem; }
  /* Vertical stepper on mobile */
  .stepper { flex-direction: column; align-items: flex-start; gap: 0; }
  .stepper-step { flex-direction: row; align-items: center; flex: none; width: 100%; gap: 14px; padding: 6px 0; }
  .stepper-step::before { content:''; position:absolute; top:auto; left:15px; right:auto; bottom:-6px; width:2px; height:20px; background:var(--border); }
  .stepper-step--completed::before { background: var(--primary); }
  .stepper-step:last-child::before { display: none; }
  .stepper-step__label { margin-top: 0; text-align: left; }

  /* Details grid: always 1-col */
  .details-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
  .detail-card { padding: 14px 14px; }
  .detail-card__icon { width: 34px; height: 34px; }
  .detail-card__icon svg { width: 16px; height: 16px; }

  /* Desc & timeline */
  .desc-card { padding: 16px 16px; margin-bottom: 16px; }
  .desc-card__notes { padding: 10px 12px; font-size: 0.85rem; }
  .timeline-card { padding: 18px 16px; margin-bottom: 16px; }
  .timeline-card__title { margin-bottom: 18px; }
  .timeline::before { left: 14px; }
  .timeline-item { gap: 14px; padding-bottom: 22px; }
  .timeline-item__dot { width: 28px; height: 28px; }
  .timeline-item__dot svg { width: 13px; height: 13px; }
  .timeline-item__title { font-size: 0.88rem; }
  .timeline-item__desc { font-size: 0.83rem; }

  /* Intro cards */
  .intro-cards { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .intro-card { padding: 18px 16px; display: flex; align-items: flex-start; gap: 14px; text-align: left; }
  .intro-card__icon { margin: 0; flex-shrink: 0; width: 40px; height: 40px; }

  /* Empty state */
  .empty-state { padding: 48px 16px; }

  /* Footer */
  .footer { padding: 20px 16px; font-size: 0.78rem; }
}

/* --- Very small (≤360px) --- */
@media (max-width: 360px) {
  .hero__title { font-size: 1.3rem; }
  .proj-header__name { font-size: 1.05rem; }
  .tag { font-size: 0.72rem; padding: 2px 8px; }
  .brief-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========== DIRECCIÓN VISUAL Solven Labs 2026 · PORTAL ========== */
:root {
  --primary: #0d4581;
  --primary-dark: #07325f;
  --primary-light: #5997da;
  --primary-glow: rgba(22,89,160,.12);
  --bg: #f3f7f9;
  --surface: #ffffff;
  --surface-2: #edf4f6;
  --border: #d5e4e9;
  --border-light: #e5eef1;
  --text: #131b24;
  --text-2: #476789;
  --text-3: #87958c;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 10px 30px rgba(17,35,54,.06);
  --shadow-md: 0 16px 38px rgba(17,35,54,.09);
  --shadow-lg: 0 26px 62px rgba(7,21,35,.18);
}
body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; background: linear-gradient(135deg,#f6f9fb,#edf3f5); }
h1,h2,h3,h4,h5,h6,.hero__title,.proj-header__name,.maintenance-modal__title,.payment-result-modal__title { font-family: 'Manrope','DM Sans',sans-serif; letter-spacing: -.04em; }
:focus-visible { outline-color: rgba(13,69,129,.55); }

.topbar { height: 72px; padding-inline: clamp(16px,4vw,44px); background: rgba(250,252,253,.86); border-color: rgba(19,27,36,.08); backdrop-filter: blur(18px); }
.topbar__logo img { height: 42px; width: auto; max-width: none; }
.topbar__badge { padding: 5px 10px; color: #083c74; background: #e5f1f6; border-color: #c5dfe9; }
.topbar__back { padding: .55rem .8rem; border-radius: 999px; font-weight: 700; }
.topbar__back:hover { color: #083c74; background: #e8f2f6; }

.hero { padding: 76px 24px 82px; background: radial-gradient(circle at 82% 18%,rgba(111,204,238,.2),transparent 25%),radial-gradient(circle at 12% 105%,rgba(111,204,238,.14),transparent 28%),linear-gradient(135deg,#0b1621,#162e48); }
.hero { isolation: isolate; background: radial-gradient(circle at 84% 20%,rgba(102,163,228,.19),transparent 24%),radial-gradient(circle at 15% 94%,rgba(88,137,190,.16),transparent 26%),linear-gradient(135deg,#0b1621 0%,#12263b 52%,#0e1b28 100%); }
.hero::before { z-index: -1; opacity: .22; pointer-events: none; background-image: linear-gradient(rgba(196,239,255,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(196,239,255,.17) 1px,transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom,#000,transparent 85%); }
.hero__network-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero .hero__content { z-index: 1; }
.hero__content { max-width: 1080px; }
.hero__title { font-size: clamp(2rem,4.4vw,3.5rem); line-height: 1.08; }
.hero__subtitle { max-width: 650px; margin-inline: auto; color: rgba(238,250,255,.76); }
.portal-entry-grid { gap: 18px; }
.portal-entry-card { padding: 26px; border-color: rgba(199,240,255,.2); border-radius: 1.25rem; background: rgba(245,252,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 16px 30px rgba(0,0,0,.12); }
.portal-entry-card__icon { border-radius: .8rem; color: #083c74; background: #c9f1ff; }
.search-box { border-radius: 1rem; box-shadow: 0 14px 30px rgba(0,0,0,.16); }
.search-box__btn,.maintenance-search__button { border-radius: .75rem; background: #0d4581; }
.search-box__btn:hover,.maintenance-search__button:hover { background: #07325f; }
.ticket-form__footer #ticket-cancel { border-color: #b5cfd9; }
.maintenance-entry { border-radius: .85rem; border-color: rgba(199,240,255,.28); background: rgba(255,255,255,.09); }

.main { padding: clamp(2.5rem,6vw,5rem) 0; }
.project-modal,.ticket-modal { background: rgba(7,16,26,.64); backdrop-filter: blur(10px); }
.project-modal__panel,.ticket-modal__panel,.maintenance-modal__panel,.payment-result-modal__panel { border-color: #d3e3e9; border-radius: 1.4rem; box-shadow: 0 30px 80px rgba(5,17,30,.3); }
.project-modal__panel { background: linear-gradient(145deg,#fff,#f4f8fa); }
.project-modal__close,.ticket-modal__close,.maintenance-modal__close,.payment-result-modal__close { background: #e6f0f4; color: #083c74; }
.project-modal__close:hover,.ticket-modal__close:hover,.maintenance-modal__close:hover,.payment-result-modal__close:hover { background: #c9e8f3; color: #07325f; }
.proj-header,.section-card,.card,.info-card,.timeline-card { border-color: #d7e5eb; border-radius: 1.2rem; box-shadow: var(--shadow); }
.proj-header__icon { border-color: #c6e0ea; border-radius: 1rem; background: #e6f2f7; color: #083c74; }
.tag,.status-badge,.ticket-status { border-radius: 999px; }
.progress-bar__fill,.progress-fill { background: linear-gradient(90deg,#0d4581,#5d9bdd); }
.timeline-item__dot { border-color: #b9dce9; background: #e4f2f7; color: #083c74; }

.ticket-fab { background: #0d4581; box-shadow: 0 14px 32px rgba(13,69,129,.26); }
.ticket-fab:hover { background: #07325f; }
.ticket-modal__header { margin: -22px -22px 20px; padding: 22px; border-radius: 1.4rem 1.4rem 0 0; background: linear-gradient(110deg,#102032,#0d4581); }
.ticket-modal__title { color: #fff; }
.ticket-modal__subtitle { color: rgba(237,250,255,.72); }
.ticket-modal__header .ticket-modal__close { background: rgba(255,255,255,.16); color: #fff; }
.ticket-form__input,.ticket-form__select,.ticket-form__textarea,.maintenance-search__input { border-color: #cfe0e7; border-radius: .75rem; background: #fbfdfe; }
.ticket-form__input:focus,.ticket-form__select:focus,.ticket-form__textarea:focus,.maintenance-search__input:focus { border-color: #0d4581; box-shadow: 0 0 0 4px rgba(13,69,129,.1); }
.ticket-summary-card,.ticket-item,.maintenance-customer { border-color: #d9e7ec; background: #f4f8fa; }
.ticket-item { border-radius: 1rem; }

.maintenance-modal__panel { background: linear-gradient(145deg,#fff,#f4f8fa); }
.maintenance-modal__eyebrow { color: #083c74; }
.maintenance-customer { border: 1px solid #d7e5ea; }
.maintenance-bill { border-color: #dfeaee; }
.maintenance-bill__pay { border-radius: .8rem; background: #0d4581; }
.maintenance-bill__pay:hover { background: #07325f; }

.payment-result-modal__panel { border-color: #cde2e9; background: linear-gradient(145deg,#fff,#eff6f9); }
.payment-result-modal__halo { background: radial-gradient(circle,rgba(86,151,220,.2),transparent 68%); }
.payment-result-modal__badge { color: #083c74; background: #e3f2f7; border-color: #bddde8; }
.payment-result-modal__action { border-radius: .8rem; background: #0d4581; }
.payment-result-modal__action:hover { background: #07325f; }

.footer { border-top: 1px solid rgba(91,152,217,.2); background: #0b1520; color: rgba(234,249,255,.7); }
.footer a { color: #9bdcf4; }
@media (max-width: 640px) {
  .topbar { height: 62px; }
  .topbar__logo img { height: 32px; }
  .hero { padding: 54px 16px 60px; }
  .portal-entry-card { padding: 20px; }
  .ticket-modal__header { margin: -18px -18px 18px; padding: 18px; border-radius: 1.1rem 1.1rem 0 0; }
}
/* Shared brand and footer */
/* Shared footer for the public site and client portal. */
.footer { position: relative; padding: clamp(3rem, 5vw, 4.25rem) 0 1rem; text-align: left; background: #0b1520; color: rgba(233,249,255,.75); font-family: 'DM Sans', sans-serif; font-size: .875rem; line-height: 1.6; border-top: 1px solid rgba(91,152,217,.2); }
.footer::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, #5e9ee2, transparent); }
.footer .container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: clamp(1.25rem,3vw,2.5rem); box-sizing: border-box; }
.footer .footer__grid { display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: clamp(1.5rem,3vw,3rem); margin-bottom: 2rem; }
.footer .footer__brand { max-width: 300px; }
.footer .footer__logo { display: inline-flex; align-items: center; min-height: 64px; margin-bottom: 1rem; }
.footer .footer__logo-img { height: 100px; width: auto; max-width: 100%; object-fit: contain; }
.footer .footer__desc { max-width: 350px; margin: 0 0 1.5rem; color: rgba(233,249,255,.68); line-height: 1.7; }
.footer .footer__column-title { margin: 0 0 1rem; color: #dff6ff; font-family: 'Manrope',sans-serif; font-size: .83rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.footer .footer__links { display: flex; flex-direction: column; gap: .55rem; }
.footer .footer__grid > .footer__column--nav:nth-child(2) .footer__links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 1.25rem; row-gap: .45rem; }
.footer a { text-decoration: none; }
.footer .footer__link { display: inline-block; color: rgba(233,249,255,.66); font-size: .875rem; font-weight: 400; padding: .24rem 0; transition: color .2s, transform .2s; }
.footer .footer__link:hover { color: #87d6f3; transform: translateX(3px); }
.footer .footer__newsletter { display: flex; flex-direction: column; gap: .5rem; }
.footer .footer__newsletter-input { width: 100%; min-width: 0; box-sizing: border-box; padding: .75rem 1rem; border: 1px solid rgba(218,245,255,.18); border-radius: .5rem; background: rgba(255,255,255,.08); color: #fff; font: inherit; }
.footer .footer__newsletter-input::placeholder { color: #96bbc9; }
.footer .footer__newsletter-btn { padding: .75rem 1rem; border: 0; border-radius: .65rem; background: #8cd8f4; color: #0d1b29; font: inherit; font-weight: 800; cursor: pointer; }
.footer .footer__newsletter-success:empty { display: none; }
.footer .footer__tax { display: flex; flex-direction: column; gap: .5rem; }
.footer .footer__tax-item { display: flex; flex-direction: column; gap: .25rem; }
.footer .footer__tax-label { color: #7ecce8; font-size: .75rem; font-style: italic; }
.footer .footer__tax-value { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; }
.footer .footer__tax-value, .footer .footer__tax-link { color: rgba(233,249,255,.68); font-weight: 400; overflow-wrap: anywhere; }
.footer .footer__tax-icon { flex-shrink: 0; width: 1rem; height: 1rem; margin-top: .15rem; }
.footer .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(218,245,255,.14); }
.footer .footer__social { display: flex; justify-content: flex-start; gap: .75rem; margin: 0; }
.footer .footer__social-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(218,245,255,.15); border-radius: .7rem; color: #bfeeff; }
.footer .footer__social-link:hover { background: #1a3f66; border-color: #609ddf; color: #fff; }
.footer .footer__social-link .icon { width: 20px; height: 20px; }
.footer .footer__copyright { margin: 0; color: rgba(233,249,255,.45); font-size: .875rem; }
.footer :is(a,button,input):focus-visible { outline: 2px solid #8cd8f4; outline-offset: 4px; }
@media (max-width: 900px) { .footer .footer__grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) {
  .footer .footer__grid { grid-template-columns: 1fr; }
  .footer .footer__brand { max-width: 100%; }
  .footer .footer__grid > .footer__column--nav:nth-child(2) .footer__links { display: flex; flex-direction: column; }
  .footer .footer__logo-img { height: 82px; }
  .footer .footer__bottom { align-items: flex-start; flex-direction: column; }
}

/* Shared Solven Labs identity across the public site and client workspace. */
:root {
  --color-primary: #0057e6;
  --color-primary-dark: #003bb3;
  --color-primary-light: #008bdf;
  --gradient-primary: linear-gradient(135deg, #0057e6, #008bdf);
  --shadow-glow: 0 0 40px rgb(0 139 223 / 18%);
}
.navbar__logo-img { width: 198px; height: auto; max-width: 100%; object-fit: contain; }
.footer .footer__logo-img { width: 230px; height: auto; max-width: 100%; }
.sidebar__logo-img { width: 180px; height: auto; max-width: 100%; object-fit: contain; }
.login__logo img { width: 240px; height: auto; max-width: 100%; object-fit: contain; }
.topbar__logo img { width: 190px; height: auto; max-width: 100%; object-fit: contain; }
.sidebar.collapsed .sidebar__logo-img { content: url('/assets/favicon%20chopped.png'); width: 36px; height: 36px; object-fit: contain; }
.hero__promise, .hero__metric-icon { color: #68d9ff; }
.hero__title-highlight { background-image: linear-gradient(110deg, #67dcff, #80adff); }
.hero__backing { width: min(720px, 100%); margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid rgb(174 224 255 / 20%); }
.hero__backing-label { margin: 0 0 .9rem; color: rgb(219 242 255 / 64%); font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hero__backing-items { display: flex; justify-content: center; align-items: center; gap: 1rem; }
.hero__backing-item { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.hero__backing-item img { display: block; object-fit: contain; }
.hero__backing-item--anid img { width: auto; height: 78px; flex-shrink: 0; }
.hero__backing-item--viu img { width: auto; height: 78px; flex-shrink: 0; }
.hero__backing-item span { max-width: 145px; color: rgb(235 248 255 / 82%); font-size: .72rem; font-weight: 600; line-height: 1.35; }
.hero__backing-divider { width: 1px; height: 46px; background: rgb(190 229 255 / 20%); }
.faq__solvi-gif { aspect-ratio: 1; object-fit: cover; object-position: center; border-radius: 28px; }
.faq__chatbot-avatar, .chatbot__avatar--solvi img, .solvi-float__avatar, .solvi-float__trigger-avatar { object-fit: cover; object-position: center 35%; }
.solvi-float__trigger-avatar { border: 2px solid rgb(126 226 255 / 72%); }
.btn--primary { background: var(--gradient-primary); color: #fff; }
.btn--primary:hover { background: #003bb3; color: #fff; }
#equipo .solven-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
#equipo .solven-team .usecase-card { display: flex; flex-direction: column; align-items: flex-start; padding: 1.4rem; text-align: left; min-width: 0; }
#equipo .solven-team .usecase-card__image { width: 100%; height: 230px; border-radius: 18px; overflow: hidden; margin-bottom: 1.5rem; }
#equipo .solven-team .usecase-card__profile { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; border-radius: 0; }
#equipo .solven-team .usecase-card__title { font-size: 1.2rem; line-height: 1.4; }
#equipo .solven-team .btn { margin-top: auto; }
.solven-clinical-partners { display: flex; gap: 1.5rem; align-items: center; max-width: 800px; padding: 2rem; margin: 0 auto 3rem; border: 1px solid #c8dcf4; border-radius: 24px; background: #fff; }
.solven-clinical-partners > svg { flex-shrink: 0; width: 50px; height: 50px; color: #0057e6; }
.solven-clinical-partners span { font-size: .78rem; color: #0057b8; }
.solven-clinical-partners h3 { margin: .5rem 0; font-size: 1.4rem; }
.solven-clinical-partners p { color: #526782; line-height: 1.6; margin: 0; }
@media (max-width: 1050px) {
  #equipo .solven-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .navbar__logo-img { width: 154px; height: auto; }
  .footer .footer__logo-img { width: 200px; height: auto; }
  .topbar__logo img { width: 150px; height: auto; }
  #equipo .solven-team { grid-template-columns: minmax(0, 1fr); }
  #equipo .solven-team .usecase-card__image { height: 300px; }
  .solven-clinical-partners { padding: 1.4rem; gap: 1rem; }
}

/* Restored service composition and a lighter, visual project presentation. */
.innovation-solution__grid--three { grid-template-columns: 1fr; gap: .9rem; }
.innovation-solution__grid--three .innovation-capability { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: .9rem; padding: 1.25rem; align-items: start; }
.innovation-solution__grid--three .innovation-capability__icon { grid-column: 1; grid-row: 1 / 4; margin-top: .15rem; color: #0057e6; }
.innovation-solution__grid--three .innovation-capability__title { grid-column: 2; font-size: 1rem; }
.innovation-solution__grid--three .innovation-capability__description, .innovation-solution__grid--three .innovation-capability__link { grid-column: 2; }
.project-spotlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.project-spotlights .project-spotlight { width: auto; min-width: 0; max-width: none; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.project-spotlights .project-spotlight:hover { transform: none; box-shadow: none; }
.project-spotlight__brand { position: relative; isolation: isolate; height: 360px; overflow: hidden; border-radius: 26px; background: linear-gradient(125deg, #062b62, #075b9c 65%, #19a2bf); padding: 2rem; }
.project-spotlight--urgencias .project-spotlight__brand { background: linear-gradient(125deg, #062b62, #075b9c 65%, #19a2bf); }
.project-spotlight__eyebrow { position: relative; z-index: 2; display: block; color: #ffffffbf; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.project-spotlight__logo { position: relative; z-index: 2; display: block; width: 230px; height: 95px; object-fit: contain; object-position: left center; margin: .75rem 0; }
.project-spotlight__wordmark { position: relative; z-index: 2; display: flex; align-items: center; gap: .8rem; height: 95px; margin: .75rem 0; color: #fff; }
.project-spotlight__wordmark > svg { width: 48px; height: 48px; color: #7fe9f4; }
.project-spotlight__wordmark > span { font-size: 2.8rem; font-weight: 800; letter-spacing: -.05em; line-height: 1.1; }
.project-spotlight__wordmark small { display: block; font-size: .7rem; font-weight: 400; letter-spacing: .02em; margin-top: .5rem; }
.project-spotlight__preview { position: absolute; top: 220px; left: 12%; width: 85%; height: auto; max-width: none; border: 5px solid #ffffff35; border-radius: 12px; transform: rotate(-5deg); box-shadow: 0 20px 45px #0005; transition: transform .3s; }
.project-spotlight--urgencias .project-spotlight__preview { transform: rotate(5deg); left: 8%; }
.project-spotlight:hover .project-spotlight__preview { transform: rotate(0) translateY(-7px); }
.project-spotlight__orb { position: absolute; width: 270px; height: 270px; border-radius: 50%; background: #fff1; top: -120px; right: -70px; box-shadow: 0 0 0 50px #ffffff08, 0 0 0 100px #ffffff05; }
.project-spotlight__caption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0 .8rem; }
.project-spotlight__caption h3 { margin: 0 0 .5rem; color: #142c49; font-size: 1.2rem; line-height: 1.4; }
.project-spotlight__caption p { margin: 0; color: #627187; font-size: .85rem; line-height: 1.6; }
.project-spotlight__open { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #bfd3ed; border-radius: 50%; background: #fff; color: #0057d8; cursor: pointer; }
.project-spotlight__open:hover { background: #0057e6; color: #fff; }
.project-spotlight__open:focus-visible { outline: 3px solid #0057e6; outline-offset: 4px; }
.project-spotlight__recognition { display: flex; flex-wrap: wrap; gap: .6rem 1rem; border-top: 1px solid #dce6f2; padding-top: .9rem; }
.project-spotlight__recognition span { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; color: #426180; }
.project-spotlight__recognition svg { width: 15px; height: 15px; color: #0057c5; }
#equipo .solven-team { gap: 1.7rem; }
#equipo .solven-team .usecase-card { align-items: center; padding: 0 0 1rem; text-align: center; border: 0; background: transparent; box-shadow: none; }
#equipo .solven-team .usecase-card__image { height: 260px; border-radius: 24px; margin: 0 0 1.4rem; background: #e8eff7; }
#equipo .solven-team .usecase-card__profile { object-position: center 22%; transition: transform .35s; }
#equipo .solven-team .usecase-card:hover .usecase-card__profile { transform: scale(1.04); }
#equipo .solven-team .usecase-card__title { font-size: 1.1rem; line-height: 1.5; margin: 0 0 .4rem; }
#equipo .solven-team .usecase-card__role { font-size: .78rem; line-height: 1.5; color: #58718f; min-height: 2.5em; }
#equipo .solven-team .team-member-btn { margin-top: 1rem; padding: .5rem .1rem; border: 0; border-radius: 0; border-bottom: 1px solid #97b5db; background: transparent; color: #0057c5; }
#equipo .solven-team .team-member-btn:hover { color: #003480; border-color: #003480; }
#testimonios { padding-bottom: 4rem; }
.solven-clinical-partners { padding: 1.5rem 0; border: 0; border-block: 1px solid #d8e4f2; border-radius: 0; background: transparent; }
.logos__heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.8rem; }
.logos__heading .logos__title { margin: 0; color: #526782; font-size: .9rem; }
.solven-institution-carousel .logos__viewport { mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); padding-block: 1.5rem; }
.solven-institution-carousel .logos__track { width: max-content; gap: 3rem; }
.solven-institution-carousel .logos__item-wrapper { width: 190px; height: 135px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.solven-institution-carousel .logos__item { width: 160px; height: 80px; object-fit: contain; filter: none; opacity: 1; }
.solven-institution-carousel .logos__item-name { font-size: .7rem; margin-top: 1rem; color: #627187; }
@media (max-width: 760px) { .project-spotlights { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .project-spotlight__brand { height: 320px; } }
@media (max-width: 640px) {
  #equipo .solven-team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; }
  #equipo .solven-team .usecase-card__image { height: 190px; border-radius: 18px; }
  #equipo .solven-team .usecase-card__title { font-size: .93rem; }
  #equipo .solven-team .usecase-card__role { font-size: .7rem; }
  #equipo .solven-team .team-member-btn { font-size: .75rem; }
  .project-spotlight__brand { padding: 1.5rem; height: 295px; }
  .project-spotlight__caption h3 { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .project-spotlight__preview, #equipo .solven-team .usecase-card__profile { transition: none; }
  .solven-institution-carousel .logos__viewport { overflow-x: auto; }
}

/* Event logos and aligned project identities. */
.project-spotlight__identity { position: relative; z-index: 2; margin: .75rem 0; height: 112px; }
.project-spotlight__identity .project-spotlight__logo { height: 80px; margin: 0; }
.project-spotlight__tagline { margin: .4rem 0 0; color: #fff; font-size: .7rem; line-height: 1.5; }
.solven-events { margin-bottom: 3rem; }
.solven-events .logos__title { color: #526782; font-size: .9rem; margin-bottom: 2rem; }
.solven-events__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; align-items: center; }
.solven-events__logo { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 120px; padding: 1rem; border-radius: 16px; background: #fff; }
.solven-events__logo img { width: 100%; max-width: 200px; height: 85px; object-fit: contain; }
.solven-events__logo img[src$="etmday.png"], .solven-events__logo img[src$="eco-sd.png"], .solven-institution-carousel img[src$="herminda-martin.png"] { filter: brightness(0) saturate(100%); opacity: .8; }
.solven-events__logo:focus-visible { outline: 3px solid #0057e6; outline-offset: 4px; }
@media (max-width: 640px) {
  .solven-events__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .solven-events__logo { padding: .75rem; min-height: 100px; }
  .solven-events__logo img { height: 70px; }
  .project-spotlight__preview { top: 205px; }
  .hero__backing { margin-top: 1.7rem; }
  .hero__backing-items { align-items: flex-start; gap: .75rem; }
  .hero__backing-item { flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
  .hero__backing-item--anid img { width: auto; height: 64px; }
  .hero__backing-item--viu img { width: auto; height: 64px; }
  .hero__backing-item span { max-width: 130px; font-size: .66rem; }
}