/* Identidad SulbaTEK (manual de marca): Azul Noche, Azul Real, Blanco Hueso, Gris Neutro · Poppins */
:root {
  color-scheme: light;
  --noche: #050F3F;
  --brand: #4260E6;          /* Azul Real (puede cambiarse por BRAND_COLOR) */
  --hueso: #F4F3EE;
  --gris: #2C2D2D;
  --bg: var(--hueso);
  --panel: #EAE9E2;
  --card: #FFFFFF;
  --text: var(--noche);
  --muted: #5E6378;
  --line: #E0DED5;
  --in: #FFFFFF;
  --out: var(--brand);
  --danger: #D64545;
  --shadow: 0 1px 2px rgba(5, 15, 63, .06), 0 4px 14px rgba(5, 15, 63, .06);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  font: 15px/1.45 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
#app { position: relative; top: var(--app-top, 0px); height: 100vh; height: 100dvh; height: var(--app-h, 100dvh); display: flex; flex-direction: column; max-width: 820px; margin: 0 auto; background: var(--bg); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-size: 16px; } /* evita el zoom automático de iOS al enfocar */
.hidden { display: none !important; }

/* ---------- marca ---------- */
.brandmark { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.brandmark img { height: 30px; width: auto; flex: none; }
.wordmark { font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.wordmark b { color: var(--brand); font-weight: 700; }
.wordmark span { color: var(--hueso); }
.top .wordmark { font-size: 20px; }

/* ---------- barra superior ---------- */
.top {
  display: flex; align-items: center; gap: 6px; padding: calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left));
  background: var(--noche); color: var(--hueso);
}
.top h1 { font-size: 18px; margin: 0; flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .ic { color: var(--hueso); width: 44px; height: 44px; border-radius: 50%; font-size: 20px; flex: none; }
.top .ic:active { background: rgba(244, 243, 238, .12); }
.top .ic .i { width: 24px; height: 24px; }
.top .ic { display: grid; place-items: center; }
.top .ctitle { flex: 1; min-width: 0; color: var(--hueso); text-align: left; min-height: 48px; display: flex; align-items: center; gap: 10px; }
.top .ctitle .avatar { box-shadow: 0 0 0 2px rgba(244, 243, 238, .25); }
.ctext { min-width: 0; display: flex; flex-direction: column; }
.cname { font-size: 16.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .ctitle small { font-size: 12px; font-weight: 400; color: #AEB8EE; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- búsqueda y filtros ---------- */
.search { padding: 8px 12px 4px; background: var(--card); }
.sbox { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 22px; background: #F0F1F5; color: var(--muted); }
.sbox .i { width: 20px; height: 20px; flex: none; }
.sbox input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 0; outline: none; }
.filters { display: flex; gap: 8px; padding: 6px 12px 8px; overflow-x: auto; background: var(--card); scrollbar-width: none; flex: none; }
.filters::-webkit-scrollbar { display: none; }
.fchip { flex: none; padding: 6px 14px; border-radius: 18px; background: #F0F1F5; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.fchip.on { background: #DCE4FD; color: var(--brand); font-weight: 600; }
.fabnew { position: absolute; right: calc(16px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border-radius: 18px; background: var(--brand); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(66, 96, 230, .4); z-index: 3; }
.fabnew .i { width: 26px; height: 26px; }
.list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 0 calc(90px + env(safe-area-inset-bottom)); background: var(--card); }
.row { position: relative; display: flex; gap: 13px; min-height: 72px; padding: 10px 16px; width: 100%; text-align: left; align-items: center; background: var(--card); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.row::after { content: ''; position: absolute; left: 76px; right: 0; bottom: 0; height: 1px; background: var(--line); }
.row:active { background: #F1F3FB; }
.row.unread .name { font-weight: 700; }
.row.unread .when { color: var(--brand); font-weight: 600; }
.owner { font-size: 11.5px; color: var(--brand); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner.none { color: var(--muted); }
.avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--noche); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 16px; letter-spacing: .02em; }
.avatar.sm { width: 38px; height: 38px; font-size: 14px; }
.avatar.xl { width: 104px; height: 104px; font-size: 36px; }
.rowmain { flex: 1; min-width: 0; }
.rowline { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.when { color: var(--muted); font-size: 12px; flex: none; }
.rowline .preview { color: var(--muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; display: block; }
.rowline .preview .tick { margin-right: 3px; }
.i { width: 24px; height: 24px; fill: currentColor; display: block; }
.pinned { width: 16px; height: 16px; color: var(--muted); flex: none; }
.ch { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 0 6px; border-radius: 6px; margin-right: 5px; background: var(--panel); color: var(--noche); vertical-align: 1px; }
.ch-whatsapp { background: #DDF6E4; color: #146C34; }
.ch-instagram { background: #FCE4F1; color: #9C1D63; }
.ch-facebook { background: #E3EAFD; color: #1E3FA8; }
.badge { flex: none; margin-left: 6px; background: var(--brand); color: #fff; border-radius: 11px; min-width: 22px; height: 22px; padding: 0 6px; font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.empty { color: var(--muted); text-align: center; padding: 40px 20px; }

/* ---------- chat ---------- */
.msgs { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 10px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 3px;
  background-color: #ECEAE2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23050F3F' stroke-opacity='.06' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 22h20a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H26l-6 5v-5h-2a4 4 0 0 1-4-4V26a4 4 0 0 1 4-4z'/%3E%3Ccircle cx='88' cy='30' r='8'/%3E%3Cpath d='M70 82l8-8 8 8M78 74v20'/%3E%3Cpath d='M20 88c6-10 14-10 20 0s14 10 20 0'/%3E%3Cpath d='M96 96l6 6M102 96l-6 6'/%3E%3Ccircle cx='60' cy='58' r='2'/%3E%3C/g%3E%3C/svg%3E"); }
.chatwrap { position: relative; flex: 1; min-height: 0; }
.day { position: sticky; top: 4px; z-index: 1; align-self: center; font-size: 11.5px; font-weight: 500; color: var(--muted); background: #fff; padding: 4px 12px; border-radius: 8px; margin: 8px 0 4px; box-shadow: 0 1px 1px rgba(5, 15, 63, .08); }
.unreadsep { align-self: stretch; text-align: center; font-size: 12px; font-weight: 600; color: var(--brand); background: rgba(255, 255, 255, .75); padding: 5px; margin: 6px -10px; }
.bubble { position: relative; max-width: 80%; padding: 6px 9px 6px 10px; border-radius: 10px; word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; box-shadow: 0 1px 1px rgba(5, 15, 63, .1); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; margin-top: 3px; }
.bubble.in { align-self: flex-start; background: #fff; border-top-left-radius: 0; }
.bubble.out { align-self: flex-end; background: #DCE4FD; color: var(--noche); border-top-right-radius: 0; }
.bubble.in::before, .bubble.out::before { content: ''; position: absolute; top: 0; width: 8px; height: 10px; }
.bubble.in::before { left: -7px; background: linear-gradient(225deg, #fff 50%, transparent 50%); }
.bubble.out::before { right: -7px; background: linear-gradient(135deg, #DCE4FD 50%, transparent 50%); }
.btext { user-select: text; -webkit-user-select: text; }
.bubble .meta { float: right; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); margin: 6px 0 -3px 10px; line-height: 1; }
.tick { display: inline-flex; align-items: center; color: #8E95A9; font-size: 11px; }
.tk { height: 11px; width: auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tick.read { color: #2E6CF6; }
.tick.fail { color: var(--danger); letter-spacing: 0; }
.bubble.failed .meta { color: var(--danger); }
.bubble img { display: block; max-width: 100%; max-height: 320px; border-radius: 8px; object-fit: cover; }
.imgbtn { display: block; padding: 0; margin: -2px -5px 2px -6px; border-radius: 8px; overflow: hidden; }
.bubble a { color: #1F55D6; text-decoration: underline; }
.bubble em { opacity: .7; }
.bubble a.file { display: inline-block; padding: 9px 12px; border-radius: 8px; background: rgba(5, 15, 63, .06); text-decoration: none; font-weight: 600; color: var(--noche); }

/* reproductor de notas de voz */
.aplayer { display: flex; align-items: center; gap: 8px; width: 250px; max-width: 100%; padding: 4px 0 2px; }
.aplay { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--noche); }
.aplay .i { width: 30px; height: 30px; }
.acol { flex: 1; min-width: 0; }
.wave { display: flex; align-items: center; gap: 2px; height: 28px; cursor: pointer; }
.wave span { flex: 1; border-radius: 2px; background: #B3BAD0; min-height: 3px; }
.wave span.on { background: var(--brand); }
.arow { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.atime { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.aspeed { font-size: 11px; font-weight: 700; color: #fff; background: #8E95A9; border-radius: 10px; padding: 1px 7px; }

.tobottom { position: absolute; right: 12px; bottom: 12px; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--muted); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(5, 15, 63, .2); z-index: 2; }
.tbcount { position: absolute; top: -6px; right: -4px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px; }
.banner { padding: 8px 14px; background: #FFF5D6; color: #6B4E00; font-size: 12.5px; border-top: 1px solid #F0DFA6; }

.composer { position: relative; display: flex; align-items: flex-end; gap: 6px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: #ECEAE2; }
.composer textarea { flex: 1; resize: none; max-height: 120px; padding: 11px 16px; border-radius: 24px; border: 0; background: #fff; outline: none; line-height: 1.35; box-shadow: 0 1px 1px rgba(5, 15, 63, .08); }
.fab { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; touch-action: none; transition: transform .15s; }
.fab:disabled { opacity: .5; }
.clip { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: #fff; box-shadow: 0 1px 1px rgba(5, 15, 63, .08); }
.clip .i { transform: rotate(45deg); }
.clip:active { background: var(--panel); }
.recinfo, .lockhint { display: none; }
.composer.recording .clip, .composer.recording textarea { display: none; }
.composer.recording .recinfo { flex: 1; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; background: #fff; border-radius: 24px; transform: translateX(var(--slide, 0)); }
.composer.recording .slide { margin-left: auto; color: var(--muted); font-size: 13px; }
.composer.recording .fab { transform: scale(1.35); background: var(--danger); }
.composer.recording .lockhint { display: flex; flex-direction: column; align-items: center; position: absolute; right: 14px; bottom: 76px; background: #fff; border-radius: 20px; padding: 8px 6px; color: var(--muted); box-shadow: var(--shadow); font-size: 12px; }
.lockhint .i { width: 18px; height: 18px; }
.recinfo .time { font-variant-numeric: tabular-nums; }

.suggest { background: #fff; border-top: 1px solid var(--line); max-height: 40vh; overflow-y: auto; }
.sitem { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.sitem b { color: var(--brand); font-size: 13px; }
.sitem span { font-size: 13.5px; color: var(--noche); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.snone { padding: 12px 16px; color: var(--muted); font-size: 13px; }

.recbar { display: flex; align-items: center; gap: 10px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: #ECEAE2; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: pulse 1s infinite; flex: none; }
@keyframes pulse { 50% { opacity: .25; } }
.recbar .time { font-variant-numeric: tabular-nums; }
.rechint { flex: 1; color: var(--muted); font-size: 13px; }
.ic.dark { color: var(--muted); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
@media (max-width: 480px) { .bubble { max-width: 86%; } }

/* visor de fotos */
.viewer { position: fixed; inset: 0; z-index: 20; background: #000; display: flex; flex-direction: column; }
.vbar { display: flex; justify-content: space-between; align-items: center; padding: calc(8px + env(safe-area-inset-top)) 8px 8px 16px; }
.vbar .ic { color: #fff; width: 44px; height: 44px; display: grid; place-items: center; }
.vlink { color: #fff; font-size: 14px; }
.vimg { flex: 1; overflow: auto; display: grid; place-items: center; }
.vimg img { max-width: 100%; max-height: calc(100vh - 80px); transition: transform .2s; cursor: zoom-in; }
.vimg img.zoom { transform: scale(2.2); cursor: zoom-out; }

/* ---------- botones ---------- */
.go { min-height: 46px; padding: 11px; border-radius: 12px; background: var(--brand); color: #fff; font-weight: 600; }
.go:active { filter: brightness(.92); }
.go:disabled { opacity: .6; }
.ghost { min-height: 44px; padding: 8px 14px; border-radius: 12px; background: var(--panel); color: var(--noche); font-weight: 500; }
.ghost.wide { width: 100%; }

/* ---------- entrada ---------- */
.login { margin: auto; width: min(380px, 90%); display: flex; flex-direction: column; gap: 12px; text-align: center; padding: 24px 0; }
.login .logo { width: 92px; height: 92px; border-radius: 24px; margin: 0 auto 6px; box-shadow: 0 10px 30px rgba(5, 15, 63, .25); }
.login .wordmark { font-size: 34px; color: var(--noche); }
.login .wordmark b { color: var(--noche); }
.login .wordmark span { color: var(--gris); }
.login .tagline { margin: -4px 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); }
.login input { padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); outline: none; }
.login input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(66, 96, 230, .15); }
.login .go { padding: 13px; font-size: 16px; }
.login .err { color: var(--danger); min-height: 1.2em; font-size: 14px; }
.login .foot { margin-top: 18px; font-size: 11.5px; color: var(--muted); }

/* ---------- hojas (ajustes, etiquetas, adjuntos) ---------- */
.sheet { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h, 100dvh); background: rgba(5, 15, 63, .55); display: grid; place-items: end center; z-index: 5; }
.sheet > div { width: min(520px, 100%); max-height: 90%; overflow-y: auto; background: var(--bg); border-radius: 22px 22px 0 0; padding: 20px 16px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 -8px 30px rgba(5, 15, 63, .2); }
.sheet h2 { margin: 0; font-size: 17px; font-weight: 700; }
.sheet p { margin: 0; color: var(--muted); font-size: 13.5px; }
.sheet a { color: var(--brand); font-weight: 600; }
.sheet input { padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); outline: none; }
.sheet input:focus { border-color: var(--brand); }
.sheet select { padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-size: 16px; width: 100%; }
.notif { display: flex; flex-direction: column; gap: 8px; }

#toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--noche); color: var(--hueso); padding: 10px 18px; border-radius: 14px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: 90%; text-align: center; z-index: 10; box-shadow: var(--shadow); }
#toast.show { opacity: .97; }

/* equipo y accesos */
.team { display: flex; flex-direction: column; gap: 10px; }
.member { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.member.off { opacity: .6; }
.member.add { background: transparent; }
.mname { font-weight: 600; }
.msub { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.mrow { display: flex; gap: 8px; }
.mrow > input, .mrow > select { flex: 1; min-width: 0; }
.mrow .ghost { flex: 0 0 auto; }
.member .ghost { background: var(--bg); border: 1px solid var(--line); }

/* etiquetas */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags p { margin: 0; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 16px; background: rgba(66, 96, 230, .1); color: var(--noche); border: 1px solid rgba(66, 96, 230, .25); font-size: 14px; font-weight: 500; }
.chip button { width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--muted); }
.chip button:active { background: rgba(5, 15, 63, .08); }

/* adjuntos */
.opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 2px; border-radius: 14px; font-size: 12.5px; font-weight: 500; color: var(--noche); }
.opt:active { background: var(--panel); }
.opti { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.preview { display: block; max-width: 100%; max-height: 45vh; margin: 0 auto; border-radius: 14px; object-fit: contain; }
.docbox { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.docbox .mname { overflow-wrap: anywhere; }

/* ---------- menús ---------- */
.menu { display: flex; flex-direction: column; background: var(--card); border-radius: 14px; overflow: hidden; }
.mitem { text-align: left; padding: 14px 16px; font-size: 15.5px; border-bottom: 1px solid var(--line); }
.mitem:last-child { border-bottom: 0; }
.mitem:active { background: #F1F3FB; }
.mitem.danger { color: var(--danger); }
.picklist { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; background: var(--card); border-radius: 14px; }
.pick { display: flex; align-items: center; gap: 12px; padding: 9px 12px; text-align: left; width: 100%; border-bottom: 1px solid var(--line); }
.pick:last-child { border-bottom: 0; }
.pname { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwait { font-size: 12px; color: var(--danger); flex: none; }
.msub.snip { white-space: pre-wrap; color: var(--noche); }
.member textarea, .card textarea { padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); outline: none; resize: vertical; width: 100%; }
.opts { grid-template-columns: repeat(3, 1fr); }
.opti { border: 0; color: #fff; }
.o-doc { background: #7F66FF; } .o-cam { background: #E8466C; } .o-gal { background: #B45CEB; } .o-loc { background: #1FA855; } .o-snip { background: var(--brand); }

/* ---------- ficha del contacto y panel ---------- */
.info { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: 0 0 calc(20px + env(safe-area-inset-bottom)); background: var(--bg); }
.hero { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px 16px; background: var(--card); margin-bottom: 8px; }
.hname { font-size: 21px; font-weight: 600; margin-top: 8px; text-align: center; }
.hphone { color: var(--muted); font-size: 15px; }
.hactions { display: flex; gap: 10px; margin-top: 12px; }
.hact { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; padding: 10px 0; border: 1px solid var(--line); border-radius: 14px; color: var(--brand); font-size: 12.5px; font-weight: 500; text-decoration: none; }
.hact .i { width: 22px; height: 22px; }
.card { background: var(--card); padding: 14px 16px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 10px; }
.card h3 { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--brand); }
.card p { margin: 0; }
.card input, .card select { padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); outline: none; width: 100%; max-width: 100%; min-width: 0; font-size: 16px; }
.card { min-width: 0; overflow: hidden; }
.card input[type="datetime-local"] { -webkit-appearance: none; appearance: none; display: block; min-height: 46px; text-align: left; color: var(--noche); }
.card input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; }
.tform { display: flex; flex-direction: column; gap: 10px; }
.list, .msgs, .sheet > div { overflow-x: hidden; }
.muted { color: var(--muted); font-size: 13.5px; }
.center { text-align: center; }
.task { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; }
.check { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--brand); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.task.done .check { background: var(--brand); }
.task.done .ttitle { text-decoration: line-through; color: var(--muted); }
.tmain { flex: 1; min-width: 0; }
.ttitle { font-weight: 500; }
.tdue { font-size: 12.5px; color: var(--muted); }
.task.late .tdue { color: var(--danger); font-weight: 600; }
.tasks, .notes { display: flex; flex-direction: column; gap: 4px; }
.note { padding: 9px 12px; background: #FFF8DC; border-radius: 10px; }
.ntext { white-space: pre-wrap; font-size: 14px; overflow-wrap: anywhere; }
.ndate { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.gimg { padding: 0; aspect-ratio: 1; overflow: hidden; border-radius: 8px; }
.gimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card a.file { display: block; padding: 9px 12px; border-radius: 10px; background: var(--panel); color: var(--noche); text-decoration: none; font-weight: 500; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.stagebar { display: flex; gap: 4px; }
.stagebar span { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.stagebar span.on { background: var(--brand); }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px; }
.tile { background: var(--card); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow); }
.tile b { font-size: 26px; font-weight: 700; color: var(--noche); }
.tile span { font-size: 12.5px; color: var(--muted); }
.tile.warn b { color: var(--danger); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 500; padding: 4px 6px 8px 0; }
.tbl td { padding: 8px 6px 8px 0; border-top: 1px solid var(--line); }
.tbl td.warn { color: var(--danger); font-weight: 600; }
.top .ic.bell { position: relative; }
.bcount { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E5484D; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.remopen { text-align: left; padding: 0; }
.task.rem { padding: 8px 0; border-bottom: 1px solid var(--line); }
.task.rem:last-child { border-bottom: 0; }
.warncard h3 { color: var(--danger); }
.remhelp { padding: 12px 16px 0; }
.empty { white-space: pre-line; }
/* ---------- tasa y datos de pago ---------- */
.o-usd { background: #1FA855; } .o-pay { background: #E8A317; }
.seg { display: flex; background: var(--panel); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { flex: 1; min-height: 40px; border-radius: 10px; font-weight: 500; color: var(--muted); }
.seg button.on { background: var(--card); color: var(--noche); font-weight: 600; box-shadow: 0 1px 3px rgba(5, 15, 63, .12); }
.convout { font-size: 28px; font-weight: 700; color: var(--noche); text-align: center; padding: 6px 0; }
.rateinfo { text-align: center; }
.warnline { color: #8A5A00 !important; background: #FFF5D6; padding: 8px 10px; border-radius: 10px; }
.paypick { align-items: flex-start; }
.payico { flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--panel); display: grid; place-items: center; font-size: 20px; }
.paytxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.paytxt small { color: var(--muted); font-size: 12.5px; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sheet select, .member select { min-width: 0; }
/* con una hoja abierta, el aviso sale arriba para no tapar los botones */
body:has(.sheet) #toast { bottom: auto; top: calc(14px + env(safe-area-inset-top)); }