/* ── SEMES PWA · app.css ── */
:root {
  --semes-navy:   #1e2d78;
  --semes-blue:   #2a3d9a;
  --semes-mid:    #3a50c0;
  --semes-light:  #6070d0;
  --semes-pale:   #eef0fa;
  --semes-accent: #b0b8e8;
  --semes-yellow: #f5c518;
  --text-main:    #1a2050;
  --text-sub:     #4a5a9a;
  --text-muted:   #8890c0;
  --border:       #d4d8f0;
  --bg:           #f2f3fa;
  --bg-card:      #ffffff;
  --green-dark:   #2a6a2a;
  --green-mid:    #4a9a4a;
  --green-pale:   #e8f4e8;
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    18px;
  --radius-icon:  18px;
  --nav-h:        58px;
  --top-h:        56px;
  --safe-b:       env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text-main); }
#app { display: flex; flex-direction: column; height: 100%; max-width: 430px; margin: 0 auto; background: var(--bg-card); position: relative; }

/* TOPBAR */
/* padding-top y height tienen en cuenta la safe area en iPhone (notch / Dynamic Island) */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); background: #fff; border-bottom: 1px solid var(--border); height: calc(var(--top-h) + env(safe-area-inset-top, 0px)); flex-shrink: 0; z-index: 20; }
.topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.topbar-logo { height: 34px; width: auto; object-fit: contain; flex-shrink: 0; }
.topbar-brand strong { display: block; font-size: 15px; font-weight: 700; color: var(--semes-navy); line-height: 1; }
.topbar-brand span { display: block; font-size: 8px; color: var(--text-sub); margin-top: 2px; line-height: 1.3; }
.socio-btn { background: var(--semes-accent); color: var(--semes-navy); border: none; border-radius: var(--radius-sm); font-size: 10px; font-weight: 700; padding: 6px 11px; white-space: nowrap; cursor: pointer; text-decoration: none; flex-shrink: 0; letter-spacing: 0.04em; }
.socio-btn:active { background: var(--semes-mid); color: #fff; }

/* MAIN */
.main-content { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background: var(--bg); }

/* BOTTOM NAV */
.bottom-nav { display: flex; align-items: stretch; background: #fff; border-top: 1px solid var(--border); height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b); flex-shrink: 0; z-index: 20; }
.bottom-nav.hidden { display: none; }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: none; cursor: pointer; padding: 5px 2px; transition: background 0.1s; }
.nav-item:active { background: var(--semes-pale); }
.nav-icon { font-size: 19px; line-height: 1; color: var(--text-muted); }
.nav-label { font-size: 8px; color: var(--text-muted); font-weight: 500; }
.nav-item.active .nav-icon, .nav-item.active .nav-label { color: var(--semes-navy); }

/* TRANSITION */
.screen-enter { animation: slideIn 0.2s ease-out; }
@keyframes slideIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }

/* BANNER */
.banner-grad { height: 100px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e2d78 0%, #2a3d9a 50%, #4a60d8 100%); padding: 12px 16px; cursor: pointer; }
.banner-text { color: #fff; text-align: center; }
.banner-text h3 { font-size: 15px; font-weight: 700; }
.banner-text p { font-size: 10px; opacity: 0.8; margin-top: 3px; }

/* HOME GRID */
.section-lbl { font-size: 10px; color: var(--text-muted); font-weight: 700; padding: 11px 14px 5px; letter-spacing: 0.07em; text-transform: uppercase; }
.icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 0 9px 4px; }
.icon-btn { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-icon); padding: 12px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: background 0.12s, transform 0.1s; box-shadow: 0 1px 4px rgba(30,45,120,0.07); position: relative; }
.icon-btn:active { background: var(--semes-pale); transform: scale(0.96); }
.icon-img { width: 56px; height: 56px; object-fit: contain; display: block; }
.icon-label { font-size: 11px; color: var(--semes-navy); font-weight: 600; text-align: center; line-height: 1.2; }

