:root {
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: #12335c;
  background: #f3f6fb;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-width: 320px; background: #f3f6fb; }
body.modal-open { overflow: hidden; }
button, a { font: inherit; }
button { color: inherit; }
#app { min-height: 100vh; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  min-height: 66px; padding: 8px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(255,255,255,.96); border-bottom: 1px solid #dce4ef;
  backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand img { width: 48px; height: 48px; object-fit: contain; flex: 0 0 auto; }
.brand strong { font-size: 1rem; line-height: 1.05; color: #102f57; white-space: nowrap; }
.top-actions { position: relative; display: flex; align-items: center; gap: 3px; }
.top-actions > button { border: 0; background: transparent; padding: 7px 6px; font-size: .69rem; cursor: pointer; white-space: nowrap; }
.session-btn { color: #0d58b7; font-weight: 700; }
.install-btn { color: #748196; }
.install-btn:disabled { opacity: .55; cursor: default; }

.member-control { position: relative; }
.member-trigger {
  min-height: 38px; padding: 3px 7px 3px 4px;
  display: flex; align-items: center; gap: 6px;
  border: 1px solid #d9e2ed; border-radius: 20px; background: #fff; cursor: pointer;
}
.member-trigger img, .member-avatar { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.member-avatar { display: grid; place-items: center; background: #eaf0f7; color: #a8b8ca; }
.member-name { max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; font-weight: 700; color: #12335c; }
.member-chevron { color: #718096; font-size: .75rem; }
.member-menu {
  position: absolute; right: 0; top: calc(100% + 7px); width: 205px; padding: 10px;
  background: #fff; border: 1px solid #d9e2ed; border-radius: 12px;
  box-shadow: 0 12px 30px rgba(31,59,91,.16);
}
.member-menu[hidden] { display: none; }
.member-email { display: block; padding: 2px 3px 9px; overflow: hidden; text-overflow: ellipsis; color: #718096; font-size: .65rem; }
.logout-btn { width: 100%; padding: 8px 9px; border: 0; border-radius: 8px; background: #f1f5f9; color: #174b82; text-align: left; font-size: .7rem; font-weight: 700; cursor: pointer; }

.home-cpc { width: min(100%, 760px); margin: 0 auto; padding: 14px; flex: 1; }
.tv-card {
  min-height: 90px; padding: 9px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1px solid #d9e2ed; border-radius: 18px;
  box-shadow: 0 5px 16px rgba(31,59,91,.06);
}
.tv-preview { width: 132px; flex: 0 0 132px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 11px; background: #000; }
.tv-preview video { width: 100%; height: 100%; display: block; object-fit: cover; background: #000; }
.tv-copy { min-width: 0; flex: 1; }
.tv-copy strong, .tv-copy small { display: block; }
.live-label { display: inline-block; margin-bottom: 3px; padding: 2px 5px; border-radius: 4px; background: #d92f3b; color: #fff; font-size: .48rem; font-weight: 800; letter-spacing: .04em; }
.tv-copy strong { font-size: .88rem; color: #12335c; }
.tv-copy small { margin-top: 3px; color: #75849a; font-size: .63rem; }
.tv-audio-btn { margin-top: 6px; padding: 5px 8px; border: 1px solid #cfdae6; border-radius: 999px; background: #f5f8fc; color: #24547f; font-size: .6rem; font-weight: 800; cursor: pointer; }
.tv-audio-btn[aria-pressed="true"] { background: #eaf5ef; border-color: #bcd9c7; color: #216b3f; }
.expand-tv { width: 34px; height: 34px; flex: 0 0 auto; border: 0; border-radius: 50%; background: #edf3fa; color: #0d4d89; font-size: 1.05rem; cursor: pointer; }

.modules-section { display: grid; gap: 9px; }
.module-card {
  position: relative; min-height: 78px; width: 100%; padding: 10px 14px 10px 17px;
  display: flex; align-items: center; gap: 12px; overflow: hidden;
  text-align: left; text-decoration: none; background: #fff; color: #12335c;
  border: 1px solid #d9e2ed; border-radius: 18px;
  box-shadow: 0 5px 16px rgba(31,59,91,.06); cursor: pointer;
}
.module-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent); }
.module-card:active { transform: scale(.99); }
.module-icon { width: 38px; flex: 0 0 38px; text-align: center; color: var(--accent); font-size: 1.45rem; font-weight: 700; }
.module-logo { display: flex; align-items: center; justify-content: center; }
.module-logo img { width: 38px; height: 38px; object-fit: contain; display: block; }
.module-copy { min-width: 0; flex: 1; }
.module-copy strong, .module-copy small { display: block; }
.module-copy strong { color: #12335c; font-size: .83rem; letter-spacing: .035em; line-height: 1.15; }
.module-copy small { margin-top: 4px; color: #687b93; font-size: .68rem; line-height: 1.2; }
.arrow { color: #11598f; font-size: 1.8rem; font-weight: 300; line-height: 1; }
.accent-blue { --accent: #1768c4; }
.accent-navy { --accent: #24539a; }
.accent-green { --accent: #1a9a79; }
.accent-purple { --accent: #7b59b5; }
.accent-infospe { --accent: #6d7787; }
.accent-orange { --accent: #c77a21; }

.app-footer {
  width: min(100%, 760px); margin: 0 auto; padding: 22px 14px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #8794a5;
}
.powered-by { display: flex; align-items: center; gap: 7px; font-size: .61rem; }
.powered-by img { width: 70px; height: auto; display: block; }
.version { font-size: .59rem; white-space: nowrap; }

.infospe-modal[hidden] { display: none; }
.infospe-modal {
  position: fixed; inset: 0; z-index: 1100; padding: 12px;
  display: flex; align-items: stretch; justify-content: center;
  background: rgba(8,19,34,.76);
}
.infospe-panel {
  width: min(100%, 920px); max-height: calc(100vh - 24px); margin: auto;
  display: flex; flex-direction: column; overflow: hidden;
  background: #f5f7fa; border: 1px solid #d7e0ea; border-radius: 20px;
  box-shadow: 0 22px 70px rgba(0,0,0,.28);
}
.infospe-panel-top {
  padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border-bottom: 1px solid #dce4ed;
}
.infospe-heading { display: flex; align-items: center; gap: 11px; min-width: 0; }
.infospe-heading img { width: 54px; height: 42px; object-fit: contain; flex: 0 0 auto; }
.infospe-heading strong, .infospe-heading span { display: block; }
.infospe-heading strong { color: #17395f; font-size: .9rem; }
.infospe-heading span { margin-top: 2px; color: #718095; font-size: .65rem; }
.infospe-close { width: 34px; height: 34px; flex: 0 0 auto; border: 0; border-radius: 50%; background: #eef3f8; color: #17395f; font-size: 1.35rem; cursor: pointer; }
.infospe-content { overflow-y: auto; padding: 14px; }

.infospe-info-block,
.infospe-commercial,
.infospe-cert-card {
  background: #fff; border: 1px solid #dce4ed; border-radius: 16px;
  box-shadow: 0 5px 16px rgba(31,59,91,.05);
}
.infospe-intro-layout { padding: 14px; display: grid; grid-template-columns: minmax(0,1fr) 190px; gap: 16px; align-items: start; }
.infospe-info-copy p { margin: 0 0 10px; color: #40556f; font-size: .78rem; line-height: 1.55; }
.infospe-info-copy p:last-child { margin-bottom: 0; }
.infospe-accreditation-inline { min-width: 0; }
.infospe-accreditation-inline > strong { display: block; margin-bottom: 7px; color: #17395f; font-size: .78rem; }
.infospe-doc-thumb { position: relative; display: block; overflow: hidden; text-decoration: none; background: #fff; border: 1px solid #d7e0e9; border-radius: 12px; box-shadow: 0 5px 14px rgba(31,59,91,.06); }
.infospe-doc-thumb:hover { box-shadow: 0 8px 20px rgba(31,59,91,.11); }
.infospe-accreditation-thumb { width: 100%; }
.infospe-pdf-preview { display: block; height: 118px; overflow: hidden; background: #f8fafc; }
.infospe-pdf-preview iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; background: #fff; }
.infospe-thumb-action { position: absolute; left: 7px; bottom: 7px; padding: 5px 8px; border-radius: 999px; background: rgba(15,47,84,.92); color: #fff; font-size: .56rem; font-weight: 800; }

.infospe-commercial { margin-top: 12px; padding: 14px; }
.infospe-commercial-row { display: grid; grid-template-columns: 145px minmax(0,1fr); gap: 14px; align-items: start; }
.infospe-commercial-row + .infospe-commercial-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e2e8f0; }
.infospe-commercial-row > strong { color: #17395f; font-size: .78rem; }
.infospe-commercial-row p { margin: 0; color: #40556f; font-size: .76rem; line-height: 1.55; }
.infospe-commercial-long p + p { margin-top: 8px; }

.infospe-constancias { margin-top: 12px; }
.infospe-constancias h3 { margin: 0; color: #17395f; font-size: .9rem; }
.infospe-intro { margin: 5px 0 10px; color: #6c7b8d; font-size: .7rem; line-height: 1.45; }
.infospe-cert-list { display: grid; grid-template-columns: 1fr; gap: 9px; }
.infospe-cert-card { min-width: 0; padding: 9px; display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 12px; align-items: center; }
.infospe-cert-thumb { width: 132px; height: 92px; }
.infospe-cert-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; }
.infospe-cert-copy { min-width: 0; }
.infospe-cert-title-row { display: flex; align-items: flex-start; gap: 8px; }
.infospe-cert-title-row strong { color: #1d3e61; font-size: .73rem; line-height: 1.25; }
.infospe-cert-number { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: #edf2f7; color: #365778; font-size: .58rem; font-weight: 800; }
.infospe-cert-copy p { margin: 7px 0 0; color: #617185; font-size: .68rem; line-height: 1.45; }

@media (max-width: 560px) {
  .brand strong { font-size: .88rem; }
  .brand img { width: 43px; height: 43px; }
  .install-btn { display: none; }
  .home-cpc { padding: 11px; }
  .tv-preview { width: 112px; flex-basis: 112px; }
  .tv-audio-btn { font-size: .56rem; padding: 4px 7px; }
  .module-card { min-height: 74px; }
  .member-name { max-width: 82px; }
  .infospe-modal { padding: 0; }
  .infospe-panel { max-height: 100vh; min-height: 100vh; border-radius: 0; border: 0; }
  .infospe-content { padding: 11px; }
  .infospe-heading img { width: 46px; height: 36px; }
  .infospe-intro-layout { grid-template-columns: 1fr; gap: 12px; }
  .infospe-accreditation-inline { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 9px; align-items: center; }
  .infospe-accreditation-inline > strong { margin: 0; }
  .infospe-accreditation-thumb { width: 150px; max-width: 100%; }
  .infospe-pdf-preview { height: 92px; }
  .infospe-commercial-row { grid-template-columns: 1fr; gap: 5px; }
  .infospe-cert-card { grid-template-columns: 96px minmax(0,1fr); gap: 9px; }
  .infospe-cert-thumb { width: 96px; height: 72px; }
  .infospe-cert-copy p { font-size: .61rem; }
}

@media (min-width: 720px) {
  .topbar { padding: 9px 24px; }
  .home-cpc { padding: 18px 20px; }
  .tv-card { min-height: 112px; }
  .tv-preview { width: 170px; flex-basis: 170px; }
  .module-card { min-height: 82px; }
  .app-footer { padding: 24px 20px 16px; }
}