/* CONGRESO ROW */
.congreso-row { margin: 4px 9px 10px; background: var(--green-pale); border: 1px solid var(--green-mid); border-radius: var(--radius-md); padding: 12px 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: background 0.12s; position: relative; }
.congreso-row:active { background: #d0ecd0; }
.congreso-dot { width: 9px; height: 9px; background: var(--green-mid); border-radius: 50%; position: absolute; top: 10px; right: 12px; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity:1;transform:scale(1); } 50% { opacity:0.5;transform:scale(1.4); } }
.congreso-icon { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.congreso-row-text strong { font-size: 13px; color: var(--green-dark); display: block; font-weight: 700; }
.congreso-row-text span { font-size: 10px; color: var(--green-mid); margin-top: 2px; display: block; }

/* SECTION HEADER */
.sec-header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.sec-back { font-size: 26px; color: var(--semes-navy); cursor: pointer; line-height: 1; padding-right: 4px; flex-shrink: 0; }
.sec-title { font-size: 15px; font-weight: 700; color: var(--semes-navy); }

/* WEBVIEW */
.webview-wrap { display: flex; flex-direction: column; height: 100%; }
.webview-iframe { flex: 1; border: none; width: 100%; display: block; }

/* OFFLINE */
.offline-bar { background: #f5c518; color: #1a1a1a; font-size: 11px; text-align: center; padding: 5px; font-weight: 600; }

/* LOADING */
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px; gap: 14px; }
.spinner { width: 30px; height: 30px; border: 3px solid var(--semes-pale); border-top-color: var(--semes-navy); border-radius: 50%; animation: spin 0.65s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-txt { font-size: 12px; color: var(--text-muted); }

/* NEWS CARDS */
.news-feed { padding: 10px; }
.news-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 9px; overflow: hidden; cursor: pointer; transition: background 0.12s; }
.news-card:active { background: var(--semes-pale); }
.news-thumb { width: 100%; height: 115px; object-fit: cover; display: block; }
.news-thumb-ph { width: 100%; height: 60px; background: linear-gradient(135deg, var(--semes-pale), var(--semes-accent)); }
.news-body { padding: 10px 12px 11px; }
.news-cat { font-size: 9px; font-weight: 700; letter-spacing: 0.05em; background: var(--semes-pale); color: var(--semes-navy); border-radius: 4px; padding: 2px 7px; display: inline-block; margin-bottom: 5px; }
.news-title { font-size: 13px; font-weight: 600; color: var(--text-main); line-height: 1.4; margin-bottom: 4px; }
.news-excerpt { font-size: 11px; color: var(--text-sub); line-height: 1.5; margin-bottom: 4px; }
.news-date { font-size: 10px; color: var(--text-muted); }
.load-more { display: block; width: 100%; padding: 12px; background: var(--semes-pale); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; color: var(--semes-navy); cursor: pointer; text-align: center; margin-top: 4px; }
.load-more:active { background: var(--semes-mid); color: #fff; }

/* LIST ITEMS */
.list-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--bg-card); cursor: pointer; transition: background 0.12s; }
.list-item:active { background: var(--semes-pale); }
.li-icon { width: 40px; height: 40px; background: var(--semes-pale); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.li-body { flex: 1; min-width: 0; }
.li-title { font-size: 13px; font-weight: 600; color: var(--semes-navy); margin-bottom: 2px; }
.li-desc { font-size: 11px; color: var(--text-sub); line-height: 1.4; }
.li-arrow { color: var(--text-muted); font-size: 18px; align-self: center; flex-shrink: 0; }

/* TABS */
.tabs-row { display: flex; background: #fff; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs-row::-webkit-scrollbar { display: none; }
.tab-btn { flex-shrink: 0; padding: 10px 16px; font-size: 12px; color: var(--text-muted); background: none; border: none; border-bottom: 2.5px solid transparent; cursor: pointer; font-weight: 600; white-space: nowrap; }
.tab-btn.active { color: var(--semes-navy); border-bottom-color: var(--semes-navy); }

/* CONGRESO */
.cong-banner { background: linear-gradient(135deg, var(--semes-navy), var(--semes-mid)); padding: 16px; text-align: center; }
.cong-banner h2 { color: #fff; font-size: 16px; font-weight: 700; }
.cong-banner p { color: var(--semes-accent); font-size: 11px; margin-top: 4px; }
.day-filter { display: flex; gap: 7px; padding: 10px 12px; background: #fff; border-bottom: 1px solid var(--border); }
.day-btn { flex: 1; text-align: center; padding: 7px 4px; font-size: 11px; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid var(--border); cursor: pointer; background: var(--semes-pale); color: var(--semes-navy); transition: all 0.15s; }
.day-btn.active { background: var(--semes-navy); color: #fff; border-color: var(--semes-navy); }
.content-pad { padding: 11px; }
.activity-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 7px; }
.act-time { font-size: 10px; color: var(--semes-mid); font-weight: 700; margin-bottom: 3px; }
.act-title { font-size: 12px; font-weight: 600; color: var(--text-main); line-height: 1.4; margin-bottom: 5px; }
.act-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.act-tag { font-size: 9px; padding: 2px 7px; border-radius: 4px; font-weight: 600; }
.act-tag.aula { background: var(--semes-pale); color: var(--semes-navy); }
.act-tag.grupo { background: var(--green-pale); color: var(--green-dark); }
.act-tag.seccion { background: #fef3e2; color: #7a4f0a; }
.hotel-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 13px; margin-bottom: 9px; display: flex; gap: 12px; align-items: flex-start; }
.hotel-icon-wrap { width: 42px; height: 42px; background: var(--semes-pale); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.hotel-name { font-size: 13px; font-weight: 700; color: var(--semes-navy); }
.hotel-addr { font-size: 10px; color: var(--text-sub); margin-top: 2px; }
.hotel-phone { font-size: 11px; color: var(--semes-mid); margin-top: 5px; cursor: pointer; font-weight: 600; }
.hotel-tarifa { font-size: 10px; color: var(--green-dark); font-weight: 600; margin-top: 2px; }
.sponsor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.sponsor-item { background: #f7f8fc; border: 1px solid var(--border); border-radius: var(--radius-sm); height: 56px; display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--text-muted); text-align: center; padding: 6px; cursor: pointer; }

/* QUIZ */
.quiz-notif { background: var(--semes-navy); border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 13px; display: flex; align-items: center; gap: 10px; }
.quiz-notif strong { display: block; font-size: 12px; font-weight: 700; color: #fff; }
.quiz-notif span { font-size: 10px; color: rgba(255,255,255,0.8); }
.quiz-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; }
.quiz-num { font-size: 10px; color: var(--semes-mid); font-weight: 700; margin-bottom: 6px; }
.quiz-q { font-size: 13px; font-weight: 600; color: var(--text-main); line-height: 1.5; margin-bottom: 13px; }
.quiz-opt { display: block; width: 100%; text-align: left; background: var(--semes-pale); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 13px; font-size: 12px; font-weight: 500; color: var(--text-main); margin-bottom: 7px; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.quiz-opt:hover { background: var(--semes-mid); color: #fff; border-color: var(--semes-mid); }
.quiz-opt.correct { background: var(--green-pale); border-color: var(--green-mid); color: var(--green-dark); }
.quiz-opt.wrong { background: #fdeaea; border-color: #d04040; color: #8a2020; }
.quiz-feedback { background: var(--green-pale); border: 1px solid var(--green-mid); border-radius: var(--radius-sm); padding: 11px 13px; font-size: 12px; color: var(--green-dark); margin-top: 10px; display: none; }

/* REDES */
.redes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px; }
.red-btn { display: flex; align-items: center; gap: 10px; padding: 13px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: background 0.12s; }
.red-btn:active { background: var(--semes-pale); }
.red-icon { font-size: 24px; }
.red-name { font-size: 13px; font-weight: 600; color: var(--semes-navy); }

/* UTILIDADES */
.util-item { display: flex; align-items: center; gap: 13px; padding: 13px 14px; background: var(--bg-card); border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.12s; }
.util-item:active { background: var(--semes-pale); }
.util-icon { font-size: 26px; width: 42px; text-align: center; flex-shrink: 0; }
.util-name { font-size: 13px; font-weight: 600; color: var(--semes-navy); }
.util-desc { font-size: 10px; color: var(--text-sub); margin-top: 1px; }
.util-arrow { margin-left: auto; color: var(--text-muted); font-size: 18px; flex-shrink: 0; }

/* GRUPOS GRID */
.grupos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; }
.grupo-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; text-align: center; transition: background 0.12s; }
.grupo-item:active { background: var(--semes-pale); }
.grupo-item img { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; }
.grupo-name { font-size: 11px; font-weight: 600; color: var(--semes-mid); line-height: 1.3; }

/* INFO BOX */
.info-box { background: var(--semes-pale); border-radius: var(--radius-sm); padding: 11px 13px; font-size: 11px; color: var(--semes-mid); line-height: 1.6; margin-top: 8px; }

/* TOAST */
.notif-toast { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); background: var(--semes-navy); color: #fff; border-radius: var(--radius-md); padding: 11px 14px; display: flex; align-items: center; gap: 10px; max-width: 380px; width: calc(100% - 24px); z-index: 999; box-shadow: 0 6px 24px rgba(30,45,120,0.4); animation: toastIn 0.28s ease; }
.notif-toast.hidden { display: none; }
@keyframes toastIn { from { opacity:0; transform: translateX(-50%) translateY(-14px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }
@keyframes slideUpIn { from { opacity:0; transform: translateX(-50%) translateY(16px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }
.notif-icon-wrap { font-size: 22px; flex-shrink: 0; }
.notif-body { flex: 1; min-width: 0; }
.notif-body strong { display: block; font-size: 12px; font-weight: 700; }
.notif-body span { font-size: 11px; opacity: 0.85; }
.notif-close { background: none; border: none; color: rgba(255,255,255,0.55); font-size: 15px; cursor: pointer; padding: 2px; flex-shrink: 0; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── SLIDING DETAIL PANEL ── */
#app { position: relative; overflow: hidden; }
#grupoDetailPanel { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg); z-index: 50; overflow-y: auto; transform: translateX(100%); transition: transform 0.22s ease-out; -webkit-overflow-scrolling: touch; }